From 498a26ebbce091fd433c54f797f2ae7b8a6421df Mon Sep 17 00:00:00 2001 From: kien-ngo Date: Fri, 13 Dec 2024 16:14:41 +0000 Subject: [PATCH] [Playground] Chain components (#5678) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Problem solved Short description of the bug fixed or feature added --- ## PR-Codex overview This PR introduces new `Chain` components to enhance the user interface for blockchain applications, allowing for the display of chain icons and names. It includes new pages and components that integrate these features into the existing playground web application. ### Detailed summary - Added a new `Chain` entry in `navLinks.ts`. - Created a new page in `page.tsx` for `Chain` components with metadata. - Integrated `ThirdwebProvider`, `APIHeader`, `ChainIconBasic`, and `ChainNameBasic` components. - Implemented `ChainIconBasic` and `ChainNameBasic` components in `chain-examples.tsx` to showcase chain icons and names. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../src/app/connect/ui/chain/page.tsx | 44 +++++++++++ .../src/app/connect/ui/token/page.tsx | 1 - apps/playground-web/src/app/navLinks.ts | 4 + .../components/headless-ui/chain-examples.tsx | 78 +++++++++++++++++++ .../src/react/web/ui/prebuilt/Chain/icon.tsx | 2 +- 5 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 apps/playground-web/src/app/connect/ui/chain/page.tsx create mode 100644 apps/playground-web/src/components/headless-ui/chain-examples.tsx diff --git a/apps/playground-web/src/app/connect/ui/chain/page.tsx b/apps/playground-web/src/app/connect/ui/chain/page.tsx new file mode 100644 index 00000000000..1956ff07554 --- /dev/null +++ b/apps/playground-web/src/app/connect/ui/chain/page.tsx @@ -0,0 +1,44 @@ +import { APIHeader } from "@/components/blocks/APIHeader"; +import { + ChainIconBasic, + ChainNameBasic, +} from "@/components/headless-ui/chain-examples"; +import ThirdwebProvider from "@/components/thirdweb-provider"; +import { metadataBase } from "@/lib/constants"; +import type { Metadata } from "next"; + +export const metadata: Metadata = { + metadataBase, + title: "Chain Components", + description: + "Enhance your applications with our Chain components, featuring a collection of chain icons, names, and symbols. These customizable components simplify the integration of blockchain information, allowing developers to easily display and manage multiple chains in their user interfaces.", +}; + +export default function Page() { + return ( + +
+ + Enhance your applications with our Chain components, featuring a + collection of chain icons, names, and symbols. These customizable + components simplify the integration of blockchain information, + allowing developers to easily display and manage multiple chains + in their user interfaces. + + } + docsLink="https://portal.thirdweb.com/react/v5/components/onchain#chains" + 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 index 83469d373f4..4dc116d41d5 100644 --- a/apps/playground-web/src/app/connect/ui/token/page.tsx +++ b/apps/playground-web/src/app/connect/ui/token/page.tsx @@ -1,5 +1,4 @@ import { APIHeader } from "@/components/blocks/APIHeader"; -import {} from "@/components/headless-ui/nft-examples"; import { TokenCard, TokenImageBasic, diff --git a/apps/playground-web/src/app/navLinks.ts b/apps/playground-web/src/app/navLinks.ts index 92adb1be81b..69b11575838 100644 --- a/apps/playground-web/src/app/navLinks.ts +++ b/apps/playground-web/src/app/navLinks.ts @@ -127,6 +127,10 @@ export const navLinks: SidebarLink[] = [ name: "Token", href: "/connect/ui/token", }, + { + name: "Chain", + href: "/connect/ui/chain", + }, ], }, ]; diff --git a/apps/playground-web/src/components/headless-ui/chain-examples.tsx b/apps/playground-web/src/components/headless-ui/chain-examples.tsx new file mode 100644 index 00000000000..e191ddf99ae --- /dev/null +++ b/apps/playground-web/src/components/headless-ui/chain-examples.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { THIRDWEB_CLIENT } from "@/lib/client"; +import { avalanche } from "thirdweb/chains"; +import { ChainIcon, ChainName, ChainProvider } from "thirdweb/react"; +import { CodeExample } from "../code/code-example"; + +export function ChainIconBasic() { + return ( + <> +
+

+ ChainIcon +

+

+ Show the native icon of a network +

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

+ ChainName +

+

Show the name of the chain

+
+ + + Loading...} /> + + } + code={`import { ChainProvider, ChainName } from "thirdweb/react"; + +function App() { + return ( + + Loading...} /> + + ) +}`} + lang="tsx" + /> + + ); +} diff --git a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx index b90e4b2485c..2ddc4c55239 100644 --- a/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx +++ b/packages/thirdweb/src/react/web/ui/prebuilt/Chain/icon.tsx @@ -143,7 +143,7 @@ export function ChainIcon({ } // Check if the chain object already has "icon" if (chain.icon?.url) { - return chain.icon.url; + return resolveScheme({ uri: chain.icon.url, client }); } const possibleUrl = await getChainMetadata(chain).then( (data) => data.icon?.url,