nft extension detection v5 (#4399)

<!-- start pr-codex -->

## PR-Codex overview
This PR adds support for checking if specific ERC721 and ERC1155 methods are supported by contracts. It also updates function exports and improves code consistency.

### Detailed summary
- Added functions to check method support for ERC721 and ERC1155 contracts
- Updated function exports for minting, updating metadata, and token URI
- Improved code consistency and clarity in various files

> The following files were skipped due to too many changes: `packages/thirdweb/src/extensions/erc721/read/getNFTs.ts`, `packages/thirdweb/src/extensions/erc1155/write/mintAdditionalSupplyTo.ts`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/page.tsx`, `packages/thirdweb/src/exports/extensions/erc721.ts`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx`, `packages/thirdweb/src/extensions/erc1155/drops/write/updateMetadata.ts`, `packages/thirdweb/src/extensions/erc721/drops/write/updateMetadata.ts`, `apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx`, `apps/dashboard/src/core-ui/nft-drawer/useNftDrawerTabs.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/page.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: jnsdls

apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx

@@ -169,6 +169,58 @@ export function useContractRouteConfig(
     ].every(Boolean);
   }, [functionSelectorQuery.data]);
 
+  const hasERC721ClaimConditions = useMemo(() => {
+    return [
+      // reads
+      ERC721Ext.isGetClaimConditionByIdSupported(functionSelectorQuery.data),
+      ERC721Ext.isGetActiveClaimConditionIdSupported(
+        functionSelectorQuery.data,
+      ),
+      ERC721Ext.isGetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC721Ext.isGetActiveClaimConditionSupported(functionSelectorQuery.data),
+      // writes
+      ERC721Ext.isSetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC721Ext.isResetClaimEligibilitySupported(functionSelectorQuery.data),
+    ].every(Boolean);
+  }, [functionSelectorQuery.data]);
+
+  const hasERC20ClaimConditions = useMemo(() => {
+    return [
+      // reads
+      ERC20Ext.isGetClaimConditionByIdSupported(functionSelectorQuery.data),
+      ERC20Ext.isGetActiveClaimConditionIdSupported(functionSelectorQuery.data),
+      ERC20Ext.isGetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC20Ext.isGetActiveClaimConditionSupported(functionSelectorQuery.data),
+      // writes
+      ERC20Ext.isSetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC20Ext.isResetClaimEligibilitySupported(functionSelectorQuery.data),
+    ].every(Boolean);
+  }, [functionSelectorQuery.data]);
+
+  const hasERC1155ClaimConditions = useMemo(() => {
+    return [
+      // reads
+      ERC1155Ext.isGetClaimConditionByIdSupported(functionSelectorQuery.data),
+      ERC1155Ext.isGetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC1155Ext.isGetActiveClaimConditionSupported(functionSelectorQuery.data),
+      // writes
+      ERC1155Ext.isSetClaimConditionsSupported(functionSelectorQuery.data),
+      ERC1155Ext.isResetClaimEligibilitySupported(functionSelectorQuery.data),
+    ].every(Boolean);
+  }, [functionSelectorQuery.data]);
+
+  const hasClaimConditions = useMemo(() => {
+    return [
+      hasERC721ClaimConditions,
+      hasERC20ClaimConditions,
+      hasERC1155ClaimConditions,
+    ].some(Boolean);
+  }, [
+    hasERC721ClaimConditions,
+    hasERC20ClaimConditions,
+    hasERC1155ClaimConditions,
+  ]);
+
   // old
   const ensQuery = useEns(contract.address);
 
@@ -192,57 +244,11 @@ export function useContractRouteConfig(
     });
 
     // claim condition related stuff
-    const claimconditionExtensionDetection = extensionDetectedState({
-      contractQuery,
-      feature: [
-        // erc 721
-        "ERC721ClaimPhasesV1",
-        "ERC721ClaimPhasesV2",
-        "ERC721ClaimConditionsV1",
-        "ERC721ClaimConditionsV2",
-
-        // erc 20
-        "ERC20ClaimConditionsV1",
-        "ERC20ClaimConditionsV2",
-        "ERC20ClaimPhasesV1",
-        "ERC20ClaimPhasesV2",
-      ],
-    });
-
-    const hasNewClaimConditions = extensionDetectedState({
-      contractQuery,
-      feature: [
-        // erc721
-        "ERC721ClaimConditionsV2",
-        "ERC721ClaimPhasesV2",
-        // erc1155
-        "ERC1155ClaimConditionsV2",
-        "ERC1155ClaimPhasesV2",
-        // erc20
-        "ERC20ClaimConditionsV2",
-        "ERC20ClaimPhasesV2",
-      ],
-    });
-
-    const hasMultiPhaseClaimConditions = extensionDetectedState({
-      contractQuery,
-      feature: [
-        // erc721
-        "ERC721ClaimPhasesV2",
-        // erc1155
-        "ERC1155ClaimPhasesV2",
-        // erc20
-        "ERC20ClaimPhasesV2",
-      ],
-    });
 
     return {
-      claimconditionExtensionDetection,
       detectedEnglishAuctions,
       detectedDirectListings,
       detectedModularExtension,
-      hasNewClaimConditions,
-      hasMultiPhaseClaimConditions,
     };
   }, [contractQuery]);
 
@@ -256,7 +262,7 @@ export function useContractRouteConfig(
         return "marketplace-v3";
       }
       // others only matter if claim conditions are detected
-      if (contractData.hasNewClaimConditions) {
+      if (hasClaimConditions) {
         // if erc721 its that
         if (isERC721Query.data) {
           return "erc721";
@@ -270,7 +276,12 @@ export function useContractRouteConfig(
       }
       // otherwise null
       return null;
-    }, [contractData, isERC721Query.data, isERC1155Query.data]);
+    }, [
+      contractData,
+      hasClaimConditions,
+      isERC721Query.data,
+      isERC1155Query.data,
+    ]);
 
   return [
     {
@@ -419,18 +430,16 @@ export function useContractRouteConfig(
     {
       title: "Claim Conditions",
       path: "claim-conditions",
-      isEnabled: contractData.claimconditionExtensionDetection,
+      isEnabled:
+        hasERC721ClaimConditions || hasERC20ClaimConditions
+          ? "enabled"
+          : functionSelectorQuery.isLoading
+            ? "loading"
+            : "disabled",
       component: () => (
         <LazyContractClaimConditionsPage
           contract={contract}
-          claimconditionExtensionDetection={
-            contractData.claimconditionExtensionDetection
-          }
           isERC20={isERC20}
-          hasNewClaimConditions={
-            contractData.hasNewClaimConditions === "enabled"
-          }
-          isMultiPhase={contractData.hasMultiPhaseClaimConditions === "enabled"}
         />
       ),
     },

apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx

@@ -1,6 +1,5 @@
 import { Flex, Stack } from "@chakra-ui/react";
 import { useContract } from "@thirdweb-dev/react";
-import { UpdateNotice } from "core-ui/update-notice/update-notice";
 import type { ThirdwebContract } from "thirdweb";
 import { Heading, Text } from "tw-components";
 import { ClaimConditionsForm } from "./claim-conditions-form/index";
@@ -9,17 +8,13 @@ interface ClaimConditionsProps {
   contract: ThirdwebContract;
   tokenId?: string;
   isColumn?: true;
-  contractInfo: {
-    hasNewClaimConditions: boolean;
-    isErc20: boolean;
-    isMultiPhase: boolean;
-  };
+  isERC20: boolean;
 }
 export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
   contract,
   tokenId,
   isColumn,
-  contractInfo,
+  isERC20,
 }) => {
   const contractQuery = useContract(contract.address);
 
@@ -37,34 +32,22 @@ export const ClaimConditions: React.FC<ClaimConditionsProps> = ({
             <Flex direction="column">
               <Heading size="title.md">Set Claim Conditions</Heading>
               <Text size="body.md" fontStyle="italic" mt={2}>
-                Control when the {contractInfo.isErc20 ? "tokens" : "NFTs"} get
-                dropped, how much they cost, and more.
+                Control when the {isERC20 ? "tokens" : "NFTs"} get dropped, how
+                much they cost, and more.
               </Text>
             </Flex>
-            {contractInfo.hasNewClaimConditions && (
-              <UpdateNotice
-                learnMoreHref="https://blog.thirdweb.com/announcing-improved-claim-conditions"
-                trackingLabel="claim_conditions"
-                versions={[
-                  { version: "3.6.0", sdk: "react" },
-                  { version: "3.6.0", sdk: "typescript" },
-                ]}
-              >
-                Define claim conditions on a per-wallet basis and rename your
-                claim phases.
-              </UpdateNotice>
-            )}
           </Flex>
 
           {/* Set Claim Conditions */}
           {contractQuery.contract && (
             <ClaimConditionsForm
-              isErc20={contractInfo.isErc20}
+              isErc20={isERC20}
               contract={contractQuery.contract}
               tokenId={tokenId}
               isColumn={isColumn}
               contractV5={contract}
-              isMultiPhase={contractInfo.isMultiPhase}
+              // always multi phase!
+              isMultiPhase={true}
             />
           )}
         </Flex>

apps/dashboard/src/contract-ui/tabs/claim-conditions/page.tsx

@@ -1,58 +1,19 @@
-import { ButtonGroup, Divider, Flex } from "@chakra-ui/react";
-import type { ExtensionDetectedState } from "components/buttons/ExtensionDetectButton";
+import { Flex } from "@chakra-ui/react";
 import type { ThirdwebContract } from "thirdweb";
-import { Card, Heading, LinkButton, Text } from "tw-components";
+import {} from "tw-components";
 import { ClaimConditions } from "./components/claim-conditions";
 
 interface ContractClaimConditionsPageProps {
   contract: ThirdwebContract;
-  claimconditionExtensionDetection: ExtensionDetectedState;
   isERC20: boolean;
-  hasNewClaimConditions: boolean;
-  isMultiPhase: boolean;
 }
 
 export const ContractClaimConditionsPage: React.FC<
   ContractClaimConditionsPageProps
-> = ({
-  contract,
-  claimconditionExtensionDetection,
-  isERC20,
-  hasNewClaimConditions,
-  isMultiPhase,
-}) => {
-  if (!claimconditionExtensionDetection) {
-    return (
-      <Card as={Flex} flexDir="column" gap={3}>
-        {/* TODO  extract this out into it's own component and make it better */}
-        <Heading size="subtitle.md">No Claim Conditions enabled</Heading>
-        <Text>
-          To enable Claim Conditions features you will have to extend the
-          required interfaces in your contract.
-        </Text>
-
-        <Divider my={1} />
-        <Flex gap={4} align="center">
-          <Heading size="label.md">Learn more: </Heading>
-          <ButtonGroup colorScheme="purple" size="sm" variant="solid">
-            <LinkButton
-              isExternal
-              href="https://portal.thirdweb.com/contracts/build/extensions/erc-721/ERC721ClaimConditions"
-            >
-              Claim Conditions
-            </LinkButton>
-          </ButtonGroup>
-        </Flex>
-      </Card>
-    );
-  }
-
+> = ({ contract, isERC20 }) => {
   return (
     <Flex direction="column" gap={6}>
-      <ClaimConditions
-        contract={contract}
-        contractInfo={{ isErc20: isERC20, hasNewClaimConditions, isMultiPhase }}
-      />
+      <ClaimConditions contract={contract} isERC20={isERC20} />
     </Flex>
   );
 };

apps/dashboard/src/contract-ui/tabs/nfts/components/batch-lazy-mint-button.tsx

@@ -30,7 +30,6 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
   contractQuery,
   contract,
   isRevealable,
-  ...restButtonProps
 }) => {
   const contractV4 = contractQuery.contract;
   const trackEvent = useTrack();
@@ -133,7 +132,6 @@ export const BatchLazyMintButton: React.FC<BatchLazyMintButtonProps> = ({
       <Button
         colorScheme="primary"
         leftIcon={<Icon as={RiCheckboxMultipleBlankLine} />}
-        {...restButtonProps}
         onClick={onOpen}
       >
         Batch Upload

apps/dashboard/src/contract-ui/tabs/nfts/components/claim-button.tsx

@@ -1,22 +1,18 @@
 import { Icon, useDisclosure } from "@chakra-ui/react";
 import { GiDiamondHard } from "@react-icons/all-files/gi/GiDiamondHard";
+import type { ThirdwebContract } from "thirdweb";
 import { Button, Drawer } from "tw-components";
 import { NFTClaimForm } from "./claim-form";
 
 interface NFTClaimButtonProps {
-  contractAddress: string;
-  chainId: number;
+  contract: ThirdwebContract;
 }
 
 /**
  * This button is used for claiming NFT Drop contract (erc721) only!
  * For Edition Drop we have a dedicated ClaimTabERC1155 inside each Edition's page
  */
-export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
-  contractAddress,
-  chainId,
-  ...restButtonProps
-}) => {
+export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({ contract }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   return (
@@ -28,12 +24,11 @@ export const NFTClaimButton: React.FC<NFTClaimButtonProps> = ({
         onClose={onClose}
         isOpen={isOpen}
       >
-        <NFTClaimForm contractAddress={contractAddress} chainId={chainId} />
+        <NFTClaimForm contract={contract} />
       </Drawer>
       <Button
         colorScheme="primary"
         leftIcon={<Icon as={GiDiamondHard} />}
-        {...restButtonProps}
         onClick={onOpen}
       >
         Claim

apps/dashboard/src/contract-ui/tabs/nfts/components/claim-form.tsx

@@ -1,4 +1,3 @@
-import { thirdwebClient } from "@/constants/client";
 import {
   DrawerBody,
   DrawerFooter,
@@ -11,10 +10,9 @@ import {
 import { TransactionButton } from "components/buttons/TransactionButton";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useTxNotifications } from "hooks/useTxNotifications";
-import { useV5DashboardChain } from "lib/v5-adapter";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { ZERO_ADDRESS, getContract } from "thirdweb";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc721";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
@@ -27,20 +25,10 @@ import {
 
 const CLAIM_FORM_ID = "nft-claim-form";
 interface NFTClaimFormProps {
-  contractAddress: string;
-  chainId: number;
+  contract: ThirdwebContract;
 }
 
-export const NFTClaimForm: React.FC<NFTClaimFormProps> = ({
-  contractAddress,
-  chainId,
-}) => {
-  const chain = useV5DashboardChain(chainId);
-  const contract = getContract({
-    address: contractAddress,
-    chain: chain,
-    client: thirdwebClient,
-  });
+export const NFTClaimForm: React.FC<NFTClaimFormProps> = ({ contract }) => {
   const trackEvent = useTrack();
   const address = useActiveAccount()?.address;
   const { register, handleSubmit, formState } = useForm({