create-lightning-scaffold 1.0.0 → 1.0.1

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

@@ -0,0 +1,112 @@
+import { useState, useEffect } from "react";
+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 },
+  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
+  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  list: { display: 'flex', flexDirection: 'column', gap: 8 },
+  item: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 12, textDecoration: 'none', color: 'inherit' },
+  row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
+  sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
+  time: { fontSize: 12, color: '#a3a3a3' },
+  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 },
+  back: { fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
+};
+<% } %>
+interface Props {
+  onBack: () => void;
+}
+
+interface TxInfo {
+  signature: string;
+  slot: number;
+  blockTime: number | null;
+  err: any;
+}
+
+export function History({ onBack }: Props) {
+  const { wallet } = useWallet();
+  const [txs, setTxs] = useState<TxInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!wallet?.smartWallet) return;
+    const rpc = import.meta.env.VITE_SOLANA_RPC || "https://api.devnet.solana.com";
+    const conn = new Connection(rpc);
+    conn.getSignaturesForAddress(new PublicKey(wallet.smartWallet), { limit: 10 })
+      .then((sigs) => setTxs(sigs.map((s) => ({ signature: s.signature, slot: s.slot, blockTime: s.blockTime, err: s.err }))))
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, [wallet?.smartWallet]);
+
+  const formatTime = (ts: number | null) => {
+    if (!ts) return "—";
+    return new Date(ts * 1000).toLocaleDateString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  };
+
+  const explorerUrl = (sig: string) => {
+    const cluster = (import.meta.env.VITE_SOLANA_RPC || "").includes("mainnet") ? "" : "?cluster=devnet";
+    return `https://solscan.io/tx/${sig}${cluster}`;
+  };
+
+  return (
+<% if (styling === 'tailwind') { %>
+    <div className="w-full max-w-sm">
+      <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>
+      </div>
+      {loading ? (
+        <p className="text-center py-8 text-neutral-400">Loading...</p>
+      ) : txs.length === 0 ? (
+        <p className="text-center py-8 text-neutral-400">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">
+              <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"}`}>
+                  {tx.err ? "Failed" : "Success"}
+                </span>
+              </div>
+              <p className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</p>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+<% } else { %>
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <h1 style={styles.title}>History</h1>
+        <button onClick={onBack} style={styles.back}>← Back</button>
+      </div>
+      {loading ? (
+        <p style={styles.empty}>Loading...</p>
+      ) : txs.length === 0 ? (
+        <p style={styles.empty}>No transactions yet</p>
+      ) : (
+        <div style={styles.list}>
+          {txs.map((tx) => (
+            <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" style={styles.item}>
+              <div style={styles.row}>
+                <span style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</span>
+                <span style={{ ...styles.status, ...(tx.err ? styles.failed : styles.success) }}>
+                  {tx.err ? "Failed" : "Success"}
+                </span>
+              </div>
+              <p style={styles.time}>{formatTime(tx.blockTime)}</p>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+<% } %>
+  );
+}

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

@@ -0,0 +1,64 @@
+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: 24, fontWeight: 600, letterSpacing: -0.5, color: '#0a0a0a', textAlign: 'center', margin: 0 },
+  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', textAlign: 'center', lineHeight: 1.5 },
+  button: { marginTop: 32, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '14px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  buttonDisabled: { opacity: 0.5, cursor: 'not-allowed' },
+  hint: { marginTop: 16, fontSize: 12, color: '#a3a3a3', textAlign: 'center' },
+  error: { marginTop: 16, fontSize: 13, color: '#ef4444', textAlign: 'center' },
+}
+<% } %>
+export function Onboarding() {
+  const { connect, isConnecting } = useWallet()
+  const [error, setError] = useState<string | null>(null)
+
+  const handleStart = async () => {
+    setError(null)
+    try {
+      await connect()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Something went wrong')
+    }
+  }
+
+  return (
+<% if (styling === 'tailwind') { %>
+    <div className="w-full max-w-sm">
+      <div className="text-center">
+        <h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
+        <p className="mt-2 text-sm text-neutral-500">
+          Create a wallet with your fingerprint or face. No seed phrases.
+        </p>
+        <button
+          onClick={handleStart}
+          disabled={isConnecting}
+          className="mt-8 w-full py-3 px-4 bg-black text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
+        >
+          {isConnecting ? 'Creating...' : 'Create Wallet'}
+        </button>
+        <p className="mt-4 text-xs text-neutral-400">Secured by passkeys</p>
+        {error && <p className="mt-4 text-sm text-red-500">{error}</p>}
+      </div>
+    </div>
+<% } else { %>
+    <div style={styles.container}>
+      <h1 style={styles.title}>Welcome</h1>
+      <p style={styles.subtitle}>
+        Create a wallet with your fingerprint or face. No seed phrases.
+      </p>
+      <button
+        onClick={handleStart}
+        disabled={isConnecting}
+        style={{ ...styles.button, ...(isConnecting ? styles.buttonDisabled : {}) }}
+      >
+        {isConnecting ? 'Creating...' : 'Create Wallet'}
+      </button>
+      <p style={styles.hint}>Secured by passkeys</p>
+      {error && <p style={styles.error}>{error}</p>}
+    </div>
+<% } %>
+  )
+}

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

@@ -0,0 +1,107 @@
+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 },
+  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 },
+  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' },
+  back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
+};
+<% } %>
+interface Props {
+  onBack: () => void;
+}
+
+export function Recovery({ onBack }: Props) {
+  const { wallet } = useWallet();
+  const [copied, setCopied] = useState(false);
+  const portalUrl = import.meta.env.VITE_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";
+
+  const handleAddDevice = () => {
+    window.open(`${portalUrl}/recovery/add-device`, "_blank");
+  };
+
+  const handleManageDevices = () => {
+    window.open(`${portalUrl}/recovery/devices`, "_blank");
+  };
+
+  const copyAddress = () => {
+    if (wallet?.smartWallet) {
+      navigator.clipboard.writeText(wallet.smartWallet);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  return (
+<% if (styling === 'tailwind') { %>
+    <div className="w-full max-w-sm">
+      <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">
+        <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">
+          Add Device
+        </button>
+      </div>
+      <div className="mt-3 border border-neutral-200 rounded-xl p-4">
+        <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">
+          View Devices
+        </button>
+      </div>
+      <div className="mt-4 p-3 bg-neutral-100 rounded-lg">
+        <p className="text-xs text-neutral-600">
+          <strong>Wallet:</strong>{" "}
+          <button onClick={copyAddress} className="font-mono hover:text-black">
+            {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
+          </button>
+          {copied && <span className="ml-2 text-green-600">Copied!</span>}
+        </p>
+      </div>
+      <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">
+        ← Back
+      </button>
+    </div>
+<% } else { %>
+    <div style={styles.container}>
+      <h1 style={styles.title}>Recovery & Backup</h1>
+      <p style={styles.subtitle}>
+        Add backup passkeys from other devices to ensure you never lose access.
+      </p>
+      <div style={styles.card}>
+        <h3 style={styles.cardTitle}>Add Backup Device</h3>
+        <p style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</p>
+        <button onClick={handleAddDevice} style={styles.button}>Add Device</button>
+      </div>
+      <div style={styles.card}>
+        <h3 style={styles.cardTitle}>Manage Devices</h3>
+        <p style={styles.cardDesc}>View and remove registered passkeys.</p>
+        <button onClick={handleManageDevices} style={styles.buttonSecondary}>View Devices</button>
+      </div>
+      <div style={styles.info}>
+        <strong>Wallet:</strong>{" "}
+        <button onClick={copyAddress} style={{ fontFamily: 'monospace', background: 'none', border: 'none', cursor: 'pointer' }}>
+          {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
+        </button>
+        {copied && <span style={{ marginLeft: 8, color: '#16a34a' }}>Copied!</span>}
+      </div>
+      <button onClick={onBack} style={styles.back}>← Back</button>
+    </div>
+<% } %>
+  );
+}

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

@@ -0,0 +1,241 @@
+import { useState, useEffect } from 'react'
+import { useWallet } from '@lazorkit/wallet'
+import { Connection, PublicKey, VersionedTransaction } from '@solana/web3.js'
+
+const TOKENS = [
+  { symbol: 'SOL', mint: 'So11111111111111111111111111111111111111112', decimals: 9 },
+  { symbol: 'USDC', mint: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', decimals: 6 },
+  { symbol: 'USDT', mint: 'Es9vMFrzaCERmJfrF4H2FYD4KCoNkY11McCe8BenwNYB', decimals: 6 },
+  { symbol: 'BONK', mint: 'DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263', decimals: 5 },
+  { symbol: 'JUP', mint: 'JUPyiwrYJFskUPiHa7hkeR8VUtAeFoSYbKedZNsDvCN', decimals: 6 },
+]
+
+const SLIPPAGE_OPTIONS = [50, 100, 300]
+
+const JUPITER_API = 'https://api.jup.ag/swap/v1'
+
+function useBalances(walletAddress: string | undefined) {
+  const [balances, setBalances] = useState<Record<string, number>>({})
+  useEffect(() => {
+    if (!walletAddress) return
+    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> = {}
+        res.value.forEach((acc) => {
+          const info = acc.account.data.parsed.info
+          const token = TOKENS.find((t) => t.mint === info.mint)
+          if (token) tokenBals[token.symbol] = info.tokenAmount.uiAmount || 0
+        })
+        setBalances((b) => ({ ...b, ...tokenBals }))
+      }).catch(() => {})
+  }, [walletAddress])
+  return balances
+}
+<% if (styling !== 'tailwind') { %>
+const styles: Record<string, React.CSSProperties> = {
+  container: { width: '100%', maxWidth: 360 },
+  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 },
+  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  address: { fontSize: 12, color: '#a3a3a3', background: 'none', border: 'none', cursor: 'pointer' },
+  card: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 16 },
+  label: { fontSize: 12, color: '#a3a3a3', marginBottom: 8, display: 'flex', justifyContent: 'space-between' },
+  inputRow: { display: 'flex', alignItems: 'center', gap: 12 },
+  input: { flex: 1, fontSize: 24, fontWeight: 500, border: 'none', background: 'transparent', width: '100%' },
+  arrow: { display: 'flex', justifyContent: 'center', margin: '8px 0' },
+  arrowBox: { width: 32, height: 32, border: '1px solid #e5e5e5', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a3a3a3' },
+  button: { marginTop: 16, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '14px 16px', borderRadius: 12, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  buttonDisabled: { opacity: 0.5, cursor: 'not-allowed' },
+  buttonSecondary: { marginTop: 8, width: '100%', backgroundColor: 'transparent', color: '#0a0a0a', padding: '12px 16px', borderRadius: 12, border: '1px solid #e5e5e5', fontSize: 13, fontWeight: 500, cursor: 'pointer' },
+  result: { marginTop: 12, fontSize: 14, textAlign: 'center' },
+  footer: { marginTop: 16, fontSize: 12, color: '#a3a3a3', textAlign: 'center' },
+  tokenBtn: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', background: '#f5f5f5', borderRadius: 8, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  dropdown: { position: 'absolute', right: 0, marginTop: 4, background: '#fff', border: '1px solid #e5e5e5', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', zIndex: 10 },
+  dropdownItem: { display: 'block', width: '100%', padding: '8px 16px', textAlign: 'left', border: 'none', background: 'none', fontSize: 14, cursor: 'pointer' },
+  quote: { fontSize: 12, color: '#737373', marginTop: 4 },
+}
+<% } %>
+export function Swap() {
+  const { disconnect, wallet, smartWalletPubkey, signAndSendTransaction, signMessage } = useWallet()
+  const balances = useBalances(wallet?.smartWallet)
+  const [fromToken, setFromToken] = useState(TOKENS[0])
+  const [toToken, setToToken] = useState(TOKENS[1])
+  const [amount, setAmount] = useState('')
+  const [slippage, setSlippage] = useState(SLIPPAGE_OPTIONS[0])
+  const [quote, setQuote] = useState<any>(null)
+  const [loading, setLoading] = useState(false)
+  const [signing, setSigning] = useState(false)
+  const [result, setResult] = useState<{ success: boolean; message: string } | null>(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 data = await res.json()
+        if (data.outAmount) setQuote(data)
+      } catch (e) { console.error('Quote error:', e) }
+    }, 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 handleSwap = async () => {
+    if (!smartWalletPubkey || !quote) return
+    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 { swapTransaction } = await swapRes.json()
+      const signature = await signAndSendTransaction({ instructions: [], transactionOptions: { feeToken: 'USDC' } })
+      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) }
+  }
+
+  const handleSignMessage = async () => {
+    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) }
+  }
+
+  const addr = wallet?.smartWallet || ''
+
+  return (
+<% if (styling === 'tailwind') { %>
+    <div className="w-full max-w-sm">
+      <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-400 hover:text-neutral-600">{addr.slice(0, 6)}...{addr.slice(-4)}</button>
+      </div>
+      <div className="space-y-2">
+        <div className="border border-neutral-200 rounded-xl p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-xs text-neutral-400">From</span>
+            <span className="text-xs text-neutral-400">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" />
+            <TokenSelect token={fromToken} tokens={TOKENS} onChange={setFromToken} exclude={toToken.symbol} />
+          </div>
+          <button onClick={() => setAmount(String(balances[fromToken.symbol] ?? 0))} className="text-xs text-neutral-400 hover:text-black mt-1">Max</button>
+        </div>
+        <div className="flex justify-center"><button onClick={switchTokens} className="w-8 h-8 border border-neutral-200 rounded-lg flex items-center justify-center text-neutral-400 hover:bg-neutral-50">↓</button></div>
+        <div className="border border-neutral-200 rounded-xl p-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-xs text-neutral-400">To</span>
+            <span className="text-xs text-neutral-400">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-300">{outputAmount}</span>
+            <TokenSelect token={toToken} tokens={TOKENS} onChange={setToToken} exclude={fromToken.symbol} />
+          </div>
+          {quote && <p className="text-xs text-neutral-400 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-400">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-black text-white' : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'}`}>{s / 100}%</button>
+          ))}
+        </div>
+      </div>
+      <button onClick={handleSwap} disabled={loading || !quote} className="mt-4 w-full py-3 bg-black text-white 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-black text-sm font-medium rounded-xl border border-neutral-200 hover:bg-neutral-50 disabled:opacity-50">{signing ? 'Signing...' : 'Sign Message'}</button>
+      {result && <p className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-500' : 'text-red-500'}`}>{result.message}</p>}
+      <p className="mt-4 text-xs text-center text-neutral-400">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.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>
+        <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.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>
+        {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: '#a3a3a3' }}>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 ? '#0a0a0a' : '#f5f5f5', color: slippage === s ? '#fff' : '#525252' }}>{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>
+<% } %>
+  )
+}
+
+function TokenSelect({ token, tokens, onChange, exclude }: { token: typeof TOKENS[0]; tokens: typeof TOKENS; onChange: (t: typeof TOKENS[0]) => void; exclude: string }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div style={{ position: 'relative' }}>
+<% if (styling === 'tailwind') { %>
+      <button onClick={() => setOpen(!open)} className="flex items-center gap-2 px-3 py-2 bg-neutral-100 rounded-lg text-sm font-medium">{token.symbol}<span className="text-neutral-400">▼</span></button>
+      {open && (
+        <div className="absolute right-0 mt-1 bg-white border border-neutral-200 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 hover:bg-neutral-100">{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>
+      )}
+<% } %>
+    </div>
+  )
+}

