Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@kien-ngo
kien-ngo committed Dec 11, 2024
1 parent 2fccfc0 commit 59a3d10
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 2 deletions.
5 changes: 5 additions & 0 deletions apps/playground-web/public/usdc.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/playground-web/src/app/connect/ui/nft/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function Page() {
their perfect user interface.
</>
}
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
docsLink="https://portal.thirdweb.com/react/v5/components/onchain#nfts"
heroLink="/headless-ui-header.png"
/>
<section className="space-y-8">
Expand Down
2 changes: 1 addition & 1 deletion apps/playground-web/src/app/connect/ui/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function Page() {
complete control over your dApp&apos;s design.
</>
}
docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
docsLink="https://portal.thirdweb.com/react/v5/components/account"
heroLink="/headless-ui-header.png"
/>

Expand Down
58 changes: 58 additions & 0 deletions apps/playground-web/src/app/connect/ui/token/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { APIHeader } from "@/components/blocks/APIHeader";
import {} from "@/components/headless-ui/nft-examples";
import {
TokenCard,
TokenImageBasic,
TokenImageOverride,
TokenNameBasic,
TokenSymbolBasic,
} from "@/components/headless-ui/token-examples";
import ThirdwebProvider from "@/components/thirdweb-provider";
import { metadataBase } from "@/lib/constants";
import type { Metadata } from "next";

export const metadata: Metadata = {
metadataBase,
title: "Token Components",
description:
"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.",
};

export default function Page() {
return (
<ThirdwebProvider>
<main className="container px-0 pb-20">
<APIHeader
title="Token Components"
description={
<>
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.
</>
}
docsLink="https://portal.thirdweb.com/react/v5/components/onchain#tokens"
heroLink="/headless-ui-header.png"
/>
<section className="space-y-8">
<TokenImageBasic />
</section>
<section className="space-y-8">
<TokenImageOverride />
</section>
<section className="space-y-8">
<TokenNameBasic />
</section>
<section className="space-y-8">
<TokenSymbolBasic />
</section>
<section className="space-y-8">
<TokenCard />
</section>
</main>
</ThirdwebProvider>
);
}
4 changes: 4 additions & 0 deletions apps/playground-web/src/app/navLinks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ export const navLinks: SidebarLink[] = [
name: "NFT",
href: "/connect/ui/nft",
},
{
name: "Token",
href: "/connect/ui/token",
},
],
},
];
245 changes: 245 additions & 0 deletions apps/playground-web/src/components/headless-ui/token-examples.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
"use client";

import { THIRDWEB_CLIENT } from "@/lib/client";
import { NATIVE_TOKEN_ADDRESS } from "thirdweb";
import { ethereum } from "thirdweb/chains";
import {
TokenIcon,
TokenName,
TokenProvider,
TokenSymbol,
} from "thirdweb/react";
import { CodeExample } from "../code/code-example";

const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";

export function TokenImageBasic() {
return (
<>
<div className="space-y-2">
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
TokenIcon
</h2>
<p className="max-w-[600px] text-lg">
Show the default native icon of a network
</p>
</div>

<CodeExample
preview={
<TokenProvider
address={NATIVE_TOKEN_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenIcon className="h-auto w-20 rounded-full" />
</TokenProvider>
}
code={`import { TokenProvider, TokenIcon } from "thirdweb/react";
function App() {
return (
<TokenProvider
address={NATIVE_TOKEN_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenIcon className="h-auto w-20 rounded-full" />
</TokenProvider>
)
}`}
lang="tsx"
/>
</>
);
}

export function TokenImageOverride() {
return (
<>
<div className="mt-8 space-y-2">
<h4 className="font-semibold text-lg">
Override the token&apos;s icon using the <b>iconResolver</b> prop.
</h4>
<p className="max-w-[600px] text-lg">
There is no official way to query the icon of a token. If you have a
source, you can pass it to the iconResolver prop.
</p>
</div>

<CodeExample
preview={
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenIcon
className="h-auto w-20 rounded-full"
iconResolver="/usdc.svg"
/>
</TokenProvider>
}
code={`import { TokenProvider, TokenIcon } from "thirdweb/react";
function App() {
const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48";
return (
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenIcon
className="h-auto w-20 rounded-full"
iconResolver="/usdc.svg"
/>
</TokenProvider>
)
}`}
lang="tsx"
/>
</>
);
}

export function TokenNameBasic() {
return (
<>
<div className="mt-8 space-y-2">
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
TokenName
</h2>
<p className="max-w-[600px] text-lg">Show the name of the token</p>
</div>

<CodeExample
preview={
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenName loadingComponent={<span>Loading...</span>} />
</TokenProvider>
}
code={`import { TokenProvider, TokenName } from "thirdweb/react";
function App() {
return (
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenName loadingComponent={<span>Loading...</span>} />
</TokenProvider>
)
}`}
lang="tsx"
/>
</>
);
}

export function TokenSymbolBasic() {
return (
<>
<div className="mt-8 space-y-2">
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
TokenSymbol
</h2>
<p className="max-w-[600px] text-lg">Show the symbol of the token</p>
</div>

<CodeExample
preview={
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenSymbol loadingComponent={<span>Loading...</span>} />
</TokenProvider>
}
code={`import { TokenProvider, TokenSymbol } from "thirdweb/react";
function App() {
return (
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<TokenSymbol loadingComponent={<span>Loading...</span>} />
</TokenProvider>
)
}`}
lang="tsx"
/>
</>
);
}

export function TokenCard() {
return (
<>
<div className="mt-8 space-y-2">
<h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
Build a token card
</h2>
<p className="max-w-[600px] text-lg">
You can build a Token card by putting the Token components together
</p>
</div>

<CodeExample
preview={
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<div className="flex flex-row items-center gap-2 rounded-lg border bg-slate-950 px-4 py-1">
<TokenIcon className="h-10 w-10" iconResolver="/usdc.svg" />
<div className="flex flex-col">
<TokenName
className="font-bold"
loadingComponent={<span>Loading...</span>}
/>
<TokenSymbol
className="text-gray-500"
loadingComponent={<span>Loading...</span>}
/>
</div>
</div>
</TokenProvider>
}
code={`import { TokenProvider, TokenSymbol } from "thirdweb/react";
function App() {
return (
<TokenProvider
address={USDC_ADDRESS}
client={THIRDWEB_CLIENT}
chain={ethereum}
>
<div className="flex flex-row items-center gap-2 rounded-lg border bg-slate-950 px-4 py-1">
<TokenIcon className="h-10 w-10" iconResolver="/usdc.svg" />
<div className="flex flex-col">
<TokenName
className="font-bold"
/>
<TokenSymbol
className="text-gray-500"
/>
</div>
</div>
</TokenProvider>
)
}`}
lang="tsx"
/>
</>
);
}

0 comments on commit 59a3d10

Please sign in to comment.