@jerydam/lumina-sdk 0.1.0

package/app/dashboard/api-keys/page.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+import { Plus, Copy, Trash2, Lock, Loader2, AlertTriangle, CheckCircle2 } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { useState, useEffect } from 'react'
+import { apiClient } from '@/lib/api'
+
+interface ApiKey {
+  id: string
+  label: string
+  is_active: boolean
+  created_at: string
+}
+
+export default function APIKeysPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [isDeleting, setIsDeleting] = useState<string | null>(null)
+  
+  // Modal States
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [newKeyLabel, setNewKeyLabel] = useState('')
+  const [isCreating, setIsCreating] = useState(false)
+  
+  // New Key Display State (The "Show Once" Modal)
+  const [newlyCreatedKey, setNewlyCreatedKey] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+
+  // Fetch keys on component mount
+  const fetchKeys = async () => {
+    try {
+      setIsLoading(true)
+      const data = await apiClient.dashboard('/v1/developers/keys')
+      setKeys(data.keys || [])
+    } catch (error) {
+      console.error('Failed to fetch keys:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchKeys()
+  }, [])
+
+  const handleCreateKey = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newKeyLabel.trim()) return
+    
+    setIsCreating(true)
+    try {
+      const data = await apiClient.dashboard('/v1/developers/keys', {
+        method: 'POST',
+        body: JSON.stringify({ label: newKeyLabel })
+      })
+      
+      // Show the raw key immediately, close the creation modal
+      setNewlyCreatedKey(data.raw_key)
+      setShowCreateModal(false)
+      setNewKeyLabel('')
+      
+      // Refresh the background list
+      fetchKeys()
+    } catch (error) {
+      console.error('Failed to create key:', error)
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  const handleDeleteKey = async (keyId: string) => {
+    if (!confirm('Are you sure you want to revoke this API key? This action cannot be undone and will break any apps using it.')) return
+    
+    setIsDeleting(keyId)
+    try {
+      await apiClient.dashboard(`/v1/developers/keys/${keyId}`, {
+        method: 'DELETE'
+      })
+      // Update local state to remove the deleted key instantly
+      setKeys(keys.filter(k => k.id !== keyId))
+    } catch (error) {
+      console.error('Failed to delete key:', error)
+    } finally {
+      setIsDeleting(null)
+    }
+  }
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="space-y-8 relative">
+      {/* Header */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h1 className="text-4xl font-bold mb-2">API Keys</h1>
+          <p className="text-foreground/60">Manage API keys for secure SDK integration with Lumina</p>
+        </div>
+        <Button 
+          onClick={() => setShowCreateModal(true)} 
+          className="bg-emerald-600 hover:bg-emerald-700 gap-2"
+        >
+          <Plus size={18} />
+          Create Key
+        </Button>
+      </div>
+
+      {/* Info Card */}
+      <Card className="glassmorphism-dark p-6 border-emerald-600/30 bg-emerald-600/5">
+        <div className="flex gap-4">
+          <Lock className="text-emerald-500 shrink-0 mt-1" size={24} />
+          <div>
+            <h3 className="font-semibold mb-1">Keep your API keys secure</h3>
+            <p className="text-foreground/70 text-sm">
+              Your API keys grant full access to your developer balance and smart account deployments. 
+              Never commit them to GitHub or expose them in client-side code (except via the secure Lumina SDK).
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      {/* API Keys List */}
+      <div className="space-y-4">
+        {isLoading ? (
+          <div className="flex justify-center p-12">
+            <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
+          </div>
+        ) : keys.length === 0 ? (
+          <Card className="glassmorphism-dark p-12 text-center border-border border-dashed">
+            <p className="text-foreground/60">No API keys found. Create one to get started.</p>
+          </Card>
+        ) : (
+          keys.map((apiKey) => (
+            <Card key={apiKey.id} className="glassmorphism-dark p-6 border-border">
+              <div className="flex items-start justify-between mb-4">
+                <div>
+                  <h3 className="text-lg font-semibold flex items-center gap-2">
+                    {apiKey.label}
+                    {!apiKey.is_active && (
+                      <span className="text-xs px-2 py-0.5 rounded bg-red-500/20 text-red-400">Revoked</span>
+                    )}
+                  </h3>
+                  <p className="text-sm text-foreground/60 mt-1">
+                    Created on {new Date(apiKey.created_at).toLocaleDateString()}
+                  </p>
+                </div>
+                <Button 
+                  onClick={() => handleDeleteKey(apiKey.id)} 
+                  variant="outline" 
+                  disabled={!apiKey.is_active || isDeleting === apiKey.id}
+                  className="text-red-500 hover:bg-red-600/10 hover:border-red-600/50 gap-2 transition"
+                >
+                  {isDeleting === apiKey.id ? <Loader2 className="animate-spin" size={16} /> : <Trash2 size={16} />}
+                  Revoke Key
+                </Button>
+              </div>
+
+              <div>
+                <label className="text-xs font-medium text-foreground/60 mb-2 block">API Key</label>
+                <div className="flex gap-2">
+                  <code className="flex-1 bg-white/5 p-3 rounded-lg text-sm font-mono text-foreground/40 select-none">
+                    pk_••••••••••••••••••••••••••••••••
+                  </code>
+                  <div className="flex items-center px-4 text-xs text-amber-500/80 bg-amber-500/10 rounded-lg">
+                    Hidden for security
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+
+      {/* ─────────────────────────────────────────────────────────────────────────────
+          MODALS (Usually handled by Radix/Shadcn, built inline here for portability)
+          ───────────────────────────────────────────────────────────────────────────── */}
+
+      {/* Create Key Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
+          <Card className="glassmorphism-dark w-full max-w-md p-6 border-border shadow-2xl">
+            <h2 className="text-xl font-bold mb-2">Create new API Key</h2>
+            <p className="text-sm text-foreground/60 mb-6">Give your key a label so you can identify it later.</p>
+            
+            <form onSubmit={handleCreateKey}>
+              <div className="mb-6">
+                <label className="block text-sm font-medium mb-2">Key Label</label>
+                <Input
+                  autoFocus
+                  placeholder="e.g., Production Environment"
+                  value={newKeyLabel}
+                  onChange={(e) => setNewKeyLabel(e.target.value)}
+                  className="bg-white/5 border-border"
+                  required
+                />
+              </div>
+              <div className="flex justify-end gap-3">
+                <Button type="button" variant="outline" onClick={() => setShowCreateModal(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit" disabled={isCreating || !newKeyLabel.trim()} className="bg-emerald-600 hover:bg-emerald-700">
+                  {isCreating ? <Loader2 className="animate-spin mr-2" size={16} /> : null}
+                  Generate Key
+                </Button>
+              </div>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      {/* Show Once Success Modal */}
+      {newlyCreatedKey && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 backdrop-blur-md p-4">
+          <Card className="glassmorphism-dark w-full max-w-lg p-8 border-emerald-600/50 shadow-2xl">
+            <div className="flex items-center gap-3 mb-4 text-emerald-400">
+              <CheckCircle2 size={32} />
+              <h2 className="text-2xl font-bold text-foreground">API Key Generated</h2>
+            </div>
+            
+            <div className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg flex gap-3 mb-6">
+              <AlertTriangle className="text-amber-500 shrink-0 mt-0.5" size={20} />
+              <div className="text-sm">
+                <p className="font-semibold text-amber-500 mb-1">Please copy this key now!</p>
+                <p className="text-foreground/80">
+                  For your security, we only store the hash of this key. <strong>You will not be able to see this key again</strong> once you close this window.
+                </p>
+              </div>
+            </div>
+
+            <div className="flex gap-2 mb-8">
+              <code className="flex-1 bg-white/5 border border-emerald-500/30 p-4 rounded-lg text-sm font-mono break-all text-emerald-400">
+                {newlyCreatedKey}
+              </code>
+              <Button 
+                onClick={() => copyToClipboard(newlyCreatedKey)}
+                className="h-auto px-6 bg-emerald-600 hover:bg-emerald-700 gap-2"
+              >
+                {copied ? <CheckCircle2 size={18} /> : <Copy size={18} />}
+                {copied ? 'Copied' : 'Copy'}
+              </Button>
+            </div>
+
+            <Button 
+              onClick={() => setNewlyCreatedKey(null)}
+              variant="outline" 
+              className="w-full"
+            >
+              I have saved my API key securely
+            </Button>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}

package/app/dashboard/billing/page.tsx

@@ -0,0 +1,412 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { 
+  TrendingUp, Zap, Loader2, CheckCircle2, AlertCircle, 
+  Wallet, Copy, ExternalLink, RefreshCw, Plus, Trash2
+} from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { apiClient } from '@/lib/api'
+
+// Old Interfaces
+interface DeveloperMe {
+  plan: string
+  monthly_ops: number | null
+  gas_markup_bps: number
+}
+interface DeveloperStats {
+  ops_this_month: number
+  monthly_limit: number | null
+}
+interface GasBalance {
+  chain_id: string
+  balance_wei: number
+  reserved_wei: number
+  available_wei: number
+}
+
+// New Crypto Billing Interfaces
+interface PaymentWallet {
+  wallet_address: string
+  chain_id: string | null
+  label: string | null
+  created_at: string
+}
+interface TreasuryInfo {
+  treasury_address: string
+  accepted_tokens: Record<string, { symbol: string, address: string, decimals: number }[]>
+  instructions: string
+}
+interface SubscriptionInfo {
+  current_plan: string
+  active_subscription: any
+  renew_instructions: any
+}
+
+export default function BillingPage() {
+  const [devData, setDevData] = useState<DeveloperMe | null>(null)
+  const [stats, setStats] = useState<DeveloperStats | null>(null)
+  const [gasBalance, setGasBalance] = useState<GasBalance | null>(null)
+  
+  // New Crypto Billing State
+  const [treasury, setTreasury] = useState<TreasuryInfo | null>(null)
+  const [subInfo, setSubInfo] = useState<SubscriptionInfo | null>(null)
+  const [wallets, setWallets] = useState<PaymentWallet[]>([])
+  
+  // UI State
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [successMsg, setSuccessMsg] = useState('')
+  const [copied, setCopied] = useState(false)
+  
+  // Forms State
+  const [newWallet, setNewWallet] = useState('')
+  const [isRegisteringWallet, setIsRegisteringWallet] = useState(false)
+  const [txHash, setTxHash] = useState('')
+  const [verifyChain, setVerifyChain] = useState('8453') // Default Base
+  const [isVerifying, setIsVerifying] = useState(false)
+
+  const defaultChainId = '8453' 
+
+  const fetchBillingData = async () => {
+    try {
+      setIsLoading(true)
+      const [meRes, statsRes, balanceRes, treasuryRes, subRes, walletsRes] = await Promise.all([
+        apiClient.dashboard('/v1/developers/me'),
+        apiClient.dashboard('/v1/developers/stats'),
+        apiClient.dashboard(`/v1/developers/balance/${defaultChainId}`),
+        apiClient.dashboard('/v1/billing/deposit-address'),
+        apiClient.dashboard('/v1/billing/subscription'),
+        apiClient.dashboard('/v1/billing/wallets')
+      ])
+      
+      setDevData(meRes)
+      setStats(statsRes)
+      setGasBalance(balanceRes)
+      setTreasury(treasuryRes)
+      setSubInfo(subRes)
+      setWallets(walletsRes.wallets || [])
+    } catch (err: any) {
+      console.error('Failed to fetch billing data:', err)
+      setError('Failed to load billing information.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchBillingData()
+  }, [])
+
+  // ── Crypto Billing Actions ──────────────────────────────────────────────
+
+  // 1. Update the submission handler
+const handleRegisterWallet = async (e: React.FormEvent) => {
+  e.preventDefault()
+  setError('')
+  setSuccessMsg('')
+
+  // Check if they have a Web3 wallet installed in their browser
+  if (typeof window === 'undefined' || !(window as any).ethereum) {
+    setError('Please install a Web3 wallet (like MetaMask) to verify ownership.')
+    return
+  }
+
+  setIsRegisteringWallet(true)
+
+  try {
+    const ethereum = (window as any).ethereum
+
+    // Step 1: Request account connection
+    const accounts = await ethereum.request({ method: 'eth_requestAccounts' })
+    const address = accounts[0]
+
+    // Step 2: Prepare the verification message with a timestamp nonce
+    const nonce = Date.now().toString()
+    const message = `Registering this wallet for Lumina Billing.\nAddress: ${address}\nNonce: ${nonce}`
+
+    // Step 3: Request the personal signature from the user
+    const signature = await ethereum.request({
+      method: 'personal_sign',
+      params: [message, address],
+    })
+
+    // Step 4: Send the proof to your backend
+    await apiClient.dashboard('/v1/billing/wallets', {
+      method: 'POST',
+      body: JSON.stringify({ 
+        wallet_address: address,
+        message: message,
+        signature: signature
+      })
+    })
+
+    setSuccessMsg('Payment wallet successfully verified and registered.')
+    await fetchBillingData() // Refresh the list of wallets
+
+  } catch (err: any) {
+    console.error(err)
+    // Handle user rejection (e.g., they clicked "Cancel" in MetaMask)
+    if (err.code === 4001) {
+      setError('Signature request was rejected.')
+    } else {
+      setError(err.message || 'Failed to verify and register wallet.')
+    }
+  } finally {
+    setIsRegisteringWallet(false)
+  }
+}
+
+  const handleRemoveWallet = async (address: string) => {
+    try {
+      await apiClient.dashboard(`/v1/billing/wallets/${address}`, { method: 'DELETE' })
+      setWallets(wallets.filter(w => w.wallet_address !== address))
+    } catch (err: any) {
+      setError(err.message || 'Failed to remove wallet.')
+    }
+  }
+
+  const handleVerifyTx = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!txHash) return
+    setIsVerifying(true)
+    setError('')
+    setSuccessMsg('')
+    try {
+      const res = await apiClient.dashboard('/v1/billing/verify-tx', {
+        method: 'POST',
+        body: JSON.stringify({ tx_hash: txHash, chain_id: verifyChain })
+      })
+      if (res.verified) {
+        setSuccessMsg(`Transaction verified! Processed ${res.deposits.length} deposit(s).`)
+        setTxHash('')
+        await fetchBillingData() // Refresh balances and sub
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to verify transaction.')
+    } finally {
+      setIsVerifying(false)
+    }
+  }
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const formatWei = (wei: number | undefined) => {
+    if (wei === undefined) return '0.0000'
+    return (wei / 1e18).toFixed(4)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="min-h-[60vh] flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin text-emerald-500" />
+      </div>
+    )
+  }
+
+  const isPro = devData?.plan === 'pro'
+  const isStarter = devData?.plan === 'starter'
+  const expiryDate = subInfo?.active_subscription?.expires_at 
+    ? new Date(subInfo.active_subscription.expires_at).toLocaleDateString() 
+    : null
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Billing & Gas Ledger</h1>
+        <p className="text-foreground/60">Pay for subscriptions and sponsor gas entirely on-chain.</p>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 flex items-center gap-3">
+          <AlertCircle size={20} />
+          {error}
+        </div>
+      )}
+      {successMsg && (
+        <div className="p-4 bg-emerald-500/10 border border-emerald-500/50 rounded-lg text-emerald-400 flex items-center gap-3">
+          <CheckCircle2 size={20} />
+          {successMsg}
+        </div>
+      )}
+
+      {/* Current Plan Overview */}
+      <Card className="glassmorphism-dark p-8 border-emerald-600/30 bg-emerald-600/5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <h2 className="text-2xl font-bold mb-2 capitalize">{devData?.plan || 'Free'} Plan</h2>
+            <p className="text-foreground/60 mb-4">
+              Gas Sponsorship Markup: <strong className="text-foreground">{(devData?.gas_markup_bps || 0) / 100}%</strong>
+            </p>
+            <div className="space-y-2 mb-6">
+              <p className="text-sm flex items-center gap-2">
+                <CheckCircle2 size={16} className="text-emerald-500" /> 
+                {devData?.monthly_ops === null ? 'Unlimited' : `${(devData?.monthly_ops || 0).toLocaleString()}`} UserOperations / month
+              </p>
+              <p className="text-sm flex items-center gap-2">
+                <CheckCircle2 size={16} className="text-emerald-500" /> Multi-chain Paymaster Access
+              </p>
+            </div>
+            
+            {expiryDate && (
+              <p className="text-sm text-emerald-400 mt-4">
+                Valid until {expiryDate}
+              </p>
+            )}
+          </div>
+
+          <div className="md:text-right flex flex-col justify-center">
+             <div className="inline-block p-4 rounded-lg bg-white/5 border border-border self-end max-w-sm text-left">
+                <p className="font-semibold mb-2">How to upgrade/renew</p>
+                <p className="text-sm text-foreground/60">
+                  {subInfo?.renew_instructions?.starter || subInfo?.renew_instructions?.renew}
+                </p>
+                <Button 
+                  onClick={() => document.getElementById('treasury-section')?.scrollIntoView({ behavior: 'smooth' })}
+                  variant="outline" 
+                  className="mt-4 w-full border-emerald-600/30 text-emerald-400 hover:bg-emerald-600/10"
+                >
+                  View Treasury Details
+                </Button>
+              </div>
+          </div>
+        </div>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        
+        {/* Usage Stats */}
+        <Card className="glassmorphism-dark p-6 border-border">
+          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Zap size={20} className="text-amber-500" />
+            Monthly Operations Limit
+          </h3>
+          <div className="mb-4">
+            <div className="flex justify-between mb-2">
+              <span className="text-foreground/60">
+                {stats?.ops_this_month?.toLocaleString() || 0} / {(!stats || stats.monthly_limit === null) ? 'Unlimited' : stats.monthly_limit.toLocaleString()} Ops
+              </span>
+              <span className="font-semibold">
+                {(!stats || stats.monthly_limit === null) 
+                  ? '0%' 
+                  : `${Math.min(100, Math.round(((stats.ops_this_month || 0) / stats.monthly_limit) * 100))}%`}
+              </span>
+            </div>
+            <div className="h-3 bg-white/5 rounded-full overflow-hidden">
+              <div 
+                className="h-full bg-linear-to-r from-amber-500 to-amber-400 transition-all duration-500" 
+                style={{ width: `${(!stats || stats.monthly_limit === null) ? 0 : Math.min(100, ((stats.ops_this_month || 0) / stats.monthly_limit) * 100)}%` }} 
+              />
+            </div>
+          </div>
+          <p className="text-sm text-foreground/60">Limit resets at the end of the 30-day billing cycle.</p>
+        </Card>
+
+        {/* Gas Ledger */}
+        <Card className="glassmorphism-dark p-6 border-border flex flex-col justify-between">
+          <div>
+            <h3 className="text-lg font-semibold mb-4 flex items-center justify-between">
+              Gas Ledger Balance
+              <span className="text-xs px-2 py-1 bg-white/10 rounded-full font-mono">Base (8453)</span>
+            </h3>
+            
+            <div className="grid grid-cols-2 gap-4 mb-6">
+              <div className="p-4 bg-white/5 rounded-lg border border-border/50">
+                <p className="text-sm text-foreground/60 mb-1">Available to Sponsor</p>
+                <p className="text-2xl font-bold text-emerald-400">{formatWei(gasBalance?.available_wei)} ETH</p>
+              </div>
+              <div className="p-4 bg-white/5 rounded-lg border border-border/50">
+                <p className="text-sm text-foreground/60 mb-1">Reserved In-Flight</p>
+                <p className="text-2xl font-bold text-amber-400">{formatWei(gasBalance?.reserved_wei)} ETH</p>
+              </div>
+            </div>
+          </div>
+          <p className="text-sm text-foreground/60">
+            To top up gas, simply send any stablecoin amount (that doesn't match a plan price) to the treasury.
+          </p>
+        </Card>
+      </div>
+
+      {/* ── Crypto Payment Section ── */}
+      <div id="treasury-section" className="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4">
+        
+        {/* Treasury Address & Instructions */}
+        <Card className="glassmorphism-dark p-6 border-emerald-600/30">
+          <h3 className="text-xl font-semibold mb-2">Deposit Funds</h3>
+          <p className="text-sm text-foreground/60 mb-6">Send stablecoins from your registered wallets to this address.</p>
+          
+          <div className="mb-6">
+            <label className="text-xs font-medium text-foreground/60 mb-2 block">Lumina Treasury Address</label>
+            <div className="flex gap-2">
+              <code className="flex-1 bg-white/5 p-3 rounded-lg text-sm font-mono truncate border border-border/50">
+                {treasury?.treasury_address || 'Loading...'}
+              </code>
+              <Button onClick={() => handleCopy(treasury?.treasury_address || '')} variant="outline" className="px-3">
+                {copied ? <CheckCircle2 size={18} className="text-emerald-500" /> : <Copy size={18} />}
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-3 mb-6">
+            <h4 className="text-sm font-medium">Accepted Networks & Tokens</h4>
+            {treasury && Object.entries(treasury.accepted_tokens).map(([chainId, tokens]) => (
+              <div key={chainId} className="flex justify-between items-center text-sm p-2 bg-white/5 rounded">
+                <span className="font-mono text-foreground/60">Chain {chainId}</span>
+                <span className="font-semibold">{tokens.map(t => t.symbol).join(', ')}</span>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* Payment Wallets & Verification */}
+<Card className="glassmorphism-dark p-6 border-border">
+  <h3 className="text-lg font-semibold mb-1">Registered Payment Wallets</h3>
+  <p className="text-sm text-foreground/60 mb-4">
+    Connect and sign to prove ownership of the wallets you will send funds from.
+  </p>
+  
+  <form onSubmit={handleRegisterWallet} className="mb-6">
+    <Button 
+      type="submit" 
+      disabled={isRegisteringWallet} 
+      className="w-full bg-emerald-600 hover:bg-emerald-700 gap-2"
+    >
+      {isRegisteringWallet ? (
+        <><Loader2 className="animate-spin" size={18} /> Verifying Signature...</>
+      ) : (
+        <><Wallet size={18} /> Connect & Verify New Wallet</>
+      )}
+    </Button>
+  </form>
+
+  <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+    {wallets.length === 0 ? (
+      <p className="text-sm text-foreground/40 text-center py-4">
+        No wallets registered yet. You must verify one before paying.
+      </p>
+    ) : (
+      wallets.map(w => (
+        <div key={w.wallet_address} className="flex justify-between items-center p-3 bg-white/5 rounded-lg border border-border/50">
+          <span className="font-mono text-xs">{w.wallet_address}</span>
+          <button 
+            onClick={() => handleRemoveWallet(w.wallet_address)} 
+            className="text-red-400 hover:text-red-300 transition-colors"
+          >
+            <Trash2 size={16} />
+          </button>
+        </div>
+      ))
+    )}
+  </div>
+</Card>
+      </div>
+    </div>
+  )
+}