Update

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/ContractNFTPage.tsx

@@ -2,6 +2,7 @@ import type { ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { BatchLazyMintButton } from "./components/batch-lazy-mint-button";
+import { BatchUpdateMetadataButton } from "./components/batch-update-metadata-button";
 import { NFTClaimButton } from "./components/claim-button";
 import { NFTLazyMintButton } from "./components/lazy-mint-button";
 import { NFTMintButton } from "./components/mint-button";
@@ -51,6 +52,9 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
   const canCreateDelayedRevealBatch =
     ERC721Ext.isCreateDelayedRevealBatchSupported(functionSelectors);
 
+  const canBatchUpdateMetadata =
+    ERC721Ext.isUpdateMetadataSupported(functionSelectors);
+
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
@@ -80,6 +84,13 @@ export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
               contract={contract}
             />
           )}
+          {canBatchUpdateMetadata && (
+            <BatchUpdateMetadataButton
+              contract={contract}
+              canBatchUpdateMetadata={canBatchUpdateMetadata}
+              isErc721={isErc721}
+            />
+          )}
         </div>
       </div>
       {canShowSupplyCards && <SupplyCards contract={contract} />}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/batch-update-metadata-button.tsx

@@ -0,0 +1,16 @@
+import type { ThirdwebContract } from "thirdweb";
+
+type Props = {
+  contract: ThirdwebContract;
+  isErc721: boolean;
+  canBatchUpdateMetadata: boolean;
+};
+/**
+ * For DropERC721 contracts only
+ */
+export function BatchUpdateMetadataButton(props: Props) {
+  if (!props.contract || !props.canBatchUpdateMetadata || !props.isErc721) {
+    return null;
+  }
+  return <></>;
+}