diff --git a/docs/react.md b/docs/react.md index ef3ca6d..756923a 100644 --- a/docs/react.md +++ b/docs/react.md @@ -60,6 +60,7 @@ import { useGnosis } from "@thirdweb-dev/react" | | [useGrantRole(contract)](./react.usegrantrole.md) | (BETA) Use this to grant a [WalletAddress](./react.walletaddress.md) a specific role on a | | [useIsAddressRole(contract, role, walletAddress)](./react.useisaddressrole.md) | (BETA) Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of a role on a | +| [useLazyMint(contract, onProgress)](./react.uselazymint.md) | (BETA) Use this to lazy mint a batch of NFTs on your [DropContract](./react.dropcontract.md) | | [useListing(contract, listingId)](./react.uselisting.md) | (BETA) Use this to get a specific listing from the marketplace. | | [useListings(contract, filter)](./react.uselistings.md) | (BETA) Use this to get a list all listings from your marketplace contract. | | [useMagic()](./react.usemagic.md) | Hook for connecting to an email wallet using magic link. This enables users without their own wallets to connect to your application and sign transactions securely using their email. diff --git a/docs/react.uselazymint.md b/docs/react.uselazymint.md new file mode 100644 index 0000000..5ed8be6 --- /dev/null +++ b/docs/react.uselazymint.md @@ -0,0 +1,41 @@ + + +[Home](./index.md) > [@thirdweb-dev/react](./react.md) > [useLazyMint](./react.uselazymint.md) + +## useLazyMint() 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 lazy mint a batch of NFTs on your [DropContract](./react.dropcontract.md) + +Signature: + +```typescript +export declare function useLazyMint(contract: RequiredParam, onProgress?: (progress: UploadProgressEvent) => void): import("react-query").UseMutationResult[], unknown, { + metadatas: NFTMetadataInput[]; +}, unknown>; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| contract | [RequiredParam](./react.requiredparam.md)<TContract> | an instance of a with the drop extension | +| onProgress | (progress: UploadProgressEvent) => void | (Optional) an optional callback that will be called with the progress of the upload | + +Returns: + +import("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/etc/react.api.md b/etc/react.api.md index 184f4b5..ff90f95 100644 --- a/etc/react.api.md +++ b/etc/react.api.md @@ -29,7 +29,7 @@ import { EditionDrop } from '@thirdweb-dev/sdk/dist/browser'; import { Erc1155 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc1155Mintable } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc20 } from '@thirdweb-dev/sdk/dist/browser'; -import type { Erc721 } from '@thirdweb-dev/sdk/dist/browser'; +import { Erc721 } from '@thirdweb-dev/sdk/dist/browser'; import type { Erc721Mintable } from '@thirdweb-dev/sdk/dist/browser'; import type { EventQueryFilter } from '@thirdweb-dev/sdk/dist/browser'; import { FetchStatus } from 'react-query'; @@ -48,6 +48,7 @@ import type { NewDirectListing } from '@thirdweb-dev/sdk/dist/browser'; import { NFTCollection } from '@thirdweb-dev/sdk/dist/browser'; import { NFTDrop } from '@thirdweb-dev/sdk/dist/browser'; import { NFTMetadata } from '@thirdweb-dev/sdk/dist/browser'; +import { NFTMetadataInput } from '@thirdweb-dev/sdk/dist/browser'; import type { NFTMetadataOrUri } from '@thirdweb-dev/sdk/dist/src/schema'; import { Offer } from '@thirdweb-dev/sdk/dist/browser'; import { Pack } from '@thirdweb-dev/sdk/dist/browser'; @@ -71,6 +72,7 @@ import { Token } from '@thirdweb-dev/sdk/dist/browser'; import { TokenDrop } from '@thirdweb-dev/sdk/dist/browser'; import { TransactionReceipt } from '@ethersproject/abstract-provider'; import { TransactionResultWithId } from '@thirdweb-dev/sdk/dist/browser'; +import { UploadProgressEvent } from '@thirdweb-dev/sdk/dist/browser'; import { useAccount } from './hooks'; import { UseMutationResult } from 'react-query'; import { useProvider } from './hooks'; @@ -1341,6 +1343,20 @@ address: WalletAddress; // @beta export function useIsAddressRole(contract: RequiredParam, role: RolesForContract, walletAddress: RequiredParam): boolean; +// @beta +export function useLazyMint(contract: RequiredParam, onProgress?: (progress: UploadProgressEvent) => void): UseMutationResult[], unknown, { +metadatas: NFTMetadataInput[]; +}, unknown>; + // @beta export function useListing(contract: RequiredParam, listingId: RequiredParam): UseQueryResult; diff --git a/package.json b/package.json index 087aaac..5bb033d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@thirdweb-dev/react", - "version": "2.4.9-1", + "version": "2.5.0-0", "repository": { "type": "git", "url": "git+https://github.com:thirdweb-dev/react.git" diff --git a/src/hooks/async/drop.ts b/src/hooks/async/drop.ts index 380e1f3..37e631d 100644 --- a/src/hooks/async/drop.ts +++ b/src/hooks/async/drop.ts @@ -12,10 +12,13 @@ import { import { useQueryWithNetwork } from "../query-utils/useQueryWithNetwork"; import { useNFTs } from "./nft"; import { + Erc721, Erc1155, NFTDrop, + NFTMetadataInput, QueryAllParams, SignatureDrop, + UploadProgressEvent, } from "@thirdweb-dev/sdk/dist/browser"; import { useMutation, useQueryClient } from "react-query"; import invariant from "tiny-invariant"; @@ -196,3 +199,44 @@ export function useClaimNFT( }, ); } + +/** + * Use this to lazy mint a batch of NFTs on your {@link DropContract} + * + * @param contract - an instance of a {@link ERC721} with the drop extension + * @param onProgress - an optional callback that will be called with the progress of the upload + * @returns a mutation object that can be used to lazy mint a batch of NFTs + * @beta + */ +export function useLazyMint( + contract: RequiredParam, + onProgress?: (progress: UploadProgressEvent) => void, +) { + const activeChainId = useActiveChainId(); + const contractAddress = contract?.getAddress(); + const queryClient = useQueryClient(); + + return useMutation( + async (data: { metadatas: NFTMetadataInput[] }) => { + invariant( + contract?.drop?.lazyMint, + "contract does not support drop.lazyMint", + ); + let options; + if (onProgress) { + options = { + onProgress, + }; + } + return await contract.drop.lazyMint(data.metadatas, options); + }, + { + onSettled: () => + invalidateContractAndBalances( + queryClient, + contractAddress, + activeChainId, + ), + }, + ); +}