@jerydam/lumina-sdk 0.1.0

package/app/docs/examples/multi-chain/page.tsx

@@ -0,0 +1,331 @@
+'use client'
+
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export default function MultiChainExamplePage() {
+  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: 'Examples', href: '/docs/examples/basic-setup' },
+            { label: 'Multi-Chain' },
+          ]}
+        />
+
+        <div className="mt-8 prose prose-invert max-w-none">
+          <h1>Multi-Chain Wallet Example</h1>
+          
+          <p className="text-lg text-foreground/80">
+            Build a wallet application that supports multiple blockchain networks with Lumina.
+          </p>
+
+          <h2>Supported Networks</h2>
+          <CodeBlock
+            code={`const networks = {
+  ethereum: {
+    id: 1,
+    name: 'Ethereum',
+    rpc: 'https://eth-mainnet.g.alchemy.com/v2/...',
+    explorer: 'https://etherscan.io',
+  },
+  polygon: {
+    id: 137,
+    name: 'Polygon',
+    rpc: 'https://polygon-mainnet.g.alchemy.com/v2/...',
+    explorer: 'https://polygonscan.com',
+  },
+  arbitrum: {
+    id: 42161,
+    name: 'Arbitrum',
+    rpc: 'https://arbitrum-mainnet.g.alchemy.com/v2/...',
+    explorer: 'https://arbiscan.io',
+  },
+  optimism: {
+    id: 10,
+    name: 'Optimism',
+    rpc: 'https://opt-mainnet.g.alchemy.com/v2/...',
+    explorer: 'https://optimistic.etherscan.io',
+  },
+}`}
+            language="typescript"
+            title="Supported Networks"
+          />
+
+          <h2>Multi-Chain Provider Setup</h2>
+          <CodeBlock
+            code={`// app/providers.tsx
+'use client'
+
+import { ReactNode, useState } from 'react'
+import { LuminaProvider } from '@lumina/react'
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [network, setNetwork] = useState('ethereum')
+
+  return (
+    <LuminaProvider
+      publicKey={process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY!}
+      network={network as any}
+      onNetworkChange={setNetwork}
+    >
+      {children}
+    </LuminaProvider>
+  )
+}`}
+            language="typescript"
+            title="Multi-Chain Provider"
+          />
+
+          <h2>Network Selector Component</h2>
+          <CodeBlock
+            code={`'use client'
+
+import { useState } from 'react'
+import { useLumina } from '@lumina/react'
+
+const networks = [
+  { id: 'ethereum', name: 'Ethereum', icon: '⟠' },
+  { id: 'polygon', name: 'Polygon', icon: '🟣' },
+  { id: 'arbitrum', name: 'Arbitrum', icon: '🟦' },
+  { id: 'optimism', name: 'Optimism', icon: '🔴' },
+]
+
+export function NetworkSelector() {
+  const { network, setNetwork } = useLumina()
+
+  return (
+    <div className="flex gap-2">
+      {networks.map((net) => (
+        <button
+          key={net.id}
+          onClick={() => setNetwork(net.id)}
+          className={
+            network === net.id
+              ? 'bg-emerald-600 text-white'
+              : 'bg-white/10 text-white hover:bg-white/20'
+          }
+        >
+          {net.icon} {net.name}
+        </button>
+      ))}
+    </div>
+  )
+}`}
+            language="typescript"
+            title="Network Selector"
+          />
+
+          <h2>Multi-Wallet Management</h2>
+          <CodeBlock
+            code={`// app/wallets/page.tsx
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useLumina } from '@lumina/react'
+
+interface Wallet {
+  id: string
+  network: string
+  address: string
+  balance: string
+}
+
+export default function WalletsPage() {
+  const { network, user } = useLumina()
+  const [wallets, setWallets] = useState<Wallet[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadWallets()
+  }, [user])
+
+  async function loadWallets() {
+    try {
+      const response = await fetch(\`/api/wallets?user_id=\${user.id}\`)
+      const data = await response.json()
+      setWallets(data.data.wallets)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function createWalletForNetwork(networkId: string) {
+    try {
+      const response = await fetch('/api/wallets', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          user_id: user.id,
+          network: networkId,
+          name: \`\${networkId} Wallet\`,
+        }),
+      })
+      const wallet = await response.json()
+      setWallets([...wallets, wallet.data])
+    } catch (error) {
+      console.error('Failed to create wallet:', error)
+    }
+  }
+
+  return (
+    <div>
+      <h1>My Multi-Chain Wallets</h1>
+
+      {loading ? (
+        <p>Loading wallets...</p>
+      ) : (
+        <div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {wallets.map((wallet) => (
+              <div
+                key={wallet.id}
+                className="p-4 border border-emerald-600/20 rounded-lg"
+              >
+                <h3>{wallet.network.toUpperCase()}</h3>
+                <p className="font-mono text-sm">{wallet.address}</p>
+                <p className="text-lg">Balance: {wallet.balance} ETH</p>
+              </div>
+            ))}
+          </div>
+
+          <button
+            onClick={() => createWalletForNetwork('polygon')}
+            className="mt-4 px-4 py-2 bg-emerald-600 text-white rounded"
+          >
+            Add Polygon Wallet
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}`}
+            language="typescript"
+            title="Multi-Wallet Component"
+          />
+
+          <h2>Cross-Chain Transaction</h2>
+          <CodeBlock
+            code={`// lib/multi-chain.ts
+export async function sendCrossChainTransaction({
+  sourceNetwork,
+  destinationNetwork,
+  walletId,
+  recipient,
+  amount,
+}: {
+  sourceNetwork: string
+  destinationNetwork: string
+  walletId: string
+  recipient: string
+  amount: string
+}) {
+  // Create transaction on source network
+  const txResponse = await fetch('/api/transactions', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      wallet_id: walletId,
+      to: recipient,
+      amount,
+      token: 'ETH',
+      chain_id: sourceNetwork,
+      type: 'cross-chain-transfer',
+      destination_chain: destinationNetwork,
+    }),
+  })
+
+  const transaction = await txResponse.json()
+
+  return transaction.data
+}
+
+// Track cross-chain status
+export async function getCrossChainStatus(transactionId: string) {
+  const response = await fetch(\`/api/transactions/\${transactionId}/status\`)
+  const data = await response.json()
+
+  return {
+    sourceChainStatus: data.data.source_status, // pending, confirmed
+    destinationChainStatus: data.data.dest_status, // pending, completed
+    estimatedTime: data.data.estimated_time,
+  }
+}`}
+            language="typescript"
+            title="Cross-Chain Helper"
+          />
+
+          <h2>Gas Price Comparison</h2>
+          <CodeBlock
+            code={`'use client'
+
+import { useEffect, useState } from 'react'
+
+export function GasComparison() {
+  const [gasPrices, setGasPrices] = useState({})
+
+  useEffect(() => {
+    fetchGasPrices()
+  }, [])
+
+  async function fetchGasPrices() {
+    const networks = ['ethereum', 'polygon', 'arbitrum', 'optimism']
+    const prices: any = {}
+
+    for (const network of networks) {
+      try {
+        const response = await fetch(
+          \`/api/networks/\${network}/gas-price\`
+        )
+        const data = await response.json()
+        prices[network] = data.data.gas_price
+      } catch (error) {
+        console.error(\`Failed to fetch gas price for \${network}\`, error)
+      }
+    }
+
+    setGasPrices(prices)
+  }
+
+  return (
+    <div className="p-4 bg-white/5 rounded-lg">
+      <h3>Gas Prices Comparison</h3>
+      <div className="grid grid-cols-2 gap-2">
+        {Object.entries(gasPrices).map(([network, price]: any) => (
+          <div key={network}>
+            <p className="text-sm text-gray-400">{network}</p>
+            <p className="text-lg font-bold">{price} Gwei</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}`}
+            language="typescript"
+            title="Gas Price Comparison"
+          />
+
+          <Callout type="info">
+            Use bridging services like Across or Stargate for efficient cross-chain transfers. Lumina supports integration with major bridge protocols.
+          </Callout>
+
+          <Callout type="warning">
+            Always verify gas prices and estimated transaction times before executing cross-chain transactions. Rates vary significantly between networks.
+          </Callout>
+        </div>
+
+        <div className="flex justify-between mt-12 pt-8 border-t border-white/10">
+          <a href="/docs/examples/nextjs-full-stack" className="text-emerald-400 hover:text-emerald-300">
+            ← Full Stack Example
+          </a>
+          <a href="/docs/troubleshooting/faq" className="text-emerald-400 hover:text-emerald-300">
+            FAQ →
+          </a>
+        </div>
+      </main>
+    </div>
+  )
+}

