arch v1.0.0

Verifluence — Screen Inventory

Visual map of every implemented screen in the web application at app.verifluence.io. Derived from /frontend/src/pages/ and router config in main.tsx. Last updated: April 2026.

Route Map

/                          Landing page (public)
/campaigns                 Campaign browse (public/streamer)
/campaign/:id              Campaign detail (public/streamer)
/streamer-signup           Streamer registration
/signin2                   Sign in (email + PIN)
/s/:username               Streamer public profile
/streamers                 Streamer directory (operator only)
/trust-score               Trust score detail (streamer)
/entry                     Operator onboarding (invitation)
/auth/impersonate          Admin impersonation callback
/admin                     Admin redirect

/profile                   → redirect to /profile/dashboard
/profile/dashboard         Streamer dashboard home
/profile/personal          Streamer profile settings
/profile/wallet            Streamer wallet management
/profile/kyc               KYC document upload
/profile/applications      My applications list
/profile/campaigns         My active campaigns + submissions
/profile/streams           Stream session history

/operator                  → redirect to /operator/account
/operator/account          Operator account settings
/operator/wallet           Operator wallet + deposits
/operator/campaigns        Campaign builder + management
/operator/active           Active campaigns + application reviews

Public Screens

S-01 · Landing Page

Route: /File: pages/HomeLanding.tsxActor: Public

The marketing entry point for the platform.

Sections:

Hero — headline, subheadline, primary CTA ("I'm a Streamer — Get Started"), live campaign count badge
Trust strip — 4 feature pillars: Escrow-Protected Payments, Verified on Both Sides, Discovery Tools, Guaranteed Fund Recovery
How it works — two-tab flow switcher (Streamer Journey / Casino Operator), 4-step numbered flows per actor
Live Campaigns — grid of active campaign cards (CampaignCardPublic or CampaignCardVerified depending on auth state)
Footer — nav links, social links, support chat widget

S-02 · Campaign Browse

Route: /campaignsFile: pages/Home2.tsxActor: Public / Streamer (redirects to sign-in if action required)

Browse all public campaigns with filtering.

Sections:

Platform stats bar — total paid to streamers, active creators, verified operators, avg payment time
Filter pills — All · Beginner friendly · High budget · Closing soon
Sort controls — Featured · Highest budget · Newest
Campaign grid — CampaignCardPublic (unauthenticated) or CampaignCardVerified (authenticated streamer)
Trust strip — same 4 feature cards as landing page

Campaign card content: Operator avatar/initials, operator name, category badge, live indicator, campaign name, escrow secured badge, platforms, GEOs, language, duration + days remaining, spots remaining, budget pool, Apply button.

S-03 · Campaign Detail

Route: /campaign/:idFile: pages/CampaignDetail.tsxActor: Public / Streamer

Full campaign information page with application flow.

Sections:

Sticky nav — back button, Verifluence logo, Sign In / profile avatar CTA
Hero header — campaign name, status badge (Open / In Progress), category, platforms, operator name + avatar
Stats row — Total Budget Pool, Min Followers, Duration (days)
Tabbed content:
- Overview — full description, goal, category, start/end dates, timezone, language
- Requirements — platform badges, min followers, min avg viewers, monthly hours, schedule type + slots
- Reward — total budget pool, max payout per stream, payout type, how payouts work explainer
Right sidebar:
- If already applied: application status card (pending / approved / rejected / withdrawn) with timeline
- If not applied: Apply CTA card with start/end dates, quick requirement summary
- Campaign dates and quick requirements always visible

S-04 · Streamer Registration

Route: /streamer-signupFile: pages/StreamerSignup2.tsxActor: Public

Multi-step onboarding for new streamers.

Steps:

Basic info — username, email, country (dropdown), languages (multi-select)
Email verification — 4-digit PIN entry, resend option
Kick OAuth (optional) — "Connect Kick Account" button; OAuth popup; displays linked channel on success
Confirmation — success screen with next steps (complete profile, apply to campaigns)

Route: /signin2File: pages/SignIn2.tsxActor: Public

Passwordless email + PIN authentication. Used by both operators and streamers.

Sections:

Step 1 — email input, submit button, "Create account" link, Kick sign-in button (streamers only)
Step 2 — 4-digit PIN input (individual digit boxes), "Change email" link, "Resend code" button (with 60s cooldown)
Dev-mode shows PIN inline for testing

S-06 · Streamer Public Profile

Route: /s/:usernameFile: pages/StreamerPublicProfile.tsxActor: Public / Operator (richer view for operators)

Public-facing streamer profile page.

Sections:

