From a2e13820f20c0bbcc42320a5a354f41bc6fbdc7e Mon Sep 17 00:00:00 2001
From: kien-ngo <26052673+kien-ngo@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:46:08 +0000
Subject: [PATCH] Dashboard v5: Update dashboard [...paths].tsx to v5 (#3925)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor contract detection logic and improve metadata handling.

### Detailed summary
- Removed `detectContractFeature` from `@thirdweb-dev/sdk`
- Added functions for detecting ERC20, ERC721, and ERC1155 extensions
- Improved contract metadata handling with `getContractMetadata` function

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

<!-- end pr-codex -->
---
 .../src/pages/[chain_id]/[...paths].tsx       | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/apps/dashboard/src/pages/[chain_id]/[...paths].tsx b/apps/dashboard/src/pages/[chain_id]/[...paths].tsx
index a2721c0b3b1..1039d97ea8c 100644
--- a/apps/dashboard/src/pages/[chain_id]/[...paths].tsx
+++ b/apps/dashboard/src/pages/[chain_id]/[...paths].tsx
@@ -16,7 +16,6 @@ import {
   QueryClient,
   dehydrate,
 } from "@tanstack/react-query";
-import { detectContractFeature } from "@thirdweb-dev/sdk";
 import { AppLayout } from "components/app-layouts/app";
 import { ConfigureNetworks } from "components/configure-networks/ConfigureNetworks";
 import { ensQuery } from "components/contract-components/hooks";
@@ -33,7 +32,6 @@ import {
   useSupportedChainsSlugRecord,
 } from "hooks/chains/configureChains";
 import { getDashboardChainRpc } from "lib/rpc";
-import { getThirdwebSDK } from "lib/sdk";
 import { thirdwebClient } from "lib/thirdweb-client";
 import { defineDashboardChain } from "lib/v5-adapter";
 import type { GetStaticPaths, GetStaticProps } from "next";
@@ -43,6 +41,10 @@ import { ContractOG } from "og-lib/url-utils";
 import { PageId } from "page-id";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { getContract } from "thirdweb";
+import { getContractMetadata } from "thirdweb/extensions/common";
+import { isERC20 } from "thirdweb/extensions/erc20";
+import { isERC721 } from "thirdweb/extensions/erc721";
+import { isERC1155 } from "thirdweb/extensions/erc1155";
 import { fetchChain } from "utils/fetchChain";
 import type { ThirdwebNextPage } from "utils/types";
 import { shortenIfAddress } from "utils/usedapp-external";
@@ -410,28 +412,28 @@ export const getStaticProps: GetStaticProps<EVMContractProps> = async (ctx) => {
   }
   const chain = await fetchChain(chainSlug);
 
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  let contractMetadata: any;
-
   let detectedExtension: EVMContractProps["detectedExtension"] = "unknown";
+  let contractMetadata: {
+    [key: string]: unknown;
+    name: string;
+    symbol: string;
+  } | null = null;
 
   if (chain?.chainId) {
     try {
-      // create the SDK on the chain
-      const sdk = getThirdwebSDK(
-        chain.chainId,
-        getDashboardChainRpc(chain.chainId),
-      );
-      // get the contract
-      const contract = await sdk.getContract(address);
-      // extract the abi to detect extensions
-      // we know it's there...
-      // biome-ignore lint/suspicious/noExplicitAny: FIXME
-      const contractWrapper = (contract as any).contractWrapper;
-      // detect extension bases
-      const isErc20 = detectContractFeature(contractWrapper, "ERC20");
-      const isErc721 = detectContractFeature(contractWrapper, "ERC721");
-      const isErc1155 = detectContractFeature(contractWrapper, "ERC1155");
+      const contract = getContract({
+        address,
+        chain: defineDashboardChain(chain.chainId),
+        client: thirdwebClient,
+      });
+      const [isErc20, isErc721, isErc1155, _contractMetadata] =
+        await Promise.all([
+          isERC20({ contract }).catch(() => false),
+          isERC721({ contract }).catch(() => false),
+          isERC1155({ contract }).catch(() => false),
+          getContractMetadata({ contract }).catch(() => null),
+        ]);
+      contractMetadata = _contractMetadata;
       // set the detected extension
       if (isErc20) {
         detectedExtension = "erc20";
@@ -440,13 +442,6 @@ export const getStaticProps: GetStaticProps<EVMContractProps> = async (ctx) => {
       } else if (isErc1155) {
         detectedExtension = "erc1155";
       }
-
-      // get the contract metadata
-      try {
-        contractMetadata = await contract.metadata.get();
-      } catch (err) {
-        // ignore, most likely requires import
-      }
     } catch (e) {
       // ignore, most likely requires import
     }