@jerydam/lumina-sdk 0.1.0

package/Lumina-sdk/src/components/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/Lumina-sdk/src/components/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/Lumina-sdk/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/Lumina-sdk/src/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+'use client'
+
+// Inspired by react-hot-toast library
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
+  | {
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  }
+}
+
+export { useToast, toast }

package/Lumina-sdk/src/lib/api.ts

@@ -0,0 +1,66 @@
+// lib/api.ts
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://lumina-z3v8.onrender.com';
+
+export const apiClient = {
+  // ─────────────────────────────────────────────────────────────────────────────
+  // SDK Client (Uses X-API-Key)
+  // ─────────────────────────────────────────────────────────────────────────────
+  sdk: async (endpoint: string, apiKey: string, options: RequestInit = {}) => {
+    if (!apiKey) throw new Error("API Key is required for SDK calls");
+
+    const headers = {
+      'Content-Type': 'application/json',
+      'X-API-Key': apiKey,
+      ...options.headers,
+    };
+
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, { ...options, headers });
+    
+    // Attempt to parse JSON safely, even on error
+    let data;
+    try {
+      data = await response.json();
+    } catch {
+      data = { detail: response.statusText };
+    }
+
+    if (!response.ok) {
+      throw new Error(data.detail || `SDK API Error: ${response.status}`);
+    }
+
+    return data;
+  },
+
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Dashboard Client (Uses Bearer JWT)
+  // ─────────────────────────────────────────────────────────────────────────────
+  dashboard: async (endpoint: string, options: RequestInit = {}) => {
+    // Note: Assuming you store the dev token in localStorage upon login
+    const token = typeof window !== 'undefined' ? localStorage.getItem('lumina_dev_token') : null;
+    
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...options.headers as Record<string, string>,
+    };
+
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, { ...options, headers });
+
+    let data;
+    try {
+      data = await response.json();
+    } catch {
+      data = { detail: response.statusText };
+    }
+
+    if (!response.ok) {
+      throw new Error(data.detail || `Dashboard API Error: ${response.status}`);
+    }
+
+    return data;
+  }
+};

package/Lumina-sdk/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/Lumina-sdk/src/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@lumina/sdk",
+  "version": "1.0.0",
+  "description": "Lumina SDK - Web3 wallet auth and identity verification",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": ["web3", "wallet", "auth", "kyc", "lumina"],
+  "author": "Oyeniran Jeremiah Damilare <jerydan148@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next": ">=13"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    "viem": "^2.48.11",
+    "lucide-react": "^0.564.0"
+  }
+}

package/Lumina-sdk/src/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}