Frontend Overview
The Verifluence frontend is a React + TypeScript SPA built with Vite, styled with Tailwind CSS v4, and componentised with Flowbite React.
Tech Stack
| Technology | Version | Purpose |
|---|---|---|
| React | 19 | UI framework |
| TypeScript | ~5.9 | Type safety |
| Vite | 7 | Build tool and dev server |
| Tailwind CSS | v4 | Utility-first styling (@import "tailwindcss") |
| Flowbite React | ^0.12 | Component library (Button, Badge, Alert, Spinner, Table, Modal, …) |
| flowbite-react-icons | ^1.3 | Icon set (imported directly, e.g. ArrowRight, CheckCircle) |
| React Router | v7 | Client-side routing (nested layout routes) |
| ethers.js | — | Blockchain interaction (MetaMask wallet) |
Monorepo layout
frontend/ main React app
apps/storybook/ isolated Storybook 8 workspace (MSW, mock auth)Page Structure
Routes are split into three layout groups:
Public / auth routes
| Route | File | Who sees it |
|---|---|---|
/ | pages/HomeLanding.tsx | Everyone |
/campaigns | pages/Home2.tsx | Everyone |
/campaign/:id | pages/CampaignDetail.tsx | Everyone |
/streamer-signup | pages/StreamerSignup2.tsx | New streamers |
/signin2 | pages/SignIn.tsx | Everyone |
/s/:username | pages/StreamerPublicProfile.tsx | Everyone |
/streamers | pages/StreamersList.tsx | Operators |
/trust-score | pages/TrustScore.tsx | Authenticated streamers |
/entry | pages/Entry.tsx | Invited operators |
/auth/impersonate | pages/AuthImpersonate.tsx | Admin |
/admin | pages/AdminPage.tsx | Admin |
Streamer dashboard — ProfileLayout
Sidebar nav: Dashboard · Personal · Wallet · KYC · Applications · Campaigns · Streams
| Route | File |
|---|---|
/profile/dashboard | pages/streamer/DashboardPage.tsx |
/profile/personal | pages/streamer/PersonalPage.tsx |
/profile/wallet | pages/streamer/WalletPage.tsx |
/profile/kyc | pages/streamer/KycPage.tsx |
/profile/applications | pages/streamer/ApplicationsPage.tsx |
/profile/campaigns | pages/streamer/CampaignsPage.tsx |
/profile/streams | pages/streamer/StreamsPage.tsx |
/profile/offers | pages/streamer/OffersPage.tsx |
/profile/negotiations | pages/streamer/NegotiationsPage.tsx |
/profile/deals | pages/streamer/DealsPage.tsx |
Operator dashboard — OperatorLayout
Sidebar nav: Account · Wallet · Campaigns · Active · Offers · Negotiations · Deals
| Route | File |
|---|---|
/operator/account | pages/operator/AccountPage.tsx |
/operator/wallet | pages/operator/WalletPage.tsx |
/operator/campaigns | pages/operator/CampaignsPage.tsx |
/operator/active | pages/operator/ActivePage.tsx |
/operator/offers | pages/operator/OffersPage.tsx |
/operator/negotiations | pages/operator/NegotiationsPage.tsx |
/operator/deals | pages/operator/DealsPage.tsx |
Key Components
| Component | Purpose |
|---|---|
SiteNav | Public top nav — handles auth state, sign-out, mobile menu |
AppFooter | Site footer |
CampaignCardPublic | Campaign card for unauthenticated / public views |
CampaignCardVerified | Campaign card for authenticated streamers with apply state |
StatusBadge | Reusable status pill (type="campaign" or "deal" etc.) |
FundDonut | Donut chart — rewarded / escrowed / refunded / unallocated |
FundCampaignPanel | On-chain escrow deposit flow |
InviteCampaignModal | Operator modal to invite a streamer to a campaign |
NegTermEditor | Negotiation terms editor (5-field bilateral form) |
StreamerAvatar | Avatar with Kick image / initials fallback |
Context Providers
| Context | Purpose |
|---|---|
AuthContext | Authentication state, sign-in/out, impersonation bridge |
NetworkContext | EVM network config from .env (chain, RPC, tokens, explorer) |
Styling conventions
All colours come from the token system — never hardcode hex values.
ts
import { T } from "../theme/tokens"; // pages/
import { T } from "../../theme/tokens"; // pages/operator/, components/, etc.Tailwind v4 semantic classes use CSS custom property syntax:
tsx
<p className="text-(--color-body)">…</p>
<div className="bg-(--color-brand-soft) border-(--color-brand-subtle)">…</div>See Design Tokens for the full token reference.