@jerydam/lumina-sdk 0.1.0

package/app/docs/getting-started/quick-start/page.tsx

@@ -0,0 +1,199 @@
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export const metadata = {
+  title: 'Quick Start - Lumina Documentation',
+  description: 'Get up and running with Lumina in 5 minutes.',
+}
+
+export default function QuickStartPage() {
+  return (
+    <>
+      <Breadcrumb />
+
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-white">Quick Start</h1>
+          <p className="text-lg text-foreground/80">
+            Build your first Lumina integration in 5 minutes. This guide covers the essential steps to get users logging in and transacting.
+          </p>
+        </div>
+
+        <Callout type="info">
+          This guide assumes you&apos;ve already installed Lumina. If not, start with <a href="/docs/getting-started/installation" className="text-emerald-400 hover:underline">Installation</a>.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Step 1: Create a Login Page</h2>
+          <p className="text-foreground/80 mb-4">
+            Use the <code className="bg-white/10 px-2 py-1 rounded text-sm">WalletLogin</code> component to add authentication:
+          </p>
+
+          <CodeBlock
+            code={`'use client'
+
+import { WalletLogin } from '@lumina/sdk'
+
+export default function LoginPage() {
+  const handleLoginSuccess = (user) => {
+    console.log('User logged in:', user)
+    // Redirect to dashboard
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <WalletLogin
+        onSuccess={handleLoginSuccess}
+        authMethods={['email', 'passkey', 'google']}
+      />
+    </div>
+  )
+}`}
+            language="tsx"
+            title="app/login/page.tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Step 2: Display Wallet Balance</h2>
+          <p className="text-foreground/80 mb-4">
+            Once logged in, show the user&apos;s wallet using the <code className="bg-white/10 px-2 py-1 rounded text-sm">WalletDisplay</code> component:
+          </p>
+
+          <CodeBlock
+            code={`'use client'
+
+import { WalletDisplay, useLumina } from '@lumina/sdk'
+
+export default function WalletPage() {
+  const { user, logout } = useLumina()
+
+  if (!user) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="p-8">
+      <h1>Your Wallet</h1>
+      <WalletDisplay
+        address={user.walletAddress}
+        balance={user.balance}
+        network="ethereum"
+        onLogout={logout}
+      />
+    </div>
+  )
+}`}
+            language="tsx"
+            title="app/wallet/page.tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Step 3: Add a Transaction Button</h2>
+          <p className="text-foreground/80 mb-4">
+            Enable users to send transactions with <code className="bg-white/10 px-2 py-1 rounded text-sm">TransactionConfirm</code>:
+          </p>
+
+          <CodeBlock
+            code={`'use client'
+
+import { TransactionConfirm, useLumina } from '@lumina/sdk'
+import { useState } from 'react'
+
+export default function SendPage() {
+  const { user } = useLumina()
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  const transaction = {
+    to: '0x742d35Cc6634C0532925a3b844Bc1e8181f42f9f',
+    value: '0.1', // ETH
+    network: 'ethereum',
+  }
+
+  const handleSend = async () => {
+    setShowConfirm(true)
+  }
+
+  const handleConfirm = async (txHash) => {
+    console.log('Transaction sent:', txHash)
+    setShowConfirm(false)
+  }
+
+  return (
+    <div className="p-8">
+      <button
+        onClick={handleSend}
+        className="px-4 py-2 bg-emerald-600 rounded-lg hover:bg-emerald-700"
+      >
+        Send 0.1 ETH
+      </button>
+
+      {showConfirm && (
+        <TransactionConfirm
+          transaction={transaction}
+          onConfirm={handleConfirm}
+          onCancel={() => setShowConfirm(false)}
+        />
+      )}
+    </div>
+  )
+}`}
+            language="tsx"
+            title="app/send/page.tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Step 4: Test Locally</h2>
+          <p className="text-foreground/80 mb-4">
+            Start your dev server and test your integration:
+          </p>
+
+          <CodeBlock
+            code="npm run dev"
+            language="bash"
+          />
+
+          <p className="text-foreground/80 text-sm">
+            Your app is now running at <code className="bg-white/10 px-2 py-1 rounded">http://localhost:3000</code>. Visit the login page and try authenticating!
+          </p>
+        </div>
+
+        <Callout type="info" title="Testing on Testnet">
+          For development, we recommend using testnet networks (Sepolia for Ethereum, Goerli, etc.). Set <code className="bg-black/40 px-2 py-1 rounded text-xs">NEXT_PUBLIC_LUMINA_NETWORK=testnet</code> in your environment variables.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">What&apos;s Next?</h2>
+          <p className="text-foreground/80 mb-4">
+            Now that you have a working integration, explore:
+          </p>
+          <ul className="space-y-2 text-foreground/80 text-sm">
+            <li className="flex gap-3">
+              <span className="text-emerald-400">▸</span>
+              <a href="/docs/sdk/wallet-login" className="text-emerald-400 hover:underline">Advanced WalletLogin options</a> - Custom styling and auth flows
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">▸</span>
+              <a href="/docs/guides/security" className="text-emerald-400 hover:underline">Security best practices</a> - Protect your users
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">▸</span>
+              <a href="/docs/api/transactions" className="text-emerald-400 hover:underline">Transaction API</a> - Advanced transaction handling
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">▸</span>
+              <a href="/docs/guides/multi-chain" className="text-emerald-400 hover:underline">Multi-chain support</a> - Support multiple networks
+            </li>
+          </ul>
+        </div>
+
+        <Callout type="success" title="You're Ready!">
+          You've successfully integrated Lumina into your app. Check out the <a href="/docs/examples" className="text-emerald-400 hover:underline">Examples</a> section for more complex use cases.
+        </Callout>
+      </div>
+    </>
+  )
+}

