Jd/add drop lazy mint (#109)

* add lazy mint for drops

* v2.5.0-0

Author: jnsdls

docs/react.md

@@ -60,6 +60,7 @@ import { useGnosis } from "@thirdweb-dev/react"
  |
 |  [useGrantRole(contract)](./react.usegrantrole.md) | <b><i>(BETA)</i></b> Use this to grant a [WalletAddress](./react.walletaddress.md) a specific role on a  |
 |  [useIsAddressRole(contract, role, walletAddress)](./react.useisaddressrole.md) | <b><i>(BETA)</i></b> Use this to check if a [WalletAddress](./react.walletaddress.md) is a member of a role on a  |
+|  [useLazyMint(contract, onProgress)](./react.uselazymint.md) | <b><i>(BETA)</i></b> Use this to lazy mint a batch of NFTs on your [DropContract](./react.dropcontract.md) |
 |  [useListing(contract, listingId)](./react.uselisting.md) | <b><i>(BETA)</i></b> Use this to get a specific listing from the marketplace. |
 |  [useListings(contract, filter)](./react.uselistings.md) | <b><i>(BETA)</i></b> 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.

docs/react.uselazymint.md

@@ -0,0 +1,41 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@thirdweb-dev/react](./react.md) &gt; [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)
+
+<b>Signature:</b>
+
+```typescript
+export declare function useLazyMint<TContract extends Erc721>(contract: RequiredParam<TContract>, onProgress?: (progress: UploadProgressEvent) => void): 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>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  contract | [RequiredParam](./react.requiredparam.md)<!-- -->&lt;TContract&gt; | an instance of a  with the drop extension |
+|  onProgress | (progress: UploadProgressEvent) =&gt; void | <i>(Optional)</i> an optional callback that will be called with the progress of the upload |
+
+<b>Returns:</b>
+
+import("react-query").UseMutationResult&lt;import("@thirdweb-dev/sdk/dist/browser").TransactionResultWithId&lt;{ \[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; }&gt;\[\], unknown, { metadatas: NFTMetadataInput\[\]; }, unknown&gt;
+
+a mutation object that can be used to lazy mint a batch of NFTs
+

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<TContract extends ContractWithRoles>(contract: RequiredParam<TContract>, role: RolesForContract<TContract>, walletAddress: RequiredParam<WalletAddress>): boolean;
 
+// @beta
+export function useLazyMint<TContract extends Erc721>(contract: RequiredParam<TContract>, onProgress?: (progress: UploadProgressEvent) => void): UseMutationResult<TransactionResultWithId<    {
+[x: string]: 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;
+}>[], unknown, {
+metadatas: NFTMetadataInput[];
+}, unknown>;
+
 // @beta
 export function useListing(contract: RequiredParam<Marketplace>, listingId: RequiredParam<BigNumberish>): UseQueryResult<AuctionListing | DirectListing, unknown>;
 

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"

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<TContract extends DropContract>(
     },
   );
 }
+
+/**
+ * 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<TContract extends Erc721>(
+  contract: RequiredParam<TContract>,
+  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,
+        ),
+    },
+  );
+}