[Update] Refactor ContractChecklist and add feature detection (#4400)

<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to add support for additional ERC721 metadata and claim conditions, optimize contract checklist components, and improve feature detection.

### Detailed summary
- Added support for `isSharedMetadataSupported` and `getClaimConditions` in ERC721.
- Optimized contract checklist component for ERC721, ERC1155, and ERC20 contracts.
- Improved feature detection for lazy minting, claim conditions, and account factory creation.

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

<!-- end pr-codex -->

Author: jnsdls

apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx

@@ -2,29 +2,26 @@ import {
   useIsAdmin,
   useIsMinter,
 } from "@3rdweb-sdk/react/hooks/useContractRoles";
-import {
-  useBatchesToReveal,
-  useClaimConditions,
-  useContract,
-} from "@thirdweb-dev/react";
+import { useBatchesToReveal, useContract } from "@thirdweb-dev/react";
 import { detectFeatures } from "components/contract-components/utils";
 import { StepsCard } from "components/dashboard/StepsCard";
 import { useTabHref } from "contract-ui/utils";
-import { totalSupply } from "thirdweb/extensions/erc20";
-import {
-  getNFTs as erc721GetNfts,
-  getTotalClaimedSupply,
-  sharedMetadata,
-} from "thirdweb/extensions/erc721";
-import { getNFTs as erc1155Nfts } from "thirdweb/extensions/erc1155";
+import { useMemo } from "react";
+import type { ThirdwebContract } from "thirdweb";
+import * as ERC20Ext from "thirdweb/extensions/erc20";
+import * as ERC721Ext from "thirdweb/extensions/erc721";
+import * as ERC1155Ext from "thirdweb/extensions/erc1155";
+import * as ERC4337Ext from "thirdweb/extensions/erc4337";
 import { getAccounts } from "thirdweb/extensions/erc4337";
 import { useReadContract } from "thirdweb/react";
-
-import type { ThirdwebContract } from "thirdweb";
 import { Link, Text } from "tw-components";
+import { useContractFunctionSelectors } from "../../../hooks/useContractFunctionSelectors";
 
 interface ContractChecklistProps {
   contract: ThirdwebContract;
+  isErc721: boolean;
+  isErc1155: boolean;
+  isErc20: boolean;
 }
 
 type Step = {
@@ -35,37 +32,55 @@ type Step = {
 
 export const ContractChecklist: React.FC<ContractChecklistProps> = ({
   contract,
+  isErc1155,
+  isErc20,
+  isErc721,
 }) => {
+  const functionSelectorQuery = useContractFunctionSelectors(contract);
   const contractQuery = useContract(contract.address);
   const nftHref = useTabHref("nfts");
   const tokenHref = useTabHref("tokens");
   const accountsHref = useTabHref("accounts");
   const claimConditionsHref = useTabHref("claim-conditions");
 
-  const erc721Claimed = useReadContract(getTotalClaimedSupply, {
+  const erc721Claimed = useReadContract(ERC721Ext.getTotalClaimedSupply, {
     contract: contract,
+    queryOptions: { enabled: isErc721 },
+  });
+  const erc20Supply = useReadContract(ERC20Ext.totalSupply, {
+    contract,
+    queryOptions: { enabled: isErc20 },
   });
-  const erc20Supply = useReadContract(totalSupply, { contract });
   const accounts = useReadContract(getAccounts, {
     contract,
     start: 0n,
     end: 1n,
   });
-  const erc721NftQuery = useReadContract(erc721GetNfts, {
-    contract,
-    start: 0,
-    count: 1,
-  });
-  const erc1155NftQuery = useReadContract(erc1155Nfts, {
-    contract,
-    start: 0,
-    count: 1,
-  });
-  const sharedMetadataQuery = useReadContract(sharedMetadata, {
+  const nftsQuery = useReadContract(
+    isErc721 ? ERC721Ext.getNFTs : ERC721Ext.getNFTs,
+    {
+      contract,
+      start: 0,
+      count: 1,
+      queryOptions: { enabled: isErc721 || isErc1155 },
+    },
+  );
+
+  const sharedMetadataQuery = useReadContract(ERC721Ext.sharedMetadata, {
     contract,
+    queryOptions: { enabled: isErc721 },
   });
 
-  const claimConditions = useClaimConditions(contractQuery.contract);
+  const claimConditions = useReadContract(
+    isErc721 ? ERC721Ext.getClaimConditions : ERC1155Ext.getClaimConditions,
+    {
+      contract,
+      tokenId: 0n,
+      queryOptions: { enabled: isErc721 || isErc1155 },
+    },
+  );
+
+  // need to replace!
   const batchesToReveal = useBatchesToReveal(contractQuery.contract);
 
   const steps: Step[] = [
@@ -79,15 +94,58 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
   const isAdmin = useIsAdmin(contract);
   const isMinter = useIsMinter(contract);
 
+  const isLazyMintable = useMemo(() => {
+    if (isErc721) {
+      return ERC721Ext.isLazyMintSupported(functionSelectorQuery.data);
+    }
+    if (isErc1155) {
+      return ERC1155Ext.isLazyMintSupported(functionSelectorQuery.data);
+    }
+    return false;
+  }, [functionSelectorQuery.data, isErc721, isErc1155]);
+
+  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 accountFactory = useMemo(() => {
+    return [
+      ERC4337Ext.isGetAllAccountsSupported(functionSelectorQuery.data),
+      ERC4337Ext.isGetAccountsSupported(functionSelectorQuery.data),
+      ERC4337Ext.isTotalAccountsSupported(functionSelectorQuery.data),
+      ERC4337Ext.isGetAccountsOfSignerSupported(functionSelectorQuery.data),
+      ERC4337Ext.isPredictAccountAddressSupported(functionSelectorQuery.data),
+    ].every(Boolean);
+  }, [functionSelectorQuery.data]);
+
   if (!isAdmin) {
     return null;
   }
 
-  const isLazyMintable = detectFeatures(contractQuery.contract, [
-    "ERC721LazyMintable",
-    "ERC1155LazyMintableV2",
-    "ERC1155LazyMintableV1",
-  ]);
   if (isLazyMintable && isMinter) {
     steps.push({
       title: "First NFT uploaded",
@@ -101,15 +159,11 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
         </Text>
       ),
       // can be either 721 or 1155
-      completed:
-        (erc721NftQuery.data?.length || erc1155NftQuery.data?.length || 0) > 0,
+      completed: (nftsQuery.data?.length || 0) > 0,
     });
   }
 
-  const isErc721SharedMetadadata = detectFeatures(contractQuery.contract, [
-    "ERC721SharedMetadata",
-  ]);
-  if (isErc721SharedMetadadata) {
+  if (ERC721Ext.isSharedMetadataSupported(functionSelectorQuery.data)) {
     steps.push({
       title: "Set NFT Metadata",
       children: (
@@ -125,20 +179,7 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
     });
   }
 
-  const erc721hasClaimConditions = detectFeatures(contractQuery.contract, [
-    "ERC721ClaimPhasesV1",
-    "ERC721ClaimPhasesV2",
-    "ERC721ClaimConditionsV1",
-    "ERC721ClaimConditionsV2",
-    "ERC721ClaimCustom",
-  ]);
-  const erc20HasClaimConditions = detectFeatures(contractQuery.contract, [
-    "ERC20ClaimPhasesV1",
-    "ERC20ClaimPhasesV2",
-    "ERC20ClaimConditionsV1",
-    "ERC20ClaimConditionsV2",
-  ]);
-  if (erc721hasClaimConditions || erc20HasClaimConditions) {
+  if (hasERC721ClaimConditions || hasERC20ClaimConditions) {
     steps.push({
       title: "Set Claim Conditions",
       children: (
@@ -157,15 +198,15 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
         (erc20Supply.data || 0n) > 0n,
     });
   }
-  if (erc721hasClaimConditions) {
+  if (hasERC721ClaimConditions) {
     steps.push({
       title: "First NFT claimed",
       children: <Text size="label.sm">No NFTs have been claimed so far.</Text>,
       completed: (erc721Claimed.data || 0n) > 0n,
     });
   }
 
-  if (erc20HasClaimConditions) {
+  if (hasERC20ClaimConditions) {
     steps.push({
       title: "First token claimed",
       children: (
@@ -175,10 +216,11 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
     });
   }
 
-  const tokenIsMintable = detectFeatures(contractQuery.contract, [
-    "ERC20Mintable",
-  ]);
-  if (tokenIsMintable && isMinter) {
+  if (
+    isErc20 &&
+    ERC20Ext.isMintToSupported(functionSelectorQuery.data) &&
+    isMinter
+  ) {
     steps.push({
       title: "First token minted",
       children: (
@@ -194,10 +236,15 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
     });
   }
 
-  const nftIsMintable = detectFeatures(contractQuery.contract, [
-    "ERC721Mintable",
-    "ERC1155Mintable",
-  ]);
+  const nftIsMintable = (() => {
+    if (isErc721) {
+      return ERC721Ext.isMintToSupported(functionSelectorQuery.data);
+    }
+    if (isErc1155) {
+      return ERC1155Ext.isMintToSupported(functionSelectorQuery.data);
+    }
+    return false;
+  })();
   if (nftIsMintable && isMinter) {
     steps.push({
       title: "First NFT minted",
@@ -211,15 +258,11 @@ export const ContractChecklist: React.FC<ContractChecklistProps> = ({
         </Text>
       ),
       // can be either 721 or 1155
-      completed:
-        (erc721NftQuery.data?.length || erc1155NftQuery.data?.length || 0) > 0,
+      completed: (nftsQuery.data?.length || 0) > 0,
     });
   }
 
-  const isAccountFactory = detectFeatures(contractQuery.contract, [
-    "AccountFactory",
-  ]);
-  if (isAccountFactory) {
+  if (accountFactory) {
     steps.push({
       title: "First account created",
       children: (

apps/dashboard/src/contract-ui/tabs/overview/page.tsx

@@ -24,7 +24,6 @@ const TRACKING_CATEGORY = "contract_overview";
 
 export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   contract,
-
   isErc1155,
   isErc20,
   isErc721,
@@ -35,7 +34,12 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
   return (
     <SimpleGrid columns={{ base: 1, xl: 10 }} gap={20}>
       <GridItem as={Flex} colSpan={{ xl: 7 }} direction="column" gap={16}>
-        <ContractChecklist contract={contract} />
+        <ContractChecklist
+          isErc721={isErc721}
+          isErc1155={isErc1155}
+          isErc20={isErc20}
+          contract={contract}
+        />
 
         <AnalyticsOverview
           contractAddress={contract.address}
@@ -73,8 +77,6 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
       </GridItem>
       <GridItem colSpan={{ xl: 3 }} as={Flex} direction="column" gap={6}>
         <PublishedBy contractAddress={contract.address} />
-        {/* TODO: this is broken because it relies on something that no longer exists on contract instance */}
-        {/* {contract?.abi && <Extensions abi={contract?.abi} />} */}
       </GridItem>
     </SimpleGrid>
   );

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

@@ -143,7 +143,10 @@ export {
 /**
  * SHARED METADATA extension for ERC721
  */
-export { sharedMetadata } from "../../extensions/erc721/__generated__/ISharedMetadata/read/sharedMetadata.js";
+export {
+  sharedMetadata,
+  isSharedMetadataSupported,
+} from "../../extensions/erc721/__generated__/ISharedMetadata/read/sharedMetadata.js";
 export {
   setSharedMetadata,
   type SetSharedMetadataParams,