package/app/docs/examples/nextjs-full-stack/page.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export default function FullStackExamplePage() {
+  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: 'Examples', href: '/docs/examples/basic-setup' },
+            { label: 'Next.js Full Stack' },
+          ]}
+        />
+
+        <div className="mt-8 prose prose-invert max-w-none">
+          <h1>Next.js Full Stack Example</h1>
+          
+          <p className="text-lg text-foreground/80">
+            Complete full-stack example of a wallet application built with Next.js, including server-side and client-side components.
+          </p>
+
+          <h2>Project Structure</h2>
+          <CodeBlock
+            code={`my-wallet-app/
+├── app/
+│   ├── api/
+│   │   └── wallets/
+│   │       ├── route.ts          # Create wallet
+│   │       └── [id]/
+│   │           └── route.ts      # Get wallet
+│   ├── wallet/
+│   │   └── page.tsx              # Wallet page
+│   ├── layout.tsx
+│   └── providers.tsx
+├── lib/
+│   └── lumina.ts                 # Lumina API helpers
+├── .env.local
+└── package.json`}
+            language="text"
+            title="File Structure"
+          />
+
+          <h2>Environment Setup</h2>
+          <CodeBlock
+            code={`# .env.local
+NEXT_PUBLIC_LUMINA_PUBLIC_KEY=pk_live_abc123def456...
+LUMINA_SECRET_KEY=sk_live_xyz789uvw012...
+NEXT_PUBLIC_LUMINA_API_URL=https://api.lumina.dev
+NEXT_PUBLIC_LUMINA_NETWORK=ethereum`}
+            language="bash"
+            title=".env.local"
+          />
+
+          <h2>API Helpers</h2>
+          <CodeBlock
+            code={`// lib/lumina.ts
+export interface LuminaConfig {
+  baseUrl: string
+  secretKey: string
+  publicKey: string
+}
+
+const config: LuminaConfig = {
+  baseUrl: process.env.NEXT_PUBLIC_LUMINA_API_URL || '',
+  secretKey: process.env.LUMINA_SECRET_KEY || '',
+  publicKey: process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY || '',
+}
+
+export async function createWallet(userId: string) {
+  const response = await fetch(\`\${config.baseUrl}/v1/wallets\`, {
+    method: 'POST',
+    headers: {
+      'Authorization': \`Bearer \${config.secretKey}\`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ user_id: userId, network: 'ethereum' }),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error.message)
+  }
+
+  return response.json()
+}
+
+export async function getWallet(walletId: string) {
+  const response = await fetch(
+    \`\${config.baseUrl}/v1/wallets/\${walletId}\`,
+    {
+      headers: {
+        'Authorization': \`Bearer \${config.secretKey}\`,
+      },
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch wallet')
+  }
+
+  return response.json()
+}
+
+export async function createTransaction(
+  walletId: string,
+  to: string,
+  amount: string
+) {
+  const response = await fetch(\`\${config.baseUrl}/v1/transactions\`, {
+    method: 'POST',
+    headers: {
+      'Authorization': \`Bearer \${config.secretKey}\`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      wallet_id: walletId,
+      to,
+      amount,
+      token: 'ETH',
+    }),
+  })
+
+  if (!response.ok) {
+    const error = await response.json()
+    throw new Error(error.error.message)
+  }
+
+  return response.json()
+}`}
+            language="typescript"
+            title="Helper Functions"
+          />
+
+          <h2>Server Components</h2>
+
+          <h3>Providers Setup</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={process.env.NEXT_PUBLIC_LUMINA_NETWORK as any}
+    >
+      {children}
+    </LuminaProvider>
+  )
+}`}
+            language="typescript"
+            title="Providers"
+          />
+
+          <h3>Root Layout</h3>
+          <CodeBlock
+            code={`// app/layout.tsx
+import { Providers } from './providers'
+import './globals.css'
+
+export const metadata = {
+  title: 'My Wallet',
+  description: 'Web3 wallet application',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}`}
+            language="typescript"
+            title="Layout"
+          />
+
+          <h2>API Routes</h2>
+
+          <h3>Create Wallet Endpoint</h3>
+          <CodeBlock
+            code={`// app/api/wallets/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+import { createWallet } from '@/lib/lumina'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { userId } = await request.json()
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: 'userId is required' },
+        { status: 400 }
+      )
+    }
+
+    const wallet = await createWallet(userId)
+    return NextResponse.json(wallet)
+  } catch (error: any) {
+    console.error('Create wallet error:', error)
+    return NextResponse.json(
+      { error: error.message },
+      { status: 500 }
+    )
+  }
+}`}
+            language="typescript"
+            title="POST /api/wallets"
+          />
+
+          <h3>Get Wallet Endpoint</h3>
+          <CodeBlock
+            code={`// app/api/wallets/[id]/route.ts
+import { NextRequest, NextResponse } from 'next/server'
+import { getWallet } from '@/lib/lumina'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const wallet = await getWallet(params.id)
+    return NextResponse.json(wallet)
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message },
+      { status: 500 }
+    )
+  }
+}`}
+            language="typescript"
+            title="GET /api/wallets/[id]"
+          />
+
+          <h2>Client Components</h2>
+
+          <h3>Wallet Page</h3>
+          <CodeBlock
+            code={`// app/wallet/page.tsx
+'use client'
+
+import { useState, useEffect } from 'react'
+import { WalletDisplay, WalletLogin, TransactionConfirm } from '@lumina/react'
+
+export default function WalletPage() {
+  const [user, setUser] = useState(null)
+  const [wallet, setWallet] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [showTransaction, setShowTransaction] = useState(false)
+
+  const handleLogin = async (userData: any) => {
+    setUser(userData)
+    setLoading(true)
+    try {
+      // Create wallet for user
+      const response = await fetch('/api/wallets', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ userId: userData.id }),
+      })
+      const data = await response.json()
+      setWallet(data.data)
+    } catch (error) {
+      console.error('Failed to create wallet:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <main className="max-w-4xl mx-auto p-8">
+      {!user ? (
+        <WalletLogin onSuccess={handleLogin} />
+      ) : (
+        <div>
+          <h1>Welcome, {user.name}!</h1>
+          {wallet && (
+            <>
+              <WalletDisplay
+                address={wallet.address}
+                balance={wallet.balance}
+                onSend={() => setShowTransaction(true)}
+              />
+              {showTransaction && (
+                <TransactionConfirm
+                  transactionId="txn_123"
+                  amount="1.0"
+                  recipient="0x..."
+                  onConfirm={() => setShowTransaction(false)}
+                  onCancel={() => setShowTransaction(false)}
+                />
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </main>
+  )
+}`}
+            language="typescript"
+            title="Wallet Page"
+          />
+
+          <Callout type="success">
+            This example provides a complete foundation for building a Web3 wallet application with Lumina. Customize it further based on your specific needs.
+          </Callout>
+        </div>
+
+        <div className="flex justify-between mt-12 pt-8 border-t border-white/10">
+          <a href="/docs/guides/nextjs" className="text-emerald-400 hover:text-emerald-300">
+            ← Next.js Guide
+          </a>
+          <a href="/docs/examples/multi-chain" className="text-emerald-400 hover:text-emerald-300">
+            Multi-Chain Example →
+          </a>
+        </div>
+      </main>
+    </div>
+  )
+}