@jerydam/lumina-sdk 0.1.0

package/app/docs/page.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import Link from 'next/link'
+import { DocsSidebar } from '@/components/docs/docs-sidebar'
+import { Button } from '@/components/ui/button'
+import { ArrowRight, BookOpen, Code2, Rocket, Menu } from 'lucide-react'
+import { useState } from 'react'
+
+export default function DocsPage() {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-y-auto">
+
+        {/* Mobile Top Bar */}
+        <div className="sticky top-0 z-30 flex items-center gap-3 px-4 py-3 border-b border-white/10 bg-background/80 backdrop-blur-sm md:hidden">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-md hover:bg-white/10 transition text-foreground/70 hover:text-foreground"
+            aria-label="Open sidebar"
+          >
+            <Menu size={20} />
+          </button>
+          <span className="text-sm font-semibold text-foreground/80">Documentation</span>
+        </div>
+
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 py-10 sm:py-16">
+
+          {/* Header */}
+          <div className="space-y-4 mb-12 sm:mb-16">
+            <h1 className="text-4xl sm:text-5xl font-bold text-white">Documentation</h1>
+            <p className="text-lg sm:text-xl text-foreground/80">
+              Everything you need to build with Lumina embedded wallet infrastructure
+            </p>
+          </div>
+
+          {/* Quick Start Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12 sm:mb-16">
+            <Link
+              href="/docs/getting-started/introduction"
+              className="p-6 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors group"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <Rocket size={24} className="text-emerald-400" />
+                <ArrowRight size={16} className="text-foreground/30 group-hover:text-emerald-400 transition-colors" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">Getting Started</h3>
+              <p className="text-sm text-foreground/70">
+                Learn what Lumina is and how to get set up in minutes
+              </p>
+            </Link>
+
+            <Link
+              href="/docs/sdk/lumina-provider"
+              className="p-6 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors group"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <Code2 size={24} className="text-emerald-400" />
+                <ArrowRight size={16} className="text-foreground/30 group-hover:text-emerald-400 transition-colors" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">SDK Reference</h3>
+              <p className="text-sm text-foreground/70">
+                Comprehensive guide to all SDK components and APIs
+              </p>
+            </Link>
+
+            <Link
+              href="/docs/api/authentication"
+              className="p-6 rounded-lg border border-white/10 hover:border-emerald-600/50 hover:bg-emerald-600/5 transition-colors group"
+            >
+              <div className="flex items-start justify-between mb-3">
+                <BookOpen size={24} className="text-emerald-400" />
+                <ArrowRight size={16} className="text-foreground/30 group-hover:text-emerald-400 transition-colors" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">API Docs</h3>
+              <p className="text-sm text-foreground/70">
+                REST API endpoints and integration documentation
+              </p>
+            </Link>
+          </div>
+
+          {/* Documentation Sections */}
+          <div className="space-y-8">
+            <section>
+              <h2 className="text-2xl font-bold mb-4">Getting Started</h2>
+              <div className="space-y-2">
+                <Link href="/docs/getting-started/introduction" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Introduction</div>
+                  <div className="text-sm text-foreground/60">Learn what Lumina offers and its core features</div>
+                </Link>
+                <Link href="/docs/getting-started/installation" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Installation</div>
+                  <div className="text-sm text-foreground/60">Install Lumina SDK and configure your project</div>
+                </Link>
+                <Link href="/docs/getting-started/quick-start" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Quick Start</div>
+                  <div className="text-sm text-foreground/60">Build your first integration in 5 minutes</div>
+                </Link>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold mb-4">SDK Components</h2>
+              <div className="space-y-2">
+                <Link href="/docs/sdk/lumina-provider" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">LuminaProvider</div>
+                  <div className="text-sm text-foreground/60">Context provider for your entire application</div>
+                </Link>
+                <Link href="/docs/sdk/wallet-login" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">WalletLogin</div>
+                  <div className="text-sm text-foreground/60">Complete authentication component with multiple methods</div>
+                </Link>
+                <Link href="/docs/sdk/wallet-display" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">WalletDisplay</div>
+                  <div className="text-sm text-foreground/60">Show wallet balances, address, and transaction actions</div>
+                </Link>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold mb-4">Guides</h2>
+              <div className="space-y-2">
+                <Link href="/docs/guides/react" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">React Integration</div>
+                  <div className="text-sm text-foreground/60">Complete guide to using Lumina with React</div>
+                </Link>
+                <Link href="/docs/guides/nextjs" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Next.js Setup</div>
+                  <div className="text-sm text-foreground/60">Best practices for Next.js 13+ integration</div>
+                </Link>
+                <Link href="/docs/guides/security" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Security Best Practices</div>
+                  <div className="text-sm text-foreground/60">Protect your users and secure your application</div>
+                </Link>
+              </div>
+            </section>
+
+            <section>
+              <h2 className="text-2xl font-bold mb-4">Examples</h2>
+              <div className="space-y-2">
+                <Link href="/docs/examples/basic-setup" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Basic Setup</div>
+                  <div className="text-sm text-foreground/60">Complete minimal example with authentication and wallet display</div>
+                </Link>
+                <Link href="/docs/examples/authentication" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">User Authentication</div>
+                  <div className="text-sm text-foreground/60">Implement custom authentication flows</div>
+                </Link>
+                <Link href="/docs/examples/send-transaction" className="block p-3 rounded-lg hover:bg-white/5 transition-colors">
+                  <div className="font-semibold text-emerald-400 mb-1">Send Transaction</div>
+                  <div className="text-sm text-foreground/60">Enable users to send funds from your app</div>
+                </Link>
+              </div>
+            </section>
+          </div>
+
+          {/* Footer CTA */}
+          <div className="mt-16 p-6 sm:p-8 rounded-lg bg-emerald-600/10 border border-emerald-600/30">
+            <h3 className="text-xl font-bold mb-2">Need Help?</h3>
+            <p className="text-foreground/80 mb-4">
+              Check out our FAQ or reach out to our support team for assistance.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <Button asChild>
+                <Link href="/docs/troubleshooting/faq">View FAQ</Link>
+              </Button>
+              <Button asChild variant="outline">
+                <Link href="/docs/troubleshooting/support">Contact Support</Link>
+              </Button>
+            </div>
+          </div>
+
+        </div>
+      </main>
+    </div>
+  )
+}

