create-lightning-scaffold 1.0.3 → 1.0.5

package/README.md

@@ -2,8 +2,16 @@
 
 ![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
@@ -143,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.3",
+  "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

@@ -28,7 +28,7 @@ interface Props {
 interface TxInfo {
   signature: string;
   slot: number;
-  blockTime: number | null;
+  blockTime: number | null | undefined;
   err: any;
 }
 

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

@@ -33,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 () => {

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

@@ -15,6 +15,7 @@ const TOKENS = [
 const SLIPPAGE_OPTIONS = [50, 100, 300];
 
 const JUPITER_API = 'https://api.jup.ag/swap/v1';
+const JUP_API_KEY = process.env.EXPO_PUBLIC_JUPITER_API_KEY || '';
 
 function useBalances(walletAddress: string | undefined) {
   const [balances, setBalances] = useState<Record<string, number>>({});
@@ -23,9 +24,7 @@ function useBalances(walletAddress: string | undefined) {
     const rpc = process.env.EXPO_PUBLIC_SOLANA_RPC || 'https://api.devnet.solana.com';
     const conn = new Connection(rpc);
     const pk = new PublicKey(walletAddress);
-    
     conn.getBalance(pk).then((bal) => setBalances((b) => ({ ...b, SOL: bal / 1e9 }))).catch(() => {});
-    
     conn.getParsedTokenAccountsByOwner(pk, { programId: new PublicKey('TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA') })
       .then((res) => {
         const tokenBals: Record<string, number> = {};
@@ -39,13 +38,6 @@ function useBalances(walletAddress: string | undefined) {
   }, [walletAddress]);
   return balances;
 }
-
-const TOKENS = [
-  { symbol: 'SOL', mint: 'So11111111111111111111111111111111111111112', decimals: 9 },
-  { symbol: 'USDC', mint: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', decimals: 6 },
-];
-
-const JUPITER_API = 'https://api.jup.ag/swap/v1';
 <% if (styling !== 'nativewind') { %>
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
@@ -101,22 +93,20 @@ export function Swap() {
   const [showPicker, setShowPicker] = useState<'from' | 'to' | null>(null);
   const redirectUrl = Linking.createURL('/');
 
-  const switchTokens = () => {
-    setFromToken(toToken);
-    setToToken(fromToken);
-    setAmount('');
-    setQuote(null);
-  };
+  const switchTokens = () => { setFromToken(toToken); setToToken(fromToken); setAmount(''); setQuote(null); };
 
   useEffect(() => {
     if (!amount || parseFloat(amount) <= 0) { setQuote(null); return; }
     const timeout = setTimeout(async () => {
       try {
         const inputAmount = Math.floor(parseFloat(amount) * 10 ** fromToken.decimals);
-        const res = await fetch(`${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}`);
+        const headers: Record<string, string> = {};
+        if (JUP_API_KEY) headers['x-api-key'] = JUP_API_KEY;
+        const res = await fetch(`${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}&restrictIntermediateTokens=true`, { headers });
         const data = await res.json();
         if (data.outAmount) setQuote(data);
-      } catch (e) { console.error('Quote error:', e); }
+        else setQuote(null);
+      } catch (e) { console.error('Quote error:', e); setQuote(null); }
     }, 500);
     return () => clearTimeout(timeout);
   }, [amount, fromToken, toToken, slippage]);
@@ -125,34 +115,48 @@ export function Swap() {
 
   const handleSwap = async () => {
     if (!wallet?.smartWallet || !quote) return;
-    setLoading(true);
-    setResult(null);
+    setLoading(true); setResult(null);
     try {
-      const swapRes = await fetch(`${JUPITER_API}/swap`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ quoteResponse: quote, userPublicKey: wallet.smartWallet, dynamicComputeUnitLimit: true, dynamicSlippage: true }),
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' };
+      if (JUP_API_KEY) headers['x-api-key'] = JUP_API_KEY;
+      const swapRes = await fetch(`${JUPITER_API}/swap-instructions`, {
+        method: 'POST', headers,
+        body: JSON.stringify({ quoteResponse: quote, userPublicKey: wallet.smartWallet, wrapAndUnwrapSol: true, dynamicComputeUnitLimit: true }),
+      });
+      if (!swapRes.ok) throw new Error(`Jupiter API error: ${await swapRes.text()}`);
+      const { setupInstructions = [], swapInstruction, cleanupInstruction, addressLookupTableAddresses = [] } = await swapRes.json();
+      if (!swapInstruction) throw new Error('No swap instruction returned');
+
+      const toInstruction = (ix: any) => ({
+        programId: new PublicKey(ix.programId),
+        keys: ix.accounts.map((acc: any) => ({ pubkey: new PublicKey(acc.pubkey), isSigner: acc.isSigner, isWritable: acc.isWritable })),
+        data: Buffer.from(ix.data, 'base64'),
       });
-      const { swapTransaction } = await swapRes.json();
-      const sig = await signAndSendTransaction({ instructions: [], transactionOptions: { feeToken: 'USDC' } }, { redirectUrl });
+      const instructions = [...setupInstructions.map(toInstruction), toInstruction(swapInstruction), ...(cleanupInstruction ? [toInstruction(cleanupInstruction)] : [])];
+
+      let addressLookupTableAccounts: any[] = [];
+      if (addressLookupTableAddresses.length > 0) {
+        const rpc = process.env.EXPO_PUBLIC_SOLANA_RPC || 'https://api.devnet.solana.com';
+        const conn = new Connection(rpc);
+        const alts = await Promise.all(addressLookupTableAddresses.map(async (addr: string) => (await conn.getAddressLookupTable(new PublicKey(addr))).value));
+        addressLookupTableAccounts = alts.filter(Boolean);
+      }
+
+      const sig = await signAndSendTransaction({ instructions, transactionOptions: { feeToken: 'USDC', addressLookupTableAccounts } }, { redirectUrl });
       setResult({ success: true, message: `Swapped! ${sig.slice(0, 8)}...` });
-      setAmount('');
-      setQuote(null);
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : 'Swap failed' });
-    } finally { setLoading(false); }
+      setAmount(''); setQuote(null);
+    } catch (e) { console.error('Swap error:', e); setResult({ success: false, message: e instanceof Error ? e.message : 'Swap failed' }); }
+    finally { setLoading(false); }
   };
 
   const handleSignMessage = async () => {
-    setSigning(true);
-    setResult(null);
+    setSigning(true); setResult(null);
     try {
       const message = `Verify wallet ownership\nTimestamp: ${Date.now()}`;
       const signature = await signMessage(message, { redirectUrl });
       setResult({ success: true, message: `Signed: ${signature.slice(0, 16)}...` });
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : 'Sign failed' });
-    } finally { setSigning(false); }
+    } catch (e) { console.error('Sign error:', e); setResult({ success: false, message: e instanceof Error ? e.message : 'Sign failed' }); }
+    finally { setSigning(false); }
   };
 
   const addr = wallet?.smartWallet || '';
@@ -161,152 +165,54 @@ export function Swap() {
 <% if (styling === 'nativewind') { %>
     <View className="flex-1 bg-white p-6 pt-16">
       <View className="bg-neutral-900 rounded-2xl p-5">
-        <View className="flex-row items-center justify-between mb-6">
-          <Text className="text-lg font-semibold text-white">Swap</Text>
-          <TouchableOpacity onPress={() => disconnect()}>
-            <Text className="text-xs text-neutral-500">{addr.slice(0, 6)}...{addr.slice(-4)}</Text>
-          </TouchableOpacity>
-        </View>
-
+        <View className="flex-row items-center justify-between mb-6"><Text className="text-lg font-semibold text-white">Swap</Text><TouchableOpacity onPress={() => disconnect()}><Text className="text-xs text-neutral-500">{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity></View>
         <View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
-          <View className="flex-row justify-between mb-2">
-            <Text className="text-xs text-neutral-500">From</Text>
-            <Text className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
-          </View>
-          <View className="flex-row items-center">
-            <TextInput className="flex-1 text-2xl font-medium text-white" placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
-            <TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}>
-              <Text className="text-sm font-medium text-white mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
-            </TouchableOpacity>
-          </View>
+          <View className="flex-row justify-between mb-2"><Text className="text-xs text-neutral-500">From</Text><Text className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text></View>
+          <View className="flex-row items-center"><TextInput className="flex-1 text-2xl font-medium text-white" placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" /><TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}><Text className="text-sm font-medium text-white mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text></TouchableOpacity></View>
           <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text className="text-xs text-neutral-500 mt-1">Max</Text></TouchableOpacity>
         </View>
-
-        <View className="items-center my-2">
-          <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>
-        </View>
-
+        <View className="items-center my-2"><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></View>
         <View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
-          <View className="flex-row justify-between mb-2">
-            <Text className="text-xs text-neutral-500">To</Text>
-            <Text className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
-          </View>
-          <View className="flex-row items-center">
-            <Text className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</Text>
-            <TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('to')}>
-              <Text className="text-sm font-medium text-white mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
-            </TouchableOpacity>
-          </View>
+          <View className="flex-row justify-between mb-2"><Text className="text-xs text-neutral-500">To</Text><Text className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text></View>
+          <View className="flex-row items-center"><Text className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</Text><TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('to')}><Text className="text-sm font-medium text-white mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text></TouchableOpacity></View>
           {quote && <Text className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
         </View>
-
-        <View className="flex-row items-center justify-between mt-3">
-          <Text className="text-xs text-neutral-500">Slippage</Text>
-          <View className="flex-row gap-1">
-            {SLIPPAGE_OPTIONS.map((s) => (
-              <TouchableOpacity key={s} onPress={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-white' : 'bg-neutral-700'}`}>
-                <Text className={`text-xs ${slippage === s ? 'text-black' : 'text-neutral-400'}`}>{s / 100}%</Text>
-              </TouchableOpacity>
-            ))}
-          </View>
-        </View>
-
-        <TouchableOpacity className={`mt-4 bg-white py-3.5 rounded-xl items-center ${loading || !quote ? 'opacity-50' : ''}`} onPress={handleSwap} disabled={loading || !quote}>
-          {loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text className="text-black text-sm font-medium">Swap</Text>}
-        </TouchableOpacity>
-
-        <TouchableOpacity className={`mt-2 border border-neutral-700 py-3 rounded-xl items-center ${signing ? 'opacity-50' : ''}`} onPress={handleSignMessage} disabled={signing}>
-          {signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text className="text-white text-sm font-medium">Sign Message</Text>}
-        </TouchableOpacity>
-
+        <View className="flex-row items-center justify-between mt-3"><Text className="text-xs text-neutral-500">Slippage</Text><View className="flex-row gap-1">{SLIPPAGE_OPTIONS.map((s) => (<TouchableOpacity key={s} onPress={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-white' : 'bg-neutral-700'}`}><Text className={`text-xs ${slippage === s ? 'text-black' : 'text-neutral-400'}`}>{s / 100}%</Text></TouchableOpacity>))}</View></View>
+        <TouchableOpacity className={`mt-4 bg-white py-3.5 rounded-xl items-center ${loading || !quote ? 'opacity-50' : ''}`} onPress={handleSwap} disabled={loading || !quote}>{loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text className="text-black text-sm font-medium">Swap</Text>}</TouchableOpacity>
+        <TouchableOpacity className={`mt-2 border border-neutral-700 py-3 rounded-xl items-center ${signing ? 'opacity-50' : ''}`} onPress={handleSignMessage} disabled={signing}>{signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text className="text-white text-sm font-medium">Sign Message</Text>}</TouchableOpacity>
         {result && <Text className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-400' : 'text-red-400'}`}>{result.message}</Text>}
         <Text className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</Text>
       </View>
-
       <Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
         <TouchableOpacity className="flex-1 justify-end bg-black/50" activeOpacity={1} onPress={() => setShowPicker(null)}>
-          <View className="bg-neutral-800 rounded-t-2xl p-4 pb-8">
-            <Text className="text-base font-semibold text-center mb-4 text-white">Select Token</Text>
-            {TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (
-              <TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-700" onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}>
-                <Text className="text-base text-white">{t.symbol}</Text>
-              </TouchableOpacity>
-            ))}
-          </View>
+          <View className="bg-neutral-800 rounded-t-2xl p-4 pb-8"><Text className="text-base font-semibold text-center mb-4 text-white">Select Token</Text>{TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (<TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-700" onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}><Text className="text-base text-white">{t.symbol}</Text></TouchableOpacity>))}</View>
         </TouchableOpacity>
       </Modal>
     </View>
 <% } else { %>
     <View style={styles.container}>
       <View style={styles.card}>
-        <View style={styles.header}>
-          <Text style={styles.title}>Swap</Text>
-          <TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity>
-        </View>
-
+        <View style={styles.header}><Text style={styles.title}>Swap</Text><TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity></View>
         <View style={styles.inputCard}>
-          <View style={styles.labelRow}>
-            <Text style={styles.label}>From</Text>
-            <Text style={styles.label}>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
-          </View>
-          <View style={styles.inputRow}>
-            <TextInput style={styles.input} placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
-            <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('from')}>
-              <Text style={styles.tokenText}>{fromToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
-            </TouchableOpacity>
-          </View>
+          <View style={styles.labelRow}><Text style={styles.label}>From</Text><Text style={styles.label}>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text></View>
+          <View style={styles.inputRow}><TextInput style={styles.input} placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" /><TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('from')}><Text style={styles.tokenText}>{fromToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text></TouchableOpacity></View>
           <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text style={styles.switchText}>Max</Text></TouchableOpacity>
         </View>
-
         <View style={styles.arrow}><TouchableOpacity onPress={switchTokens} style={styles.arrowBox}><Text style={styles.arrowText}>↓</Text></TouchableOpacity></View>
-
         <View style={styles.inputCard}>
-          <View style={styles.labelRow}>
-            <Text style={styles.label}>To</Text>
-            <Text style={styles.label}>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
-          </View>
-          <View style={styles.inputRow}>
-            <Text style={styles.outputText}>{outputAmount}</Text>
-            <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('to')}>
-              <Text style={styles.tokenText}>{toToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
-            </TouchableOpacity>
-          </View>
+          <View style={styles.labelRow}><Text style={styles.label}>To</Text><Text style={styles.label}>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text></View>
+          <View style={styles.inputRow}><Text style={styles.outputText}>{outputAmount}</Text><TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('to')}><Text style={styles.tokenText}>{toToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text></TouchableOpacity></View>
           {quote && <Text style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
         </View>
-
-        <View style={styles.slippageRow}>
-          <Text style={styles.slippageLabel}>Slippage</Text>
-          <View style={{ flexDirection: 'row', gap: 4 }}>
-            {SLIPPAGE_OPTIONS.map((s) => (
-              <TouchableOpacity key={s} onPress={() => setSlippage(s)} style={[styles.slippageBtn, slippage === s && styles.slippageBtnActive]}>
-                <Text style={[styles.slippageBtnText, slippage === s && styles.slippageBtnTextActive]}>{s / 100}%</Text>
-              </TouchableOpacity>
-            ))}
-          </View>
-        </View>
-
-        <TouchableOpacity style={[styles.button, (loading || !quote) && styles.buttonDisabled]} onPress={handleSwap} disabled={loading || !quote}>
-          {loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text style={styles.buttonText}>Swap</Text>}
-        </TouchableOpacity>
-
-        <TouchableOpacity style={[styles.buttonSecondary, signing && styles.buttonDisabled]} onPress={handleSignMessage} disabled={signing}>
-          {signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text style={styles.buttonTextSecondary}>Sign Message</Text>}
-        </TouchableOpacity>
-
+        <View style={styles.slippageRow}><Text style={styles.slippageLabel}>Slippage</Text><View style={{ flexDirection: 'row', gap: 4 }}>{SLIPPAGE_OPTIONS.map((s) => (<TouchableOpacity key={s} onPress={() => setSlippage(s)} style={[styles.slippageBtn, slippage === s && styles.slippageBtnActive]}><Text style={[styles.slippageBtnText, slippage === s && styles.slippageBtnTextActive]}>{s / 100}%</Text></TouchableOpacity>))}</View></View>
+        <TouchableOpacity style={[styles.button, (loading || !quote) && styles.buttonDisabled]} onPress={handleSwap} disabled={loading || !quote}>{loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text style={styles.buttonText}>Swap</Text>}</TouchableOpacity>
+        <TouchableOpacity style={[styles.buttonSecondary, signing && styles.buttonDisabled]} onPress={handleSignMessage} disabled={signing}>{signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text style={styles.buttonTextSecondary}>Sign Message</Text>}</TouchableOpacity>
         {result && <Text style={[styles.result, { color: result.success ? '#737373' : '#ef4444' }]}>{result.message}</Text>}
         <Text style={styles.footer}>Gas sponsored · Powered by LazorKit + Jupiter</Text>
       </View>
-
       <Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
         <TouchableOpacity style={styles.modal} activeOpacity={1} onPress={() => setShowPicker(null)}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalTitle}>Select Token</Text>
-            {TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (
-              <TouchableOpacity key={t.symbol} style={styles.modalItem} onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}>
-                <Text style={styles.modalItemText}>{t.symbol}</Text>
-              </TouchableOpacity>
-            ))}
-          </View>
+          <View style={styles.modalContent}><Text style={styles.modalTitle}>Select Token</Text>{TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (<TouchableOpacity key={t.symbol} style={styles.modalItem} onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}><Text style={styles.modalItemText}>{t.symbol}</Text></TouchableOpacity>))}</View>
         </TouchableOpacity>
       </Modal>
     </View>

package/templates/state/redux/index.ts

@@ -1,26 +1,21 @@
 import { configureStore, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
-import type { LazorWallet } from "../lazorkit";
 
 interface AppState {
-  wallet: LazorWallet | null;
   isLoading: boolean;
 }
 
 const appSlice = createSlice({
   name: "app",
-  initialState: { wallet: null, isLoading: false } as AppState,
+  initialState: { isLoading: false } as AppState,
   reducers: {
-    setWallet: (state, action: PayloadAction<LazorWallet | null>) => {
-      state.wallet = action.payload;
-    },
     setLoading: (state, action: PayloadAction<boolean>) => {
       state.isLoading = action.payload;
     },
   },
 });
 
-export const { setWallet, setLoading } = appSlice.actions;
+export const { setLoading } = appSlice.actions;
 
 export const store = configureStore({ reducer: { app: appSlice.reducer } });
 

package/templates/state/zustand/index.ts

@@ -1,16 +1,11 @@
 import { create } from "zustand";
-import type { LazorWallet } from "../lazorkit";
 
 interface AppState {
-  wallet: LazorWallet | null;
-  setWallet: (wallet: LazorWallet | null) => void;
   isLoading: boolean;
   setLoading: (loading: boolean) => void;
 }
 
 export const useStore = create<AppState>((set) => ({
-  wallet: null,
-  setWallet: (wallet) => set({ wallet }),
   isLoading: false,
   setLoading: (isLoading) => set({ isLoading }),
 }));

package/templates/vite/src/components/History.tsx.ejs

@@ -25,7 +25,7 @@ interface Props {
 interface TxInfo {
   signature: string;
   slot: number;
-  blockTime: number | null;
+  blockTime: number | null | undefined;
   err: any;
 }
 

package/templates/vite/src/components/Recovery.tsx.ejs

@@ -24,11 +24,17 @@ export function Recovery({ onBack }: Props) {
   const portalUrl = import.meta.env.VITE_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";
 
   const handleAddDevice = () => {
-    window.open(`${portalUrl}/recovery/add-device`, "_blank");
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=add-device`
+      : portalUrl;
+    window.open(url, "_blank");
   };
 
   const handleManageDevices = () => {
-    window.open(`${portalUrl}/recovery/devices`, "_blank");
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=manage-devices`
+      : portalUrl;
+    window.open(url, "_blank");
   };
 
   const copyAddress = () => {

package/templates/vite/src/components/Swap.tsx.ejs

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useWallet } from '@lazorkit/wallet'
-import { Connection, PublicKey, VersionedTransaction } from '@solana/web3.js'
+import { Connection, PublicKey } from '@solana/web3.js'
 
 const TOKENS = [
   { symbol: 'SOL', mint: 'So11111111111111111111111111111111111111112', decimals: 9 },
@@ -13,6 +13,7 @@ const TOKENS = [
 const SLIPPAGE_OPTIONS = [50, 100, 300]
 
 const JUPITER_API = 'https://api.jup.ag/swap/v1'
+const JUP_API_KEY = import.meta.env.VITE_JUPITER_API_KEY || ''
 
 function useBalances(walletAddress: string | undefined) {
   const [balances, setBalances] = useState<Record<string, number>>({})
@@ -21,9 +22,7 @@ function useBalances(walletAddress: string | undefined) {
     const rpc = import.meta.env.VITE_SOLANA_RPC || 'https://api.devnet.solana.com'
     const conn = new Connection(rpc)
     const pk = new PublicKey(walletAddress)
-    
     conn.getBalance(pk).then((bal) => setBalances((b) => ({ ...b, SOL: bal / 1e9 }))).catch(() => {})
-    
     conn.getParsedTokenAccountsByOwner(pk, { programId: new PublicKey('TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA') })
       .then((res) => {
         const tokenBals: Record<string, number> = {}
@@ -72,22 +71,20 @@ export function Swap() {
   const [signing, setSigning] = useState(false)
   const [result, setResult] = useState<{ success: boolean; message: string } | null>(null)
 
-  const switchTokens = () => {
-    setFromToken(toToken)
-    setToToken(fromToken)
-    setAmount('')
-    setQuote(null)
-  }
+  const switchTokens = () => { setFromToken(toToken); setToToken(fromToken); setAmount(''); setQuote(null) }
 
   useEffect(() => {
     if (!amount || parseFloat(amount) <= 0) { setQuote(null); return }
     const timeout = setTimeout(async () => {
       try {
         const inputAmount = Math.floor(parseFloat(amount) * 10 ** fromToken.decimals)
-        const res = await fetch(`${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}`)
+        const headers: Record<string, string> = {}
+        if (JUP_API_KEY) headers['x-api-key'] = JUP_API_KEY
+        const res = await fetch(`${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}&restrictIntermediateTokens=true`, { headers })
         const data = await res.json()
         if (data.outAmount) setQuote(data)
-      } catch (e) { console.error('Quote error:', e) }
+        else setQuote(null)
+      } catch (e) { console.error('Quote error:', e); setQuote(null) }
     }, 500)
     return () => clearTimeout(timeout)
   }, [amount, fromToken, toToken, slippage])
@@ -96,34 +93,48 @@ export function Swap() {
 
   const handleSwap = async () => {
     if (!smartWalletPubkey || !quote) return
-    setLoading(true)
-    setResult(null)
+    setLoading(true); setResult(null)
     try {
-      const swapRes = await fetch(`${JUPITER_API}/swap`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ quoteResponse: quote, userPublicKey: smartWalletPubkey.toBase58(), dynamicComputeUnitLimit: true, dynamicSlippage: true }),
+      const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+      if (JUP_API_KEY) headers['x-api-key'] = JUP_API_KEY
+      const swapRes = await fetch(`${JUPITER_API}/swap-instructions`, {
+        method: 'POST', headers,
+        body: JSON.stringify({ quoteResponse: quote, userPublicKey: smartWalletPubkey.toBase58(), wrapAndUnwrapSol: true, dynamicComputeUnitLimit: true }),
+      })
+      if (!swapRes.ok) throw new Error(`Jupiter API error: ${await swapRes.text()}`)
+      const { setupInstructions = [], swapInstruction, cleanupInstruction, addressLookupTableAddresses = [] } = await swapRes.json()
+      if (!swapInstruction) throw new Error('No swap instruction returned')
+
+      const toInstruction = (ix: any) => ({
+        programId: new PublicKey(ix.programId),
+        keys: ix.accounts.map((acc: any) => ({ pubkey: new PublicKey(acc.pubkey), isSigner: acc.isSigner, isWritable: acc.isWritable })),
+        data: Buffer.from(ix.data, 'base64'),
       })
-      const { swapTransaction } = await swapRes.json()
-      const signature = await signAndSendTransaction({ instructions: [], transactionOptions: { feeToken: 'USDC' } })
+      const instructions = [...setupInstructions.map(toInstruction), toInstruction(swapInstruction), ...(cleanupInstruction ? [toInstruction(cleanupInstruction)] : [])]
+
+      let addressLookupTableAccounts: any[] = []
+      if (addressLookupTableAddresses.length > 0) {
+        const rpc = import.meta.env.VITE_SOLANA_RPC || 'https://api.devnet.solana.com'
+        const conn = new Connection(rpc)
+        const alts = await Promise.all(addressLookupTableAddresses.map(async (addr: string) => (await conn.getAddressLookupTable(new PublicKey(addr))).value))
+        addressLookupTableAccounts = alts.filter(Boolean)
+      }
+
+      const signature = await signAndSendTransaction({ instructions, transactionOptions: { feeToken: 'USDC', addressLookupTableAccounts } })
       setResult({ success: true, message: `Swapped! ${signature.slice(0, 8)}...` })
-      setAmount('')
-      setQuote(null)
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : 'Swap failed' })
-    } finally { setLoading(false) }
+      setAmount(''); setQuote(null)
+    } catch (e) { console.error('Swap error:', e); setResult({ success: false, message: e instanceof Error ? e.message : 'Swap failed' }) }
+    finally { setLoading(false) }
   }
 
   const handleSignMessage = async () => {
-    setSigning(true)
-    setResult(null)
+    setSigning(true); setResult(null)
     try {
       const message = `Verify wallet ownership\nTimestamp: ${Date.now()}`
       const { signature } = await signMessage(message)
       setResult({ success: true, message: `Signed: ${signature.slice(0, 16)}...` })
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : 'Sign failed' })
-    } finally { setSigning(false) }
+    } catch (e) { console.error('Sign error:', e); setResult({ success: false, message: e instanceof Error ? e.message : 'Sign failed' }) }
+    finally { setSigning(false) }
   }
 
   const addr = wallet?.smartWallet || ''
@@ -131,43 +142,21 @@ export function Swap() {
   return (
 <% if (styling === 'tailwind') { %>
     <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-lg font-semibold">Swap</h1>
-        <button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">{addr.slice(0, 6)}...{addr.slice(-4)}</button>
-      </div>
+      <div className="flex items-center justify-between mb-6"><h1 className="text-lg font-semibold">Swap</h1><button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">{addr.slice(0, 6)}...{addr.slice(-4)}</button></div>
       <div className="space-y-2">
         <div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-xs text-neutral-500">From</span>
-            <span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <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" />
-            <TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
-          </div>
+          <div className="flex items-center justify-between mb-2"><span className="text-xs text-neutral-500">From</span><span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span></div>
+          <div className="flex items-center gap-3"><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" /><TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} /></div>
           <button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-500 hover:text-white mt-1">Max</button>
         </div>
         <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>
         <div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-xs text-neutral-500">To</span>
-            <span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <span className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</span>
-            <TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
-          </div>
+          <div className="flex items-center justify-between mb-2"><span className="text-xs text-neutral-500">To</span><span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span></div>
+          <div className="flex items-center gap-3"><span className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</span><TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} /></div>
           {quote && <p className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</p>}
         </div>
       </div>
-      <div className="flex items-center justify-between mt-3 text-xs">
-        <span className="text-neutral-500">Slippage</span>
-        <div className="flex gap-1">
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <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>
-          ))}
-        </div>
-      </div>
+      <div className="flex items-center justify-between mt-3 text-xs"><span className="text-neutral-500">Slippage</span><div className="flex gap-1">{SLIPPAGE_OPTIONS.map((s) => (<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>))}</div></div>
       <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>
       <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>
       {result && <p className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-400' : 'text-red-400'}`}>{result.message}</p>}
@@ -175,35 +164,19 @@ export function Swap() {
     </div>
 <% } else { %>
     <div style={styles.container}>
-      <div style={styles.header}>
-        <h1 style={styles.title}>Swap</h1>
-        <button onClick={() => disconnect()} style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</button>
-      </div>
+      <div style={styles.header}><h1 style={styles.title}>Swap</h1><button onClick={() => disconnect()} style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</button></div>
       <div style={styles.card}>
         <div style={styles.label}><span>From</span><span>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span></div>
-        <div style={styles.inputRow}>
-          <input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} style={styles.input} />
-          <TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
-        </div>
+        <div style={styles.inputRow}><input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} style={styles.input} /><TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} /></div>
         <button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} style={{ ...styles.address, fontSize: 12, marginTop: 4 }}>Max</button>
       </div>
       <div style={styles.arrow}><button onClick={switchTokens} style={{ ...styles.arrowBox, cursor: 'pointer' }}>↓</button></div>
       <div style={styles.card}>
         <div style={styles.label}><span>To</span><span>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span></div>
-        <div style={styles.inputRow}>
-          <span style={{ ...styles.input, color: '#737373' }}>{outputAmount}</span>
-          <TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
-        </div>
+        <div style={styles.inputRow}><span style={{ ...styles.input, color: '#737373' }}>{outputAmount}</span><TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} /></div>
         {quote && <p style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</p>}
       </div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}>
-        <span style={{ color: '#737373' }}>Slippage</span>
-        <div style={{ display: 'flex', gap: 4 }}>
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <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>
-          ))}
-        </div>
-      </div>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}><span style={{ color: '#737373' }}>Slippage</span><div style={{ display: 'flex', gap: 4 }}>{SLIPPAGE_OPTIONS.map((s) => (<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>))}</div></div>
       <button onClick={handleSwap} disabled={loading || !quote} style={{ ...styles.button, ...(loading || !quote ? styles.buttonDisabled : {}) }}>{loading ? 'Swapping...' : 'Swap'}</button>
       <button onClick={handleSignMessage} disabled={signing} style={{ ...styles.buttonSecondary, ...(signing ? styles.buttonDisabled : {}) }}>{signing ? 'Signing...' : 'Sign Message'}</button>
       {result && <p style={{ ...styles.result, color: result.success ? '#737373' : '#ef4444' }}>{result.message}</p>}
