create-awarizon-app 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-awarizon-app",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Scaffold a new project with the Awarizon Web3 SDK",
   "keywords": [
     "awarizon",
@@ -20,12 +20,6 @@
     "dist",
     "templates"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "clean": "rimraf dist"
-  },
   "dependencies": {
     "@clack/prompts": "^0.9.1",
     "chalk": "^5.3.0",
@@ -43,5 +37,11 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "clean": "rimraf dist"
   }
-}
+}

package/templates/expo/app/(tabs)/_layout.tsx

@@ -17,7 +17,9 @@ export default function TabLayout() {
         headerTintColor: '#fff',
       }}
     >
-      <Tabs.Screen name="index" options={{ title: 'Home' }} />
+      <Tabs.Screen name="index"  options={{ title: 'Home'   }} />
+      <Tabs.Screen name="nft"    options={{ title: 'NFT'    }} />
+      <Tabs.Screen name="wallet" options={{ title: 'Wallet' }} />
     </Tabs>
   )
 }

package/templates/expo/app/(tabs)/index.tsx

@@ -1,65 +1,41 @@
 import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
-import { contract, useRead, usePrice } from '@awarizon/react-native'
-import { ERC20_ABI } from '@awarizon/web3'
+import { usePrices } from '@awarizon/react-native'
 
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-const USDC = contract(USDC_BASE, ERC20_ABI)
-
-function Row({ label, value }: { label: string; value?: string }) {
-  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>
-  )
-}
+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 HomeScreen() {
-  const { data: name,        isLoading: l1 } = useRead<string>(USDC.name())
-  const { data: symbol,      isLoading: l2 } = useRead<string>(USDC.symbol())
-  const { data: decimals,    isLoading: l3 } = useRead<bigint>(USDC.decimals())
-  const { data: totalSupply, isLoading: l4 } = useRead<bigint>(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 { 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}>ETH Price</Text>
-        <Row
-          label="ETH / USD"
-          value={lp ? undefined : ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : '—'}
-        />
-        <Text style={s.hint}>via usePrice · Chainlink + CoinGecko fallback</Text>
-      </View>
-
-      <View style={s.card}>
-        <Text style={s.cardTitle}>USDC — Base</Text>
-        <Row label="Name"         value={l1 ? undefined : name ?? '—'} />
-        <Row label="Symbol"       value={l2 ? undefined : symbol ?? '—'} />
-        <Row label="Decimals"     value={l3 ? undefined : decimals !== undefined ? String(decimals) : '—'} />
-        <Row label="Total Supply" value={l4 ? undefined : 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.tsx</Text>
-        <Text style={s.step}>4. Use <Text style={s.code}>useWrite(USDC.transfer)</Text> for transactions</Text>
-        <Text style={s.step}>5. Use <Text style={s.code}>usePrices(["ETH","BTC"])</Text> for multiple prices</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>
   )
@@ -67,17 +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: '#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, fontStyle: 'italic' },
-  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: '#FFE500', 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/app/(tabs)/nft.tsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } 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'
+import type { Address } from '@awarizon/web3'
+
+// Replace with your ERC-721 contract address on your configured chain.
+const NFT_ADDRESS = '0x0000000000000000000000000000000000000000' as Address
+const NFT = contract(NFT_ADDRESS, ERC721_ABI)
+
+function Row({ label, value }: { label: string; value?: string }) {
+  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<string>(NFT.name())
+  const { data: symbol, isLoading: l2, error: e2 } = useRead<string>(NFT.symbol())
+  const awarizon = useSDK()
+
+  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)
+
+  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/app/(tabs)/wallet.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react'
+import { ScrollView, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
+import { useSDK, useRNWallet, usePrices } from '@awarizon/react-native'
+import { formatEther } from 'viem'
+import type { Address } from '@awarizon/web3'
+
+const SYMBOLS = ['ETH', 'BTC', 'USDC']
+
+function Row({ label, value, loading = false }: { label: string; value?: string; loading?: boolean }) {
+  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<string | null>(null)
+  const [balanceLoading, setBalanceLoading] = useState(false)
+
+  useEffect(() => {
+    if (!address) { setNativeBalance(null); return }
+    setBalanceLoading(true)
+    awarizon.publicClient
+      .getBalance({ address: address as Address })
+      .then(bal => setNativeBalance(formatEther(bal)))
+      .catch(() => setNativeBalance(null))
+      .finally(() => setBalanceLoading(false))
+  }, [address, awarizon])
+
+  const fmtPrice = (sym: string) =>
+    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 ? `${parseFloat(nativeBalance).toFixed(6)} 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/package.json

@@ -3,34 +3,33 @@
   "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",
-    "@types/react":   "~18.2.45",
-    "typescript":     "^5.3.3"
+    "@babel/core": "^7.24.0",
+    "@types/react": "~18.2.45",
+    "typescript": "^5.3.3"
   }
 }
-

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

@@ -17,7 +17,9 @@ export default function TabLayout() {
         headerTintColor: '#fff',
       }}
     >
-      <Tabs.Screen name="index" options={{ title: 'Home' }} />
+      <Tabs.Screen name="index"  options={{ title: 'Home'   }} />
+      <Tabs.Screen name="nft"    options={{ title: 'NFT'    }} />
+      <Tabs.Screen name="wallet" options={{ title: 'Wallet' }} />
     </Tabs>
   )
 }

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

@@ -1,65 +1,41 @@
 import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
-import { contract, useRead, usePrice } from '@awarizon/react-native'
-import { ERC20_ABI } from '@awarizon/web3'
+import { usePrices } from '@awarizon/react-native'
 
-const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-const USDC = contract(USDC_BASE, ERC20_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>
-  )
-}
+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 HomeScreen() {
-  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 { 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}>ETH Price</Text>
-        <Row
-          label="ETH / USD"
-          value={lp ? undefined : ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : '—'}
-        />
-        <Text style={s.hint}>via usePrice · Chainlink + CoinGecko fallback</Text>
-      </View>
-
-      <View style={s.card}>
-        <Text style={s.cardTitle}>USDC — Base</Text>
-        <Row label="Name"         value={l1 ? undefined : name != null ? String(name) : '—'} />
-        <Row label="Symbol"       value={l2 ? undefined : symbol != null ? String(symbol) : '—'} />
-        <Row label="Decimals"     value={l3 ? undefined : decimals != null ? String(decimals) : '—'} />
-        <Row label="Total Supply" value={l4 ? undefined : 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}>useWrite(USDC.transfer)</Text> for transactions</Text>
-        <Text style={s.step}>5. Use <Text style={s.code}>usePrices(["ETH","BTC"])</Text> for multiple prices</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>
   )
@@ -67,17 +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: '#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, fontStyle: 'italic' },
-  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: '#FFE500', 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 },
 })