create-awarizon-app 1.0.9 → 1.0.11

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

@@ -1,141 +1,50 @@
 'use client'
 
-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 { usePrices } from '@awarizon/react'
 import { Skeleton } from '@/components/ui/Skeleton'
-import { StatCard } from '@/components/ui/StatCard'
 
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-
-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>
-  )
-}
+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' },
+]
 
 export default function Home() {
-  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) / 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="Total Supply" value={formatted}       loading={l4} sub="USDC · formatted" className="flex-1" />
-            <StatCard label="Token"        value={symbol}          loading={l2} sub="Base mainnet"     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, color }) => {
+          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="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>
-
-        {/* ── 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 app/layout.jsx to your target network'],
-              ['04', 'Use useWriteContract() for 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>
-    </div>
+          )
+        })}
+      </div>
+    </main>
   )
 }

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

@@ -0,0 +1,116 @@
+'use client'
+
+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 }) {
+  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 { formatted: nativeBalance, isLoading: balanceLoading } = useNativeBalance(
+    address ?? undefined,
+    12_000,
+  )
+  const { prices, isLoading: pricesLoading } = usePrices(SYMBOLS)
+
+  const fmtPrice = (sym) =>
+    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 components/Providers.jsx
+              </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/nextjs-js/components/Header.jsx

@@ -0,0 +1,56 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { ConnectButton } from '@awarizon/react'
+
+const NAV = [
+  { href: '/',       label: 'Markets' },
+  { href: '/nft',    label: 'NFT'     },
+  { href: '/wallet', label: 'Wallet'  },
+]
+
+export function Header() {
+  const pathname = usePathname()
+  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">
+            <span className="w-1.5 h-1.5 rounded-full bg-green-400 inline-block" />
+            Base
+          </div>
+          {process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
+        </div>
+
+      </div>
+    </header>
+  )
+}

package/templates/nextjs-js/package.json

@@ -3,24 +3,23 @@
   "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.2",
+    "@awarizon/web3": "^1.3.5",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "eslint":             "^8",
+    "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/react/package.json

@@ -4,26 +4,25 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev":     "vite",
-    "build":   "tsc -b && vite build",
+    "dev": "vite",
+    "build": "tsc -b && 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": {
-    "@types/react":         "^18.3.1",
-    "@types/react-dom":     "^18.3.1",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.1",
-    "typescript":           "^5.5.3",
-    "vite":                 "^5.4.1",
-    "autoprefixer":         "^10.4.19",
-    "postcss":              "^8.4.38",
-    "tailwindcss":          "^3.4.4"
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4"
   }
 }
-