create-lightning-scaffold 1.0.2 → 1.0.5

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

@@ -4,20 +4,20 @@ import { useWallet } from "@lazorkit/wallet";
 import { Connection, PublicKey } from "@solana/web3.js";
 <% if (styling !== 'tailwind') { %>
 const styles: Record<string, React.CSSProperties> = {
-  container: { width: '100%', maxWidth: 360 },
+  container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
   header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
-  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
   list: { display: 'flex', flexDirection: 'column', gap: 8 },
-  item: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 12 },
+  item: { border: '1px solid #262626', borderRadius: 12, padding: 12, background: '#171717' },
   row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-  sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
-  time: { fontSize: 12, color: '#a3a3a3' },
+  sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
+  time: { fontSize: 12, color: '#737373', marginTop: 4 },
   status: { fontSize: 11, padding: '2px 6px', borderRadius: 4 },
-  success: { backgroundColor: '#dcfce7', color: '#166534' },
-  failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
-  empty: { textAlign: 'center', padding: 32, color: '#a3a3a3', fontSize: 14 },
+  success: { backgroundColor: '#14532d', color: '#4ade80' },
+  failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
+  empty: { textAlign: 'center', padding: 32, color: '#737373', fontSize: 14 },
   back: { fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
-  link: { color: '#0a0a0a', textDecoration: 'none' },
+  link: { color: '#fafafa', textDecoration: 'none' },
 };
 <% } %>
 interface Props {
@@ -27,7 +27,7 @@ interface Props {
 interface TxInfo {
   signature: string;
   slot: number;
-  blockTime: number | null;
+  blockTime: number | null | undefined;
   err: any;
 }
 
@@ -58,26 +58,26 @@ export function History({ onBack }: Props) {
 
   return (
 <% if (styling === 'tailwind') { %>
-    <div className="w-full max-w-sm">
+    <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-lg font-semibold">History</h1>
-        <button onClick={onBack} className="text-sm text-neutral-500 hover:text-black">← Back</button>
+        <button onClick={onBack} className="text-sm text-neutral-500 hover:text-white">← Back</button>
       </div>
       {loading ? (
-        <p className="text-center py-8 text-neutral-400">Loading...</p>
+        <p className="text-center py-8 text-neutral-500">Loading...</p>
       ) : txs.length === 0 ? (
-        <p className="text-center py-8 text-neutral-400">No transactions yet</p>
+        <p className="text-center py-8 text-neutral-500">No transactions yet</p>
       ) : (
         <div className="space-y-2">
           {txs.map((tx) => (
-            <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">
+            <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">
               <div className="flex justify-between items-center">
                 <span className="font-mono text-sm">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</span>
-                <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
+                <span 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"}
                 </span>
               </div>
-              <p className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</p>
+              <p className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</p>
             </a>
           ))}
         </div>

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

@@ -3,15 +3,15 @@ import { useState } from "react";
 import { useWallet } from "@lazorkit/wallet";
 <% if (styling !== 'tailwind') { %>
 const styles: Record<string, React.CSSProperties> = {
-  container: { width: '100%', maxWidth: 360 },
-  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
+  title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
   subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 1.5 },
-  card: { marginTop: 16, border: '1px solid #e5e5e5', borderRadius: 12, padding: 16 },
-  cardTitle: { fontSize: 14, fontWeight: 500, margin: 0 },
+  card: { marginTop: 16, border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
+  cardTitle: { fontSize: 14, fontWeight: 500, margin: 0, color: '#fafafa' },
   cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
-  button: { marginTop: 12, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
-  buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: '1px solid #e5e5e5', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
-  info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8, fontSize: 12, color: '#525252' },
+  button: { marginTop: 12, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 10, border: '1px solid #262626', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8, fontSize: 12, color: '#a3a3a3' },
   back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
 };
 <% } %>
@@ -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 = () => {
@@ -42,39 +50,39 @@ export function Recovery({ onBack }: Props) {
 
   return (
 <% if (styling === 'tailwind') { %>
-    <div className="w-full max-w-sm">
+    <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
       <h1 className="text-lg font-semibold">Recovery & Backup</h1>
       <p className="mt-2 text-sm text-neutral-500">
         Add backup passkeys from other devices to ensure you never lose access.
       </p>
-      <div className="mt-4 border border-neutral-200 rounded-xl p-4">
+      <div className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
         <h3 className="text-sm font-medium">Add Backup Device</h3>
         <p className="mt-1 text-xs text-neutral-500">
           Register a passkey from another phone, tablet, or computer.
         </p>
-        <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-black text-white text-sm font-medium rounded-lg hover:opacity-90">
+        <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-white text-black text-sm font-medium rounded-lg hover:opacity-90">
           Add Device
         </button>
       </div>
-      <div className="mt-3 border border-neutral-200 rounded-xl p-4">
+      <div className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
         <h3 className="text-sm font-medium">Manage Devices</h3>
         <p className="mt-1 text-xs text-neutral-500">
           View and remove registered passkeys.
         </p>
-        <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">
+        <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">
           View Devices
         </button>
       </div>
-      <div className="mt-4 p-3 bg-neutral-100 rounded-lg">
-        <p className="text-xs text-neutral-600">
+      <div className="mt-4 p-3 bg-neutral-800 rounded-lg">
+        <p className="text-xs text-neutral-400">
           <strong>Wallet:</strong>{" "}
-          <button onClick={copyAddress} className="font-mono hover:text-black">
+          <button onClick={copyAddress} className="font-mono hover:text-white">
             {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
           </button>
-          {copied && <span className="ml-2 text-green-600">Copied!</span>}
+          {copied && <span className="ml-2 text-green-400">Copied!</span>}
         </p>
       </div>
-      <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">
+      <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-white">
         ← Back
       </button>
     </div>