@jerydam/lumina-sdk 0.1.0

package/app/dashboard/integration/page.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Code, Copy, ExternalLink, CheckCircle } from 'lucide-react'
+
+export default function IntegrationPage() {
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Integration</h1>
+        <p className="text-foreground/60">Quick start guides for integrating Lumina into your application</p>
+      </div>
+
+      {/* SDK Installation */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <h2 className="text-2xl font-semibold mb-4">Get Started with Lumina SDK</h2>
+        
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-lg font-semibold mb-3">1. Install SDK</h3>
+            <div className="bg-white/5 p-4 rounded-lg font-mono text-sm border border-border/50">
+              <div className="flex justify-between items-center">
+                <code>npm install @lumina/sdk</code>
+                <button className="p-2 hover:bg-white/10 rounded">
+                  <Copy size={16} />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-3">2. Initialize Provider</h3>
+            <div className="bg-white/5 p-4 rounded-lg font-mono text-sm border border-border/50 overflow-x-auto">
+              <pre>{`import { LuminaProvider } from '@lumina/sdk'
+
+export default function App() {
+  return (
+    <LuminaProvider apiKey="lumina_prod_...">
+      <YourApp />
+    </LuminaProvider>
+  )
+}`}</pre>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="text-lg font-semibold mb-3">3. Create Wallet</h3>
+            <div className="bg-white/5 p-4 rounded-lg font-mono text-sm border border-border/50 overflow-x-auto">
+              <pre>{`import { useWallet } from '@lumina/sdk'
+
+export function MyComponent() {
+  const { createWallet } = useWallet()
+  
+  return (
+    <button onClick={() => createWallet()}>
+      Create Wallet
+    </button>
+  )
+}`}</pre>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 flex gap-3">
+          <Button className="bg-emerald-600 hover:bg-emerald-700 gap-2">
+            <Code size={18} />
+            View Full Docs
+          </Button>
+          <Button variant="outline" className="gap-2">
+            <ExternalLink size={18} />
+            GitHub Repository
+          </Button>
+        </div>
+      </Card>
+
+      {/* SDK Examples */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {[
+          {
+            title: 'React',
+            description: 'Modern React hooks and components',
+            status: 'Recommended',
+            icon: '⚛️',
+          },
+          {
+            title: 'Next.js',
+            description: 'Full-stack integration with server components',
+            status: 'Recommended',
+            icon: '▲',
+          },
+          {
+            title: 'Vue.js',
+            description: 'Vue composables and components',
+            status: 'Available',
+            icon: '✓',
+          },
+          {
+            title: 'Svelte',
+            description: 'Svelte stores and components',
+            status: 'Available',
+            icon: '◆',
+          },
+        ].map((sdk, index) => (
+          <Card key={index} className="glassmorphism-dark p-6 border-border">
+            <div className="flex items-start justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-semibold">{sdk.title}</h3>
+                <p className="text-sm text-foreground/60 mt-1">{sdk.description}</p>
+              </div>
+              <span className="text-3xl">{sdk.icon}</span>
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" className="flex-1">Learn More</Button>
+              <Button size="sm" variant="outline">View Example</Button>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Network Support */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <h2 className="text-xl font-semibold mb-6">Supported Networks</h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {[
+            { name: 'Ethereum', mainnet: true, testnet: true },
+            { name: 'Polygon', mainnet: true, testnet: true },
+            { name: 'Solana', mainnet: true, testnet: true },
+            { name: 'Arbitrum', mainnet: true, testnet: true },
+            { name: 'Optimism', mainnet: true, testnet: true },
+            { name: 'Base', mainnet: true, testnet: true },
+          ].map((network, index) => (
+            <div key={index} className="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-border/50">
+              <span className="font-medium">{network.name}</span>
+              <div className="flex gap-3 text-sm">
+                {network.mainnet && <span className="text-emerald-500 flex items-center gap-1"><CheckCircle size={14} /> Mainnet</span>}
+                {network.testnet && <span className="text-blue-500 flex items-center gap-1"><CheckCircle size={14} /> Testnet</span>}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Authentication Methods */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <h2 className="text-xl font-semibold mb-4">Authentication Methods</h2>
+
+        <div className="space-y-4">
+          {[
+            {
+              name: 'Passkeys',
+              description: 'Biometric and passkey authentication',
+              supported: true,
+            },
+            {
+              name: 'Social Login',
+              description: 'Google, GitHub, Discord authentication',
+              supported: true,
+            },
+            {
+              name: 'Email/Password',
+              description: 'Traditional email and password auth',
+              supported: true,
+            },
+            {
+              name: 'Web3 Wallet',
+              description: 'MetaMask, WalletConnect integration',
+              supported: true,
+            },
+          ].map((method, index) => (
+            <div key={index} className="flex items-center justify-between p-4 bg-white/5 rounded-lg border border-border/50">
+              <div>
+                <p className="font-medium">{method.name}</p>
+                <p className="text-sm text-foreground/60">{method.description}</p>
+              </div>
+              {method.supported && <CheckCircle className="text-emerald-500" size={24} />}
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  )
+}

package/app/dashboard/layout.tsx

@@ -0,0 +1,18 @@
+import { DashboardSidebar } from '@/components/dashboard-sidebar'
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="flex h-screen bg-background">
+      <DashboardSidebar />
+      <main className="flex-1 overflow-auto md:ml-0 pt-16 md:pt-0">
+        <div className="p-4 md:p-8">
+          {children}
+        </div>
+      </main>
+    </div>
+  )
+}

package/app/dashboard/page.tsx

@@ -0,0 +1,244 @@
+'use client'
+
+import { BarChart3, Users, Activity, Zap, Droplets, Loader2, ExternalLink } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+import { useState, useEffect } from 'react'
+import { apiClient } from '@/lib/api'
+
+interface DeveloperStats {
+  total_wallets: number
+  total_accounts: number
+  total_ops: number
+  total_gas_sponsored_wei: number
+  ops_this_month: number
+  monthly_limit: number | null
+  plan: string
+}
+
+interface RecentWallet {
+  id: string
+  signer_address: string
+  oauth_provider: string
+  created_at: string
+  account_count: number
+}
+
+export default function DashboardPage() {
+  const [stats, setStats] = useState<DeveloperStats | null>(null)
+  const [recentWallets, setRecentWallets] = useState<RecentWallet[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchDashboardData = async () => {
+      try {
+        setIsLoading(true)
+        const [statsData, walletsData] = await Promise.all([
+          apiClient.dashboard('/v1/developers/stats'),
+          apiClient.dashboard('/v1/wallets?limit=5&offset=0') // Just grab the 5 newest
+        ])
+        
+        setStats(statsData)
+        setRecentWallets(walletsData.wallets || [])
+      } catch (error) {
+        console.error('Failed to load dashboard data:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchDashboardData()
+  }, [])
+
+  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>
+    )
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Dashboard</h1>
+        <p className="text-foreground/60">Welcome back to your Lumina workspace</p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[
+          {
+            label: 'Total Wallets',
+            value: stats?.total_wallets.toLocaleString() || '0',
+            icon: Users,
+            color: 'emerald',
+          },
+          {
+            label: 'Smart Accounts',
+            value: stats?.total_accounts.toLocaleString() || '0',
+            icon: Activity,
+            color: 'blue',
+          },
+          {
+            label: 'Total Operations',
+            value: stats?.total_ops.toLocaleString() || '0',
+            icon: Zap,
+            color: 'amber',
+          },
+          {
+            label: 'Gas Sponsored',
+            value: `${formatWei(stats?.total_gas_sponsored_wei)} ETH`,
+            icon: Droplets,
+            color: 'emerald',
+          },
+        ].map((stat, index) => {
+          const Icon = stat.icon
+          return (
+            <Card key={index} className="glassmorphism-dark p-6 border-border">
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className="text-sm text-foreground/60 mb-1">{stat.label}</p>
+                  <p className="text-3xl font-bold">{stat.value}</p>
+                </div>
+                <div className={`p-3 rounded-lg bg-${stat.color}-600/10`}>
+                  <Icon className={`text-${stat.color}-500`} size={24} />
+                </div>
+              </div>
+            </Card>
+          )
+        })}
+      </div>
+
+      {/* Main Charts Area */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Activity Chart (Requires a new time-series endpoint in backend to make dynamic) */}
+        <Card className="glassmorphism-dark p-6 border-border lg:col-span-2">
+          <div className="mb-6 flex justify-between items-start">
+            <div>
+              <h2 className="text-xl font-semibold mb-1">Monthly Activity</h2>
+              <p className="text-sm text-foreground/60">Wallet creation trends (Demo Data)</p>
+            </div>
+            <BarChart3 className="text-emerald-500" size={24} />
+          </div>
+          
+          <div className="space-y-4">
+            {[
+              { month: 'Jan', wallets: 85, pct: '65%' },
+              { month: 'Feb', wallets: 92, pct: '71%' },
+              { month: 'Mar', wallets: 78, pct: '59%' },
+              { month: 'Apr', wallets: 105, pct: '81%' },
+              { month: 'May', wallets: 118, pct: '91%' },
+              { month: 'Jun', wallets: 142, pct: '100%' },
+            ].map((item, index) => (
+              <div key={index} className="flex items-center gap-4">
+                <div className="w-12 text-sm font-medium text-foreground/60">{item.month}</div>
+                <div className="flex-1">
+                  <div className="h-8 bg-white/5 rounded-lg overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 transition-all duration-500"
+                      style={{ width: item.pct }}
+                    />
+                  </div>
+                </div>
+                <div className="text-sm font-medium w-12 text-right">{item.wallets}</div>
+              </div>
+            ))}
+          </div>
+        </Card>
+
+        {/* System & Plan Status */}
+        <Card className="glassmorphism-dark p-6 border-border flex flex-col">
+          <div>
+            <h2 className="text-xl font-semibold mb-4">Current Plan</h2>
+            <div className="p-4 bg-emerald-600/10 border border-emerald-600/20 rounded-lg mb-6 text-center">
+              <p className="text-sm text-foreground/60 uppercase tracking-wider mb-1">Tier</p>
+              <p className="text-2xl font-bold capitalize text-emerald-400">{stats?.plan || 'Free'}</p>
+            </div>
+          </div>
+
+          <div className="border-t border-border pt-6 mt-auto">
+            <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+              <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+              System Health
+            </h3>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-foreground/60">Paymaster Status</span>
+                <span className="font-medium text-emerald-500">Operational</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-foreground/60">Bundler Relay</span>
+                <span className="font-medium text-emerald-500">Operational</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-foreground/60">Operations Limit</span>
+                <span className="font-medium">
+                  {stats?.ops_this_month} / {stats?.monthly_limit || '∞'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Recent Wallets */}
+      <Card className="glassmorphism-dark p-6 border-border">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold mb-1">Recently Created Wallets</h2>
+          <p className="text-sm text-foreground/60">The newest users to join your application</p>
+        </div>
+
+        <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-3 px-4 text-foreground/60 font-medium rounded-tl-lg">Signer Address</th>
+                <th className="text-left py-3 px-4 text-foreground/60 font-medium">Auth Provider</th>
+                <th className="text-left py-3 px-4 text-foreground/60 font-medium">Smart Accounts</th>
+                <th className="text-left py-3 px-4 text-foreground/60 font-medium">Joined Date</th>
+                <th className="text-right py-3 px-4 text-foreground/60 font-medium rounded-tr-lg">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {recentWallets.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="py-8 text-center text-foreground/60">
+                    No wallets created yet.
+                  </td>
+                </tr>
+              ) : (
+                recentWallets.map((wallet) => (
+                  <tr key={wallet.id} className="border-b border-border/50 hover:bg-white/5 transition">
+                    <td className="py-3 px-4">
+                      <code className="text-xs font-mono">{wallet.signer_address}</code>
+                    </td>
+                    <td className="py-3 px-4 capitalize">
+                      <span className="px-2 py-1 bg-white/10 rounded-full text-xs">
+                        {wallet.oauth_provider}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4 font-medium">{wallet.account_count}</td>
+                    <td className="py-3 px-4 text-foreground/60">
+                      {new Date(wallet.created_at).toLocaleDateString()}
+                    </td>
+                    <td className="py-3 px-4 text-right">
+                      <button className="text-foreground/60 hover:text-emerald-400 transition" title="View Details">
+                        <ExternalLink size={16} className="inline-block" />
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  )
+}