Add proper deposit desk: multi-coin, clear custody model, DepositWidget

- /account/add-funds: full rebuild as Deposit Desk
  - 3-step how-it-works explainer: you send crypto → we hold it →
    you shop with USD credit → we pay vendors with your crypto
  - Coin selector: BTC (auto-verify), ETH (manual review), XMR (manual review)
  - Each coin shows deposit address from env var with copy button
  - BTC: immediate on-chain verify via /api/btc/verify (mempool.space)
  - ETH/XMR: submit txhash to /api/pending-deposit for manual review
  - Pending deposit history stored in localStorage with status
  - Important notes block explaining custody, no-withdrawal, confirmations
  - Back-links to checkout, wallets, dashboard

- /api/pending-deposit: new route to log ETH/XMR manual review requests
  (logs to console, ready to wire to DB/webhook)

- DepositWidget component: reusable compact + full variants
  - compact: balance + "Deposit crypto →" CTA (used in checkout)
  - full: balance + how-it-works summary (used in dashboard)

- Dashboard: replace balance section with DepositWidget + stats
- Checkout: add compact DepositWidget above CheckoutFlow, fix back link
  from "Sanctuary" → "Market", update feature cards to be accurate

- .env.example: document all three coin address env vars + optional
  payment processor URL

- .env.example: add NEXT_PUBLIC_ETH_ADDRESS, NEXT_PUBLIC_XMR_ADDRESS

Made-with: Cursor
This commit is contained in:
drjones
2026-04-16 01:03:14 -07:00
parent 2f928fbdc4
commit 348e55b63e
5 changed files with 596 additions and 143 deletions

View File

@@ -1,6 +1,7 @@
import Navbar from "@/components/Navbar";
import ParticleBackground from "@/components/ParticleBackground";
import CheckoutFlow from "@/components/CheckoutFlow";
import DepositWidget from "@/components/DepositWidget";
import Link from "next/link";
export default function CheckoutPage() {
@@ -9,52 +10,68 @@ export default function CheckoutPage() {
<ParticleBackground />
<Navbar />
<main className="container mx-auto px-4 py-24">
<div className="mb-12 text-center">
<div className="mb-10 text-center">
<Link
href="/"
href="/market"
className="inline-flex items-center gap-2 text-neon-cyan hover:text-neon-purple"
>
Back to Sanctuary
Back to Market
</Link>
<h1 className="mt-6 font-orbitron text-5xl font-bold md:text-6xl">
CHECKOUT <span className="text-neon-cyan">RITUAL</span>
</h1>
<p className="mx-auto mt-4 max-w-2xl text-foreground/70">
Each step is designed to feel like a ceremonial unlocking. Your data is encrypted in realtime, and your payment is transformed into a visual experience.
Pay with your USD balance funded by Bitcoin deposit. Balance is credited after on-chain
verification. We hold your crypto and pay vendors on your behalf.
</p>
</div>
{/* Deposit reminder before CheckoutFlow */}
<div className="mx-auto mb-10 max-w-2xl">
<DepositWidget compact />
</div>
<CheckoutFlow />
<div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-3">
<div className="glass rounded-2xl border border-white/10 p-6">
<div className="mb-4 text-3xl"></div>
<h3 className="mb-2 font-bold">Bitcoin-funded USD</h3>
<p className="text-sm text-foreground/60">
Send BTC to your deposit address at <Link href="/account/add-funds" className="text-neon-cyan hover:underline">Add Funds</Link>.
After 1 confirmation we credit USD at live spot rate.
</p>
</div>
<div className="glass rounded-2xl border border-white/10 p-6">
<div className="mb-4 text-3xl">🔐</div>
<h3 className="mb-2 font-bold">EndtoEnd Encryption</h3>
<h3 className="mb-2 font-bold">Per-handle balance</h3>
<p className="text-sm text-foreground/60">
Your payment details never touch our servers. They are encrypted clientside before transmission.
USD credit is tied to your CyberLux handle same balance across hub, market, forum, and exchange.
Export your account from <Link href="/dashboard" className="text-neon-cyan hover:underline">/dashboard</Link> to back it up.
</p>
</div>
<div className="glass rounded-2xl border border-white/10 p-6">
<div className="mb-4 text-3xl"></div>
<h3 className="mb-2 font-bold">Instant Crypto Conversion</h3>
<div className="mb-4 text-3xl">🧾</div>
<h3 className="mb-2 font-bold">Vault receipt</h3>
<p className="text-sm text-foreground/60">
Realtime exchange rates ensure you pay the exact amount, with no hidden fees.
</p>
</div>
<div className="glass rounded-2xl border border-white/10 p-6">
<div className="mb-4 text-3xl">🎨</div>
<h3 className="mb-2 font-bold">Digital Art Receipt</h3>
<p className="text-sm text-foreground/60">
Each completed order generates a unique piece of generative art stored in your vault.
Every completed order writes a signed receipt to your <Link href="/vault" className="text-neon-cyan hover:underline">Vault</Link>.
LUX credits earned on each purchase.
</p>
</div>
</div>
</main>
<footer className="glass border-t border-white/10 px-4 py-8 text-center text-sm text-foreground/40">
<p>
Crypto checkout uses your <strong>USD balance</strong> after a Bitcoin payment is{" "}
<strong>verified on-chain</strong>. Configure your receiving address in{" "}
<code className="rounded bg-white/10 px-1">.env.local</code>. Guest/card paths are demo-only.
Payments use USD balance funded by verified on-chain Bitcoin deposits. Configure merchant
address in <code className="rounded bg-white/10 px-1">.env.local</code>.
ETH and XMR deposits go through manual review.
</p>
<div className="mt-3 flex justify-center gap-6 text-foreground/30">
<Link href="/account/add-funds" className="hover:text-neon-cyan">Add Funds</Link>
<Link href="/dashboard" className="hover:text-foreground/60">Dashboard</Link>
<Link href="/market" className="hover:text-foreground/60">Market</Link>
</div>
</footer>
</>
);
}
}