Skip to content

Commit 64f4103

Browse files
kien-ngokien-ngo
committed
[Playground] Add Token components, fix links (#5677)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces a new `Token` navigation link, updates documentation links, and adds a new SVG file. It also implements a `Token` components page with multiple examples and components for displaying tokens, enhancing the UI for token-related functionalities. ### Detailed summary - Added a new navigation link for `Token` in `navLinks.ts`. - Updated documentation links in `page.tsx` for better references. - Introduced a new SVG file for `usdc`. - Created a new `Token` components page with examples for: - `TokenImageBasic` - `TokenImageOverride` - `TokenNameBasic` - `TokenSymbolBasic` - `TokenCard` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent d90857e commit 64f4103

File tree

6 files changed

+314
-2
lines changed

6 files changed

+314
-2
lines changed

‎apps/playground-web/public/usdc.svg

Lines changed: 5 additions & 0 deletions
Loading

‎apps/playground-web/src/app/connect/ui/nft/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function Page() {
3232
their perfect user interface.
3333
</>
3434
}
35-
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
35+
docsLink="https://portal.thirdweb.com/react/v5/components/onchain#nfts"
3636
heroLink="/headless-ui-header.png"
3737
/>
3838
<section className="space-y-8">

‎apps/playground-web/src/app/connect/ui/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function Page() {
3737
complete control over your dApp&apos;s design.
3838
</>
3939
}
40-
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
40+
docsLink="https://portal.thirdweb.com/react/v5/components/account"
4141
heroLink="/headless-ui-header.png"
4242
/>
4343

‎apps/playground-web/src/app/connect/ui/token/page.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { APIHeader } from "@/components/blocks/APIHeader";
2+
import {} from "@/components/headless-ui/nft-examples";
3+
import {
4+
TokenCard,
5+
TokenImageBasic,
6+
TokenImageOverride,
7+
TokenNameBasic,
8+
TokenSymbolBasic,
9+
} from "@/components/headless-ui/token-examples";
10+
import ThirdwebProvider from "@/components/thirdweb-provider";
11+
import { metadataBase } from "@/lib/constants";
12+
import type { Metadata } from "next";
13+
14+
export const metadata: Metadata = {
15+
metadataBase,
16+
title: "Token Components",
17+
description:
18+
"Elevate your ERC20 and native crypto token applications with our React headless UI components, designed for efficient digital currency transactions. These customizable, zero-styling components simplify token interactions, giving developers the flexibility to create their ideal user interface for DeFi platforms, wallets, and other crypto applications.",
19+
};
20+
21+
export default function Page() {
22+
return (
23+
<ThirdwebProvider>
24+
<main className="container px-0 pb-20">
25+
<APIHeader
26+
title="Token Components"
27+
description={
28+
<>
29+
Elevate your ERC20 and native crypto token applications with our
30+
React headless UI components, designed for efficient digital
31+
currency transactions. These customizable, zero-styling components
32+
simplify token interactions, giving developers the flexibility to
33+
create their ideal user interface for DeFi platforms, wallets, and
34+
other crypto applications.
35+
</>
36+
}
37+
docsLink="https://portal.thirdweb.com/react/v5/components/onchain#tokens"
38+
heroLink="/headless-ui-header.png"
39+
/>
40+
<section className="space-y-8">
41+
<TokenImageBasic />
42+
</section>
43+
<section className="space-y-8">
44+
<TokenImageOverride />
45+
</section>
46+
<section className="space-y-8">
47+
<TokenNameBasic />
48+
</section>
49+
<section className="space-y-8">
50+
<TokenSymbolBasic />
51+
</section>
52+
<section className="space-y-8">
53+
<TokenCard />
54+
</section>
55+
</main>
56+
</ThirdwebProvider>
57+
);
58+
}

‎apps/playground-web/src/app/navLinks.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,10 @@ export const navLinks: SidebarLink[] = [
123123
name: "NFT",
124124
href: "/connect/ui/nft",
125125
},
126+
{
127+
name: "Token",
128+
href: "/connect/ui/token",
129+
},
126130
],
127131
},
128132
];

