diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx index 9e0627c9bb3..2cb32f6689a 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx +++ b/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 (
- +
{resolvedOriginTokenIconUri ? ( @@ -80,32 +82,60 @@ export async function RouteListCard({ - - - - - - - - - - - -
- {originTokenName === "ETH" - ? originChain.nativeCurrency.name - : originTokenName} - - {originChain.name} -
- {destinationTokenName === "ETH" - ? destinationChain.nativeCurrency.name - : destinationTokenName} - - {destinationChain.name} -
+
+
+ +
+ {originChain.name} +
+
+ +
+ +
+ {destinationChain.name} +
+
+
); } + +const nativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS); + +function TokenName(props: { + tokenAddress: string; + tokenName: string; + chainMetadata: ChainMetadata; +}) { + const isERC20 = getAddress(props.tokenAddress) !== nativeTokenAddress; + + if (isERC20) { + return ( + + {props.tokenName} + + + ); + } + + return ( +
+ {props.chainMetadata.nativeCurrency.name} +
+ ); +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx index 3eb209216a7..86a975c5eac 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx +++ b/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,37 +61,14 @@ export async function RouteListRow({ ]); return ( - + -
-
- {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 - {originTokenAddress} - ) : ( -
- )} - {originTokenSymbol && ( - - )} -
-
+ @@ -90,34 +76,12 @@ export async function RouteListRow({ -
-
- {resolvedDestinationTokenIconUri ? ( - // eslint-disable-next-line @next/next/no-img-element - {destinationTokenAddress} - ) : ( -
- )} - {destinationTokenSymbol && ( - - )} -
-
+ @@ -126,3 +90,47 @@ export async function RouteListRow({ ); } + +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 ( +
+ {props.tokenIconUri ? ( + {props.tokenAddress} + ) : ( +
+ )} + {isERC20 ? ( + + ) : ( + + {props.chainMetadata.nativeCurrency.symbol} + + )} +
+ ); +} diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx index 701da89643c..b8c2ce213a4 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx @@ -86,22 +86,14 @@ export async function RoutesData(props: {

No Results found

) : props.activeView === "table" ? ( - + - - - - Origin Token - - - Origin Chain - - - Destination Token - - - Destination Chain - + + + Origin Token + Origin Chain + Destination Token + Destination Chain