create-awarizon-app 1.0.10 → 1.0.12

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

@@ -1,142 +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 }) {
-  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(USDC.name())
-  const { data: symbol,      isLoading: l2 } = useRead(USDC.symbol())
-  const { data: decimals,    isLoading: l3 } = useRead(USDC.decimals())
-  const { data: totalSupply, isLoading: l4 } = useRead(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>
+    <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={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="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>
-              <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={decimals != null ? String(decimals) : undefined}   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 }) => (
-            <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>
-
-        {/* ── 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.jsx 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-js/app/wallet/page.jsx

@@ -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 }) {
+  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.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"     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-js/components/Header.jsx

@@ -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-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.4",
+    "@awarizon/web3": "^1.3.7",
+    "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.4",
+    "@awarizon/web3": "^1.3.7",
+    "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"
   }
 }
-