Merge pull request #124 from cosmology-tech/telescope-with-contracts

Add react query sample code to Telescope with contracts example

Author: Zetazzz

examples/telescope-with-contracts/components/sell-nfts.tsx

@@ -60,6 +60,7 @@ export const SellNfts = () => {
   const transferModalControl = useDisclosure();
   const burnModalControl = useDisclosure();
   const updatePriceModalControl = useDisclosure();
+  const updatePriceModalRQControl = useDisclosure();
   const removeListingModalControl = useDisclosure();
 
   useEffect(() => {
@@ -252,6 +253,7 @@ export const SellNfts = () => {
             transferNft: transferModalControl.onOpen,
             removeListing: removeListingModalControl.onOpen,
             updatePrice: updatePriceModalControl.onOpen,
+            updatePriceRQ: updatePriceModalRQControl.onOpen,
           }}
         />
       )}
@@ -289,6 +291,18 @@ export const SellNfts = () => {
           update={update}
           token={selectedToken}
           price={price}
+          isRQ={false}
+        />
+      )}
+
+      {selectedToken && selectedCollection && price && (
+        <UpdatePriceModal
+          modalControl={updatePriceModalRQControl}
+          collection={selectedCollection}
+          update={update}
+          token={selectedToken}
+          price={price}
+          isRQ={true}
         />
       )}
 

examples/telescope-with-contracts/components/ui/modal/nft-detail-modal.tsx

