create-awarizon-app 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-awarizon-app",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Scaffold a new project with the Awarizon Web3 SDK",
   "keywords": [
     "awarizon",

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, TokenIcon } 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' },
+  { symbol: 'BTC',   name: 'Bitcoin'  },
+  { symbol: 'USDC',  name: 'USD Coin' },
+  { symbol: 'BNB',   name: 'BNB'      },
+  { symbol: 'HYPE',  name: 'Hyperliquid' },
+]
 
 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 }) => {
+          const price = prices[symbol]?.price
+          return (
+            <View key={symbol} style={s.card}>
+              <View style={s.iconWrap}>
+                <TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
+              </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,12 @@ 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 },
+  iconWrap:  { marginBottom: 12 },
+  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,151 @@
+import { useState, useEffect } from 'react'
+import { ScrollView, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
+import { useSDK, useRNWallet, usePrices, TokenIcon } from '@awarizon/react-native'
+import { formatEther } from 'viem'
+import type { Address } from '@awarizon/web3'
+
+const ASSETS = [
+  { symbol: 'ETH',  name: 'Ethereum'    },
+  { symbol: 'BTC',  name: 'Bitcoin'     },
+  { symbol: 'USDC', name: 'USD Coin'    },
+  { symbol: 'BNB',  name: 'BNB'         },
+  { symbol: 'HYPE', name: 'Hyperliquid' },
+]
+
+export default function WalletScreen() {
+  const awarizon = useSDK()
+  const { address, isConnected, isLoading: walletLoading, create } = useRNWallet({ awarizon })
+  const { prices, isLoading: pricesLoading } = usePrices(ASSETS.map(a => a.symbol))
+
+  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 ethPrice = prices['ETH']?.price
+  const ethFiatValue =
+    nativeBalance != null && ethPrice != null
+      ? `$${(parseFloat(nativeBalance) * ethPrice).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>
+            <View style={s.dataRow}>
+              <Text style={s.dataLabel}>Address</Text>
+              <Text style={s.dataValue}>{address ? `${address.slice(0, 6)}…${address.slice(-4)}` : '—'}</Text>
+            </View>
+          </View>
+
+          <View style={s.card}>
+            <Text style={s.cardTitle}>Balance</Text>
+            <View style={s.assetRow}>
+              <TokenIcon symbol="ETH" size={36} radiusFraction={0.5} />
+              <View style={s.assetMeta}>
+                <Text style={s.assetSymbol}>ETH</Text>
+                <Text style={s.assetName}>Ethereum</Text>
+              </View>
+              <View style={s.assetRight}>
+                {balanceLoading
+                  ? <ActivityIndicator size="small" color="#FFE500" />
+                  : <>
+                      <Text style={s.assetValue}>
+                        {nativeBalance != null ? `${parseFloat(nativeBalance).toFixed(6)} ETH` : '—'}
+                      </Text>
+                      {ethFiatValue && <Text style={s.assetSub}>{ethFiatValue}</Text>}
+                    </>
+                }
+              </View>
+            </View>
+          </View>
+
+          <View style={s.card}>
+            <Text style={s.cardTitle}>Assets</Text>
+            {ASSETS.map(({ symbol, name }, i) => {
+              const price = prices[symbol]?.price
+              return (
+                <View key={symbol} style={[s.assetRow, i < ASSETS.length - 1 && s.assetBorder]}>
+                  <TokenIcon symbol={symbol} size={36} radiusFraction={0.28} />
+                  <View style={s.assetMeta}>
+                    <Text style={s.assetSymbol}>{symbol}</Text>
+                    <Text style={s.assetName}>{name}</Text>
+                  </View>
+                  <View style={s.assetRight}>
+                    {pricesLoading
+                      ? <ActivityIndicator size="small" color="#FFE500" />
+                      : <Text style={s.assetValue}>
+                          {price != null
+                            ? `$${price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
+                            : '—'}
+                        </Text>
+                    }
+                    <Text style={s.assetSub}>USD</Text>
+                  </View>
+                </View>
+              )
+            })}
+          </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 },
+  dataRow:        { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
+  dataLabel:      { color: '#9ca3af', fontSize: 13 },
+  dataValue:      { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
+  assetRow:       { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 },
+  assetBorder:    { borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
+  assetMeta:      { flex: 1 },
+  assetSymbol:    { color: '#fff', fontSize: 14, fontWeight: '600' },
+  assetName:      { color: '#6b7280', fontSize: 12, marginTop: 2 },
+  assetRight:     { alignItems: 'flex-end' },
+  assetValue:     { color: '#e5e7eb', fontSize: 14, fontWeight: '500' },
+  assetSub:       { color: '#6b7280', fontSize: 11, marginTop: 2 },
+  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.2",
+    "@awarizon/web3": "^1.3.7",
+    "@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, TokenIcon } 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' },
+  { symbol: 'BTC',   name: 'Bitcoin'  },
+  { symbol: 'USDC',  name: 'USD Coin' },
+  { symbol: 'BNB',   name: 'BNB'      },
+  { symbol: 'HYPE',  name: 'Hyperliquid' },
+]
 
 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 }) => {
+          const price = prices[symbol]?.price
+          return (
+            <View key={symbol} style={s.card}>
+              <View style={s.iconWrap}>
+                <TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
+              </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,12 @@ 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 },
+  iconWrap:  { marginBottom: 12 },
+  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 },
 })