create-lightning-scaffold 1.0.0

package/templates/examples/mobile/biometric-onboard.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import { useRouter } from "expo-router";
+import * as Linking from "expo-linking";
+import * as LocalAuthentication from "expo-local-authentication";
+import { connectPasskey } from "../lib/lazorkit";
+import { useStore } from "../lib/store";
+
+export default function BiometricOnboard() {
+  const router = useRouter();
+  const { wallet, setWallet } = useStore();
+  const [step, setStep] = useState<"welcome" | "biometric" | "connecting" | "done">("welcome");
+  const [error, setError] = useState<string | null>(null);
+
+  const checkBiometrics = async () => {
+    const compatible = await LocalAuthentication.hasHardwareAsync();
+    const enrolled = await LocalAuthentication.isEnrolledAsync();
+
+    if (!compatible || !enrolled) {
+      setError("Biometric authentication not available");
+      return;
+    }
+
+    const result = await LocalAuthentication.authenticateAsync({ promptMessage: "Verify your identity" });
+
+    if (result.success) {
+      setStep("connecting");
+      await handleConnect();
+    } else {
+      setError("Authentication failed");
+    }
+  };
+
+  const handleConnect = async () => {
+    try {
+      const redirectUrl = Linking.createURL("auth");
+      const result = await connectPasskey(redirectUrl);
+      if (result) {
+        setWallet(result);
+        setStep("done");
+      } else {
+        setError("Connection cancelled");
+        setStep("biometric");
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed");
+      setStep("biometric");
+    }
+  };
+
+  return (
+    <View className="flex-1 justify-center p-5 bg-white">
+      {step === "welcome" && (
+        <>
+          <Text className="text-3xl font-bold text-center">Welcome</Text>
+          <Text className="text-gray-500 text-center mt-2 mb-8">Secure your wallet with biometrics</Text>
+          <TouchableOpacity className="bg-blue-600 p-4 rounded-xl" onPress={() => setStep("biometric")}>
+            <Text className="text-white text-center font-semibold">Get Started</Text>
+          </TouchableOpacity>
+        </>
+      )}
+
+      {step === "biometric" && (
+        <>
+          <Text className="text-3xl font-bold text-center">🔐</Text>
+          <Text className="text-xl font-bold text-center mt-4">Enable Biometrics</Text>
+          <Text className="text-gray-500 text-center mt-2 mb-8">Use Face ID or Touch ID to secure your wallet</Text>
+          <TouchableOpacity className="bg-blue-600 p-4 rounded-xl" onPress={checkBiometrics}>
+            <Text className="text-white text-center font-semibold">Authenticate</Text>
+          </TouchableOpacity>
+        </>
+      )}
+
+      {step === "connecting" && (
+        <View className="items-center">
+          <ActivityIndicator size="large" color="#0066FF" />
+          <Text className="text-gray-500 mt-4">Creating your wallet...</Text>
+        </View>
+      )}
+
+      {step === "done" && wallet && (
+        <>
+          <Text className="text-4xl text-center">✓</Text>
+          <Text className="text-xl font-bold text-center mt-4">You're all set!</Text>
+          <View className="bg-gray-100 p-4 rounded-xl mt-6">
+            <Text className="text-sm text-gray-500">Your wallet</Text>
+            <Text className="font-mono">{wallet.address.slice(0, 12)}...{wallet.address.slice(-8)}</Text>
+          </View>
+          <TouchableOpacity className="bg-blue-600 p-4 rounded-xl mt-6" onPress={() => router.replace("/")}>
+            <Text className="text-white text-center font-semibold">Continue to App</Text>
+          </TouchableOpacity>
+        </>
+      )}
+
+      {error && <Text className="text-red-500 text-center mt-4">{error}</Text>}
+
+      {step !== "done" && step !== "connecting" && (
+        <TouchableOpacity className="mt-8" onPress={() => router.back()}>
+          <Text className="text-blue-600 text-center">← Back</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}

package/templates/examples/mobile/gasless-transfer.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, ActivityIndicator } from "react-native";
+import { useRouter } from "expo-router";
+import * as Linking from "expo-linking";
+import { PublicKey, Transaction, SystemProgram, LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { signAndSendTransaction, sponsorTransaction } from "../lib/lazorkit";
+import { useStore } from "../lib/store";
+
+export default function GaslessTransfer() {
+  const router = useRouter();
+  const { wallet } = useStore();
+  const [recipient, setRecipient] = useState("");
+  const [amount, setAmount] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  const handleTransfer = async () => {
+    if (!wallet || !recipient || !amount) return;
+    setLoading(true);
+    setResult(null);
+
+    try {
+      const tx = new Transaction().add(
+        SystemProgram.transfer({
+          fromPubkey: wallet.publicKey,
+          toPubkey: new PublicKey(recipient),
+          lamports: parseFloat(amount) * LAMPORTS_PER_SOL,
+        })
+      );
+
+      const sponsoredTx = await sponsorTransaction(tx);
+      const signature = await signAndSendTransaction(sponsoredTx, wallet, Linking.createURL("callback"));
+
+      setResult(signature ? { success: true, message: `Sent! ${signature.slice(0, 16)}...` } : { success: false, message: "Cancelled" });
+    } catch (e) {
+      setResult({ success: false, message: e instanceof Error ? e.message : "Failed" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!wallet) {
+    return (
+      <View className="flex-1 justify-center p-5">
+        <Text className="text-xl font-bold text-center mb-4">Connect wallet first</Text>
+        <TouchableOpacity className="bg-blue-600 p-4 rounded-xl" onPress={() => router.push("/passkey-login")}>
+          <Text className="text-white text-center font-semibold">Go to Login</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View className="flex-1 justify-center p-5 bg-white">
+      <Text className="text-3xl font-bold text-center">Gasless Transfer</Text>
+      <Text className="text-gray-500 text-center mt-2 mb-6">Send SOL without paying gas</Text>
+
+      <TextInput className="border border-gray-300 rounded-lg p-3 mb-3" placeholder="Recipient address" value={recipient} onChangeText={setRecipient} />
+      <TextInput className="border border-gray-300 rounded-lg p-3 mb-4" placeholder="Amount (SOL)" value={amount} onChangeText={setAmount} keyboardType="decimal-pad" />
+
+      <TouchableOpacity className="bg-blue-600 p-4 rounded-xl items-center" onPress={handleTransfer} disabled={loading}>
+        {loading ? <ActivityIndicator color="#fff" /> : <Text className="text-white font-semibold">Send (Gasless)</Text>}
+      </TouchableOpacity>
+
+      {result && <Text className={`text-center mt-4 ${result.success ? "text-green-600" : "text-red-500"}`}>{result.message}</Text>}
+
+      <TouchableOpacity className="mt-8" onPress={() => router.back()}>
+        <Text className="text-blue-600 text-center">← Back</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/templates/examples/mobile/index.tsx

@@ -0,0 +1,30 @@
+import { View, Text, TouchableOpacity } from "react-native";
+import { useRouter } from "expo-router";
+
+export default function Home() {
+  const router = useRouter();
+
+  const examples = [
+    { route: "/passkey-login", title: "Passkey Login", desc: "WebAuthn authentication" },
+    { route: "/gasless-transfer", title: "Gasless Transfer", desc: "Send SOL without gas" },
+    { route: "/biometric-onboard", title: "Biometric Onboarding", desc: "Secure wallet setup" },
+  ];
+
+  return (
+    <View className="flex-1 justify-center p-5 bg-white">
+      <Text className="text-3xl font-bold text-center">Welcome</Text>
+      <Text className="text-gray-500 text-center mt-2 mb-8">LazorKit SDK Examples</Text>
+
+      {examples.map((ex) => (
+        <TouchableOpacity
+          key={ex.route}
+          className="border border-gray-200 p-4 rounded-xl mb-3"
+          onPress={() => router.push(ex.route)}
+        >
+          <Text className="font-semibold">{ex.title}</Text>
+          <Text className="text-sm text-gray-500">{ex.desc}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

package/templates/examples/mobile/passkey-login.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { View, Text, TouchableOpacity, ActivityIndicator } from "react-native";
+import { useRouter } from "expo-router";
+import * as Linking from "expo-linking";
+import { connectPasskey } from "../lib/lazorkit";
+import { useStore } from "../lib/store";
+
+export default function PasskeyLogin() {
+  const router = useRouter();
+  const { wallet, setWallet } = useStore();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleConnect = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const redirectUrl = Linking.createURL("auth");
+      const result = await connectPasskey(redirectUrl);
+      if (result) setWallet(result);
+      else setError("Connection cancelled");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Connection failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View className="flex-1 justify-center p-5 bg-white">
+      <Text className="text-3xl font-bold text-center">Passkey Login</Text>
+      <Text className="text-base text-gray-500 text-center mt-2 mb-8">Connect with biometric authentication</Text>
+
+      {wallet ? (
+        <View className="bg-gray-100 p-5 rounded-xl">
+          <Text className="text-sm text-gray-500">Connected Wallet</Text>
+          <Text className="text-base font-semibold font-mono">{wallet.address.slice(0, 8)}...{wallet.address.slice(-8)}</Text>
+          <TouchableOpacity className="border border-gray-300 p-3 rounded-lg mt-4" onPress={() => setWallet(null)}>
+            <Text className="text-center text-gray-600">Disconnect</Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <TouchableOpacity className="bg-blue-600 p-4 rounded-xl items-center" onPress={handleConnect} disabled={loading}>
+          {loading ? <ActivityIndicator color="#fff" /> : <Text className="text-white text-base font-semibold">Connect with Passkey</Text>}
+        </TouchableOpacity>
+      )}
+
+      {error && <Text className="text-red-500 text-center mt-4">{error}</Text>}
+
+      <TouchableOpacity className="mt-8 items-center" onPress={() => router.back()}>
+        <Text className="text-blue-600 text-base">← Back</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/templates/examples/web/biometric-onboard/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { connectPasskey } from "@/lib/lazorkit";
+import { useStore } from "@/lib/store";
+
+export default function BiometricOnboard() {
+  const { wallet, setWallet } = useStore();
+  const [step, setStep] = useState<"welcome" | "connecting" | "done">("welcome");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleConnect = async () => {
+    setStep("connecting");
+    setError(null);
+    try {
+      const result = await connectPasskey();
+      if (result) {
+        setWallet(result);
+        setStep("done");
+      } else {
+        setError("Connection cancelled");
+        setStep("welcome");
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed");
+      setStep("welcome");
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-6">
+      {step === "welcome" && (
+        <>
+          <h1 className="text-3xl font-bold">Welcome</h1>
+          <p className="text-gray-500 mt-2 mb-8">Secure your wallet with passkeys</p>
+          <button onClick={handleConnect} className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold hover:bg-blue-700">
+            Get Started
+          </button>
+        </>
+      )}
+
+      {step === "connecting" && (
+        <div className="text-center">
+          <div className="animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto" />
+          <p className="text-gray-500 mt-4">Creating your wallet...</p>
+        </div>
+      )}
+
+      {step === "done" && wallet && (
+        <>
+          <div className="text-5xl mb-4">✓</div>
+          <h1 className="text-2xl font-bold">You're all set!</h1>
+          <div className="bg-gray-100 p-4 rounded-xl mt-6 w-full max-w-sm">
+            <p className="text-sm text-gray-500">Your wallet</p>
+            <p className="font-mono">{wallet.address.slice(0, 12)}...{wallet.address.slice(-8)}</p>
+          </div>
+          <Link href="/" className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold mt-6 hover:bg-blue-700">
+            Continue to App
+          </Link>
+        </>
+      )}
+
+      {error && <p className="text-red-500 mt-4">{error}</p>}
+
+      {step === "welcome" && (
+        <Link href="/examples" className="text-blue-600 mt-8">← Back to Examples</Link>
+      )}
+    </div>
+  );
+}

package/templates/examples/web/gasless-transfer/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { PublicKey, Transaction, SystemProgram, LAMPORTS_PER_SOL } from "@solana/web3.js";
+import { signAndSendTransaction, sponsorTransaction } from "@/lib/lazorkit";
+import { useStore } from "@/lib/store";
+
+export default function GaslessTransfer() {
+  const { wallet } = useStore();
+  const [recipient, setRecipient] = useState("");
+  const [amount, setAmount] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<{ success: boolean; message: string } | null>(null);
+
+  const handleTransfer = async () => {
+    if (!wallet || !recipient || !amount) return;
+    setLoading(true);
+    setResult(null);
+
+    try {
+      const tx = new Transaction().add(
+        SystemProgram.transfer({
+          fromPubkey: wallet.publicKey,
+          toPubkey: new PublicKey(recipient),
+          lamports: parseFloat(amount) * LAMPORTS_PER_SOL,
+        })
+      );
+
+      const sponsoredTx = await sponsorTransaction(tx);
+      const signature = await signAndSendTransaction(sponsoredTx, wallet);
+
+      setResult(signature ? { success: true, message: `Sent! ${signature.slice(0, 20)}...` } : { success: false, message: "Cancelled" });
+    } catch (e) {
+      setResult({ success: false, message: e instanceof Error ? e.message : "Failed" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!wallet) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center p-6">
+        <h1 className="text-xl font-bold mb-4">Connect wallet first</h1>
+        <Link href="/examples/passkey-login" className="bg-blue-600 text-white px-6 py-3 rounded-xl">Go to Login</Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-6">
+      <h1 className="text-3xl font-bold">Gasless Transfer</h1>
+      <p className="text-gray-500 mt-2 mb-8">Send SOL without paying gas</p>
+
+      <div className="w-full max-w-sm space-y-4">
+        <input
+          type="text"
+          placeholder="Recipient address"
+          value={recipient}
+          onChange={(e) => setRecipient(e.target.value)}
+          className="w-full border border-gray-300 rounded-lg p-3"
+        />
+        <input
+          type="text"
+          placeholder="Amount (SOL)"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          className="w-full border border-gray-300 rounded-lg p-3"
+        />
+        <button
+          onClick={handleTransfer}
+          disabled={loading || !recipient || !amount}
+          className="w-full bg-blue-600 text-white py-4 rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50"
+        >
+          {loading ? "Sending..." : "Send (Gasless)"}
+        </button>
+      </div>
+
+      {result && (
+        <p className={`mt-4 ${result.success ? "text-green-600" : "text-red-500"}`}>{result.message}</p>
+      )}
+
+      <Link href="/examples" className="text-blue-600 mt-8">← Back to Examples</Link>
+    </div>
+  );
+}

package/templates/examples/web/page.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+export default function Examples() {
+  const examples = [
+    { href: "/examples/passkey-login", title: "Passkey Login", desc: "WebAuthn-based authentication" },
+    { href: "/examples/gasless-transfer", title: "Gasless Transfer", desc: "Send SOL without gas fees" },
+    { href: "/examples/biometric-onboard", title: "Biometric Onboarding", desc: "Secure wallet setup flow" },
+  ];
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-6">
+      <h1 className="text-3xl font-bold mb-2">LazorKit Examples</h1>
+      <p className="text-gray-500 mb-8">Explore the SDK integration demos</p>
+
+      <div className="grid gap-4 w-full max-w-md">
+        {examples.map((ex) => (
+          <Link key={ex.href} href={ex.href} className="block p-4 border border-gray-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition">
+            <h2 className="font-semibold">{ex.title}</h2>
+            <p className="text-sm text-gray-500">{ex.desc}</p>
+          </Link>
+        ))}
+      </div>
+
+      <Link href="/" className="text-blue-600 mt-8">← Back to Home</Link>
+    </div>
+  );
+}

package/templates/examples/web/passkey-login/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { connectPasskey } from "@/lib/lazorkit";
+import { useStore } from "@/lib/store";
+
+export default function PasskeyLogin() {
+  const { wallet, setWallet } = useStore();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleConnect = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await connectPasskey();
+      if (result) setWallet(result);
+      else setError("Connection cancelled");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Connection failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-6">
+      <h1 className="text-3xl font-bold">Passkey Login</h1>
+      <p className="text-gray-500 mt-2 mb-8">Connect with biometric authentication</p>
+
+      {wallet ? (
+        <div className="bg-gray-100 p-6 rounded-xl w-full max-w-sm">
+          <p className="text-sm text-gray-500">Connected Wallet</p>
+          <p className="font-mono font-semibold">{wallet.address.slice(0, 8)}...{wallet.address.slice(-8)}</p>
+          <button onClick={() => setWallet(null)} className="w-full mt-4 border border-gray-300 p-3 rounded-lg text-gray-600 hover:bg-gray-50">
+            Disconnect
+          </button>
+        </div>
+      ) : (
+        <button onClick={handleConnect} disabled={loading} className="bg-blue-600 text-white px-8 py-4 rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50">
+          {loading ? "Connecting..." : "Connect with Passkey"}
+        </button>
+      )}
+
+      {error && <p className="text-red-500 mt-4">{error}</p>}
+
+      <Link href="/examples" className="text-blue-600 mt-8">← Back to Examples</Link>
+    </div>
+  );
+}

package/templates/lib/lazorkit/mobile/index.ts

@@ -0,0 +1,53 @@
+import * as WebBrowser from "expo-web-browser";
+import * as Linking from "expo-linking";
+import { Connection, PublicKey, Transaction } from "@solana/web3.js";
+
+const PORTAL_URL = process.env.EXPO_PUBLIC_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";
+const PAYMASTER_URL = process.env.EXPO_PUBLIC_LAZORKIT_PAYMASTER_URL || "https://kora.devnet.lazorkit.com";
+const RPC_URL = process.env.EXPO_PUBLIC_SOLANA_RPC || "https://api.devnet.solana.com";
+
+export interface LazorWallet {
+  address: string;
+  publicKey: PublicKey;
+}
+
+export async function connectPasskey(redirectUrl: string): Promise<LazorWallet | null> {
+  const authUrl = `${PORTAL_URL}/auth?redirect=${encodeURIComponent(redirectUrl)}`;
+  const result = await WebBrowser.openAuthSessionAsync(authUrl, redirectUrl);
+
+  if (result.type === "success" && result.url) {
+    const params = Linking.parse(result.url);
+    const address = params.queryParams?.address as string;
+    if (address) return { address, publicKey: new PublicKey(address) };
+  }
+  return null;
+}
+
+export async function signAndSendTransaction(tx: Transaction, wallet: LazorWallet, redirectUrl: string): Promise<string | null> {
+  const connection = new Connection(RPC_URL);
+  const { blockhash } = await connection.getLatestBlockhash();
+  tx.recentBlockhash = blockhash;
+  tx.feePayer = wallet.publicKey;
+
+  const serialized = tx.serialize({ requireAllSignatures: false }).toString("base64");
+  const signUrl = `${PORTAL_URL}/sign?tx=${encodeURIComponent(serialized)}&redirect=${encodeURIComponent(redirectUrl)}`;
+  const result = await WebBrowser.openAuthSessionAsync(signUrl, redirectUrl);
+
+  if (result.type === "success" && result.url) {
+    const params = Linking.parse(result.url);
+    return (params.queryParams?.signature as string) || null;
+  }
+  return null;
+}
+
+export async function sponsorTransaction(tx: Transaction): Promise<Transaction> {
+  const res = await fetch(`${PAYMASTER_URL}/sponsor`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ transaction: tx.serialize({ requireAllSignatures: false }).toString("base64") }),
+  });
+  const { sponsoredTx } = await res.json();
+  return Transaction.from(Buffer.from(sponsoredTx, "base64"));
+}
+
+export const connection = new Connection(RPC_URL);

package/templates/lib/lazorkit/web/index.ts

@@ -0,0 +1,67 @@
+"use client";
+import { Connection, PublicKey, Transaction } from "@solana/web3.js";
+
+const PORTAL_URL = process.env.NEXT_PUBLIC_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";
+const PAYMASTER_URL = process.env.NEXT_PUBLIC_LAZORKIT_PAYMASTER_URL || "https://kora.devnet.lazorkit.com";
+const RPC_URL = process.env.NEXT_PUBLIC_SOLANA_RPC || "https://api.devnet.solana.com";
+
+export interface LazorWallet {
+  address: string;
+  publicKey: PublicKey;
+}
+
+export async function connectPasskey(): Promise<LazorWallet | null> {
+  const redirectUrl = `${window.location.origin}/auth/callback`;
+  const popup = window.open(`${PORTAL_URL}/auth?redirect=${encodeURIComponent(redirectUrl)}`, "lazorkit", "width=500,height=600");
+
+  return new Promise((resolve) => {
+    const handler = (e: MessageEvent) => {
+      if (e.origin === window.location.origin && e.data?.address) {
+        window.removeEventListener("message", handler);
+        popup?.close();
+        resolve({ address: e.data.address, publicKey: new PublicKey(e.data.address) });
+      }
+    };
+    window.addEventListener("message", handler);
+    const check = setInterval(() => {
+      if (popup?.closed) { clearInterval(check); window.removeEventListener("message", handler); resolve(null); }
+    }, 500);
+  });
+}
+
+export async function signAndSendTransaction(tx: Transaction, wallet: LazorWallet): Promise<string | null> {
+  const connection = new Connection(RPC_URL);
+  const { blockhash } = await connection.getLatestBlockhash();
+  tx.recentBlockhash = blockhash;
+  tx.feePayer = wallet.publicKey;
+
+  const serialized = tx.serialize({ requireAllSignatures: false }).toString("base64");
+  const redirectUrl = `${window.location.origin}/auth/callback`;
+  const popup = window.open(`${PORTAL_URL}/sign?tx=${encodeURIComponent(serialized)}&redirect=${encodeURIComponent(redirectUrl)}`, "lazorkit", "width=500,height=600");
+
+  return new Promise((resolve) => {
+    const handler = (e: MessageEvent) => {
+      if (e.origin === window.location.origin && e.data?.signature) {
+        window.removeEventListener("message", handler);
+        popup?.close();
+        resolve(e.data.signature);
+      }
+    };
+    window.addEventListener("message", handler);
+    const check = setInterval(() => {
+      if (popup?.closed) { clearInterval(check); window.removeEventListener("message", handler); resolve(null); }
+    }, 500);
+  });
+}
+
+export async function sponsorTransaction(tx: Transaction): Promise<Transaction> {
+  const res = await fetch(`${PAYMASTER_URL}/sponsor`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ transaction: tx.serialize({ requireAllSignatures: false }).toString("base64") }),
+  });
+  const { sponsoredTx } = await res.json();
+  return Transaction.from(Buffer.from(sponsoredTx, "base64"));
+}
+
+export const connection = new Connection(RPC_URL);

package/templates/mobile/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

package/templates/mobile/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}