package/app/docs/guides/nextjs/page.tsx

@@ -0,0 +1,358 @@
+'use client'
+
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { TableOfContents } from '@/components/docs/table-of-contents'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export default function NextjsGuidePage() {
+  const headings = [
+    { id: 'setup', level: 2, text: 'Setup' },
+    { id: 'app-router', level: 2, text: 'App Router Integration' },
+    { id: 'pages-router', level: 2, text: 'Pages Router Integration' },
+    { id: 'api-routes', level: 2, text: 'API Routes' },
+    { id: 'middleware', level: 2, text: 'Middleware' },
+    { id: 'best-practices', level: 2, text: 'Best Practices' },
+  ]
+
+  return (
+    <div className="flex gap-8 max-w-7xl mx-auto px-4 py-8">
+      <main className="flex-1 min-w-0">
+        <Breadcrumb 
+          items={[
+            { label: 'Docs', href: '/docs' },
+            { label: 'Guides', href: '/docs/guides/react' },
+            { label: 'Next.js' },
+          ]}
+        />
+
+        <div className="mt-8 prose prose-invert max-w-none">
+          <h1>Next.js Integration Guide</h1>
+          
+          <p className="text-lg text-foreground/80">
+            Complete guide to integrating Lumina wallet with Next.js applications using both App Router and Pages Router.
+          </p>
+
+          <h2 id="setup">Setup</h2>
+
+          <CodeBlock
+            code={`# Install dependencies
+npm install @lumina/react
+
+# Or with pnpm
+pnpm add @lumina/react`}
+            language="bash"
+            title="Installation"
+          />
+
+          <h2 id="app-router">App Router Integration</h2>
+
+          <h3>Create Provider Component</h3>
+          <CodeBlock
+            code={`// app/providers.tsx
+'use client'
+
+import { ReactNode } from 'react'
+import { LuminaProvider } from '@lumina/react'
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <LuminaProvider 
+      publicKey={process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY!}
+      network="ethereum"
+    >
+      {children}
+    </LuminaProvider>
+  )
+}`}
+            language="typescript"
+            title="Provider"
+          />
+
+          <h3>Root Layout</h3>
+          <CodeBlock
+            code={`// app/layout.tsx
+import { Providers } from './providers'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}`}
+            language="typescript"
+            title="Layout"
+          />
+
+          <h3>Use in Pages</h3>
+          <CodeBlock
+            code={`// app/wallet/page.tsx
+'use client'
+
+import { WalletDisplay, WalletLogin } from '@lumina/react'
+import { useState } from 'react'
+
+export default function WalletPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  return (
+    <div>
+      {!isLoggedIn ? (
+        <WalletLogin 
+          onSuccess={() => setIsLoggedIn(true)}
+        />
+      ) : (
+        <WalletDisplay />
+      )}
+    </div>
+  )
+}`}
+            language="typescript"
+            title="Page Component"
+          />
+
+          <h2 id="pages-router">Pages Router Integration</h2>
+
+          <h3>Custom App</h3>
+          <CodeBlock
+            code={`// pages/_app.tsx
+import type { AppProps } from 'next/app'
+import { LuminaProvider } from '@lumina/react'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <LuminaProvider 
+      publicKey={process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY!}
+      network="ethereum"
+    >
+      <Component {...pageProps} />
+    </LuminaProvider>
+  )
+}
+
+export default MyApp`}
+            language="typescript"
+            title="App Component"
+          />
+
+          <h3>Pages Router Page</h3>
+          <CodeBlock
+            code={`// pages/wallet.tsx
+import { WalletDisplay, WalletLogin } from '@lumina/react'
+import { useState } from 'react'
+
+export default function WalletPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false)
+
+  return (
+    <div>
+      {!isLoggedIn ? (
+        <WalletLogin onSuccess={() => setIsLoggedIn(true)} />
+      ) : (
+        <WalletDisplay />
+      )}
+    </div>
+  )
+}`}
+            language="typescript"
+            title="Page"
+          />
+
+          <h2 id="api-routes">API Routes</h2>
+
+          <h3>Create Wallet</h3>
+          <CodeBlock
+            code={`// app/api/wallets/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { userId } = await request.json()
+
+    const response = await fetch(
+      'https://api.lumina.dev/v1/wallets',
+      {
+        method: 'POST',
+        headers: {
+          'Authorization': \`Bearer \${process.env.LUMINA_SECRET_KEY}\`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          user_id: userId,
+          network: 'ethereum',
+        }),
+      }
+    )
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.error.message },
+        { status: response.status }
+      )
+    }
+
+    return NextResponse.json(data.data)
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to create wallet' },
+      { status: 500 }
+    )
+  }
+}`}
+            language="typescript"
+            title="Create Wallet Route"
+          />
+
+          <h3>Confirm Transaction</h3>
+          <CodeBlock
+            code={`// app/api/transactions/confirm/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { transactionId, signature, nonce } = await request.json()
+
+    const response = await fetch(
+      \`https://api.lumina.dev/v1/transactions/\${transactionId}/confirm\`,
+      {
+        method: 'POST',
+        headers: {
+          'Authorization': \`Bearer \${process.env.LUMINA_SECRET_KEY}\`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ signature, nonce }),
+      }
+    )
+
+    const data = await response.json()
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: data.error.message },
+        { status: response.status }
+      )
+    }
+
+    return NextResponse.json(data.data)
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to confirm transaction' },
+      { status: 500 }
+    )
+  }
+}`}
+            language="typescript"
+            title="Confirm Transaction Route"
+          />
+
+          <h2 id="middleware">Middleware</h2>
+
+          <CodeBlock
+            code={`// middleware.ts
+import { NextRequest, NextResponse } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  // Add custom headers
+  const requestHeaders = new Headers(request.headers)
+  requestHeaders.set('x-lumina-timestamp', new Date().toISOString())
+
+  // Protect wallet routes
+  if (request.nextUrl.pathname.startsWith('/wallet')) {
+    const token = request.cookies.get('wallet_token')
+    if (!token) {
+      return NextResponse.redirect(new URL('/login', request.url))
+    }
+  }
+
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
+}
+
+export const config = {
+  matcher: ['/wallet/:path*', '/api/wallets/:path*'],
+}`}
+            language="typescript"
+            title="Middleware Example"
+          />
+
+          <h2 id="best-practices">Best Practices</h2>
+
+          <h3>Environment Variables</h3>
+          <CodeBlock
+            code={`# .env.local
+NEXT_PUBLIC_LUMINA_PUBLIC_KEY=pk_live_abc123...
+LUMINA_SECRET_KEY=sk_live_xyz789...
+NEXT_PUBLIC_LUMINA_API_URL=https://api.lumina.dev
+NEXT_PUBLIC_LUMINA_NETWORK=ethereum`}
+            language="bash"
+            title=".env.local"
+          />
+
+          <h3>Error Handling in API Routes</h3>
+          <CodeBlock
+            code={`// lib/lumina.ts
+export async function callLuminaAPI(
+  endpoint: string,
+  options: RequestInit
+) {
+  const response = await fetch(
+    \`https://api.lumina.dev/v1\${endpoint}\`,
+    {
+      ...options,
+      headers: {
+        'Authorization': \`Bearer \${process.env.LUMINA_SECRET_KEY}\`,
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    }
+  )
+
+  const data = await response.json()
+
+  if (!response.ok) {
+    throw new Error(data.error.message)
+  }
+
+  return data.data
+}`}
+            language="typescript"
+            title="Helper Function"
+          />
+
+          <Callout type="info">
+            Use the App Router for new Next.js projects. It provides better performance and uses React Server Components.
+          </Callout>
+
+          <Callout type="warning">
+            Never expose your secret API key in client-side code. Always use API routes for server-side operations.
+          </Callout>
+        </div>
+
+        <div className="flex justify-between mt-12 pt-8 border-t border-white/10">
+          <a href="/docs/guides/react" className="text-emerald-400 hover:text-emerald-300">
+            ← React Guide
+          </a>
+          <a href="/docs/examples/nextjs-full-stack" className="text-emerald-400 hover:text-emerald-300">
+            Full Stack Example →
+          </a>
+        </div>
+      </main>
+
+      <aside className="hidden lg:block w-64 flex-shrink-0">
+        <TableOfContents headings={headings} />
+      </aside>
+    </div>
+  )
+}