create-lightning-scaffold 1.0.2 → 1.0.3

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.
Files changed (8) hide show
  1. package/README.md +2 -1
  2. package/package.json +1 -1
  3. package/templates/mobile/components/History.tsx.ejs +56 -51
  4. package/templates/mobile/components/Recovery.tsx.ejs +70 -65
  5. package/templates/vite/src/components/History.tsx.ejs +15 -15
  6. package/templates/vite/src/components/Recovery.tsx.ejs +16 -16
  7. package/templates/web/components/History.tsx.ejs +16 -16
  8. package/templates/web/components/Recovery.tsx.ejs +17 -17
package/README.md CHANGED
@@ -1,5 +1,6 @@
1
1
  # create-lightning-scaffold
2
- <img width="1826" height="1183" alt="Screenshot 2026-01-12 at 22 18 56" src="https://github.com/user-attachments/assets/c34c35d4-1d18-49a4-8024-2d55f774af2e" />
2
+
3
+ ![Demo](demo.gif)
3
4
 
4
5
  CLI to scaffold Solana apps with LazorKit SDK. Generate React Native (Expo) or Next.js projects with passkey authentication, gasless transactions, and a ready-to-use swap interface.
5
6
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-lightning-scaffold",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "CLI to scaffold projects with LazorKit SDK integration",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/mobile/components/History.tsx.ejs CHANGED
@@ -6,18 +6,19 @@ import * as Linking from 'expo-linking';
6
6
  <% if (styling !== 'nativewind') { %>
7
7
  const styles = StyleSheet.create({
8
8
  container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
9
+ card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
9
10
  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
10
- title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
11
+ title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
11
12
  back: { fontSize: 13, color: '#737373' },
12
13
  list: { gap: 8 },
13
- item: { borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 12 },
14
+ item: { borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 12, backgroundColor: '#171717' },
14
15
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
15
- sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
16
- time: { fontSize: 12, color: '#a3a3a3', marginTop: 4 },
16
+ sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
17
+ time: { fontSize: 12, color: '#737373', marginTop: 4 },
17
18
  status: { fontSize: 11, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, overflow: 'hidden' },
18
- success: { backgroundColor: '#dcfce7', color: '#166534' },
19
- failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
20
- empty: { textAlign: 'center', paddingVertical: 32, color: '#a3a3a3', fontSize: 14 },
19
+ success: { backgroundColor: '#14532d', color: '#4ade80' },
20
+ failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
21
+ empty: { textAlign: 'center', paddingVertical: 32, color: '#737373', fontSize: 14 },
21
22
  });
22
23
  <% } %>
