Skip to content

Commit dd06be8

Browse files
gregfromstlgregfromstl
committed
[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 -->
1 parent bf8da35 commit dd06be8

File tree

6 files changed

+38
-61
lines changed

6 files changed

+38
-61
lines changed

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

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,42 @@
11
import { Card, CardContent, CardHeader } from "@/components/ui/card";
22
import { getThirdwebClient } from "@/constants/thirdweb.server";
33
import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
4-
import { NATIVE_TOKEN_ADDRESS, defineChain, getContract } from "thirdweb";
4+
import { defineChain } from "thirdweb";
55
import { getChainMetadata } from "thirdweb/chains";
6-
import { name } from "thirdweb/extensions/common";
76

87
type RouteListCardProps = {
98
originChainId: number;
109
originTokenAddress: string;
11-
originTokenIconUri: string | null;
10+
originTokenIconUri?: string | null;
11+
originTokenSymbol: string;
12+
originTokenName: string;
1213
destinationChainId: number;
1314
destinationTokenAddress: string;
14-
destinationTokenIconUri: string | null;
15+
destinationTokenIconUri?: string | null;
16+
destinationTokenSymbol: string;
17+
destinationTokenName: string;
1518
};
1619

1720
export async function RouteListCard({
1821
originChainId,
1922
originTokenAddress,
2023
originTokenIconUri,
24+
originTokenName,
2125
destinationChainId,
2226
destinationTokenAddress,
2327
destinationTokenIconUri,
28+
destinationTokenName,
2429
}: RouteListCardProps) {
2530
const [
2631
originChain,
27-
originTokenName,
2832
destinationChain,
29-
destinationTokenName,
3033
resolvedOriginTokenIconUri,
3134
resolvedDestinationTokenIconUri,
3235
] = await Promise.all([
3336
// eslint-disable-next-line no-restricted-syntax
3437
getChainMetadata(defineChain(originChainId)),
35-
originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
36-
? "ETH"
37-
: name({
38-
contract: getContract({
39-
address: originTokenAddress,
40-
// eslint-disable-next-line no-restricted-syntax
41-
chain: defineChain(originChainId),
42-
client: getThirdwebClient(),
43-
}),
44-
}).catch(() => undefined),
4538
// eslint-disable-next-line no-restricted-syntax
4639
getChainMetadata(defineChain(destinationChainId)),
47-
destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
48-
? "ETH"
49-
: name({
50-
contract: getContract({
51-
address: destinationTokenAddress,
52-
// eslint-disable-next-line no-restricted-syntax
53-
chain: defineChain(destinationChainId),
54-
client: getThirdwebClient(),
55-
}),
56-
}).catch(() => undefined),
5740
originTokenIconUri
5841
? resolveSchemeWithErrorHandler({
5942
uri: originTokenIconUri,
@@ -78,17 +61,17 @@ export async function RouteListCard({
7861
<img
7962
src={resolvedOriginTokenIconUri}
8063
alt={originTokenAddress}
81-
className="size-8 rounded-full bg-white"
64+
className="size-8 rounded-full border border-muted-foreground"
8265
/>
8366
) : (
84-
<div className="size-8 rounded-full bg-white/10" />
67+
<div className="size-8 rounded-full bg-muted-foreground" />
8568
)}
8669
{resolvedDestinationTokenIconUri ? (
8770
// eslint-disable-next-line @next/next/no-img-element
8871
<img
8972
src={resolvedDestinationTokenIconUri}
9073
alt={destinationTokenAddress}
91-
className="-translate-x-4 size-8 rounded-full bg-white ring-2 ring-card"
74+
className="-translate-x-4 size-8 rounded-full border border-muted-foreground ring-2 ring-card"
9275
/>
9376
) : (
9477
<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‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,41 @@ import { CopyTextButton } from "@/components/ui/CopyTextButton";
22
import { TableCell, TableRow } from "@/components/ui/table";
33
import { getThirdwebClient } from "@/constants/thirdweb.server";
44
import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
5-
import { NATIVE_TOKEN_ADDRESS, getContract } from "thirdweb";
65
import { defineChain, getChainMetadata } from "thirdweb/chains";
7-
import { symbol } from "thirdweb/extensions/common";
86

97
type RouteListRowProps = {
108
originChainId: number;
119
originTokenAddress: string;
12-
originTokenIconUri: string | null;
10+
originTokenIconUri?: string | null;
11+
originTokenSymbol?: string;
12+
originTokenName?: string;
1313
destinationChainId: number;
1414
destinationTokenAddress: string;
15-
destinationTokenIconUri: string | null;
15+
destinationTokenIconUri?: string | null;
16+
destinationTokenSymbol?: string;
17+
destinationTokenName?: string;
1618
};
1719

1820
export async function RouteListRow({
1921
originChainId,
2022
originTokenAddress,
2123
originTokenIconUri,
24+
originTokenSymbol,
2225
destinationChainId,
2326
destinationTokenAddress,
2427
destinationTokenIconUri,
28+
destinationTokenSymbol,
2529
}: RouteListRowProps) {
2630
const [
2731
originChain,
28-
originTokenSymbol,
2932
destinationChain,
30-
destinationTokenSymbol,
3133
resolvedOriginTokenIconUri,
3234
resolvedDestinationTokenIconUri,
3335
] = await Promise.all([
3436
// eslint-disable-next-line no-restricted-syntax
3537
getChainMetadata(defineChain(originChainId)),
36-
originTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
37-
? "ETH"
38-
: symbol({
39-
contract: getContract({
40-
address: originTokenAddress,
41-
// eslint-disable-next-line no-restricted-syntax
42-
chain: defineChain(originChainId),
43-
client: getThirdwebClient(),
44-
}),
45-
}).catch(() => undefined),
4638
// eslint-disable-next-line no-restricted-syntax
4739
getChainMetadata(defineChain(destinationChainId)),
48-
destinationTokenAddress.toLowerCase() === NATIVE_TOKEN_ADDRESS
49-
? "ETH"
50-
: symbol({
51-
contract: getContract({
52-
address: destinationTokenAddress,
53-
// eslint-disable-next-line no-restricted-syntax
54-
chain: defineChain(destinationChainId),
55-
client: getThirdwebClient(),
56-
}),
57-
}).catch(() => undefined),
5840
originTokenIconUri
5941
? resolveSchemeWithErrorHandler({
6042
uri: originTokenIconUri,
@@ -80,7 +62,7 @@ export async function RouteListRow({
8062
<img
8163
src={resolvedOriginTokenIconUri}
8264
alt={originTokenAddress}
83-
className="size-6 rounded-full bg-muted-foreground"
65+
className="size-6 rounded-full border border-muted-foreground"
8466
/>
8567
) : (
8668
<div className="size-6 rounded-full bg-muted-foreground" />
@@ -115,7 +97,7 @@ export async function RouteListRow({
11597
<img
11698
src={resolvedDestinationTokenIconUri}
11799
alt={destinationTokenAddress}
118-
className="size-6 rounded-full bg-muted-foreground"
100+
className="size-6 rounded-full border border-muted-foreground"
119101
/>
120102
) : (
121103
<div className="size-6 rounded-full bg-muted-foreground" />

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ async function getRoutesToRender(params: SearchParams) {
5050
}
5151
}
5252
// Temporary, will update this after the /routes endpoint
53-
filters.limit = 10_000;
53+
filters.limit = 50_000;
5454

5555
const routes = await getRoutes(filters);
5656

@@ -107,9 +107,13 @@ export async function RoutesData(props: {
107107
originChainId={route.originToken.chainId}
108108
originTokenAddress={route.originToken.address}
109109
originTokenIconUri={route.originToken.iconUri}
110+
originTokenSymbol={route.originToken.symbol}
111+
originTokenName={route.originToken.name}
110112
destinationChainId={route.destinationToken.chainId}
111113
destinationTokenAddress={route.destinationToken.address}
112114
destinationTokenIconUri={route.destinationToken.iconUri}
115+
destinationTokenSymbol={route.destinationToken.symbol}
116+
destinationTokenName={route.destinationToken.name}
113117
/>
114118
))}
115119
</TableBody>
@@ -126,9 +130,13 @@ export async function RoutesData(props: {
126130
originChainId={route.originToken.chainId}
127131
originTokenAddress={route.originToken.address}
128132
originTokenIconUri={route.originToken.iconUri}
133+
originTokenSymbol={route.originToken.symbol}
134+
originTokenName={route.originToken.name}
129135
destinationChainId={route.destinationToken.chainId}
130136
destinationTokenAddress={route.destinationToken.address}
131137
destinationTokenIconUri={route.destinationToken.iconUri}
138+
destinationTokenSymbol={route.destinationToken.symbol}
139+
destinationTokenName={route.destinationToken.name}
132140
/>
133141
</li>
134142
))}

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

-13.3 KB
Binary file not shown.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
2222
},
2323
};
2424

25-
export default async function ChainListPage(props: {
25+
export default async function RoutesPage(props: {
2626
searchParams: Promise<SearchParams>;
2727
}) {
2828
const authToken = await getAuthToken();

‎apps/dashboard/src/app/(dashboard)/(bridge)/types/route.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ export type Route = {
44
originToken: {
55
address: Address;
66
chainId: number;
7-
iconUri: string;
7+
iconUri?: string;
8+
name: string;
9+
symbol: string;
810
};
911
destinationToken: {
1012
address: Address;
1113
chainId: number;
12-
iconUri: string;
14+
iconUri?: string;
15+
name: string;
16+
symbol: string;
1317
};
1418
};

0 commit comments

Comments
 (0)