@@ -219,22 +192,10 @@ function TokenSelect({ token, tokens, onChange, exclude }: { token: typeof TOKEN
     <div style={{ position: 'relative' }}>
 <% if (styling === 'tailwind') { %>
       <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>
-      {open && (
-        <div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">
-          {tokens.filter((t) => t.symbol !== exclude).map((t) => (
-            <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>
-          ))}
-        </div>
-      )}
+      {open && (<div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">{tokens.filter((t) => t.symbol !== exclude).map((t) => (<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>))}</div>)}
 <% } else { %>
       <button onClick={() => setOpen(!open)} style={styles.tokenBtn}>{token.symbol} <span style={{ color: '#a3a3a3' }}>▼</span></button>
-      {open && (
-        <div style={styles.dropdown as React.CSSProperties}>
-          {tokens.filter((t) => t.symbol !== exclude).map((t) => (
-            <button key={t.symbol} onClick={() => { onChange(t); setOpen(false) }} style={styles.dropdownItem}>{t.symbol}</button>
-          ))}
-        </div>
-      )}
+      {open && (<div style={styles.dropdown as React.CSSProperties}>{tokens.filter((t) => t.symbol !== exclude).map((t) => (<button key={t.symbol} onClick={() => { onChange(t); setOpen(false) }} style={styles.dropdownItem}>{t.symbol}</button>))}</div>)}
 <% } %>
     </div>
   )

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

@@ -27,7 +27,7 @@ interface Props {
 interface TxInfo {
   signature: string;
   slot: number;
-  blockTime: number | null;
+  blockTime: number | null | undefined;
   err: any;
 }
 

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

@@ -25,11 +25,19 @@ export function Recovery({ onBack }: Props) {
   const portalUrl = process.env.NEXT_PUBLIC_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";
 
   const handleAddDevice = () => {
-    window.open(`${portalUrl}/recovery/add-device`, "_blank");
+    // Open portal with wallet context
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=add-device`
+      : portalUrl;
+    window.open(url, "_blank");
   };
 
   const handleManageDevices = () => {
-    window.open(`${portalUrl}/recovery/devices`, "_blank");
+    // Open portal with wallet context
+    const url = wallet?.smartWallet 
+      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=manage-devices`
+      : portalUrl;
+    window.open(url, "_blank");
   };
 
   const copyAddress = () => {

package/templates/web/components/Swap.tsx.ejs

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { useWallet } from "@lazorkit/wallet";
-import { Connection, PublicKey, VersionedTransaction } from "@solana/web3.js";
+import { Connection, PublicKey } from "@solana/web3.js";
 
 const TOKENS = [
   { symbol: "SOL", mint: "So11111111111111111111111111111111111111112", decimals: 9 },
@@ -11,9 +11,10 @@ const TOKENS = [
   { symbol: "JUP", mint: "JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN", decimals: 6 },
 ];
 
-const SLIPPAGE_OPTIONS = [50, 100, 300]; // 0.5%, 1%, 3% in bps
+const SLIPPAGE_OPTIONS = [50, 100, 300];
 
 const JUPITER_API = "https://api.jup.ag/swap/v1";
+const JUP_API_KEY = process.env.NEXT_PUBLIC_JUPITER_API_KEY || "";
 
 function useBalances(walletAddress: string | undefined) {
   const [balances, setBalances] = useState<Record<string, number>>({});
@@ -22,11 +23,7 @@ function useBalances(walletAddress: string | undefined) {
     const rpc = process.env.NEXT_PUBLIC_SOLANA_RPC || "https://api.devnet.solana.com";
     const conn = new Connection(rpc);
     const pk = new PublicKey(walletAddress);
-    
-    // Fetch SOL balance
     conn.getBalance(pk).then((bal) => setBalances((b) => ({ ...b, SOL: bal / 1e9 }))).catch(() => {});
-    
-    // Fetch token balances
     conn.getParsedTokenAccountsByOwner(pk, { programId: new PublicKey("TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA") })
       .then((res) => {
         const tokenBals: Record<string, number> = {};
@@ -75,85 +72,71 @@ export function Swap() {
   const [signing, setSigning] = useState(false);
   const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
 
-  const switchTokens = () => {
-    setFromToken(toToken);
-    setToToken(fromToken);
-    setAmount("");
-    setQuote(null);
-  };
+  const switchTokens = () => { setFromToken(toToken); setToToken(fromToken); setAmount(""); setQuote(null); };
 
-  // Fetch quote from Jupiter
   useEffect(() => {
-    if (!amount || parseFloat(amount) <= 0) {
-      setQuote(null);
-      return;
-    }
+    if (!amount || parseFloat(amount) <= 0) { setQuote(null); return; }
     const timeout = setTimeout(async () => {
       try {
         const inputAmount = Math.floor(parseFloat(amount) * 10 ** fromToken.decimals);
-        const res = await fetch(
-          `${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}`
-        );
+        const headers: Record<string, string> = {};
+        if (JUP_API_KEY) headers["x-api-key"] = JUP_API_KEY;
+        const res = await fetch(`${JUPITER_API}/quote?inputMint=${fromToken.mint}&outputMint=${toToken.mint}&amount=${inputAmount}&slippageBps=${slippage}&restrictIntermediateTokens=true`, { headers });
         const data = await res.json();
         if (data.outAmount) setQuote(data);
-      } catch (e) {
-        console.error("Quote error:", e);
-      }
+        else setQuote(null);
+      } catch (e) { console.error("Quote error:", e); setQuote(null); }
     }, 500);
     return () => clearTimeout(timeout);
   }, [amount, fromToken, toToken, slippage]);
 
-  const outputAmount = quote
-    ? (parseInt(quote.outAmount) / 10 ** toToken.decimals).toFixed(toToken.decimals === 6 ? 2 : 4)
-    : "0.00";
+  const outputAmount = quote ? (parseInt(quote.outAmount) / 10 ** toToken.decimals).toFixed(toToken.decimals === 6 ? 2 : 4) : "0.00";
 
   const handleSwap = async () => {
     if (!smartWalletPubkey || !quote) return;
     setLoading(true);
     setResult(null);
     try {
-      // Get swap transaction from Jupiter
-      const swapRes = await fetch(`${JUPITER_API}/swap`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          quoteResponse: quote,
-          userPublicKey: smartWalletPubkey.toBase58(),
-          dynamicComputeUnitLimit: true,
-          dynamicSlippage: true,
-        }),
+      const headers: Record<string, string> = { "Content-Type": "application/json" };
+      if (JUP_API_KEY) headers["x-api-key"] = JUP_API_KEY;
+      const swapRes = await fetch(`${JUPITER_API}/swap-instructions`, {
+        method: "POST", headers,
+        body: JSON.stringify({ quoteResponse: quote, userPublicKey: smartWalletPubkey.toBase58(), wrapAndUnwrapSol: true, dynamicComputeUnitLimit: true }),
       });
-      const { swapTransaction } = await swapRes.json();
-      
-      // Decode and sign via LazorKit
-      const tx = VersionedTransaction.deserialize(Buffer.from(swapTransaction, "base64"));
-      const signature = await signAndSendTransaction({
-        instructions: [], // Jupiter provides full tx, we pass empty and let SDK handle
-        transactionOptions: { feeToken: "USDC" },
+      if (!swapRes.ok) throw new Error(`Jupiter API error: ${await swapRes.text()}`);
+      const { setupInstructions = [], swapInstruction, cleanupInstruction, addressLookupTableAddresses = [] } = await swapRes.json();
+      if (!swapInstruction) throw new Error("No swap instruction returned");
+
+      const toInstruction = (ix: any) => ({
+        programId: new PublicKey(ix.programId),
+        keys: ix.accounts.map((acc: any) => ({ pubkey: new PublicKey(acc.pubkey), isSigner: acc.isSigner, isWritable: acc.isWritable })),
+        data: Buffer.from(ix.data, "base64"),
       });
-      
+      const instructions = [...setupInstructions.map(toInstruction), toInstruction(swapInstruction), ...(cleanupInstruction ? [toInstruction(cleanupInstruction)] : [])];
+
+      let addressLookupTableAccounts: any[] = [];
+      if (addressLookupTableAddresses.length > 0) {
+        const rpc = process.env.NEXT_PUBLIC_SOLANA_RPC || "https://api.devnet.solana.com";
+        const conn = new Connection(rpc);
+        const alts = await Promise.all(addressLookupTableAddresses.map(async (addr: string) => (await conn.getAddressLookupTable(new PublicKey(addr))).value));
+        addressLookupTableAccounts = alts.filter(Boolean);
+      }
+
+      const signature = await signAndSendTransaction({ instructions, transactionOptions: { feeToken: "USDC", addressLookupTableAccounts } });
       setResult({ success: true, message: `Swapped! ${signature.slice(0, 8)}...` });
-      setAmount("");
-      setQuote(null);
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : "Swap failed" });
-    } finally {
-      setLoading(false);
-    }
+      setAmount(""); setQuote(null);
+    } catch (e) { console.error("Swap error:", e); setResult({ success: false, message: e instanceof Error ? e.message : "Swap failed" }); }
+    finally { setLoading(false); }
   };
 
   const handleSignMessage = async () => {
-    setSigning(true);
-    setResult(null);
+    setSigning(true); setResult(null);
     try {
       const message = `Verify wallet ownership\nTimestamp: ${Date.now()}`;
       const { signature } = await signMessage(message);
       setResult({ success: true, message: `Signed: ${signature.slice(0, 16)}...` });
-    } catch (e) {
-      setResult({ success: false, message: e instanceof Error ? e.message : "Sign failed" });
-    } finally {
-      setSigning(false);
-    }
+    } catch (e) { console.error("Sign error:", e); setResult({ success: false, message: e instanceof Error ? e.message : "Sign failed" }); }
+    finally { setSigning(false); }
   };
 
   const addr = wallet?.smartWallet || "";
@@ -163,30 +146,20 @@ export function Swap() {
     <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-lg font-semibold">Swap</h1>
-        <button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">
-          {addr.slice(0, 6)}...{addr.slice(-4)}
-        </button>
+        <button onClick={() => disconnect()} className="text-xs text-neutral-500 hover:text-neutral-300">{addr.slice(0, 6)}...{addr.slice(-4)}</button>
       </div>
       <div className="space-y-2">
         <div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-xs text-neutral-500">From</span>
-            <span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span>
-          </div>
+          <div className="flex items-center justify-between mb-2"><span className="text-xs text-neutral-500">From</span><span className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span></div>
           <div className="flex items-center gap-3">
             <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" />
             <TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
           </div>
           <button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-500 hover:text-white mt-1">Max</button>
         </div>
-        <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>
+        <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>
         <div className="border border-neutral-700 rounded-xl p-4 bg-neutral-800">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-xs text-neutral-500">To</span>
-            <span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span>
-          </div>
+          <div className="flex items-center justify-between mb-2"><span className="text-xs text-neutral-500">To</span><span className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span></div>
           <div className="flex items-center gap-3">
             <span className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</span>
             <TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
@@ -194,64 +167,29 @@ export function Swap() {
           {quote && <p className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || "Best route"}</p>}
         </div>
       </div>
-      <div className="flex items-center justify-between mt-3 text-xs">
-        <span className="text-neutral-500">Slippage</span>
-        <div className="flex gap-1">
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <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>
-          ))}
-        </div>
-      </div>
-      <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>
-      <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>
+      <div className="flex items-center justify-between mt-3 text-xs"><span className="text-neutral-500">Slippage</span><div className="flex gap-1">{SLIPPAGE_OPTIONS.map((s) => (<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>))}</div></div>
+      <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>
+      <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>
       {result && <p className={`mt-3 text-sm text-center ${result.success ? "text-neutral-400" : "text-red-400"}`}>{result.message}</p>}
       <p className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</p>
     </div>
 <% } else { %>
     <div style={styles.container}>
-      <div style={styles.header}>
-        <h1 style={styles.title}>Swap</h1>
-        <button onClick={() => disconnect()} style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</button>
-      </div>
+      <div style={styles.header}><h1 style={styles.title}>Swap</h1><button onClick={() => disconnect()} style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</button></div>
       <div style={styles.card}>
         <div style={styles.label}><span>From</span><span>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</span></div>
-        <div style={styles.inputRow}>
-          <input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} style={styles.input} />
-          <TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
-        </div>
+        <div style={styles.inputRow}><input type="number" placeholder="0.00" value={amount} onChange={(e) => setAmount(e.target.value)} style={styles.input} /><TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} /></div>
         <button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} style={{ ...styles.address, fontSize: 12, marginTop: 4 }}>Max</button>
       </div>
-      <div style={styles.arrow}><button onClick={switchTokens} style={{ ...styles.arrowBox, cursor: 'pointer', border: '1px solid #e5e5e5' }}>↓</button></div>
+      <div style={styles.arrow}><button onClick={switchTokens} style={{ ...styles.arrowBox, cursor: 'pointer' }}>↓</button></div>
       <div style={styles.card}>
         <div style={styles.label}><span>To</span><span>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</span></div>
-        <div style={styles.inputRow}>
-          <span style={{ ...styles.input, color: '#d4d4d4' }}>{outputAmount}</span>
-          <TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
-        </div>
+        <div style={styles.inputRow}><span style={{ ...styles.input, color: '#737373' }}>{outputAmount}</span><TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} /></div>
         {quote && <p style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || "Best route"}</p>}
       </div>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}>
