create-lightning-scaffold 1.0.1 → 1.0.2
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
CHANGED
|
@@ -49,35 +49,42 @@ const JUPITER_API = 'https://api.jup.ag/swap/v1';
|
|
|
49
49
|
<% if (styling !== 'nativewind') { %>
|
|
50
50
|
const styles = StyleSheet.create({
|
|
51
51
|
container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
|
|
52
|
+
card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
|
|
52
53
|
header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 },
|
|
53
|
-
title: { fontSize: 18, fontWeight: '600', color: '#
|
|
54
|
-
address: { fontSize: 12, color: '#
|
|
55
|
-
|
|
56
|
-
label: { fontSize: 12, color: '#
|
|
54
|
+
title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
|
|
55
|
+
address: { fontSize: 12, color: '#737373' },
|
|
56
|
+
inputCard: { backgroundColor: '#171717', borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 16 },
|
|
57
|
+
label: { fontSize: 12, color: '#737373', marginBottom: 8 },
|
|
57
58
|
labelRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
|
|
58
|
-
switchText: { fontSize: 12, color: '#
|
|
59
|
+
switchText: { fontSize: 12, color: '#737373' },
|
|
59
60
|
inputRow: { flexDirection: 'row', alignItems: 'center' },
|
|
60
|
-
input: { flex: 1, fontSize: 24, fontWeight: '500', color: '#
|
|
61
|
-
outputText: { flex: 1, fontSize: 24, fontWeight: '500', color: '#
|
|
61
|
+
input: { flex: 1, fontSize: 24, fontWeight: '500', color: '#fafafa' },
|
|
62
|
+
outputText: { flex: 1, fontSize: 24, fontWeight: '500', color: '#737373' },
|
|
62
63
|
arrow: { alignItems: 'center', marginVertical: 8 },
|
|
63
|
-
arrowBox: { width: 32, height: 32, borderWidth: 1, borderColor: '#
|
|
64
|
-
arrowText: { color: '#
|
|
65
|
-
tokenBtn: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#
|
|
66
|
-
tokenText: { fontSize: 14, fontWeight: '500', color: '#
|
|
67
|
-
tokenArrow: { fontSize: 10, color: '#
|
|
68
|
-
button: { marginTop: 16, backgroundColor: '#
|
|
69
|
-
buttonSecondary: { marginTop: 8, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#
|
|
64
|
+
arrowBox: { width: 32, height: 32, backgroundColor: '#171717', borderWidth: 1, borderColor: '#262626', borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
|
|
65
|
+
arrowText: { color: '#737373', fontSize: 16 },
|
|
66
|
+
tokenBtn: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#262626', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, gap: 6 },
|
|
67
|
+
tokenText: { fontSize: 14, fontWeight: '500', color: '#fafafa' },
|
|
68
|
+
tokenArrow: { fontSize: 10, color: '#737373' },
|
|
69
|
+
button: { marginTop: 16, backgroundColor: '#fafafa', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
|
|
70
|
+
buttonSecondary: { marginTop: 8, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#262626', paddingVertical: 12, borderRadius: 12, alignItems: 'center' },
|
|
70
71
|
buttonDisabled: { opacity: 0.5 },
|
|
71
|
-
buttonText: { color: '#
|
|
72
|
-
buttonTextSecondary: { color: '#
|
|
72
|
+
buttonText: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
|
|
73
|
+
buttonTextSecondary: { color: '#fafafa', fontSize: 13, fontWeight: '500' },
|
|
73
74
|
result: { marginTop: 12, fontSize: 14, textAlign: 'center' },
|
|
74
|
-
footer: { marginTop: 16, fontSize: 12, color: '#
|
|
75
|
+
footer: { marginTop: 16, fontSize: 12, color: '#737373', textAlign: 'center' },
|
|
75
76
|
quote: { fontSize: 12, color: '#737373', marginTop: 8 },
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
slippageRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 },
|
|
78
|
+
slippageLabel: { fontSize: 12, color: '#737373' },
|
|
79
|
+
slippageBtn: { paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, backgroundColor: '#262626' },
|
|
80
|
+
slippageBtnActive: { backgroundColor: '#fafafa' },
|
|
81
|
+
slippageBtnText: { fontSize: 12, color: '#a3a3a3' },
|
|
82
|
+
slippageBtnTextActive: { color: '#0a0a0a' },
|
|
83
|
+
modal: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
|
|
84
|
+
modalContent: { backgroundColor: '#171717', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, paddingBottom: 32 },
|
|
85
|
+
modalTitle: { fontSize: 16, fontWeight: '600', marginBottom: 16, textAlign: 'center', color: '#fafafa' },
|
|
86
|
+
modalItem: { paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: '#262626' },
|
|
87
|
+
modalItemText: { fontSize: 16, color: '#fafafa' },
|
|
81
88
|
});
|
|
82
89
|
<% } %>
|
|
83
90
|
export function Swap() {
|
|
@@ -153,74 +160,76 @@ export function Swap() {
|
|
|
153
160
|
return (
|
|
154
161
|
<% if (styling === 'nativewind') { %>
|
|
155
162
|
<View className="flex-1 bg-white p-6 pt-16">
|
|
156
|
-
<View className="
|
|
157
|
-
<
|
|
158
|
-
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
</View>
|
|
162
|
-
|
|
163
|
-
<View className="border border-neutral-200 rounded-xl p-4">
|
|
164
|
-
<View className="flex-row justify-between mb-2">
|
|
165
|
-
<Text className="text-xs text-neutral-400">From</Text>
|
|
166
|
-
<Text className="text-xs text-neutral-400">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
|
|
167
|
-
</View>
|
|
168
|
-
<View className="flex-row items-center">
|
|
169
|
-
<TextInput className="flex-1 text-2xl font-medium text-black" placeholder="0.00" placeholderTextColor="#d4d4d4" value={amount} onChangeText={setAmount} keyboardType="numeric" />
|
|
170
|
-
<TouchableOpacity className="flex-row items-center bg-neutral-100 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}>
|
|
171
|
-
<Text className="text-sm font-medium mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
|
|
163
|
+
<View className="bg-neutral-900 rounded-2xl p-5">
|
|
164
|
+
<View className="flex-row items-center justify-between mb-6">
|
|
165
|
+
<Text className="text-lg font-semibold text-white">Swap</Text>
|
|
166
|
+
<TouchableOpacity onPress={() => disconnect()}>
|
|
167
|
+
<Text className="text-xs text-neutral-500">{addr.slice(0, 6)}...{addr.slice(-4)}</Text>
|
|
172
168
|
</TouchableOpacity>
|
|
173
169
|
</View>
|
|
174
|
-
<TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text className="text-xs text-neutral-400 mt-1">Max</Text></TouchableOpacity>
|
|
175
|
-
</View>
|
|
176
|
-
|
|
177
|
-
<View className="items-center my-2">
|
|
178
|
-
<TouchableOpacity onPress={switchTokens} className="w-8 h-8 border border-neutral-200 rounded-lg items-center justify-center"><Text className="text-neutral-400">↓</Text></TouchableOpacity>
|
|
179
|
-
</View>
|
|
180
170
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
171
|
+
<View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
|
|
172
|
+
<View className="flex-row justify-between mb-2">
|
|
173
|
+
<Text className="text-xs text-neutral-500">From</Text>
|
|
174
|
+
<Text className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
|
|
175
|
+
</View>
|
|
176
|
+
<View className="flex-row items-center">
|
|
177
|
+
<TextInput className="flex-1 text-2xl font-medium text-white" placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
|
|
178
|
+
<TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}>
|
|
179
|
+
<Text className="text-sm font-medium text-white mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
|
|
180
|
+
</TouchableOpacity>
|
|
181
|
+
</View>
|
|
182
|
+
<TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text className="text-xs text-neutral-500 mt-1">Max</Text></TouchableOpacity>
|
|
185
183
|
</View>
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
<TouchableOpacity className="
|
|
189
|
-
<Text className="text-sm font-medium mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
|
|
190
|
-
</TouchableOpacity>
|
|
184
|
+
|
|
185
|
+
<View className="items-center my-2">
|
|
186
|
+
<TouchableOpacity onPress={switchTokens} className="w-8 h-8 bg-neutral-800 border border-neutral-700 rounded-lg items-center justify-center"><Text className="text-neutral-500">↓</Text></TouchableOpacity>
|
|
191
187
|
</View>
|
|
192
|
-
{quote && <Text className="text-xs text-neutral-400 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
|
|
193
|
-
</View>
|
|
194
188
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
189
|
+
<View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
|
|
190
|
+
<View className="flex-row justify-between mb-2">
|
|
191
|
+
<Text className="text-xs text-neutral-500">To</Text>
|
|
192
|
+
<Text className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
|
|
193
|
+
</View>
|
|
194
|
+
<View className="flex-row items-center">
|
|
195
|
+
<Text className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</Text>
|
|
196
|
+
<TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('to')}>
|
|
197
|
+
<Text className="text-sm font-medium text-white mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
|
|
201
198
|
</TouchableOpacity>
|
|
202
|
-
|
|
199
|
+
</View>
|
|
200
|
+
{quote && <Text className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
|
|
201
|
+
</View>
|
|
202
|
+
|
|
203
|
+
<View className="flex-row items-center justify-between mt-3">
|
|
204
|
+
<Text className="text-xs text-neutral-500">Slippage</Text>
|
|
205
|
+
<View className="flex-row gap-1">
|
|
206
|
+
{SLIPPAGE_OPTIONS.map((s) => (
|
|
207
|
+
<TouchableOpacity key={s} onPress={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-white' : 'bg-neutral-700'}`}>
|
|
208
|
+
<Text className={`text-xs ${slippage === s ? 'text-black' : 'text-neutral-400'}`}>{s / 100}%</Text>
|
|
209
|
+
</TouchableOpacity>
|
|
210
|
+
))}
|
|
211
|
+
</View>
|
|
203
212
|
</View>
|
|
204
|
-
</View>
|
|
205
213
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
214
|
+
<TouchableOpacity className={`mt-4 bg-white py-3.5 rounded-xl items-center ${loading || !quote ? 'opacity-50' : ''}`} onPress={handleSwap} disabled={loading || !quote}>
|
|
215
|
+
{loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text className="text-black text-sm font-medium">Swap</Text>}
|
|
216
|
+
</TouchableOpacity>
|
|
209
217
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
218
|
+
<TouchableOpacity className={`mt-2 border border-neutral-700 py-3 rounded-xl items-center ${signing ? 'opacity-50' : ''}`} onPress={handleSignMessage} disabled={signing}>
|
|
219
|
+
{signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text className="text-white text-sm font-medium">Sign Message</Text>}
|
|
220
|
+
</TouchableOpacity>
|
|
213
221
|
|
|
214
|
-
|
|
215
|
-
|
|
222
|
+
{result && <Text className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-400' : 'text-red-400'}`}>{result.message}</Text>}
|
|
223
|
+
<Text className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</Text>
|
|
224
|
+
</View>
|
|
216
225
|
|
|
217
226
|
<Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
|
|
218
|
-
<TouchableOpacity className="flex-1 justify-end bg-black/
|
|
219
|
-
<View className="bg-
|
|
220
|
-
<Text className="text-base font-semibold text-center mb-4">Select Token</Text>
|
|
227
|
+
<TouchableOpacity className="flex-1 justify-end bg-black/50" activeOpacity={1} onPress={() => setShowPicker(null)}>
|
|
228
|
+
<View className="bg-neutral-800 rounded-t-2xl p-4 pb-8">
|
|
229
|
+
<Text className="text-base font-semibold text-center mb-4 text-white">Select Token</Text>
|
|
221
230
|
{TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (
|
|
222
|
-
<TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-
|
|
223
|
-
<Text className="text-base">{t.symbol}</Text>
|
|
231
|
+
<TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-700" onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}>
|
|
232
|
+
<Text className="text-base text-white">{t.symbol}</Text>
|
|
224
233
|
</TouchableOpacity>
|
|
225
234
|
))}
|
|
226
235
|
</View>
|
|
@@ -229,62 +238,64 @@ export function Swap() {
|
|
|
229
238
|
</View>
|
|
230
239
|
<% } else { %>
|
|
231
240
|
<View style={styles.container}>
|
|
232
|
-
<View style={styles.header}>
|
|
233
|
-
<Text style={styles.title}>Swap</Text>
|
|
234
|
-
<TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity>
|
|
235
|
-
</View>
|
|
236
|
-
|
|
237
241
|
<View style={styles.card}>
|
|
238
|
-
<View style={styles.
|
|
239
|
-
<Text style={styles.
|
|
240
|
-
<Text style={styles.
|
|
242
|
+
<View style={styles.header}>
|
|
243
|
+
<Text style={styles.title}>Swap</Text>
|
|
244
|
+
<TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity>
|
|
241
245
|
</View>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
<
|
|
245
|
-
<Text style={styles.
|
|
246
|
-
|
|
246
|
+
|
|
247
|
+
<View style={styles.inputCard}>
|
|
248
|
+
<View style={styles.labelRow}>
|
|
249
|
+
<Text style={styles.label}>From</Text>
|
|
250
|
+
<Text style={styles.label}>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
|
|
251
|
+
</View>
|
|
252
|
+
<View style={styles.inputRow}>
|
|
253
|
+
<TextInput style={styles.input} placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
|
|
254
|
+
<TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('from')}>
|
|
255
|
+
<Text style={styles.tokenText}>{fromToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
|
|
256
|
+
</TouchableOpacity>
|
|
257
|
+
</View>
|
|
258
|
+
<TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text style={styles.switchText}>Max</Text></TouchableOpacity>
|
|
247
259
|
</View>
|
|
248
|
-
<TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text style={styles.switchText}>Max</Text></TouchableOpacity>
|
|
249
|
-
</View>
|
|
250
260
|
|
|
251
|
-
|
|
261
|
+
<View style={styles.arrow}><TouchableOpacity onPress={switchTokens} style={styles.arrowBox}><Text style={styles.arrowText}>↓</Text></TouchableOpacity></View>
|
|
252
262
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
+
<View style={styles.inputCard}>
|
|
264
|
+
<View style={styles.labelRow}>
|
|
265
|
+
<Text style={styles.label}>To</Text>
|
|
266
|
+
<Text style={styles.label}>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
|
|
267
|
+
</View>
|
|
268
|
+
<View style={styles.inputRow}>
|
|
269
|
+
<Text style={styles.outputText}>{outputAmount}</Text>
|
|
270
|
+
<TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('to')}>
|
|
271
|
+
<Text style={styles.tokenText}>{toToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
|
|
272
|
+
</TouchableOpacity>
|
|
273
|
+
</View>
|
|
274
|
+
{quote && <Text style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
|
|
263
275
|
</View>
|
|
264
|
-
{quote && <Text style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
|
|
265
|
-
</View>
|
|
266
276
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
277
|
+
<View style={styles.slippageRow}>
|
|
278
|
+
<Text style={styles.slippageLabel}>Slippage</Text>
|
|
279
|
+
<View style={{ flexDirection: 'row', gap: 4 }}>
|
|
280
|
+
{SLIPPAGE_OPTIONS.map((s) => (
|
|
281
|
+
<TouchableOpacity key={s} onPress={() => setSlippage(s)} style={[styles.slippageBtn, slippage === s && styles.slippageBtnActive]}>
|
|
282
|
+
<Text style={[styles.slippageBtnText, slippage === s && styles.slippageBtnTextActive]}>{s / 100}%</Text>
|
|
283
|
+
</TouchableOpacity>
|
|
284
|
+
))}
|
|
285
|
+
</View>
|
|
275
286
|
</View>
|
|
276
|
-
</View>
|
|
277
287
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
288
|
+
<TouchableOpacity style={[styles.button, (loading || !quote) && styles.buttonDisabled]} onPress={handleSwap} disabled={loading || !quote}>
|
|
289
|
+
{loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text style={styles.buttonText}>Swap</Text>}
|
|
290
|
+
</TouchableOpacity>
|
|
281
291
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
292
|
+
<TouchableOpacity style={[styles.buttonSecondary, signing && styles.buttonDisabled]} onPress={handleSignMessage} disabled={signing}>
|
|
293
|
+
{signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text style={styles.buttonTextSecondary}>Sign Message</Text>}
|
|
294
|
+
</TouchableOpacity>
|
|
285
295
|
|
|
286
|
-
|
|
287
|
-
|
|
296
|
+
{result && <Text style={[styles.result, { color: result.success ? '#737373' : '#ef4444' }]}>{result.message}</Text>}
|
|
297
|
+
<Text style={styles.footer}>Gas sponsored · Powered by LazorKit + Jupiter</Text>
|
|
298
|
+
</View>
|
|
288
299
|
|
|
289
300
|
<Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
|
|
290
301
|
<TouchableOpacity style={styles.modal} activeOpacity={1} onPress={() => setShowPicker(null)}>
|
|
@@ -39,24 +39,24 @@ function useBalances(walletAddress: string | undefined) {
|
|
|
39
39
|
}
|
|
40
40
|
<% if (styling !== 'tailwind') { %>
|
|
41
41
|
const styles: Record<string, React.CSSProperties> = {
|
|
42
|
-
container: { width: '100%', maxWidth: 360 },
|
|
42
|
+
container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
|
|
43
43
|
header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 },
|
|
44
|
-
title: { fontSize: 18, fontWeight: 600, margin: 0 },
|
|
45
|
-
address: { fontSize: 12, color: '#
|
|
46
|
-
card: { border: '1px solid #
|
|
47
|
-
label: { fontSize: 12, color: '#
|
|
44
|
+
title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
|
|
45
|
+
address: { fontSize: 12, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
|
|
46
|
+
card: { border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
|
|
47
|
+
label: { fontSize: 12, color: '#737373', marginBottom: 8, display: 'flex', justifyContent: 'space-between' },
|
|
48
48
|
inputRow: { display: 'flex', alignItems: 'center', gap: 12 },
|
|
49
|
-
input: { flex: 1, fontSize: 24, fontWeight: 500, border: 'none', background: 'transparent', width: '100%' },
|
|
49
|
+
input: { flex: 1, fontSize: 24, fontWeight: 500, border: 'none', background: 'transparent', width: '100%', color: '#fafafa' },
|
|
50
50
|
arrow: { display: 'flex', justifyContent: 'center', margin: '8px 0' },
|
|
51
|
-
arrowBox: { width: 32, height: 32, border: '1px solid #
|
|
52
|
-
button: { marginTop: 16, width: '100%', backgroundColor: '#
|
|
51
|
+
arrowBox: { width: 32, height: 32, border: '1px solid #262626', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#737373', background: '#171717' },
|
|
52
|
+
button: { marginTop: 16, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '14px 16px', borderRadius: 12, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
|
|
53
53
|
buttonDisabled: { opacity: 0.5, cursor: 'not-allowed' },
|
|
54
|
-
buttonSecondary: { marginTop: 8, width: '100%', backgroundColor: 'transparent', color: '#
|
|
54
|
+
buttonSecondary: { marginTop: 8, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 12, border: '1px solid #262626', fontSize: 13, fontWeight: 500, cursor: 'pointer' },
|
|
55
55
|
result: { marginTop: 12, fontSize: 14, textAlign: 'center' },
|
|
56
|
-
footer: { marginTop: 16, fontSize: 12, color: '#
|
|
57
|
-
tokenBtn: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#
|
|
58
|
-
dropdown: { position: 'absolute', right: 0, marginTop: 4, background: '#
|
|
59
|
-
dropdownItem: { display: 'block', width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'none', fontSize: 14, cursor: 'pointer' },
|
|
56
|
+
footer: { marginTop: 16, fontSize: 12, color: '#737373', textAlign: 'center' },
|
|
57
|
+
tokenBtn: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#262626', borderRadius: 8, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer', color: '#fafafa' },
|
|
58
|
+
dropdown: { position: 'absolute', right: 0, marginTop: 4, background: '#171717', border: '1px solid #262626', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.3)', zIndex: 10 },
|
|
59
|
+
dropdownItem: { display: 'block', width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'none', fontSize: 14, cursor: 'pointer', color: '#fafafa' },
|
|
60
60
|
quote: { fontSize: 12, color: '#737373', marginTop: 4 },
|
|
61
61
|
}
|
|
62
62
|
<% } %>
|
|
@@ -130,48 +130,48 @@ export function Swap() {
|
|
|
130
130
|
|
|
131
131
|
return (
|
|
132
132
|
<% if (styling === 'tailwind') { %>
|
|
133
|
-
<div className="w-full max-w-sm">
|
|
133
|
+
<div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
|
|
134
134
|
<div className="flex items-center justify-between mb-6">
|
|
135
135
|
<h1 className="text-lg font-semibold">Swap</h1>
|
|
136
|
-
<button onClick={() => disconnect()} className="text-xs text-neutral-
|
|
136
|
+
<button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">{addr.slice(0, 6)}...{addr.slice(-4)}</button>
|
|
137
137
|
</div>
|
|
138
138
|
<div className="space-y-2">
|
|
139
|
-
<div className="border border-neutral-
|
|
139
|
+
<div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
|
|
140
140
|
<div className="flex items-center justify-between mb-2">
|
|
141
|
-
<span className="text-xs text-neutral-
|
|
142
|
-
<span className="text-xs text-neutral-
|
|
141
|
+
<span className="text-xs text-neutral-500">From</span>
|
|
142
|
+
<span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span>
|
|
143
143
|
</div>
|
|
144
144
|
<div className="flex items-center gap-3">
|
|
145
|
-
<input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} className="flex-1 text-2xl font-medium bg-transparent w-full focus:outline-none" />
|
|
145
|
+
<input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} className="flex-1 text-2xl font-medium bg-transparent w-full focus:outline-none text-white placeholder-neutral-600" />
|
|
146
146
|
<TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
|
|
147
147
|
</div>
|
|
148
|
-
<button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-
|
|
148
|
+
<button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-500 hover:text-white mt-1">Max</button>
|
|
149
149
|
</div>
|
|
150
|
-
<div className="flex justify-center"><button onClick={switchTokens} className="w-8 h-8 border border-neutral-
|
|
151
|
-
<div className="border border-neutral-
|
|
150
|
+
<div className="flex justify-center"><button onClick={switchTokens} className="w-8 h-8 border border-neutral-700 rounded-lg flex items-center justify-center text-neutral-500 hover:bg-neutral-800 bg-neutral-800">↓</button></div>
|
|
151
|
+
<div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
|
|
152
152
|
<div className="flex items-center justify-between mb-2">
|
|
153
|
-
<span className="text-xs text-neutral-
|
|
154
|
-
<span className="text-xs text-neutral-
|
|
153
|
+
<span className="text-xs text-neutral-500">To</span>
|
|
154
|
+
<span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span>
|
|
155
155
|
</div>
|
|
156
156
|
<div className="flex items-center gap-3">
|
|
157
|
-
<span className="flex-1 text-2xl font-medium text-neutral-
|
|
157
|
+
<span className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</span>
|
|
158
158
|
<TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
|
|
159
159
|
</div>
|
|
160
|
-
{quote && <p className="text-xs text-neutral-
|
|
160
|
+
{quote && <p className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</p>}
|
|
161
161
|
</div>
|
|
162
162
|
</div>
|
|
163
163
|
<div className="flex items-center justify-between mt-3 text-xs">
|
|
164
|
-
<span className="text-neutral-
|
|
164
|
+
<span className="text-neutral-500">Slippage</span>
|
|
165
165
|
<div className="flex gap-1">
|
|
166
166
|
{SLIPPAGE_OPTIONS.map((s) => (
|
|
167
|
-
<button key={s} onClick={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-
|
|
167
|
+
<button key={s} onClick={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-white text-black' : 'bg-neutral-700 text-neutral-300 hover:bg-neutral-600'}`}>{s / 100}%</button>
|
|
168
168
|
))}
|
|
169
169
|
</div>
|
|
170
170
|
</div>
|
|
171
|
-
<button onClick={handleSwap} disabled={loading || !quote} className="mt-4 w-full py-3 bg-
|
|
172
|
-
<button onClick={handleSignMessage} disabled={signing} className="mt-2 w-full py-3 bg-transparent text-
|
|
173
|
-
{result && <p className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-
|
|
174
|
-
<p className="mt-4 text-xs text-center text-neutral-
|
|
171
|
+
<button onClick={handleSwap} disabled={loading || !quote} className="mt-4 w-full py-3 bg-white text-black text-sm font-medium rounded-xl hover:opacity-90 disabled:opacity-50">{loading ? 'Swapping...' : 'Swap'}</button>
|
|
172
|
+
<button onClick={handleSignMessage} disabled={signing} className="mt-2 w-full py-3 bg-transparent text-white text-sm font-medium rounded-xl border border-neutral-700 hover:bg-neutral-800 disabled:opacity-50">{signing ? 'Signing...' : 'Sign Message'}</button>
|
|
173
|
+
{result && <p className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-400' : 'text-red-400'}`}>{result.message}</p>}
|
|
174
|
+
<p className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</p>
|
|
175
175
|
</div>
|
|
176
176
|
<% } else { %>
|
|
177
177
|
<div style={styles.container}>
|
|
@@ -187,20 +187,20 @@ export function Swap() {
|
|
|
187
187
|
</div>
|
|
188
188
|
<button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} style={{ ...styles.address, fontSize: 12, marginTop: 4 }}>Max</button>
|
|
189
189
|
</div>
|
|
190
|
-
<div style={styles.arrow}><button onClick={switchTokens} style={{ ...styles.arrowBox, cursor: 'pointer'
|
|
190
|
+
<div style={styles.arrow}><button onClick={switchTokens} style={{ ...styles.arrowBox, cursor: 'pointer' }}>↓</button></div>
|
|
191
191
|
<div style={styles.card}>
|
|
192
192
|
<div style={styles.label}><span>To</span><span>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span></div>
|
|
193
193
|
<div style={styles.inputRow}>
|
|
194
|
-
<span style={{ ...styles.input, color: '#
|
|
194
|
+
<span style={{ ...styles.input, color: '#737373' }}>{outputAmount}</span>
|
|
195
195
|
<TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
|
|
196
196
|
</div>
|
|
197
197
|
{quote && <p style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</p>}
|
|
198
198
|
</div>
|
|
199
199
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}>
|
|
200
|
-
<span style={{ color: '#
|
|
200
|
+
<span style={{ color: '#737373' }}>Slippage</span>
|
|
201
201
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
202
202
|
{SLIPPAGE_OPTIONS.map((s) => (
|
|
203
|
-
<button key={s} onClick={() => setSlippage(s)} style={{ padding: '4px 8px', borderRadius: 4, border: 'none', cursor: 'pointer', background: slippage === s ? '#
|
|
203
|
+
<button key={s} onClick={() => setSlippage(s)} style={{ padding: '4px 8px', borderRadius: 4, border: 'none', cursor: 'pointer', background: slippage === s ? '#fafafa' : '#262626', color: slippage === s ? '#0a0a0a' : '#a3a3a3' }}>{s / 100}%</button>
|
|
204
204
|
))}
|
|
205
205
|
</div>
|
|
206
206
|
</div>
|
|
@@ -218,11 +218,11 @@ function TokenSelect({ token, tokens, onChange, exclude }: { token: typeof TOKEN
|
|
|
218
218
|
return (
|
|
219
219
|
<div style={{ position: 'relative' }}>
|
|
220
220
|
<% if (styling === 'tailwind') { %>
|
|
221
|
-
<button onClick={() => setOpen(!open)} className="flex items-center gap-2 px-3 py-2 bg-neutral-
|
|
221
|
+
<button onClick={() => setOpen(!open)} className="flex items-center gap-2 px-3 py-2 bg-neutral-700 rounded-lg text-sm font-medium text-white">{token.symbol}<span className="text-neutral-400">▼</span></button>
|
|
222
222
|
{open && (
|
|
223
|
-
<div className="absolute right-0 mt-1 bg-
|
|
223
|
+
<div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">
|
|
224
224
|
{tokens.filter((t) => t.symbol !== exclude).map((t) => (
|
|
225
|
-
<button key={t.symbol} onClick={() => { onChange(t); setOpen(false) }} className="block w-full px-4 py-2 text-left text-sm hover:bg-neutral-
|
|
225
|
+
<button key={t.symbol} onClick={() => { onChange(t); setOpen(false) }} className="block w-full px-4 py-2 text-left text-sm text-white hover:bg-neutral-700">{t.symbol}</button>
|
|
226
226
|
))}
|
|
227
227
|
</div>
|
|
228
228
|
)}
|
|
@@ -42,24 +42,24 @@ function useBalances(walletAddress: string | undefined) {
|
|
|
42
42
|
}
|
|
43
43
|
<% if (styling !== 'tailwind') { %>
|
|
44
44
|
const styles: Record<string, React.CSSProperties> = {
|
|
45
|
-
container: { width: '100%', maxWidth: 360 },
|
|
45
|
+
container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
|
|
46
46
|
header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 },
|
|
47
|
-
title: { fontSize: 18, fontWeight: 600, margin: 0 },
|
|
48
|
-
address: { fontSize: 12, color: '#
|
|
49
|
-
card: { border: '1px solid #
|
|
50
|
-
label: { fontSize: 12, color: '#
|
|
47
|
+
title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
|
|
48
|
+
address: { fontSize: 12, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
|
|
49
|
+
card: { border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
|
|
50
|
+
label: { fontSize: 12, color: '#737373', marginBottom: 8, display: 'flex', justifyContent: 'space-between' },
|
|
51
51
|
inputRow: { display: 'flex', alignItems: 'center', gap: 12 },
|
|
52
|
-
input: { flex: 1, fontSize: 24, fontWeight: 500, border: 'none', background: 'transparent', width: '100%' },
|
|
52
|
+
input: { flex: 1, fontSize: 24, fontWeight: 500, border: 'none', background: 'transparent', width: '100%', color: '#fafafa' },
|
|
53
53
|
arrow: { display: 'flex', justifyContent: 'center', margin: '8px 0' },
|
|
54
|
-
arrowBox: { width: 32, height: 32, border: '1px solid #
|
|
55
|
-
button: { marginTop: 16, width: '100%', backgroundColor: '#
|
|
54
|
+
arrowBox: { width: 32, height: 32, border: '1px solid #262626', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#737373', background: '#171717' },
|
|
55
|
+
button: { marginTop: 16, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '14px 16px', borderRadius: 12, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
|
|
56
56
|
buttonDisabled: { opacity: 0.5, cursor: 'not-allowed' },
|
|
57
|
-
buttonSecondary: { marginTop: 8, width: '100%', backgroundColor: 'transparent', color: '#
|
|
57
|
+
buttonSecondary: { marginTop: 8, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 12, border: '1px solid #262626', fontSize: 13, fontWeight: 500, cursor: 'pointer' },
|
|
58
58
|
result: { marginTop: 12, fontSize: 14, textAlign: 'center' },
|
|
59
|
-
footer: { marginTop: 16, fontSize: 12, color: '#
|
|
60
|
-
tokenBtn: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#
|
|
61
|
-
dropdown: { position: 'absolute', right: 0, marginTop: 4, background: '#
|
|
62
|
-
dropdownItem: { display: 'block', width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'none', fontSize: 14, cursor: 'pointer' },
|
|
59
|
+
footer: { marginTop: 16, fontSize: 12, color: '#737373', textAlign: 'center' },
|
|
60
|
+
tokenBtn: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#262626', borderRadius: 8, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer', color: '#fafafa' },
|
|
61
|
+
dropdown: { position: 'absolute', right: 0, marginTop: 4, background: '#171717', border: '1px solid #262626', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.3)', zIndex: 10 },
|
|
62
|
+
dropdownItem: { display: 'block', width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'none', fontSize: 14, cursor: 'pointer', color: '#fafafa' },
|
|
63
63
|
quote: { fontSize: 12, color: '#737373', marginTop: 4 },
|
|
64
64
|
};
|
|
65
65
|
<% } %>
|
|
@@ -160,58 +160,58 @@ export function Swap() {
|
|
|
160
160
|
|
|
161
161
|
return (
|
|
162
162
|
<% if (styling === 'tailwind') { %>
|
|
163
|
-
<div className="w-full max-w-sm">
|
|
163
|
+
<div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
|
|
164
164
|
<div className="flex items-center justify-between mb-6">
|
|
165
165
|
<h1 className="text-lg font-semibold">Swap</h1>
|
|
166
|
-
<button onClick={() => disconnect()} className="text-xs text-neutral-
|
|
166
|
+
<button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">
|
|
167
167
|
{addr.slice(0, 6)}...{addr.slice(-4)}
|
|
168
168
|
</button>
|
|
169
169
|
</div>
|
|
170
170
|
<div className="space-y-2">
|
|
171
|
-
<div className="border border-neutral-
|
|
171
|
+
<div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
|
|
172
172
|
<div className="flex items-center justify-between mb-2">
|
|
173
|
-
<span className="text-xs text-neutral-
|
|
174
|
-
<span className="text-xs text-neutral-
|
|
173
|
+
<span className="text-xs text-neutral-500">From</span>
|
|
174
|
+
<span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span>
|
|
175
175
|
</div>
|
|
176
176
|
<div className="flex items-center gap-3">
|
|
177
|
-
<input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} className="flex-1 text-2xl font-medium bg-transparent w-full focus:outline-none" />
|
|
177
|
+
<input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} className="flex-1 text-2xl font-medium bg-transparent w-full focus:outline-none text-white placeholder-neutral-600" />
|
|
178
178
|
<TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
|
|
179
179
|
</div>
|
|
180
|
-
<button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-
|
|
180
|
+
<button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-500 hover:text-white mt-1">Max</button>
|
|
181
181
|
</div>
|
|
182
182
|
<div className="flex justify-center">
|
|
183
|
-
<button onClick={switchTokens} className="w-8 h-8 border border-neutral-
|
|
183
|
+
<button onClick={switchTokens} className="w-8 h-8 border border-neutral-700 rounded-lg flex items-center justify-center text-neutral-500 hover:bg-neutral-800 bg-neutral-800">↓</button>
|
|
184
184
|
</div>
|
|
185
|
-
<div className="border border-neutral-
|
|
185
|
+
<div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
|
|
186
186
|
<div className="flex items-center justify-between mb-2">
|
|
187
|
-
<span className="text-xs text-neutral-
|
|
188
|
-
<span className="text-xs text-neutral-
|
|
187
|
+
<span className="text-xs text-neutral-500">To</span>
|
|
188
|
+
<span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span>
|
|
189
189
|
</div>
|
|
190
190
|
<div className="flex items-center gap-3">
|
|
191
|
-
<span className="flex-1 text-2xl font-medium text-neutral-
|
|
191
|
+
<span className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</span>
|
|
192
192
|
<TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
|
|
193
193
|
</div>
|
|
194
|
-
{quote && <p className="text-xs text-neutral-
|
|
194
|
+
{quote && <p className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || "Best route"}</p>}
|
|
195
195
|
</div>
|
|
196
196
|
</div>
|
|
197
197
|
<div className="flex items-center justify-between mt-3 text-xs">
|
|
198
|
-
<span className="text-neutral-
|
|
198
|
+
<span className="text-neutral-500">Slippage</span>
|
|
199
199
|
<div className="flex gap-1">
|
|
200
200
|
{SLIPPAGE_OPTIONS.map((s) => (
|
|
201
|
-
<button key={s} onClick={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? "bg-
|
|
201
|
+
<button key={s} onClick={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? "bg-white text-black" : "bg-neutral-700 text-neutral-300 hover:bg-neutral-600"}`}>
|
|
202
202
|
{s / 100}%
|
|
203
203
|
</button>
|
|
204
204
|
))}
|
|
205
205
|
</div>
|
|
206
206
|
</div>
|
|
207
|
-
<button onClick={handleSwap} disabled={loading || !quote} className="mt-4 w-full py-3 bg-
|
|
207
|
+
<button onClick={handleSwap} disabled={loading || !quote} className="mt-4 w-full py-3 bg-white text-black text-sm font-medium rounded-xl hover:opacity-90 disabled:opacity-50">
|
|
208
208
|
{loading ? "Swapping..." : "Swap"}
|
|
209
209
|
</button>
|
|
210
|
-
<button onClick={handleSignMessage} disabled={signing} className="mt-2 w-full py-3 bg-transparent text-
|
|
210
|
+
<button onClick={handleSignMessage} disabled={signing} className="mt-2 w-full py-3 bg-transparent text-white text-sm font-medium rounded-xl border border-neutral-700 hover:bg-neutral-800 disabled:opacity-50">
|
|
211
211
|
{signing ? "Signing..." : "Sign Message"}
|
|
212
212
|
</button>
|
|
213
|
-
{result && <p className={`mt-3 text-sm text-center ${result.success ? "text-neutral-
|
|
214
|
-
<p className="mt-4 text-xs text-center text-neutral-
|
|
213
|
+
{result && <p className={`mt-3 text-sm text-center ${result.success ? "text-neutral-400" : "text-red-400"}`}>{result.message}</p>}
|
|
214
|
+
<p className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</p>
|
|
215
215
|
</div>
|
|
216
216
|
<% } else { %>
|
|
217
217
|
<div style={styles.container}>
|
|
@@ -237,10 +237,10 @@ export function Swap() {
|
|
|
237
237
|
{quote && <p style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || "Best route"}</p>}
|
|
238
238
|
</div>
|
|
239
239
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}>
|
|
240
|
-
<span style={{ color: '#
|
|
240
|
+
<span style={{ color: '#737373' }}>Slippage</span>
|
|
241
241
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
242
242
|
{SLIPPAGE_OPTIONS.map((s) => (
|
|
243
|
-
<button key={s} onClick={() => setSlippage(s)} style={{ padding: '4px 8px', borderRadius: 4, border: 'none', cursor: 'pointer', background: slippage === s ? '#
|
|
243
|
+
<button key={s} onClick={() => setSlippage(s)} style={{ padding: '4px 8px', borderRadius: 4, border: 'none', cursor: 'pointer', background: slippage === s ? '#fafafa' : '#262626', color: slippage === s ? '#0a0a0a' : '#a3a3a3' }}>
|
|
244
244
|
{s / 100}%
|
|
245
245
|
</button>
|
|
246
246
|
))}
|
|
@@ -264,13 +264,13 @@ function TokenSelect({ token, tokens, onChange, exclude }: { token: typeof TOKEN
|
|
|
264
264
|
return (
|
|
265
265
|
<div style={{ position: 'relative' }}>
|
|
266
266
|
<% if (styling === 'tailwind') { %>
|
|
267
|
-
<button onClick={() => setOpen(!open)} className="flex items-center gap-2 px-3 py-2 bg-neutral-
|
|
267
|
+
<button onClick={() => setOpen(!open)} className="flex items-center gap-2 px-3 py-2 bg-neutral-700 rounded-lg text-sm font-medium text-white">
|
|
268
268
|
{token.symbol}<span className="text-neutral-400">▼</span>
|
|
269
269
|
</button>
|
|
270
270
|
{open && (
|
|
271
|
-
<div className="absolute right-0 mt-1 bg-
|
|
271
|
+
<div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">
|
|
272
272
|
{tokens.filter((t) => t.symbol !== exclude).map((t) => (
|
|
273
|
-
<button key={t.symbol} onClick={() => { onChange(t); setOpen(false); }} className="block w-full px-4 py-2 text-left text-sm hover:bg-neutral-
|
|
273
|
+
<button key={t.symbol} onClick={() => { onChange(t); setOpen(false); }} className="block w-full px-4 py-2 text-left text-sm text-white hover:bg-neutral-700">{t.symbol}</button>
|
|
274
274
|
))}
|
|
275
275
|
</div>
|
|
276
276
|
)}
|