package/app/docs/sdk/lumina-provider/page.tsx

@@ -0,0 +1,186 @@
+import { Breadcrumb } from '@/components/docs/breadcrumb'
+import { CodeBlock } from '@/components/docs/code-block'
+import { Callout } from '@/components/docs/callout'
+
+export const metadata = {
+  title: 'LuminaProvider - SDK Reference',
+  description: 'Configure and use the LuminaProvider component for Lumina SDK.',
+}
+
+export default function LuminaProviderPage() {
+  return (
+    <>
+      <Breadcrumb />
+
+      <div className="space-y-8">
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold text-white">LuminaProvider</h1>
+          <p className="text-lg text-foreground/80">
+            The root context provider for Lumina. Wrap your entire application with this component to enable all Lumina functionality.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Basic Usage</h2>
+          <CodeBlock
+            code={`import { LuminaProvider } from '@lumina/sdk'
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <LuminaProvider
+          apiKey={process.env.NEXT_PUBLIC_LUMINA_API_KEY}
+          network="mainnet"
+        >
+          {children}
+        </LuminaProvider>
+      </body>
+    </html>
+  )
+}`}
+            language="tsx"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Props</h2>
+          <div className="space-y-4">
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">apiKey</p>
+              <p className="text-sm text-foreground/80 mb-2">
+                <span className="text-red-400">Required</span> • <span className="text-blue-400">string</span>
+              </p>
+              <p className="text-sm text-foreground/80">
+                Your Lumina public API key. Get one from the dashboard.
+              </p>
+            </div>
+
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">network</p>
+              <p className="text-sm text-foreground/80 mb-2">
+                <span className="text-red-400">Required</span> • <span className="text-blue-400">'mainnet' | 'testnet'</span>
+              </p>
+              <p className="text-sm text-foreground/80">
+                The blockchain network to use. Use 'testnet' for development.
+              </p>
+            </div>
+
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">chains</p>
+              <p className="text-sm text-foreground/80 mb-2">
+                <span className="text-green-400">Optional</span> • <span className="text-blue-400">string[]</span>
+              </p>
+              <p className="text-sm text-foreground/80 mb-3">
+                Supported blockchain chains. Defaults to all available chains.
+              </p>
+              <CodeBlock
+                code={`<LuminaProvider
+  apiKey="pk_..."
+  network="mainnet"
+  chains={['ethereum', 'polygon', 'arbitrum']}
+>`}
+                language="tsx"
+              />
+            </div>
+
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">theme</p>
+              <p className="text-sm text-foreground/80 mb-2">
+                <span className="text-green-400">Optional</span> • <span className="text-blue-400">'light' | 'dark'</span>
+              </p>
+              <p className="text-sm text-foreground/80">
+                UI theme. Defaults to 'dark'.
+              </p>
+            </div>
+
+            <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+              <p className="font-semibold text-emerald-400 mb-2">onError</p>
+              <p className="text-sm text-foreground/80 mb-2">
+                <span className="text-green-400">Optional</span> • <span className="text-blue-400">(error: Error) =&gt; void</span>
+              </p>
+              <p className="text-sm text-foreground/80">
+                Callback when errors occur in the Lumina SDK.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Advanced Configuration</h2>
+          <CodeBlock
+            code={`<LuminaProvider
+  apiKey={process.env.NEXT_PUBLIC_LUMINA_API_KEY}
+  network="mainnet"
+  chains={['ethereum', 'polygon']}
+  theme="dark"
+  onError={(error) => {
+    console.error('Lumina error:', error)
+    // Send to error tracking service
+  }}
+>
+  {children}
+</LuminaProvider>`}
+            language="tsx"
+          />
+        </div>
+
+        <Callout type="info" title="Provider Location">
+          Always place LuminaProvider at the root of your application, wrapping all components that need access to Lumina functionality. In Next.js, this is typically in your <code className="bg-black/40 px-2 py-1 rounded text-xs">app/layout.tsx</code>.
+        </Callout>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Environment Variables</h2>
+          <CodeBlock
+            code={`# Public API Key (exposed to client)
+NEXT_PUBLIC_LUMINA_API_KEY=pk_test_xxxxx
+
+# Secret Key (server-only)
+LUMINA_SECRET_KEY=sk_test_xxxxx
+
+# Network
+NEXT_PUBLIC_LUMINA_NETWORK=testnet`}
+            language="env"
+            title=".env.local"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h2 className="text-2xl font-bold">Accessing Lumina Context</h2>
+          <p className="text-foreground/80 mb-4">
+            Use hooks to access Lumina functionality from any child component:
+          </p>
+          <CodeBlock
+            code={`'use client'
+
+import { useLumina } from '@lumina/sdk'
+
+export function MyComponent() {
+  const {
+    user,
+    isConnected,
+    network,
+    logout,
+  } = useLumina()
+
+  return (
+    <div>
+      {isConnected ? (
+        <p>Connected: {user?.email}</p>
+      ) : (
+        <p>Not connected</p>
+      )}
+    </div>
+  )
+}`}
+            language="tsx"
+          />
+        </div>
+
+        <Callout type="warning" title="Client Components Only">
+          The <code className="bg-black/40 px-2 py-1 rounded text-xs">useLumina</code> hook only works in client components. Mark components that use it with <code className="bg-black/40 px-2 py-1 rounded text-xs">'use client'</code>.
+        </Callout>
+      </div>
+    </>
+  )
+}