A high-fidelity, interactive wireframe of a self-sovereign digital credential wallet, designed for the Digital Credentials Consortium (DCC). It maps the full holder and institution experience — dashboard, import, sharing, verification, skills, and an admin portal — as clickable screens and flows.
This is a front-end prototype, not a production system. There is no backend and no real cryptography: every credential, chart, and event is mock data held in the browser. Its purpose is to explore and validate the product's UX, layout, and interaction design.
Live preview: https://walletpoc.one-ai.us
- Dashboard — credential list with search, sort, filter, and tabs (All / Active / Favorites / Expired / Discover)
- Credential import — paste-JSON, file-upload, and QR-scan UI with mocked validation states
- Credential detail — trust-status checklist, share menu, typed-confirm delete
- JSON-LD source view — raw payload view
- Multi-profile wallet — Work / Education / Personal, each with its own view and skills radar
- Skills — pentagon radar across five categories (Technical, Data/AI, Cloud, Leadership, Domain), derived from credential tags
- Analytics — monthly charts for credential growth, verification, and share activity
- Activity timeline — wallet event log
- Bundles — group multiple credentials into a single share link
- Share — time-bound link and QR UI with instant revoke
- Verify — public verifier screen (no login)
- Marketplace — issuer / network connection screens (LinkedIn, GitHub, Coursera, AWS, …)
- Notifications — in-app alert centre
- Backup & restore — UniversalWallet2020 export UI (Google Drive / Dropbox)
- Separate
/admin/loginwith dark/light toggle (WCAG AA) - Dashboard, analytics, templates, governance, branding, white-label, plugins, institution profile, settings
| Layer | Choice |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript 5 (strict) |
| Styling | Tailwind CSS v4 + CSS custom properties |
| Animation | Framer Motion |
| State | Zustand (persisted to localStorage) |
| Forms | react-hook-form + zod |
| Charts | hand-built SVG (radar, sparklines) |
| QR | qrcode |
| Data | mock fixtures (src/lib/mock-data.ts) — no backend |
| Deployment | one-ai.us |
npm install
npm run devOpen http://localhost:3000. No environment variables or services are required — the prototype runs entirely in the browser on mock data.
This wireframe demonstrates interface and flow, not production behavior:
- No backend or database — state lives in the browser (Zustand +
localStorage) and resets when cleared. - No real cryptography or trust enforcement — signatures, DIDs, and revocation are represented in the UI but not verified.
- Mock data only — credentials, analytics, and activity are fixtures for demonstration.
For the functional reference implementation (real API, client-side encryption, and genuine verification), see the separate DIPS / WebWallet project.
src/
app/ — App Router screens (holder wallet + /admin portal)
components/ — sidebars, credential cards, skills radar, modals, UI primitives
lib/
mock-data.ts — demo credentials & fixtures
skills-utils.ts — skills extraction + radar computation
verify-engine.ts — client-side verification preview
gdrive/ · dropbox/ — backup UI clients
store/ — Zustand stores (credentials, profile, bundles, skills, …)
types/ — W3C VC + app types
Built by OneOrigin in partnership with the Digital Credentials Consortium (DCC).