create-awarizon-app 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/templates/expo/app/(tabs)/_layout.tsx +1 -2
- package/templates/expo/app/(tabs)/index.tsx +28 -24
- package/templates/expo/babel.config.js +6 -0
- package/templates/expo-js/app/(tabs)/_layout.jsx +1 -2
- package/templates/expo-js/app/(tabs)/index.jsx +28 -26
- package/templates/nextjs/app/page.tsx +28 -41
- package/templates/nextjs-js/app/page.jsx +28 -27
- package/templates/react/src/App.tsx +24 -24
- package/templates/react-js/src/App.jsx +26 -25
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ export default function TabLayout() {
|
|
|
5
5
|
return (
|
|
6
6
|
<Tabs
|
|
7
7
|
screenOptions={{
|
|
8
|
-
tabBarActiveTintColor: '#
|
|
8
|
+
tabBarActiveTintColor: '#FFE500',
|
|
9
9
|
tabBarInactiveTintColor: '#6b7280',
|
|
10
10
|
tabBarStyle: {
|
|
11
11
|
backgroundColor: '#111',
|
|
@@ -18,7 +18,6 @@ export default function TabLayout() {
|
|
|
18
18
|
}}
|
|
19
19
|
>
|
|
20
20
|
<Tabs.Screen name="index" options={{ title: 'Home' }} />
|
|
21
|
-
<Tabs.Screen name="explorer" options={{ title: 'Explorer' }} />
|
|
22
21
|
</Tabs>
|
|
23
22
|
)
|
|
24
23
|
}
|
|
@@ -1,34 +1,27 @@
|
|
|
1
1
|
import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
|
|
2
|
-
import {
|
|
2
|
+
import { contract, useRead, usePrice } from '@awarizon/react-native'
|
|
3
|
+
import { ERC20_ABI } from '@awarizon/web3'
|
|
3
4
|
|
|
4
5
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
5
|
-
const
|
|
6
|
-
{ name: 'name', type: 'function', inputs: [], outputs: [{ type: 'string' }], stateMutability: 'view' },
|
|
7
|
-
{ name: 'symbol', type: 'function', inputs: [], outputs: [{ type: 'string' }], stateMutability: 'view' },
|
|
8
|
-
{ name: 'decimals', type: 'function', inputs: [], outputs: [{ type: 'uint8' }], stateMutability: 'view' },
|
|
9
|
-
{ name: 'totalSupply', type: 'function', inputs: [], outputs: [{ type: 'uint256' }], stateMutability: 'view' },
|
|
10
|
-
] as const
|
|
11
|
-
|
|
12
|
-
function usdc(fn: string) {
|
|
13
|
-
return useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: fn as never })
|
|
14
|
-
}
|
|
6
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
15
7
|
|
|
16
8
|
function Row({ label, value }: { label: string; value?: string }) {
|
|
17
9
|
return (
|
|
18
10
|
<View style={s.row}>
|
|
19
11
|
<Text style={s.label}>{label}</Text>
|
|
20
12
|
{value === undefined
|
|
21
|
-
? <ActivityIndicator size="small" color="#
|
|
13
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
22
14
|
: <Text style={s.value}>{value}</Text>}
|
|
23
15
|
</View>
|
|
24
16
|
)
|
|
25
17
|
}
|
|
26
18
|
|
|
27
19
|
export default function HomeScreen() {
|
|
28
|
-
const { data: name }
|
|
29
|
-
const { data: symbol }
|
|
30
|
-
const { data: decimals }
|
|
31
|
-
const { data: totalSupply } =
|
|
20
|
+
const { data: name, isLoading: l1 } = useRead<string>(USDC.name())
|
|
21
|
+
const { data: symbol, isLoading: l2 } = useRead<string>(USDC.symbol())
|
|
22
|
+
const { data: decimals, isLoading: l3 } = useRead<bigint>(USDC.decimals())
|
|
23
|
+
const { data: totalSupply, isLoading: l4 } = useRead<bigint>(USDC.totalSupply())
|
|
24
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
32
25
|
|
|
33
26
|
const formatted =
|
|
34
27
|
totalSupply !== undefined && decimals !== undefined
|
|
@@ -38,17 +31,26 @@ export default function HomeScreen() {
|
|
|
38
31
|
return (
|
|
39
32
|
<ScrollView style={s.bg} contentContainerStyle={s.container}>
|
|
40
33
|
<View style={s.hero}>
|
|
41
|
-
<Text style={s.badge}>{{ProjectName}}</Text>
|
|
34
|
+
<Text style={s.badge}>{'{{ProjectName}}'}</Text>
|
|
42
35
|
<Text style={s.heading}>Live on-chain data</Text>
|
|
43
36
|
<Text style={s.sub}>Reading USDC on Base — no backend required.</Text>
|
|
44
37
|
</View>
|
|
45
38
|
|
|
39
|
+
<View style={s.card}>
|
|
40
|
+
<Text style={s.cardTitle}>ETH Price</Text>
|
|
41
|
+
<Row
|
|
42
|
+
label="ETH / USD"
|
|
43
|
+
value={lp ? undefined : ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : '—'}
|
|
44
|
+
/>
|
|
45
|
+
<Text style={s.hint}>via usePrice · Chainlink + CoinGecko fallback</Text>
|
|
46
|
+
</View>
|
|
47
|
+
|
|
46
48
|
<View style={s.card}>
|
|
47
49
|
<Text style={s.cardTitle}>USDC — Base</Text>
|
|
48
|
-
<Row label="Name" value={name
|
|
49
|
-
<Row label="Symbol" value={symbol
|
|
50
|
-
<Row label="Decimals" value={decimals
|
|
51
|
-
<Row label="Total Supply" value={formatted} />
|
|
50
|
+
<Row label="Name" value={l1 ? undefined : name ?? '—'} />
|
|
51
|
+
<Row label="Symbol" value={l2 ? undefined : symbol ?? '—'} />
|
|
52
|
+
<Row label="Decimals" value={l3 ? undefined : decimals !== undefined ? String(decimals) : '—'} />
|
|
53
|
+
<Row label="Total Supply" value={l4 ? undefined : formatted} />
|
|
52
54
|
</View>
|
|
53
55
|
|
|
54
56
|
<View style={s.card}>
|
|
@@ -56,7 +58,8 @@ export default function HomeScreen() {
|
|
|
56
58
|
<Text style={s.step}>1. Replace USDC_BASE with your contract address</Text>
|
|
57
59
|
<Text style={s.step}>2. Swap ERC20_ABI for your contract ABI</Text>
|
|
58
60
|
<Text style={s.step}>3. Change the chain in app/_layout.tsx</Text>
|
|
59
|
-
<Text style={s.step}>4. Use <Text style={s.code}>
|
|
61
|
+
<Text style={s.step}>4. Use <Text style={s.code}>useWrite(USDC.transfer)</Text> for transactions</Text>
|
|
62
|
+
<Text style={s.step}>5. Use <Text style={s.code}>usePrices(["ETH","BTC"])</Text> for multiple prices</Text>
|
|
60
63
|
</View>
|
|
61
64
|
</ScrollView>
|
|
62
65
|
)
|
|
@@ -66,14 +69,15 @@ const s = StyleSheet.create({
|
|
|
66
69
|
bg: { flex: 1, backgroundColor: '#0a0a0a' },
|
|
67
70
|
container: { padding: 20, paddingBottom: 40 },
|
|
68
71
|
hero: { marginBottom: 24 },
|
|
69
|
-
badge: { color: '#
|
|
72
|
+
badge: { color: '#FFE500', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 },
|
|
70
73
|
heading: { color: '#fff', fontSize: 28, fontWeight: '800', marginBottom: 6 },
|
|
71
74
|
sub: { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
|
|
72
75
|
card: { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
|
|
73
76
|
cardTitle: { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
|
|
77
|
+
hint: { color: '#4b5563', fontSize: 11, marginTop: 8, fontStyle: 'italic' },
|
|
74
78
|
row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
|
|
75
79
|
label: { color: '#9ca3af', fontSize: 13 },
|
|
76
80
|
value: { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
|
|
77
81
|
step: { color: '#9ca3af', fontSize: 13, lineHeight: 22, marginBottom: 4 },
|
|
78
|
-
code: { color: '#
|
|
82
|
+
code: { color: '#FFE500', fontFamily: 'monospace' },
|
|
79
83
|
})
|
|
@@ -5,7 +5,7 @@ export default function TabLayout() {
|
|
|
5
5
|
return (
|
|
6
6
|
<Tabs
|
|
7
7
|
screenOptions={{
|
|
8
|
-
tabBarActiveTintColor: '#
|
|
8
|
+
tabBarActiveTintColor: '#FFE500',
|
|
9
9
|
tabBarInactiveTintColor: '#6b7280',
|
|
10
10
|
tabBarStyle: {
|
|
11
11
|
backgroundColor: '#111',
|
|
@@ -18,7 +18,6 @@ export default function TabLayout() {
|
|
|
18
18
|
}}
|
|
19
19
|
>
|
|
20
20
|
<Tabs.Screen name="index" options={{ title: 'Home' }} />
|
|
21
|
-
<Tabs.Screen name="explorer" options={{ title: 'Explorer' }} />
|
|
22
21
|
</Tabs>
|
|
23
22
|
)
|
|
24
23
|
}
|
|
@@ -1,36 +1,27 @@
|
|
|
1
1
|
import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
|
|
2
|
-
import {
|
|
2
|
+
import { contract, useRead, usePrice } from '@awarizon/react-native'
|
|
3
|
+
import { ERC20_ABI } from '@awarizon/web3'
|
|
3
4
|
|
|
4
5
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
5
|
-
|
|
6
|
-
/** @type {readonly object[]} */
|
|
7
|
-
const ERC20_ABI = [
|
|
8
|
-
{ name: 'name', type: 'function', inputs: [], outputs: [{ type: 'string' }], stateMutability: 'view' },
|
|
9
|
-
{ name: 'symbol', type: 'function', inputs: [], outputs: [{ type: 'string' }], stateMutability: 'view' },
|
|
10
|
-
{ name: 'decimals', type: 'function', inputs: [], outputs: [{ type: 'uint8' }], stateMutability: 'view' },
|
|
11
|
-
{ name: 'totalSupply', type: 'function', inputs: [], outputs: [{ type: 'uint256' }], stateMutability: 'view' },
|
|
12
|
-
]
|
|
13
|
-
|
|
14
|
-
function usdc(fn) {
|
|
15
|
-
return useReadContract({ address: USDC_BASE, abi: ERC20_ABI, method: fn })
|
|
16
|
-
}
|
|
6
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
17
7
|
|
|
18
8
|
function Row({ label, value }) {
|
|
19
9
|
return (
|
|
20
10
|
<View style={s.row}>
|
|
21
11
|
<Text style={s.label}>{label}</Text>
|
|
22
12
|
{value === undefined
|
|
23
|
-
? <ActivityIndicator size="small" color="#
|
|
13
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
24
14
|
: <Text style={s.value}>{value}</Text>}
|
|
25
15
|
</View>
|
|
26
16
|
)
|
|
27
17
|
}
|
|
28
18
|
|
|
29
19
|
export default function HomeScreen() {
|
|
30
|
-
const { data: name }
|
|
31
|
-
const { data: symbol }
|
|
32
|
-
const { data: decimals }
|
|
33
|
-
const { data: totalSupply } =
|
|
20
|
+
const { data: name, isLoading: l1 } = useRead(USDC.name())
|
|
21
|
+
const { data: symbol, isLoading: l2 } = useRead(USDC.symbol())
|
|
22
|
+
const { data: decimals, isLoading: l3 } = useRead(USDC.decimals())
|
|
23
|
+
const { data: totalSupply, isLoading: l4 } = useRead(USDC.totalSupply())
|
|
24
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
34
25
|
|
|
35
26
|
const formatted =
|
|
36
27
|
totalSupply !== undefined && decimals !== undefined
|
|
@@ -40,17 +31,26 @@ export default function HomeScreen() {
|
|
|
40
31
|
return (
|
|
41
32
|
<ScrollView style={s.bg} contentContainerStyle={s.container}>
|
|
42
33
|
<View style={s.hero}>
|
|
43
|
-
<Text style={s.badge}>{{ProjectName}}</Text>
|
|
34
|
+
<Text style={s.badge}>{'{{ProjectName}}'}</Text>
|
|
44
35
|
<Text style={s.heading}>Live on-chain data</Text>
|
|
45
36
|
<Text style={s.sub}>Reading USDC on Base — no backend required.</Text>
|
|
46
37
|
</View>
|
|
47
38
|
|
|
39
|
+
<View style={s.card}>
|
|
40
|
+
<Text style={s.cardTitle}>ETH Price</Text>
|
|
41
|
+
<Row
|
|
42
|
+
label="ETH / USD"
|
|
43
|
+
value={lp ? undefined : ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : '—'}
|
|
44
|
+
/>
|
|
45
|
+
<Text style={s.hint}>via usePrice · Chainlink + CoinGecko fallback</Text>
|
|
46
|
+
</View>
|
|
47
|
+
|
|
48
48
|
<View style={s.card}>
|
|
49
49
|
<Text style={s.cardTitle}>USDC — Base</Text>
|
|
50
|
-
<Row label="Name" value={
|
|
51
|
-
<Row label="Symbol" value={
|
|
52
|
-
<Row label="Decimals" value={
|
|
53
|
-
<Row label="Total Supply" value={formatted} />
|
|
50
|
+
<Row label="Name" value={l1 ? undefined : name != null ? String(name) : '—'} />
|
|
51
|
+
<Row label="Symbol" value={l2 ? undefined : symbol != null ? String(symbol) : '—'} />
|
|
52
|
+
<Row label="Decimals" value={l3 ? undefined : decimals != null ? String(decimals) : '—'} />
|
|
53
|
+
<Row label="Total Supply" value={l4 ? undefined : formatted} />
|
|
54
54
|
</View>
|
|
55
55
|
|
|
56
56
|
<View style={s.card}>
|
|
@@ -58,7 +58,8 @@ export default function HomeScreen() {
|
|
|
58
58
|
<Text style={s.step}>1. Replace USDC_BASE with your contract address</Text>
|
|
59
59
|
<Text style={s.step}>2. Swap ERC20_ABI for your contract ABI</Text>
|
|
60
60
|
<Text style={s.step}>3. Change the chain in app/_layout.jsx</Text>
|
|
61
|
-
<Text style={s.step}>4. Use <Text style={s.code}>
|
|
61
|
+
<Text style={s.step}>4. Use <Text style={s.code}>useWrite(USDC.transfer)</Text> for transactions</Text>
|
|
62
|
+
<Text style={s.step}>5. Use <Text style={s.code}>usePrices(["ETH","BTC"])</Text> for multiple prices</Text>
|
|
62
63
|
</View>
|
|
63
64
|
</ScrollView>
|
|
64
65
|
)
|
|
@@ -68,14 +69,15 @@ const s = StyleSheet.create({
|
|
|
68
69
|
bg: { flex: 1, backgroundColor: '#0a0a0a' },
|
|
69
70
|
container: { padding: 20, paddingBottom: 40 },
|
|
70
71
|
hero: { marginBottom: 24 },
|
|
71
|
-
badge: { color: '#
|
|
72
|
+
badge: { color: '#FFE500', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1.5, marginBottom: 8 },
|
|
72
73
|
heading: { color: '#fff', fontSize: 28, fontWeight: '800', marginBottom: 6 },
|
|
73
74
|
sub: { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
|
|
74
75
|
card: { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
|
|
75
76
|
cardTitle: { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
|
|
77
|
+
hint: { color: '#4b5563', fontSize: 11, marginTop: 8, fontStyle: 'italic' },
|
|
76
78
|
row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
|
|
77
79
|
label: { color: '#9ca3af', fontSize: 13 },
|
|
78
80
|
value: { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
|
|
79
81
|
step: { color: '#9ca3af', fontSize: 13, lineHeight: 22, marginBottom: 4 },
|
|
80
|
-
code: { color: '#
|
|
82
|
+
code: { color: '#FFE500', fontFamily: 'monospace' },
|
|
81
83
|
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { contract, useRead, usePrice, ConnectButton } from '@awarizon/react'
|
|
4
4
|
import { ERC20_ABI } from '@awarizon/web3'
|
|
5
5
|
import { Badge } from '@/components/ui/Badge'
|
|
6
6
|
import { Button } from '@/components/ui/Button'
|
|
@@ -9,6 +9,7 @@ import { Skeleton } from '@/components/ui/Skeleton'
|
|
|
9
9
|
import { StatCard } from '@/components/ui/StatCard'
|
|
10
10
|
|
|
11
11
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
12
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
12
13
|
|
|
13
14
|
function DataRow({ label, value, loading }: { label: string; value?: string; loading: boolean }) {
|
|
14
15
|
return (
|
|
@@ -22,14 +23,15 @@ function DataRow({ label, value, loading }: { label: string; value?: string; loa
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
export default function Home() {
|
|
25
|
-
const { data: name, isLoading: l1 } =
|
|
26
|
-
const { data: symbol, isLoading: l2 } =
|
|
27
|
-
const { data: decimals, isLoading: l3 } =
|
|
28
|
-
const { data: totalSupply, isLoading: l4 } =
|
|
26
|
+
const { data: name, isLoading: l1 } = useRead<string>(USDC.name())
|
|
27
|
+
const { data: symbol, isLoading: l2 } = useRead<string>(USDC.symbol())
|
|
28
|
+
const { data: decimals, isLoading: l3 } = useRead<bigint>(USDC.decimals())
|
|
29
|
+
const { data: totalSupply, isLoading: l4 } = useRead<bigint>(USDC.totalSupply())
|
|
30
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
29
31
|
|
|
30
32
|
const formatted =
|
|
31
33
|
totalSupply !== undefined && decimals !== undefined
|
|
32
|
-
? (Number(totalSupply
|
|
34
|
+
? (Number(totalSupply) / 10 ** Number(decimals))
|
|
33
35
|
.toLocaleString(undefined, { maximumFractionDigits: 2 })
|
|
34
36
|
: undefined
|
|
35
37
|
|
|
@@ -44,7 +46,7 @@ export default function Home() {
|
|
|
44
46
|
<div className="flex items-center gap-2.5">
|
|
45
47
|
<div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
|
|
46
48
|
<span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
|
|
47
|
-
{{project-name}}
|
|
49
|
+
{'{{project-name}}'}
|
|
48
50
|
</span>
|
|
49
51
|
</div>
|
|
50
52
|
<div className="flex items-center gap-3">
|
|
@@ -62,7 +64,7 @@ export default function Home() {
|
|
|
62
64
|
{/* ── Hero ───────────────────────────────────────── */}
|
|
63
65
|
<div className="mb-10">
|
|
64
66
|
<Badge variant="outline" className="mb-5">Awarizon Web3 SDK · Next.js</Badge>
|
|
65
|
-
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
|
|
67
|
+
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{'{{ProjectName}}'}</h1>
|
|
66
68
|
<p className="text-zinc-400 text-base max-w-lg leading-relaxed">
|
|
67
69
|
Live on-chain reads from Base — no backend required. Built with{' '}
|
|
68
70
|
<code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
|
|
@@ -72,29 +74,32 @@ export default function Home() {
|
|
|
72
74
|
{/* ── Data grid ──────────────────────────────────── */}
|
|
73
75
|
<div className="grid md:grid-cols-3 gap-4 mb-4">
|
|
74
76
|
|
|
75
|
-
{/* Contract reader — spans 2 cols */}
|
|
76
77
|
<Card className="md:col-span-2">
|
|
77
78
|
<div className="flex items-start justify-between mb-4">
|
|
78
79
|
<div>
|
|
79
80
|
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
|
|
80
81
|
Contract · Live Read
|
|
81
82
|
</p>
|
|
82
|
-
<code className="font-mono text-xs text-zinc-500">
|
|
83
|
-
0x8335…2913 · Base
|
|
84
|
-
</code>
|
|
83
|
+
<code className="font-mono text-xs text-zinc-500">0x8335…2913 · Base</code>
|
|
85
84
|
</div>
|
|
86
85
|
<Badge variant={synced ? 'success' : 'loading'}>
|
|
87
86
|
{synced ? 'Synced' : 'Fetching…'}
|
|
88
87
|
</Badge>
|
|
89
88
|
</div>
|
|
90
|
-
<DataRow label="name()" value={name
|
|
91
|
-
<DataRow label="symbol()" value={symbol
|
|
89
|
+
<DataRow label="name()" value={name} loading={l1} />
|
|
90
|
+
<DataRow label="symbol()" value={symbol} loading={l2} />
|
|
92
91
|
<DataRow label="decimals()" value={String(decimals ?? '')} loading={l3} />
|
|
93
92
|
<DataRow label="totalSupply()" value={formatted} loading={l4} />
|
|
94
93
|
</Card>
|
|
95
94
|
|
|
96
|
-
{/* Stat column */}
|
|
97
95
|
<div className="flex flex-col gap-4">
|
|
96
|
+
<StatCard
|
|
97
|
+
label="ETH Price"
|
|
98
|
+
value={ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : undefined}
|
|
99
|
+
loading={lp}
|
|
100
|
+
sub="via usePrice"
|
|
101
|
+
className="flex-1"
|
|
102
|
+
/>
|
|
98
103
|
<StatCard
|
|
99
104
|
label="Total Supply"
|
|
100
105
|
value={formatted}
|
|
@@ -102,21 +107,14 @@ export default function Home() {
|
|
|
102
107
|
sub="USDC · formatted"
|
|
103
108
|
className="flex-1"
|
|
104
109
|
/>
|
|
105
|
-
<StatCard
|
|
106
|
-
label="Token"
|
|
107
|
-
value={symbol as string}
|
|
108
|
-
loading={l2}
|
|
109
|
-
sub="Base mainnet"
|
|
110
|
-
className="flex-1"
|
|
111
|
-
/>
|
|
112
110
|
</div>
|
|
113
111
|
</div>
|
|
114
112
|
|
|
115
113
|
{/* ── Network info ────────────────────────────────── */}
|
|
116
114
|
<div className="grid sm:grid-cols-3 gap-4 mb-4">
|
|
117
115
|
{[
|
|
118
|
-
{ label: 'Network', value: 'Base Mainnet'
|
|
119
|
-
{ label: 'Chain ID', value: '8453'
|
|
116
|
+
{ label: 'Network', value: 'Base Mainnet' },
|
|
117
|
+
{ label: 'Chain ID', value: '8453' },
|
|
120
118
|
{ label: 'SDK', value: '@awarizon/react' },
|
|
121
119
|
].map(({ label, value }) => (
|
|
122
120
|
<div
|
|
@@ -131,16 +129,14 @@ export default function Home() {
|
|
|
131
129
|
|
|
132
130
|
{/* ── Next steps ──────────────────────────────────── */}
|
|
133
131
|
<Card>
|
|
134
|
-
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">
|
|
135
|
-
Next Steps
|
|
136
|
-
</p>
|
|
132
|
+
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-4">Next Steps</p>
|
|
137
133
|
<ul className="space-y-3 mb-6">
|
|
138
134
|
{[
|
|
139
135
|
['01', 'Replace USDC_BASE with your contract address'],
|
|
140
136
|
['02', 'Swap ERC20_ABI for your contract ABI'],
|
|
141
|
-
['03', 'Change chain="base" in
|
|
142
|
-
['04', 'Use
|
|
143
|
-
['05', '
|
|
137
|
+
['03', 'Change chain="base" in components/Providers.tsx to your target network'],
|
|
138
|
+
['04', 'Use useWrite(USDC.transfer) to send transactions'],
|
|
139
|
+
['05', 'Use usePrice("ETH") or usePrices(["ETH","BTC"]) for live token prices'],
|
|
144
140
|
].map(([n, s]) => (
|
|
145
141
|
<li key={n} className="flex items-start gap-3">
|
|
146
142
|
<span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
|
|
@@ -149,17 +145,8 @@ export default function Home() {
|
|
|
149
145
|
))}
|
|
150
146
|
</ul>
|
|
151
147
|
<div className="flex flex-wrap gap-2">
|
|
152
|
-
<Button href="https://awarizon.com/docs" target="_blank" rel="noreferrer">
|
|
153
|
-
|
|
154
|
-
</Button>
|
|
155
|
-
<Button
|
|
156
|
-
href="https://awarizon.com/dashboard"
|
|
157
|
-
target="_blank"
|
|
158
|
-
rel="noreferrer"
|
|
159
|
-
variant="secondary"
|
|
160
|
-
>
|
|
161
|
-
Dashboard
|
|
162
|
-
</Button>
|
|
148
|
+
<Button href="https://awarizon.com/docs" target="_blank" rel="noreferrer">Read the docs →</Button>
|
|
149
|
+
<Button href="https://awarizon.com/dashboard" target="_blank" rel="noreferrer" variant="secondary">Dashboard</Button>
|
|
163
150
|
</div>
|
|
164
151
|
</Card>
|
|
165
152
|
</main>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { contract, useRead, usePrice, ConnectButton } from '@awarizon/react'
|
|
4
4
|
import { ERC20_ABI } from '@awarizon/web3'
|
|
5
5
|
import { Badge } from '@/components/ui/Badge'
|
|
6
6
|
import { Button } from '@/components/ui/Button'
|
|
@@ -9,6 +9,7 @@ import { Skeleton } from '@/components/ui/Skeleton'
|
|
|
9
9
|
import { StatCard } from '@/components/ui/StatCard'
|
|
10
10
|
|
|
11
11
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
12
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
12
13
|
|
|
13
14
|
function DataRow({ label, value, loading }) {
|
|
14
15
|
return (
|
|
@@ -22,10 +23,11 @@ function DataRow({ label, value, loading }) {
|
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
export default function Home() {
|
|
25
|
-
const { data: name, isLoading: l1 } =
|
|
26
|
-
const { data: symbol, isLoading: l2 } =
|
|
27
|
-
const { data: decimals, isLoading: l3 } =
|
|
28
|
-
const { data: totalSupply, isLoading: l4 } =
|
|
26
|
+
const { data: name, isLoading: l1 } = useRead(USDC.name())
|
|
27
|
+
const { data: symbol, isLoading: l2 } = useRead(USDC.symbol())
|
|
28
|
+
const { data: decimals, isLoading: l3 } = useRead(USDC.decimals())
|
|
29
|
+
const { data: totalSupply, isLoading: l4 } = useRead(USDC.totalSupply())
|
|
30
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
29
31
|
|
|
30
32
|
const formatted =
|
|
31
33
|
totalSupply !== undefined && decimals !== undefined
|
|
@@ -44,7 +46,7 @@ export default function Home() {
|
|
|
44
46
|
<div className="flex items-center gap-2.5">
|
|
45
47
|
<div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
|
|
46
48
|
<span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
|
|
47
|
-
{{project-name}}
|
|
49
|
+
{'{{project-name}}'}
|
|
48
50
|
</span>
|
|
49
51
|
</div>
|
|
50
52
|
<div className="flex items-center gap-3">
|
|
@@ -62,7 +64,7 @@ export default function Home() {
|
|
|
62
64
|
{/* ── Hero ───────────────────────────────────────── */}
|
|
63
65
|
<div className="mb-10">
|
|
64
66
|
<Badge variant="outline" className="mb-5">Awarizon Web3 SDK · Next.js</Badge>
|
|
65
|
-
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
|
|
67
|
+
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{'{{ProjectName}}'}</h1>
|
|
66
68
|
<p className="text-zinc-400 text-base max-w-lg leading-relaxed">
|
|
67
69
|
Live on-chain reads from Base — no backend required. Built with{' '}
|
|
68
70
|
<code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
|
|
@@ -75,38 +77,37 @@ export default function Home() {
|
|
|
75
77
|
<Card className="md:col-span-2">
|
|
76
78
|
<div className="flex items-start justify-between mb-4">
|
|
77
79
|
<div>
|
|
78
|
-
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
|
|
79
|
-
Contract · Live Read
|
|
80
|
-
</p>
|
|
80
|
+
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">Contract · Live Read</p>
|
|
81
81
|
<code className="font-mono text-xs text-zinc-500">0x8335…2913 · Base</code>
|
|
82
82
|
</div>
|
|
83
|
-
<Badge variant={synced ? 'success' : 'loading'}>
|
|
84
|
-
{synced ? 'Synced' : 'Fetching…'}
|
|
85
|
-
</Badge>
|
|
83
|
+
<Badge variant={synced ? 'success' : 'loading'}>{synced ? 'Synced' : 'Fetching…'}</Badge>
|
|
86
84
|
</div>
|
|
87
|
-
<DataRow label="name()" value={name}
|
|
88
|
-
<DataRow label="symbol()" value={symbol}
|
|
89
|
-
<DataRow label="decimals()" value={String(decimals
|
|
90
|
-
<DataRow label="totalSupply()" value={formatted}
|
|
85
|
+
<DataRow label="name()" value={name} loading={l1} />
|
|
86
|
+
<DataRow label="symbol()" value={symbol} loading={l2} />
|
|
87
|
+
<DataRow label="decimals()" value={decimals != null ? String(decimals) : undefined} loading={l3} />
|
|
88
|
+
<DataRow label="totalSupply()" value={formatted} loading={l4} />
|
|
91
89
|
</Card>
|
|
92
90
|
|
|
93
91
|
<div className="flex flex-col gap-4">
|
|
94
|
-
<StatCard
|
|
95
|
-
|
|
92
|
+
<StatCard
|
|
93
|
+
label="ETH Price"
|
|
94
|
+
value={ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : undefined}
|
|
95
|
+
loading={lp}
|
|
96
|
+
sub="via usePrice"
|
|
97
|
+
className="flex-1"
|
|
98
|
+
/>
|
|
99
|
+
<StatCard label="Total Supply" value={formatted} loading={l4} sub="USDC · formatted" className="flex-1" />
|
|
96
100
|
</div>
|
|
97
101
|
</div>
|
|
98
102
|
|
|
99
|
-
{/* ── Network info
|
|
103
|
+
{/* ── Network info ────────────────────────────────── */}
|
|
100
104
|
<div className="grid sm:grid-cols-3 gap-4 mb-4">
|
|
101
105
|
{[
|
|
102
106
|
{ label: 'Network', value: 'Base Mainnet' },
|
|
103
107
|
{ label: 'Chain ID', value: '8453' },
|
|
104
108
|
{ label: 'SDK', value: '@awarizon/react' },
|
|
105
109
|
].map(({ label, value }) => (
|
|
106
|
-
<div
|
|
107
|
-
key={label}
|
|
108
|
-
className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
|
|
109
|
-
>
|
|
110
|
+
<div key={label} className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between">
|
|
110
111
|
<span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
|
|
111
112
|
<code className="font-mono text-xs text-zinc-400">{value}</code>
|
|
112
113
|
</div>
|
|
@@ -120,9 +121,9 @@ export default function Home() {
|
|
|
120
121
|
{[
|
|
121
122
|
['01', 'Replace USDC_BASE with your contract address'],
|
|
122
123
|
['02', 'Swap ERC20_ABI for your contract ABI'],
|
|
123
|
-
['03', 'Change chain="base" in
|
|
124
|
-
['04', 'Use
|
|
125
|
-
['05', '
|
|
124
|
+
['03', 'Change chain="base" in components/Providers.jsx to your target network'],
|
|
125
|
+
['04', 'Use useWrite(USDC.transfer) to send transactions'],
|
|
126
|
+
['05', 'Use usePrice("ETH") or usePrices(["ETH","BTC"]) for live token prices'],
|
|
126
127
|
].map(([n, s]) => (
|
|
127
128
|
<li key={n} className="flex items-start gap-3">
|
|
128
129
|
<span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { contract, useRead, usePrice, ConnectButton } from '@awarizon/react'
|
|
2
2
|
import { ERC20_ABI } from '@awarizon/web3'
|
|
3
3
|
import { Badge } from './components/ui/Badge'
|
|
4
4
|
import { Button } from './components/ui/Button'
|
|
@@ -7,6 +7,7 @@ import { Skeleton } from './components/ui/Skeleton'
|
|
|
7
7
|
import { StatCard } from './components/ui/StatCard'
|
|
8
8
|
|
|
9
9
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
10
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
10
11
|
|
|
11
12
|
function DataRow({ label, value, loading }: { label: string; value?: string; loading: boolean }) {
|
|
12
13
|
return (
|
|
@@ -20,14 +21,15 @@ function DataRow({ label, value, loading }: { label: string; value?: string; loa
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export default function App() {
|
|
23
|
-
const { data: name, isLoading: l1 } =
|
|
24
|
-
const { data: symbol, isLoading: l2 } =
|
|
25
|
-
const { data: decimals, isLoading: l3 } =
|
|
26
|
-
const { data: totalSupply, isLoading: l4 } =
|
|
24
|
+
const { data: name, isLoading: l1 } = useRead<string>(USDC.name())
|
|
25
|
+
const { data: symbol, isLoading: l2 } = useRead<string>(USDC.symbol())
|
|
26
|
+
const { data: decimals, isLoading: l3 } = useRead<bigint>(USDC.decimals())
|
|
27
|
+
const { data: totalSupply, isLoading: l4 } = useRead<bigint>(USDC.totalSupply())
|
|
28
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
27
29
|
|
|
28
30
|
const formatted =
|
|
29
31
|
totalSupply !== undefined && decimals !== undefined
|
|
30
|
-
? (Number(totalSupply
|
|
32
|
+
? (Number(totalSupply) / 10 ** Number(decimals))
|
|
31
33
|
.toLocaleString(undefined, { maximumFractionDigits: 2 })
|
|
32
34
|
: undefined
|
|
33
35
|
|
|
@@ -42,7 +44,7 @@ export default function App() {
|
|
|
42
44
|
<div className="flex items-center gap-2.5">
|
|
43
45
|
<div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
|
|
44
46
|
<span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
|
|
45
|
-
{{project-name}}
|
|
47
|
+
{'{{project-name}}'}
|
|
46
48
|
</span>
|
|
47
49
|
</div>
|
|
48
50
|
<div className="flex items-center gap-3">
|
|
@@ -60,7 +62,7 @@ export default function App() {
|
|
|
60
62
|
{/* ── Hero ───────────────────────────────────────── */}
|
|
61
63
|
<div className="mb-10">
|
|
62
64
|
<Badge variant="outline" className="mb-5">Awarizon Web3 SDK · React + Vite</Badge>
|
|
63
|
-
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
|
|
65
|
+
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{'{{ProjectName}}'}</h1>
|
|
64
66
|
<p className="text-zinc-400 text-base max-w-lg leading-relaxed">
|
|
65
67
|
Live on-chain reads from Base — no backend required. Built with{' '}
|
|
66
68
|
<code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
|
|
@@ -70,7 +72,6 @@ export default function App() {
|
|
|
70
72
|
{/* ── Data grid ──────────────────────────────────── */}
|
|
71
73
|
<div className="grid md:grid-cols-3 gap-4 mb-4">
|
|
72
74
|
|
|
73
|
-
{/* Contract reader — spans 2 cols */}
|
|
74
75
|
<Card className="md:col-span-2">
|
|
75
76
|
<div className="flex items-start justify-between mb-4">
|
|
76
77
|
<div>
|
|
@@ -85,14 +86,20 @@ export default function App() {
|
|
|
85
86
|
{synced ? 'Synced' : 'Fetching…'}
|
|
86
87
|
</Badge>
|
|
87
88
|
</div>
|
|
88
|
-
<DataRow label="name()" value={name
|
|
89
|
-
<DataRow label="symbol()" value={symbol
|
|
89
|
+
<DataRow label="name()" value={name} loading={l1} />
|
|
90
|
+
<DataRow label="symbol()" value={symbol} loading={l2} />
|
|
90
91
|
<DataRow label="decimals()" value={String(decimals ?? '')} loading={l3} />
|
|
91
92
|
<DataRow label="totalSupply()" value={formatted} loading={l4} />
|
|
92
93
|
</Card>
|
|
93
94
|
|
|
94
|
-
{/* Stat column */}
|
|
95
95
|
<div className="flex flex-col gap-4">
|
|
96
|
+
<StatCard
|
|
97
|
+
label="ETH Price"
|
|
98
|
+
value={ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : undefined}
|
|
99
|
+
loading={lp}
|
|
100
|
+
sub="via usePrice"
|
|
101
|
+
className="flex-1"
|
|
102
|
+
/>
|
|
96
103
|
<StatCard
|
|
97
104
|
label="Total Supply"
|
|
98
105
|
value={formatted}
|
|
@@ -100,22 +107,15 @@ export default function App() {
|
|
|
100
107
|
sub="USDC · formatted"
|
|
101
108
|
className="flex-1"
|
|
102
109
|
/>
|
|
103
|
-
<StatCard
|
|
104
|
-
label="Token"
|
|
105
|
-
value={symbol as string}
|
|
106
|
-
loading={l2}
|
|
107
|
-
sub="Base mainnet"
|
|
108
|
-
className="flex-1"
|
|
109
|
-
/>
|
|
110
110
|
</div>
|
|
111
111
|
</div>
|
|
112
112
|
|
|
113
113
|
{/* ── Network info ────────────────────────────────── */}
|
|
114
114
|
<div className="grid sm:grid-cols-3 gap-4 mb-4">
|
|
115
115
|
{[
|
|
116
|
-
{ label: 'Network', value: 'Base Mainnet'
|
|
117
|
-
{ label: 'Chain ID', value: '8453'
|
|
118
|
-
{ label: 'SDK', value: '@awarizon/react'
|
|
116
|
+
{ label: 'Network', value: 'Base Mainnet' },
|
|
117
|
+
{ label: 'Chain ID', value: '8453' },
|
|
118
|
+
{ label: 'SDK', value: '@awarizon/react' },
|
|
119
119
|
].map(({ label, value }) => (
|
|
120
120
|
<div
|
|
121
121
|
key={label}
|
|
@@ -137,8 +137,8 @@ export default function App() {
|
|
|
137
137
|
['01', 'Replace USDC_BASE with your contract address'],
|
|
138
138
|
['02', 'Swap ERC20_ABI for your contract ABI'],
|
|
139
139
|
['03', 'Change chain="base" in src/main.tsx to your target network'],
|
|
140
|
-
['04', 'Use
|
|
141
|
-
['05', '
|
|
140
|
+
['04', 'Use useWrite(USDC.transfer) to send transactions'],
|
|
141
|
+
['05', 'Use usePrice("ETH") or usePrices(["ETH","BTC"]) for live token prices'],
|
|
142
142
|
].map(([n, s]) => (
|
|
143
143
|
<li key={n} className="flex items-start gap-3">
|
|
144
144
|
<span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { contract, useRead, usePrice, ConnectButton } from '@awarizon/react'
|
|
2
2
|
import { ERC20_ABI } from '@awarizon/web3'
|
|
3
3
|
import { Badge } from './components/ui/Badge'
|
|
4
4
|
import { Button } from './components/ui/Button'
|
|
@@ -7,6 +7,7 @@ import { Skeleton } from './components/ui/Skeleton'
|
|
|
7
7
|
import { StatCard } from './components/ui/StatCard'
|
|
8
8
|
|
|
9
9
|
const USDC_BASE = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
|
|
10
|
+
const USDC = contract(USDC_BASE, ERC20_ABI)
|
|
10
11
|
|
|
11
12
|
function DataRow({ label, value, loading }) {
|
|
12
13
|
return (
|
|
@@ -20,10 +21,11 @@ function DataRow({ label, value, loading }) {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
export default function App() {
|
|
23
|
-
const { data: name, isLoading: l1 } =
|
|
24
|
-
const { data: symbol, isLoading: l2 } =
|
|
25
|
-
const { data: decimals, isLoading: l3 } =
|
|
26
|
-
const { data: totalSupply, isLoading: l4 } =
|
|
24
|
+
const { data: name, isLoading: l1 } = useRead(USDC.name())
|
|
25
|
+
const { data: symbol, isLoading: l2 } = useRead(USDC.symbol())
|
|
26
|
+
const { data: decimals, isLoading: l3 } = useRead(USDC.decimals())
|
|
27
|
+
const { data: totalSupply, isLoading: l4 } = useRead(USDC.totalSupply())
|
|
28
|
+
const { price: ethPrice, isLoading: lp } = usePrice('ETH')
|
|
27
29
|
|
|
28
30
|
const formatted =
|
|
29
31
|
totalSupply !== undefined && decimals !== undefined
|
|
@@ -42,7 +44,7 @@ export default function App() {
|
|
|
42
44
|
<div className="flex items-center gap-2.5">
|
|
43
45
|
<div className="w-5 h-5 rounded-[4px] bg-yellow-400" />
|
|
44
46
|
<span className="font-mono text-[11px] tracking-[0.2em] text-zinc-400 uppercase">
|
|
45
|
-
{{project-name}}
|
|
47
|
+
{'{{project-name}}'}
|
|
46
48
|
</span>
|
|
47
49
|
</div>
|
|
48
50
|
<div className="flex items-center gap-3">
|
|
@@ -60,7 +62,7 @@ export default function App() {
|
|
|
60
62
|
{/* ── Hero ───────────────────────────────────────── */}
|
|
61
63
|
<div className="mb-10">
|
|
62
64
|
<Badge variant="outline" className="mb-5">Awarizon Web3 SDK · React + Vite</Badge>
|
|
63
|
-
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{{ProjectName}}</h1>
|
|
65
|
+
<h1 className="text-4xl font-bold tracking-tight text-white mb-3">{'{{ProjectName}}'}</h1>
|
|
64
66
|
<p className="text-zinc-400 text-base max-w-lg leading-relaxed">
|
|
65
67
|
Live on-chain reads from Base — no backend required. Built with{' '}
|
|
66
68
|
<code className="font-mono text-[11px] text-yellow-400/80">@awarizon/react</code>.
|
|
@@ -73,38 +75,37 @@ export default function App() {
|
|
|
73
75
|
<Card className="md:col-span-2">
|
|
74
76
|
<div className="flex items-start justify-between mb-4">
|
|
75
77
|
<div>
|
|
76
|
-
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">
|
|
77
|
-
Contract · Live Read
|
|
78
|
-
</p>
|
|
78
|
+
<p className="font-mono text-[9px] tracking-widest text-zinc-600 uppercase mb-1.5">Contract · Live Read</p>
|
|
79
79
|
<code className="font-mono text-xs text-zinc-500">0x8335…2913 · Base</code>
|
|
80
80
|
</div>
|
|
81
|
-
<Badge variant={synced ? 'success' : 'loading'}>
|
|
82
|
-
{synced ? 'Synced' : 'Fetching…'}
|
|
83
|
-
</Badge>
|
|
81
|
+
<Badge variant={synced ? 'success' : 'loading'}>{synced ? 'Synced' : 'Fetching…'}</Badge>
|
|
84
82
|
</div>
|
|
85
|
-
<DataRow label="name()" value={name}
|
|
86
|
-
<DataRow label="symbol()" value={symbol}
|
|
87
|
-
<DataRow label="decimals()" value={String(decimals
|
|
88
|
-
<DataRow label="totalSupply()" value={formatted}
|
|
83
|
+
<DataRow label="name()" value={name} loading={l1} />
|
|
84
|
+
<DataRow label="symbol()" value={symbol} loading={l2} />
|
|
85
|
+
<DataRow label="decimals()" value={decimals != null ? String(decimals) : undefined} loading={l3} />
|
|
86
|
+
<DataRow label="totalSupply()" value={formatted} loading={l4} />
|
|
89
87
|
</Card>
|
|
90
88
|
|
|
91
89
|
<div className="flex flex-col gap-4">
|
|
90
|
+
<StatCard
|
|
91
|
+
label="ETH Price"
|
|
92
|
+
value={ethPrice != null ? `$${ethPrice.toLocaleString(undefined, { maximumFractionDigits: 2 })}` : undefined}
|
|
93
|
+
loading={lp}
|
|
94
|
+
sub="via usePrice"
|
|
95
|
+
className="flex-1"
|
|
96
|
+
/>
|
|
92
97
|
<StatCard label="Total Supply" value={formatted} loading={l4} sub="USDC · formatted" className="flex-1" />
|
|
93
|
-
<StatCard label="Token" value={symbol} loading={l2} sub="Base mainnet" className="flex-1" />
|
|
94
98
|
</div>
|
|
95
99
|
</div>
|
|
96
100
|
|
|
97
|
-
{/* ── Network info
|
|
101
|
+
{/* ── Network info ────────────────────────────────── */}
|
|
98
102
|
<div className="grid sm:grid-cols-3 gap-4 mb-4">
|
|
99
103
|
{[
|
|
100
104
|
{ label: 'Network', value: 'Base Mainnet' },
|
|
101
105
|
{ label: 'Chain ID', value: '8453' },
|
|
102
106
|
{ label: 'SDK', value: '@awarizon/react' },
|
|
103
107
|
].map(({ label, value }) => (
|
|
104
|
-
<div
|
|
105
|
-
key={label}
|
|
106
|
-
className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between"
|
|
107
|
-
>
|
|
108
|
+
<div key={label} className="bg-zinc-900/50 border border-zinc-800/40 rounded-xl px-5 py-4 flex items-center justify-between">
|
|
108
109
|
<span className="font-mono text-[10px] text-zinc-600 uppercase tracking-widest">{label}</span>
|
|
109
110
|
<code className="font-mono text-xs text-zinc-400">{value}</code>
|
|
110
111
|
</div>
|
|
@@ -119,8 +120,8 @@ export default function App() {
|
|
|
119
120
|
['01', 'Replace USDC_BASE with your contract address'],
|
|
120
121
|
['02', 'Swap ERC20_ABI for your contract ABI'],
|
|
121
122
|
['03', 'Change chain="base" in src/main.jsx to your target network'],
|
|
122
|
-
['04', 'Use
|
|
123
|
-
['05', '
|
|
123
|
+
['04', 'Use useWrite(USDC.transfer) to send transactions'],
|
|
124
|
+
['05', 'Use usePrice("ETH") or usePrices(["ETH","BTC"]) for live token prices'],
|
|
124
125
|
].map(([n, s]) => (
|
|
125
126
|
<li key={n} className="flex items-start gap-3">
|
|
126
127
|
<span className="font-mono text-[10px] text-yellow-400/50 mt-0.5 shrink-0 select-none">{n}</span>
|