add react-query sample in telescope-with-contract

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/components/ui/nft/list-tab.tsx

@@ -51,14 +51,6 @@ export const ListTab = ({
 
   const { marketplace, sg721Updatable } = useContracts();
 
-  const hooks = marketplace.getReactQueryHooks(marketplaceContract);
-
-  const { useMarketplaceParamsQuery } = hooks;
-
-  useMarketplaceParamsQuery({
-    options: {},
-  });
-
   const handleClick = async () => {
     if (!address) return;
     setIsLoading(true);

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

@@ -14,6 +14,9 @@ import { GasPrice } from '@cosmjs/stargate';
 import { SignerOptions } from '@cosmos-kit/core';
 import { Chain } from '@chain-registry/types';
 import { defaultTheme } from 'config';
+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,29 +40,31 @@ 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: [],
+              },
             },
-          },
-        }}
-        wrappedWithChakra={true}
-        signerOptions={signerOptions}
-      >
-        <ApolloProvider client={client}>
-          <Component {...pageProps} />
-        </ApolloProvider>
-      </ChainProvider>
+          }}
+          wrappedWithChakra={true}
+          signerOptions={signerOptions}
+        >
+          <ApolloProvider client={client}>
+            <Component {...pageProps} />
+          </ApolloProvider>
+        </ChainProvider>
+      </QueryClientProvider>
     </ChakraProvider>
   );
 }

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

@@ -80,7 +80,9 @@ telescope({
           enabled: true,
         },
         reactQuery: {
-          enabled: true
+          enabled: true,
+          version:  'v4',
+          mutations: true,
         },
         useContractsHooks: {
           enabled: true

examples/telescope-with-contracts/src/codegen/Marketplace.client.ts

@@ -1,5 +1,5 @@
 /**
-* This file was automatically generated by @cosmwasm/ts-codegen@latest.
+* This file was automatically generated by @cosmwasm/ts-codegen@0.31.6.
 * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
 * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
 */

examples/telescope-with-contracts/src/codegen/Marketplace.message-composer.ts

@@ -1,5 +1,5 @@
 /**
-* This file was automatically generated by @cosmwasm/ts-codegen@latest.
+* This file was automatically generated by @cosmwasm/ts-codegen@0.31.6.
 * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
 * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
 */

examples/telescope-with-contracts/src/codegen/Marketplace.provider.ts

@@ -1,51 +1,19 @@
 /**
- * This file was automatically generated by @cosmwasm/[email protected].
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run the @cosmwasm/ts-codegen generate command to regenerate this file.
- */
+* This file was automatically generated by @cosmwasm/[email protected].
+* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+* and run the @cosmwasm/ts-codegen generate command to regenerate this file.
+*/
 
-import { UseQueryResult } from 'react-query';
-import { ContractBase, IContractConstructor } from './contractContextBase';
-import {
-  MarketplaceClient,
-  MarketplaceQueryClient,
-} from './Marketplace.client';
-import { MarketplaceMessageComposer } from './Marketplace.message-composer';
-import {
-  IMarketplaceReactQueryHooks,
-  MarketplaceParamsQuery,
-  useMarketplaceParamsQuery,
-} from './Marketplace.react-query';
-import { ParamsResponse } from './Marketplace.types';
-export class Marketplace extends ContractBase<
-  MarketplaceClient,
-  MarketplaceQueryClient,
-  MarketplaceMessageComposer
-> {
+import { ContractBase, IContractConstructor } from "./contractContextBase";
+import { MarketplaceClient, MarketplaceQueryClient } from "./Marketplace.client";
+import { MarketplaceMessageComposer } from "./Marketplace.message-composer";
+export class Marketplace extends ContractBase<MarketplaceClient, MarketplaceQueryClient, MarketplaceMessageComposer> {
   constructor({
     address,
     cosmWasmClient,
-    signingCosmWasmClient,
+    signingCosmWasmClient
   }: IContractConstructor) {
-    super(
-      address,
-      cosmWasmClient,
-      signingCosmWasmClient,
-      MarketplaceClient,
-      MarketplaceQueryClient,
-      MarketplaceMessageComposer
-    );
+    super(address, cosmWasmClient, signingCosmWasmClient, MarketplaceClient, MarketplaceQueryClient, MarketplaceMessageComposer);
   }
 
-  public getReactQueryHooks(contractAddr: string): IMarketplaceReactQueryHooks {
-    const queryClient = this.getQueryClient(contractAddr);
-    return {
-      useMarketplaceParamsQuery({ options }) {
-        return useMarketplaceParamsQuery({
-          client: queryClient,
-          options,
-        });
-      },
-    };
-  }
-}
+}