‎apps/playground-web/src/components/headless-ui/token-examples.tsx

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
"use client";
2+
3+
import { THIRDWEB_CLIENT } from "@/lib/client";
4+
import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
5+
import { ethereum } from "thirdweb/chains";
6+
import {
7+
TokenIcon,
8+
TokenName,
9+
TokenProvider,
10+
TokenSymbol,
11+
} from "thirdweb/react";
12+
import { CodeExample } from "../code/code-example";
13+
14+
const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
15+
16+
export function TokenImageBasic() {
17+
return (
18+
<>
19+
<div className="space-y-2">
20+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
21+
TokenIcon
22+
</h2>
23+
<p className="max-w-[600px] text-lg">
24+
Show the default native icon of a network
25+
</p>
26+
</div>
27+
28+
<CodeExample
29+
preview={
30+
<TokenProvider
31+
address={NATIVE_TOKEN_ADDRESS}
32+
client={THIRDWEB_CLIENT}
33+
chain={ethereum}
34+
>
35+
<TokenIcon className="h-auto w-20 rounded-full" />
36+
</TokenProvider>
37+
}
38+
code={`import { TokenProvider, TokenIcon } from "thirdweb/react";
39+
40+
function App() {
41+
return (
42+
<TokenProvider
43+
address={NATIVE_TOKEN_ADDRESS}
44+
client={THIRDWEB_CLIENT}
45+
chain={ethereum}
46+
>
47+
<TokenIcon className="h-auto w-20 rounded-full" />
48+
</TokenProvider>
49+
)
50+
}`}
51+
lang="tsx"
52+
/>
53+
</>
54+
);
55+
}
56+
57+
export function TokenImageOverride() {
58+
return (
59+
<>
60+
<div className="mt-8 space-y-2">
61+
<h4 className="font-semibold text-lg">
62+
Override the token&apos;s icon using the <b>iconResolver</b> prop.
63+
</h4>
64+
<p className="max-w-[600px] text-lg">
65+
There is no official way to query the icon of a token. If you have a
66+
source, you can pass it to the iconResolver prop.
67+
</p>
68+
</div>
69+
70+
<CodeExample
71+
preview={
72+
<TokenProvider
73+
address={USDC_ADDRESS}
74+
client={THIRDWEB_CLIENT}
75+
chain={ethereum}
76+
>
77+
<TokenIcon
78+
className="h-auto w-20 rounded-full"
79+
iconResolver="/usdc.svg"
80+
/>
81+
</TokenProvider>
82+
}
83+
code={`import { TokenProvider, TokenIcon } from "thirdweb/react";
84+
85+
function App() {
86+
const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
87+
return (
88+
<TokenProvider
89+
address={USDC_ADDRESS}
90+
client={THIRDWEB_CLIENT}
91+
chain={ethereum}
92+
>
93+
<TokenIcon
94+
className="h-auto w-20 rounded-full"
95+
iconResolver="/usdc.svg"
96+
/>
97+
</TokenProvider>
98+
)
99+
}`}
100+
lang="tsx"
101+
/>
102+
</>
103+
);
104+
}
105+
106+
export function TokenNameBasic() {
107+
return (
108+
<>
109+
<div className="mt-8 space-y-2">
110+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
111+
TokenName
112+
</h2>
113+
<p className="max-w-[600px] text-lg">Show the name of the token</p>
114+
</div>
115+
116+
<CodeExample
117+
preview={
118+
<TokenProvider
119+
address={USDC_ADDRESS}
120+
client={THIRDWEB_CLIENT}
121+
chain={ethereum}
122+
>
123+
<TokenName loadingComponent={<span>Loading...</span>} />
124+
</TokenProvider>
125+
}
126+
code={`import { TokenProvider, TokenName } from "thirdweb/react";
127+
128+
function App() {
129+
return (
130+
<TokenProvider
131+
address={USDC_ADDRESS}
132+
client={THIRDWEB_CLIENT}
133+
chain={ethereum}
134+
>
135+
<TokenName loadingComponent={<span>Loading...</span>} />
136+
</TokenProvider>
137+
)
138+
}`}
139+
lang="tsx"
140+
/>
141+
</>
142+
);
143+
}
144+
145+
export function TokenSymbolBasic() {
146+
return (
147+
<>
148+
<div className="mt-8 space-y-2">
149+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
150+
TokenSymbol
151+
</h2>
152+
<p className="max-w-[600px] text-lg">Show the symbol of the token</p>
153+
</div>
154+
155+
<CodeExample
156+
preview={
157+
<TokenProvider
158+
address={USDC_ADDRESS}
159+
client={THIRDWEB_CLIENT}
160+
chain={ethereum}
161+
>
162+
<TokenSymbol loadingComponent={<span>Loading...</span>} />
163+
</TokenProvider>
164+
}
165+
code={`import { TokenProvider, TokenSymbol } from "thirdweb/react";
166+
167+
function App() {
168+
return (
169+
<TokenProvider
170+
address={USDC_ADDRESS}
171+
client={THIRDWEB_CLIENT}
172+
chain={ethereum}
173+
>
174+
<TokenSymbol loadingComponent={<span>Loading...</span>} />
175+
</TokenProvider>
176+
)
177+
}`}
178+
lang="tsx"
179+
/>
180+
</>
181+
);
182+
}
183+
184+
export function TokenCard() {
185+
return (
186+
<>
187+
<div className="mt-8 space-y-2">
188+
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
189+
Build a token card
190+
</h2>
191+
<p className="max-w-[600px] text-lg">
192+
You can build a Token card by putting the Token components together
193+
</p>
194+
</div>
195+
196+
<CodeExample
197+
preview={
198+
<TokenProvider
199+
address={USDC_ADDRESS}
200+
client={THIRDWEB_CLIENT}
201+
chain={ethereum}
202+
>
203+
<div className="flex flex-row items-center gap-2 rounded-lg border bg-slate-950 px-4 py-1">
204+
<TokenIcon className="h-10 w-10" iconResolver="/usdc.svg" />
205+
<div className="flex flex-col">
206+
<TokenName
207+
className="font-bold"
208+
loadingComponent={<span>Loading...</span>}
209+
/>
210+
<TokenSymbol
211+
className="text-gray-500"
212+
loadingComponent={<span>Loading...</span>}
213+
/>
214+
</div>
215+
</div>
216+
</TokenProvider>
217+
}
218+
code={`import { TokenProvider, TokenSymbol } from "thirdweb/react";
219+
220+
function App() {
221+
return (
222+
<TokenProvider
223+
address={USDC_ADDRESS}
224+
client={THIRDWEB_CLIENT}
225+
chain={ethereum}
226+
>
227+
<div className="flex flex-row items-center gap-2 rounded-lg border bg-slate-950 px-4 py-1">
228+
<TokenIcon className="h-10 w-10" iconResolver="/usdc.svg" />
229+
<div className="flex flex-col">
230+
<TokenName
231+
className="font-bold"
232+
/>
233+
<TokenSymbol
234+
className="text-gray-500"
235+
/>
236+
</div>
237+
</div>
238+
</TokenProvider>
239+
)
240+
}`}
241+
lang="tsx"
242+
/>
243+
</>
244+
);
245+
}

0 commit comments

Comments
 (0)