[Playground] Chain components (#5678)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## 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}`

<!-- end pr-codex -->

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="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.
+            </>
+          }
+          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 chain</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"
+      />
+    </>
+  );
+}

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,