Skip to content

Commit 6fc4d83

Browse files
MananTankMananTank
committed
[MNY-246] Dashboard: Add Buy button in tokens table, update supported tokens count (#8222)
<!-- ## 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 updating token-related information and enhancing the `TokensTable` component in the dashboard, including the increase in the number of supported tokens and the addition of a buy button for each token. ### Detailed summary - Updated token count from `3200+` to `4500+` in `page.tsx`. - Changed description in `page.tsx` to reflect the new token count. - Modified `TokensTable` to display the updated token count. - Added a new button in `TokensTable` for buying tokens, including a link to the token's page. > ✨ 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 - New Features - Added a Buy action column with a button in the tokens table, including proper skeleton alignment for the new column. - Style - Rounded token avatars for a refined look. - Simplified token name display by removing inline linking. - Documentation - Updated copy to reflect “4500+ tokens” on the tokens page and bridge page, including Open Graph/description and UI labels. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent fe940b3 commit 6fc4d83

File tree

3 files changed

+34
-17
lines changed

3 files changed

+34
-17
lines changed

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

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export function TokensTable(props: {
3939
<TableHead>Price</TableHead>
4040
<TableHead>Market cap</TableHead>
4141
<TableHead>Volume (24h)</TableHead>
42+
<TableHead></TableHead>
4243
</TableRow>
4344
</TableHeader>
4445
<TableBody>
@@ -64,6 +65,9 @@ export function TokensTable(props: {
6465
<TableCell>
6566
<Skeleton className="ml-auto h-4 w-20" />
6667
</TableCell>
68+
<TableCell>
69+
<Skeleton className="ml-auto h-4 w-20" />
70+
</TableCell>
6771
</TableRow>
6872
))
6973
: tokens.length > 0
@@ -81,6 +85,7 @@ export function TokensTable(props: {
8185
<AvatarImage
8286
src={token.iconUri ?? undefined}
8387
alt={token.symbol}
88+
className="rounded-full"
8489
/>
8590
<AvatarFallback>
8691
{token.symbol?.slice(0, 2)?.toUpperCase()}
@@ -90,20 +95,9 @@ export function TokensTable(props: {
9095
<span className="font-medium leading-none text-base">
9196
{token.symbol}
9297
</span>
93-
<Link
94-
href={
95-
token.address.toLowerCase() ===
96-
NATIVE_TOKEN_ADDRESS.toLowerCase()
97-
? `/${token.chainId}`
98-
: `/${token.chainId}/${token.address}`
99-
}
100-
prefetch={false}
101-
className="before:absolute before:inset-0"
102-
>
103-
<span className="text-sm text-muted-foreground leading-none">
104-
{token.name}
105-
</span>
106-
</Link>
98+
<span className="text-sm text-muted-foreground leading-none">
99+
{token.name}
100+
</span>
107101
</div>
108102
</div>
109103
</TableCell>
@@ -120,6 +114,29 @@ export function TokensTable(props: {
120114
? formatUsdCompact(token.volume24hUsd)
121115
: "N/A"}
122116
</TableCell>
117+
<TableCell>
118+
<Button
119+
asChild
120+
variant="outline"
121+
size="sm"
122+
className="gap-2 rounded-full bg-card hover:border-foreground/50 text-muted-foreground hover:bg-inverted hover:text-inverted-foreground"
123+
>
124+
<Link
125+
aria-label={`Buy ${token.symbol}`}
126+
href={
127+
token.address.toLowerCase() ===
128+
NATIVE_TOKEN_ADDRESS.toLowerCase()
129+
? `/${token.chainId}`
130+
: `/${token.chainId}/${token.address}`
131+
}
132+
prefetch={false}
133+
className="before:absolute before:inset-0"
134+
>
135+
Buy
136+
<ArrowRightIcon className="size-3" />
137+
</Link>
138+
</Button>
139+
</TableCell>
123140
</TableRow>
124141
);
125142
})

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default async function Page() {
3636
</h1>
3737

3838
<p className="text-muted-foreground">
39-
85+ chains, 3200+ tokens and 9+ million routes supported
39+
85+ chains, 4500+ tokens and 9+ million routes supported
4040
</p>
4141
</div>
4242
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { bridgeAppThirdwebClient } from "./constants";
1414

1515
const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains";
1616
const description =
17-
"Bridge and swap 3,200+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
17+
"Bridge and swap 4500+ tokens across 85+ chains (Ethereum, Base, Optimism, Arbitrum, BNB & more). Best-price routing with near-instant finality";
1818

1919
export const metadata: Metadata = {
2020
description,
@@ -73,7 +73,7 @@ export default async function BridgePage({
7373

7474
<div className="flex-wrap flex gap-3 items-center justify-center">
7575
<DataPill>85+ Chains Supported</DataPill>
76-
<DataPill>3200+ Tokens Supported</DataPill>
76+
<DataPill>4500+ Tokens Supported</DataPill>
7777
<DataPill>9+ Million Routes Available</DataPill>
7878
</div>
7979
</div>

0 commit comments

Comments
 (0)