update

Author: kien-ngo

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 (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="Token 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.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/components/onchain#chains"
+          heroLink="/headless-ui-header.png"
+        />
+        <section className="space-y-8">
+          <ChainIconBasic />
+        </section>
+        <section className="space-y-8">
+          <ChainNameBasic />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}

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,

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",
+      },
     ],
   },
 ];

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 (
+    <>
+      <div className="space-y-2">
+        <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+          ChainIcon
+        </h2>
+        <p className="max-w-[600px] text-lg">
+          Show the native icon of a network
+        </p>
+      </div>
+
+      <CodeExample
+        preview={
+          <ChainProvider chain={avalanche}>
+            <ChainIcon
+              client={THIRDWEB_CLIENT}
+              className="h-auto w-20 rounded-full"
+              loadingComponent={<span>Loading...</span>}
+            />
+          </ChainProvider>
+        }
+        code={`import { ChainProvider, ChainIcon } from "thirdweb/react";
+
+function App() {
+  return (
+    <ChainProvider chain={avalanche}>
+      <ChainIcon
+        client={THIRDWEB_CLIENT}
+        className="h-auto w-20 rounded-full"
+        loadingComponent={<span>Loading...</span>}
+      />
+    </ChainProvider>
+  )
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+export function ChainNameBasic() {
+  return (
+    <>
+      <div className="mt-8 space-y-2">
+        <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+          ChainName
+        </h2>
+        <p className="max-w-[600px] text-lg">Show the name of the token</p>
+      </div>
+
+      <CodeExample
+        preview={
+          <ChainProvider chain={avalanche}>
+            <ChainName loadingComponent={<span>Loading...</span>} />
+          </ChainProvider>
+        }
+        code={`import { ChainProvider, ChainName } from "thirdweb/react";
+
+function App() {
+  return (
+    <ChainProvider chain={avalanche}>
+      <ChainName loadingComponent={<span>Loading...</span>} />
+    </ChainProvider>
+  )
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}