@jerydam/lumina-sdk 0.1.0

package/app/docs/getting-started/environment-setup/page.tsx

@@ -0,0 +1,243 @@
+'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 EnvironmentSetupPage() {
+  const headings = [
+    { id: 'overview', level: 2, text: 'Overview' },
+    { id: 'api-keys', level: 2, text: 'API Keys & Credentials' },
+    { id: 'environment-variables', level: 2, text: 'Environment Variables' },
+    { id: 'testnet-setup', level: 2, text: 'Testnet Configuration' },
+    { id: 'production-setup', level: 2, text: 'Production Setup' },
+    { id: 'verification', level: 2, text: 'Verify Your Setup' },
+  ]
+
+  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: 'Getting Started', href: '/docs/getting-started/introduction' },
+            { label: 'Environment Setup' },
+          ]}
+        />
+
+        <div className="mt-8 prose prose-invert max-w-none">
+          <h1>Environment Setup</h1>
+          
+          <p className="text-lg text-foreground/80">
+            Learn how to configure your development and production environments for Lumina wallet integration.
+          </p>
+
+          <h2 id="overview">Overview</h2>
+          <p>
+            Before you start building with Lumina, you need to set up your environment with the necessary API keys and environment variables. This guide covers both development and production configurations.
+          </p>
+
+          <Callout type="info">
+            It typically takes 5-10 minutes to complete the environment setup. Have your Lumina dashboard open.
+          </Callout>
+
+          <h2 id="api-keys">API Keys & Credentials</h2>
+          
+          <p>
+            You'll need two types of credentials from your Lumina dashboard:
+          </p>
+
+          <h3>1. Public API Key (publishable_key)</h3>
+          <p>
+            Used on the client-side for initializing the Lumina provider. Safe to expose in frontend code.
+          </p>
+
+          <CodeBlock
+            code={`// Get your public key from the dashboard
+const publicKey = "pk_live_abc123def456..."`}
+            language="javascript"
+            title="Public Key"
+          />
+
+          <h3>2. Secret API Key (secret_key)</h3>
+          <p>
+            Used for server-side operations. <strong>Never expose this in client-side code.</strong>
+          </p>
+
+          <CodeBlock
+            code={`// Keep this in environment variables only
+const secretKey = "sk_live_xyz789uvw012..."`}
+            language="javascript"
+            title="Secret Key"
+          />
+
+          <Callout type="warning">
+            Your secret API key has full access to your account. Never commit it to version control or expose it in frontend code.
+          </Callout>
+
+          <h2 id="environment-variables">Environment Variables</h2>
+
+          <p>
+            Create a <code>.env.local</code> file in your project root with your credentials:
+          </p>
+
+          <CodeBlock
+            code={`# Public key (safe to expose)
+NEXT_PUBLIC_LUMINA_PUBLIC_KEY=pk_live_abc123def456...
+
+# Secret key (server-side only)
+LUMINA_SECRET_KEY=sk_live_xyz789uvw012...
+
+# API endpoint
+NEXT_PUBLIC_LUMINA_API_URL=https://api.lumina.dev
+
+# Optional: Webhook secret for securing webhook events
+LUMINA_WEBHOOK_SECRET=whsec_abc123...`}
+            language="bash"
+            title=".env.local"
+          />
+
+          <h3>For Next.js Projects</h3>
+          <CodeBlock
+            code={`// pages/api/lumina-config.ts
+export default function handler(req, res) {
+  // Public key can be safely returned to frontend
+  res.status(200).json({
+    publicKey: process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY,
+  })
+}`}
+            language="typescript"
+            title="Accessing Variables"
+          />
+
+          <h3>For React Projects</h3>
+          <CodeBlock
+            code={`// .env
+REACT_APP_LUMINA_PUBLIC_KEY=pk_live_abc123def456...
+REACT_APP_LUMINA_API_URL=https://api.lumina.dev`}
+            language="bash"
+            title=".env for React"
+          />
+
+          <h2 id="testnet-setup">Testnet Configuration</h2>
+
+          <p>
+            For development and testing, use testnet credentials:
+          </p>
+
+          <CodeBlock
+            code={`# Development/Testnet
+NEXT_PUBLIC_LUMINA_PUBLIC_KEY=pk_test_abc123def456...
+LUMINA_SECRET_KEY=sk_test_xyz789uvw012...
+NEXT_PUBLIC_LUMINA_API_URL=https://testnet-api.lumina.dev
+
+# Network: Sepolia (Ethereum testnet)
+NEXT_PUBLIC_LUMINA_NETWORK=sepolia`}
+            language="bash"
+            title=".env.local (Testnet)"
+          />
+
+          <Callout type="info">
+            Testnet credentials can be shared safely. They only work on testnets and don't affect production data.
+          </Callout>
+
+          <h2 id="production-setup">Production Setup</h2>
+
+          <p>
+            When deploying to production, use your production credentials and configure them in your platform:
+          </p>
+
+          <h3>Vercel</h3>
+          <CodeBlock
+            code={`# In Vercel dashboard:
+# Project Settings → Environment Variables
+
+NEXT_PUBLIC_LUMINA_PUBLIC_KEY=pk_live_abc123def456...
+LUMINA_SECRET_KEY=sk_live_xyz789uvw012...
+NEXT_PUBLIC_LUMINA_API_URL=https://api.lumina.dev`}
+            language="bash"
+            title="Vercel Environment Variables"
+          />
+
+          <h3>Other Platforms</h3>
+          <CodeBlock
+            code={`# Environment variable naming varies by platform
+# Key principle: 
+# - Public keys can use NEXT_PUBLIC_ prefix (or equivalent)
+# - Secret keys should never be exposed to client
+
+# Platform-specific examples:
+# Netlify: Settings → Build & Deploy → Environment
+# Railway: Variables section
+# Render: Environment → Add Environment Variable`}
+            language="bash"
+            title="Platform Configuration"
+          />
+
+          <Callout type="warning">
+            Always use environment variables for secrets. Never hardcode credentials in your source code.
+          </Callout>
+
+          <h2 id="verification">Verify Your Setup</h2>
+
+          <p>
+            Test that your environment is properly configured:
+          </p>
+
+          <CodeBlock
+            code={`// Check environment variables
+import { LuminaProvider } from '@lumina/react'
+
+export default function CheckSetup() {
+  const publicKey = process.env.NEXT_PUBLIC_LUMINA_PUBLIC_KEY
+  
+  if (!publicKey) {
+    console.error('[v0] Missing NEXT_PUBLIC_LUMINA_PUBLIC_KEY environment variable')
+    return <div>Environment not configured</div>
+  }
+
+  console.log('[v0] Public key configured:', publicKey.substring(0, 20) + '...')
+
+  return (
+    <LuminaProvider publicKey={publicKey}>
+      <YourApp />
+    </LuminaProvider>
+  )
+}`}
+            language="typescript"
+            title="Verify Configuration"
+          />
+
+          <h3>Checklist</h3>
+          <ul>
+            <li>✓ API keys obtained from Lumina dashboard</li>
+            <li>✓ <code>.env.local</code> file created with credentials</li>
+            <li>✓ Public key prefixed with <code>NEXT_PUBLIC_</code></li>
+            <li>✓ Secret key in server-side environment variables only</li>
+            <li>✓ No hardcoded credentials in source code</li>
+            <li>✓ Production credentials configured in deployment platform</li>
+            <li>✓ Webhook secret configured (if using webhooks)</li>
+          </ul>
+
+          <Callout type="success">
+            Your environment is ready! Continue with the quick start guide to begin building.
+          </Callout>
+        </div>
+
+        <div className="flex justify-between mt-12 pt-8 border-t border-white/10">
+          <a href="/docs/getting-started/quick-start" className="text-emerald-400 hover:text-emerald-300">
+            ← Quick Start
+          </a>
+          <a href="/docs/sdk/lumina-provider" className="text-emerald-400 hover:text-emerald-300">
+            LuminaProvider →
+          </a>
+        </div>
+      </main>
+
+      <aside className="hidden lg:block w-64 flex-shrink-0">
+        <TableOfContents headings={headings} />
+      </aside>
+    </div>
+  )
+}

