From 26b8c320ae09ea83f5ac34c2231bf43ff0da7530 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 27 Jun 2025 19:46:52 +0000
Subject: [PATCH] [TOOL-4899] Dashboard: fetch token icon from bridge api as
 fallback in coin asset page (#7460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new utility function to fetch token information from a bridge and integrates it into the `ERC20PublicPage` component to enhance contract metadata with token icons.

### Detailed summary
- Added `fetchTokenInfoFromBridge` function in `fetch-coin-info.ts` to fetch token details from a bridge API.
- Integrated `fetchTokenInfoFromBridge` in the `ERC20PublicPage` component.
- Updated contract metadata to include the token icon if not already present.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Enhanced ERC20 public pages to automatically display token icons when available, enriching token metadata with external information.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../erc20/_utils/fetch-coin-info.ts           | 32 +++++++++++++++++++
 .../public-pages/erc20/erc20.tsx              | 11 +++++++
 2 files changed, 43 insertions(+)
 create mode 100644 apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts
new file mode 100644
index 00000000000..af45befe8e7
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts
@@ -0,0 +1,32 @@
+import { isProd } from "@/constants/env-utils";
+
+export async function fetchTokenInfoFromBridge(params: {
+  chainId: number;
+  tokenAddress: string;
+  clientId: string;
+}) {
+  try {
+    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];
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
index ddbc48b278e..f9c59707790 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
@@ -11,6 +11,7 @@ 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: {
@@ -22,6 +23,7 @@ export async function ERC20PublicPage(props: {
     contractMetadata,
     activeClaimCondition,
     tokenDecimals,
+    tokenInfo,
     functionSelectors,
   ] = await Promise.all([
     getContractMetadata({
@@ -31,9 +33,18 @@ export async function ERC20PublicPage(props: {
     decimals({
       contract: props.serverContract,
     }),
+    fetchTokenInfoFromBridge({
+      chainId: props.serverContract.chain.id,
+      clientId: props.clientContract.client.clientId,
+      tokenAddress: props.serverContract.address,
+    }),
     resolveFunctionSelectors(props.serverContract),
   ]);
 
+  if (!contractMetadata.image && tokenInfo) {
+    contractMetadata.image = tokenInfo.iconUri;
+  }
+
   const [contractCreator, claimConditionCurrencyMeta] = await Promise.all([
     getContractCreator(props.serverContract, functionSelectors),
     activeClaimCondition