[TOOL-4899] Dashboard: fetch token icon from bridge api as fallback in coin asset page

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts

@@ -0,0 +1,28 @@
+import { isProd } from "@/constants/env-utils";
+
+export async function fetchTokenInfoFromBridge(params: {
+  chainId: number;
+  tokenAddress: string;
+  clientId: string;
+}) {
+  const res = await fetch(
+    `https://bridge.${isProd ? "thirdweb.com" : "thirdweb-dev.com"}/v1/tokens?chainId=${params.chainId}&tokenAddress=${params.tokenAddress}&clientId=${params.clientId}`,
+  );
+
+  if (!res.ok) {
+    return null;
+  }
+
+  const data = (await res.json()) as {
+    data: Array<{
+      iconUri: string;
+      address: string;
+      decimals: number;
+      name: string;
+      symbol: string;
+      priceUsd: number;
+    }>;
+  };
+
+  return data.data[0];
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -9,14 +9,15 @@ import { ContractAnalyticsOverview } from "./_components/contract-analytics/cont
 import { BuyTokenEmbed } from "./_components/PayEmbedSection";
 import { TokenStats } from "./_components/PriceChart";
 import { RecentTransfers } from "./_components/RecentTransfers";
+import { fetchTokenInfoFromBridge } from "./_utils/fetch-coin-info";
 import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
 
 export async function ERC20PublicPage(props: {
   serverContract: ThirdwebContract;
   clientContract: ThirdwebContract;
   chainMetadata: ChainMetadata;
 }) {
-  const [contractMetadata, activeClaimCondition, tokenDecimals] =
+  const [contractMetadata, activeClaimCondition, tokenDecimals, tokenInfo] =
     await Promise.all([
       getContractMetadata({
         contract: props.serverContract,
@@ -25,8 +26,17 @@ export async function ERC20PublicPage(props: {
       decimals({
         contract: props.serverContract,
       }),
+      fetchTokenInfoFromBridge({
+        chainId: props.serverContract.chain.id,
+        clientId: props.clientContract.client.clientId,
+        tokenAddress: props.serverContract.address,
+      }),
     ]);
 
+  if (!contractMetadata.image && tokenInfo) {
+    contractMetadata.image = tokenInfo.iconUri;
+  }
+
   const claimConditionCurrencyMeta = activeClaimCondition
     ? await getCurrencyMeta({
         chain: props.serverContract.chain,