@jerydam/lumina-sdk 0.1.0

package/app/dashboard/settings/page.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Bell, Lock, Users, Shield, Trash2, Loader2, AlertTriangle, CheckCircle2, UserPlus, X } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { apiClient } from '@/lib/api'
+
+interface DeveloperProfile {
+  name: string
+  email: string
+  plan: string
+}
+
+export default function SettingsPage() {
+  const router = useRouter()
+  const [profile, setProfile] = useState<DeveloperProfile | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [message, setMessage] = useState({ type: '', text: '' })
+  
+  // Modals State
+  const [showPasswordModal, setShowPasswordModal] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  
+  // Forms State
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [isInviting, setIsInviting] = useState(false)
+  
+  const [passwordForm, setPasswordForm] = useState({ current: '', new: '', confirm: '' })
+  const [isChangingPassword, setIsChangingPassword] = useState(false)
+  
+  const [deleteConfirmation, setDeleteConfirmation] = useState('')
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        setIsLoading(true)
+        const data = await apiClient.dashboard('/v1/developers/me')
+        setProfile(data)
+      } catch (error) {
+        console.error('Failed to load profile:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchProfile()
+  }, [])
+
+  const handleInviteTeam = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsInviting(true)
+    setMessage({ type: '', text: '' })
+    
+    try {
+      await apiClient.dashboard('/v1/developers/team/invite', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: inviteEmail })
+      })
+      setMessage({ type: 'success', text: `Invite sent to ${inviteEmail}` })
+      setInviteEmail('')
+    } catch (err: any) {
+      setMessage({ type: 'error', text: err.message || 'Failed to send invite.' })
+    } finally {
+      setIsInviting(false)
+    }
+  }
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (passwordForm.new !== passwordForm.confirm) {
+      setMessage({ type: 'error', text: 'New passwords do not match.' })
+      return
+    }
+    if (passwordForm.new.length < 8) {
+      setMessage({ type: 'error', text: 'Password must be at least 8 characters.' })
+      return
+    }
+
+    setIsChangingPassword(true)
+    setMessage({ type: '', text: '' })
+    
+    try {
+      await apiClient.dashboard('/v1/developers/password', {
+        method: 'PUT',
+        body: JSON.stringify({ 
+          current_password: passwordForm.current, 
+          new_password: passwordForm.new 
+        })
+      })
+      setMessage({ type: 'success', text: 'Password updated successfully.' })
+      setShowPasswordModal(false)
+      setPasswordForm({ current: '', new: '', confirm: '' })
+    } catch (err: any) {
+      setMessage({ type: 'error', text: err.message || 'Failed to update password.' })
+    } finally {
+      setIsChangingPassword(false)
+    }
+  }
+
+  const handleDeleteAccount = async () => {
+    if (deleteConfirmation !== 'DELETE') return
+    
+    setIsDeleting(true)
+    try {
+      await apiClient.dashboard('/v1/developers/me', { method: 'DELETE' })
+      localStorage.removeItem('lumina_dev_token')
+      router.push('/login')
+    } catch (err: any) {
+      setMessage({ type: 'error', text: err.message || 'Failed to delete account.' })
+      setIsDeleting(false)
+      setShowDeleteModal(false)
+    }
+  }
+
+  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>
+    )
+  }
+
+  return (
+    <div className="space-y-8 relative">
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Settings</h1>
+        <p className="text-foreground/60">Manage your developer profile and workspace preferences</p>
+      </div>
+
+      {message.text && (
+        <div className={`p-4 rounded-lg border flex items-center gap-3 ${
+          message.type === 'error' ? 'bg-red-500/10 border-red-500/50 text-red-400' : 'bg-emerald-500/10 border-emerald-500/50 text-emerald-400'
+        }`}>
+          {message.type === 'error' ? <AlertTriangle size={20} /> : <CheckCircle2 size={20} />}
+          {message.text}
+        </div>
+      )}
+
+      {/* Account Settings */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <h2 className="text-2xl font-semibold mb-6">Account Information</h2>
+        <div className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium mb-2">Developer Name</label>
+            <Input defaultValue={profile?.name || ''} className="bg-white/5 border-border text-foreground/80" readOnly />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Email Address</label>
+            <Input type="email" defaultValue={profile?.email || ''} className="bg-white/5 border-border text-foreground/80" readOnly />
+          </div>
+        </div>
+      </Card>
+
+      {/* Team Management UI */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-2xl font-semibold flex items-center gap-2">
+            <Users size={24} />
+            Team Members
+          </h2>
+        </div>
+
+        <form onSubmit={handleInviteTeam} className="flex gap-2 mb-6">
+          <Input 
+            type="email" 
+            placeholder="colleague@company.com" 
+            value={inviteEmail}
+            onChange={(e) => setInviteEmail(e.target.value)}
+            className="bg-white/5 border-border"
+            required
+          />
+          <Button type="submit" disabled={isInviting} className="bg-emerald-600 hover:bg-emerald-700 whitespace-nowrap gap-2">
+            {isInviting ? <Loader2 className="animate-spin" size={16} /> : <UserPlus size={16} />}
+            Invite Member
+          </Button>
+        </form>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-border/50">
+            <div>
+              <p className="font-medium">{profile?.name || 'You'}</p>
+              <p className="text-sm text-foreground/60">{profile?.email}</p>
+            </div>
+            <span className="px-3 py-1 text-sm rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Owner</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Security */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <h2 className="text-2xl font-semibold mb-6 flex items-center gap-2">
+          <Lock size={24} />
+          Security
+        </h2>
+        <div className="p-4 bg-white/5 rounded-lg border border-border/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+          <div>
+            <p className="font-medium mb-1">Password</p>
+            <p className="text-sm text-foreground/60">Update your dashboard login password</p>
+          </div>
+          <Button onClick={() => setShowPasswordModal(true)} variant="outline">Change Password</Button>
+        </div>
+      </Card>
+
+      {/* Danger Zone */}
+      <Card className="glassmorphism-dark p-6 border-red-600/30 bg-red-600/5">
+        <h2 className="text-2xl font-semibold mb-6 text-red-500">Danger Zone</h2>
+        <div className="p-4 bg-red-600/10 rounded-lg border border-red-600/30">
+          <p className="font-medium mb-1">Delete Workspace</p>
+          <p className="text-sm text-foreground/60 mb-4">Permanently delete your account, API keys, and sever all active embedded wallets.</p>
+          <Button onClick={() => setShowDeleteModal(true)} variant="outline" className="border-red-600/30 text-red-500 hover:bg-red-600/10 gap-2">
+            <Trash2 size={18} />
+            Delete Account
+          </Button>
+        </div>
+      </Card>
+
+      {/* ── Modals ── */}
+      
+      {/* Password Modal */}
+      {showPasswordModal && (
+        <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 relative">
+            <button onClick={() => setShowPasswordModal(false)} className="absolute top-4 right-4 text-foreground/50 hover:text-foreground">
+              <X size={20} />
+            </button>
+            <h2 className="text-xl font-bold mb-6">Change Password</h2>
+            <form onSubmit={handleChangePassword} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Current Password</label>
+                <Input type="password" required value={passwordForm.current} onChange={(e) => setPasswordForm({...passwordForm, current: e.target.value})} className="bg-white/5 border-border" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">New Password</label>
+                <Input type="password" required minLength={8} value={passwordForm.new} onChange={(e) => setPasswordForm({...passwordForm, new: e.target.value})} className="bg-white/5 border-border" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Confirm New Password</label>
+                <Input type="password" required minLength={8} value={passwordForm.confirm} onChange={(e) => setPasswordForm({...passwordForm, confirm: e.target.value})} className="bg-white/5 border-border" />
+              </div>
+              <Button type="submit" disabled={isChangingPassword} className="w-full bg-emerald-600 hover:bg-emerald-700 mt-2">
+                {isChangingPassword ? <Loader2 className="animate-spin" size={18} /> : 'Update Password'}
+              </Button>
+            </form>
+          </Card>
+        </div>
+      )}
+
+      {/* Delete Modal */}
+      {showDeleteModal && (
+        <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-red-600/50 shadow-2xl relative bg-red-950/20">
+            <button onClick={() => setShowDeleteModal(false)} className="absolute top-4 right-4 text-foreground/50 hover:text-foreground">
+              <X size={20} />
+            </button>
+            <div className="flex items-center gap-3 text-red-500 mb-4">
+              <AlertTriangle size={28} />
+              <h2 className="text-xl font-bold">Delete Workspace?</h2>
+            </div>
+            <p className="text-sm text-foreground/80 mb-6">
+              This action is irreversible. All your API keys will be revoked, gas balances lost, and embedded wallets disconnected.
+              To confirm, type <strong>DELETE</strong> below.
+            </p>
+            <Input 
+              value={deleteConfirmation} 
+              onChange={(e) => setDeleteConfirmation(e.target.value)} 
+              placeholder="DELETE" 
+              className="bg-white/5 border-red-600/30 mb-6 focus:border-red-500" 
+            />
+            <Button 
+              onClick={handleDeleteAccount} 
+              disabled={deleteConfirmation !== 'DELETE' || isDeleting} 
+              className="w-full bg-red-600 hover:bg-red-700 text-white"
+            >
+              {isDeleting ? <Loader2 className="animate-spin" size={18} /> : 'Permanently Delete Account'}
+            </Button>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}

package/app/dashboard/users/page.tsx

@@ -0,0 +1,148 @@
+'use client'
+
+import { Search, Filter, Download, ExternalLink, Shield, Loader2 } 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 UserWallet {
+  id: string
+  signer_address: string
+  oauth_provider: string
+  created_at: string
+  account_count: number
+}
+
+export default function UsersPage() {
+  const [wallets, setWallets] = useState<UserWallet[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [page, setPage] = useState(0)
+  const limit = 10
+
+  const fetchUsers = async (pageIndex: number) => {
+    try {
+      setIsLoading(true)
+      const offset = pageIndex * limit
+      const data = await apiClient.dashboard(`/v1/wallets?limit=${limit}&offset=${offset}`)
+      setWallets(data.wallets || [])
+    } catch (error) {
+      console.error('Failed to fetch users:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchUsers(page)
+  }, [page])
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Users & Wallets</h1>
+        <p className="text-foreground/60">Manage your application's embedded wallets and signers</p>
+      </div>
+
+      {/* Filters and Actions */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <div className="flex flex-col md:flex-row gap-4 items-end">
+          <div className="flex-1">
+            <label className="block text-sm font-medium mb-2">Search</label>
+            <div className="relative">
+              <Search className="absolute left-3 top-3 text-foreground/40" size={20} />
+              <Input
+                placeholder="Search by signer address..."
+                className="pl-10 bg-white/5 border-border"
+              />
+            </div>
+          </div>
+          <Button variant="outline" className="gap-2">
+            <Filter size={18} /> Filter
+          </Button>
+          <Button variant="outline" className="gap-2">
+            <Download size={18} /> Export
+          </Button>
+        </div>
+      </Card>
+
+      {/* Users Table */}
+      <Card className="glassmorphism-dark border-border overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border bg-white/5">
+                <th className="text-left py-4 px-6 text-foreground/60 font-medium">Signer Address</th>
+                <th className="text-left py-4 px-6 text-foreground/60 font-medium">Auth Provider</th>
+                <th className="text-left py-4 px-6 text-foreground/60 font-medium">Networks Deployed</th>
+                <th className="text-left py-4 px-6 text-foreground/60 font-medium">Created Date</th>
+                <th className="text-right py-4 px-6 text-foreground/60 font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {isLoading ? (
+                <tr>
+                  <td colSpan={5} className="py-12 text-center">
+                    <Loader2 className="w-6 h-6 animate-spin mx-auto text-emerald-500" />
+                  </td>
+                </tr>
+              ) : wallets.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="py-12 text-center text-foreground/60">
+                    No users have created wallets yet.
+                  </td>
+                </tr>
+              ) : (
+                wallets.map((wallet) => (
+                  <tr key={wallet.id} className="border-b border-border/50 hover:bg-white/5 transition">
+                    <td className="py-4 px-6 font-mono text-sm">{wallet.signer_address}</td>
+                    <td className="py-4 px-6">
+                      <div className="flex items-center gap-2">
+                        <Shield size={16} className="text-emerald-500" />
+                        <span className="capitalize">{wallet.oauth_provider}</span>
+                      </div>
+                    </td>
+                    <td className="py-4 px-6 font-medium">{wallet.account_count}</td>
+                    <td className="py-4 px-6 text-foreground/70">
+                      {new Date(wallet.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="py-4 px-6 text-right">
+                      <button className="p-2 hover:bg-white/10 rounded-lg transition text-foreground/60 hover:text-emerald-400">
+                        <ExternalLink size={18} />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        <div className="px-6 py-4 border-t border-border flex items-center justify-between">
+          <p className="text-sm text-foreground/60">Page {page + 1}</p>
+          <div className="flex gap-2">
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={() => setPage(Math.max(0, page - 1))}
+              disabled={page === 0 || isLoading}
+            >
+              Previous
+            </Button>
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setPage(page + 1)}
+              disabled={wallets.length < limit || isLoading}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  )
+}

package/app/docs/api/authentication/page.tsx

@@ -0,0 +1,246 @@
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export const metadata = {
+  title: 'Authentication API - API Reference',
+  description: 'Authenticate users and manage sessions with the Lumina API.',
+}
+
+export default function AuthenticationPage() {
+  return (
+    <>
+      <Breadcrumb />
+
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-white">Authentication API</h1>
+          <p className="text-lg text-foreground/80">
+            Handle user authentication, session management, and credential verification via the Lumina REST API.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Authentication Methods</h2>
+          <p className="text-foreground/80 mb-4">
+            Lumina supports multiple authentication methods:
+          </p>
+          <div className="space-y-3">
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">Bearer Token (API Key)</p>
+              <p className="text-sm text-foreground/80">
+                Use your API key as a Bearer token in the Authorization header.
+              </p>
+            </div>
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">Session Tokens</p>
+              <p className="text-sm text-foreground/80">
+                JWT tokens issued after successful user authentication.
+              </p>
+            </div>
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">OAuth 2.0</p>
+              <p className="text-sm text-foreground/80">
+                Standard OAuth 2.0 flow for delegated access.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Login</h2>
+          <p className="text-foreground/80 mb-4">
+            Authenticate a user with email and password or email verification code.
+          </p>
+
+          <CodeBlock
+            code="POST /auth/login"
+            language="http"
+            title="Endpoint"
+          />
+
+          <CodeBlock
+            code={`{
+  "email": "user@example.com",
+  "password": "secure_password_or_code"
+}`}
+            language="json"
+            title="Request Body"
+          />
+
+          <CodeBlock
+            code={`{
+  "success": true,
+  "user": {
+    "id": "user_123",
+    "email": "user@example.com",
+    "walletAddress": "0x...",
+    "createdAt": "2024-01-15T10:30:00Z"
+  },
+  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
+}`}
+            language="json"
+            title="Response"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Request Verification Email</h2>
+          <p className="text-foreground/80 mb-4">
+            Send a verification code to the user's email.
+          </p>
+
+          <CodeBlock
+            code="POST /auth/send-verification-email"
+            language="http"
+            title="Endpoint"
+          />
+
+          <CodeBlock
+            code={`{
+  "email": "user@example.com"
+}`}
+            language="json"
+            title="Request Body"
+          />
+
+          <CodeBlock
+            code={`{
+  "success": true,
+  "message": "Verification email sent"
+}`}
+            language="json"
+            title="Response"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Register</h2>
+          <p className="text-foreground/80 mb-4">
+            Create a new user account.
+          </p>
+
+          <CodeBlock
+            code="POST /auth/register"
+            language="http"
+            title="Endpoint"
+          />
+
+          <CodeBlock
+            code={`{
+  "email": "newuser@example.com",
+  "password": "secure_password",
+  "authMethod": "email"
+}`}
+            language="json"
+            title="Request Body"
+          />
+
+          <CodeBlock
+            code={`{
+  "success": true,
+  "user": {
+    "id": "user_456",
+    "email": "newuser@example.com",
+    "walletAddress": "0x...",
+    "createdAt": "2024-01-15T10:35:00Z"
+  }
+}`}
+            language="json"
+            title="Response"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Verify Token</h2>
+          <p className="text-foreground/80 mb-4">
+            Verify that a session token is valid and not expired.
+          </p>
+
+          <CodeBlock
+            code="GET /auth/verify"
+            language="http"
+            title="Endpoint"
+          />
+
+          <CodeBlock
+            code={`Authorization: Bearer <token>`}
+            language="http"
+            title="Request Headers"
+          />
+
+          <CodeBlock
+            code={`{
+  "valid": true,
+  "user": {
+    "id": "user_123",
+    "email": "user@example.com",
+    "walletAddress": "0x...",
+    "expiresAt": "2024-01-22T10:30:00Z"
+  }
+}`}
+            language="json"
+            title="Response"
+          />
+        </div>
+
+        <Callout type="warning" title="Token Expiration">
+          Session tokens expire after 7 days. Use refresh tokens to obtain new session tokens without requiring re-authentication.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Logout</h2>
+          <p className="text-foreground/80 mb-4">
+            Invalidate a session token.
+          </p>
+
+          <CodeBlock
+            code="POST /auth/logout"
+            language="http"
+            title="Endpoint"
+          />
+
+          <CodeBlock
+            code={`Authorization: Bearer <token>`}
+            language="http"
+            title="Request Headers"
+          />
+
+          <CodeBlock
+            code={`{
+  "success": true,
+  "message": "Successfully logged out"
+}`}
+            language="json"
+            title="Response"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Error Responses</h2>
+          <CodeBlock
+            code={`{
+  "error": {
+    "code": "INVALID_CREDENTIALS",
+    "message": "Email or password is incorrect",
+    "status": 401
+  }
+}`}
+            language="json"
+          />
+
+          <div className="space-y-2 text-sm">
+            <p className="text-foreground/80 font-semibold">Common error codes:</p>
+            <ul className="space-y-1 text-foreground/70 ml-4">
+              <li>• <code className="bg-black/40 px-2 py-1 rounded text-xs">INVALID_CREDENTIALS</code> - Wrong email/password</li>
+              <li>• <code className="bg-black/40 px-2 py-1 rounded text-xs">USER_NOT_FOUND</code> - Email not registered</li>
+              <li>• <code className="bg-black/40 px-2 py-1 rounded text-xs">EMAIL_ALREADY_EXISTS</code> - Account already exists</li>
+              <li>• <code className="bg-black/40 px-2 py-1 rounded text-xs">INVALID_TOKEN</code> - Token is expired or invalid</li>
+              <li>• <code className="bg-black/40 px-2 py-1 rounded text-xs">RATE_LIMITED</code> - Too many requests</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}