create-awarizon-app 1.0.9 → 1.0.11

package/templates/react/src/App.tsx

@@ -1,166 +1,109 @@
-import { useReadContract, 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 { Skeleton } from './components/ui/Skeleton'
-import { StatCard } from './components/ui/StatCard'
+import { useState } from 'react'
+import { usePrices, ConnectButton } from '@awarizon/react'
+import { Skeleton }   from './components/ui/Skeleton'
+import { NftPage }    from './pages/NftPage'
+import { WalletPage } from './pages/WalletPage'
 
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
+type Page = 'home' | 'nft' | 'wallet'
+
+const NAV: { id: Page; label: string }[] = [
+  { id: 'home',   label: 'Markets' },
+  { id: 'nft',    label: 'NFT'     },
+  { id: 'wallet', label: 'Wallet'  },
+]
+
+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 HomePage() {
+  const { prices, isLoading } = usePrices(TOKENS.map(t => t.symbol))
 
-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>
+    <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, color }) => {
+          const price = prices[symbol]?.price
+          return (
+            <div
+              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"
+            >
+              <div className="mb-4">
+                <div
+                  className="w-10 h-10 rounded-full flex items-center justify-center text-[10px] font-bold tracking-wider mb-3"
+                  style={{ backgroundColor: `${color}18`, border: `1px solid ${color}25`, color }}
+                >
+                  {symbol.slice(0, 3)}
+                </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>
+    </main>
   )
 }
 
 export default function App() {
-  const { data: name,        isLoading: l1 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'name'        })
-  const { data: symbol,      isLoading: l2 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'symbol'      })
-  const { data: decimals,    isLoading: l3 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'decimals'    })
-  const { data: totalSupply, isLoading: l4 } = useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: 'totalSupply' })
-
-  const formatted =
-    totalSupply !== undefined && decimals !== undefined
-      ? (Number(totalSupply as bigint) / 10 ** Number(decimals as bigint))
-          .toLocaleString(undefined, { maximumFractionDigits: 2 })
-      : undefined
-
-  const synced = !l1 && !l2 && !l3 && !l4
+  const [page, setPage] = useState<Page>('home')
 
   return (
-    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+    <div className="min-h-screen">
 
-      {/* ── 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>
-            {import.meta.env.VITE_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
-          </div>
-        </div>
-      </header>
+      <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">
 
-      <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 · React + Vite</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>
+          <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>
 
-        {/* ── Data grid ──────────────────────────────────── */}
-        <div className="grid md:grid-cols-3 gap-4 mb-4">
+          <nav className="flex items-center">
+            {NAV.map(({ id, label }) => (
+              <button
+                key={id}
+                onClick={() => setPage(id)}
+                className={[
+                  'relative px-4 py-2 text-sm font-medium transition-colors',
+                  page === id ? 'text-white' : 'text-zinc-500 hover:text-zinc-300',
+                ].join(' ')}
+              >
+                {label}
+                {page === id && (
+                  <span className="absolute bottom-0 left-4 right-4 h-px bg-yellow-400" />
+                )}
+              </button>
+            ))}
+          </nav>
 
-          {/* Contract reader — spans 2 cols */}
-          <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 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">
+              <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block" />
+              Base
             </div>
-            <DataRow label="name()"        value={name as string}         loading={l1} />
-            <DataRow label="symbol()"      value={symbol as string}       loading={l2} />
-            <DataRow label="decimals()"    value={String(decimals ?? '')} loading={l3} />
-            <DataRow label="totalSupply()" value={formatted}              loading={l4} />
-          </Card>
-
-          {/* Stat column */}
-          <div className="flex flex-col gap-4">
-            <StatCard
-              label="Total Supply"
-              value={formatted}
-              loading={l4}
-              sub="USDC · formatted"
-              className="flex-1"
-            />
-            <StatCard
-              label="Token"
-              value={symbol as string}
-              loading={l2}
-              sub="Base mainnet"
-              className="flex-1"
-            />
+            {import.meta.env.VITE_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
           </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 }) => (
-            <div
-              key={label}
-              className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
-            >
-              <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>
-          ))}
         </div>
+      </header>
 
-        {/* ── 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 src/main.tsx to your target network'],
-              ['04', 'Use useWriteContract() for send transactions'],
-              ['05', 'Add walletConnectProjectId to AwarizonProvider for mobile wallet support'],
-            ].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>
+      {page === 'home'   && <HomePage />}
+      {page === 'nft'    && <NftPage />}
+      {page === 'wallet' && <WalletPage />}
     </div>
   )
 }

package/templates/react/src/pages/NftPage.tsx

@@ -0,0 +1,138 @@
+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 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>
+  )
+}

package/templates/react/src/pages/WalletPage.tsx

@@ -0,0 +1,114 @@
+import { useWallet, useNativeBalance, usePrices, ConnectButton } from '@awarizon/react'
+import { Badge }    from '../components/ui/Badge'
+import { Card }     from '../components/ui/Card'
+import { Skeleton } from '../components/ui/Skeleton'
+import { StatCard } from '../components/ui/StatCard'
+
+const SYMBOLS = ['ETH', 'BTC', 'USDC']
+
+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 function WalletPage() {
+  const { address, isConnected, isChainMismatch, chainId, connectorInfo } = useWallet()
+  const { formatted: nativeBalance, isLoading: balanceLoading } = useNativeBalance(
+    address ?? undefined,
+    12_000,
+  )
+  const { prices, isLoading: pricesLoading } = usePrices(SYMBOLS)
+
+  const fmtPrice = (sym: string) =>
+    prices[sym]?.price != null
+      ? `$${prices[sym].price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+      : undefined
+
+  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 src/main.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 ID"  value={chainId != null ? String(chainId) : undefined} loading={false} />
+            <DataRow label="Connector" value={connectorInfo?.name ?? connectorInfo?.type}    loading={false} />
+          </Card>
+
+          {/* ── Balance ──────────────────────────────────── */}
+          <div className="grid sm:grid-cols-3 gap-4 mb-4">
+            <StatCard
+              label="Native Balance"
+              value={nativeBalance != null ? `${parseFloat(nativeBalance).toFixed(6)} ETH` : undefined}
+              loading={balanceLoading}
+              sub="useNativeBalance · 12 s poll"
+              className="sm:col-span-2"
+            />
+            <StatCard
+              label="Est. Value"
+              value={ethFiatValue}
+              loading={balanceLoading || pricesLoading}
+              sub="ETH × market price"
+            />
+          </div>
+
+          {/* ── Prices ───────────────────────────────────── */}
+          <div className="grid sm:grid-cols-3 gap-4">
+            {SYMBOLS.map(sym => (
+              <StatCard
+                key={sym}
+                label={sym}
+                value={fmtPrice(sym)}
+                loading={pricesLoading}
+                sub="USD · usePrices"
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </main>
+  )
+}

package/templates/react-js/package.json

@@ -4,23 +4,22 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev":     "vite",
-    "build":   "vite build",
+    "dev": "vite",
+    "build": "vite build",
     "preview": "vite preview",
-    "lint":    "eslint ."
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@awarizon/react": "^1.6.1",
-    "@awarizon/web3":  "^1.3.4",
-    "react":           "^18.3.1",
-    "react-dom":       "^18.3.1"
+    "@awarizon/react": "^1.6.2",
+    "@awarizon/web3": "^1.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
-    "vite":                 "^5.4.1",
-    "autoprefixer":         "^10.4.19",
-    "postcss":              "^8.4.38",
-    "tailwindcss":          "^3.4.4"
+    "vite": "^5.4.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4"
   }
 }
-