DigiDignity — AI × Blockchain Identity (Frontend)

Modern, production-ready React/Next.js frontend for DigiDignity.
Focus: secure identity UX with an AI × blockchain look, full mock flows end-to-end so the app runs without contracts or RPC secrets.

Stack

• Next.js 14 (App Router) + TypeScript
• Tailwind CSS (+ tailwindcss-animate)
• lucide-react icons
• wagmi v2 + viem (wallet ready; uses a safe fallback RPC)
• Minimal shadcn-style UI primitives (Button, Card, Input, Label)

Requirements

• Node >= 18.18
• pnpm (corepack enable && corepack prepare pnpm@latest --activate)

Quickstart

corepack enable
corepack prepare pnpm@latest --activate
pnpm install
cp .env.example .env.local          # optional – safe defaults included
pnpm dev
# open http://localhost:3000

Environment variables

The app runs with mocks; RPC is optional.

NEXT_PUBLIC_RPC_SEPOLIA=https://rpc.sepolia.org   # fallback provided in code

Scripts

• pnpm dev – start dev server
• pnpm build – production build
• pnpm start – run production server

Project structure

src/
  app/
    api/proof/route.ts         # mock verification endpoint (returns { ok: true })
    page.tsx                   # marketing/landing (AI × blockchain visuals)
    layout.tsx                 # fonts, providers, global nav
    dashboard/page.tsx         # hub + wallet connect
    register/page.tsx          # identity registration (mock)
    proofs/page.tsx            # selective disclosure (mock)
    verify/page.tsx            # verifier console (mock table)
    emergency/page.tsx         # emergency access (mock)
    cross-border/page.tsx      # portability hash (mock)
  components/
    nav/AppHeader.tsx
    proofs/SelectiveDisclosureForm.tsx
    ui/{button,card,input,label}.tsx
  lib/
    providers.ts               # wraps wagmi + react-query
    wagmi.tsx                  # wagmi config (injected connector, fallback RPC)
    utils.ts                   # cn()
styles/
  globals.css                  # glass/gradients
tailwind.config.ts
render.yaml                    # optional: Render deployment

Typed routes (Next.js)

This repo enables experimental.typedRoutes. If TS complains about Link hrefs, cast the literal to Route:

import type { Route } from "next";
<Link href={"/register" as Route}>Register</Link>

(We've already applied this in AppHeader and dashboard.)

Deployment (Render)

1. Push to GitHub.
2. In Render: New → Blueprint, pick the repo.

Build command:

corepack enable && corepack prepare pnpm@latest --activate && pnpm install && pnpm build

Start command: pnpm start

Add env var NEXT_PUBLIC_RPC_SEPOLIA (optional, defaults in code).

Wiring real contracts later

Replace mock endpoints/logic with real reads/writes using viem/wagmi.

Drop your ABIs into a shared package or src/lib/abis/* and wire addresses via env.

Troubleshooting

• Cannot find module 'class-variance-authority' → pnpm add class-variance-authority
• Cannot find module 'tailwindcss-animate' → pnpm add -D tailwindcss-animate
• Typed route errors in IDE → cast to Route and restart TypeScript Service (WebStorm) if needed.
• Wallet connect pending forever (in dev) → make sure a browser wallet is installed; otherwise the UI still works without connecting.