Profile header — avatar (Kick profile image or initials), username, verified badge, live indicator, follower count, platform links
Trust Score — overall score gauge (0–100), 3-pillar breakdown (Channel Health, Platform Track Record, Social Presence), component scores per pillar
Channel stats — follower count, avg viewers, linked platform channels
Videos — recent VODs with thumbnail, title, platform, duration
Expandable bio — operator-facing bio text
Deal preferences — visible if deals_published = 1: deal types, CPA/RS rates, target GEOs

S-07 · Streamer Directory

Route: /streamersFile: pages/StreamersList.tsxActor: Operator (gated — redirects to /entry if not authenticated as operator)

Operator tool for discovering streamers.

Sections:

Sticky nav — Verifluence logo, back link, operator name, sign-out
Filter sidebar — Platform (Kick / Twitch checkboxes), Category (multi-select streaming categories)
Search bar — free-text search across username and categories
Streamer grid — cards showing: username, verified badge, Kick/Twitch follower counts, live indicator, platforms, streaming categories, deal preference tags, operator bio snippet, "View Profile" link

S-08 · Trust Score Detail

Route: /trust-scoreFile: pages/TrustScore.tsxActor: Streamer (authenticated)

Detailed breakdown of the streamer's platform trust score. Built with SiteNav + Flowbite native components + semantic Tailwind v4 tokens.

Three states (driven by state field from /api/streamers/:username/score-builder):

State	Condition	UI
1	No Kick channel connected	`NoChannelCard` — connect prompt, step checklist
2	Channel connected, steps in progress	Score gauge + potential score + pillar cards
3	All steps complete	Score gauge only (no potential score bar)

Sections (states 2 & 3):

SiteNav — shared public top nav with back link to /profile
Overall score — large SVG gauge, score out of 100, label (e.g. "Good"), potential score banner (state 2 only)
Quick wins checklist — "Connect Kick", "Complete KYC", "First deal" step items with done/pending badges
Pillar cards (3):
- Channel Health (50%) — stream frequency, avg viewers, chat engagement, viewer/follower ratio, channel age
- Platform Track Record (30%) — KYC verified, completed deals, operator rating (coming soon)
- Social Presence (20%) — Twitter/X, YouTube, TikTok (all coming soon)
- Each card: pillar weighted score, per-component score bars, "Coming soon" for unimplemented components

API endpoint: GET /api/streamers/:username/score-builder

S-09 · Operator Entry / Onboarding

Route: /entry?invitation=CODEFile: pages/Entry.tsxActor: New operator (with valid invitation code)

First-time registration for operators.

Sections:

Invitation validation state (loading / valid / invalid / used)
Form — display name input, contact email (pre-filled from invitation, read-only), auto-generated slug preview
Consent checkbox — T&C and non-custodial escrow acknowledgement
Submit button → redirects to /operator/account on success

Streamer Dashboard Screens

All screens share the ProfileLayout sidebar navigation.

Sidebar nav items: Dashboard · Personal · Wallet · KYC · My Applications · My Campaigns · Streams

S-10 · Streamer Dashboard Home

Route: /profile/dashboardFile: pages/streamer/DashboardPage.tsx

Overview of streamer activity and earnings.

Sections:

Profile header — avatar, username, KYC status badge, trust score badge, account status
Summary tiles (4):
- Total Earned — sum of all payout_records.amount_usdc
- This Month — earnings in current calendar month
- In Escrow — sum of approved allocations not yet confirmed
- Pending — count of pending_review submissions
Activity feed — chronological list of application events (applied, approved, completed, rejected, refunded, withdrawn) with campaign name, operator, date
Monthly stats row — applications submitted, approvals received, total earned, potential earnings

S-11 · Streamer Personal Settings

Route: /profile/personalFile: pages/streamer/PersonalPage.tsx

Edit personal info and streaming preferences.

Sections:

Profile Settings card — username (read-only), email, country, streaming languages
Streamer Bio card — operator-facing bio text editor, streaming categories multi-select, deal types, target GEOs, CPA/RS rate fields
Visibility toggles — profile_published, deals_published
Channel list — connected Kick / Twitch channels with sync status, last synced time, follower count

S-12 · Streamer Wallet Management

Route: /profile/walletFile: pages/streamer/WalletPage.tsx

Manage EVM wallet addresses for receiving payouts.

Sections:

Connection status bar — MetaMask connected address or "Connect" button
Saved wallets list — each row: address (truncated), optional label, verified badge, remove button
Add wallet form — MetaMask signature flow to add new address with optional label
Payout note — explanation of how wallets are used in HTLC payouts

S-13 · KYC Document Upload

Route: /profile/kycFile: pages/streamer/KycPage.tsx

Submit identity verification documents.

Sections:

KYC status banner — current status (not_started / pending / approved / rejected) with icon and colour coding
Due date warning — amber banner if kyc_due_date is approaching
Rejection reason — shown if status = rejected, with admin note
Upload panels (2):
- Identity Document — JPEG/PNG, max 5MB, expiry date field
- Proof of Address — same constraints
Uploaded documents list — file name, type, upload date, delete button
Accepted formats and size limit noted under each upload zone

