[SDK + Dashboard] BatchMintAddtionalSupplyTo

Author: kien-ngo

apps/dashboard/src/contract-ui/tabs/nfts/components/batch-mint-additional-supply-tab.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { Flex, useDisclosure } from "@chakra-ui/react";
+import { TransactionButton } from "components/buttons/TransactionButton";
+import {
+  type AirdropAddressInput,
+  AirdropUpload,
+} from "contract-ui/tabs/nfts/components/airdrop-upload";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { UploadIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import type { ThirdwebContract } from "thirdweb";
+import { batchMintAdditionalSupplyTo } from "thirdweb/extensions/erc1155";
+import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { Button, Text } from "tw-components";
+
+export default function BatchMintAdditionalSupplyTab({
+  contract,
+  tokenId,
+}: {
+  contract: ThirdwebContract;
+  tokenId: string;
+}) {
+  const address = useActiveAccount()?.address;
+  const { handleSubmit, setValue, watch, reset, formState } = useForm<{
+    addresses: AirdropAddressInput[];
+  }>({
+    defaultValues: { addresses: [] },
+  });
+  const trackEvent = useTrack();
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const { mutate, isPending } = useSendAndConfirmTransaction();
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Batch mint successful",
+    "Error batch mint",
+    contract,
+  );
+
+  const addresses = watch("addresses");
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <form
+        onSubmit={handleSubmit(async (_data) => {
+          trackEvent({
+            category: "nft",
+            action: "airdrop",
+            label: "attempt",
+            contract_address: contract.address,
+            token_id: tokenId,
+          });
+          const transaction = batchMintAdditionalSupplyTo({
+            contract,
+            tokenId: BigInt(tokenId),
+            content: _data.addresses.map((item) => ({
+              to: item.address,
+              supply: BigInt(item.quantity),
+            })),
+          });
+          mutate(transaction, {
+            onSuccess: () => {
+              trackEvent({
+                category: "nft",
+                action: "airdrop",
+                label: "success",
+                contract_address: contract.address,
+                token_id: tokenId,
+              });
+              onSuccess();
+              reset();
+            },
+            onError: (error) => {
+              trackEvent({
+                category: "nft",
+                action: "airdrop",
+                label: "success",
+                contract_address: contract.address,
+                token_id: tokenId,
+                error,
+              });
+              onError(error);
+            },
+          });
+        })}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="mb-3 flex w-full flex-col gap-6 md:flex-row">
+            <AirdropUpload
+              isOpen={isOpen}
+              onClose={onClose}
+              setAirdrop={(value) =>
+                setValue("addresses", value, { shouldDirty: true })
+              }
+            />
+            <Flex direction={{ base: "column", md: "row" }} gap={4}>
+              <Button
+                colorScheme="primary"
+                borderRadius="md"
+                onClick={onOpen}
+                rightIcon={<UploadIcon className="size-5" />}
+              >
+                Upload addresses
+              </Button>
+
+              <Flex
+                gap={2}
+                direction="row"
+                align="center"
+                justify="center"
+                color={addresses.length === 0 ? "orange.500" : "green.500"}
+              >
+                {addresses.length > 0 && (
+                  <Text size="body.sm" color="inherit">
+                    ● <strong>{addresses.length} addresses</strong> ready to be
+                    minted
+                  </Text>
+                )}
+              </Flex>
+            </Flex>
+          </div>
+          <Text>
+            You can mint to a maximum of 250 addresses at a time. If you have
+            more, please do it in multiple transactions.
+          </Text>
+          <TransactionButton
+            txChainID={contract.chain.id}
+            transactionCount={1}
+            isLoading={isPending}
+            type="submit"
+            colorScheme="primary"
+            disabled={!!address && addresses.length === 0}
+            alignSelf="flex-end"
+            isDisabled={!formState.isDirty}
+          >
+            Batch mint
+          </TransactionButton>
+        </div>
+      </form>
+    </div>
+  );
+}

apps/dashboard/src/core-ui/nft-drawer/useNftDrawerTabs.tsx

@@ -36,7 +36,10 @@ const ClaimTabERC1155 = dynamic(
 const UpdateMetadataTab = dynamic(
   () => import("contract-ui/tabs/nfts/components/update-metadata-tab"),
 );
-
+const BatchMintAdditionalSupplyTab = dynamic(
+  () =>
+    import("contract-ui/tabs/nfts/components/batch-mint-additional-supply-tab"),
+);
 export function useNFTDrawerTabs({
   contract,
   tokenId,
@@ -181,6 +184,17 @@ export function useNFTDrawerTabs({
           disabledText: "You don't have minter permissions",
           children: <MintSupplyTab contract={contract} tokenId={tokenId} />,
         },
+        {
+          title: "Batch Mint Supply",
+          isDisabled: false,
+          disabledText: "You don't have minter permission",
+          children: (
+            <BatchMintAdditionalSupplyTab
+              contract={contract}
+              tokenId={tokenId}
+            />
+          ),
+        },
       ]);
     }
     if (hasERC1155ClaimConditions) {

packages/thirdweb/src/exports/extensions/erc1155.ts

@@ -82,6 +82,10 @@ export {
   type MintAdditionalSupplyToParams,
   isMintAdditionalSupplyToSupported,
 } from "../../extensions/erc1155/write/mintAdditionalSupplyTo.js";
+export {
+  batchMintAdditionalSupplyTo,
+  type BatchMintAdditionalSupplyToParams,
+} from "../../extensions/erc1155/write/batchMintAdditionalSupplyTo.js";
 export {
   setTokenURI,
   type SetTokenURIParams,

packages/thirdweb/src/extensions/erc1155/write/batchMintAdditionalSupplyTo.ts

@@ -0,0 +1,36 @@
+import { multicall } from "../../../extensions/common/__generated__/IMulticall/write/multicall.js";
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import * as URI from "../__generated__/IERC1155/read/uri.js";
+import * as MintTo from "../__generated__/IMintableERC1155/write/mintTo.js";
+
+export type BatchMintAdditionalSupplyToParams = {
+  tokenId: bigint;
+  content: Array<{
+    to: string;
+    supply: bigint;
+  }>;
+};
+
+export function batchMintAdditionalSupplyTo(
+  options: BaseTransactionOptions<BatchMintAdditionalSupplyToParams>,
+) {
+  return multicall({
+    contract: options.contract,
+    asyncParams: async () => {
+      // we'll be re-using the exising token URI
+      const tokenUri = await URI.uri({
+        contract: options.contract,
+        tokenId: options.tokenId,
+      });
+      const data = options.content.map((item) =>
+        MintTo.encodeMintTo({
+          to: item.to,
+          tokenId: options.tokenId,
+          uri: tokenUri,
+          amount: item.supply,
+        }),
+      );
+      return { data };
+    },
+  });
+}