From 7e73c344f5ac25d4e5ae7701db1f4500b135e79a Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 2 Jul 2025 20:15:47 +0000
Subject: [PATCH] Dashboard: asset page header: hide zero-address, fix icon 
 (#7514)
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 focuses on improving the handling of wallet addresses and token fetching in the application. It enhances the rendering of wallet address components and modifies the fetching logic for token information, including error handling.

### Detailed summary
- Updated rendering of the wallet address in `apps/dashboard/src/@/components/blocks/wallet-address.tsx` and `apps/nebula/src/@/components/blocks/wallet-address.tsx` to include `props.className` and added a `text-xs` class in the latter.
- Enhanced the fetch request in `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_utils/fetch-coin-info.ts` by moving `clientId` to headers and added error logging for failed requests.
- Modified the condition for rendering contract creator in `apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx` to check if `contractCreator` is not equal to `ZERO_ADDRESS`.

> ✨ 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**
  * Improved wallet address display to support external styling and smaller text size for the zero address.

* **Bug Fixes**
  * Updated contract header to ensure the contract creator badge is not shown for zero addresses.
  * Enhanced error logging for token info fetching to aid in troubleshooting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/@/components/blocks/wallet-address.tsx         |  6 +++++-
 .../public-pages/erc20/_components/ContractHeader.tsx  |  4 ++--
 .../public-pages/erc20/_utils/fetch-coin-info.ts       | 10 +++++++++-
 apps/nebula/src/@/components/blocks/wallet-address.tsx |  6 +++++-
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/wallet-address.tsx b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
index 1703458514c..94c90837c8d 100644
--- a/apps/dashboard/src/@/components/blocks/wallet-address.tsx
+++ b/apps/dashboard/src/@/components/blocks/wallet-address.tsx
@@ -59,7 +59,11 @@ export function WalletAddress(props: {
 
   // special case for zero address
   if (address === ZERO_ADDRESS) {
-    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
+    return (
+      <span className={cn("cursor-pointer font-mono", props.className)}>
+        {shortenedAddress}
+      </span>
+    );
   }
 
   return (
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
index 8d2ac72f937..28bb90f2014 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx
@@ -1,7 +1,7 @@
 import { ExternalLinkIcon, GlobeIcon, Settings2Icon } from "lucide-react";
 import Link from "next/link";
 import { useMemo } from "react";
-import type { ThirdwebContract } from "thirdweb";
+import { type ThirdwebContract, ZERO_ADDRESS } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { Img } from "@/components/blocks/Img";
 import { Button } from "@/components/ui/button";
@@ -149,7 +149,7 @@ export function ContractHeaderUI(props: {
 
         {/* bottom row */}
         <div className="flex flex-row flex-wrap items-center gap-2">
-          {props.contractCreator && (
+          {props.contractCreator && props.contractCreator !== ZERO_ADDRESS && (
             <ContractCreatorBadge
               clientContract={props.clientContract}
               contractCreator={props.contractCreator}
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
index af45befe8e7..b5c359bd392 100644
--- 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
@@ -7,10 +7,18 @@ export async function fetchTokenInfoFromBridge(params: {
 }) {
   try {
     const res = await fetch(
-      `https://bridge.${isProd ? "thirdweb.com" : "thirdweb-dev.com"}/v1/tokens?chainId=${params.chainId}&tokenAddress=${params.tokenAddress}&clientId=${params.clientId}`,
+      `https://bridge.${isProd ? "thirdweb.com" : "thirdweb-dev.com"}/v1/tokens?chainId=${params.chainId}&tokenAddress=${params.tokenAddress}`,
+      {
+        headers: {
+          "x-client-id": params.clientId,
+        },
+      },
     );
 
     if (!res.ok) {
+      console.error(
+        `Failed to fetch token info from bridge: ${await res.text()}`,
+      );
       return null;
     }
 
diff --git a/apps/nebula/src/@/components/blocks/wallet-address.tsx b/apps/nebula/src/@/components/blocks/wallet-address.tsx
index 3ee3086c92b..e985a079f42 100644
--- a/apps/nebula/src/@/components/blocks/wallet-address.tsx
+++ b/apps/nebula/src/@/components/blocks/wallet-address.tsx
@@ -59,7 +59,11 @@ export function WalletAddress(props: {
 
   // special case for zero address
   if (address === ZERO_ADDRESS) {
-    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
+    return (
+      <span className={cn("cursor-pointer font-mono text-xs", props.className)}>
+        {shortenedAddress}
+      </span>
+    );
   }
 
   return (