update

Author: kien-ngo

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

@@ -0,0 +1,49 @@
+import { APIHeader } from "@/components/blocks/APIHeader";
+import {
+  WalletIconBasic,
+  WalletNameBasic,
+  WalletNameFormat,
+} from "@/components/headless-ui/wallet-examples";
+
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "NFT Components",
+  description:
+    "Elevate your NFT marketplace with our React headless UI components, engineered for seamless digital asset transactions. These customizable, zero-styling components simplify NFT interactions while giving developers complete freedom to craft their perfect user interface.",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="NFT Components"
+          description={
+            <>
+              Elevate your NFT applications with our React headless UI
+              components, engineered for seamless digital asset transactions.
+              These customizable, zero-styling components simplify NFT
+              interactions while giving developers complete freedom to craft
+              their perfect user interface.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          heroLink="/headless-ui-header.png"
+        />
+        <section className="space-y-8">
+          <WalletIconBasic />
+        </section>
+        <section className="space-y-8">
+          <WalletNameBasic />
+        </section>
+        <section className="space-y-8">
+          <WalletNameFormat />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}

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

@@ -123,6 +123,10 @@ export const navLinks: SidebarLink[] = [
         name: "NFT",
         href: "/connect/ui/nft",
       },
+      {
+        name: "Wallet",
+        href: "/connect/ui/wallet",
+      },
     ],
   },
 ];

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

@@ -0,0 +1,109 @@
+"use client";
+
+import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react";
+import { CodeExample } from "../code/code-example";
+
+export function WalletIconBasic() {
+  return (
+    <>
+      <div className="space-y-2">
+        <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+          WalletIcon
+        </h2>
+        <p className="max-w-[600px] text-lg">
+          Show the icon of a crypto wallet
+        </p>
+      </div>
+
+      <CodeExample
+        preview={
+          <WalletProvider id="io.metamask">
+            <WalletIcon
+              className="h-20 w-20 rounded-full"
+              loadingComponent={<span>Loading...</span>}
+            />
+          </WalletProvider>
+        }
+        code={`import { WalletProvider, WalletIcon } from "thirdweb/react";
+
+function App() {
+  return (
+    <WalletProvider id="io.metamask">
+      <WalletIcon
+        className="h-20 w-20 rounded-full"
+        loadingComponent={<span>Loading...</span>}
+      />
+    </WalletProvider>
+  )
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+export function WalletNameBasic() {
+  return (
+    <>
+      <div className="mt-8 space-y-2">
+        <h2 className="font-semibold text-2xl tracking-tight sm:text-3xl">
+          WalletName
+        </h2>
+        <p className="max-w-[600px] text-lg">
+          Show the name of a crypto wallet
+        </p>
+      </div>
+
+      <CodeExample
+        preview={
+          <WalletProvider id="io.metamask">
+            <WalletName loadingComponent={<span>Loading...</span>} />
+          </WalletProvider>
+        }
+        code={`import { WalletProvider, WalletName } from "thirdweb/react";
+
+function App() {
+  return (
+    <WalletProvider id="io.metamask">
+      <WalletName loadingComponent={<span>Loading...</span>} />
+    </WalletProvider>
+  )
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}
+
+export function WalletNameFormat() {
+  return (
+    <>
+      <div className="mt-8 space-y-2">
+        <p className="max-w-[600px] text-lg">
+          Transform the wallet name using the <b>formatFn</b> prop.
+        </p>
+      </div>
+
+      <CodeExample
+        preview={
+          <WalletProvider id="io.metamask">
+            <WalletName formatFn={(str: string) => `${str} Wallet`} />
+          </WalletProvider>
+        }
+        code={`import { WalletProvider, WalletName } from "thirdweb/react";
+
+function App() {
+  return (
+    <WalletProvider id="io.metamask">
+      <WalletName 
+        loadingComponent={<span>Loading...</span>} 
+        formatFn={(str: string) => \`\${str} Wallet\`}
+      />
+    </WalletProvider>
+  )
+}`}
+        lang="tsx"
+      />
+    </>
+  );
+}