create-lightning-scaffold 1.0.2 → 1.0.5

package/README.md

@@ -1,8 +1,17 @@
 # create-lightning-scaffold
-<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" />
+
+![Demo](demo.gif)
+
+> ⚡ **5 minutes from `npx` to first gasless transaction**
 
 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.
 
+## 🚀 Live Demo
+
+**[Try it live on Devnet →](https://lighting-demo.vercel.app)**
+
+Experience passkey authentication and gasless transactions without installing anything.
+
 ## Quick Start
 
 ```bash
@@ -142,6 +151,35 @@ const { swapTransaction } = await fetch('https://api.jup.ag/swap/v1/swap', {
 }).then(r => r.json());
 ```
 
+## Architecture
+
+```
+┌─────────────┐     ┌──────────────────┐     ┌─────────────────┐
+│   User      │────▶│  LazorKit Portal │────▶│  Smart Wallet   │
+│  (Passkey)  │     │  (Auth + Keys)   │     │  (PDA on-chain) │
+└─────────────┘     └──────────────────┘     └─────────────────┘
+                            │
+                            ▼
+                    ┌──────────────────┐
+                    │    Paymaster     │
+                    │  (Pays gas fees) │
+                    └──────────────────┘
+```
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Passkey not working | Ensure HTTPS (localhost OK for dev), check browser supports WebAuthn |
+| Transaction failing | Verify wallet has balance, check RPC endpoint, confirm paymaster config |
+| Mobile redirect issues | Ensure deep link scheme matches `app.json` config |
+
+## More Resources
+
+- **[SNIPPETS.md](./SNIPPETS.md)** - Copy-paste code examples
+- **[TUTORIALS.md](./TUTORIALS.md)** - Step-by-step integration guides
+- **[Twitter Thread](https://x.com/Tobi_Builder/status/2011043242251293087)** - Passkey wallet tutorial
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lightning-scaffold",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "description": "CLI to scaffold projects with LazorKit SDK integration",
   "type": "module",
   "bin": {

package/templates/base/.env.example.ejs

@@ -8,6 +8,11 @@ EXPO_PUBLIC_LAZORKIT_PAYMASTER_URL=https://kora.devnet.lazorkit.com
 NEXT_PUBLIC_SOLANA_RPC=https://api.devnet.solana.com
 EXPO_PUBLIC_SOLANA_RPC=https://api.devnet.solana.com
 VITE_SOLANA_RPC=https://api.devnet.solana.com
+
+# Jupiter API (get free key at https://portal.jup.ag)
+NEXT_PUBLIC_JUPITER_API_KEY=
+EXPO_PUBLIC_JUPITER_API_KEY=
+VITE_JUPITER_API_KEY=
 <% if (backend === 'supabase') { %>
 # Supabase
 NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co

package/templates/mobile/components/History.tsx.ejs

@@ -6,18 +6,19 @@ import * as Linking from 'expo-linking';
 <% if (styling !== 'nativewind') { %>
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
+  card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
   header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
-  title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
+  title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
   back: { fontSize: 13, color: '#737373' },
   list: { gap: 8 },
-  item: { borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 12 },
+  item: { borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 12, backgroundColor: '#171717' },
   row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
-  time: { fontSize: 12, color: '#a3a3a3', marginTop: 4 },
+  sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
+  time: { fontSize: 12, color: '#737373', marginTop: 4 },
   status: { fontSize: 11, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, overflow: 'hidden' },
-  success: { backgroundColor: '#dcfce7', color: '#166534' },
-  failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
-  empty: { textAlign: 'center', paddingVertical: 32, color: '#a3a3a3', fontSize: 14 },
+  success: { backgroundColor: '#14532d', color: '#4ade80' },
+  failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
+  empty: { textAlign: 'center', paddingVertical: 32, color: '#737373', fontSize: 14 },
 });
 <% } %>
 interface Props {
@@ -27,7 +28,7 @@ interface Props {
 interface TxInfo {
   signature: string;
   slot: number;
-  blockTime: number | null;
+  blockTime: number | null | undefined;
   err: any;
 }
 
@@ -59,55 +60,59 @@ export function History({ onBack }: Props) {
   return (
 <% if (styling === 'nativewind') { %>
     <View className="flex-1 bg-white p-6 pt-16">
-      <View className="flex-row items-center justify-between mb-4">
-        <Text className="text-lg font-semibold text-black">History</Text>
-        <TouchableOpacity onPress={onBack}><Text className="text-sm text-neutral-500">← Back</Text></TouchableOpacity>
+      <View className="bg-neutral-900 rounded-2xl p-5">
+        <View className="flex-row items-center justify-between mb-4">
+          <Text className="text-lg font-semibold text-white">History</Text>
+          <TouchableOpacity onPress={onBack}><Text className="text-sm text-neutral-500">← Back</Text></TouchableOpacity>
+        </View>
+        {loading ? (
+          <View className="py-8 items-center"><ActivityIndicator color="#737373" /></View>
+        ) : txs.length === 0 ? (
+          <Text className="text-center py-8 text-neutral-500">No transactions yet</Text>
+        ) : (
+          <ScrollView className="gap-2" showsVerticalScrollIndicator={false}>
+            {txs.map((tx) => (
+              <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} className="border border-neutral-700 rounded-xl p-3 mb-2 bg-neutral-800">
+                <View className="flex-row justify-between items-center">
+                  <Text className="font-mono text-sm text-white">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
+                  <Text className={`text-xs px-2 py-0.5 rounded ${tx.err ? 'bg-red-900 text-red-400' : 'bg-green-900 text-green-400'}`}>
+                    {tx.err ? 'Failed' : 'Success'}
+                  </Text>
+                </View>
+                <Text className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        )}
       </View>
-      {loading ? (
-        <View className="py-8 items-center"><ActivityIndicator color="#a3a3a3" /></View>
-      ) : txs.length === 0 ? (
-        <Text className="text-center py-8 text-neutral-400">No transactions yet</Text>
-      ) : (
-        <ScrollView className="gap-2" showsVerticalScrollIndicator={false}>
-          {txs.map((tx) => (
-            <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} className="border border-neutral-200 rounded-xl p-3 mb-2">
-              <View className="flex-row justify-between items-center">
-                <Text className="font-mono text-sm text-black">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
-                <Text className={`text-xs px-2 py-0.5 rounded ${tx.err ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
-                  {tx.err ? 'Failed' : 'Success'}
-                </Text>
-              </View>
-              <Text className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      )}
     </View>
 <% } else { %>
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.title}>History</Text>
-        <TouchableOpacity onPress={onBack}><Text style={styles.back}>← Back</Text></TouchableOpacity>
+      <View style={styles.card}>
+        <View style={styles.header}>
+          <Text style={styles.title}>History</Text>
+          <TouchableOpacity onPress={onBack}><Text style={styles.back}>← Back</Text></TouchableOpacity>
+        </View>
+        {loading ? (
+          <View style={{ paddingVertical: 32, alignItems: 'center' }}><ActivityIndicator color="#737373" /></View>
+        ) : txs.length === 0 ? (
+          <Text style={styles.empty}>No transactions yet</Text>
+        ) : (
+          <ScrollView style={styles.list} showsVerticalScrollIndicator={false}>
+            {txs.map((tx) => (
+              <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} style={[styles.item, { marginBottom: 8 }]}>
+                <View style={styles.row}>
+                  <Text style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
+                  <Text style={[styles.status, tx.err ? styles.failed : styles.success]}>
+                    {tx.err ? 'Failed' : 'Success'}
+                  </Text>
+                </View>
+                <Text style={styles.time}>{formatTime(tx.blockTime)}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        )}
       </View>
-      {loading ? (
-        <View style={{ paddingVertical: 32, alignItems: 'center' }}><ActivityIndicator color="#a3a3a3" /></View>
-      ) : txs.length === 0 ? (
-        <Text style={styles.empty}>No transactions yet</Text>
-      ) : (
-        <ScrollView style={styles.list} showsVerticalScrollIndicator={false}>
-          {txs.map((tx) => (
-            <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} style={[styles.item, { marginBottom: 8 }]}>
-              <View style={styles.row}>
-                <Text style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
-                <Text style={[styles.status, tx.err ? styles.failed : styles.success]}>
-                  {tx.err ? 'Failed' : 'Success'}
-                </Text>
-              </View>
-              <Text style={styles.time}>{formatTime(tx.blockTime)}</Text>
-            </TouchableOpacity>
-          ))}
-        </ScrollView>
-      )}
     </View>
 <% } %>
   );

package/templates/mobile/components/Recovery.tsx.ejs

@@ -6,20 +6,21 @@ import * as Clipboard from 'expo-clipboard';
 <% if (styling !== 'nativewind') { %>
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
-  title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
+  card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
+  title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
   subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 20 },
-  card: { marginTop: 16, borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 16 },
-  cardTitle: { fontSize: 14, fontWeight: '500', color: '#0a0a0a' },
+  inputCard: { marginTop: 16, borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 16, backgroundColor: '#171717' },
+  cardTitle: { fontSize: 14, fontWeight: '500', color: '#fafafa' },
   cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
-  button: { marginTop: 12, backgroundColor: '#0a0a0a', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
-  buttonText: { color: '#fff', fontSize: 14, fontWeight: '500' },
-  buttonSecondary: { marginTop: 12, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#e5e5e5', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
-  buttonTextSecondary: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
-  info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8 },
-  infoText: { fontSize: 12, color: '#525252' },
+  button: { marginTop: 12, backgroundColor: '#fafafa', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
+  buttonText: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
+  buttonSecondary: { marginTop: 12, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#262626', paddingVertical: 12, borderRadius: 10, alignItems: 'center' },
+  buttonTextSecondary: { color: '#fafafa', fontSize: 14, fontWeight: '500' },
+  info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8 },
+  infoText: { fontSize: 12, color: '#a3a3a3' },
   back: { marginTop: 16 },
   backText: { fontSize: 13, color: '#737373' },
-  copied: { marginLeft: 8, color: '#16a34a', fontSize: 12 },
+  copied: { marginLeft: 8, color: '#4ade80', fontSize: 12 },
 });
 <% } %>
 interface Props {
@@ -32,11 +33,17 @@ export function Recovery({ onBack }: Props) {
   const portalUrl = process.env.EXPO_PUBLIC_LAZORKIT_PORTAL_URL || 'https://portal.lazor.sh';
 
   const handleAddDevice = () => {
-    Linking.openURL(`${portalUrl}/recovery/add-device`);
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=add-device`
+      : portalUrl;
+    Linking.openURL(url);
   };
 
   const handleManageDevices = () => {
-    Linking.openURL(`${portalUrl}/recovery/devices`);
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=manage-devices`
+      : portalUrl;
+    Linking.openURL(url);
   };
 
   const copyAddress = async () => {
@@ -50,69 +57,73 @@ export function Recovery({ onBack }: Props) {
   return (
 <% if (styling === 'nativewind') { %>
     <View className="flex-1 bg-white p-6 pt-16">
-      <Text className="text-lg font-semibold text-black">Recovery & Backup</Text>
-      <Text className="mt-2 text-sm text-neutral-500 leading-5">
-        Add backup passkeys from other devices to ensure you never lose access.
-      </Text>
-      <View className="mt-4 border border-neutral-200 rounded-xl p-4">
-        <Text className="text-sm font-medium text-black">Add Backup Device</Text>
-        <Text className="mt-1 text-xs text-neutral-500">Register a passkey from another phone, tablet, or computer.</Text>
-        <TouchableOpacity onPress={handleAddDevice} className="mt-3 bg-black py-3 rounded-lg items-center">
-          <Text className="text-white text-sm font-medium">Add Device</Text>
+      <View className="bg-neutral-900 rounded-2xl p-5">
+        <Text className="text-lg font-semibold text-white">Recovery & Backup</Text>
+        <Text className="mt-2 text-sm text-neutral-500 leading-5">
+          Add backup passkeys from other devices to ensure you never lose access.
+        </Text>
+        <View className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
+          <Text className="text-sm font-medium text-white">Add Backup Device</Text>
+          <Text className="mt-1 text-xs text-neutral-500">Register a passkey from another phone, tablet, or computer.</Text>
+          <TouchableOpacity onPress={handleAddDevice} className="mt-3 bg-white py-3 rounded-lg items-center">
+            <Text className="text-black text-sm font-medium">Add Device</Text>
+          </TouchableOpacity>
+        </View>
+        <View className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
+          <Text className="text-sm font-medium text-white">Manage Devices</Text>
+          <Text className="mt-1 text-xs text-neutral-500">View and remove registered passkeys.</Text>
+          <TouchableOpacity onPress={handleManageDevices} className="mt-3 border border-neutral-700 py-3 rounded-lg items-center">
+            <Text className="text-white text-sm font-medium">View Devices</Text>
+          </TouchableOpacity>
+        </View>
+        <View className="mt-4 p-3 bg-neutral-800 rounded-lg">
+          <TouchableOpacity onPress={copyAddress} className="flex-row items-center">
+            <Text className="text-xs text-neutral-400">
+              <Text className="font-semibold">Wallet: </Text>
+              <Text className="font-mono">{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
+            </Text>
+            {copied && <Text className="ml-2 text-xs text-green-400">Copied!</Text>}
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity onPress={onBack} className="mt-4">
+          <Text className="text-sm text-neutral-500">← Back</Text>
         </TouchableOpacity>
       </View>
-      <View className="mt-3 border border-neutral-200 rounded-xl p-4">
-        <Text className="text-sm font-medium text-black">Manage Devices</Text>
-        <Text className="mt-1 text-xs text-neutral-500">View and remove registered passkeys.</Text>
-        <TouchableOpacity onPress={handleManageDevices} className="mt-3 border border-neutral-200 py-3 rounded-lg items-center">
-          <Text className="text-black text-sm font-medium">View Devices</Text>
-        </TouchableOpacity>
-      </View>
-      <View className="mt-4 p-3 bg-neutral-100 rounded-lg">
-        <TouchableOpacity onPress={copyAddress} className="flex-row items-center">
-          <Text className="text-xs text-neutral-600">
-            <Text className="font-semibold">Wallet: </Text>
-            <Text className="font-mono">{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
-          </Text>
-          {copied && <Text className="ml-2 text-xs text-green-600">Copied!</Text>}
-        </TouchableOpacity>
-      </View>
-      <TouchableOpacity onPress={onBack} className="mt-4">
-        <Text className="text-sm text-neutral-500">← Back</Text>
-      </TouchableOpacity>
     </View>
 <% } else { %>
     <View style={styles.container}>
-      <Text style={styles.title}>Recovery & Backup</Text>
-      <Text style={styles.subtitle}>
-        Add backup passkeys from other devices to ensure you never lose access.
-      </Text>
       <View style={styles.card}>
-        <Text style={styles.cardTitle}>Add Backup Device</Text>
-        <Text style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</Text>
-        <TouchableOpacity onPress={handleAddDevice} style={styles.button}>
-          <Text style={styles.buttonText}>Add Device</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.card}>
-        <Text style={styles.cardTitle}>Manage Devices</Text>
-        <Text style={styles.cardDesc}>View and remove registered passkeys.</Text>
-        <TouchableOpacity onPress={handleManageDevices} style={styles.buttonSecondary}>
-          <Text style={styles.buttonTextSecondary}>View Devices</Text>
-        </TouchableOpacity>
-      </View>
-      <View style={styles.info}>
-        <TouchableOpacity onPress={copyAddress}>
-          <Text style={styles.infoText}>
-            <Text style={{ fontWeight: '600' }}>Wallet: </Text>
-            <Text style={{ fontFamily: 'monospace' }}>{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
-            {copied && <Text style={styles.copied}> Copied!</Text>}
-          </Text>
+        <Text style={styles.title}>Recovery & Backup</Text>
+        <Text style={styles.subtitle}>
+          Add backup passkeys from other devices to ensure you never lose access.
+        </Text>
+        <View style={styles.inputCard}>
+          <Text style={styles.cardTitle}>Add Backup Device</Text>
+          <Text style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</Text>
+          <TouchableOpacity onPress={handleAddDevice} style={styles.button}>
+            <Text style={styles.buttonText}>Add Device</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.inputCard}>
+          <Text style={styles.cardTitle}>Manage Devices</Text>
+          <Text style={styles.cardDesc}>View and remove registered passkeys.</Text>
+          <TouchableOpacity onPress={handleManageDevices} style={styles.buttonSecondary}>
+            <Text style={styles.buttonTextSecondary}>View Devices</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.info}>
+          <TouchableOpacity onPress={copyAddress}>
+            <Text style={styles.infoText}>
+              <Text style={{ fontWeight: '600' }}>Wallet: </Text>
+              <Text style={{ fontFamily: 'monospace' }}>{wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}</Text>
+              {copied && <Text style={styles.copied}> Copied!</Text>}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <TouchableOpacity onPress={onBack} style={styles.back}>
+          <Text style={styles.backText}>← Back</Text>
         </TouchableOpacity>
       </View>
-      <TouchableOpacity onPress={onBack} style={styles.back}>
-        <Text style={styles.backText}>← Back</Text>
-      </TouchableOpacity>
     </View>
 <% } %>
   );