package/templates/vite/src/index.css.ejs

@@ -0,0 +1,55 @@
+<% if (styling === 'tailwind') { %>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #fafafa;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+input:focus {
+  outline: none;
+}
+<% } else { %>
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #fafafa;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+input:focus {
+  outline: none;
+}
+<% } %>

package/templates/vite/src/main.tsx

@@ -0,0 +1,25 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { LazorkitProvider } from '@lazorkit/wallet'
+import App from './App'
+import './index.css'
+
+const CONFIG = {
+  rpcUrl: import.meta.env.VITE_SOLANA_RPC || 'https://api.devnet.solana.com',
+  portalUrl: import.meta.env.VITE_LAZORKIT_PORTAL_URL || 'https://portal.lazor.sh',
+  paymasterConfig: {
+    paymasterUrl: import.meta.env.VITE_LAZORKIT_PAYMASTER_URL || 'https://kora.devnet.lazorkit.com',
+  },
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <LazorkitProvider
+      rpcUrl={CONFIG.rpcUrl}
+      portalUrl={CONFIG.portalUrl}
+      paymasterConfig={CONFIG.paymasterConfig}
+    >
+      <App />
+    </LazorkitProvider>
+  </StrictMode>,
+)

package/templates/vite/tailwind.config.js.ejs

@@ -0,0 +1,13 @@
+<% if (styling === 'tailwind') { %>
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+<% } %>

package/templates/vite/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/vite/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}