package/app/docs/getting-started/installation/page.tsx

@@ -0,0 +1,187 @@
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export const metadata = {
+  title: 'Installation - Lumina Documentation',
+  description: 'Install the Lumina SDK and set up your project.',
+}
+
+export default function InstallationPage() {
+  return (
+    <>
+      <Breadcrumb />
+
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-white">Installation</h1>
+          <p className="text-lg text-foreground/80">
+            Get Lumina installed in your project in minutes. We support npm, pnpm, and yarn.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">1. Install the Package</h2>
+          <p className="text-foreground/80">
+            Install the Lumina SDK using your preferred package manager:
+          </p>
+
+          <div className="space-y-3">
+            <div>
+              <p className="text-sm font-semibold text-foreground/70 mb-2">npm</p>
+              <CodeBlock
+                code="npm install @lumina/sdk"
+                language="bash"
+              />
+            </div>
+
+            <div>
+              <p className="text-sm font-semibold text-foreground/70 mb-2">pnpm</p>
+              <CodeBlock
+                code="pnpm add @lumina/sdk"
+                language="bash"
+              />
+            </div>
+
+            <div>
+              <p className="text-sm font-semibold text-foreground/70 mb-2">yarn</p>
+              <CodeBlock
+                code="yarn add @lumina/sdk"
+                language="bash"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">2. Set Up Environment Variables</h2>
+          <p className="text-foreground/80 mb-4">
+            Create a <code className="bg-white/10 px-2 py-1 rounded text-sm">.env.local</code> file in your project root with your Lumina API keys:
+          </p>
+
+          <CodeBlock
+            code={`NEXT_PUBLIC_LUMINA_API_KEY=your_public_api_key
+LUMINA_SECRET_KEY=your_secret_key
+NEXT_PUBLIC_LUMINA_NETWORK=mainnet`}
+            language="env"
+            title=".env.local"
+          />
+
+          <Callout type="warning" title="Security Note">
+            Never commit your <code className="bg-black/40 px-2 py-1 rounded text-xs">LUMINA_SECRET_KEY</code> to version control. Keep it in your <code className="bg-black/40 px-2 py-1 rounded text-xs">.env.local</code> file.
+          </Callout>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">3. Initialize Lumina Provider</h2>
+          <p className="text-foreground/80 mb-4">
+            Wrap your app with the <code className="bg-white/10 px-2 py-1 rounded text-sm">LuminaProvider</code> at the root level:
+          </p>
+
+          <CodeBlock
+            code={`import { LuminaProvider } from '@lumina/sdk'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <LuminaProvider
+          apiKey={process.env.NEXT_PUBLIC_LUMINA_API_KEY}
+          network="mainnet"
+        >
+          {children}
+        </LuminaProvider>
+      </body>
+    </html>
+  )
+}`}
+            language="tsx"
+            title="app/layout.tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">4. Verify Installation</h2>
+          <p className="text-foreground/80 mb-4">
+            Create a simple component to verify everything is working:
+          </p>
+
+          <CodeBlock
+            code={`'use client'
+
+import { useLumina } from '@lumina/sdk'
+
+export default function TestComponent() {
+  const { isConnected } = useLumina()
+
+  return (
+    <div>
+      {isConnected ? (
+        <p>✓ Lumina is ready!</p>
+      ) : (
+        <p>Connecting to Lumina...</p>
+      )}
+    </div>
+  )
+}`}
+            language="tsx"
+            title="components/test.tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Requirements</h2>
+          <ul className="space-y-2 text-foreground/80 text-sm">
+            <li className="flex gap-3">
+              <span className="text-emerald-400">✓</span>
+              <span><strong>Node.js 16+</strong> - Required for development</span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">✓</span>
+              <span><strong>React 18+</strong> - Core dependency for the SDK</span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">✓</span>
+              <span><strong>Next.js 13+</strong> - Recommended for SSR/SSG support</span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400">✓</span>
+              <span><strong>Modern browser</strong> - Chrome, Firefox, Safari, or Edge</span>
+            </li>
+          </ul>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Troubleshooting</h2>
+          <div className="space-y-4">
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-foreground mb-2">Module not found error</p>
+              <p className="text-sm text-foreground/80 mb-3">
+                If you see a module not found error, make sure you&apos;ve installed the package:
+              </p>
+              <CodeBlock
+                code="rm -rf node_modules package-lock.json && npm install"
+                language="bash"
+              />
+            </div>
+
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-foreground mb-2">API key issues</p>
+              <p className="text-sm text-foreground/80">
+                Make sure your environment variables are correctly set. Restart your dev server after changing <code className="bg-black/40 px-1 rounded text-xs">.env.local</code>.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <Callout type="success" title="Installation Complete!">
+          Your Lumina SDK is ready to use. Next, check out the <a href="/docs/getting-started/quick-start" className="text-emerald-400 hover:underline">Quick Start</a> guide to build your first feature.
+        </Callout>
+      </div>
+    </>
+  )
+}

