[Update] Refactor claim conditions detection and NFT page handling (#4379)

<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to update the NFT overview page to include an `isErc721` flag and adjust features detection in NFT drawer tabs.

### Detailed summary
- Added `isErc721` flag to NFT overview page props
- Adjusted features detection in NFT drawer tabs for ERC20
- Refactored feature detection in contract route configuration

> ✨ 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

@@ -1,7 +1,6 @@
 import { useContract } from "@thirdweb-dev/react";
 import { extensionDetectedState } from "components/buttons/ExtensionDetectButton";
 import { useEns } from "components/contract-components/hooks";
-import { detectFeatures } from "components/contract-components/utils";
 import { ContractOverviewPage } from "contract-ui/tabs/overview/page";
 import type { EnhancedRoute } from "contract-ui/types/types";
 import dynamic from "next/dynamic";
@@ -210,29 +209,32 @@ export function useContractRouteConfig(
       ],
     });
 
-    const hasNewClaimConditions = detectFeatures(contractQuery.contract, [
-      // erc721
-      "ERC721ClaimConditionsV2",
-      "ERC721ClaimPhasesV2",
-      // erc1155
-      "ERC1155ClaimConditionsV2",
-      "ERC1155ClaimPhasesV2",
-      // erc20
-      "ERC20ClaimConditionsV2",
-      "ERC20ClaimPhasesV2",
-    ]);
+    const hasNewClaimConditions = extensionDetectedState({
+      contractQuery,
+      feature: [
+        // erc721
+        "ERC721ClaimConditionsV2",
+        "ERC721ClaimPhasesV2",
+        // erc1155
+        "ERC1155ClaimConditionsV2",
+        "ERC1155ClaimPhasesV2",
+        // erc20
+        "ERC20ClaimConditionsV2",
+        "ERC20ClaimPhasesV2",
+      ],
+    });
 
-    const hasMultiPhaseClaimConditions = detectFeatures(
-      contractQuery.contract,
-      [
+    const hasMultiPhaseClaimConditions = extensionDetectedState({
+      contractQuery,
+      feature: [
         // erc721
         "ERC721ClaimPhasesV2",
         // erc1155
         "ERC1155ClaimPhasesV2",
         // erc20
         "ERC20ClaimPhasesV2",
       ],
-    );
+    });
 
     return {
       claimconditionExtensionDetection,
@@ -354,7 +356,12 @@ export function useContractRouteConfig(
           : isERC721Query.isLoading || isERC1155Query.isLoading
             ? "loading"
             : "disabled",
-      component: () => <LazyContractNFTPage contract={contract} />,
+      component: () => (
+        <LazyContractNFTPage
+          contract={contract}
+          isErc721={isERC721Query.data || false}
+        />
+      ),
     },
     {
       title: "Tokens",
@@ -420,8 +427,10 @@ export function useContractRouteConfig(
             contractData.claimconditionExtensionDetection
           }
           isERC20={isERC20}
-          hasNewClaimConditions={contractData.hasNewClaimConditions}
-          isMultiPhase={contractData.hasMultiPhaseClaimConditions}
+          hasNewClaimConditions={
+            contractData.hasNewClaimConditions === "enabled"
+          }
+          isMultiPhase={contractData.hasMultiPhaseClaimConditions === "enabled"}
         />
       ),
     },

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

@@ -17,6 +17,7 @@ import { TokenIdPage } from "./components/token-id";
 
 interface NftOverviewPageProps {
   contract: ThirdwebContract;
+  isErc721: boolean;
 }
 
 function isOnlyNumbers(str: string) {
@@ -25,11 +26,11 @@ function isOnlyNumbers(str: string) {
 
 export const ContractNFTPage: React.FC<NftOverviewPageProps> = ({
   contract,
+  isErc721,
 }) => {
   const contractQuery = useContract(contract.address);
   const router = useRouter();
   const tokenId = router.query?.paths?.[2];
-  const isErc721 = detectFeatures(contractQuery?.contract, ["ERC721"]);
 
   if (tokenId && isOnlyNumbers(tokenId)) {
     return (

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

@@ -81,9 +81,6 @@ export function useNFTDrawerTabs({
         // erc1155
         "ERC1155ClaimConditionsV2",
         "ERC1155ClaimPhasesV2",
-        // erc20
-        "ERC20ClaimConditionsV2",
-        "ERC20ClaimPhasesV2",
       ]),
     [oldContract],
   );
@@ -94,18 +91,17 @@ export function useNFTDrawerTabs({
         "ERC721ClaimPhasesV2",
         // erc1155
         "ERC1155ClaimPhasesV2",
-        // erc20
-        "ERC20ClaimPhasesV2",
       ]),
     [oldContract],
   );
   const contractInfo = useMemo(() => {
     return {
       hasNewClaimConditions,
-      isErc20: detectFeatures(oldContract, ["ERC20"]),
+      // it cannot be erc20 since were in the NFT DRAWER TABS!
+      isErc20: false,
       isMultiPhase: hasMultiPhaseClaimConditions,
     };
-  }, [oldContract, hasNewClaimConditions, hasMultiPhaseClaimConditions]);
+  }, [hasNewClaimConditions, hasMultiPhaseClaimConditions]);
 
   return useMemo(() => {
     const isMintable = detectFeatures(oldContract, ["ERC1155Mintable"]);