@jerydam/lumina-sdk 0.1.0

package/components/sdk/transaction-confirm.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import { useState } from 'react'
+import { Loader2, CheckCircle, AlertCircle, ExternalLink, Shield } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { useLumina } from './lumina-provider'
+import { encodeFunctionData, parseEther } from 'viem'
+
+interface TransactionDetails {
+  from: string // The smart account address
+  signerAddress: string // The underlying Turnkey embedded wallet EOA
+  to: string
+  amount: string
+  token?: string
+  network?: string
+  chainId?: string
+  gasFee?: string
+  estimatedTime?: string
+  callData?: string // Raw hex data for contract interactions
+  isDeployed?: boolean // Tells us if we need to append initCode
+  factoryAddress?: string // Required if !isDeployed
+}
+
+interface TransactionConfirmProps {
+  transaction: TransactionDetails
+  onConfirm?: () => Promise<void>
+  onCancel?: () => void
+}
+
+type TransactionStatus = 'pending' | 'sponsoring' | 'signing' | 'submitting' | 'confirmed' | 'failed'
+
+export function TransactionConfirm({
+  transaction,
+  onConfirm,
+  onCancel,
+}: TransactionConfirmProps) {
+  const { fetchApi } = useLumina()
+  const [status, setStatus] = useState<TransactionStatus>('pending')
+  const [txHash, setTxHash] = useState<string>('')
+  const [errorMessage, setErrorMessage] = useState<string>('')
+
+  const handleConfirm = async () => {
+    setStatus('sponsoring')
+    setErrorMessage('')
+    
+    try {
+      if (onConfirm) await onConfirm()
+
+      const chainId = transaction.chainId || '1'
+
+      // ── 1. Handle Counterfactual Deployment (initCode) ──────────────────────
+      let finalInitCode = '0x'
+      
+      if (!transaction.isDeployed && transaction.factoryAddress && transaction.signerAddress) {
+        const factoryABI = [{
+          name: 'createAccount',
+          type: 'function',
+          inputs: [
+            { name: 'owner', type: 'address' },
+            { name: 'salt', type: 'uint256' }
+          ]
+        }]
+        
+        const createAccountData = encodeFunctionData({
+          abi: factoryABI,
+          functionName: 'createAccount',
+          args: [transaction.signerAddress as `0x${string}`, 0n] // salt = 0 matches auth.py
+        })
+        
+        // initCode is Factory Address + calldata
+        finalInitCode = `${transaction.factoryAddress}${createAccountData.replace('0x', '')}`
+      }
+
+      // ── 2. Encode SmartAccount execution (callData) ─────────────────────────
+      const smartAccountABI = [{
+        name: 'execute',
+        type: 'function',
+        inputs: [
+          { name: 'target', type: 'address' },
+          { name: 'value', type: 'uint256' },
+          { name: 'data', type: 'bytes' }
+        ]
+      }]
+
+      const finalCallData = encodeFunctionData({
+        abi: smartAccountABI,
+        functionName: 'execute',
+        args: [
+          transaction.to as `0x${string}`,
+          transaction.amount ? parseEther(transaction.amount) : 0n,
+          (transaction.callData as `0x${string}`) || '0x'
+        ]
+      })
+
+      // ── 3. Build the UserOperation ──────────────────────────────────────────
+      const partialUserOp = {
+        sender: transaction.from,
+        nonce: 0, // In production, fetch this via eth_call to the EntryPoint
+        init_code: finalInitCode, 
+        call_data: finalCallData, 
+        call_gas_limit: 50000,
+        verification_gas_limit: 150000,
+        pre_verification_gas: 21000,
+        max_fee_per_gas: 2000000000,
+        max_priority_fee_per_gas: 1000000000,
+        chain_id: chainId
+      }
+
+      // ── 4. Get Paymaster Sponsorship ────────────────────────────────────────
+      const signRes = await fetchApi('/v1/paymaster/sign', {
+        method: 'POST',
+        body: JSON.stringify(partialUserOp)
+      })
+
+      setStatus('signing')
+
+      // ── 5. Local User Signature (Turnkey integration goes here) ─────────────
+      // Simulating a Passkey/Biometric signing delay
+      await new Promise(resolve => setTimeout(resolve, 1500))
+      const mockUserSignature = "0xabcd1234..." // Replace with Turnkey sign output
+
+      const fullySignedOp = {
+        ...partialUserOp,
+        paymasterAndData: signRes.paymaster_and_data,
+        signature: mockUserSignature
+      }
+
+      setStatus('submitting')
+
+      // ── 6. Submit to the Bundler ────────────────────────────────────────────
+      const submitRes = await fetchApi('/v1/paymaster/submit', {
+        method: 'POST',
+        body: JSON.stringify({
+          user_op_id: signRes.user_op_id,
+          signed_user_op: fullySignedOp,
+          chain_id: chainId
+        })
+      })
+
+      setTxHash(submitRes.user_op_hash)
+      setStatus('confirmed')
+
+    } catch (error: any) {
+      console.error("Transaction failed:", error)
+      setStatus('failed')
+      setErrorMessage(error.message || "Failed to process transaction")
+    }
+  }
+
+  return (
+    <Card className="glassmorphism-dark p-8 border-border w-full max-w-lg mx-auto">
+      {status === 'pending' && (
+        <>
+          <div className="mb-6">
+            <h2 className="text-2xl font-bold mb-2">Confirm Transaction</h2>
+            <p className="text-foreground/60 text-sm">Review the details before confirming</p>
+          </div>
+
+          <div className="space-y-4 mb-6 p-4 bg-white/5 rounded-lg border border-border/50">
+            <div className="flex justify-between items-start">
+              <span className="text-foreground/60">To Address</span>
+              <span className="font-mono text-sm">{transaction.to.slice(0, 6)}...{transaction.to.slice(-4)}</span>
+            </div>
+            <div className="flex justify-between items-start border-t border-border/30 pt-4">
+              <span className="text-foreground/60">Amount</span>
+              <span className="font-bold text-lg">{transaction.amount} {transaction.token || 'ETH'}</span>
+            </div>
+            {transaction.gasFee && (
+              <div className="flex justify-between items-start border-t border-border/30 pt-4">
+                <span className="text-foreground/60">Gas Fee</span>
+                <span className="font-medium text-emerald-400">Sponsored by Paymaster</span>
+              </div>
+            )}
+          </div>
+
+          <div className="mb-6 p-4 bg-emerald-600/10 rounded-lg border border-emerald-600/30 flex gap-3">
+            <Shield className="text-emerald-500 shrink-0 mt-0.5" size={20} />
+            <div className="text-sm">
+              <p className="font-medium mb-1">Gasless Transaction</p>
+              <p className="text-foreground/70">The network fees for this action are being covered by the application.</p>
+            </div>
+          </div>
+
+          <div className="flex gap-3">
+            <Button onClick={onCancel} variant="outline" className="flex-1">
+              Cancel
+            </Button>
+            <Button onClick={handleConfirm} className="flex-1 bg-emerald-600 hover:bg-emerald-700">
+              Confirm Transaction
+            </Button>
+          </div>
+        </>
+      )}
+
+      {(status === 'sponsoring' || status === 'signing' || status === 'submitting') && (
+        <div className="text-center py-8">
+          <Loader2 className="animate-spin mx-auto mb-4 text-emerald-500" size={48} />
+          <h3 className="text-xl font-bold mb-2">
+            {status === 'sponsoring' && "Sponsoring Gas..."}
+            {status === 'signing' && "Awaiting Signature..."}
+            {status === 'submitting' && "Submitting to Network..."}
+          </h3>
+          <p className="text-foreground/60 text-sm">Please do not close this window.</p>
+        </div>
+      )}
+
+      {status === 'confirmed' && (
+        <div className="text-center py-8">
+          <CheckCircle className="mx-auto mb-4 text-emerald-500" size={48} />
+          <h3 className="text-xl font-bold mb-2">Transaction Submitted</h3>
+          <p className="text-foreground/60 mb-4 text-sm">Your operation has been sent to the bundler network.</p>
+          
+          <div className="p-3 bg-white/5 rounded-lg border border-border/50 mb-6 text-left">
+            <p className="text-xs text-foreground/60 mb-1">UserOp Hash</p>
+            <div className="flex items-center gap-2">
+              <code className="text-xs font-mono flex-1 truncate">{txHash}</code>
+              <button className="p-1 hover:bg-white/10 rounded">
+                <ExternalLink size={16} className="text-foreground/60" />
+              </button>
+            </div>
+          </div>
+          <Button onClick={onCancel} className="w-full bg-emerald-600 hover:bg-emerald-700">
+            Return to Wallet
+          </Button>
+        </div>
+      )}
+
+      {status === 'failed' && (
+        <div className="text-center py-8">
+          <AlertCircle className="mx-auto mb-4 text-red-500" size={48} />
+          <h3 className="text-xl font-bold mb-2">Transaction Failed</h3>
+          <p className="text-foreground/60 mb-6 text-sm">{errorMessage}</p>
+          
+          <Button onClick={() => setStatus('pending')} className="w-full bg-emerald-600 hover:bg-emerald-700">
+            Try Again
+          </Button>
+        </div>
+      )}
+    </Card>
+  )
+}

