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:
@@ -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 real‑time, 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">End‑to‑End 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 client‑side 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">
|
||||
Real‑time 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user