create-awarizon-app 1.0.10 → 1.0.12

package/templates/nextjs/app/page.tsx

@@ -1,155 +1,47 @@
 'use client'
 
-import { contract, useRead, usePrice, ConnectButton } from '@awarizon/react'
-import { ERC20_ABI } from '@awarizon/web3'
-import { Badge }    from '@/components/ui/Badge'
-import { Button }   from '@/components/ui/Button'
-import { Card }     from '@/components/ui/Card'
+import { usePrices, TokenIcon } from '@awarizon/react'
 import { Skeleton } from '@/components/ui/Skeleton'
-import { StatCard } from '@/components/ui/StatCard'
 
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-const USDC = contract(USDC_BASE, ERC20_ABI)
-
-function DataRow({ label, value, loading }: { label: string; value?: string; loading: boolean }) {
-  return (
-    <div className="flex items-center justify-between py-3 border-b border-zinc-800/50 last:border-0">
-      <code className="text-[11px] text-yellow-400/70 font-mono">{label}</code>
-      {loading
-        ? <Skeleton className="h-3.5 w-28" />
-        : <span className="font-mono text-xs text-zinc-300">{value ?? '—'}</span>}
-    </div>
-  )
-}
+const TOKENS = [
+  { symbol: 'ETH',   name: 'Ethereum' },
+  { symbol: 'BTC',   name: 'Bitcoin'  },
+  { symbol: 'USDC',  name: 'USD Coin' },
+  { symbol: 'BNB',   name: 'BNB'      },
+  { symbol: 'HYPE',  name: 'Hyperliquid' },
+]
 
 export default function Home() {
-  const { data: name,        isLoading: l1 } = useRead<string>(USDC.name())
-  const { data: symbol,      isLoading: l2 } = useRead<string>(USDC.symbol())
-  const { data: decimals,    isLoading: l3 } = useRead<bigint>(USDC.decimals())
-  const { data: totalSupply, isLoading: l4 } = useRead<bigint>(USDC.totalSupply())
-  const { price: ethPrice,   isLoading: lp } = usePrice('ETH')
-
-  const formatted =
-    totalSupply !== undefined && decimals !== undefined
-      ? (Number(totalSupply) / 10 ** Number(decimals))
-          .toLocaleString(undefined, { maximumFractionDigits: 2 })
-      : undefined
-
-  const synced = !l1 && !l2 && !l3 && !l4
+  const { prices, isLoading } = usePrices(TOKENS.map(t => t.symbol))
 
   return (
-    <div className="min-h-screen bg-zinc-950 text-zinc-100">
-
-      {/* ── Header ─────────────────────────────────────── */}
-      <header className="sticky top-0 z-10 border-b border-zinc-800/60 bg-zinc-950/80 backdrop-blur-sm px-6 py-4">
-        <div className="max-w-4xl mx-auto flex items-center justify-between">
-          <div className="flex items-center gap-2.5">
-            <div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
-            <span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
-              {'{{project-name}}'}
-            </span>
-          </div>
-          <div className="flex items-center gap-3">
-            <Badge variant="outline">Base</Badge>
-            <Badge variant={synced ? 'success' : 'loading'}>
-              {synced ? '● Live' : '○ Loading'}
-            </Badge>
-            {process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
-          </div>
-        </div>
-      </header>
-
-      <main className="max-w-4xl mx-auto px-6 py-12">
-
-        {/* ── Hero ───────────────────────────────────────── */}
-        <div className="mb-10">
-          <Badge variant="outline" className="mb-5">Awarizon Web3 SDK · Next.js</Badge>
-          <h1 className="text-4xl font-bold tracking-tight text-white mb-3">{'{{ProjectName}}'}</h1>
-          <p className="text-zinc-400 text-base max-w-lg leading-relaxed">
-            Live on-chain reads from Base — no backend required. Built with{' '}
-            <code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
-          </p>
-        </div>
-
-        {/* ── Data grid ──────────────────────────────────── */}
-        <div className="grid md:grid-cols-3 gap-4 mb-4">
-
-          <Card className="md:col-span-2">
-            <div className="flex items-start justify-between mb-4">
-              <div>
-                <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
-                  Contract · Live Read
-                </p>
-                <code className="font-mono text-xs text-zinc-500">0x8335…2913 · Base</code>
-              </div>
-              <Badge variant={synced ? 'success' : 'loading'}>
-                {synced ? 'Synced' : 'Fetching…'}
-              </Badge>
-            </div>
-            <DataRow label="name()"        value={name}                   loading={l1} />
-            <DataRow label="symbol()"      value={symbol}                 loading={l2} />
-            <DataRow label="decimals()"    value={String(decimals ?? '')} loading={l3} />
-            <DataRow label="totalSupply()" value={formatted}              loading={l4} />
-          </Card>
-
-          <div className="flex flex-col gap-4">
-            <StatCard
-              label="ETH Price"
-              value={ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : undefined}
-              loading={lp}
-              sub="via usePrice"
-              className="flex-1"
-            />
-            <StatCard
-              label="Total Supply"
-              value={formatted}
-              loading={l4}
-              sub="USDC · formatted"
-              className="flex-1"
-            />
-          </div>
-        </div>
-
-        {/* ── Network info ────────────────────────────────── */}
-        <div className="grid sm:grid-cols-3 gap-4 mb-4">
-          {[
-            { label: 'Network',  value: 'Base Mainnet'    },
-            { label: 'Chain ID', value: '8453'            },
-            { label: 'SDK',      value: '@awarizon/react' },
-          ].map(({ label, value }) => (
+    <main className="max-w-5xl mx-auto px-6 py-10">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+        {TOKENS.map(({ symbol, name }) => {
+          const price = prices[symbol]?.price
+          return (
             <div
-              key={label}
-              className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
+              key={symbol}
+              className="bg-zinc-900/40 border border-zinc-800/40 rounded-2xl p-5 hover:bg-zinc-900/60 hover:border-zinc-700/50 transition-all cursor-default"
             >
-              <span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
-              <code className="font-mono text-xs text-zinc-400">{value}</code>
+              <div className="mb-4">
+                <div className="mb-3">
+                  <TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
+                </div>
+                <p className="text-[11px] text-zinc-500 font-medium mb-0.5">{symbol}</p>
+                <p className="text-xs text-zinc-600">{name}</p>
+              </div>
+              <div className="text-lg font-semibold text-white tracking-tight">
+                {isLoading
+                  ? <Skeleton className="h-5 w-20" />
+                  : price != null
+                    ? `$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+                    : '—'}
+              </div>
             </div>
-          ))}
-        </div>
-
-        {/* ── Next steps ──────────────────────────────────── */}
-        <Card>
-          <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Next Steps</p>
-          <ul className="space-y-3 mb-6">
-            {[
-              ['01', 'Replace USDC_BASE with your contract address'],
-              ['02', 'Swap ERC20_ABI for your contract ABI'],
-              ['03', 'Change chain="base" in components/Providers.tsx to your target network'],
-              ['04', 'Use useWrite(USDC.transfer) to send transactions'],
-              ['05', 'Use usePrice("ETH") or usePrices(["ETH","BTC"]) for live token prices'],
-            ].map(([n, s]) => (
-              <li key={n} className="flex items-start gap-3">
-                <span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
-                <span className="text-sm text-zinc-400 leading-relaxed">{s}</span>
-              </li>
-            ))}
-          </ul>
-          <div className="flex flex-wrap gap-2">
-            <Button href="https://awarizon.com/docs" target="_blank" rel="noreferrer">Read the docs →</Button>
-            <Button href="https://awarizon.com/dashboard" target="_blank" rel="noreferrer" variant="secondary">Dashboard</Button>
-          </div>
-        </Card>
-      </main>
-    </div>
+          )
+        })}
+      </div>
+    </main>
   )
 }

package/templates/nextjs/app/wallet/page.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import { useWallet, useNativeBalance, usePrices, ConnectButton, TokenIcon, ChainIcon, getChainNativeSymbol, getChainName } from '@awarizon/react'
+import { Badge }    from '@/components/ui/Badge'
+import { Card }     from '@/components/ui/Card'
+import { Skeleton } from '@/components/ui/Skeleton'
+
+const ASSETS = [
+  { symbol: 'ETH',  name: 'Ethereum'    },
+  { symbol: 'BTC',  name: 'Bitcoin'     },
+  { symbol: 'USDC', name: 'USD Coin'    },
+  { symbol: 'BNB',  name: 'BNB'         },
+  { symbol: 'HYPE', name: 'Hyperliquid' },
+]
+
+function DataRow({ label, value, loading }: { label: string; value?: string; loading: boolean }) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-zinc-800/50 last:border-0">
+      <span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
+      {loading
+        ? <Skeleton className="h-3.5 w-32" />
+        : <span className="font-mono text-xs text-zinc-300">{value ?? '—'}</span>}
+    </div>
+  )
+}
+
+export default function WalletPage() {
+  const { address, isConnected, isChainMismatch, chainId, connectorInfo } = useWallet()
+  const nativeSymbol = chainId != null ? getChainNativeSymbol(chainId) : 'ETH'
+  const { formatted: nativeBalance, isLoading: balanceLoading } = useNativeBalance(
+    address ?? undefined,
+    12_000,
+  )
+  const { prices, isLoading: pricesLoading } = usePrices(ASSETS.map(a => a.symbol))
+
+  const ethFiatValue =
+    nativeBalance != null && prices['ETH']?.price != null
+      ? `$${(parseFloat(nativeBalance) * prices['ETH'].price).toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+      : undefined
+
+  return (
+    <main className="max-w-4xl mx-auto px-6 py-12">
+
+      {/* ── Hero ───────────────────────────────────────── */}
+      <div className="mb-10">
+        <Badge variant="outline" className="mb-5">Portfolio</Badge>
+        <h1 className="text-4xl font-bold tracking-tight text-white mb-3">Wallet</h1>
+        <p className="text-zinc-400 text-base max-w-lg leading-relaxed">
+          Live balance and portfolio data via{' '}
+          <code className="font-mono text-[11px] text-yellow-400/80">useWallet</code>,{' '}
+          <code className="font-mono text-[11px] text-yellow-400/80">useNativeBalance</code>, and{' '}
+          <code className="font-mono text-[11px] text-yellow-400/80">usePrices</code>.
+        </p>
+      </div>
+
+      {!isConnected ? (
+        <Card className="py-12 flex flex-col items-center text-center">
+          <p className="font-mono text-[10px] tracking-widest text-zinc-600 uppercase mb-3">
+            No Wallet Connected
+          </p>
+          <p className="text-zinc-400 text-sm mb-6 max-w-sm leading-relaxed">
+            Connect a wallet to view your address, native balance, and real-time portfolio value.
+          </p>
+          <ConnectButton />
+        </Card>
+      ) : (
+        <>
+          {isChainMismatch && (
+            <div className="mb-4 px-4 py-3 bg-amber-500/10 border border-amber-500/20 rounded-xl">
+              <span className="font-mono text-xs text-amber-400">
+                Wrong network — switch to the chain configured in components/Providers.tsx
+              </span>
+            </div>
+          )}
+
+          {/* ── Account ──────────────────────────────────── */}
+          <Card className="mb-4">
+            <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Account</p>
+            <DataRow label="Address"   value={address ?? undefined}                          loading={false} />
+            <DataRow label="Chain"     value={chainId != null ? getChainName(chainId) : undefined} loading={false} />
+            <DataRow label="Connector" value={connectorInfo?.name ?? connectorInfo?.type}    loading={false} />
+          </Card>
+
+          {/* ── Balance ──────────────────────────────────── */}
+          <Card className="mb-4">
+            <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-3">Balance</p>
+            <div className="flex items-center gap-3 py-2">
+              {chainId != null
+                ? <ChainIcon chainId={chainId} size={36} radiusFraction={0.5} />
+                : <TokenIcon symbol={nativeSymbol} size={36} radiusFraction={0.5} />
+              }
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-white">{nativeSymbol}</p>
+                <p className="text-xs text-zinc-500">{chainId != null ? getChainName(chainId) : 'Native'}</p>
+              </div>
+              <div className="text-right">
+                {balanceLoading
+                  ? <Skeleton className="h-4 w-28" />
+                  : <>
+                      <p className="text-sm font-medium text-white">
+                        {nativeBalance != null ? `${parseFloat(nativeBalance).toFixed(6)} ${nativeSymbol}` : '—'}
+                      </p>
+                      {ethFiatValue && (
+                        <p className="text-xs text-zinc-500">{ethFiatValue}</p>
+                      )}
+                    </>
+                }
+              </div>
+            </div>
+          </Card>
+
+          {/* ── Assets ───────────────────────────────────── */}
+          <Card>
+            <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-3">Assets</p>
+            <div className="divide-y divide-zinc-800/50">
+              {ASSETS.map(({ symbol, name }) => {
+                const price = prices[symbol]?.price
+                return (
+                  <div key={symbol} className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
+                    <TokenIcon symbol={symbol} size={36} radiusFraction={0.28} />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-white">{symbol}</p>
+                      <p className="text-xs text-zinc-500">{name}</p>
+                    </div>
+                    <div className="text-right">
+                      {pricesLoading
+                        ? <Skeleton className="h-4 w-20" />
+                        : <p className="text-sm font-medium text-white">
+                            {price != null
+                              ? `$${price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+                              : '—'}
+                          </p>
+                      }
+                      <p className="text-xs text-zinc-600">USD · usePrices</p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </Card>
+        </>
+      )}
+    </main>
+  )
+}

package/templates/nextjs/components/Header.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ConnectButton, ChainIcon, useWallet, getChainName } from '@awarizon/react'
+
+const NAV = [
+  { href: '/',       label: 'Markets' },
+  { href: '/nft',    label: 'NFT'     },
+  { href: '/wallet', label: 'Wallet'  },
+]
+
+export function Header() {
+  const pathname = usePathname()
+  const { chainId } = useWallet()
+  const displayChainId = chainId ?? 8453
+  const chainName = getChainName(displayChainId)
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-white/[0.06] bg-zinc-950/70 backdrop-blur-2xl">
+      <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between gap-8">
+
+        <div className="flex items-center gap-2.5 shrink-0">
+          <div className="w-7 h-7 rounded-lg bg-yellow-400" />
+          <span className="text-sm font-semibold text-white">{'{{project-name}}'}</span>
+        </div>
+
+        <nav className="flex items-center">
+          {NAV.map(({ href, label }) => {
+            const active = pathname === href
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={[
+                  'relative px-4 py-2 text-sm font-medium transition-colors',
+                  active ? 'text-white' : 'text-zinc-500 hover:text-zinc-300',
+                ].join(' ')}
+              >
+                {label}
+                {active && (
+                  <span className="absolute bottom-0 left-4 right-4 h-px bg-yellow-400" />
+                )}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="flex items-center gap-3 shrink-0">
+          <div className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-zinc-800 bg-zinc-900/60 text-xs text-zinc-400 font-medium">
+            <ChainIcon chainId={displayChainId} size={16} radiusFraction={0.5} />
+            {chainName}
+          </div>
+          {process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
+        </div>
+
+      </div>
+    </header>
+  )
+}

package/templates/nextjs/package.json

@@ -3,28 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev":   "next dev",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint":  "next lint"
+    "lint": "next lint"
   },
   "dependencies": {
-    "@awarizon/react": "^1.6.1",
-    "@awarizon/web3":  "^1.3.4",
-    "next":               "14.2.5",
-    "react":              "^18",
-    "react-dom":          "^18"
+    "@awarizon/react": "^1.6.4",
+    "@awarizon/web3": "^1.3.7",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@types/node":        "^20",
-    "@types/react":       "^18",
-    "@types/react-dom":   "^18",
-    "typescript":         "^5",
-    "eslint":             "^8",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5",
+    "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "autoprefixer":       "^10.4.19",
-    "postcss":            "^8.4.38",
-    "tailwindcss":        "^3.4.4"
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4"
   }
 }
-

package/templates/nextjs-js/app/layout.jsx

@@ -1,4 +1,5 @@
 import { Providers } from '@/components/Providers'
+import { Header } from '@/components/Header'
 import './globals.css'
 
 /** @type {import('next').Metadata} */
@@ -11,7 +12,10 @@ export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>
-        <Providers>{children}</Providers>
+        <Providers>
+          <Header />
+          {children}
+        </Providers>
       </body>
     </html>
   )

package/templates/nextjs-js/app/nft/page.jsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useState } from 'react'
+import { useNFT } from '@awarizon/react'
+import { Badge }    from '@/components/ui/Badge'
+import { Button }   from '@/components/ui/Button'
+import { Card }     from '@/components/ui/Card'
+import { Skeleton } from '@/components/ui/Skeleton'
+
+// Replace with your ERC-721 contract address on your configured chain.
+const NFT_ADDRESS = '0x0000000000000000000000000000000000000000'
+
+function DataRow({ label, value, loading }) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-zinc-800/50 last:border-0">
+      <code className="text-[11px] text-yellow-400/70 font-mono">{label}</code>
+      {loading
+        ? <Skeleton className="h-3.5 w-28" />
+        : <span className="font-mono text-xs text-zinc-300">{value ?? '—'}</span>}
+    </div>
+  )
+}
+
+export default function NftPage() {
+  const { name, symbol, isLoading, error, ownerOf, tokenURI } = useNFT(NFT_ADDRESS)
+
+  const [tokenId,       setTokenId]       = useState('')
+  const [owner,         setOwner]         = useState(null)
+  const [uri,           setUri]           = useState(null)
+  const [lookupLoading, setLookupLoading] = useState(false)
+  const [lookupError,   setLookupError]   = useState(null)
+
+  async function handleLookup() {
+    if (!tokenId) return
+    setLookupLoading(true)
+    setLookupError(null)
+    setOwner(null)
+    setUri(null)
+    try {
+      const id = BigInt(tokenId)
+      const [o, u] = await Promise.all([ownerOf(id), tokenURI(id)])
+      setOwner(o)
+      setUri(u)
+    } catch (e) {
+      setLookupError(e instanceof Error ? e.message : 'Lookup failed')
+    } finally {
+      setLookupLoading(false)
+    }
+  }
+
+  return (
+    <main className="max-w-4xl mx-auto px-6 py-12">
+
+      {/* ── Hero ───────────────────────────────────────── */}
+      <div className="mb-10">
+        <Badge variant="outline" className="mb-5">ERC-721</Badge>
+        <h1 className="text-4xl font-bold tracking-tight text-white mb-3">NFT Collection</h1>
+        <p className="text-zinc-400 text-base max-w-lg leading-relaxed">
+          Zero-ABI reads from any ERC-721 contract using{' '}
+          <code className="font-mono text-[11px] text-yellow-400/80">useNFT</code>.
+          Replace <code className="font-mono text-[11px] text-yellow-400/80">NFT_ADDRESS</code> at the top of this file.
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-4 px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-xl">
+          <code className="font-mono text-xs text-red-400">{error.message}</code>
+        </div>
+      )}
+
+      {/* ── Cards ──────────────────────────────────────── */}
+      <div className="grid md:grid-cols-2 gap-4 mb-4">
+
+        <Card>
+          <div className="mb-4">
+            <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">Collection Info</p>
+            <code className="font-mono text-xs text-zinc-500">
+              {NFT_ADDRESS.slice(0, 6)}…{NFT_ADDRESS.slice(-4)}
+            </code>
+          </div>
+          <DataRow label="name()"   value={name   ?? undefined} loading={isLoading} />
+          <DataRow label="symbol()" value={symbol ?? undefined} loading={isLoading} />
+        </Card>
+
+        <Card>
+          <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Token Lookup</p>
+          <div className="flex gap-2 mb-4">
+            <input
+              type="number"
+              min="0"
+              value={tokenId}
+              onChange={e => setTokenId(e.target.value)}
+              placeholder="Token ID"
+              className="flex-1 bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 font-mono text-xs text-zinc-200 placeholder-zinc-600 outline-none focus:border-yellow-400/40"
+            />
+            <Button onClick={handleLookup} disabled={!tokenId || lookupLoading}>
+              {lookupLoading ? 'Loading…' : 'Look up'}
+            </Button>
+          </div>
+          {lookupError && (
+            <p className="font-mono text-[11px] text-red-400 mb-3">{lookupError}</p>
+          )}
+          {owner !== null && (
+            <DataRow
+              label="ownerOf()"
+              value={`${owner.slice(0, 6)}…${owner.slice(-4)}`}
+              loading={false}
+            />
+          )}
+          {uri !== null && (
+            <div className="pt-3">
+              <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">tokenURI()</p>
+              <p className="font-mono text-xs text-zinc-300 break-all">{uri}</p>
+            </div>
+          )}
+        </Card>
+      </div>
+
+      {/* ── Notes ──────────────────────────────────────── */}
+      <Card>
+        <p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Usage Notes</p>
+        <ul className="space-y-3">
+          {[
+            ['01', 'Replace NFT_ADDRESS with any ERC-721 contract on your configured chain'],
+            ['02', 'useNFT requires no ABI — the SDK uses the built-in ERC-721 interface'],
+            ['03', 'ownerOf(tokenId) returns the owner address of a specific token'],
+            ['04', 'tokenURI(tokenId) returns the metadata URI (IPFS, Arweave, HTTP, etc.)'],
+            ['05', 'balanceOf(address) counts how many tokens a given address holds'],
+          ].map(([n, s]) => (
+            <li key={n} className="flex items-start gap-3">
+              <span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
+              <span className="text-sm text-zinc-400 leading-relaxed">{s}</span>
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </main>
+  )
+}