diff --git a/apps/playground-web/public/usdc.svg b/apps/playground-web/public/usdc.svg new file mode 100644 index 00000000000..5dfea926e6c --- /dev/null +++ b/apps/playground-web/public/usdc.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/playground-web/src/app/connect/ui/nft/page.tsx b/apps/playground-web/src/app/connect/ui/nft/page.tsx index 44d016b8ed5..461f67c530b 100644 --- a/apps/playground-web/src/app/connect/ui/nft/page.tsx +++ b/apps/playground-web/src/app/connect/ui/nft/page.tsx @@ -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" />
diff --git a/apps/playground-web/src/app/connect/ui/page.tsx b/apps/playground-web/src/app/connect/ui/page.tsx index 48aaccb8075..2b522a17162 100644 --- a/apps/playground-web/src/app/connect/ui/page.tsx +++ b/apps/playground-web/src/app/connect/ui/page.tsx @@ -37,7 +37,7 @@ export default function Page() { complete control over your dApp'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" /> diff --git a/apps/playground-web/src/app/connect/ui/token/page.tsx b/apps/playground-web/src/app/connect/ui/token/page.tsx new file mode 100644 index 00000000000..83469d373f4 --- /dev/null +++ b/apps/playground-web/src/app/connect/ui/token/page.tsx @@ -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 ( + +
+ + 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" + /> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + ); +} diff --git a/apps/playground-web/src/app/navLinks.ts b/apps/playground-web/src/app/navLinks.ts index d4169e1c54f..92adb1be81b 100644 --- a/apps/playground-web/src/app/navLinks.ts +++ b/apps/playground-web/src/app/navLinks.ts @@ -123,6 +123,10 @@ export const navLinks: SidebarLink[] = [ name: "NFT", href: "/connect/ui/nft", }, + { + name: "Token", + href: "/connect/ui/token", + }, ], }, ]; diff --git a/apps/playground-web/src/components/headless-ui/token-examples.tsx b/apps/playground-web/src/components/headless-ui/token-examples.tsx new file mode 100644 index 00000000000..06ea9ad4a52 --- /dev/null +++ b/apps/playground-web/src/components/headless-ui/token-examples.tsx @@ -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 ( + <> +
+

+ TokenIcon +

+

+ Show the default native icon of a network +

+
+ + + + + } + code={`import { TokenProvider, TokenIcon } from "thirdweb/react"; + +function App() { + return ( + + + + ) +}`} + lang="tsx" + /> + + ); +} + +export function TokenImageOverride() { + return ( + <> +
+

+ Override the token's icon using the iconResolver prop. +

+

+ 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. +

+
+ + + + + } + code={`import { TokenProvider, TokenIcon } from "thirdweb/react"; + +function App() { + const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"; + return ( + + + + ) +}`} + lang="tsx" + /> + + ); +} + +export function TokenNameBasic() { + return ( + <> +
+

+ TokenName +

+

Show the name of the token

+
+ + + Loading...} /> + + } + code={`import { TokenProvider, TokenName } from "thirdweb/react"; + +function App() { + return ( + + Loading...} /> + + ) +}`} + lang="tsx" + /> + + ); +} + +export function TokenSymbolBasic() { + return ( + <> +
+

+ TokenSymbol +

+

Show the symbol of the token

+
+ + + Loading...} /> + + } + code={`import { TokenProvider, TokenSymbol } from "thirdweb/react"; + +function App() { + return ( + + Loading...} /> + + ) +}`} + lang="tsx" + /> + + ); +} + +export function TokenCard() { + return ( + <> +
+

+ Build a token card +

+

+ You can build a Token card by putting the Token components together +

+
+ + +
+ +
+ Loading...} + /> + Loading...} + /> +
+
+ + } + code={`import { TokenProvider, TokenSymbol } from "thirdweb/react"; + +function App() { + return ( + +
+ +
+ + +
+
+ + ) +}`} + lang="tsx" + /> + + ); +}