-        <span style={{ color: '#737373' }}>Slippage</span>
-        <div style={{ display: 'flex', gap: 4 }}>
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <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>
-          ))}
-        </div>
-      </div>
-      <button onClick={handleSwap} disabled={loading || !quote} style={{ ...styles.button, ...(loading || !quote ? styles.buttonDisabled : {}) }}>
-        {loading ? "Swapping..." : "Swap"}
-      </button>
-      <button onClick={handleSignMessage} disabled={signing} style={{ ...styles.buttonSecondary, ...(signing ? styles.buttonDisabled : {}) }}>
-        {signing ? "Signing..." : "Sign Message"}
-      </button>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 12, fontSize: 12 }}><span style={{ color: '#737373' }}>Slippage</span><div style={{ display: 'flex', gap: 4 }}>{SLIPPAGE_OPTIONS.map((s) => (<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>))}</div></div>
+      <button onClick={handleSwap} disabled={loading || !quote} style={{ ...styles.button, ...(loading || !quote ? styles.buttonDisabled : {}) }}>{loading ? "Swapping..." : "Swap"}</button>
+      <button onClick={handleSignMessage} disabled={signing} style={{ ...styles.buttonSecondary, ...(signing ? styles.buttonDisabled : {}) }}>{signing ? "Signing..." : "Sign Message"}</button>
       {result && <p style={{ ...styles.result, color: result.success ? '#737373' : '#ef4444' }}>{result.message}</p>}
       <p style={styles.footer}>Gas sponsored · Powered by LazorKit + Jupiter</p>
     </div>