package/app/docs/getting-started/introduction/page.tsx

@@ -0,0 +1,178 @@
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { Callout } from '@/components/docs/callout'
+import Link from 'next/link'
+
+export const metadata = {
+  title: 'Introduction - Lumina Documentation',
+  description: 'Welcome to Lumina - the secure, scalable embedded wallet infrastructure for Web3 applications.',
+}
+
+export default function IntroductionPage() {
+  return (
+    <>
+      <Breadcrumb />
+
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-white">Welcome to Lumina</h1>
+          <p className="text-lg text-foreground/80">
+            Lumina is a comprehensive embedded wallet infrastructure designed to make Web3 integration seamless for developers. Whether you&apos;re building a DeFi protocol, NFT marketplace, or gaming platform, Lumina provides the secure, scalable foundation you need.
+          </p>
+        </div>
+
+        <Callout type="info" title="What is Lumina?">
+          Lumina is an enterprise-grade embedded wallet solution that enables users to manage their crypto assets securely without leaving your application. Our SDK handles authentication, transaction signing, and network communication so you can focus on building your product.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Key Features</h2>
+          <ul className="space-y-2 text-foreground/80">
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>Multi-Chain Support</strong> - Seamlessly integrate with Ethereum, Polygon, Arbitrum, Optimism, and more
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>Secure Authentication</strong> - Multiple auth methods including email, passkeys, and social logins
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>Developer-Friendly SDK</strong> - React, Vue, Svelte support with simple, intuitive APIs
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>High Performance</strong> - Optimized transaction processing and network latency
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>Enterprise Security</strong> - End-to-end encryption, key management, and compliance
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 font-bold">✓</span>
+              <span>
+                <strong>Advanced Analytics</strong> - Track user behavior, transaction patterns, and network health
+              </span>
+            </li>
+          </ul>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Quick Start</h2>
+          <p className="text-foreground/80">
+            Getting started with Lumina takes just a few minutes. Choose your framework and follow our setup guide:
+          </p>
+          <div className="grid grid-cols-2 gap-4 mt-4">
+            <Link
+              href="/docs/guides/react"
+              className="p-4 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors"
+            >
+              <div className="font-semibold text-emerald-400 mb-1">React</div>
+              <div className="text-sm text-foreground/70">Setup Lumina in your React app</div>
+            </Link>
+            <Link
+              href="/docs/guides/nextjs"
+              className="p-4 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors"
+            >
+              <div className="font-semibold text-emerald-400 mb-1">Next.js</div>
+              <div className="text-sm text-foreground/70">Integrate with Next.js 15+</div>
+            </Link>
+            <Link
+              href="/docs/guides/vue"
+              className="p-4 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors"
+            >
+              <div className="font-semibold text-emerald-400 mb-1">Vue.js</div>
+              <div className="text-sm text-foreground/70">Integrate with Vue 3</div>
+            </Link>
+            <Link
+              href="/docs/getting-started/installation"
+              className="p-4 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors"
+            >
+              <div className="font-semibold text-emerald-400 mb-1">Core Setup</div>
+              <div className="text-sm text-foreground/70">Installation and configuration</div>
+            </Link>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Architecture Overview</h2>
+          <p className="text-foreground/80 mb-4">
+            Lumina is built on a client-server architecture that ensures security and performance:
+          </p>
+          <ul className="space-y-3 text-foreground/80 text-sm">
+            <li className="flex gap-3">
+              <span className="text-emerald-400 flex-shrink-0">▸</span>
+              <span>
+                <strong>Client SDK</strong> - Lightweight React components that handle UI and user interactions
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 flex-shrink-0">▸</span>
+              <span>
+                <strong>API Gateway</strong> - RESTful API for backend integration and advanced features
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 flex-shrink-0">▸</span>
+              <span>
+                <strong>Key Management Service</strong> - Secure key storage and signing infrastructure
+              </span>
+            </li>
+            <li className="flex gap-3">
+              <span className="text-emerald-400 flex-shrink-0">▸</span>
+              <span>
+                <strong>Network RPC Aggregator</strong> - Optimized communication with blockchain networks
+              </span>
+            </li>
+          </ul>
+        </div>
+
+        <Callout type="warning" title="Before You Start">
+          Make sure you have Node.js 16+ and npm/pnpm/yarn installed. You&apos;ll also need a Lumina API key - get one free by signing up at our <Link href="/dashboard" className="text-emerald-400 hover:underline">dashboard</Link>.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Next Steps</h2>
+          <p className="text-foreground/80 mb-4">
+            Ready to dive in? Here&apos;s the recommended path:
+          </p>
+          <ol className="space-y-3 text-foreground/80 text-sm list-decimal list-inside">
+            <li>
+              <Link href="/docs/getting-started/installation" className="text-emerald-400 hover:underline">
+                Install Lumina SDK
+              </Link>
+              {' '} - Add Lumina to your project
+            </li>
+            <li>
+              <Link href="/docs/getting-started/quick-start" className="text-emerald-400 hover:underline">
+                Complete the Quick Start
+              </Link>
+              {' '} - Build your first wallet integration in 5 minutes
+            </li>
+            <li>
+              <Link href="/docs/sdk/lumina-provider" className="text-emerald-400 hover:underline">
+                Learn the SDK Components
+              </Link>
+              {' '} - Understand the core building blocks
+            </li>
+            <li>
+              <Link href="/docs/guides/security" className="text-emerald-400 hover:underline">
+                Review Security Best Practices
+              </Link>
+              {' '} - Ensure your integration is secure
+            </li>
+          </ol>
+        </div>
+      </div>
+    </>
+  )
+}