create-lightning-scaffold 1.0.0 → 1.0.1

package/templates/backend/supabase/index.ts

@@ -5,12 +5,113 @@ const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY || process.env.NEX
 
 export const supabase = createClient(supabaseUrl, supabaseKey);
 
-// Example: Save wallet to user profile
-export async function saveWallet(userId: string, walletAddress: string) {
-  return supabase.from("wallets").upsert({ user_id: userId, address: walletAddress });
+// Types
+export interface User {
+  id: string;
+  wallet_address: string;
+  created_at: string;
 }
 
-// Example: Get user's transactions
-export async function getTransactions(walletAddress: string) {
-  return supabase.from("transactions").select("*").eq("wallet_address", walletAddress).order("created_at", { ascending: false });
+export interface SwapRecord {
+  id: string;
+  wallet_address: string;
+  from_token: string;
+  to_token: string;
+  from_amount: string;
+  to_amount: string;
+  signature: string;
+  created_at: string;
 }
+
+// User Management
+export async function createOrGetUser(walletAddress: string) {
+  const { data: existing } = await supabase
+    .from("users")
+    .select("*")
+    .eq("wallet_address", walletAddress)
+    .single();
+
+  if (existing) return existing;
+
+  const { data, error } = await supabase
+    .from("users")
+    .insert({ wallet_address: walletAddress })
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+// Swap History
+export async function saveSwap(swap: Omit<SwapRecord, "id" | "created_at">) {
+  const { data, error } = await supabase.from("swaps").insert(swap).select().single();
+  if (error) throw error;
+  return data;
+}
+
+export async function getSwapHistory(walletAddress: string, limit = 20) {
+  const { data, error } = await supabase
+    .from("swaps")
+    .select("*")
+    .eq("wallet_address", walletAddress)
+    .order("created_at", { ascending: false })
+    .limit(limit);
+
+  if (error) throw error;
+  return data;
+}
+
+// Message Signatures (for verification records)
+export async function saveSignature(walletAddress: string, message: string, signature: string) {
+  const { data, error } = await supabase
+    .from("signatures")
+    .insert({ wallet_address: walletAddress, message, signature })
+    .select()
+    .single();
+
+  if (error) throw error;
+  return data;
+}
+
+/*
+SQL Schema - Run in Supabase SQL Editor:
+
+create table users (
+  id uuid default gen_random_uuid() primary key,
+  wallet_address text unique not null,
+  created_at timestamp with time zone default now()
+);
+
+create table swaps (
+  id uuid default gen_random_uuid() primary key,
+  wallet_address text not null references users(wallet_address),
+  from_token text not null,
+  to_token text not null,
+  from_amount text not null,
+  to_amount text not null,
+  signature text not null,
+  created_at timestamp with time zone default now()
+);
+
+create table signatures (
+  id uuid default gen_random_uuid() primary key,
+  wallet_address text not null references users(wallet_address),
+  message text not null,
+  signature text not null,
+  created_at timestamp with time zone default now()
+);
+
+-- Enable RLS
+alter table users enable row level security;
+alter table swaps enable row level security;
+alter table signatures enable row level security;
+
+-- Policies (adjust based on your auth setup)
+create policy "Users can read own data" on users for select using (true);
+create policy "Users can insert" on users for insert with check (true);
+create policy "Swaps readable by wallet owner" on swaps for select using (true);
+create policy "Swaps insertable" on swaps for insert with check (true);
+create policy "Signatures readable" on signatures for select using (true);
+create policy "Signatures insertable" on signatures for insert with check (true);
+*/

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

@@ -1,18 +1,25 @@
 # LazorKit Configuration
-LAZORKIT_API_KEY=your_api_key_here
-LAZORKIT_PORTAL_URL=https://portal.lazor.sh
-LAZORKIT_PAYMASTER_URL=https://kora.devnet.lazorkit.com
+NEXT_PUBLIC_LAZORKIT_PORTAL_URL=https://portal.lazor.sh
+NEXT_PUBLIC_LAZORKIT_PAYMASTER_URL=https://kora.devnet.lazorkit.com
+EXPO_PUBLIC_LAZORKIT_PORTAL_URL=https://portal.lazor.sh
+EXPO_PUBLIC_LAZORKIT_PAYMASTER_URL=https://kora.devnet.lazorkit.com
 
 # Solana
-SOLANA_RPC=https://api.devnet.solana.com
-SOLANA_NETWORK=devnet
+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
 <% if (backend === 'supabase') { %>
 # Supabase
-SUPABASE_URL=your_supabase_url
-SUPABASE_ANON_KEY=your_supabase_anon_key
+NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+EXPO_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 <% } %><% if (backend === 'firebase') { %>
 # Firebase
-FIREBASE_API_KEY=your_firebase_api_key
-FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
-FIREBASE_PROJECT_ID=your_project_id
+NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
+EXPO_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
+EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
+EXPO_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
 <% } %>

package/templates/lib/backend.ts.ejs

@@ -0,0 +1,59 @@
+<% if (backend === 'supabase') { %>
+import { supabase, createOrGetUser, saveSwap, getSwapHistory, saveSignature } from "./supabase";
+
+export { supabase, createOrGetUser, saveSwap, getSwapHistory, saveSignature };
+
+// Hook to sync wallet on connect
+export async function onWalletConnect(walletAddress: string) {
+  return createOrGetUser(walletAddress);
+}
+
+// Hook to save swap after successful transaction
+export async function onSwapComplete(
+  walletAddress: string,
+  fromToken: string,
+  toToken: string,
+  fromAmount: string,
+  toAmount: string,
+  signature: string
+) {
+  return saveSwap({ wallet_address: walletAddress, from_token: fromToken, to_token: toToken, from_amount: fromAmount, to_amount: toAmount, signature });
+}
+
+// Hook to save signature after signing
+export async function onMessageSigned(walletAddress: string, message: string, signature: string) {
+  return saveSignature(walletAddress, message, signature);
+}
+<% } else if (backend === 'firebase') { %>
+import { db, createOrGetUser, saveSwap, getSwapHistory, saveSignature } from "./firebase";
+
+export { db, createOrGetUser, saveSwap, getSwapHistory, saveSignature };
+
+// Hook to sync wallet on connect
+export async function onWalletConnect(walletAddress: string) {
+  return createOrGetUser(walletAddress);
+}
+
+// Hook to save swap after successful transaction
+export async function onSwapComplete(
+  walletAddress: string,
+  fromToken: string,
+  toToken: string,
+  fromAmount: string,
+  toAmount: string,
+  signature: string
+) {
+  return saveSwap({ walletAddress, fromToken, toToken, fromAmount, toAmount, signature });
+}
+
+// Hook to save signature after signing
+export async function onMessageSigned(walletAddress: string, message: string, signature: string) {
+  return saveSignature(walletAddress, message, signature);
+}
+<% } else { %>
+// No backend configured - these are no-op stubs
+export async function onWalletConnect(_walletAddress: string) {}
+export async function onSwapComplete(..._args: any[]) {}
+export async function onMessageSigned(..._args: any[]) {}
+export async function getSwapHistory(_walletAddress: string) { return []; }
+<% } %>

package/templates/mobile/app/_layout.tsx

@@ -1,59 +1,29 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
-
-import { useColorScheme } from '@/components/useColorScheme';
-
-export {
-  // Catch any errors thrown by the Layout component.
-  ErrorBoundary,
-} from 'expo-router';
+import 'react-native-get-random-values';
+import 'react-native-url-polyfill/auto';
+import { Buffer } from 'buffer';
+global.Buffer = global.Buffer || Buffer;
 
-export const unstable_settings = {
-  // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
+import { Stack } from 'expo-router';
+import { LazorKitProvider } from '@lazorkit/wallet-mobile-adapter';
+import { StatusBar } from 'expo-status-bar';
+
+const CONFIG = {
+  rpcUrl: process.env.EXPO_PUBLIC_SOLANA_RPC || 'https://api.devnet.solana.com',
+  portalUrl: process.env.EXPO_PUBLIC_LAZORKIT_PORTAL_URL || 'https://portal.lazor.sh',
+  configPaymaster: {
+    paymasterUrl: process.env.EXPO_PUBLIC_LAZORKIT_PAYMASTER_URL || 'https://kora.devnet.lazorkit.com',
+  },
 };
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
-
 export default function RootLayout() {
-  const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
-    ...FontAwesome.font,
-  });
-
-  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
-  useEffect(() => {
-    if (error) throw error;
-  }, [error]);
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
-
-  return <RootLayoutNav />;
-}
-
-function RootLayoutNav() {
-  const colorScheme = useColorScheme();
-
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
-      </Stack>
-    </ThemeProvider>
+    <LazorKitProvider
+      rpcUrl={CONFIG.rpcUrl}
+      portalUrl={CONFIG.portalUrl}
+      configPaymaster={CONFIG.configPaymaster}
+    >
+      <StatusBar style="auto" />
+      <Stack screenOptions={{ headerShown: false }} />
+    </LazorKitProvider>
   );
 }

package/templates/mobile/app/index.tsx.ejs

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { View, Text, TouchableOpacity<% if (styling !== 'nativewind') { %>, StyleSheet<% } %> } from 'react-native';
+import { useWallet } from '@lazorkit/wallet-mobile-adapter';
+import { Onboarding } from '@/components/Onboarding';
+import { Swap } from '@/components/Swap';
+import { Recovery } from '@/components/Recovery';
+import { History } from '@/components/History';
+<% if (styling !== 'nativewind') { %>
+const styles = StyleSheet.create({
+  nav: { flexDirection: 'row', justifyContent: 'center', gap: 16, paddingVertical: 16 },
+  navBtn: { fontSize: 12, color: '#737373' },
+});
+<% } %>
+type Screen = 'swap' | 'recovery' | 'history';
+
+export default function Index() {
+  const { isConnected } = useWallet();
+  const [screen, setScreen] = useState<Screen>('swap');
+
+  if (!isConnected) return <Onboarding />;
+
+  return (
+    <>
+      {screen === 'swap' && (
+        <>
+          <Swap />
+<% if (styling === 'nativewind') { %>
+          <View className="flex-row justify-center gap-4 py-4 bg-white">
+            <TouchableOpacity onPress={() => setScreen('history')}><Text className="text-xs text-neutral-500">History</Text></TouchableOpacity>
+            <TouchableOpacity onPress={() => setScreen('recovery')}><Text className="text-xs text-neutral-500">Recovery</Text></TouchableOpacity>
+          </View>
+<% } else { %>
+          <View style={styles.nav}>
+            <TouchableOpacity onPress={() => setScreen('history')}><Text style={styles.navBtn}>History</Text></TouchableOpacity>
+            <TouchableOpacity onPress={() => setScreen('recovery')}><Text style={styles.navBtn}>Recovery</Text></TouchableOpacity>
+          </View>
+<% } %>
+        </>
+      )}
+      {screen === 'recovery' && <Recovery onBack={() => setScreen('swap')} />}
+      {screen === 'history' && <History onBack={() => setScreen('swap')} />}
+    </>
+  );
+}

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

@@ -0,0 +1,114 @@
+import { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator, ScrollView<% if (styling !== 'nativewind') { %>, StyleSheet<% } %> } from 'react-native';
+import { useWallet } from '@lazorkit/wallet-mobile-adapter';
+import { Connection, PublicKey } from '@solana/web3.js';
+import * as Linking from 'expo-linking';
+<% if (styling !== 'nativewind') { %>
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
+  title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
+  back: { fontSize: 13, color: '#737373' },
+  list: { gap: 8 },
+  item: { borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 12 },
+  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
+  sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
+  time: { fontSize: 12, color: '#a3a3a3', marginTop: 4 },
+  status: { fontSize: 11, paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, overflow: 'hidden' },
+  success: { backgroundColor: '#dcfce7', color: '#166534' },
+  failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
+  empty: { textAlign: 'center', paddingVertical: 32, color: '#a3a3a3', fontSize: 14 },
+});
+<% } %>
+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 = process.env.EXPO_PUBLIC_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 openTx = (sig: string) => {
+    const cluster = (process.env.EXPO_PUBLIC_SOLANA_RPC || '').includes('mainnet') ? '' : '?cluster=devnet';
+    Linking.openURL(`https://solscan.io/tx/${sig}${cluster}`);
+  };
+
+  return (
+<% if (styling === 'nativewind') { %>
+    <View className="flex-1 bg-white p-6 pt-16">
+      <View className="flex-row items-center justify-between mb-4">
+        <Text className="text-lg font-semibold text-black">History</Text>
+        <TouchableOpacity onPress={onBack}><Text className="text-sm text-neutral-500">← Back</Text></TouchableOpacity>
+      </View>
+      {loading ? (
+        <View className="py-8 items-center"><ActivityIndicator color="#a3a3a3" /></View>
+      ) : txs.length === 0 ? (
+        <Text className="text-center py-8 text-neutral-400">No transactions yet</Text>
+      ) : (
+        <ScrollView className="gap-2" showsVerticalScrollIndicator={false}>
+          {txs.map((tx) => (
+            <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} className="border border-neutral-200 rounded-xl p-3 mb-2">
+              <View className="flex-row justify-between items-center">
+                <Text className="font-mono text-sm text-black">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
+                <Text className={`text-xs px-2 py-0.5 rounded ${tx.err ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'}`}>
+                  {tx.err ? 'Failed' : 'Success'}
+                </Text>
+              </View>
+              <Text className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+<% } else { %>
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>History</Text>
+        <TouchableOpacity onPress={onBack}><Text style={styles.back}>← Back</Text></TouchableOpacity>
+      </View>
+      {loading ? (
+        <View style={{ paddingVertical: 32, alignItems: 'center' }}><ActivityIndicator color="#a3a3a3" /></View>
+      ) : txs.length === 0 ? (
+        <Text style={styles.empty}>No transactions yet</Text>
+      ) : (
+        <ScrollView style={styles.list} showsVerticalScrollIndicator={false}>
+          {txs.map((tx) => (
+            <TouchableOpacity key={tx.signature} onPress={() => openTx(tx.signature)} style={[styles.item, { marginBottom: 8 }]}>
+              <View style={styles.row}>
+                <Text style={styles.sig}>{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</Text>
+                <Text style={[styles.status, tx.err ? styles.failed : styles.success]}>
+                  {tx.err ? 'Failed' : 'Success'}
+                </Text>
+              </View>
+              <Text style={styles.time}>{formatTime(tx.blockTime)}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+<% } %>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { View, Text, TouchableOpacity, ActivityIndicator<% if (styling !== 'nativewind') { %>, StyleSheet<% } %> } from 'react-native';
+import { useWallet } from '@lazorkit/wallet-mobile-adapter';
+import * as Linking from 'expo-linking';
+<% if (styling !== 'nativewind') { %>
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', padding: 24 },
+  content: { width: '100%', maxWidth: 320, alignItems: 'center' },
+  title: { fontSize: 24, fontWeight: '600', color: '#0a0a0a', letterSpacing: -0.5 },
+  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', textAlign: 'center', lineHeight: 20 },
+  button: { marginTop: 32, width: '100%', backgroundColor: '#0a0a0a', paddingVertical: 14, borderRadius: 10, alignItems: 'center' },
+  buttonDisabled: { opacity: 0.5 },
+  buttonText: { color: '#fff', fontSize: 14, fontWeight: '500' },
+  hint: { marginTop: 16, fontSize: 12, color: '#a3a3a3' },
+  error: { marginTop: 16, fontSize: 13, color: '#ef4444', textAlign: 'center' },
+});
+<% } %>
+export function Onboarding() {
+  const { connect, isConnecting } = useWallet();
+  const [error, setError] = useState<string | null>(null);
+  const redirectUrl = Linking.createURL('/');
+
+  const handleStart = async () => {
+    setError(null);
+    try {
+      await connect({ redirectUrl });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Something went wrong');
+    }
+  };
+
+  return (
+<% if (styling === 'nativewind') { %>
+    <View className="flex-1 bg-white justify-center items-center p-6">
+      <View className="w-full max-w-xs items-center">
+        <Text className="text-2xl font-semibold text-black tracking-tight">Welcome</Text>
+        <Text className="mt-2 text-sm text-neutral-500 text-center leading-5">
+          Create a wallet with your fingerprint or face. No seed phrases.
+        </Text>
+        <TouchableOpacity
+          className={`mt-8 w-full bg-black py-3.5 rounded-xl items-center ${isConnecting ? 'opacity-50' : ''}`}
+          onPress={handleStart}
+          disabled={isConnecting}
+        >
+          {isConnecting ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text className="text-white text-sm font-medium">Create Wallet</Text>
+          )}
+        </TouchableOpacity>
+        <Text className="mt-4 text-xs text-neutral-400">Secured by passkeys</Text>
+        {error && <Text className="mt-4 text-sm text-red-500 text-center">{error}</Text>}
+      </View>
+    </View>
+<% } else { %>
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Welcome</Text>
+        <Text style={styles.subtitle}>
+          Create a wallet with your fingerprint or face. No seed phrases.
+        </Text>
+        <TouchableOpacity
+          style={[styles.button, isConnecting && styles.buttonDisabled]}
+          onPress={handleStart}
+          disabled={isConnecting}
+        >
+          {isConnecting ? (
+            <ActivityIndicator color="#fff" size="small" />
+          ) : (
+            <Text style={styles.buttonText}>Create Wallet</Text>
+          )}
+        </TouchableOpacity>
+        <Text style={styles.hint}>Secured by passkeys</Text>
+        {error && <Text style={styles.error}>{error}</Text>}
+      </View>
+    </View>
+<% } %>
+  );
+}

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

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