@@ -264,25 +202,11 @@ function TokenSelect({ token, tokens, onChange, exclude }: { token: typeof TOKEN
   return (
     <div style={{ position: 'relative' }}>
 <% if (styling === 'tailwind') { %>
-      <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>
-      {open && (
-        <div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">
-          {tokens.filter((t) => t.symbol !== exclude).map((t) => (
-            <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>
-          ))}
-        </div>
-      )}
+      <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>
+      {open && (<div className="absolute right-0 mt-1 bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-10">{tokens.filter((t) => t.symbol !== exclude).map((t) => (<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>))}</div>)}
 <% } else { %>
       <button onClick={() => setOpen(!open)} style={styles.tokenBtn}>{token.symbol} <span style={{ color: '#a3a3a3' }}>▼</span></button>
-      {open && (
-        <div style={styles.dropdown as React.CSSProperties}>
-          {tokens.filter((t) => t.symbol !== exclude).map((t) => (
-            <button key={t.symbol} onClick={() => { onChange(t); setOpen(false); }} style={styles.dropdownItem}>{t.symbol}</button>
-          ))}
-        </div>
-      )}
+      {open && (<div style={styles.dropdown as React.CSSProperties}>{tokens.filter((t) => t.symbol !== exclude).map((t) => (<button key={t.symbol} onClick={() => { onChange(t); setOpen(false); }} style={styles.dropdownItem}>{t.symbol}</button>))}</div>)}
 <% } %>
     </div>
   );