From a87e91b99c3b4bfc02cfb2b5e621a16a201bb941 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 7 Nov 2025 20:28:47 +0000
Subject: [PATCH] [MNY-305] Dashboard: Checksum addresses in tx page (#8380)
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 enhancing address handling in the `GeneericTxDetails` and `TokenInfo` components by introducing the `getAddress` function from `thirdweb`, ensuring that addresses are consistently formatted.

### Detailed summary
- Added `getAddress` import in `page.tsx` and `bridge-status.tsx`.
- Replaced direct usage of `transaction.from` and `transaction.to` with `fromAddress` and `toAddress` in `GeneericTxDetails`.
- Updated `textToCopy` and `textToShow` in `CopyTextButton` components to use `fromAddress` and `toAddress`.
- Updated `TokenInfo` to use `getAddress` for `props.token.address` and `props.walletAddress`.
- Changed `textToCopy` and `textToShow` in `TokenInfo` to use `tokenAddress`.

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

* **Bug Fixes**
  * Improved address normalization in transaction and bridge status displays to ensure consistent formatting across the dashboard, preventing potential issues with address validation and comparison.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../[chain_id]/tx/[txHash]/bridge-status.tsx      | 14 ++++++++++----
 .../(chain)/[chain_id]/tx/[txHash]/page.tsx       | 15 +++++++++------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
index 9f05c4b0188..961628ebb39 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/bridge-status.tsx
@@ -10,7 +10,11 @@ import {
   CircleXIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { NATIVE_TOKEN_ADDRESS, type ThirdwebClient } from "thirdweb";
+import {
+  getAddress,
+  NATIVE_TOKEN_ADDRESS,
+  type ThirdwebClient,
+} from "thirdweb";
 import type { Status, Token } from "thirdweb/bridge";
 import { status } from "thirdweb/bridge";
 import { toTokens } from "thirdweb/utils";
@@ -123,6 +127,8 @@ function TokenInfo(props: {
   const isNativeToken =
     props.token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();
 
+  const tokenAddress = getAddress(props.token.address);
+
   return (
     <div className="flex-1 pt-10 pb-9 px-6 lg:px-8">
       <div className="flex justify-between items-center">
@@ -206,7 +212,7 @@ function TokenInfo(props: {
         <div className="space-y-1">
           <p className="text-sm text-foreground ">{props.addressLabel}</p>
           <WalletAddress
-            address={props.walletAddress}
+            address={getAddress(props.walletAddress)}
             client={props.client}
             className="py-0.5 h-auto text-sm [&>*]:!font-sans tabular-nums [&>*]:font-normal text-muted-foreground hover:text-foreground"
             iconClassName="size-3"
@@ -222,8 +228,8 @@ function TokenInfo(props: {
                 ? `/${chainQuery.data?.slug || props.token.chainId}`
                 : `/${chainQuery.data?.slug || props.token.chainId}/${props.token.address}`
             }
-            textToShow={props.token.address}
-            textToCopy={props.token.address}
+            textToShow={tokenAddress}
+            textToCopy={tokenAddress}
             copyTooltip="Copy Token Address"
             className="-translate-x-1"
           />
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
index 2025563d565..5b7293e37f5 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx
@@ -8,7 +8,7 @@ import {
   Clock4Icon,
   InfoIcon,
 } from "lucide-react";
-import { toTokens } from "thirdweb";
+import { getAddress, toTokens } from "thirdweb";
 import { status } from "thirdweb/bridge";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -153,6 +153,9 @@ function GeneericTxDetails(props: {
 
   const timestamp = getDatefromTimestamp(block.timestamp);
 
+  const fromAddress = getAddress(transaction.from);
+  const toAddress = transaction.to ? getAddress(transaction.to) : undefined;
+
   return (
     <div className="border  rounded-xl p-4 lg:p-6 bg-card">
       {/* section 1 */}
@@ -216,8 +219,8 @@ function GeneericTxDetails(props: {
       <section className="border-b py-6 space-y-5 lg:space-y-3">
         <GridItem label="From" tooltip="The sending party of the transaction.">
           <CopyTextButton
-            textToCopy={transaction.from}
-            textToShow={transaction.from}
+            textToCopy={fromAddress}
+            textToShow={fromAddress}
             tooltip="Copy from address"
             variant="ghost"
             copyIconPosition="right"
@@ -225,14 +228,14 @@ function GeneericTxDetails(props: {
           />
         </GridItem>
 
-        {transaction.to && (
+        {toAddress && (
           <GridItem
             label="Interacted with (To)"
             tooltip="The receiving party of the transaction (could be a contract address)."
           >
             <CopyTextButton
-              textToCopy={transaction.to}
-              textToShow={transaction.to}
+              textToCopy={toAddress}
+              textToShow={toAddress}
               tooltip="Copy to address"
               variant="ghost"
               copyIconPosition="right"