From ae8b00926174775b499453646c7b2b93326ce65f Mon Sep 17 00:00:00 2001 From: Nacho Iacovino Date: Tue, 2 Aug 2022 02:58:43 +0200 Subject: [PATCH 1/4] Add transfer hooks --- src/hooks/async/token.ts | 116 +++++++++++++++++++++++++++++++++++++-- src/types.ts | 6 +- 2 files changed, 115 insertions(+), 7 deletions(-) diff --git a/src/hooks/async/token.ts b/src/hooks/async/token.ts index fac3f74..4b14b0c 100644 --- a/src/hooks/async/token.ts +++ b/src/hooks/async/token.ts @@ -2,7 +2,7 @@ import { useActiveChainId } from "../../Provider"; import { ClaimTokenParams, RequiredParam, - TokenMintParams, + TokenParams, WalletAddress, } from "../../types"; import { @@ -115,10 +115,10 @@ export function useMintToken(contract: RequiredParam) { const queryClient = useQueryClient(); return useMutation( - (data: TokenMintParams) => { - const { to, amount } = data; + (data: TokenParams) => { + const { toAddress, amount } = data; invariant(contract?.mint?.to, "contract does not support mint.to"); - return contract.mint.to(to, amount); + return contract.mint.to(toAddress, amount); }, { onSettled: () => @@ -189,3 +189,111 @@ export function useClaimToken( }, ); } + +/** + * Use this to mint a new NFT on your ERC20 contract + * + * @example + * ```jsx + * const Component = () => { + * const { + * mutate: mintNft, + * isLoading, + * error, + * } = useMintToken(">>YourERC20ContractInstance<<"); + * + * if (error) { + * console.error("failed to mint nft", error); + * } + * + * return ( + * + * ); + * }; + * ``` + * + * @param contract - an instance of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) + * @returns a mutation object that can be used to mint a new NFT token to the connected wallet + * @beta + */ +export function useTransferToken(contract: RequiredParam) { + const activeChainId = useActiveChainId(); + const contractAddress = contract?.getAddress(); + const queryClient = useQueryClient(); + + return useMutation( + (data: TokenParams) => { + const { toAddress, amount } = data; + invariant(contract?.transfer, "contract does not support transfer"); + return contract.transfer(toAddress, amount); + }, + { + onSettled: () => + invalidateContractAndBalances( + queryClient, + contractAddress, + activeChainId, + ), + }, + ); +} + +/** + * Use this to mint a new NFT on your ERC20 contract + * + * @example + * ```jsx + * const Component = () => { + * const { + * mutate: mintNft, + * isLoading, + * error, + * } = useMintToken(">>YourERC20ContractInstance<<"); + * + * if (error) { + * console.error("failed to mint nft", error); + * } + * + * return ( + * + * ); + * }; + * ``` + * + * @param contract - an instance of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) + * @returns a mutation object that can be used to mint a new NFT token to the connected wallet + * @beta + */ +export function useTransferBatchToken(contract: RequiredParam) { + const activeChainId = useActiveChainId(); + const contractAddress = contract?.getAddress(); + const queryClient = useQueryClient(); + + return useMutation( + (data: TokenParams[]) => { + invariant( + contract?.transferBatch, + "contract does not support transferBatch", + ); + return contract.transferBatch(data); + }, + { + onSettled: () => + invalidateContractAndBalances( + queryClient, + contractAddress, + activeChainId, + ), + }, + ); +} diff --git a/src/types.ts b/src/types.ts index d7a2e37..a2a915f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -34,12 +34,12 @@ export type WalletAddress = string; export type ContractAddress = string; /** - * The parameters to pass to the nft mint function. + * The parameters to pass to the nft mint and transfer functions. * * @beta */ -export type TokenMintParams = { - to: WalletAddress; +export type TokenParams = { + toAddress: WalletAddress; amount: string | number; }; From d259cb7c77db1304ac3149f9a7c7637967e03f10 Mon Sep 17 00:00:00 2001 From: Nacho Iacovino Date: Tue, 2 Aug 2022 03:03:31 +0200 Subject: [PATCH 2/4] yarn build --- docs/react.md | 4 +- ...okenmintparams.md => react.tokenparams.md} | 10 ++-- docs/react.useminttoken.md | 4 +- docs/react.usetransferbatchtoken.md | 55 ++++++++++++++++++ docs/react.usetransfertoken.md | 58 +++++++++++++++++++ etc/react.api.md | 15 ++++- 6 files changed, 135 insertions(+), 11 deletions(-) rename docs/{react.tokenmintparams.md => react.tokenparams.md} (67%) create mode 100644 docs/react.usetransferbatchtoken.md create mode 100644 docs/react.usetransfertoken.md diff --git a/docs/react.md b/docs/react.md index 84f3a43..d6ac6ee 100644 --- a/docs/react.md +++ b/docs/react.md @@ -107,6 +107,8 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react" | [useTokenSupply(contract)](./react.usetokensupply.md) | (BETA) Use this to get a the total supply of your Token contract. | | [useTotalCirculatingSupply(\[contract, tokenId\])](./react.usetotalcirculatingsupply.md) |

(BETA) Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md).

\*

| | [useTotalCount(contract)](./react.usetotalcount.md) | (BETA) Use this to get a the number of tokens in your [NFTContract](./react.nftcontract.md). | +| [useTransferBatchToken(contract)](./react.usetransferbatchtoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | +| [useTransferToken(contract)](./react.usetransfertoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | | [useUnclaimedNFTs(contract, queryParams)](./react.useunclaimednfts.md) | (BETA) Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. | | [useUnclaimedNFTSupply(contract)](./react.useunclaimednftsupply.md) | | | [useUpdateMetadata(contract)](./react.useupdatemetadata.md) | (BETA) Use this to update the metadata of your | @@ -159,7 +161,7 @@ import { useWalletConnect } from "@thirdweb-dev/react" | [NFT](./react.nft.md) | (BETA) A single NFT token | | [NFTContract](./react.nftcontract.md) | (BETA) The possible NFT contract types. | | [RequiredParam](./react.requiredparam.md) | (BETA) Makes a parameter required to be passed, but still allowes it to be undefined. | -| [TokenMintParams](./react.tokenmintparams.md) | (BETA) The parameters to pass to the nft mint function. | +| [TokenParams](./react.tokenparams.md) | (BETA) The parameters to pass to the nft mint and transfer functions. | | [useNFTBalanceParams](./react.usenftbalanceparams.md) | (BETA) The params to pass to useNftBalance. | | [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md) | (BETA) The params to pass to useTotalCirculatingSupply. | | [WalletAddress](./react.walletaddress.md) | (BETA) A wallet address. | diff --git a/docs/react.tokenmintparams.md b/docs/react.tokenparams.md similarity index 67% rename from docs/react.tokenmintparams.md rename to docs/react.tokenparams.md index 1f24d64..177926c 100644 --- a/docs/react.tokenmintparams.md +++ b/docs/react.tokenparams.md @@ -1,19 +1,19 @@ -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [TokenMintParams](./react.tokenmintparams.md) +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [TokenParams](./react.tokenparams.md) -## TokenMintParams type +## TokenParams type > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -The parameters to pass to the nft mint function. +The parameters to pass to the nft mint and transfer functions. Signature: ```typescript -export declare type TokenMintParams = { - to: WalletAddress; +export declare type TokenParams = { + toAddress: WalletAddress; amount: string | number; }; ``` diff --git a/docs/react.useminttoken.md b/docs/react.useminttoken.md index ccef132..6dc8481 100644 --- a/docs/react.useminttoken.md +++ b/docs/react.useminttoken.md @@ -15,7 +15,7 @@ Use this to mint a new NFT on your ERC20 contract export declare function useMintToken(contract: RequiredParam): import("@tanstack/react-query").UseMutationResult Promise; -}, "data">, unknown, TokenMintParams, unknown>; +}, "data">, unknown, TokenParams, unknown>; ``` ## Parameters @@ -26,7 +26,7 @@ export declare function useMintToken(contract: RequiredParam): import("@t Returns: -import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenMintParams](./react.tokenmintparams.md), unknown> +import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenParams](./react.tokenparams.md), unknown> a mutation object that can be used to mint a new NFT token to the connected wallet diff --git a/docs/react.usetransferbatchtoken.md b/docs/react.usetransferbatchtoken.md new file mode 100644 index 0000000..76c608d --- /dev/null +++ b/docs/react.usetransferbatchtoken.md @@ -0,0 +1,55 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useTransferBatchToken](./react.usetransferbatchtoken.md) + +## useTransferBatchToken() function + +> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. +> + +Use this to mint a new NFT on your ERC20 contract + +Signature: + +```typescript +export declare function useTransferBatchToken(contract: RequiredParam): import("@tanstack/react-query").UseMutationResult; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instance of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) | + +Returns: + +import("@tanstack/react-query").UseMutationResult<void, unknown, [TokenParams](./react.tokenparams.md)\[\], unknown> + +a mutation object that can be used to mint a new NFT token to the connected wallet + +## Example + + +```jsx +const Component = () => { + const { + mutate: mintNft, + isLoading, + error, + } = useMintToken(">>YourERC20ContractInstance<<"); + + if (error) { + console.error("failed to mint nft", error); + } + + return ( + + ); +}; +``` + diff --git a/docs/react.usetransfertoken.md b/docs/react.usetransfertoken.md new file mode 100644 index 0000000..0e2cc46 --- /dev/null +++ b/docs/react.usetransfertoken.md @@ -0,0 +1,58 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useTransferToken](./react.usetransfertoken.md) + +## useTransferToken() function + +> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. +> + +Use this to mint a new NFT on your ERC20 contract + +Signature: + +```typescript +export declare function useTransferToken(contract: RequiredParam): import("@tanstack/react-query").UseMutationResult Promise; +}, "data">, unknown, TokenParams, unknown>; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| contract | [RequiredParam](./react.requiredparam.md)<Erc20> | an instance of a contract that extends the ERC20 spec (token, token drop, custom contract that follows the ERC20 spec) | + +Returns: + +import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenParams](./react.tokenparams.md), unknown> + +a mutation object that can be used to mint a new NFT token to the connected wallet + +## Example + + +```jsx +const Component = () => { + const { + mutate: mintNft, + isLoading, + error, + } = useMintToken(">>YourERC20ContractInstance<<"); + + if (error) { + console.error("failed to mint nft", error); + } + + return ( + + ); +}; +``` + diff --git a/etc/react.api.md b/etc/react.api.md index 4b57c54..e11afad 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -291,8 +291,8 @@ export interface ThirdwebSDKProviderProps extends Pick(contract: RequiredPara export function useMintToken(contract: RequiredParam): UseMutationResult Promise; -}, "data">, unknown, TokenMintParams, unknown>; +}, "data">, unknown, TokenParams, unknown>; // @public export function useMultiwrap(contractAddress?: string): Multiwrap | undefined; @@ -1569,6 +1569,15 @@ export type useTotalCirculatingSupplyParams = TContract extends Erc11 // @beta export function useTotalCount(contract: RequiredParam): UseQueryResult; +// @beta +export function useTransferBatchToken(contract: RequiredParam): UseMutationResult; + +// @beta +export function useTransferToken(contract: RequiredParam): UseMutationResult Promise; +}, "data">, unknown, TokenParams, unknown>; + // @beta export function useUnclaimedNFTs(contract: RequiredParam, queryParams?: QueryAllParams): UseQueryResult< { [x: string]: Json; From caf57bb8015466bfbee213a85da5b554498a8428 Mon Sep 17 00:00:00 2001 From: Nacho Iacovino Date: Wed, 3 Aug 2022 02:05:18 +0200 Subject: [PATCH 3/4] Fix docs, fix breaking changes --- docs/react.md | 13 +++++---- docs/react.tokenmintparams.md | 21 ++++++++++++++ docs/react.tokenparams.md | 2 +- docs/react.useclaimtoken.md | 2 +- docs/react.useminttoken.md | 12 ++++---- docs/react.usetokenbalance.md | 2 +- docs/react.usetokensupply.md | 2 +- docs/react.usetransferbatchtoken.md | 12 ++++---- docs/react.usetransfertoken.md | 12 ++++---- docs/snippets.json | 6 ++-- etc/react.api.md | 12 ++++++-- src/hooks/async/token.ts | 45 +++++++++++++++-------------- src/types.ts | 12 +++++++- 13 files changed, 96 insertions(+), 57 deletions(-) create mode 100644 docs/react.tokenmintparams.md diff --git a/docs/react.md b/docs/react.md index d6ac6ee..86c0d8f 100644 --- a/docs/react.md +++ b/docs/react.md @@ -77,7 +77,7 @@ import { useMetamask } from "@thirdweb-dev/react" ``` | | [useMintNFT(contract)](./react.usemintnft.md) | (BETA) Use this to mint a new NFT on your [NFTContract](./react.nftcontract.md) | -| [useMintToken(contract)](./react.useminttoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | +| [useMintToken(contract)](./react.useminttoken.md) | (BETA) Use this to mint new tokens on your contract | | [useMultiwrap(contractAddress)](./react.usemultiwrap.md) | Hook for getting an instance of an Multiwrap contract. This contract is an ERC721 in which you can wrap ERC721, ERC1155 and ERC20 tokens. | | [useNetwork()](./react.usenetwork.md) | Hook for getting metadata about the network the current wallet is connected to and switching networks | | [useNetworkMismatch()](./react.usenetworkmismatch.md) |

Hook for checking whether the connected wallet is on the correct network specified by the desiredChainId passed to the <ThirdwebProvider />.

@@ -103,12 +103,12 @@ import { useNetworkMistmatch } from "@thirdweb-dev/react" | [useSignatureDrop(contractAddress)](./react.usesignaturedrop.md) | Hook for getting an instance of an SignatureDrop contract. This contract is meant to interface with ERC721 compliant NFTs that can be lazily minted. | | [useSplit(contractAddress)](./react.usesplit.md) | Hook for getting an instance of a Split contract. This contract supports fund distribution to multiple parties. | | [useToken(contractAddress)](./react.usetoken.md) | Hook for getting an instance of an Token contract. This contract supports ERC20 compliant tokens. | -| [useTokenBalance(contract, walletAddress)](./react.usetokenbalance.md) | (BETA) Use this to get the balance of your Token contract for a given address. | -| [useTokenSupply(contract)](./react.usetokensupply.md) | (BETA) Use this to get a the total supply of your Token contract. | +| [useTokenBalance(contract, walletAddress)](./react.usetokenbalance.md) | (BETA) Use this to get the balance of your contract for a given address. | +| [useTokenSupply(contract)](./react.usetokensupply.md) | (BETA) Use this to get a the total supply of your contract. | | [useTotalCirculatingSupply(\[contract, tokenId\])](./react.usetotalcirculatingsupply.md) |

(BETA) Use this to get a the total (minted) supply of your [NFTContract](./react.nftcontract.md).

\*

| | [useTotalCount(contract)](./react.usetotalcount.md) | (BETA) Use this to get a the number of tokens in your [NFTContract](./react.nftcontract.md). | -| [useTransferBatchToken(contract)](./react.usetransferbatchtoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | -| [useTransferToken(contract)](./react.usetransfertoken.md) | (BETA) Use this to mint a new NFT on your ERC20 contract | +| [useTransferBatchToken(contract)](./react.usetransferbatchtoken.md) | (BETA) Use this to transfer batch tokens on your contract | +| [useTransferToken(contract)](./react.usetransfertoken.md) | (BETA) Use this to transfer tokens on your contract | | [useUnclaimedNFTs(contract, queryParams)](./react.useunclaimednfts.md) | (BETA) Use this to get a list of \*unclaimed\* NFT tokens of your ERC721 Drop contract. | | [useUnclaimedNFTSupply(contract)](./react.useunclaimednftsupply.md) | | | [useUpdateMetadata(contract)](./react.useupdatemetadata.md) | (BETA) Use this to update the metadata of your | @@ -161,7 +161,8 @@ import { useWalletConnect } from "@thirdweb-dev/react" | [NFT](./react.nft.md) | (BETA) A single NFT token | | [NFTContract](./react.nftcontract.md) | (BETA) The possible NFT contract types. | | [RequiredParam](./react.requiredparam.md) | (BETA) Makes a parameter required to be passed, but still allowes it to be undefined. | -| [TokenParams](./react.tokenparams.md) | (BETA) The parameters to pass to the nft mint and transfer functions. | +| [TokenMintParams](./react.tokenmintparams.md) | (BETA) The parameters to pass to the NFT mint functions. | +| [TokenParams](./react.tokenparams.md) | (BETA) The parameters to pass to the NFT transfer functions. | | [useNFTBalanceParams](./react.usenftbalanceparams.md) | (BETA) The params to pass to useNftBalance. | | [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md) | (BETA) The params to pass to useTotalCirculatingSupply. | | [WalletAddress](./react.walletaddress.md) | (BETA) A wallet address. | diff --git a/docs/react.tokenmintparams.md b/docs/react.tokenmintparams.md new file mode 100644 index 0000000..9e13203 --- /dev/null +++ b/docs/react.tokenmintparams.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [TokenMintParams](./react.tokenmintparams.md) + +## TokenMintParams type + +> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. +> + +The parameters to pass to the NFT mint functions. + +Signature: + +```typescript +export declare type TokenMintParams = { + to: WalletAddress; + amount: string | number; +}; +``` +References: [WalletAddress](./react.walletaddress.md) + diff --git a/docs/react.tokenparams.md b/docs/react.tokenparams.md index 177926c..c261d4d 100644 --- a/docs/react.tokenparams.md +++ b/docs/react.tokenparams.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -The parameters to pass to the nft mint and transfer functions. +The parameters to pass to the NFT transfer functions. Signature: diff --git a/docs/react.useclaimtoken.md b/docs/react.useclaimtoken.md index 5422ce9..ae701b2 100644 --- a/docs/react.useclaimtoken.md +++ b/docs/react.useclaimtoken.md @@ -48,7 +48,7 @@ const Component = () => { return ( diff --git a/docs/react.useminttoken.md b/docs/react.useminttoken.md index 6dc8481..7932240 100644 --- a/docs/react.useminttoken.md +++ b/docs/react.useminttoken.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -Use this to mint a new NFT on your ERC20 contract +Use this to mint new tokens on your contract Signature: @@ -15,7 +15,7 @@ Use this to mint a new NFT on your ERC20 contract export declare function useMintToken(contract: RequiredParam): import("@tanstack/react-query").UseMutationResult Promise; -}, "data">, unknown, TokenParams, unknown>; +}, "data">, unknown, TokenMintParams, unknown>; ``` ## Parameters @@ -26,7 +26,7 @@ export declare function useMintToken(contract: RequiredParam): import("@t Returns: -import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenParams](./react.tokenparams.md), unknown> +import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenMintParams](./react.tokenmintparams.md), unknown> a mutation object that can be used to mint a new NFT token to the connected wallet @@ -36,19 +36,19 @@ a mutation object that can be used to mint a new NFT token to the connected wall ```jsx const Component = () => { const { - mutate: mintNft, + mutate: mintTokens, isLoading, error, } = useMintToken(">>YourERC20ContractInstance<<"); if (error) { - console.error("failed to mint nft", error); + console.error("failed to mint tokens", error); } return ( diff --git a/docs/react.usetokenbalance.md b/docs/react.usetokenbalance.md index 809ac21..80bd951 100644 --- a/docs/react.usetokenbalance.md +++ b/docs/react.usetokenbalance.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -Use this to get the balance of your Token contract for a given address. +Use this to get the balance of your contract for a given address. Signature: diff --git a/docs/react.usetokensupply.md b/docs/react.usetokensupply.md index d4e7887..a2aef55 100644 --- a/docs/react.usetokensupply.md +++ b/docs/react.usetokensupply.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -Use this to get a the total supply of your Token contract. +Use this to get a the total supply of your contract. Signature: diff --git a/docs/react.usetransferbatchtoken.md b/docs/react.usetransferbatchtoken.md index 76c608d..34504ca 100644 --- a/docs/react.usetransferbatchtoken.md +++ b/docs/react.usetransferbatchtoken.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -Use this to mint a new NFT on your ERC20 contract +Use this to transfer batch tokens on your contract Signature: @@ -33,21 +33,21 @@ a mutation object that can be used to mint a new NFT token to the connected wall ```jsx const Component = () => { const { - mutate: mintNft, + mutate: transferBatchTokens, isLoading, error, - } = useMintToken(">>YourERC20ContractInstance<<"); + } = useTransferToken(">>YourERC20ContractInstance<<"); if (error) { - console.error("failed to mint nft", error); + console.error("failed to transfer batch tokens", error); } return ( ); }; diff --git a/docs/react.usetransfertoken.md b/docs/react.usetransfertoken.md index 0e2cc46..2dd1895 100644 --- a/docs/react.usetransfertoken.md +++ b/docs/react.usetransfertoken.md @@ -7,7 +7,7 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -Use this to mint a new NFT on your ERC20 contract +Use this to transfer tokens on your contract Signature: @@ -36,21 +36,21 @@ a mutation object that can be used to mint a new NFT token to the connected wall ```jsx const Component = () => { const { - mutate: mintNft, + mutate: transferTokens, isLoading, error, - } = useMintToken(">>YourERC20ContractInstance<<"); + } = useTransferToken(">>YourERC20ContractInstance<<"); if (error) { - console.error("failed to mint nft", error); + console.error("failed to transfer tokens", error); } return ( ); }; diff --git a/docs/snippets.json b/docs/snippets.json index f317900..d8da7ed 100644 --- a/docs/snippets.json +++ b/docs/snippets.json @@ -238,7 +238,7 @@ }, { "name": "useClaimToken", - "example": "const Component = () => {\n const {\n mutate: claimTokens,\n isLoading,\n error,\n } = useClaimToken(TokenDropContract);\n\n if (error) {\n console.error(\"failed to claim tokens\", error);\n }\n\n return (\n claimTokens({to: \"0x...\", amount: 100})}\n >\n Claim Tokens!\n \n );\n};", + "example": "const Component = () => {\n const {\n mutate: claimTokens,\n isLoading,\n error,\n } = useClaimToken(TokenDropContract);\n\n if (error) {\n console.error(\"failed to claim tokens\", error);\n }\n\n return (\n claimTokens({ to: \"0x...\", amount: 100 })}\n >\n Claim Tokens!\n \n );\n};", "reference": "https://portal.thirdweb.com/react/react.useclaimtoken" }, { @@ -423,7 +423,7 @@ }, { "name": "useClaimToken", - "example": "const Component = () => {\n const {\n mutate: claimTokens,\n isLoading,\n error,\n } = useClaimToken(TokenDropContract);\n\n if (error) {\n console.error(\"failed to claim tokens\", error);\n }\n\n return (\n claimTokens({to: \"0x...\", amount: 100})}\n >\n Claim Tokens!\n \n );\n};", + "example": "const Component = () => {\n const {\n mutate: claimTokens,\n isLoading,\n error,\n } = useClaimToken(TokenDropContract);\n\n if (error) {\n console.error(\"failed to claim tokens\", error);\n }\n\n return (\n claimTokens({ to: \"0x...\", amount: 100 })}\n >\n Claim Tokens!\n \n );\n};", "reference": "https://portal.thirdweb.com/react/react.useclaimtoken" }, { @@ -527,7 +527,7 @@ "subhooks": [ { "name": "useMintToken", - "example": "const Component = () => {\n const {\n mutate: mintNft,\n isLoading,\n error,\n } = useMintToken(\">>YourERC20ContractInstance<<\");\n\n if (error) {\n console.error(\"failed to mint nft\", error);\n }\n\n return (\n mintNft({ name: \"My awesome NFT!\" })}\n >\n Mint!\n \n );\n};", + "example": "const Component = () => {\n const {\n mutate: mintTokens,\n isLoading,\n error,\n } = useMintToken(\">>YourERC20ContractInstance<<\");\n\n if (error) {\n console.error(\"failed to mint tokens\", error);\n }\n\n return (\n mintTokens({ to: \"0x...\", amount: 1000 })}\n >\n Mint!\n \n );\n};", "reference": "https://portal.thirdweb.com/react/react.useminttoken" }, { diff --git a/etc/react.api.md b/etc/react.api.md index e11afad..00310e5 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -290,6 +290,12 @@ export interface ThirdwebSDKProviderProps extends Pick(contract: RequiredPara export function useMintToken(contract: RequiredParam): UseMutationResult Promise; -}, "data">, unknown, TokenParams, unknown>; +}, "data">, unknown, TokenMintParams, unknown>; // @public export function useMultiwrap(contractAddress?: string): Multiwrap | undefined; @@ -1685,8 +1691,8 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | { // dist/hooks/async/roles.d.ts:126:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // dist/hooks/async/roles.d.ts:161:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // dist/hooks/useNetwork.d.ts:48:5 - (ae-forgotten-export) The symbol "SwitchChainError" needs to be exported by the entry point index.d.ts -// dist/types.d.ts:148:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta -// dist/types.d.ts:154:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/types.d.ts:157:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/types.d.ts:163:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta // (No @packageDocumentation comment for this package) diff --git a/src/hooks/async/token.ts b/src/hooks/async/token.ts index 4b14b0c..fed0a54 100644 --- a/src/hooks/async/token.ts +++ b/src/hooks/async/token.ts @@ -2,6 +2,7 @@ import { useActiveChainId } from "../../Provider"; import { ClaimTokenParams, RequiredParam, + TokenMintParams, TokenParams, WalletAddress, } from "../../types"; @@ -19,7 +20,7 @@ import invariant from "tiny-invariant"; /** **********************/ /** - * Use this to get a the total supply of your Token contract. + * Use this to get a the total supply of your {@link Erc20} contract. * * @example * ```javascript @@ -45,7 +46,7 @@ export function useTokenSupply(contract: RequiredParam) { } /** - * Use this to get the balance of your Token contract for a given address. + * Use this to get the balance of your {@link Erc20} contract for a given address. * * @example * ```javascript @@ -79,25 +80,25 @@ export function useTokenBalance( /** **********************/ /** - * Use this to mint a new NFT on your ERC20 contract + * Use this to mint new tokens on your {@link Erc20} contract * * @example * ```jsx * const Component = () => { * const { - * mutate: mintNft, + * mutate: mintTokens, * isLoading, * error, * } = useMintToken(">>YourERC20ContractInstance<<"); * * if (error) { - * console.error("failed to mint nft", error); + * console.error("failed to mint tokens", error); * } * * return ( * @@ -115,10 +116,10 @@ export function useMintToken(contract: RequiredParam) { const queryClient = useQueryClient(); return useMutation( - (data: TokenParams) => { - const { toAddress, amount } = data; + (data: TokenMintParams) => { + const { to, amount } = data; invariant(contract?.mint?.to, "contract does not support mint.to"); - return contract.mint.to(toAddress, amount); + return contract.mint.to(to, amount); }, { onSettled: () => @@ -150,7 +151,7 @@ export function useMintToken(contract: RequiredParam) { * return ( * @@ -191,27 +192,27 @@ export function useClaimToken( } /** - * Use this to mint a new NFT on your ERC20 contract + * Use this to transfer tokens on your {@link Erc20} contract * * @example * ```jsx * const Component = () => { * const { - * mutate: mintNft, + * mutate: transferTokens, * isLoading, * error, - * } = useMintToken(">>YourERC20ContractInstance<<"); + * } = useTransferToken(">>YourERC20ContractInstance<<"); * * if (error) { - * console.error("failed to mint nft", error); + * console.error("failed to transfer tokens", error); * } * * return ( * * ); * }; @@ -244,27 +245,27 @@ export function useTransferToken(contract: RequiredParam) { } /** - * Use this to mint a new NFT on your ERC20 contract + * Use this to transfer batch tokens on your {@link Erc20} contract * * @example * ```jsx * const Component = () => { * const { - * mutate: mintNft, + * mutate: transferBatchTokens, * isLoading, * error, - * } = useMintToken(">>YourERC20ContractInstance<<"); + * } = useTransferToken(">>YourERC20ContractInstance<<"); * * if (error) { - * console.error("failed to mint nft", error); + * console.error("failed to transfer batch tokens", error); * } * * return ( * * ); * }; diff --git a/src/types.ts b/src/types.ts index a2a915f..679da84 100644 --- a/src/types.ts +++ b/src/types.ts @@ -34,7 +34,17 @@ export type WalletAddress = string; export type ContractAddress = string; /** - * The parameters to pass to the nft mint and transfer functions. + * The parameters to pass to the NFT mint functions. + * + * @beta + */ +export type TokenMintParams = { + to: WalletAddress; + amount: string | number; +}; + +/** + * The parameters to pass to the NFT transfer functions. * * @beta */ From 56b960a110045470d406425f3da8ab9be3196089 Mon Sep 17 00:00:00 2001 From: Nacho Iacovino Date: Wed, 3 Aug 2022 19:27:46 +0200 Subject: [PATCH 4/4] Unify interface --- docs/react.md | 3 +-- docs/react.tokenmintparams.md | 21 --------------------- docs/react.tokenparams.md | 4 ++-- docs/react.useminttoken.md | 4 ++-- docs/react.usetransferbatchtoken.md | 2 +- docs/react.usetransfertoken.md | 2 +- etc/react.api.md | 14 ++++---------- src/hooks/async/token.ts | 18 +++++++++++------- src/types.ts | 14 ++------------ 9 files changed, 24 insertions(+), 58 deletions(-) delete mode 100644 docs/react.tokenmintparams.md diff --git a/docs/react.md b/docs/react.md index 86c0d8f..530b15f 100644 --- a/docs/react.md +++ b/docs/react.md @@ -161,8 +161,7 @@ import { useWalletConnect } from "@thirdweb-dev/react" | [NFT](./react.nft.md) | (BETA) A single NFT token | | [NFTContract](./react.nftcontract.md) | (BETA) The possible NFT contract types. | | [RequiredParam](./react.requiredparam.md) | (BETA) Makes a parameter required to be passed, but still allowes it to be undefined. | -| [TokenMintParams](./react.tokenmintparams.md) | (BETA) The parameters to pass to the NFT mint functions. | -| [TokenParams](./react.tokenparams.md) | (BETA) The parameters to pass to the NFT transfer functions. | +| [TokenParams](./react.tokenparams.md) | (BETA) The parameters to pass to the mint and transfer functions. | | [useNFTBalanceParams](./react.usenftbalanceparams.md) | (BETA) The params to pass to useNftBalance. | | [useTotalCirculatingSupplyParams](./react.usetotalcirculatingsupplyparams.md) | (BETA) The params to pass to useTotalCirculatingSupply. | | [WalletAddress](./react.walletaddress.md) | (BETA) A wallet address. | diff --git a/docs/react.tokenmintparams.md b/docs/react.tokenmintparams.md deleted file mode 100644 index 9e13203..0000000 --- a/docs/react.tokenmintparams.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [TokenMintParams](./react.tokenmintparams.md) - -## TokenMintParams type - -> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. -> - -The parameters to pass to the NFT mint functions. - -Signature: - -```typescript -export declare type TokenMintParams = { - to: WalletAddress; - amount: string | number; -}; -``` -References: [WalletAddress](./react.walletaddress.md) - diff --git a/docs/react.tokenparams.md b/docs/react.tokenparams.md index c261d4d..0034cea 100644 --- a/docs/react.tokenparams.md +++ b/docs/react.tokenparams.md @@ -7,13 +7,13 @@ > This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. > -The parameters to pass to the NFT transfer functions. +The parameters to pass to the mint and transfer functions. Signature: ```typescript export declare type TokenParams = { - toAddress: WalletAddress; + to: WalletAddress; amount: string | number; }; ``` diff --git a/docs/react.useminttoken.md b/docs/react.useminttoken.md index 7932240..08621c2 100644 --- a/docs/react.useminttoken.md +++ b/docs/react.useminttoken.md @@ -15,7 +15,7 @@ Use this to mint new tokens on your contract export declare function useMintToken(contract: RequiredParam): import("@tanstack/react-query").UseMutationResult Promise; -}, "data">, unknown, TokenMintParams, unknown>; +}, "data">, unknown, TokenParams, unknown>; ``` ## Parameters @@ -26,7 +26,7 @@ export declare function useMintToken(contract: RequiredParam): import("@t Returns: -import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenMintParams](./react.tokenmintparams.md), unknown> +import("@tanstack/react-query").UseMutationResult<Omit<{ receipt: import("@ethersproject/abstract-provider").TransactionReceipt; data: () => Promise<unknown>; }, "data">, unknown, [TokenParams](./react.tokenparams.md), unknown> a mutation object that can be used to mint a new NFT token to the connected wallet diff --git a/docs/react.usetransferbatchtoken.md b/docs/react.usetransferbatchtoken.md index 34504ca..4f18995 100644 --- a/docs/react.usetransferbatchtoken.md +++ b/docs/react.usetransferbatchtoken.md @@ -45,7 +45,7 @@ const Component = () => { return ( diff --git a/docs/react.usetransfertoken.md b/docs/react.usetransfertoken.md index 2dd1895..d875a28 100644 --- a/docs/react.usetransfertoken.md +++ b/docs/react.usetransfertoken.md @@ -48,7 +48,7 @@ const Component = () => { return ( diff --git a/etc/react.api.md b/etc/react.api.md index cb00df4..7ec1b32 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -292,15 +292,9 @@ export interface ThirdwebSDKProviderProps extends Pick(contract: RequiredPara export function useMintToken(contract: RequiredParam): UseMutationResult Promise; -}, "data">, unknown, TokenMintParams, unknown>; +}, "data">, unknown, TokenParams, unknown>; // @public export function useMultiwrap(contractAddress?: string): Multiwrap | undefined; @@ -1693,8 +1687,8 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | { // dist/hooks/async/roles.d.ts:126:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // dist/hooks/async/roles.d.ts:161:5 - (ae-incompatible-release-tags) The symbol "role" is marked as @beta, but its signature references "RolesForContract" which is marked as @internal // dist/hooks/useNetwork.d.ts:48:5 - (ae-forgotten-export) The symbol "SwitchChainError" needs to be exported by the entry point index.d.ts -// dist/types.d.ts:157:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta -// dist/types.d.ts:163:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/types.d.ts:148:5 - (ae-incompatible-release-tags) The symbol "buyForWallet" is marked as @public, but its signature references "WalletAddress" which is marked as @beta +// dist/types.d.ts:154:5 - (ae-incompatible-release-tags) The symbol "to" is marked as @public, but its signature references "WalletAddress" which is marked as @beta // (No @packageDocumentation comment for this package) diff --git a/src/hooks/async/token.ts b/src/hooks/async/token.ts index fed0a54..766d5c1 100644 --- a/src/hooks/async/token.ts +++ b/src/hooks/async/token.ts @@ -2,7 +2,6 @@ import { useActiveChainId } from "../../Provider"; import { ClaimTokenParams, RequiredParam, - TokenMintParams, TokenParams, WalletAddress, } from "../../types"; @@ -116,7 +115,7 @@ export function useMintToken(contract: RequiredParam) { const queryClient = useQueryClient(); return useMutation( - (data: TokenMintParams) => { + (data: TokenParams) => { const { to, amount } = data; invariant(contract?.mint?.to, "contract does not support mint.to"); return contract.mint.to(to, amount); @@ -210,7 +209,7 @@ export function useClaimToken( * return ( * @@ -229,9 +228,9 @@ export function useTransferToken(contract: RequiredParam) { return useMutation( (data: TokenParams) => { - const { toAddress, amount } = data; + const { to, amount } = data; invariant(contract?.transfer, "contract does not support transfer"); - return contract.transfer(toAddress, amount); + return contract.transfer(to, amount); }, { onSettled: () => @@ -263,7 +262,7 @@ export function useTransferToken(contract: RequiredParam) { * return ( * @@ -286,7 +285,12 @@ export function useTransferBatchToken(contract: RequiredParam) { contract?.transferBatch, "contract does not support transferBatch", ); - return contract.transferBatch(data); + const convertedData = data.map((token) => ({ + toAddress: token.to, + amount: token.amount, + })); + + return contract.transferBatch(convertedData); }, { onSettled: () => diff --git a/src/types.ts b/src/types.ts index 679da84..79f3e44 100644 --- a/src/types.ts +++ b/src/types.ts @@ -34,22 +34,12 @@ export type WalletAddress = string; export type ContractAddress = string; /** - * The parameters to pass to the NFT mint functions. - * - * @beta - */ -export type TokenMintParams = { - to: WalletAddress; - amount: string | number; -}; - -/** - * The parameters to pass to the NFT transfer functions. + * The parameters to pass to the mint and transfer functions. * * @beta */ export type TokenParams = { - toAddress: WalletAddress; + to: WalletAddress; amount: string | number; };