[Dashboard] Feature: update dashboard routes page to handle more routes (#6446)

<!--

## 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 renaming and updating the `RoutesPage` functionality, enhancing token properties, and adjusting UI elements in the routing components for better clarity and usability.

### Detailed summary
- Renamed `ChainListPage` to `RoutesPage`.
- Updated token properties to include `name` and `symbol` for both origin and destination tokens.
- Increased `filters.limit` from `10,000` to `50,000`.
- Modified UI classes for improved styling and consistency.

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

<!-- end pr-codex -->

Author: gregfromstl

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

@@ -1,59 +1,42 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import { NATIVE_TOKEN_ADDRESS, defineChain, getContract } from "thirdweb";
+import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
-import { name } from "thirdweb/extensions/common";
 
 type RouteListCardProps = {
   originChainId: number;
   originTokenAddress: string;
-  originTokenIconUri: string | null;
+  originTokenIconUri?: string | null;
+  originTokenSymbol: string;
+  originTokenName: string;
   destinationChainId: number;
   destinationTokenAddress: string;
-  destinationTokenIconUri: string | null;
+  destinationTokenIconUri?: string | null;
+  destinationTokenSymbol: string;
+  destinationTokenName: string;
 };
 
 export async function RouteListCard({
   originChainId,
   originTokenAddress,
   originTokenIconUri,
+  originTokenName,
   destinationChainId,
   destinationTokenAddress,
   destinationTokenIconUri,
+  destinationTokenName,
 }: RouteListCardProps) {
   const [
     originChain,
-    originTokenName,
     destinationChain,
-    destinationTokenName,
     resolvedOriginTokenIconUri,
     resolvedDestinationTokenIconUri,
   ] = await Promise.all([
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(originChainId)),
-    originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : name({
-          contract: getContract({
-            address: originTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(originChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(destinationChainId)),
-    destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : name({
-          contract: getContract({
-            address: destinationTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(destinationChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
@@ -78,17 +61,17 @@ export async function RouteListCard({
               <img
                 src={resolvedOriginTokenIconUri}
                 alt={originTokenAddress}
-                className="size-8 rounded-full bg-white"
+                className="size-8 rounded-full border border-muted-foreground"
               />
             ) : (
-              <div className="size-8 rounded-full bg-white/10" />
+              <div className="size-8 rounded-full bg-muted-foreground" />
             )}
             {resolvedDestinationTokenIconUri ? (
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 src={resolvedDestinationTokenIconUri}
                 alt={destinationTokenAddress}
-                className="-translate-x-4 size-8 rounded-full bg-white ring-2 ring-card"
+                className="-translate-x-4 size-8 rounded-full border border-muted-foreground ring-2 ring-card"
               />
             ) : (
               <div className="-translate-x-4 size-8 rounded-full bg-muted-foreground ring-2 ring-card" />

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

@@ -2,59 +2,41 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { TableCell, TableRow } from "@/components/ui/table";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import { NATIVE_TOKEN_ADDRESS, getContract } from "thirdweb";
 import { defineChain, getChainMetadata } from "thirdweb/chains";
-import { symbol } from "thirdweb/extensions/common";
 
 type RouteListRowProps = {
   originChainId: number;
   originTokenAddress: string;
-  originTokenIconUri: string | null;
+  originTokenIconUri?: string | null;
+  originTokenSymbol?: string;
+  originTokenName?: string;
   destinationChainId: number;
   destinationTokenAddress: string;
-  destinationTokenIconUri: string | null;
+  destinationTokenIconUri?: string | null;
+  destinationTokenSymbol?: string;
+  destinationTokenName?: string;
 };
 
 export async function RouteListRow({
   originChainId,
   originTokenAddress,
   originTokenIconUri,
+  originTokenSymbol,
   destinationChainId,
   destinationTokenAddress,
   destinationTokenIconUri,
+  destinationTokenSymbol,
 }: RouteListRowProps) {
   const [
     originChain,
-    originTokenSymbol,
     destinationChain,
-    destinationTokenSymbol,
     resolvedOriginTokenIconUri,
     resolvedDestinationTokenIconUri,
   ] = await Promise.all([
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(originChainId)),
-    originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : symbol({
-          contract: getContract({
-            address: originTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(originChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     // eslint-disable-next-line no-restricted-syntax
     getChainMetadata(defineChain(destinationChainId)),
-    destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
-      ? "ETH"
-      : symbol({
-          contract: getContract({
-            address: destinationTokenAddress,
-            // eslint-disable-next-line no-restricted-syntax
-            chain: defineChain(destinationChainId),
-            client: getThirdwebClient(),
-          }),
-        }).catch(() => undefined),
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
@@ -80,7 +62,7 @@ export async function RouteListRow({
               <img
                 src={resolvedOriginTokenIconUri}
                 alt={originTokenAddress}
-                className="size-6 rounded-full bg-muted-foreground"
+                className="size-6 rounded-full border border-muted-foreground"
               />
             ) : (
               <div className="size-6 rounded-full bg-muted-foreground" />
@@ -115,7 +97,7 @@ export async function RouteListRow({
               <img
                 src={resolvedDestinationTokenIconUri}
                 alt={destinationTokenAddress}
-                className="size-6 rounded-full bg-muted-foreground"
+                className="size-6 rounded-full border border-muted-foreground"
               />
             ) : (
               <div className="size-6 rounded-full bg-muted-foreground" />

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

@@ -50,7 +50,7 @@ async function getRoutesToRender(params: SearchParams) {
     }
   }
   // Temporary, will update this after the /routes endpoint
-  filters.limit = 10_000;
+  filters.limit = 50_000;
 
   const routes = await getRoutes(filters);
 
@@ -107,9 +107,13 @@ export async function RoutesData(props: {
                     originChainId={route.originToken.chainId}
                     originTokenAddress={route.originToken.address}
                     originTokenIconUri={route.originToken.iconUri}
+                    originTokenSymbol={route.originToken.symbol}
+                    originTokenName={route.originToken.name}
                     destinationChainId={route.destinationToken.chainId}
                     destinationTokenAddress={route.destinationToken.address}
                     destinationTokenIconUri={route.destinationToken.iconUri}
+                    destinationTokenSymbol={route.destinationToken.symbol}
+                    destinationTokenName={route.destinationToken.name}
                   />
                 ))}
               </TableBody>
@@ -126,9 +130,13 @@ export async function RoutesData(props: {
                   originChainId={route.originToken.chainId}
                   originTokenAddress={route.originToken.address}
                   originTokenIconUri={route.originToken.iconUri}
+                  originTokenSymbol={route.originToken.symbol}
+                  originTokenName={route.originToken.name}
                   destinationChainId={route.destinationToken.chainId}
                   destinationTokenAddress={route.destinationToken.address}
                   destinationTokenIconUri={route.destinationToken.iconUri}
+                  destinationTokenSymbol={route.destinationToken.symbol}
+                  destinationTokenName={route.destinationToken.name}
                 />
               </li>
             ))}

apps/dashboard/src/app/(dashboard)/(bridge)/routes/opengraph-image.png

@@ -22,7 +22,7 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function ChainListPage(props: {
+export default async function RoutesPage(props: {
   searchParams: Promise<SearchParams>;
 }) {
   const authToken = await getAuthToken();

apps/dashboard/src/app/(dashboard)/(bridge)/routes/page.tsx

@@ -4,11 +4,15 @@ export type Route = {
   originToken: {
     address: Address;
     chainId: number;
-    iconUri: string;
+    iconUri?: string;
+    name: string;
+    symbol: string;
   };
   destinationToken: {
     address: Address;
     chainId: number;
-    iconUri: string;
+    iconUri?: string;
+    name: string;
+    symbol: string;
   };
 };