23
24
  interface Props {
@@ -59,55 +60,59 @@ export function History({ onBack }: Props) {
59
60
  return (
60
61
  <% if (styling === 'nativewind') { %>
61
62
  <View className="flex-1 bg-white p-6 pt-16">
62
- <View className="flex-row items-center justify-between mb-4">
63
- <Text className="text-lg font-semibold text-black">History</Text>
64
- <TouchableOpacity onPress={onBack}><Text className="text-sm text-neutral-500">← Back</Text></TouchableOpacity>
63
+ <View className="bg-neutral-900 rounded-2xl p-5">
64
+ <View className="flex-row items-center justify-between mb-4">
65
+ <Text className="text-lg font-semibold text-white">History</Text>
66
+ <TouchableOpacity onPress={onBack}><Text className="text-sm text-neutral-500">← Back</Text></TouchableOpacity>
67
+ </View>
68
+ {loading ? (
69
+ <View className="py-8 items-center"><ActivityIndicator color="#737373" /></View>
70
+ ) : txs.length === 0 ? (
71
+ <Text className="text-center py-8 text-neutral-500">No transactions yet</Text>
72
+ ) : (
73
+ <ScrollView className="gap-2" showsVerticalScrollIndicator={false}>
74
+ {txs.map((tx) => (
75
+ <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} className="border border-neutral-700 rounded-xl p-3 mb-2 bg-neutral-800">
76
+ <View className="flex-row justify-between items-center">
77
+ <Text className="font-mono text-sm text-white">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
78
+ <Text className={`text-xs px-2 py-0.5 rounded ${tx.err ? 'bg-red-900 text-red-400' : 'bg-green-900 text-green-400'}`}>
79
+ {tx.err ? 'Failed' : 'Success'}
80
+ </Text>
81
+ </View>
82
+ <Text className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</Text>
83
+ </TouchableOpacity>
84
+ ))}
85
+ </ScrollView>
86
+ )}
65
87
  </View>
66
- {loading ? (
67
- <View className="py-8 items-center"><ActivityIndicator color="#a3a3a3" /></View>
68
- ) : txs.length === 0 ? (
69
- <Text className="text-center py-8 text-neutral-400">No transactions yet</Text>
70
- ) : (
71
- <ScrollView className="gap-2" showsVerticalScrollIndicator={false}>
72
- {txs.map((tx) => (
73
- <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} className="border border-neutral-200 rounded-xl p-3 mb-2">
74
- <View className="flex-row justify-between items-center">
75
- <Text className="font-mono text-sm text-black">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
76
- <Text className={`text-xs px-2 py-0.5 rounded ${tx.err ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
77
- {tx.err ? 'Failed' : 'Success'}
78
- </Text>
79
- </View>
80
- <Text className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</Text>
81
- </TouchableOpacity>
82
- ))}
83
- </ScrollView>
84
- )}
85
88
  </View>
86
89
  <% } else { %>
87
90
  <View style={styles.container}>
88
- <View style={styles.header}>
89
- <Text style={styles.title}>History</Text>
90
- <TouchableOpacity onPress={onBack}><Text style={styles.back}>← Back</Text></TouchableOpacity>
91
+ <View style={styles.card}>
92
+ <View style={styles.header}>
93
+ <Text style={styles.title}>History</Text>
94
+ <TouchableOpacity onPress={onBack}><Text style={styles.back}>← Back</Text></TouchableOpacity>
95
+ </View>
96
+ {loading ? (
97
+ <View style={{ paddingVertical: 32, alignItems: 'center' }}><ActivityIndicator color="#737373" /></View>
98
+ ) : txs.length === 0 ? (
99
+ <Text style={styles.empty}>No transactions yet</Text>
100
+ ) : (
101
+ <ScrollView style={styles.list} showsVerticalScrollIndicator={false}>
102
+ {txs.map((tx) => (
103
+ <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} style={[styles.item, { marginBottom: 8 }]}>
104
+ <View style={styles.row}>
105
+ <Text style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
106
+ <Text style={[styles.status, tx.err ? styles.failed : styles.success]}>
107
+ {tx.err ? 'Failed' : 'Success'}
108
+ </Text>
109
+ </View>
110
+ <Text style={styles.time}>{formatTime(tx.blockTime)}</Text>
111
+ </TouchableOpacity>
112
+ ))}
113
+ </ScrollView>
114
+ )}
91
115
  </View>
92
- {loading ? (
93
- <View style={{ paddingVertical: 32, alignItems: 'center' }}><ActivityIndicator color="#a3a3a3" /></View>
94
- ) : txs.length === 0 ? (
95
- <Text style={styles.empty}>No transactions yet</Text>
96
- ) : (
97
- <ScrollView style={styles.list} showsVerticalScrollIndicator={false}>
98
- {txs.map((tx) => (
99
- <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} style={[styles.item, { marginBottom: 8 }]}>
100
- <View style={styles.row}>
101
- <Text style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
102
- <Text style={[styles.status, tx.err ? styles.failed : styles.success]}>
103
- {tx.err ? 'Failed' : 'Success'}
104
- </Text>
105
- </View>
106
- <Text style={styles.time}>{formatTime(tx.blockTime)}</Text>
107
- </TouchableOpacity>
108
- ))}
109
- </ScrollView>
110
- )}
111
116
  </View>
112
117
  <% } %>
113
118
  );
package/templates/mobile/components/Recovery.tsx.ejs CHANGED
@@ -6,20 +6,21 @@ import * as Clipboard from 'expo-clipboard';
6
6
  <% if (styling !== 'nativewind') { %>
7
7
  const styles = StyleSheet.create({
8
8
  container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
9
- title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
9
+ card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
10
+ title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
10
11
  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 20 },
11
- card: { marginTop: 16, borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 16 },
12
- cardTitle: { fontSize: 14, fontWeight: '500', color: '#0a0a0a' },
12
+ inputCard: { marginTop: 16, borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 16, backgroundColor: '#171717' },
13
+ cardTitle: { fontSize: 14, fontWeight: '500', color: '#fafafa' },
13
14
  cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
14
- button: { marginTop: 12, backgroundColor: '#0a0a0a', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
15
- buttonText: { color: '#fff', fontSize: 14, fontWeight: '500' },
16
- buttonSecondary: { marginTop: 12, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#e5e5e5', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
17
- buttonTextSecondary: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
18
- info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8 },
19
- infoText: { fontSize: 12, color: '#525252' },
15
+ button: { marginTop: 12, backgroundColor: '#fafafa', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
16
+ buttonText: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
17
+ buttonSecondary: { marginTop: 12, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#262626', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
18
+ buttonTextSecondary: { color: '#fafafa', fontSize: 14, fontWeight: '500' },
19
+ info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8 },
20
+ infoText: { fontSize: 12, color: '#a3a3a3' },
20
21
  back: { marginTop: 16 },
21
22
  backText: { fontSize: 13, color: '#737373' },
22
- copied: { marginLeft: 8, color: '#16a34a', fontSize: 12 },
23
+ copied: { marginLeft: 8, color: '#4ade80', fontSize: 12 },
23
24
  });
24
25
  <% } %>
25
26
  interface Props {
@@ -50,69 +51,73 @@ export function Recovery({ onBack }: Props) {
50
51
  return (
51
52
  <% if (styling === 'nativewind') { %>
52
53
  <View className="flex-1 bg-white p-6 pt-16">
53
- <Text className="text-lg font-semibold text-black">Recovery & Backup</Text>
54
- <Text className="mt-2 text-sm text-neutral-500 leading-5">
55
- Add backup passkeys from other devices to ensure you never lose access.
56
- </Text>
57
- <View className="mt-4 border border-neutral-200 rounded-xl p-4">
58
- <Text className="text-sm font-medium text-black">Add Backup Device</Text>
59
- <Text className="mt-1 text-xs text-neutral-500">Register a passkey from another phone, tablet, or computer.</Text>
60
- <TouchableOpacity onPress={handleAddDevice} className="mt-3 bg-black py-3 rounded-lg items-center">
61
- <Text className="text-white text-sm font-medium">Add Device</Text>
54
+ <View className="bg-neutral-900 rounded-2xl p-5">
55
+ <Text className="text-lg font-semibold text-white">Recovery & Backup</Text>
56
+ <Text className="mt-2 text-sm text-neutral-500 leading-5">
57
+ Add backup passkeys from other devices to ensure you never lose access.
58
+ </Text>
59
+ <View className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
60
+ <Text className="text-sm font-medium text-white">Add Backup Device</Text>
61
+ <Text className="mt-1 text-xs text-neutral-500">Register a passkey from another phone, tablet, or computer.</Text>
62
+ <TouchableOpacity onPress={handleAddDevice} className="mt-3 bg-white py-3 rounded-lg items-center">
63
+ <Text className="text-black text-sm font-medium">Add Device</Text>
64
+ </TouchableOpacity>
65
+ </View>
66
+ <View className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
67
+ <Text className="text-sm font-medium text-white">Manage Devices</Text>
68
+ <Text className="mt-1 text-xs text-neutral-500">View and remove registered passkeys.</Text>
69
+ <TouchableOpacity onPress={handleManageDevices} className="mt-3 border border-neutral-700 py-3 rounded-lg items-center">
70
+ <Text className="text-white text-sm font-medium">View Devices</Text>
71
+ </TouchableOpacity>
72
+ </View>
73
+ <View className="mt-4 p-3 bg-neutral-800 rounded-lg">
74
+ <TouchableOpacity onPress={copyAddress} className="flex-row items-center">
75
+ <Text className="text-xs text-neutral-400">
76
+ <Text className="font-semibold">Wallet: </Text>
77
+ <Text className="font-mono">{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
78
+ </Text>
79
+ {copied && <Text className="ml-2 text-xs text-green-400">Copied!</Text>}
80
+ </TouchableOpacity>
81
+ </View>
82
+ <TouchableOpacity onPress={onBack} className="mt-4">
83
+ <Text className="text-sm text-neutral-500">← Back</Text>
62
84
  </TouchableOpacity>
63
85
  </View>
64
- <View className="mt-3 border border-neutral-200 rounded-xl p-4">
65
- <Text className="text-sm font-medium text-black">Manage Devices</Text>
66
- <Text className="mt-1 text-xs text-neutral-500">View and remove registered passkeys.</Text>
67
- <TouchableOpacity onPress={handleManageDevices} className="mt-3 border border-neutral-200 py-3 rounded-lg items-center">
68
- <Text className="text-black text-sm font-medium">View Devices</Text>
69
- </TouchableOpacity>
70
- </View>
71
- <View className="mt-4 p-3 bg-neutral-100 rounded-lg">
72
- <TouchableOpacity onPress={copyAddress} className="flex-row items-center">
73
- <Text className="text-xs text-neutral-600">
74
- <Text className="font-semibold">Wallet: </Text>
75
- <Text className="font-mono">{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
76
- </Text>
77
- {copied && <Text className="ml-2 text-xs text-green-600">Copied!</Text>}
78
- </TouchableOpacity>
79
- </View>
80
- <TouchableOpacity onPress={onBack} className="mt-4">
81
- <Text className="text-sm text-neutral-500">← Back</Text>
82
- </TouchableOpacity>
83
86
  </View>
84
87
  <% } else { %>
85
88
  <View style={styles.container}>
86
- <Text style={styles.title}>Recovery & Backup</Text>
87
- <Text style={styles.subtitle}>
88
- Add backup passkeys from other devices to ensure you never lose access.
89
- </Text>
90
89
  <View style={styles.card}>
91
- <Text style={styles.cardTitle}>Add Backup Device</Text>
92
- <Text style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</Text>
93
- <TouchableOpacity onPress={handleAddDevice} style={styles.button}>
94
- <Text style={styles.buttonText}>Add Device</Text>
95
- </TouchableOpacity>
96
- </View>
97
- <View style={styles.card}>
98
- <Text style={styles.cardTitle}>Manage Devices</Text>
99
- <Text style={styles.cardDesc}>View and remove registered passkeys.</Text>
100
- <TouchableOpacity onPress={handleManageDevices} style={styles.buttonSecondary}>
101
- <Text style={styles.buttonTextSecondary}>View Devices</Text>
102
- </TouchableOpacity>
103
- </View>
104
- <View style={styles.info}>
105
- <TouchableOpacity onPress={copyAddress}>
106
- <Text style={styles.infoText}>
107
- <Text style={{ fontWeight: '600' }}>Wallet: </Text>
108
- <Text style={{ fontFamily: 'monospace' }}>{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
109
- {copied && <Text style={styles.copied}> Copied!</Text>}
110
- </Text>
90
+ <Text style={styles.title}>Recovery & Backup</Text>
91
+ <Text style={styles.subtitle}>
92
+ Add backup passkeys from other devices to ensure you never lose access.
93
+ </Text>
94
+ <View style={styles.inputCard}>
95
+ <Text style={styles.cardTitle}>Add Backup Device</Text>
96
+ <Text style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</Text>
97
+ <TouchableOpacity onPress={handleAddDevice} style={styles.button}>
98
+ <Text style={styles.buttonText}>Add Device</Text>
99
+ </TouchableOpacity>
100
+ </View>
101
+ <View style={styles.inputCard}>
102
+ <Text style={styles.cardTitle}>Manage Devices</Text>
103
+ <Text style={styles.cardDesc}>View and remove registered passkeys.</Text>
104
+ <TouchableOpacity onPress={handleManageDevices} style={styles.buttonSecondary}>
105
+ <Text style={styles.buttonTextSecondary}>View Devices</Text>
106
+ </TouchableOpacity>
107
+ </View>
108
+ <View style={styles.info}>
109
+ <TouchableOpacity onPress={copyAddress}>
110
+ <Text style={styles.infoText}>
111
+ <Text style={{ fontWeight: '600' }}>Wallet: </Text>
112
+ <Text style={{ fontFamily: 'monospace' }}>{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
113
+ {copied && <Text style={styles.copied}> Copied!</Text>}
114
+ </Text>
115
+ </TouchableOpacity>
116
+ </View>
117
+ <TouchableOpacity onPress={onBack} style={styles.back}>
118
+ <Text style={styles.backText}>← Back</Text>
111
119
  </TouchableOpacity>
112
120
  </View>
113
- <TouchableOpacity onPress={onBack} style={styles.back}>
114
- <Text style={styles.backText}>← Back</Text>
115
- </TouchableOpacity>
116
121
  </View>
117
122
  <% } %>
118
123
  );
package/templates/vite/src/components/History.tsx.ejs CHANGED
@@ -3,18 +3,18 @@ import { useWallet } from "@lazorkit/wallet";
3
3
  import { Connection, PublicKey } from "@solana/web3.js";
4
4
  <% if (styling !== 'tailwind') { %>
5
5
  const styles: Record<string, React.CSSProperties> = {
6
- container: { width: '100%', maxWidth: 360 },
6
+ container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
7
7
  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
8
- title: { fontSize: 18, fontWeight: 600, margin: 0 },
8
+ title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
9
9
  list: { display: 'flex', flexDirection: 'column', gap: 8 },
10
- item: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 12, textDecoration: 'none', color: 'inherit' },
10
+ item: { border: '1px solid #262626', borderRadius: 12, padding: 12, textDecoration: 'none', color: '#fafafa', background: '#171717' },
11
11
  row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
12
- sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
13
- time: { fontSize: 12, color: '#a3a3a3' },
12
+ sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
13
+ time: { fontSize: 12, color: '#737373', marginTop: 4 },
14
14
  status: { fontSize: 11, padding: '2px 6px', borderRadius: 4 },
15
- success: { backgroundColor: '#dcfce7', color: '#166534' },
16
- failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
17
- empty: { textAlign: 'center', padding: 32, color: '#a3a3a3', fontSize: 14 },
15
+ success: { backgroundColor: '#14532d', color: '#4ade80' },
16
+ failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
17
+ empty: { textAlign: 'center', padding: 32, color: '#737373', fontSize: 14 },
18
18
  back: { fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
19
19
  };
20
20
  <% } %>
@@ -56,26 +56,26 @@ export function History({ onBack }: Props) {
56
56
 
57
57
  return (
58
58
  <% if (styling === 'tailwind') { %>
59
- <div className="w-full max-w-sm">
59
+ <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
60
60
  <div className="flex items-center justify-between mb-4">
61
61
  <h1 className="text-lg font-semibold">History</h1>
62
- <button onClick={onBack} className="text-sm text-neutral-500 hover:text-black">← Back</button>
62
+ <button onClick={onBack} className="text-sm text-neutral-500 hover:text-white">← Back</button>
63
63
  </div>
64
64
  {loading ? (
65
- <p className="text-center py-8 text-neutral-400">Loading...</p>
65
+ <p className="text-center py-8 text-neutral-500">Loading...</p>
66
66
  ) : txs.length === 0 ? (
67
- <p className="text-center py-8 text-neutral-400">No transactions yet</p>
67
+ <p className="text-center py-8 text-neutral-500">No transactions yet</p>
68
68
  ) : (
69
69
  <div className="space-y-2">
70
70
  {txs.map((tx) => (
71
- <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-200 rounded-xl p-3 hover:bg-neutral-50">
71
+ <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-700 rounded-xl p-3 bg-neutral-800 hover:bg-neutral-700">
72
72
  <div className="flex justify-between items-center">
73
73
  <span className="font-mono text-sm">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</span>
74
- <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
74
+ <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-900 text-red-400" : "bg-green-900 text-green-400"}`}>
75
75
  {tx.err ? "Failed" : "Success"}
76
76
  </span>
77
77
  </div>
78
- <p className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</p>
78
+ <p className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</p>
79
79
  </a>
80
80
  ))}
81
81
  </div>
package/templates/vite/src/components/Recovery.tsx.ejs CHANGED
@@ -2,15 +2,15 @@ import { useState } from "react";
2
2
  import { useWallet } from "@lazorkit/wallet";
3
3
  <% if (styling !== 'tailwind') { %>
4
4
  const styles: Record<string, React.CSSProperties> = {
5
- container: { width: '100%', maxWidth: 360 },
6
- title: { fontSize: 18, fontWeight: 600, margin: 0 },
5
+ container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
6
+ title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
7
7
  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 1.5 },
8
- card: { marginTop: 16, border: '1px solid #e5e5e5', borderRadius: 12, padding: 16 },
9
- cardTitle: { fontSize: 14, fontWeight: 500, margin: 0 },
8
+ card: { marginTop: 16, border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
9
+ cardTitle: { fontSize: 14, fontWeight: 500, margin: 0, color: '#fafafa' },
10
10
  cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
11
- button: { marginTop: 12, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
12
- buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: '1px solid #e5e5e5', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
13
- info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8, fontSize: 12, color: '#525252' },
11
+ button: { marginTop: 12, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
12
+ buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 10, border: '1px solid #262626', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
13
+ info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8, fontSize: 12, color: '#a3a3a3' },
14
14
  back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
15
15
  };
16
16
  <% } %>
@@ -41,36 +41,36 @@ export function Recovery({ onBack }: Props) {
41
41
 
42
42
  return (
43
43
  <% if (styling === 'tailwind') { %>
44
- <div className="w-full max-w-sm">
44
+ <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
45
45
  <h1 className="text-lg font-semibold">Recovery & Backup</h1>
46
46
  <p className="mt-2 text-sm text-neutral-500">
47
47
  Add backup passkeys from other devices to ensure you never lose access.
48
48
  </p>
49
- <div className="mt-4 border border-neutral-200 rounded-xl p-4">
49
+ <div className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
50
50
  <h3 className="text-sm font-medium">Add Backup Device</h3>
51
51
  <p className="mt-1 text-xs text-neutral-500">
52
52
  Register a passkey from another phone, tablet, or computer.
53
53
  </p>
54
- <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-black text-white text-sm font-medium rounded-lg hover:opacity-90">
54
+ <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-white text-black text-sm font-medium rounded-lg hover:opacity-90">
55
55
  Add Device
56
56
  </button>
57
57
  </div>
58
- <div className="mt-3 border border-neutral-200 rounded-xl p-4">
58
+ <div className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
59
59
  <h3 className="text-sm font-medium">Manage Devices</h3>
60
60
  <p className="mt-1 text-xs text-neutral-500">
61
61
  View and remove registered passkeys.
62
62
  </p>
63
- <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-black text-sm font-medium rounded-lg border border-neutral-200 hover:bg-neutral-50">
63
+ <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-white text-sm font-medium rounded-lg border border-neutral-700 hover:bg-neutral-700">
64
64
  View Devices
65
65
  </button>
66
66
  </div>
67
- <div className="mt-4 p-3 bg-neutral-100 rounded-lg">
68
- <p className="text-xs text-neutral-600">
67
+ <div className="mt-4 p-3 bg-neutral-800 rounded-lg">
68
+ <p className="text-xs text-neutral-400">
69
69
  <strong>Wallet:</strong>{" "}
70
- <button onClick={copyAddress} className="font-mono hover:text-black">
70
+ <button onClick={copyAddress} className="font-mono hover:text-white">
71
71
  {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
72
72
  </button>
73
- {copied && <span className="ml-2 text-green-600">Copied!</span>}
73
+ {copied && <span className="ml-2 text-green-400">Copied!</span>}
74
74
  </p>
75
75
  </div>
76
76
  <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">
package/templates/web/components/History.tsx.ejs CHANGED
@@ -4,20 +4,20 @@ import { useWallet } from "@lazorkit/wallet";
4
4
  import { Connection, PublicKey } from "@solana/web3.js";
5
5
  <% if (styling !== 'tailwind') { %>
6
6
  const styles: Record<string, React.CSSProperties> = {
7
- container: { width: '100%', maxWidth: 360 },
7
+ container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
8
8
  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
9
- title: { fontSize: 18, fontWeight: 600, margin: 0 },
9
+ title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
10
10
  list: { display: 'flex', flexDirection: 'column', gap: 8 },
11
- item: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 12 },
11
+ item: { border: '1px solid #262626', borderRadius: 12, padding: 12, background: '#171717' },
12
12
  row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
13
- sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
14
- time: { fontSize: 12, color: '#a3a3a3' },
13
+ sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
14
+ time: { fontSize: 12, color: '#737373', marginTop: 4 },
15
15
  status: { fontSize: 11, padding: '2px 6px', borderRadius: 4 },
16
- success: { backgroundColor: '#dcfce7', color: '#166534' },
17
- failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
18
- empty: { textAlign: 'center', padding: 32, color: '#a3a3a3', fontSize: 14 },
16
+ success: { backgroundColor: '#14532d', color: '#4ade80' },
17
+ failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
18
+ empty: { textAlign: 'center', padding: 32, color: '#737373', fontSize: 14 },
19
19
  back: { fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
20
- link: { color: '#0a0a0a', textDecoration: 'none' },
20
+ link: { color: '#fafafa', textDecoration: 'none' },
21
21
  };
22
22
  <% } %>
23
23
  interface Props {
@@ -58,26 +58,26 @@ export function History({ onBack }: Props) {
58
58
 
59
59
  return (
60
60
  <% if (styling === 'tailwind') { %>
61
- <div className="w-full max-w-sm">
61
+ <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
62
62
  <div className="flex items-center justify-between mb-4">
63
63
  <h1 className="text-lg font-semibold">History</h1>
64
- <button onClick={onBack} className="text-sm text-neutral-500 hover:text-black">← Back</button>
64
+ <button onClick={onBack} className="text-sm text-neutral-500 hover:text-white">← Back</button>
65
65
  </div>
66
66
  {loading ? (
67
- <p className="text-center py-8 text-neutral-400">Loading...</p>
67
+ <p className="text-center py-8 text-neutral-500">Loading...</p>
68
68
  ) : txs.length === 0 ? (
69
- <p className="text-center py-8 text-neutral-400">No transactions yet</p>
69
+ <p className="text-center py-8 text-neutral-500">No transactions yet</p>
70
70
  ) : (
71
71
  <div className="space-y-2">
72
72
  {txs.map((tx) => (
73
- <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-200 rounded-xl p-3 hover:bg-neutral-50">
73
+ <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-700 rounded-xl p-3 bg-neutral-800 hover:bg-neutral-700">
74
74
  <div className="flex justify-between items-center">
75
75
  <span className="font-mono text-sm">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</span>
76
- <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
76
+ <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-900 text-red-400" : "bg-green-900 text-green-400"}`}>
77
77
  {tx.err ? "Failed" : "Success"}
78
78
  </span>
79
79
  </div>
80
- <p className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</p>
80
+ <p className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</p>
81
81
  </a>
82
82
  ))}
83
83
  </div>
package/templates/web/components/Recovery.tsx.ejs CHANGED
@@ -3,15 +3,15 @@ import { useState } from "react";
3
3
  import { useWallet } from "@lazorkit/wallet";
4
4
  <% if (styling !== 'tailwind') { %>
5
5
  const styles: Record<string, React.CSSProperties> = {
6
- container: { width: '100%', maxWidth: 360 },
7
- title: { fontSize: 18, fontWeight: 600, margin: 0 },
6
+ container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
7
+ title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
8
8
  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 1.5 },
9
- card: { marginTop: 16, border: '1px solid #e5e5e5', borderRadius: 12, padding: 16 },
10
- cardTitle: { fontSize: 14, fontWeight: 500, margin: 0 },
9
+ card: { marginTop: 16, border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
10
+ cardTitle: { fontSize: 14, fontWeight: 500, margin: 0, color: '#fafafa' },
11
11
  cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
12
- button: { marginTop: 12, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
13
- buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: '1px solid #e5e5e5', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
14
- info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8, fontSize: 12, color: '#525252' },
12
+ button: { marginTop: 12, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
13
+ buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 10, border: '1px solid #262626', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
14
+ info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8, fontSize: 12, color: '#a3a3a3' },
15
15
  back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
16
16
  };
17
17
  <% } %>
@@ -42,39 +42,39 @@ export function Recovery({ onBack }: Props) {
42
42
 
43
43
  return (
44
44
  <% if (styling === 'tailwind') { %>
45
- <div className="w-full max-w-sm">
45
+ <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
46
46
  <h1 className="text-lg font-semibold">Recovery & Backup</h1>
47
47
  <p className="mt-2 text-sm text-neutral-500">
48
48
  Add backup passkeys from other devices to ensure you never lose access.
49
49
  </p>
50
- <div className="mt-4 border border-neutral-200 rounded-xl p-4">
50
+ <div className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
51
51
  <h3 className="text-sm font-medium">Add Backup Device</h3>
52
52
  <p className="mt-1 text-xs text-neutral-500">
53
53
  Register a passkey from another phone, tablet, or computer.
54
54
  </p>
55
- <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-black text-white text-sm font-medium rounded-lg hover:opacity-90">
55
+ <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-white text-black text-sm font-medium rounded-lg hover:opacity-90">
56
56
  Add Device
57
57
  </button>
58
58
  </div>
59
- <div className="mt-3 border border-neutral-200 rounded-xl p-4">
59
+ <div className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
60
60
  <h3 className="text-sm font-medium">Manage Devices</h3>
61
61
  <p className="mt-1 text-xs text-neutral-500">
62
62
  View and remove registered passkeys.
63
63
  </p>
64
- <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-black text-sm font-medium rounded-lg border border-neutral-200 hover:bg-neutral-50">
64
+ <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-white text-sm font-medium rounded-lg border border-neutral-700 hover:bg-neutral-700">
65
65
  View Devices
66
66
  </button>
67
67
  </div>
68
- <div className="mt-4 p-3 bg-neutral-100 rounded-lg">
69
- <p className="text-xs text-neutral-600">
68
+ <div className="mt-4 p-3 bg-neutral-800 rounded-lg">
69
+ <p className="text-xs text-neutral-400">
70
70
  <strong>Wallet:</strong>{" "}
71
- <button onClick={copyAddress} className="font-mono hover:text-black">
71
+ <button onClick={copyAddress} className="font-mono hover:text-white">
72
72
  {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
73
73
  </button>
74
- {copied && <span className="ml-2 text-green-600">Copied!</span>}
74
+ {copied && <span className="ml-2 text-green-400">Copied!</span>}
75
75
  </p>
76
76
  </div>
77
- <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">
77
+ <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-white">
78
78
  ← Back
79
79
  </button>
80
80
  </div>