S-14 · My Applications

Route: /profile/applicationsFile: pages/streamer/ApplicationsPage.tsx

Full history of all campaign applications.

Sections:

Application list — one card per application:
- Campaign name, operator, status badge, dates, budget cap
- Allocation amount (if approved)
- Confirmed amount (from payout_records)
- Submission count / slot count
Application detail expand — per-slot submission status, payout records with tx_hash links, allocation stepper
Status filter tabs (All / Pending / Approved / Completed / Rejected / Withdrawn / Refunded)

S-15 · My Active Campaigns

Route: /profile/campaignsFile: pages/streamer/CampaignsPage.tsx

Submit stream proof for approved campaign slots.

Sections:

Approved campaign list — cards for each approved application
Allocation stepper — visual progress of slots (done → active → warn → pending)
Slot submission panel (per slot):
- Stream URL input
- Tracked Kick session dropdown (sessions fetched for the streamer's channel)
- Submit button (requires URL currently — F-4 known gap)
- Submitted state shows status + reviewed_at
Payout confirmation — confirmed slots show amount and tx_hash if available

S-16 · Stream Sessions

Route: /profile/streamsFile: pages/streamer/StreamsPage.tsx

Platform-captured stream history from Kick.

Sections:

Monthly summary — total streams, total hours, avg viewers this month
Sessions table — per session: date, duration, avg viewers, avg chatters, peak viewers, live indicator
Channel info — linked Kick channel name and URL
Data is read-only (platform-captured via webhook + viewer poll, not editable)

Operator Dashboard Screens

All screens share the OperatorLayout sidebar navigation.

Sidebar nav items: Account · Wallet · Campaigns · Active Campaigns

S-17 · Operator Account

Route: /operator/accountFile: pages/operator/AccountPage.tsx

Manage operator organisation details.

Sections:

Organisation Details form — display name, contact email
Account info — slug (read-only), status badge (prepared / published / hidden)
Save button — issues PUT /api/operators/:slug

S-18 · Operator Wallet

Route: /operator/walletFile: pages/operator/WalletPage.tsx

Manage wallets and monitor on-chain escrow deposits.

Sections:

Wallet connection — MetaMask connect / status
Connected wallets — address list with remove option
Deposit explorer — fetches on-chain deposit data per wallet:
- Deposit ID, token (symbol + address), total deposited amount, allocated amount, remaining balance
- Timelock expiry per deposit
- Refund button for expired timelocks with unallocated funds

S-19 · Campaign Builder & Management

Route: /operator/campaignsFile: pages/operator/CampaignsPage.tsx

Create, edit, and monitor campaigns.

Left panel — campaign list:

One row per campaign: name, category + platforms, dates, settings version badge
Status badge (Draft / Funded / In Progress / Completed / Cancelled)
FundDonut chart (36px) showing Rewarded / Escrowed / Refunded / Unallocated segments (hidden for Draft)
Budget amount

Right panel — campaign detail / form:

Detail view (existing campaign):

Name, settings version
Status badge, description
Detail grid: Category, Goal, Start/End dates, Budget, Payout type, Max per stream, Language, Min followers/viewers, Payout model, GEOs, Spots, Apply by, Contract
FundDonut (72px) with legend showing exact amounts per segment
Platform badges
Brief summary, deliverables, brand dos/don'ts, escrow ID
FundCampaignPanel — escrow deposit flow (visible when status = prepared and no escrow_id)
Edit and Remove buttons (status = prepared only)

Create / Edit form:

Multi-section form with collapsible FocusField inputs:
- Campaign Identity: name, category, description
- Schedule: start/end dates, timezone, schedule type, time slots
- Budget & Payout: budget cap, payout type, max per stream, payout model, brackets, CPA/RS rates
- Requirements: min followers, viewers, monthly hours, platforms, GEOs, language
- Campaign Brief: spots, schedule note, apply by, brief summary, deliverables, brand dos/don'ts
- Contract: contract length, termination clause, payment preference
Budget constraint helper (shows estimated per-slot breakdown)
Submit / Update button

S-20 · Active Campaigns — Applications & Payouts

Route: /operator/activeFile: pages/operator/ActivePage.tsx → components/ActiveCampaigns.tsx

Manage live deals: review applications, allocate funds, confirm deliveries.

Sections:

Campaign selector list — funded and in-progress campaigns:
- Campaign name, status badge, FundDonut (32px), category, budget, dates
- Expandable accordion per campaign
Application pipeline (per campaign):
- Pending applications: streamer username, country, wallet address, message, Accept / Reject buttons
- Approved applications: allocation info, slot statuses
Allocation panel (on approve):
- Slot template picker (Single session / 1 week daily / 1 week + bonus / Custom)
- Per-slot amount inputs with total display
- Timelock duration selector (1h / 6h / 24h / 7d / 30d)
- MetaMask allocate() call + confirmation
Submission review list (per approved application):
- Slot index, submission date, stream URL, notes
- Status badge (pending_review / confirmed / rejected)
- Confirm / Reject buttons
- Preimage banner — reveals HTLC preimage for confirmed slots so operator can share with streamer

Auth & Admin Screens

S-21 · Admin Impersonation Callback

Route: /auth/impersonate?token=UUIDFile: pages/AuthImpersonate.tsxActor: Admin

Single-use token callback for admin-to-streamer/operator session takeover.

States:

Loading — validating token
Error — token invalid, expired, or already used
Success — auto-redirects to /profile (streamer) or /operator (operator)
Impersonation banner — persistent bottom bar visible on all pages for the session duration: "You are viewing as [username]"

S-22 · Admin Redirect

Route: /adminFile: pages/AdminPage.tsxActor: Admin (gated by allowed wallet address list)

States:

Not connected — prompt to connect wallet
Connected, not admin — "Access denied" message
Connected, admin — redirect to admin.verifluence.io

Shared UI Patterns

Design tokens

All colours come from the semantic token system — never hardcoded hex values. See Design Tokens for the full reference.

Import the typed T object:

import { T } from "../../theme/tokens";

For Tailwind utility classes, use CSS custom property syntax:

tsx

<p className="text-(--color-body) bg-(--color-neutral-secondary)">…</p>

Light / dark mode is handled automatically by html.dark class — no per-component overrides needed.

Recurring components

Component	Used in
`FundDonut`	S-19 (36px + 72px), S-20 (32px)
`FundCampaignPanel`	S-19 — on-chain deposit flow
`CampaignCardPublic`	S-01, S-02 (unauthenticated)
`CampaignCardVerified`	S-01, S-02 (authenticated streamer)
`WalletButton`	Operator screens — MetaMask connect
`SiteNav`	S-02, S-03 — public top nav
Status badges	All screens — `prepared`→Draft, `funded`→Funded, `in_progress`→In Progress
4-digit PIN input	S-04 step 2, S-05 step 2

Auth gates

Route pattern	Guard
`/profile/*`	Redirects to `/signin2` if no streamer session
`/operator/*`	Redirects to `/entry` if no operator session
`/streamers`	Redirects to `/entry` if no operator session
`/trust-score`	Requires authenticated streamer
`/admin`	Requires connected wallet matching admin allowlist

Verifluence — Screen Inventory ​

Route Map ​

Public Screens ​

S-01 · Landing Page ​

S-02 · Campaign Browse ​

S-03 · Campaign Detail ​

S-04 · Streamer Registration ​

S-05 · Sign In ​

S-06 · Streamer Public Profile ​

S-07 · Streamer Directory ​

S-08 · Trust Score Detail ​

S-09 · Operator Entry / Onboarding ​

Streamer Dashboard Screens ​

S-10 · Streamer Dashboard Home ​

S-11 · Streamer Personal Settings ​

S-12 · Streamer Wallet Management ​

S-13 · KYC Document Upload ​

S-14 · My Applications ​

S-15 · My Active Campaigns ​

S-16 · Stream Sessions ​

Operator Dashboard Screens ​

S-17 · Operator Account ​

S-18 · Operator Wallet ​

S-19 · Campaign Builder & Management ​

S-20 · Active Campaigns — Applications & Payouts ​

Auth & Admin Screens ​

S-21 · Admin Impersonation Callback ​

S-22 · Admin Redirect ​

Shared UI Patterns ​

Design tokens ​

Recurring components ​

Auth gates ​

Verifluence — Screen Inventory

Route Map

Public Screens

S-01 · Landing Page

S-02 · Campaign Browse

S-03 · Campaign Detail

S-04 · Streamer Registration

S-05 · Sign In

S-06 · Streamer Public Profile

S-07 · Streamer Directory

S-08 · Trust Score Detail

S-09 · Operator Entry / Onboarding

Streamer Dashboard Screens

S-10 · Streamer Dashboard Home

S-11 · Streamer Personal Settings

S-12 · Streamer Wallet Management

S-13 · KYC Document Upload

S-14 · My Applications

S-15 · My Active Campaigns

S-16 · Stream Sessions

Operator Dashboard Screens

S-17 · Operator Account

S-18 · Operator Wallet

S-19 · Campaign Builder & Management

S-20 · Active Campaigns — Applications & Payouts

Auth & Admin Screens

S-21 · Admin Impersonation Callback

S-22 · Admin Redirect

Shared UI Patterns

Design tokens

Recurring components

Auth gates