[MNY-246] Dashboard: Add Buy button in tokens table, update supported tokens count

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/tokens/components/tokens-table.tsx

@@ -39,6 +39,7 @@ export function TokensTable(props: {
               <TableHead>Price</TableHead>
               <TableHead>Market cap</TableHead>
               <TableHead>Volume (24h)</TableHead>
+              <TableHead></TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -64,6 +65,9 @@ export function TokensTable(props: {
                     <TableCell>
                       <Skeleton className="ml-auto h-4 w-20" />
                     </TableCell>
+                    <TableCell>
+                      <Skeleton className="ml-auto h-4 w-20" />
+                    </TableCell>
                   </TableRow>
                 ))
               : tokens.length > 0
@@ -81,6 +85,7 @@ export function TokensTable(props: {
                               <AvatarImage
                                 src={token.iconUri ?? undefined}
                                 alt={token.symbol}
+                                className="rounded-full"
                               />
                               <AvatarFallback>
                                 {token.symbol?.slice(0, 2)?.toUpperCase()}
@@ -90,20 +95,9 @@ export function TokensTable(props: {
                               <span className="font-medium leading-none text-base">
                                 {token.symbol}
                               </span>
-                              <Link
-                                href={
-                                  token.address.toLowerCase() ===
-                                  NATIVE_TOKEN_ADDRESS.toLowerCase()
-                                    ? `/${token.chainId}`
-                                    : `/${token.chainId}/${token.address}`
-                                }
-                                prefetch={false}
-                                className="before:absolute before:inset-0"
-                              >
-                                <span className="text-sm text-muted-foreground leading-none">
-                                  {token.name}
-                                </span>
-                              </Link>
+                              <span className="text-sm text-muted-foreground leading-none">
+                                {token.name}
+                              </span>
                             </div>
                           </div>
                         </TableCell>
@@ -120,6 +114,29 @@ export function TokensTable(props: {
                             ? formatUsdCompact(token.volume24hUsd)
                             : "N/A"}
                         </TableCell>
+                        <TableCell>
+                          <Button
+                            asChild
+                            variant="outline"
+                            size="sm"
+                            className="gap-2 rounded-full bg-card hover:border-foreground/50 text-muted-foreground hover:bg-inverted hover:text-inverted-foreground"
+                          >
+                            <Link
+                              aria-label={`Buy ${token.symbol}`}
+                              href={
+                                token.address.toLowerCase() ===
+                                NATIVE_TOKEN_ADDRESS.toLowerCase()
+                                  ? `/${token.chainId}`
+                                  : `/${token.chainId}/${token.address}`
+                              }
+                              prefetch={false}
+                              className="before:absolute before:inset-0"
+                            >
+                              Buy
+                              <ArrowRightIcon className="size-3" />
+                            </Link>
+                          </Button>
+                        </TableCell>
                       </TableRow>
                     );
                   })

apps/dashboard/src/app/(app)/(dashboard)/tokens/page.tsx

@@ -36,7 +36,7 @@ export default async function Page() {
           </h1>
 
           <p className="text-muted-foreground">
-            85+ chains, 3200+ tokens and 9+ million routes supported
+            85+ chains, 4500+ tokens and 9+ million routes supported
           </p>
         </div>
       </div>

apps/dashboard/src/app/bridge/page.tsx

@@ -14,7 +14,7 @@ import { bridgeAppThirdwebClient } from "./constants";
 
 const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains";
 const description =
-  "Bridge and swap 3,200+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
+  "Bridge and swap 4500+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
 
 export const metadata: Metadata = {
   description,
@@ -73,7 +73,7 @@ export default async function BridgePage({
 
             <div className="flex-wrap flex gap-3 items-center justify-center">
               <DataPill>85+ Chains Supported</DataPill>
-              <DataPill>3200+ Tokens Supported</DataPill>
+              <DataPill>4500+ Tokens Supported</DataPill>
               <DataPill>9+ Million Routes Available</DataPill>
             </div>
           </div>