create-awarizon-app 1.0.11 → 1.0.12

package/templates/react-js/src/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { usePrices, ConnectButton } from '@awarizon/react'
+import { usePrices, ConnectButton, TokenIcon, ChainIcon, useWallet, getChainName } from '@awarizon/react'
 import { Skeleton }   from './components/ui/Skeleton'
 import { NftPage }    from './pages/NftPage'
 import { WalletPage } from './pages/WalletPage'
@@ -11,11 +11,11 @@ const NAV = [
 ]
 
 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' },
+  { symbol: 'ETH',   name: 'Ethereum' },
+  { symbol: 'BTC',   name: 'Bitcoin'  },
+  { symbol: 'USDC',  name: 'USD Coin' },
+  { symbol: 'BNB',   name: 'BNB'      },
+  { symbol: 'HYPE',  name: 'Hyperliquid' },
 ]
 
 function HomePage() {
@@ -24,7 +24,7 @@ function HomePage() {
   return (
     <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 }) => {
+        {TOKENS.map(({ symbol, name }) => {
           const price = prices[symbol]?.price
           return (
             <div
@@ -32,11 +32,8 @@ function HomePage() {
               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 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>
@@ -58,6 +55,9 @@ function HomePage() {
 
 export default function App() {
   const [page, setPage] = useState('home')
+  const { chainId } = useWallet()
+  const displayChainId = chainId ?? 8453
+  const chainName = getChainName(displayChainId)
 
   return (
     <div className="min-h-screen">
@@ -90,8 +90,8 @@ export default function App() {
 
           <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
+              <ChainIcon chainId={displayChainId} size={16} radiusFraction={0.5} />
+              {chainName}
             </div>
             {import.meta.env.VITE_WALLETCONNECT_PROJECT_ID && <ConnectButton />}
           </div>

package/templates/react-js/src/pages/WalletPage.jsx

@@ -1,10 +1,15 @@
-import { useWallet, useNativeBalance, usePrices, ConnectButton } from '@awarizon/react'
+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'
-import { StatCard } from '../components/ui/StatCard'
 
-const SYMBOLS = ['ETH', 'BTC', 'USDC']
+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 (
@@ -19,16 +24,12 @@ function DataRow({ label, value, loading }) {
 
 export 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(SYMBOLS)
-
-  const fmtPrice = (sym) =>
-    prices[sym]?.price != null
-      ? `$${prices[sym].price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
-      : undefined
+  const { prices, isLoading: pricesLoading } = usePrices(ASSETS.map(a => a.symbol))
 
   const ethFiatValue =
     nativeBalance != null && prices['ETH']?.price != null
@@ -74,39 +75,67 @@ export function WalletPage() {
           <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="Chain"     value={chainId != null ? getChainName(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>
+          <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>
 
-          {/* ── 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>
+          {/* ── 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>