@@ -52,6 +52,7 @@ export const NftDetailModal = ({
     burn: () => void;
     transferNft: () => void;
     updatePrice: () => void;
+    updatePriceRQ: () => void;
     removeListing: () => void;
   };
 }) => {
@@ -162,7 +163,6 @@ export const NftDetailModal = ({
                 />
               )}
               <SplitText left="Owned by" right={ownerName} mb="18px" />
-
               {token.forSale && token.saleType && (
                 <SplitText
                   left={priceText[token.saleType]}
@@ -175,7 +175,6 @@ export const NftDetailModal = ({
                   mb="24px"
                 />
               )}
-
               {token.forSale ? (
                 <Flex gap="16px" mb="16px">
                   <NormalButton
@@ -203,7 +202,17 @@ export const NftDetailModal = ({
                   mb="16px"
                 />
               )}
-
+              {token.forSale && (
+                <Flex gap="16px" mb="16px">
+                  <NormalButton
+                    onClick={openModals.updatePriceRQ}
+                    size={{ h: '36px', w: '100%' }}
+                    leftIcon={<Icon as={AiOutlineTag} boxSize={4} />}
+                    text="Update Price(React Query)"
+                    type="solid"
+                  />
+                </Flex>
+              )}
               <Flex gap="16px">
                 <SimpleButton
                   content="Transfer"

examples/telescope-with-contracts/components/ui/modal/update-price-modal.tsx

@@ -10,7 +10,7 @@ import {
   Flex,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { coin, exponent, marketplaceContract } from 'config';
 import { useColor, useTransactionToast } from 'hooks';
 import { isGtZero, toDisplayAmount, toRawAmount } from 'utils';
@@ -20,22 +20,32 @@ import { LargeButton } from '../nft/buttons';
 import { SplitText } from '../nft/nft-cards';
 import { Subtitle, Fees } from '../nft';
 import { useContracts } from '../../../src/codegen/contracts-context';
+import { useMarketplaceUpdateAskPriceMutation } from 'src/codegen/Marketplace.react-query';
 
 export const UpdatePriceModal = ({
   modalControl,
   collection,
   token,
   price,
   update,
+  isRQ,
 }: {
   token: Token;
   price: number;
+  isRQ: boolean;
   modalControl: UseDisclosureReturn;
   collection: Collection;
   update: () => void;
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const {
+    isSuccess: isRQSuccess,
+    isError: isRQError,
+    error: rqError,
+    isLoading: isRQLoading,
+    mutate: updateAskPrice,
+  } = useMarketplaceUpdateAskPriceMutation();
 
   const { showToast } = useTransactionToast();
 
@@ -75,6 +85,44 @@ export const UpdatePriceModal = ({
     }
   };
 
+  const handleRQUpdateClick = async () => {
+    try {
+      console.log("react query's working.");
+
+      const marketplaceClient =
+        marketplace.getSigningClient(marketplaceContract);
+      updateAskPrice({
+        client: marketplaceClient,
+        msg: {
+          collection: token.collectionAddr,
+          price: {
+            amount: toRawAmount(inputValue, exponent),
+            denom: coin.base,
+          },
+          tokenId: parseInt(token.tokenId),
+        },
+      });
+    } catch (ex) {
+      showToast(TxResult.Failed, ex);
+      console.error(ex);
+    }
+  };
+
+  useEffect(() => {
+    if (isRQSuccess) {
+      showToast(TxResult.Success);
+      update();
+      closeModal();
+    }
+  }, [isRQSuccess]);
+
+  useEffect(() => {
+    if (isRQError) {
+      showToast(TxResult.Failed, rqError);
+      console.error(rqError);
+    }
+  }, [isRQError, rqError]);
+
   const { textColor, bgColor } = useColor();
 
   return (
@@ -140,9 +188,9 @@ export const UpdatePriceModal = ({
 
             <LargeButton
               width="100%"
-              btnContent="Update"
-              handleClick={handleUpdateClick}
-              isLoading={isLoading}
+              btnContent={`Update${isRQ ? '(ReactQuery)' : ''}`}
+              handleClick={isRQ ? handleRQUpdateClick : handleUpdateClick}
+              isLoading={isLoading || isRQLoading}
               disabled={
                 !inputValue ||
                 new BigNumber(inputValue).isEqualTo(0) ||

examples/telescope-with-contracts/package.json

@@ -48,6 +48,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "4.8.0",
+    "react-query": "3.39.3",
     "stargazejs": "0.14.0"
   },
   "devDependencies": {

examples/telescope-with-contracts/pages/_app.tsx

@@ -14,6 +14,9 @@ import { GasPrice } from '@cosmjs/stargate';
 import { SignerOptions } from '@cosmos-kit/core';
 import { defaultTheme } from 'config';
 import '@interchain-ui/react/styles';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 const client = new ApolloClient({
   uri: 'https://constellations-api.mainnet.stargaze-apis.com/graphql',
@@ -37,28 +40,30 @@ function CreateCosmosApp({ Component, pageProps }: AppProps) {
 
   return (
     <ChakraProvider theme={defaultTheme}>
-      <ChainProvider
-        chains={chains}
-        assetLists={assets}
-        wallets={[...keplrWallets, ...cosmostationWallets, ...leapWallets]}
-        walletConnectOptions={{
-          signClient: {
-            projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
-            relayUrl: 'wss://relay.walletconnect.org',
-            metadata: {
-              name: 'CosmosKit Template',
-              description: 'CosmosKit dapp template',
-              url: 'https://docs.cosmoskit.com/',
-              icons: [],
+      <QueryClientProvider client={queryClient}>
+        <ChainProvider
+          chains={chains}
+          assetLists={assets}
+          wallets={[...keplrWallets, ...cosmostationWallets, ...leapWallets]}
+          walletConnectOptions={{
+            signClient: {
+              projectId: 'a8510432ebb71e6948cfd6cde54b70f7',
+              relayUrl: 'wss://relay.walletconnect.org',
+              metadata: {
+                name: 'CosmosKit Template',
+                description: 'CosmosKit dapp template',
+                url: 'https://docs.cosmoskit.com/',
+                icons: [],
+              },
             },
-          },
-        }}
-        signerOptions={signerOptions}
-      >
-        <ApolloProvider client={client}>
-          <Component {...pageProps} />
-        </ApolloProvider>
-      </ChainProvider>
+          }}
+          signerOptions={signerOptions}
+        >
+          <ApolloProvider client={client}>
+            <Component {...pageProps} />
+          </ApolloProvider>
+        </ChainProvider>
+      </QueryClientProvider>
     </ChakraProvider>
   );
 }

examples/telescope-with-contracts/scripts/codegen.js

@@ -79,6 +79,11 @@ telescope({
         messageComposer: {
           enabled: true,
         },
+        reactQuery: {
+          enabled: true,
+          version:  'v4',
+          mutations: true,
+        },
         useContractsHooks: {
           enabled: true
         }