From 80082fcc1e49f1e161b67fe0c5e00a235a910721 Mon Sep 17 00:00:00 2001 From: Jonas Daniels Date: Thu, 25 Aug 2022 21:28:50 -0700 Subject: [PATCH 1/8] build --- .../docs/react.useactiveclaimcondition.md | 25 +--- .../docs/react.useclaimconditions.md | 25 +--- .../react.useclaimineligibilityreasons.md | 4 +- .../thirdweb-react/docs/react.uselazymint.md | 4 +- .../docs/react.usemintnftsupply.md | 4 +- .../docs/react.useresetclaimconditions.md | 7 +- .../docs/react.usesetclaimconditions.md | 7 +- .../docs/react.useunclaimednfts.md | 4 +- .../thirdweb-react/docs/react.web3button.md | 2 +- packages/thirdweb-react/etc/react.api.md | 69 ++--------- .../src/components/Web3Button/index.tsx | 112 ++++++++++++------ 11 files changed, 104 insertions(+), 159 deletions(-) diff --git a/packages/thirdweb-react/docs/react.useactiveclaimcondition.md b/packages/thirdweb-react/docs/react.useactiveclaimcondition.md index b4a7e99..db3fc53 100644 --- a/packages/thirdweb-react/docs/react.useactiveclaimcondition.md +++ b/packages/thirdweb-react/docs/react.useactiveclaimcondition.md @@ -12,28 +12,7 @@ Use this to get the active claim conditon for ERC20, ERC721 or ERC1155 based con Signature: ```typescript -export declare function useActiveClaimCondition(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseQueryResult<{ - snapshot?: { - address: string; - maxClaimable: string; - }[] | undefined; - quantityLimitPerTransaction: string; - startTime: Date; - price: import("ethers").BigNumber; - currencyAddress: string; - maxQuantity: string; - waitInSeconds: import("ethers").BigNumber; - merkleRootHash: string | number[]; - availableSupply: string; - currentMintSupply: string; - currencyMetadata: { - symbol: string; - value: import("ethers").BigNumber; - name: string; - decimals: number; - displayValue: string; - }; -}, unknown>; +export declare function useActiveClaimCondition(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseQueryResult; ``` ## Parameters @@ -44,7 +23,7 @@ export declare function useActiveClaimConditionReturns: -import("@tanstack/react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; quantityLimitPerTransaction: string; startTime: Date; price: import("ethers").BigNumber; currencyAddress: string; maxQuantity: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }, unknown> +import("@tanstack/react-query").UseQueryResult<any, unknown> a response object with the currently active claim condition diff --git a/packages/thirdweb-react/docs/react.useclaimconditions.md b/packages/thirdweb-react/docs/react.useclaimconditions.md index 1a26ea3..27a95d8 100644 --- a/packages/thirdweb-react/docs/react.useclaimconditions.md +++ b/packages/thirdweb-react/docs/react.useclaimconditions.md @@ -12,28 +12,7 @@ Use this to get all claim conditons for ERC20, ERC721 or ERC1155 based contracts Signature: ```typescript -export declare function useClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseQueryResult<{ - snapshot?: { - address: string; - maxClaimable: string; - }[] | undefined; - quantityLimitPerTransaction: string; - startTime: Date; - price: import("ethers").BigNumber; - currencyAddress: string; - maxQuantity: string; - waitInSeconds: import("ethers").BigNumber; - merkleRootHash: string | number[]; - availableSupply: string; - currentMintSupply: string; - currencyMetadata: { - symbol: string; - value: import("ethers").BigNumber; - name: string; - decimals: number; - displayValue: string; - }; -}[], unknown>; +export declare function useClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseQueryResult; ``` ## Parameters @@ -44,7 +23,7 @@ export declare function useClaimConditionsReturns: -import("@tanstack/react-query").UseQueryResult<{ snapshot?: { address: string; maxClaimable: string; }\[\] \| undefined; quantityLimitPerTransaction: string; startTime: Date; price: import("ethers").BigNumber; currencyAddress: string; maxQuantity: string; waitInSeconds: import("ethers").BigNumber; merkleRootHash: string \| number\[\]; availableSupply: string; currentMintSupply: string; currencyMetadata: { symbol: string; value: import("ethers").BigNumber; name: string; decimals: number; displayValue: string; }; }\[\], unknown> +import("@tanstack/react-query").UseQueryResult<any, unknown> a response object with the list of claim conditions diff --git a/packages/thirdweb-react/docs/react.useclaimineligibilityreasons.md b/packages/thirdweb-react/docs/react.useclaimineligibilityreasons.md index 2af9957..6bb3456 100644 --- a/packages/thirdweb-react/docs/react.useclaimineligibilityreasons.md +++ b/packages/thirdweb-react/docs/react.useclaimineligibilityreasons.md @@ -12,7 +12,7 @@ Use this to check for reasons that prevent claiming for either ERC20, ERC721 or Signature: ```typescript -export declare function useClaimIneligibilityReasons(...[contract, params, tokenId]: ClaimIneligibilityInputParams): import("@tanstack/react-query").UseQueryResult; +export declare function useClaimIneligibilityReasons(...[contract, params, tokenId]: ClaimIneligibilityInputParams): import("@tanstack/react-query").UseQueryResult; ``` ## Parameters @@ -23,7 +23,7 @@ export declare function useClaimIneligibilityReasonsReturns: -import("@tanstack/react-query").UseQueryResult<import("@thirdweb-dev/sdk/dist/browser").ClaimEligibility\[\], unknown> +import("@tanstack/react-query").UseQueryResult<any, unknown> a response object with the resons for the claim ineligibility diff --git a/packages/thirdweb-react/docs/react.uselazymint.md b/packages/thirdweb-react/docs/react.uselazymint.md index d9ecc9d..403765a 100644 --- a/packages/thirdweb-react/docs/react.uselazymint.md +++ b/packages/thirdweb-react/docs/react.uselazymint.md @@ -14,7 +14,7 @@ Use this to lazy mint a batch of NFTs on your [DropContract](./react.dropcontrac ```typescript export declare function useLazyMint(contract: RequiredParam, onProgress?: (progress: UploadProgressEvent) => void): import("@tanstack/react-query").UseMutationResult(contract: Req Returns: -import("@tanstack/react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| number \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: import("ethers").BigNumber; }>\[\], unknown, { metadatas: NFTMetadataInput\[\]; }, unknown> +import("@tanstack/react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: import("ethers").BigNumber; }>\[\], unknown, { metadatas: NFTMetadataInput\[\]; }, unknown> a mutation object that can be used to lazy mint a batch of NFTs diff --git a/packages/thirdweb-react/docs/react.usemintnftsupply.md b/packages/thirdweb-react/docs/react.usemintnftsupply.md index 7c80ec4..196da65 100644 --- a/packages/thirdweb-react/docs/react.usemintnftsupply.md +++ b/packages/thirdweb-react/docs/react.usemintnftsupply.md @@ -15,7 +15,7 @@ Use this to mint a new NFT on your [NFTContract](./react.nftcontract.md) export declare function useMintNFTSupply(contract: Erc1155): import("@tanstack/react-query").UseMutationResultReturns: -import("@tanstack/react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<{ metadata: { \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| number \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: BigNumber; }; supply: BigNumber; }>, unknown, [MintNFTSupplyParams](./react.mintnftsupplyparams.md), unknown> +import("@tanstack/react-query").UseMutationResult<import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId<{ metadata: { \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: BigNumber; }; supply: BigNumber; }>, unknown, [MintNFTSupplyParams](./react.mintnftsupplyparams.md), unknown> a mutation object that can be used to mint a more supply of a token id to the provided wallet diff --git a/packages/thirdweb-react/docs/react.useresetclaimconditions.md b/packages/thirdweb-react/docs/react.useresetclaimconditions.md index cd353d1..383a92e 100644 --- a/packages/thirdweb-react/docs/react.useresetclaimconditions.md +++ b/packages/thirdweb-react/docs/react.useresetclaimconditions.md @@ -12,10 +12,7 @@ Use this to reset claim conditions on your [NFTContract](./react.nftcontract.md) Signature: ```typescript -export declare function useResetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseMutationResult Promise; -}, "data"> | undefined, unknown, void, unknown>; +export declare function useResetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseMutationResult; ``` ## Parameters @@ -26,7 +23,7 @@ export declare function useResetClaimConditionsReturns: -import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data"> \| undefined, unknown, void, unknown> +import("@tanstack/react-query").UseMutationResult<any, unknown, void, unknown> a mutation object that can be used to reset claim conditions diff --git a/packages/thirdweb-react/docs/react.usesetclaimconditions.md b/packages/thirdweb-react/docs/react.usesetclaimconditions.md index c3398bf..c76c470 100644 --- a/packages/thirdweb-react/docs/react.usesetclaimconditions.md +++ b/packages/thirdweb-react/docs/react.usesetclaimconditions.md @@ -12,10 +12,7 @@ Use this to set claim conditions on your [NFTContract](./react.nftcontract.md) Signature: ```typescript -export declare function useSetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseMutationResult Promise; -}, "data"> | undefined, unknown, SetClaimConditionsParams, unknown>; +export declare function useSetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): import("@tanstack/react-query").UseMutationResult; ``` ## Parameters @@ -26,7 +23,7 @@ export declare function useSetClaimConditionsReturns: -import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data"> \| undefined, unknown, [SetClaimConditionsParams](./react.setclaimconditionsparams.md), unknown> +import("@tanstack/react-query").UseMutationResult<any, unknown, [SetClaimConditionsParams](./react.setclaimconditionsparams.md), unknown> a mutation object that can be used to set claim conditions diff --git a/packages/thirdweb-react/docs/react.useunclaimednfts.md b/packages/thirdweb-react/docs/react.useunclaimednfts.md index abff316..b392823 100644 --- a/packages/thirdweb-react/docs/react.useunclaimednfts.md +++ b/packages/thirdweb-react/docs/react.useunclaimednfts.md @@ -14,7 +14,7 @@ Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. ```typescript export declare function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): import("@tanstack/react-query").UseQueryResult<{ [x: string]: import("@thirdweb-dev/sdk/dist/browser").Json; - name?: string | number | undefined; + name?: string | undefined; description?: string | null | undefined; image?: string | null | undefined; external_url?: string | null | undefined; @@ -33,7 +33,7 @@ export declare function useUnclaimedNFTs(contract: RequiredParam, query Returns: -import("@tanstack/react-query").UseQueryResult<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| number \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: import("ethers").BigNumber; }\[\], unknown> +import("@tanstack/react-query").UseQueryResult<{ \[x: string\]: import("@thirdweb-dev/sdk/dist/browser").Json; name?: string \| undefined; description?: string \| null \| undefined; image?: string \| null \| undefined; external\_url?: string \| null \| undefined; animation\_url?: string \| null \| undefined; uri: string; id: import("ethers").BigNumber; }\[\], unknown> a response object that includes an array of NFTs that are unclaimed diff --git a/packages/thirdweb-react/docs/react.web3button.md b/packages/thirdweb-react/docs/react.web3button.md index b7acd00..8319b54 100644 --- a/packages/thirdweb-react/docs/react.web3button.md +++ b/packages/thirdweb-react/docs/react.web3button.md @@ -14,7 +14,7 @@ The button has to be wrapped in a `ThirdwebProvider` in order to function. Signature: ```typescript -Web3Button: React.FC> +Web3Button: ({ contractAddress, overrides, onSuccess, onError, onSubmit, isDisabled, children, accentColor, colorMode, functionName, params, onExecute, ...themeProps }: PropsWithChildren>) => JSX.Element ``` ## Example diff --git a/packages/thirdweb-react/etc/react.api.md b/packages/thirdweb-react/etc/react.api.md index 92056d3..63b05fb 100644 --- a/packages/thirdweb-react/etc/react.api.md +++ b/packages/thirdweb-react/etc/react.api.md @@ -17,7 +17,6 @@ import { Chain } from './types'; import { ChainId } from '@thirdweb-dev/sdk/dist/browser'; import { ChainOrRpc } from '@thirdweb-dev/sdk/dist/browser'; import { ClaimConditionInput } from '@thirdweb-dev/sdk/dist/browser'; -import { ClaimEligibility } from '@thirdweb-dev/sdk/dist/browser'; import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; import { Connector } from './connectors'; import { ConnectorData } from './connectors'; @@ -71,6 +70,7 @@ import { SignatureDrop } from '@thirdweb-dev/sdk/dist/browser'; import { Signer } from 'ethers'; import { SignerOrProvider } from '@thirdweb-dev/sdk/dist/browser'; import { SmartContract } from '@thirdweb-dev/sdk/dist/browser'; +import { SmartContract as SmartContract_2 } from '@thirdweb-dev/sdk'; import { Split } from '@thirdweb-dev/sdk/dist/browser'; import { SUPPORTED_CHAIN_ID } from '@thirdweb-dev/sdk/dist/browser'; import { ThirdwebSDK } from '@thirdweb-dev/sdk/dist/browser'; @@ -401,28 +401,7 @@ export function useActiveChainId(): SUPPORTED_CHAIN_ID | undefined; // Warning: (ae-forgotten-export) The symbol "ClaimConditionsInputParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // // @beta -export function useActiveClaimCondition(...[contract, tokenId]: ClaimConditionsInputParams): UseQueryResult< { -snapshot?: { -address: string; -maxClaimable: string; -}[] | undefined; -quantityLimitPerTransaction: string; -startTime: Date; -price: BigNumber; -currencyAddress: string; -maxQuantity: string; -waitInSeconds: BigNumber; -merkleRootHash: string | number[]; -availableSupply: string; -currentMintSupply: string; -currencyMetadata: { -symbol: string; -value: BigNumber; -name: string; -decimals: number; -displayValue: string; -}; -}, unknown>; +export function useActiveClaimCondition(...[contract, tokenId]: ClaimConditionsInputParams): UseQueryResult; // @beta export function useActiveListings(contract: RequiredParam, filter?: MarketplaceFilter): UseQueryResult<(AuctionListing | DirectListing)[], unknown>; @@ -518,28 +497,7 @@ type: ListingType.Auction; export function useChainId(): number | undefined; // @beta -export function useClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): UseQueryResult< { -snapshot?: { -address: string; -maxClaimable: string; -}[] | undefined; -quantityLimitPerTransaction: string; -startTime: Date; -price: BigNumber; -currencyAddress: string; -maxQuantity: string; -waitInSeconds: BigNumber; -merkleRootHash: string | number[]; -availableSupply: string; -currentMintSupply: string; -currencyMetadata: { -symbol: string; -value: BigNumber; -name: string; -decimals: number; -displayValue: string; -}; -}[], unknown>; +export function useClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): UseQueryResult; // @beta export function useClaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult[], unknown>; @@ -553,7 +511,7 @@ export function useClaimedNFTSupply(contract: RequiredParam): UseQ // Warning: (ae-forgotten-export) The symbol "ClaimIneligibilityInputParams" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // // @beta -export function useClaimIneligibilityReasons(...[contract, params, tokenId]: ClaimIneligibilityInputParams): UseQueryResult; +export function useClaimIneligibilityReasons(...[contract, params, tokenId]: ClaimIneligibilityInputParams): UseQueryResult; // @beta export function useClaimNFT(contract: RequiredParam): UseMutationResult, unknown, ClaimNFTParams, unknown>; @@ -1485,7 +1443,7 @@ export function useIsAddressRole(contract: // @beta export function useLazyMint(contract: RequiredParam, onProgress?: (progress: UploadProgressEvent) => void): UseMutationResult(contract: RequiredPara export function useMintNFTSupply(contract: Erc1155): UseMutationResult(...[contract, tokenId]: ClaimConditionsInputParams): UseMutationResult Promise; -}, "data"> | undefined, unknown, void, unknown>; +export function useResetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): UseMutationResult; // @public (undocumented) export function useResolvedMediaType(uri?: string): { @@ -1696,10 +1651,7 @@ export function useSDK(): ThirdwebSDK | undefined; export function useSetAllRoleMembers(contract: RequiredParam): UseMutationResult]: string[]; }, unknown>; // @beta -export function useSetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): UseMutationResult Promise; -}, "data"> | undefined, unknown, SetClaimConditionsParams, unknown>; +export function useSetClaimConditions(...[contract, tokenId]: ClaimConditionsInputParams): UseMutationResult; // @public export function useSignatureDrop(contractAddress?: string): SignatureDrop | undefined; @@ -1763,7 +1715,7 @@ data: () => Promise; // @beta export function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult< { [x: string]: Json; -name?: string | number | undefined; +name?: string | undefined; description?: string | null | undefined; image?: string | null | undefined; external_url?: string | null | undefined; @@ -1866,10 +1818,11 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | { options: CoinbaseWalletConnector["options"]; }; +// Warning: (ae-forgotten-export) The symbol "ExecutableFn" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // Warning: (ae-forgotten-export) The symbol "Web3ButtonProps" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts // // @beta -export const Web3Button: React.FC>; +export const Web3Button: ({ contractAddress, overrides, onSuccess, onError, onSubmit, isDisabled, children, accentColor, colorMode, functionName, params, onExecute, ...themeProps }: PropsWithChildren>) => JSX.Element; // Warnings were encountered during analysis: // diff --git a/packages/thirdweb-react/src/components/Web3Button/index.tsx b/packages/thirdweb-react/src/components/Web3Button/index.tsx index 7f251b6..e421aba 100644 --- a/packages/thirdweb-react/src/components/Web3Button/index.tsx +++ b/packages/thirdweb-react/src/components/Web3Button/index.tsx @@ -1,19 +1,28 @@ import { useActiveChainId } from "../../Provider"; -import { useContract, useContractCall } from "../../hooks/async/contracts"; +import { useContract } from "../../hooks/async/contracts"; import { useAddress } from "../../hooks/useAddress"; import { useChainId } from "../../hooks/useChainId"; import { useNetwork } from "../../hooks/useNetwork"; +import { + createCacheKeyWithNetwork, + createContractCacheKey, +} from "../../utils/cache-keys"; import { ConnectWallet } from "../ConnectWallet"; import { Button } from "../shared/Button"; import { ThemeProvider, ThemeProviderProps } from "../shared/ThemeProvider"; -import { TransactionError, TransactionResult } from "@thirdweb-dev/sdk"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { + SmartContract, + TransactionError, + TransactionResult, +} from "@thirdweb-dev/sdk"; import type { CallOverrides } from "ethers"; import { PropsWithChildren, useMemo } from "react"; +import invariant from "tiny-invariant"; -interface Web3ButtonProps extends ThemeProviderProps { +interface SharedWeb3ButtonProps extends ThemeProviderProps { contractAddress: `0x${string}` | `${string}.eth`; - functionName: string; - params?: unknown[] | (() => Promise); + overrides?: CallOverrides; // called with the result onSuccess?: (result: TransactionResult) => void; @@ -25,6 +34,19 @@ interface Web3ButtonProps extends ThemeProviderProps { isDisabled?: boolean; } +type ExecutableFn = (contract: SmartContract) => any; + +type Web3ButtonPropsOptinalProps = + | { + functionName: string; + params?: unknown[] | (() => Promise); + onExecute?: never; + } + | { functionName?: never; params?: never; onExecute: TExecutableFn }; + +type Web3ButtonProps = + SharedWeb3ButtonProps & Web3ButtonPropsOptinalProps; + /** * A component that allows the user to call an on-chain function on a contract. * @@ -46,23 +68,28 @@ interface Web3ButtonProps extends ThemeProviderProps { * * @beta */ -export const Web3Button: React.FC> = ({ +export const Web3Button = ({ contractAddress, - functionName, - params, overrides, onSuccess, onError, onSubmit, isDisabled, children, + accentColor, + colorMode, + functionName, + params, + onExecute, ...themeProps -}) => { +}: PropsWithChildren>) => { const address = useAddress(); const walletChainId = useChainId(); const sdkChainId = useActiveChainId(); const [, switchNetwork] = useNetwork(); + const queryClient = useQueryClient(); + const switchToChainId = useMemo(() => { if (sdkChainId && walletChainId && sdkChainId !== walletChainId) { return sdkChainId; @@ -72,36 +99,49 @@ export const Web3Button: React.FC> = ({ const contractQuery = useContract(contractAddress); - const mutation = useContractCall(contractQuery.contract, functionName); - - const handleClick = async () => { - if (switchToChainId) { - if (switchNetwork) { - await switchNetwork(switchToChainId); - await new Promise((resolve) => setTimeout(resolve, 500)); - } else { - console.warn( - "need to switch chain but connected wallet does not support switching", - ); - return; + const mutation = useMutation( + async () => { + if (switchToChainId) { + if (switchNetwork) { + await switchNetwork(switchToChainId); + await new Promise((resolve) => setTimeout(resolve, 500)); + } else { + throw new Error( + "need to switch chain but connected wallet does not support switching", + ); + } } - } - const vars = typeof params === "function" ? await params() : params; - const withOverrides = - vars && overrides ? [...vars, overrides] : overrides ? [overrides] : vars; - try { - const result = await mutation.mutateAsync(withOverrides); - if (onSuccess) { - onSuccess(result); + if (!contractQuery.contract) { + throw new Error("contract not ready yet"); } - } catch (error) { - console.error("Error calling contract", error); - if (onError) { - onError(error as TransactionError); + if (onExecute) { + return await onExecute(contractQuery.contract); } - } - }; + const vars = typeof params === "function" ? await params() : params; + const withOverrides = + vars && overrides + ? [...vars, overrides] + : overrides + ? [overrides] + : vars; + + invariant(functionName, "functionName is required"); + + return await contractQuery.contract.call(functionName, ...withOverrides); + }, + { + onSuccess, + onError, + onSettled: () => + queryClient.invalidateQueries( + createCacheKeyWithNetwork( + createContractCacheKey(contractAddress), + sdkChainId, + ), + ), + }, + ); if (!address) { return ; } @@ -111,7 +151,7 @@ export const Web3Button: React.FC> = ({