Frontend

dataprism-frontend is the DataPrism Cloud web dashboard. Users manage data projects, storage, API keys, team members, and buy DPC tokens with a card (Stripe) or on-chain (USDC). Authentication is wallet-based.

Tech stack

• Framework: Next.js 16 (App Router) · React 19 · TypeScript 5
• Styling/UI: TailwindCSS 4, Radix UI, shadcn, Framer Motion, Lucide & HugeIcons
• Web3: wagmi 3, viem 2, MetaMask connector
• Data: TanStack React Query 5, next-themes, react-dropzone
• Payments: Stripe SDK

Project structure

dataprism-frontend/
├── app/
│   ├── api/
│   │   ├── relayer/      # /pending, /claim, /complete (consumed by the payment relayer)
│   │   ├── stripe/       # /checkout, /history, /subscription
│   │   └── exchange/     # /history (on-chain USDC→DPC swaps)
│   ├── (auth)/login, (auth)/register
│   ├── projects/[id]     # Project detail (6 tabs)
│   ├── tokens/           # Token dashboard + /payment checkout
│   ├── settings/
│   ├── layout.tsx, page.tsx, providers.tsx
├── components/           # UI + app components (sidebar, topbar, dashboards, sheets)
├── contexts/             # auth-context, projects-context
├── lib/                  # contracts.ts, chains.ts, wagmi.ts, key-storage.ts, …
└── public/

Features

Authentication

• /register: generates a private key (a "Prism Key") via viem, encrypts it with a password (encryptPrivateKey), and stores it in localStorage. The user can copy, show, or download it.
• /login: unlock a stored Prism Key with its password / import from file, or connect a browser wallet (MetaMask, Coinbase, WalletConnect, …).
• An AuthGuard component protects every page except /login and /register. Identity is the wallet address; private keys never leave the browser.

Projects

• Home (/): a dashboard of project cards (status, storage usage, token balance, members, API calls). The "New Project" sheet is a 4-step wizard, Identity (name / description), Encryption (curve + algorithm), Storage (DataPrism managed) and Deploy (DPC funding + review). It creates a real on-chain prism through the SDK: it derives the project key from a wallet signature, then creates and funds the prism in a single transaction via an EIP-2612 permit, no separate approve. (A "project" in the UI is a prism.)
• Project detail (/projects/[id]): six tabs: Overview, Storage (upload/list files), SDK, Storage access (managed storage status), Members (owner / writer / reader roles), and Tokens (balance + transaction history).

Tokens & payments

• /tokens: shows the on-chain DPC balance, network, and a unified payment history (card + crypto). Buy preset or custom token packs.
• /tokens/payment: two checkout paths:
  • Card (Stripe): redirects to Stripe Checkout; on success the Payment Relayer mints/transfers the DPC.
  • Crypto (on-chain): approve USDC → call Exchange.buyTokens(), or a single atomic batch on EIP-5792-capable wallets. 1% slippage protection; a testnet faucet mints 1,000 test USDC.

Settings

Profile, security (password / 2FA), notification preferences, and account deletion.

Backend & contract integration

lib/wagmi.ts targets Sepolia with Coinbase, WalletConnect (if NEXT_PUBLIC_WC_PROJECT_ID is set), and a custom private-key connector; storage key dataprism.store. Contract addresses (lib/contracts.ts):

The app/api/* routes back the dashboard: Stripe checkout/subscriptions, Stripe & on-chain payment history, and the relayer endpoints (/pending, /claim, /complete) consumed by the Payment Relayer.

Configuration

Install, run, deploy

npm install
npm run dev    # http://localhost:3000
npm run build
npm run start  # production server
npm run lint

Deploy to Vercel (recommended) or any Node host. Before going to production: set a live STRIPE_SECRET_KEY, a secure RELAYER_SECRET, and verify the contract addresses and network in lib/contracts.ts.