create-awarizon-app 1.0.9 → 1.0.11

package/templates/expo-js/app/(tabs)/index.jsx

@@ -1,64 +1,41 @@
 import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
-import { useReadContract } from '@awarizon/react-native'
-
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-
-/** @type {readonly object[]} */
-const ERC20_ABI = [
-  { name: 'name',        type: 'function', inputs: [], outputs: [{ type: 'string' }],  stateMutability: 'view' },
-  { name: 'symbol',      type: 'function', inputs: [], outputs: [{ type: 'string' }],  stateMutability: 'view' },
-  { name: 'decimals',    type: 'function', inputs: [], outputs: [{ type: 'uint8' }],   stateMutability: 'view' },
-  { name: 'totalSupply', type: 'function', inputs: [], outputs: [{ type: 'uint256' }], stateMutability: 'view' },
+import { usePrices } from '@awarizon/react-native'
+
+const TOKENS = [
+  { symbol: 'ETH',  name: 'Ethereum', color: '#627EEA' },
+  { symbol: 'BTC',  name: 'Bitcoin',  color: '#F7931A' },
+  { symbol: 'USDC', name: 'USD Coin', color: '#2775CA' },
+  { symbol: 'BNB',  name: 'BNB',      color: '#F3BA2F' },
+  { symbol: 'SOL',  name: 'Solana',   color: '#9945FF' },
 ]
 
-function usdc(fn) {
-  return useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: fn })
-}
-
-function Row({ label, value }) {
-  return (
-    <View style={s.row}>
-      <Text style={s.label}>{label}</Text>
-      {value === undefined
-        ? <ActivityIndicator size="small" color="#6366f1" />
-        : <Text style={s.value}>{value}</Text>}
-    </View>
-  )
-}
-
 export default function HomeScreen() {
-  const { data: name }        = usdc('name')
-  const { data: symbol }      = usdc('symbol')
-  const { data: decimals }    = usdc('decimals')
-  const { data: totalSupply } = usdc('totalSupply')
-
-  const formatted =
-    totalSupply !== undefined && decimals !== undefined
-      ? (Number(totalSupply) / 10 ** Number(decimals)).toLocaleString(undefined, { maximumFractionDigits: 2 })
-      : undefined
+  const { prices, isLoading } = usePrices(TOKENS.map(t => t.symbol))
 
   return (
     <ScrollView style={s.bg} contentContainerStyle={s.container}>
-      <View style={s.hero}>
-        <Text style={s.badge}>{{ProjectName}}</Text>
-        <Text style={s.heading}>Live on-chain data</Text>
-        <Text style={s.sub}>Reading USDC on Base — no backend required.</Text>
-      </View>
-
-      <View style={s.card}>
-        <Text style={s.cardTitle}>USDC — Base</Text>
-        <Row label="Name"         value={name !== undefined ? String(name) : undefined} />
-        <Row label="Symbol"       value={symbol !== undefined ? String(symbol) : undefined} />
-        <Row label="Decimals"     value={decimals !== undefined ? String(decimals) : undefined} />
-        <Row label="Total Supply" value={formatted} />
-      </View>
-
-      <View style={s.card}>
-        <Text style={s.cardTitle}>Next steps</Text>
-        <Text style={s.step}>1. Replace USDC_BASE with your contract address</Text>
-        <Text style={s.step}>2. Swap ERC20_ABI for your contract ABI</Text>
-        <Text style={s.step}>3. Change the chain in app/_layout.jsx</Text>
-        <Text style={s.step}>4. Use <Text style={s.code}>useWriteContract</Text> for transactions</Text>
+      <View style={s.grid}>
+        {TOKENS.map(({ symbol, name, color }) => {
+          const price = prices[symbol]?.price
+          return (
+            <View key={symbol} style={s.card}>
+              <View style={[s.icon, { backgroundColor: color + '22', borderColor: color + '35' }]}>
+                <Text style={[s.iconText, { color }]}>{symbol.slice(0, 3)}</Text>
+              </View>
+              <Text style={s.symbol}>{symbol}</Text>
+              <Text style={s.name}>{name}</Text>
+              <View style={s.priceRow}>
+                {isLoading
+                  ? <ActivityIndicator size="small" color="#FFE500" />
+                  : <Text style={s.price}>
+                      {price != null
+                        ? `$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+                        : '—'}
+                    </Text>}
+              </View>
+            </View>
+          )
+        })}
       </View>
     </ScrollView>
   )
@@ -66,16 +43,13 @@ export default function HomeScreen() {
 
 const s = StyleSheet.create({
   bg:        { flex: 1, backgroundColor: '#0a0a0a' },
-  container: { padding: 20, paddingBottom: 40 },
-  hero:      { marginBottom: 24 },
-  badge:     { color: '#6366f1', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 },
-  heading:   { color: '#fff', fontSize: 28, fontWeight: '800', marginBottom: 6 },
-  sub:       { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
-  card:      { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
-  cardTitle: { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
-  row:       { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
-  label:     { color: '#9ca3af', fontSize: 13 },
-  value:     { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
-  step:      { color: '#9ca3af', fontSize: 13, lineHeight: 22, marginBottom: 4 },
-  code:      { color: '#6366f1', fontFamily: 'monospace' },
+  container: { padding: 16, paddingBottom: 40 },
+  grid:      { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
+  card:      { width: '47%', backgroundColor: '#111827', borderWidth: 1, borderColor: '#1f2937', borderRadius: 16, padding: 16 },
+  icon:      { width: 40, height: 40, borderRadius: 20, borderWidth: 1, alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
+  iconText:  { fontSize: 10, fontWeight: '700', letterSpacing: 0.5 },
+  symbol:    { color: '#6b7280', fontSize: 11, fontWeight: '600', marginBottom: 2 },
+  name:      { color: '#374151', fontSize: 11, marginBottom: 10 },
+  priceRow:  { minHeight: 22, justifyContent: 'center' },
+  price:     { color: '#f9fafb', fontSize: 16, fontWeight: '600', letterSpacing: -0.3 },
 })

package/templates/expo-js/app/(tabs)/nft.jsx

@@ -0,0 +1,141 @@
+import { useState } from 'react'
+import { ScrollView, View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
+import { contract, useRead, useSDK } from '@awarizon/react-native'
+import { ERC721_ABI } from '@awarizon/web3'
+
+// Replace with your ERC-721 contract address on your configured chain.
+const NFT_ADDRESS = '0x0000000000000000000000000000000000000000'
+const NFT = contract(NFT_ADDRESS, ERC721_ABI)
+
+function Row({ label, value }) {
+  return (
+    <View style={s.row}>
+      <Text style={s.label}>{label}</Text>
+      {value === undefined
+        ? <ActivityIndicator size="small" color="#FFE500" />
+        : <Text style={s.value}>{value}</Text>}
+    </View>
+  )
+}
+
+export default function NftScreen() {
+  const { data: name,   isLoading: l1, error: e1 } = useRead(NFT.name())
+  const { data: symbol, isLoading: l2, error: e2 } = useRead(NFT.symbol())
+  const awarizon = useSDK()
+
+  const [tokenId,       setTokenId]       = useState('')
+  const [owner,         setOwner]         = useState(null)
+  const [uri,           setUri]           = useState(null)
+  const [lookupLoading, setLookupLoading] = useState(false)
+  const [lookupError,   setLookupError]   = useState(null)
+
+  const collectionError = e1?.message ?? e2?.message ?? null
+
+  async function handleLookup() {
+    if (!tokenId) return
+    setLookupLoading(true)
+    setLookupError(null)
+    setOwner(null)
+    setUri(null)
+    try {
+      const id = BigInt(tokenId)
+      const nft = await awarizon.contract({ address: NFT_ADDRESS, abi: ERC721_ABI })
+      const [o, u] = await Promise.all([nft.ownerOf(id), nft.tokenURI(id)])
+      setOwner(String(o))
+      setUri(String(u))
+    } catch (e) {
+      setLookupError(e instanceof Error ? e.message : 'Lookup failed')
+    } finally {
+      setLookupLoading(false)
+    }
+  }
+
+  return (
+    <ScrollView style={s.bg} contentContainerStyle={s.container}>
+      <View style={s.hero}>
+        <Text style={s.badge}>ERC-721</Text>
+        <Text style={s.heading}>NFT Collection</Text>
+        <Text style={s.sub}>
+          Replace NFT_ADDRESS in this file with your ERC-721 contract address.
+        </Text>
+      </View>
+
+      {collectionError && (
+        <View style={s.errorBox}>
+          <Text style={s.errorText}>{collectionError}</Text>
+        </View>
+      )}
+
+      <View style={s.card}>
+        <Text style={s.cardTitle}>Collection Info</Text>
+        <Text style={s.hint}>{NFT_ADDRESS.slice(0, 6)}…{NFT_ADDRESS.slice(-4)}</Text>
+        <Row label="name()"   value={l1 ? undefined : name   ?? '—'} />
+        <Row label="symbol()" value={l2 ? undefined : symbol ?? '—'} />
+      </View>
+
+      <View style={s.card}>
+        <Text style={s.cardTitle}>Token Lookup</Text>
+        <View style={s.inputRow}>
+          <TextInput
+            style={s.input}
+            value={tokenId}
+            onChangeText={setTokenId}
+            placeholder="Token ID"
+            placeholderTextColor="#4b5563"
+            keyboardType="numeric"
+          />
+          <TouchableOpacity
+            style={[s.button, (!tokenId || lookupLoading) && s.buttonDisabled]}
+            onPress={handleLookup}
+            disabled={!tokenId || lookupLoading}
+          >
+            <Text style={s.buttonText}>{lookupLoading ? 'Loading…' : 'Look up'}</Text>
+          </TouchableOpacity>
+        </View>
+        {lookupError && <Text style={s.errorText}>{lookupError}</Text>}
+        {owner !== null && (
+          <Row label="ownerOf()" value={`${owner.slice(0, 6)}…${owner.slice(-4)}`} />
+        )}
+        {uri !== null && (
+          <View>
+            <Text style={s.hint}>tokenURI()</Text>
+            <Text style={s.uriText}>{uri}</Text>
+          </View>
+        )}
+      </View>
+
+      <View style={s.card}>
+        <Text style={s.cardTitle}>Usage Notes</Text>
+        <Text style={s.step}>1. Replace NFT_ADDRESS at the top of this file</Text>
+        <Text style={s.step}>2. No ABI needed — ERC721_ABI is built into the SDK</Text>
+        <Text style={s.step}>3. Enter a token ID and tap Look up to call <Text style={s.code}>ownerOf</Text> and <Text style={s.code}>tokenURI</Text></Text>
+        <Text style={s.step}>4. Use <Text style={s.code}>awarizon.contract()</Text> for on-demand reads in handlers</Text>
+      </View>
+    </ScrollView>
+  )
+}
+
+const s = StyleSheet.create({
+  bg:             { flex: 1, backgroundColor: '#0a0a0a' },
+  container:      { padding: 20, paddingBottom: 40 },
+  hero:           { marginBottom: 24 },
+  badge:          { color: '#FFE500', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 },
+  heading:        { color: '#fff', fontSize: 28, fontWeight: '800', marginBottom: 6 },
+  sub:            { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
+  card:           { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
+  cardTitle:      { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
+  hint:           { color: '#4b5563', fontSize: 11, marginBottom: 8 },
+  row:            { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
+  label:          { color: '#9ca3af', fontSize: 13 },
+  value:          { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
+  inputRow:       { flexDirection: 'row', gap: 8, marginBottom: 12 },
+  input:          { flex: 1, backgroundColor: '#1a1a1a', borderWidth: 1, borderColor: '#333', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 8, color: '#e5e7eb', fontFamily: 'monospace', fontSize: 13 },
+  button:         { backgroundColor: '#FFE500', borderRadius: 8, paddingHorizontal: 16, paddingVertical: 8, justifyContent: 'center' },
+  buttonDisabled: { opacity: 0.4 },
+  buttonText:     { color: '#000', fontWeight: '700', fontSize: 12 },
+  errorBox:       { backgroundColor: 'rgba(239,68,68,0.1)', borderWidth: 1, borderColor: 'rgba(239,68,68,0.2)', borderRadius: 8, padding: 12, marginBottom: 16 },
+  errorText:      { color: '#f87171', fontSize: 12, fontFamily: 'monospace' },
+  uriText:        { color: '#e5e7eb', fontSize: 12, fontFamily: 'monospace', marginTop: 4 },
+  step:           { color: '#9ca3af', fontSize: 13, lineHeight: 22, marginBottom: 4 },
+  code:           { color: '#FFE500', fontFamily: 'monospace' },
+})

package/templates/expo-js/app/(tabs)/wallet.jsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react'
+import { ScrollView, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
+import { useSDK, useRNWallet, usePrices } from '@awarizon/react-native'
+
+const SYMBOLS = ['ETH', 'BTC', 'USDC']
+
+function Row({ label, value, loading = false }) {
+  return (
+    <View style={s.row}>
+      <Text style={s.label}>{label}</Text>
+      {loading
+        ? <ActivityIndicator size="small" color="#FFE500" />
+        : <Text style={s.value}>{value ?? '—'}</Text>}
+    </View>
+  )
+}
+
+export default function WalletScreen() {
+  const awarizon = useSDK()
+  const { address, isConnected, isLoading: walletLoading, create } = useRNWallet({ awarizon })
+  const { prices, isLoading: pricesLoading } = usePrices(SYMBOLS)
+
+  const [nativeBalance, setNativeBalance] = useState(null)
+  const [balanceLoading, setBalanceLoading] = useState(false)
+
+  useEffect(() => {
+    if (!address) { setNativeBalance(null); return }
+    setBalanceLoading(true)
+    awarizon.publicClient
+      .getBalance({ address })
+      .then(bal => {
+        const eth = Number(bal) / 1e18
+        setNativeBalance(eth.toFixed(6))
+      })
+      .catch(() => setNativeBalance(null))
+      .finally(() => setBalanceLoading(false))
+  }, [address, awarizon])
+
+  const fmtPrice = (sym) =>
+    prices[sym]?.price != null
+      ? `$${prices[sym].price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+      : '—'
+
+  const ethFiatValue =
+    nativeBalance != null && prices['ETH']?.price != null
+      ? `$${(parseFloat(nativeBalance) * prices['ETH'].price).toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+      : null
+
+  return (
+    <ScrollView style={s.bg} contentContainerStyle={s.container}>
+      <View style={s.hero}>
+        <Text style={s.badge}>Portfolio</Text>
+        <Text style={s.heading}>Wallet</Text>
+        <Text style={s.sub}>
+          Native balance and market prices via <Text style={s.code}>useRNWallet</Text> and <Text style={s.code}>usePrices</Text>.
+        </Text>
+      </View>
+
+      {!isConnected ? (
+        <View style={s.card}>
+          <Text style={s.cardTitle}>No Wallet</Text>
+          <Text style={s.sub}>Create a wallet to view your balance and portfolio.</Text>
+          <TouchableOpacity
+            style={[s.button, walletLoading && s.buttonDisabled]}
+            onPress={create}
+            disabled={walletLoading}
+          >
+            {walletLoading
+              ? <ActivityIndicator size="small" color="#000" />
+              : <Text style={s.buttonText}>Create Wallet</Text>}
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <>
+          <View style={s.card}>
+            <Text style={s.cardTitle}>Account</Text>
+            <Row label="Address" value={address ? `${address.slice(0, 6)}…${address.slice(-4)}` : undefined} />
+          </View>
+
+          <View style={s.card}>
+            <Text style={s.cardTitle}>Balance</Text>
+            <Row
+              label="Native"
+              value={nativeBalance != null ? `${nativeBalance} ETH` : undefined}
+              loading={balanceLoading}
+            />
+            <Row
+              label="Est. Value"
+              value={ethFiatValue ?? undefined}
+              loading={balanceLoading || pricesLoading}
+            />
+            <Text style={s.hint}>via publicClient.getBalance · ETH × market price</Text>
+          </View>
+
+          <View style={s.card}>
+            <Text style={s.cardTitle}>Market Prices</Text>
+            {pricesLoading
+              ? <ActivityIndicator size="small" color="#FFE500" style={{ marginVertical: 8 }} />
+              : SYMBOLS.map(sym => (
+                  <Row key={sym} label={sym} value={fmtPrice(sym)} />
+                ))
+            }
+            <Text style={s.hint}>via usePrices · Chainlink + CoinGecko fallback</Text>
+          </View>
+        </>
+      )}
+    </ScrollView>
+  )
+}
+
+const s = StyleSheet.create({
+  bg:             { flex: 1, backgroundColor: '#0a0a0a' },
+  container:      { padding: 20, paddingBottom: 40 },
+  hero:           { marginBottom: 24 },
+  badge:          { color: '#FFE500', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 },
+  heading:        { color: '#fff', fontSize: 28, fontWeight: '800', marginBottom: 6 },
+  sub:            { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
+  card:           { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
+  cardTitle:      { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
+  hint:           { color: '#4b5563', fontSize: 11, marginTop: 8 },
+  row:            { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
+  label:          { color: '#9ca3af', fontSize: 13 },
+  value:          { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
+  button:         { backgroundColor: '#FFE500', borderRadius: 8, paddingHorizontal: 16, paddingVertical: 10, alignItems: 'center', marginTop: 16 },
+  buttonDisabled: { opacity: 0.4 },
+  buttonText:     { color: '#000', fontWeight: '700', fontSize: 13 },
+  code:           { color: '#FFE500', fontFamily: 'monospace' },
+})

package/templates/expo-js/package.json

@@ -3,32 +3,31 @@
   "version": "1.0.0",
   "main": "expo-router/entry",
   "scripts": {
-    "start":   "expo start",
+    "start": "expo start",
     "android": "expo start --android",
-    "ios":     "expo start --ios",
-    "web":     "expo start --web"
+    "ios": "expo start --ios",
+    "web": "expo start --web"
   },
   "dependencies": {
-    "@awarizon/react-native": "^1.2.0",
-    "@awarizon/web3":  "^1.3.4",
-    "@expo/vector-icons":             "^14.0.2",
-    "expo":                           "~51.0.0",
-    "expo-constants":                 "~16.0.2",
-    "expo-font":                      "~12.0.9",
-    "expo-linking":                   "~6.3.1",
-    "expo-router":                    "~3.5.17",
-    "expo-secure-store":              "~13.0.2",
-    "expo-splash-screen":             "~0.27.5",
-    "expo-status-bar":                "~1.12.1",
-    "expo-system-ui":                 "~3.0.7",
-    "react":                          "18.2.0",
-    "react-dom":                      "18.2.0",
-    "react-native":                   "0.74.5",
+    "@awarizon/react-native": "^1.2.1",
+    "@awarizon/web3": "^1.3.5",
+    "@expo/vector-icons": "^14.0.2",
+    "expo": "~51.0.0",
+    "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.9",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.17",
+    "expo-secure-store": "~13.0.2",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.5",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens":           "3.31.1"
+    "react-native-screens": "3.31.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0"
   }
 }
-

package/templates/nextjs/app/layout.tsx

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

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

@@ -0,0 +1,140 @@
+'use client'
+
+import { useState } from 'react'
+import { useNFT } from '@awarizon/react'
+import type { Address } from '@awarizon/web3'
+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' as Address
+
+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>
+  )
+}
+
+export default function NftPage() {
+  const { name, symbol, isLoading, error, ownerOf, tokenURI } = useNFT(NFT_ADDRESS)
+
+  const [tokenId,      setTokenId]      = useState('')
+  const [owner,        setOwner]        = useState<string | null>(null)
+  const [uri,          setUri]          = useState<string | null>(null)
+  const [lookupLoading, setLookupLoading] = useState(false)
+  const [lookupError,  setLookupError]  = useState<string | null>(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>
+  )
+}