create-awarizon-app 1.0.11 → 1.0.12
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/dist/index.js +0 -0
- package/package.json +8 -8
- package/templates/expo/app/(tabs)/index.tsx +10 -11
- package/templates/expo/app/(tabs)/wallet.tsx +69 -45
- package/templates/expo/package.json +2 -2
- package/templates/expo-js/app/(tabs)/index.jsx +10 -11
- package/templates/expo-js/app/(tabs)/wallet.jsx +69 -45
- package/templates/expo-js/package.json +2 -2
- package/templates/nextjs/app/page.tsx +9 -12
- package/templates/nextjs/app/wallet/page.tsx +66 -37
- package/templates/nextjs/components/Header.tsx +7 -3
- package/templates/nextjs/package.json +2 -2
- package/templates/nextjs-js/app/page.jsx +9 -12
- package/templates/nextjs-js/app/wallet/page.jsx +66 -37
- package/templates/nextjs-js/components/Header.jsx +7 -3
- package/templates/nextjs-js/package.json +2 -2
- package/templates/react/package.json +2 -2
- package/templates/react/src/App.tsx +14 -14
- package/templates/react/src/pages/WalletPage.tsx +66 -37
- package/templates/react-js/package.json +2 -2
- package/templates/react-js/src/App.jsx +14 -14
- package/templates/react-js/src/pages/WalletPage.jsx +66 -37
package/dist/index.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-awarizon-app",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "Scaffold a new project with the Awarizon Web3 SDK",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"awarizon",
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
"dist",
|
|
21
21
|
"templates"
|
|
22
22
|
],
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "tsup",
|
|
25
|
+
"dev": "tsup --watch",
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"clean": "rimraf dist"
|
|
28
|
+
},
|
|
23
29
|
"dependencies": {
|
|
24
30
|
"@clack/prompts": "^0.9.1",
|
|
25
31
|
"chalk": "^5.3.0",
|
|
@@ -37,11 +43,5 @@
|
|
|
37
43
|
},
|
|
38
44
|
"engines": {
|
|
39
45
|
"node": ">=18"
|
|
40
|
-
},
|
|
41
|
-
"scripts": {
|
|
42
|
-
"build": "tsup",
|
|
43
|
-
"dev": "tsup --watch",
|
|
44
|
-
"test": "vitest run",
|
|
45
|
-
"clean": "rimraf dist"
|
|
46
46
|
}
|
|
47
|
-
}
|
|
47
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
|
|
2
|
-
import { usePrices } from '@awarizon/react-native'
|
|
2
|
+
import { usePrices, TokenIcon } from '@awarizon/react-native'
|
|
3
3
|
|
|
4
4
|
const TOKENS = [
|
|
5
|
-
{ symbol: 'ETH',
|
|
6
|
-
{ symbol: 'BTC',
|
|
7
|
-
{ symbol: 'USDC',
|
|
8
|
-
{ symbol: 'BNB',
|
|
9
|
-
{ symbol: '
|
|
5
|
+
{ symbol: 'ETH', name: 'Ethereum' },
|
|
6
|
+
{ symbol: 'BTC', name: 'Bitcoin' },
|
|
7
|
+
{ symbol: 'USDC', name: 'USD Coin' },
|
|
8
|
+
{ symbol: 'BNB', name: 'BNB' },
|
|
9
|
+
{ symbol: 'HYPE', name: 'Hyperliquid' },
|
|
10
10
|
]
|
|
11
11
|
|
|
12
12
|
export default function HomeScreen() {
|
|
@@ -15,12 +15,12 @@ export default function HomeScreen() {
|
|
|
15
15
|
return (
|
|
16
16
|
<ScrollView style={s.bg} contentContainerStyle={s.container}>
|
|
17
17
|
<View style={s.grid}>
|
|
18
|
-
{TOKENS.map(({ symbol, name
|
|
18
|
+
{TOKENS.map(({ symbol, name }) => {
|
|
19
19
|
const price = prices[symbol]?.price
|
|
20
20
|
return (
|
|
21
21
|
<View key={symbol} style={s.card}>
|
|
22
|
-
<View style={
|
|
23
|
-
<
|
|
22
|
+
<View style={s.iconWrap}>
|
|
23
|
+
<TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
|
|
24
24
|
</View>
|
|
25
25
|
<Text style={s.symbol}>{symbol}</Text>
|
|
26
26
|
<Text style={s.name}>{name}</Text>
|
|
@@ -46,8 +46,7 @@ const s = StyleSheet.create({
|
|
|
46
46
|
container: { padding: 16, paddingBottom: 40 },
|
|
47
47
|
grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
|
|
48
48
|
card: { width: '47%', backgroundColor: '#111827', borderWidth: 1, borderColor: '#1f2937', borderRadius: 16, padding: 16 },
|
|
49
|
-
|
|
50
|
-
iconText: { fontSize: 10, fontWeight: '700', letterSpacing: 0.5 },
|
|
49
|
+
iconWrap: { marginBottom: 12 },
|
|
51
50
|
symbol: { color: '#6b7280', fontSize: 11, fontWeight: '600', marginBottom: 2 },
|
|
52
51
|
name: { color: '#374151', fontSize: 11, marginBottom: 10 },
|
|
53
52
|
priceRow: { minHeight: 22, justifyContent: 'center' },
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react'
|
|
2
2
|
import { ScrollView, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
|
|
3
|
-
import { useSDK, useRNWallet, usePrices } from '@awarizon/react-native'
|
|
3
|
+
import { useSDK, useRNWallet, usePrices, TokenIcon } from '@awarizon/react-native'
|
|
4
4
|
import { formatEther } from 'viem'
|
|
5
5
|
import type { Address } from '@awarizon/web3'
|
|
6
6
|
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
? <ActivityIndicator size="small" color="#FFE500" />
|
|
15
|
-
: <Text style={s.value}>{value ?? '—'}</Text>}
|
|
16
|
-
</View>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
7
|
+
const ASSETS = [
|
|
8
|
+
{ symbol: 'ETH', name: 'Ethereum' },
|
|
9
|
+
{ symbol: 'BTC', name: 'Bitcoin' },
|
|
10
|
+
{ symbol: 'USDC', name: 'USD Coin' },
|
|
11
|
+
{ symbol: 'BNB', name: 'BNB' },
|
|
12
|
+
{ symbol: 'HYPE', name: 'Hyperliquid' },
|
|
13
|
+
]
|
|
19
14
|
|
|
20
15
|
export default function WalletScreen() {
|
|
21
16
|
const awarizon = useSDK()
|
|
22
17
|
const { address, isConnected, isLoading: walletLoading, create } = useRNWallet({ awarizon })
|
|
23
|
-
const { prices, isLoading: pricesLoading } = usePrices(
|
|
18
|
+
const { prices, isLoading: pricesLoading } = usePrices(ASSETS.map(a => a.symbol))
|
|
24
19
|
|
|
25
20
|
const [nativeBalance, setNativeBalance] = useState<string | null>(null)
|
|
26
21
|
const [balanceLoading, setBalanceLoading] = useState(false)
|
|
@@ -35,14 +30,10 @@ export default function WalletScreen() {
|
|
|
35
30
|
.finally(() => setBalanceLoading(false))
|
|
36
31
|
}, [address, awarizon])
|
|
37
32
|
|
|
38
|
-
const
|
|
39
|
-
prices[sym]?.price != null
|
|
40
|
-
? `$${prices[sym].price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
41
|
-
: '—'
|
|
42
|
-
|
|
33
|
+
const ethPrice = prices['ETH']?.price
|
|
43
34
|
const ethFiatValue =
|
|
44
|
-
nativeBalance != null &&
|
|
45
|
-
? `$${(parseFloat(nativeBalance) *
|
|
35
|
+
nativeBalance != null && ethPrice != null
|
|
36
|
+
? `$${(parseFloat(nativeBalance) * ethPrice).toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
46
37
|
: null
|
|
47
38
|
|
|
48
39
|
return (
|
|
@@ -73,33 +64,59 @@ export default function WalletScreen() {
|
|
|
73
64
|
<>
|
|
74
65
|
<View style={s.card}>
|
|
75
66
|
<Text style={s.cardTitle}>Account</Text>
|
|
76
|
-
<
|
|
67
|
+
<View style={s.dataRow}>
|
|
68
|
+
<Text style={s.dataLabel}>Address</Text>
|
|
69
|
+
<Text style={s.dataValue}>{address ? `${address.slice(0, 6)}…${address.slice(-4)}` : '—'}</Text>
|
|
70
|
+
</View>
|
|
77
71
|
</View>
|
|
78
72
|
|
|
79
73
|
<View style={s.card}>
|
|
80
74
|
<Text style={s.cardTitle}>Balance</Text>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
75
|
+
<View style={s.assetRow}>
|
|
76
|
+
<TokenIcon symbol="ETH" size={36} radiusFraction={0.5} />
|
|
77
|
+
<View style={s.assetMeta}>
|
|
78
|
+
<Text style={s.assetSymbol}>ETH</Text>
|
|
79
|
+
<Text style={s.assetName}>Ethereum</Text>
|
|
80
|
+
</View>
|
|
81
|
+
<View style={s.assetRight}>
|
|
82
|
+
{balanceLoading
|
|
83
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
84
|
+
: <>
|
|
85
|
+
<Text style={s.assetValue}>
|
|
86
|
+
{nativeBalance != null ? `${parseFloat(nativeBalance).toFixed(6)} ETH` : '—'}
|
|
87
|
+
</Text>
|
|
88
|
+
{ethFiatValue && <Text style={s.assetSub}>{ethFiatValue}</Text>}
|
|
89
|
+
</>
|
|
90
|
+
}
|
|
91
|
+
</View>
|
|
92
|
+
</View>
|
|
92
93
|
</View>
|
|
93
94
|
|
|
94
95
|
<View style={s.card}>
|
|
95
|
-
<Text style={s.cardTitle}>
|
|
96
|
-
{
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
96
|
+
<Text style={s.cardTitle}>Assets</Text>
|
|
97
|
+
{ASSETS.map(({ symbol, name }, i) => {
|
|
98
|
+
const price = prices[symbol]?.price
|
|
99
|
+
return (
|
|
100
|
+
<View key={symbol} style={[s.assetRow, i < ASSETS.length - 1 && s.assetBorder]}>
|
|
101
|
+
<TokenIcon symbol={symbol} size={36} radiusFraction={0.28} />
|
|
102
|
+
<View style={s.assetMeta}>
|
|
103
|
+
<Text style={s.assetSymbol}>{symbol}</Text>
|
|
104
|
+
<Text style={s.assetName}>{name}</Text>
|
|
105
|
+
</View>
|
|
106
|
+
<View style={s.assetRight}>
|
|
107
|
+
{pricesLoading
|
|
108
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
109
|
+
: <Text style={s.assetValue}>
|
|
110
|
+
{price != null
|
|
111
|
+
? `$${price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
112
|
+
: '—'}
|
|
113
|
+
</Text>
|
|
114
|
+
}
|
|
115
|
+
<Text style={s.assetSub}>USD</Text>
|
|
116
|
+
</View>
|
|
117
|
+
</View>
|
|
118
|
+
)
|
|
119
|
+
})}
|
|
103
120
|
</View>
|
|
104
121
|
</>
|
|
105
122
|
)}
|
|
@@ -116,10 +133,17 @@ const s = StyleSheet.create({
|
|
|
116
133
|
sub: { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
|
|
117
134
|
card: { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
|
|
118
135
|
cardTitle: { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
136
|
+
dataRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
|
|
137
|
+
dataLabel: { color: '#9ca3af', fontSize: 13 },
|
|
138
|
+
dataValue: { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
|
|
139
|
+
assetRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 },
|
|
140
|
+
assetBorder: { borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
|
|
141
|
+
assetMeta: { flex: 1 },
|
|
142
|
+
assetSymbol: { color: '#fff', fontSize: 14, fontWeight: '600' },
|
|
143
|
+
assetName: { color: '#6b7280', fontSize: 12, marginTop: 2 },
|
|
144
|
+
assetRight: { alignItems: 'flex-end' },
|
|
145
|
+
assetValue: { color: '#e5e7eb', fontSize: 14, fontWeight: '500' },
|
|
146
|
+
assetSub: { color: '#6b7280', fontSize: 11, marginTop: 2 },
|
|
123
147
|
button: { backgroundColor: '#FFE500', borderRadius: 8, paddingHorizontal: 16, paddingVertical: 10, alignItems: 'center', marginTop: 16 },
|
|
124
148
|
buttonDisabled: { opacity: 0.4 },
|
|
125
149
|
buttonText: { color: '#000', fontWeight: '700', fontSize: 13 },
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"web": "expo start --web"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@awarizon/react-native": "^1.2.
|
|
13
|
-
"@awarizon/web3": "^1.3.
|
|
12
|
+
"@awarizon/react-native": "^1.2.2",
|
|
13
|
+
"@awarizon/web3": "^1.3.7",
|
|
14
14
|
"@expo/vector-icons": "^14.0.2",
|
|
15
15
|
"expo": "~51.0.0",
|
|
16
16
|
"expo-constants": "~16.0.2",
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ScrollView, View, Text, StyleSheet, ActivityIndicator } from 'react-native'
|
|
2
|
-
import { usePrices } from '@awarizon/react-native'
|
|
2
|
+
import { usePrices, TokenIcon } from '@awarizon/react-native'
|
|
3
3
|
|
|
4
4
|
const TOKENS = [
|
|
5
|
-
{ symbol: 'ETH',
|
|
6
|
-
{ symbol: 'BTC',
|
|
7
|
-
{ symbol: 'USDC',
|
|
8
|
-
{ symbol: 'BNB',
|
|
9
|
-
{ symbol: '
|
|
5
|
+
{ symbol: 'ETH', name: 'Ethereum' },
|
|
6
|
+
{ symbol: 'BTC', name: 'Bitcoin' },
|
|
7
|
+
{ symbol: 'USDC', name: 'USD Coin' },
|
|
8
|
+
{ symbol: 'BNB', name: 'BNB' },
|
|
9
|
+
{ symbol: 'HYPE', name: 'Hyperliquid' },
|
|
10
10
|
]
|
|
11
11
|
|
|
12
12
|
export default function HomeScreen() {
|
|
@@ -15,12 +15,12 @@ export default function HomeScreen() {
|
|
|
15
15
|
return (
|
|
16
16
|
<ScrollView style={s.bg} contentContainerStyle={s.container}>
|
|
17
17
|
<View style={s.grid}>
|
|
18
|
-
{TOKENS.map(({ symbol, name
|
|
18
|
+
{TOKENS.map(({ symbol, name }) => {
|
|
19
19
|
const price = prices[symbol]?.price
|
|
20
20
|
return (
|
|
21
21
|
<View key={symbol} style={s.card}>
|
|
22
|
-
<View style={
|
|
23
|
-
<
|
|
22
|
+
<View style={s.iconWrap}>
|
|
23
|
+
<TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
|
|
24
24
|
</View>
|
|
25
25
|
<Text style={s.symbol}>{symbol}</Text>
|
|
26
26
|
<Text style={s.name}>{name}</Text>
|
|
@@ -46,8 +46,7 @@ const s = StyleSheet.create({
|
|
|
46
46
|
container: { padding: 16, paddingBottom: 40 },
|
|
47
47
|
grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
|
|
48
48
|
card: { width: '47%', backgroundColor: '#111827', borderWidth: 1, borderColor: '#1f2937', borderRadius: 16, padding: 16 },
|
|
49
|
-
|
|
50
|
-
iconText: { fontSize: 10, fontWeight: '700', letterSpacing: 0.5 },
|
|
49
|
+
iconWrap: { marginBottom: 12 },
|
|
51
50
|
symbol: { color: '#6b7280', fontSize: 11, fontWeight: '600', marginBottom: 2 },
|
|
52
51
|
name: { color: '#374151', fontSize: 11, marginBottom: 10 },
|
|
53
52
|
priceRow: { minHeight: 22, justifyContent: 'center' },
|
|
@@ -1,24 +1,19 @@
|
|
|
1
1
|
import { useState, useEffect } from 'react'
|
|
2
2
|
import { ScrollView, View, Text, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'
|
|
3
|
-
import { useSDK, useRNWallet, usePrices } from '@awarizon/react-native'
|
|
3
|
+
import { useSDK, useRNWallet, usePrices, TokenIcon } from '@awarizon/react-native'
|
|
4
4
|
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
? <ActivityIndicator size="small" color="#FFE500" />
|
|
13
|
-
: <Text style={s.value}>{value ?? '—'}</Text>}
|
|
14
|
-
</View>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
5
|
+
const ASSETS = [
|
|
6
|
+
{ symbol: 'ETH', name: 'Ethereum' },
|
|
7
|
+
{ symbol: 'BTC', name: 'Bitcoin' },
|
|
8
|
+
{ symbol: 'USDC', name: 'USD Coin' },
|
|
9
|
+
{ symbol: 'BNB', name: 'BNB' },
|
|
10
|
+
{ symbol: 'HYPE', name: 'Hyperliquid' },
|
|
11
|
+
]
|
|
17
12
|
|
|
18
13
|
export default function WalletScreen() {
|
|
19
14
|
const awarizon = useSDK()
|
|
20
15
|
const { address, isConnected, isLoading: walletLoading, create } = useRNWallet({ awarizon })
|
|
21
|
-
const { prices, isLoading: pricesLoading } = usePrices(
|
|
16
|
+
const { prices, isLoading: pricesLoading } = usePrices(ASSETS.map(a => a.symbol))
|
|
22
17
|
|
|
23
18
|
const [nativeBalance, setNativeBalance] = useState(null)
|
|
24
19
|
const [balanceLoading, setBalanceLoading] = useState(false)
|
|
@@ -36,14 +31,10 @@ export default function WalletScreen() {
|
|
|
36
31
|
.finally(() => setBalanceLoading(false))
|
|
37
32
|
}, [address, awarizon])
|
|
38
33
|
|
|
39
|
-
const
|
|
40
|
-
prices[sym]?.price != null
|
|
41
|
-
? `$${prices[sym].price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
42
|
-
: '—'
|
|
43
|
-
|
|
34
|
+
const ethPrice = prices['ETH']?.price
|
|
44
35
|
const ethFiatValue =
|
|
45
|
-
nativeBalance != null &&
|
|
46
|
-
? `$${(parseFloat(nativeBalance) *
|
|
36
|
+
nativeBalance != null && ethPrice != null
|
|
37
|
+
? `$${(parseFloat(nativeBalance) * ethPrice).toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
47
38
|
: null
|
|
48
39
|
|
|
49
40
|
return (
|
|
@@ -74,33 +65,59 @@ export default function WalletScreen() {
|
|
|
74
65
|
<>
|
|
75
66
|
<View style={s.card}>
|
|
76
67
|
<Text style={s.cardTitle}>Account</Text>
|
|
77
|
-
<
|
|
68
|
+
<View style={s.dataRow}>
|
|
69
|
+
<Text style={s.dataLabel}>Address</Text>
|
|
70
|
+
<Text style={s.dataValue}>{address ? `${address.slice(0, 6)}…${address.slice(-4)}` : '—'}</Text>
|
|
71
|
+
</View>
|
|
78
72
|
</View>
|
|
79
73
|
|
|
80
74
|
<View style={s.card}>
|
|
81
75
|
<Text style={s.cardTitle}>Balance</Text>
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
76
|
+
<View style={s.assetRow}>
|
|
77
|
+
<TokenIcon symbol="ETH" size={36} radiusFraction={0.5} />
|
|
78
|
+
<View style={s.assetMeta}>
|
|
79
|
+
<Text style={s.assetSymbol}>ETH</Text>
|
|
80
|
+
<Text style={s.assetName}>Ethereum</Text>
|
|
81
|
+
</View>
|
|
82
|
+
<View style={s.assetRight}>
|
|
83
|
+
{balanceLoading
|
|
84
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
85
|
+
: <>
|
|
86
|
+
<Text style={s.assetValue}>
|
|
87
|
+
{nativeBalance != null ? `${nativeBalance} ETH` : '—'}
|
|
88
|
+
</Text>
|
|
89
|
+
{ethFiatValue && <Text style={s.assetSub}>{ethFiatValue}</Text>}
|
|
90
|
+
</>
|
|
91
|
+
}
|
|
92
|
+
</View>
|
|
93
|
+
</View>
|
|
93
94
|
</View>
|
|
94
95
|
|
|
95
96
|
<View style={s.card}>
|
|
96
|
-
<Text style={s.cardTitle}>
|
|
97
|
-
{
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
97
|
+
<Text style={s.cardTitle}>Assets</Text>
|
|
98
|
+
{ASSETS.map(({ symbol, name }, i) => {
|
|
99
|
+
const price = prices[symbol]?.price
|
|
100
|
+
return (
|
|
101
|
+
<View key={symbol} style={[s.assetRow, i < ASSETS.length - 1 && s.assetBorder]}>
|
|
102
|
+
<TokenIcon symbol={symbol} size={36} radiusFraction={0.28} />
|
|
103
|
+
<View style={s.assetMeta}>
|
|
104
|
+
<Text style={s.assetSymbol}>{symbol}</Text>
|
|
105
|
+
<Text style={s.assetName}>{name}</Text>
|
|
106
|
+
</View>
|
|
107
|
+
<View style={s.assetRight}>
|
|
108
|
+
{pricesLoading
|
|
109
|
+
? <ActivityIndicator size="small" color="#FFE500" />
|
|
110
|
+
: <Text style={s.assetValue}>
|
|
111
|
+
{price != null
|
|
112
|
+
? `$${price.toLocaleString(undefined, { maximumFractionDigits: 2 })}`
|
|
113
|
+
: '—'}
|
|
114
|
+
</Text>
|
|
115
|
+
}
|
|
116
|
+
<Text style={s.assetSub}>USD</Text>
|
|
117
|
+
</View>
|
|
118
|
+
</View>
|
|
119
|
+
)
|
|
120
|
+
})}
|
|
104
121
|
</View>
|
|
105
122
|
</>
|
|
106
123
|
)}
|
|
@@ -117,10 +134,17 @@ const s = StyleSheet.create({
|
|
|
117
134
|
sub: { color: '#9ca3af', fontSize: 15, lineHeight: 22 },
|
|
118
135
|
card: { backgroundColor: '#111', borderWidth: 1, borderColor: '#1f1f1f', borderRadius: 12, padding: 16, marginBottom: 16 },
|
|
119
136
|
cardTitle: { color: '#fff', fontWeight: '700', fontSize: 15, marginBottom: 12 },
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
137
|
+
dataRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: 8 },
|
|
138
|
+
dataLabel: { color: '#9ca3af', fontSize: 13 },
|
|
139
|
+
dataValue: { color: '#e5e7eb', fontSize: 13, fontWeight: '500', fontFamily: 'monospace' },
|
|
140
|
+
assetRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 },
|
|
141
|
+
assetBorder: { borderBottomWidth: 1, borderBottomColor: '#1f1f1f' },
|
|
142
|
+
assetMeta: { flex: 1 },
|
|
143
|
+
assetSymbol: { color: '#fff', fontSize: 14, fontWeight: '600' },
|
|
144
|
+
assetName: { color: '#6b7280', fontSize: 12, marginTop: 2 },
|
|
145
|
+
assetRight: { alignItems: 'flex-end' },
|
|
146
|
+
assetValue: { color: '#e5e7eb', fontSize: 14, fontWeight: '500' },
|
|
147
|
+
assetSub: { color: '#6b7280', fontSize: 11, marginTop: 2 },
|
|
124
148
|
button: { backgroundColor: '#FFE500', borderRadius: 8, paddingHorizontal: 16, paddingVertical: 10, alignItems: 'center', marginTop: 16 },
|
|
125
149
|
buttonDisabled: { opacity: 0.4 },
|
|
126
150
|
buttonText: { color: '#000', fontWeight: '700', fontSize: 13 },
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"web": "expo start --web"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@awarizon/react-native": "^1.2.
|
|
13
|
-
"@awarizon/web3": "^1.3.
|
|
12
|
+
"@awarizon/react-native": "^1.2.2",
|
|
13
|
+
"@awarizon/web3": "^1.3.7",
|
|
14
14
|
"@expo/vector-icons": "^14.0.2",
|
|
15
15
|
"expo": "~51.0.0",
|
|
16
16
|
"expo-constants": "~16.0.2",
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use client'
|
|
2
2
|
|
|
3
|
-
import { usePrices } from '@awarizon/react'
|
|
3
|
+
import { usePrices, TokenIcon } from '@awarizon/react'
|
|
4
4
|
import { Skeleton } from '@/components/ui/Skeleton'
|
|
5
5
|
|
|
6
6
|
const TOKENS = [
|
|
7
|
-
{ symbol: 'ETH',
|
|
8
|
-
{ symbol: 'BTC',
|
|
9
|
-
{ symbol: 'USDC',
|
|
10
|
-
{ symbol: 'BNB',
|
|
11
|
-
{ symbol: '
|
|
7
|
+
{ symbol: 'ETH', name: 'Ethereum' },
|
|
8
|
+
{ symbol: 'BTC', name: 'Bitcoin' },
|
|
9
|
+
{ symbol: 'USDC', name: 'USD Coin' },
|
|
10
|
+
{ symbol: 'BNB', name: 'BNB' },
|
|
11
|
+
{ symbol: 'HYPE', name: 'Hyperliquid' },
|
|
12
12
|
]
|
|
13
13
|
|
|
14
14
|
export default function Home() {
|
|
@@ -17,7 +17,7 @@ export default function Home() {
|
|
|
17
17
|
return (
|
|
18
18
|
<main className="max-w-5xl mx-auto px-6 py-10">
|
|
19
19
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
20
|
-
{TOKENS.map(({ symbol, name
|
|
20
|
+
{TOKENS.map(({ symbol, name }) => {
|
|
21
21
|
const price = prices[symbol]?.price
|
|
22
22
|
return (
|
|
23
23
|
<div
|
|
@@ -25,11 +25,8 @@ export default function Home() {
|
|
|
25
25
|
className="bg-zinc-900/40 border border-zinc-800/40 rounded-2xl p-5 hover:bg-zinc-900/60 hover:border-zinc-700/50 transition-all cursor-default"
|
|
26
26
|
>
|
|
27
27
|
<div className="mb-4">
|
|
28
|
-
<div
|
|
29
|
-
|
|
30
|
-
style={{ backgroundColor: `${color}18`, border: `1px solid ${color}25`, color }}
|
|
31
|
-
>
|
|
32
|
-
{symbol.slice(0, 3)}
|
|
28
|
+
<div className="mb-3">
|
|
29
|
+
<TokenIcon symbol={symbol} size={40} radiusFraction={0.28} />
|
|
33
30
|
</div>
|
|
34
31
|
<p className="text-[11px] text-zinc-500 font-medium mb-0.5">{symbol}</p>
|
|
35
32
|
<p className="text-xs text-zinc-600">{name}</p>
|