package/components/sdk/wallet-display.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import { Copy, ExternalLink, Send, Download, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { useState, useEffect } from 'react'
+import { useLumina } from './lumina-provider'
+
+interface WalletDisplayProps {
+  signerAddress: string // We need the signer to fetch details from your backend
+  smartAccountAddress: string
+  balance?: string
+  token?: string
+  network?: string
+  chainId?: string
+  onSend?: () => void
+  onReceive?: () => void
+}
+
+export function WalletDisplay({
+  signerAddress,
+  smartAccountAddress,
+  balance = '0.00',
+  token = 'ETH',
+  network = 'Ethereum',
+  chainId = '1',
+  onSend,
+  onReceive,
+}: WalletDisplayProps) {
+  const { fetchApi } = useLumina()
+  const [copied, setCopied] = useState(false)
+  const [isDeployed, setIsDeployed] = useState<boolean | null>(null)
+  const [isLoadingState, setIsLoadingState] = useState(true)
+
+  // Fetch wallet details on mount
+  useEffect(() => {
+    let isMounted = true
+
+    const syncWalletState = async () => {
+      try {
+        // 1. Fetch current DB state
+        const walletData = await fetchApi(`/v1/wallets/${signerAddress}/${chainId}`)
+        
+        if (!isMounted) return
+        
+        setIsDeployed(walletData.is_deployed)
+
+        // 2. If the DB thinks it's not deployed, double-check on-chain
+        // This is crucial because users might fund their counterfactual address
+        if (!walletData.is_deployed) {
+          const deployCheck = await fetchApi(`/v1/wallets/${signerAddress}/${chainId}/check-deployment`, {
+            method: 'POST'
+          })
+          if (isMounted) setIsDeployed(deployCheck.is_deployed)
+        }
+      } catch (error) {
+        console.error("Failed to sync wallet state:", error)
+      } finally {
+        if (isMounted) setIsLoadingState(false)
+      }
+    }
+
+    syncWalletState()
+    return () => { isMounted = false }
+  }, [signerAddress, chainId, fetchApi])
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(smartAccountAddress)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Card className="glassmorphism-dark p-8 border-border w-full max-w-md mx-auto">
+      <div className="text-center mb-8">
+        <h2 className="text-2xl font-bold mb-2">Your Wallet</h2>
+        <div className="flex items-center justify-center gap-2">
+          <p className="text-foreground/60 text-sm">{network} Network</p>
+          {isLoadingState ? (
+            <Loader2 className="w-3 h-3 animate-spin text-foreground/60" />
+          ) : (
+            <span className={`text-[10px] px-2 py-0.5 rounded-full ${isDeployed ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400'}`}>
+              {isDeployed ? 'Deployed' : 'Counterfactual'}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Balance Display */}
+      <div className="text-center mb-8 p-6 bg-linear-to-b from-emerald-600/20 to-emerald-600/5 rounded-lg border border-emerald-600/30">
+        <p className="text-foreground/60 text-sm mb-2">Available Balance</p>
+        <p className="text-4xl font-bold text-emerald-400 mb-2">{balance}</p>
+        <p className="text-foreground/60">{token}</p>
+      </div>
+
+      {/* Address Display */}
+      <div className="mb-6 p-4 bg-white/5 rounded-lg border border-border/50">
+        <p className="text-xs text-foreground/60 mb-2">Smart Account Address</p>
+        <div className="flex items-center gap-2">
+          <code className="text-sm font-mono flex-1 truncate">{smartAccountAddress}</code>
+          <button
+            onClick={handleCopy}
+            className="p-2 hover:bg-white/10 rounded-lg transition"
+            title="Copy address"
+          >
+            <Copy size={16} className="text-foreground/60" />
+          </button>
+        </div>
+        {copied && <p className="text-xs text-emerald-500 mt-2">Copied!</p>}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="grid grid-cols-2 gap-3 mb-6">
+        <Button
+          onClick={onReceive}
+          variant="outline"
+          className="gap-2"
+        >
+          <Download size={18} />
+          Receive
+        </Button>
+        <Button
+          onClick={onSend}
+          className="bg-emerald-600 hover:bg-emerald-700 gap-2"
+        >
+          <Send size={18} />
+          Send
+        </Button>
+      </div>
+
+      {/* Network Info */}
+      <div className="p-4 bg-white/5 rounded-lg border border-border/50 space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-foreground/60">Network</span>
+          <span className="font-medium">{network}</span>
+        </div>
+        <div className="flex justify-between text-sm border-t border-border/30 pt-2">
+          <span className="text-foreground/60">Network Status</span>
+          <div className="flex items-center gap-2">
+            <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
+            <span className="font-medium">Operational</span>
+          </div>
+        </div>
+      </div>
+
+      {/* View on Explorer */}
+      <Button
+        variant="outline"
+        className="w-full mt-6 gap-2"
+        onClick={() => window.open(`https://etherscan.io/address/${smartAccountAddress}`, '_blank')}
+      >
+        <ExternalLink size={18} />
+        View on Explorer
+      </Button>
+    </Card>
+  )
+}

package/components/sdk/wallet-login.tsx

@@ -0,0 +1,163 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { Loader2, Lock, Mail } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card } from '@/components/ui/card'
+import { apiClient } from '@/lib/api' // Our centralized API client
+export interface WalletLoginProps {
+  authMethods?: string[];
+  onSuccess?: (address: string) => void;
+  onError?: (err: Error) => void;
+}
+export default function WalletLogin({ authMethods, onSuccess, onError }: WalletLoginProps) {  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+  const [isRegistering, setIsRegistering] = useState(false)
+  const [error, setError] = useState('')
+  
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: ''
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError('')
+
+    try {
+      if (isRegistering) {
+        // 1. Register a new developer
+        await apiClient.dashboard('/v1/developers/register', {
+          method: 'POST',
+          body: JSON.stringify({
+            name: formData.name,
+            email: formData.email,
+            password: formData.password
+          })
+        })
+        // Auto-login after registration
+      }
+
+      // 2. Log in to get the JWT access token
+      const data = await apiClient.dashboard('/v1/developers/login', {
+        method: 'POST',
+        body: JSON.stringify({
+          email: formData.email,
+          password: formData.password
+        })
+      })
+
+      // 3. Securely store the JWT for future dashboard API calls
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('lumina_dev_token', data.access_token)
+      }
+
+      // 4. Redirect to the main dashboard
+      router.push('/dashboard')
+
+    } catch (err: any) {
+      setError(err.message || 'Authentication failed. Please check your credentials.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 bg-background">
+      <Card className="glassmorphism-dark p-8 border-border w-full max-w-md">
+        <div className="mb-8 text-center">
+          <h1 className="text-3xl font-bold mb-2">Lumina Portal</h1>
+          <p className="text-foreground/60 text-sm">
+            {isRegistering ? 'Create your developer account' : 'Sign in to manage your workspace'}
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm text-center">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isRegistering && (
+            <div>
+              <label className="block text-sm font-medium mb-2">Full Name</label>
+              <Input
+                type="text"
+                placeholder="Jane Doe"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                required={isRegistering}
+                className="bg-white/5 border-border"
+              />
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Email Address</label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-2.5 text-foreground/40" size={18} />
+              <Input
+                type="email"
+                placeholder="developer@company.com"
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                required
+                className="pl-10 bg-white/5 border-border"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Password</label>
+            <div className="relative">
+              <Lock className="absolute left-3 top-2.5 text-foreground/40" size={18} />
+              <Input
+                type="password"
+                placeholder="••••••••••••"
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                required
+                minLength={12}
+                className="pl-10 bg-white/5 border-border"
+              />
+            </div>
+            {isRegistering && (
+              <p className="text-xs text-foreground/50 mt-2">Must be at least 12 characters long.</p>
+            )}
+          </div>
+
+          <Button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-emerald-600 hover:bg-emerald-700 mt-6"
+          >
+            {isLoading ? (
+              <Loader2 className="animate-spin" size={18} />
+            ) : (
+              isRegistering ? 'Create Account' : 'Sign In'
+            )}
+          </Button>
+        </form>
+
+        <div className="mt-6 text-center text-sm text-foreground/60">
+          {isRegistering ? 'Already have an account?' : "Don't have an account?"}{' '}
+          <button
+            type="button"
+            onClick={() => {
+              setIsRegistering(!isRegistering)
+              setError('')
+            }}
+            className="text-emerald-400 hover:text-emerald-300 font-medium"
+          >
+            {isRegistering ? 'Sign In' : 'Register'}
+          </button>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }