[TOOL-4900] Dashboard: Add ERC20 token page links in /routes

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx

@@ -1,5 +1,7 @@
-import { defineChain } from "thirdweb";
-import { getChainMetadata } from "thirdweb/chains";
+import { ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+import { defineChain, getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
@@ -53,7 +55,7 @@ export async function RouteListCard({
 
   return (
     <div className="relative h-full">
-      <Card className="h-full w-full transition-colors hover:border-active-border">
+      <Card className="h-full w-full">
         <CardHeader className="flex flex-row items-center justify-between p-4">
           <div className="flex flex-row items-center gap-2">
             {resolvedOriginTokenIconUri ? (
@@ -80,32 +82,60 @@ export async function RouteListCard({
         </CardHeader>
 
         <CardContent className="px-4 pt-0 pb-4">
-          <table className="w-full">
-            <tbody className="text-sm [&_td>*]:min-h-[25px]">
-              <tr>
-                <th className="text-left font-normal text-base">
-                  {originTokenName === "ETH"
-                    ? originChain.nativeCurrency.name
-                    : originTokenName}
-                </th>
-                <td className="text-right text-base text-muted-foreground">
-                  {originChain.name}
-                </td>
-              </tr>
-              <tr>
-                <th className="text-left font-normal text-base">
-                  {destinationTokenName === "ETH"
-                    ? destinationChain.nativeCurrency.name
-                    : destinationTokenName}
-                </th>
-                <td className="text-right text-base text-muted-foreground">
-                  {destinationChain.name}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div className="flex flex-col gap-1">
+            <div className="flex justify-between gap-2">
+              <TokenName
+                chainMetadata={originChain}
+                tokenAddress={originTokenAddress}
+                tokenName={originTokenName}
+              />
+              <div className="text-right text-base text-muted-foreground">
+                {originChain.name}
+              </div>
+            </div>
+
+            <div className="flex justify-between gap-2">
+              <TokenName
+                chainMetadata={destinationChain}
+                tokenAddress={destinationTokenAddress}
+                tokenName={destinationTokenName}
+              />
+              <div className="text-right text-base text-muted-foreground">
+                {destinationChain.name}
+              </div>
+            </div>
+          </div>
         </CardContent>
       </Card>
     </div>
   );
 }
+
+const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
+
+function TokenName(props: {
+  tokenAddress: string;
+  tokenName: string;
+  chainMetadata: ChainMetadata;
+}) {
+  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
+
+  if (isERC20) {
+    return (
+      <Link
+        className="flex items-center gap-1.5 font-normal text-base group/link hover:underline underline-offset-4 decoration-muted-foreground/50 decoration-dotted"
+        href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
+        target="_blank"
+      >
+        {props.tokenName}
+        <ExternalLinkIcon className="size-3.5 text-muted-foreground group-hover/link:text-foreground" />
+      </Link>
+    );
+  }
+
+  return (
+    <div className="text-left font-normal text-base">
+      {props.chainMetadata.nativeCurrency.name}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx

@@ -1,5 +1,14 @@
-import { defineChain, getChainMetadata } from "thirdweb/chains";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+import { getAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
+import {
+  type ChainMetadata,
+  defineChain,
+  getChainMetadata,
+} from "thirdweb/chains";
+import { shortenAddress } from "thirdweb/utils";
+import { Img } from "@/components/blocks/Img";
+import { Button } from "@/components/ui/button";
 import { TableCell, TableRow } from "@/components/ui/table";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/utils/resolveSchemeWithErrorHandler";
@@ -52,72 +61,27 @@ export async function RouteListRow({
   ]);
 
   return (
-    <TableRow className="group transition-colors hover:bg-accent/50" linkBox>
+    <TableRow className="group">
       <TableCell>
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center gap-2">
-            {resolvedOriginTokenIconUri ? (
-              // For now we're using a normal img tag because the domain for these images is unknown
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={originTokenAddress}
-                className="size-7 rounded-full border border-border/50 shadow-sm transition-transform group-hover:scale-105"
-                src={resolvedOriginTokenIconUri}
-              />
-            ) : (
-              <div className="size-7 rounded-full bg-muted-foreground/20" />
-            )}
-            {originTokenSymbol && (
-              <CopyTextButton
-                className="relative z-10 font-medium text-base"
-                copyIconPosition="right"
-                textToCopy={originTokenAddress}
-                textToShow={
-                  originTokenSymbol === "ETH"
-                    ? originChain.nativeCurrency.symbol
-                    : originTokenSymbol
-                }
-                tooltip="Copy Token Address"
-                variant="ghost"
-              />
-            )}
-          </div>
-        </div>
+        <TokenInfo
+          chainMetadata={originChain}
+          tokenAddress={originTokenAddress}
+          tokenIconUri={resolvedOriginTokenIconUri}
+          tokenSymbol={originTokenSymbol}
+        />
       </TableCell>
 
       <TableCell className="text-muted-foreground/90">
         <span className="font-medium">{originChain.name}</span>
       </TableCell>
 
       <TableCell>
-        <div className="flex flex-row items-center gap-3">
-          <div className="flex items-center gap-2">
-            {resolvedDestinationTokenIconUri ? (
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                alt={destinationTokenAddress}
-                className="size-7 rounded-full border border-border/50 shadow-sm transition-transform group-hover:scale-105"
-                src={resolvedDestinationTokenIconUri}
-              />
-            ) : (
-              <div className="size-7 rounded-full bg-muted-foreground/20" />
-            )}
-            {destinationTokenSymbol && (
-              <CopyTextButton
-                className="relative z-10 font-medium text-base"
-                copyIconPosition="right"
-                textToCopy={destinationTokenAddress}
-                textToShow={
-                  destinationTokenSymbol === "ETH"
-                    ? destinationChain.nativeCurrency.symbol
-                    : destinationTokenSymbol
-                }
-                tooltip="Copy Token Address"
-                variant="ghost"
-              />
-            )}
-          </div>
-        </div>
+        <TokenInfo
+          chainMetadata={destinationChain}
+          tokenAddress={destinationTokenAddress}
+          tokenIconUri={resolvedDestinationTokenIconUri}
+          tokenSymbol={destinationTokenSymbol}
+        />
       </TableCell>
 
       <TableCell className="text-muted-foreground/90">
@@ -126,3 +90,47 @@ export async function RouteListRow({
     </TableRow>
   );
 }
+
+const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS);
+
+function TokenInfo(props: {
+  tokenAddress: string;
+  tokenSymbol: string | undefined;
+  chainMetadata: ChainMetadata;
+  tokenIconUri: string | undefined;
+}) {
+  const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      {props.tokenIconUri ? (
+        <Img
+          alt={props.tokenAddress}
+          className="size-7 rounded-full border border-border/50"
+          src={props.tokenIconUri}
+        />
+      ) : (
+        <div className="size-7 rounded-full bg-muted-foreground/20" />
+      )}
+      {isERC20 ? (
+        <Button
+          asChild
+          className="h-auto w-auto py-1 px-1.5 gap-2"
+          variant="ghost"
+        >
+          <Link
+            href={`https://thirdweb.com/${props.chainMetadata.slug}/${props.tokenAddress}`}
+            target="_blank"
+          >
+            {props.tokenSymbol || shortenAddress(props.tokenAddress)}
+            <ExternalLinkIcon className="size-3.5 text-muted-foreground" />
+          </Link>
+        </Button>
+      ) : (
+        <span className="font-medium text-sm px-1.5 py-1">
+          {props.chainMetadata.nativeCurrency.symbol}
+        </span>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx

@@ -86,22 +86,14 @@ export async function RoutesData(props: {
             <p className="text-2xl">No Results found</p>
           </div>
         ) : props.activeView === "table" ? (
-          <TableContainer className="overflow-hidden rounded-xl border border-border/50 bg-card/50 shadow-sm transition-all">
+          <TableContainer>
             <Table>
-              <TableHeader className="z-0">
-                <TableRow className="border-border/50 border-b bg-muted/50">
-                  <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
-                    Origin Token
-                  </TableHead>
-                  <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
-                    Origin Chain
-                  </TableHead>
-                  <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
-                    Destination Token
-                  </TableHead>
-                  <TableHead className="py-4 font-medium text-muted-foreground/80 text-xs uppercase tracking-wider">
-                    Destination Chain
-                  </TableHead>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Origin Token</TableHead>
+                  <TableHead>Origin Chain</TableHead>
+                  <TableHead>Destination Token</TableHead>
+                  <TableHead>Destination Chain</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>