STREAK — Technical & Design Specification A Trustless Commitment Contract Platform on NEAR

Version: 1.0 Date: February 27, 2026 Company: MontaQ Labs Product Type: Mobile-first PWA (Progressive Web App)

---

Current implementation (March 2026)

• App: streak-app/ — Next.js 16 PWA, NEAR Wallet Selector (modal-ui), black/lime design.
• Contract: v1.1.0 — single monthly pool (28 days), anyone can start_pool / distribute, daily check-in with 25h grace, mid-pool join with scaled rewards, optional on-chain goal when joining, 20% protocol fee.
• Testnet contract: streak-v2b-1772382282.testnet — see streak-app/README.md for setup and streak-app/contract/AUDIT.md for the security audit.
• Deployed app (e.g. Vercel): Uses an in-app RPC proxy (/api/near-rpc) so the browser does not hit NEAR RPC directly (avoids CORS). See streak-app README “Deployment and CORS”.

---

Executive Summary Streak is a blockchain-based commitment platform where users stake crypto on personal goals (fitness, habits, productivity). Smart contracts enforce accountability — succeed and reclaim your stake plus share of losers' pool, fail and forfeit to winners. NEAR Intents enables payment in any token from any chain (SOL, ETH, BTC, USDC, etc.) while settlement happens on NEAR.

Core Value Prop: Financial skin in the game + social accountability = the most effective behavior change tool ever built.

Business Model: 20% of all forfeited stakes flows to protocol. Zero servers after deployment. Pure smart contract revenue.

Product Architecture Tech Stack text Frontend Layer: ├─ Next.js 15 (App Router, React 19) ├─ TypeScript (type safety) ├─ Tailwind CSS (utility-first styling) ├─ Framer Motion (animations) ├─ PWA manifest + service worker (offline support, install prompt) └─ Vercel deployment (edge functions)

Wallet Integration: ├─ NEAR Wallet Selector (social login + web wallets) ├─ WalletConnect v2 (multi-chain support) └─ NEAR Intents SDK (cross-chain token routing)

Smart Contract: ├─ Rust (near-sdk-rs v5) ├─ Deployed on NEAR Protocol ├─ Audited by MontaQ internal security team └─ Upgradeable proxy pattern (security patches)

Backend Services (minimal): ├─ Cloudflare Workers (API layer for intent routing) ├─ Supabase (user profiles, goal templates, social feed) └─ NEAR RPC (chain queries)

Analytics & Monitoring: ├─ PostHog (privacy-first product analytics) ├─ Sentry (error tracking) └─ NEAR Indexer (on-chain event monitoring) Why PWA instead of native:

Single codebase for iOS, Android, desktop, web [web:676][web:681]

Instant updates (no app store review delay)

Zero install friction (add to homescreen = installed)

Lower maintenance cost

NEAR Intents works identically across all platforms

Why Next.js:

Built-in PWA support via next-pwa [web:681][web:682]

Server-side rendering improves initial load time (critical for mobile) [web:681]

Edge API routes for intent settlement

Industry standard for high-performance React apps [web:678]

Smart Contract Design Core Contract: streak.near State Structure:

rust pub struct Commitment { user: AccountId, goal_text: String, stake_amount: Balance, stake_token: TokenId, // e.g., "NEAR", "SOL", "USDC" original_chain: ChainId, // for NEAR Intents payout routing verifier: AccountId, start_date: Timestamp, duration_days: u32, check_ins: Vec, status: CommitmentStatus, // Active | Completed | Failed pool_id: PoolId, // which shared pool this joins }

pub struct Pool { goal_category: String, // "fitness", "diet", "productivity" total_staked: Balance, participants: Vec, start_date: Timestamp, end_date: Timestamp, privacy: PoolPrivacy, // Public | Confidential (uses NEAR Confidential Intents) } Key Methods:

commit(goal, stake, token, duration, verifier, pool_id)

User creates a commitment and stakes tokens

NEAR Intents handles cross-chain deposit

Joins specified pool or creates new one

Emits CommitmentCreated event

check_in()

User confirms daily/weekly progress

Updates check_ins array

Verifier can override if user lies (slashing mechanism)

Emits CheckInRecorded event

verify(commitment_id, approved: bool)

Verifier approves or rejects check-in

If rejected, commitment fails immediately

Verifier stake at risk for false rejections (accountability)

settle(commitment_id)

Called after duration ends

Success: returns stake + proportional share of pool's forfeited funds

Failure: 80% to winners pool, 20% to protocol treasury

Payouts routed via NEAR Intents to original chain [web:656][web:659]

withdraw_winnings()

Winners claim their share manually (push payment anti-pattern avoided)

Gas-efficient batch withdrawals

Security Features:

Reentrancy guards on all fund transfers

Rate limiting on commitment creation (anti-spam)

Emergency pause mechanism (multisig controlled)

Verifier staking (verifiers must stake 10% of commitment value to verify)

NEAR Intents Integration How Multi-Chain Works:

text User Flow (Solana Example):

1. User connects Phantom wallet on streak.app
2. Clicks "Commit 0.5 SOL to 30-day streak"
3. Frontend generates NEAR Intent: { "from_chain": "solana", "from_token": "SOL", "from_amount": "0.5", "to_chain": "near", "to_contract": "streak.near", "to_method": "commit", "to_args": { goal: "...", duration: 30, ... } }
4. NEAR Intents solver picks up intent
5. SOL converted → deposited to streak.near contract
6. Commitment is live on NEAR
7. On success: payout routed back to Solana as SOL Supported Chains via NEAR Intents: Bitcoin, Ethereum, Solana, Polygon, Arbitrum, Base, TRON, Cardano, Dogecoin, Avalanche, BNB Chain, and 25+ more [web:654][web:656]

Privacy Option: Confidential Intents (launched Feb 25, 2026) allow hidden stake amounts — nobody on-chain sees you bet $500 on your diet [web:657].

Integration Library: SwapKit NEAR Intents SDK [web:666] — TypeScript-first, handles routing/settlement automatically.

Design System Design Philosophy Gen Z aesthetic meets financial seriousness. High contrast, bold typography, hyper-saturated accent colors [web:669][web:670]. No pastels. No corporate blue. This is money on the line — the design should feel that way.

Inspiration:

Robinhood (bold CTAs, gamified progress)

Duolingo (streak anxiety, loss aversion)

Cash App (personality + trust)

Core Principles:

Brutally honest feedback — if you're failing, the UI tells you

Progress obsession — every screen shows your streak count prominently

Social pressure — see who else is succeeding/failing

Mobile-first — 90% of usage will be on mobile

Dark mode default — reduces eye strain, increases perceived value [web:669]

Color Palette Primary Colors:

Role Name HEX RGB Usage Background True Black #000000 0, 0, 0 App background Surface Obsidian #0F0F0F 15, 15, 15 Cards, modals Surface Elevated Charcoal #1A1A1A 26, 26, 26 Raised elements Accent Primary Electric Lime #CCFF00 204, 255, 0 CTAs, success states, active streaks Accent Danger Neon Red #FF0055 255, 0, 85 Failure warnings, forfeit UI Accent Info Cyan Glow #00F0FF 0, 240, 255 Neutral actions, info badges Why these specific colors:

Electric Lime — hyper-saturated, Gen Z-coded, screams "energy and progress" [web:669][web:670]

Neon Red — aggressive, impossible to ignore, triggers loss aversion

True Black — high contrast with neon accents, modern, premium feel [web:669]

Text Colors:

Role HEX Usage Primary Text #FFFFFF Headlines, key data Secondary Text #A0A0A0 Body text, metadata Tertiary Text #606060 Timestamps, hints Error Text #FF0055 Warnings, failure messages Success Text #CCFF00 Completion messages Status Colors:

State Color HEX Usage Active Streak Electric Lime #CCFF00 Currently on track At Risk Neon Orange #FF6B00 Missed 1 check-in, grace period Failed Neon Red #FF0055 Commitment broken Completed Cyan Glow #00F0FF Streak finished successfully Pending Slate Gray #4A4A4A Awaiting verifier approval Gradients (use sparingly):

css /* Hero gradient (main CTA button) */ .gradient-primary { background: linear-gradient(135deg, #CCFF00 0%, #00F0FF 100%); }

/* Danger gradient (forfeit warning) */ .gradient-danger { background: linear-gradient(135deg, #FF0055 0%, #FF6B00 100%); }

/* Success shimmer (streak milestone reached) */ .gradient-success { background: linear-gradient(90deg, #CCFF00 0%, #FFFFFF 50%, #CCFF00 100% ); background-size: 200% auto; animation: shimmer 2s linear infinite; } Typography Primary Font: Satoshi (Variable) Modern, geometric, high x-height (better mobile readability), Gen Z-friendly [web:670][web:672]. Fallback: Inter, system-ui

Monospace Font: JetBrains Mono For wallet addresses, transaction hashes, countdown timers.

Type Scale:

Style Font Size (Mobile) Weight Line Height Usage Display Satoshi 40px 900 Black 1.1 Streak count (hero number) Heading 1 Satoshi 28px 700 Bold 1.2 Screen titles Heading 2 Satoshi 22px 700 Bold 1.3 Section headers Heading 3 Satoshi 18px 600 SemiBold 1.3 Card titles Body Large Satoshi 16px 500 Medium 1.5 Goal descriptions Body Satoshi 14px 400 Regular 1.5 Standard text Caption Satoshi 12px 500 Medium 1.4 Metadata, badges Label Satoshi 11px 600 SemiBold 1.3 Button labels (uppercase) Mono JetBrains Mono 13px 400 Regular 1.4 Addresses, hashes Desktop adjustments: Scale up by 1.2x for screens >768px width.

Responsive font sizing:

css /* Using clamp for fluid typography */ h1 { font-size: clamp(28px, 5vw, 40px); } body { font-size: clamp(14px, 2vw, 16px); } Spacing & Layout Base Unit: 4px (everything is a multiple of 4)

Spacing Scale:

text 4px — micro (icon gaps) 8px — xs (tight padding) 12px — sm (compact elements) 16px — base (standard padding) 24px — md (section spacing) 32px — lg (card margins) 48px — xl (screen top padding) 64px — 2xl (hero section) Layout Grid:

Mobile: 16px side gutters, 8px column gap

Tablet/Desktop: 24px side gutters, 16px column gap

Max content width: 640px (single-column focus)

Safe Areas:

iOS: respect env(safe-area-inset-*) for notch/home bar

Android: handle gesture navigation bar spacing

Component Design

1. Main CTA Button text Style: Filled gradient with slight 3D lift Background: gradient-primary (#CCFF00 → #00F0FF) Text: #000000 (black for max contrast) Satoshi 700 Bold 16px uppercase Height: 56px (thumb-friendly) Border radius: 12px Shadow: 0 4px 12px rgba(204, 255, 0, 0.4) Hover/Press: scale(0.98) + brightness(1.1)

Example: ┌────────────────────────────────────┐ │ START YOUR STREAK │ ← Electric lime → cyan gradient └────────────────────────────────────┘ 2. Secondary Button text Style: Outlined ghost button Background: transparent Border: 2px solid #CCFF00 Text: #CCFF00 Satoshi 600 SemiBold 16px uppercase Height: 56px Border radius: 12px Hover: background #CCFF00 10% opacity

Example: ┌────────────────────────────────────┐ │ VIEW LEADERBOARD │ ← Lime border, transparent fill └────────────────────────────────────┘ 3. Danger Button (Forfeit Warning) text Background: gradient-danger (#FF0055 → #FF6B00) Text: #FFFFFF Satoshi 700 Bold 14px uppercase Height: 48px Border radius: 10px Shadow: 0 4px 12px rgba(255, 0, 85, 0.5) Pulsing animation: opacity 1.0 → 0.8 (1s loop) when active

Example: ┌────────────────────────────────────┐ │ ⚠ FORFEIT STAKE ($50) │ ← Red gradient, pulsing └────────────────────────────────────┘ 4. Commitment Card text Background: #0F0F0F (Obsidian) Border: 1px solid #1A1A1A Border radius: 16px Padding: 20px Shadow: 0 2px 8px rgba(0, 0, 0, 0.4)

Layout: ┌─────────────────────────────────────────┐ │ 🔥 12 DAY STREAK [ACTIVE] │ ← Status badge (lime) │ │ │ No junk food for 30 days │ ← Goal text (18px bold white) │ 0.5 SOL staked · $67.20 │ ← Stake info (14px gray) │ │ │ ████████████████░░░░░░░░░ 18/30 days │ ← Progress bar (lime fill) │ │ │ Next check-in: in 8 hours │ ← Countdown (12px cyan) │ │ │ ───────────────────────────────────── │ │ Verified by: @alice.near ✓ │ ← Verifier (12px gray) └─────────────────────────────────────────┘ Interaction: Tap card → opens detail modal with full history, verifier chat, early forfeit option.

5. Progress Bar text Container:

• Background: #1A1A1A
• Height: 8px
• Border radius: 4px
• Full width

Fill:

• Background: #CCFF00 (active) or #FF0055 (at risk)
• Smooth CSS transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1)
• Glow effect: box-shadow 0 0 8px currentColor

Milestone markers (10, 20, 30 days):

• Small diamonds at specific percentages
• Color: #00F0FF

6. Check-In Button text Floating Action Button (FAB) style Position: Fixed bottom-right, 24px from edges Size: 64px diameter Background: gradient-primary Icon: ✓ checkmark (32px white) Shadow: 0 6px 20px rgba(204, 255, 0, 0.6) Animation: gentle pulse (scale 1.0 → 1.05, 2s loop)

Only visible when check-in is due. Tap: triggers confetti animation + haptic feedback 7. Streak Counter (Hero Number) text Typography: Satoshi Black 72px (mobile), 120px (desktop) Color: #CCFF00 Animation: count-up on mount (0 → actual number, 1.5s) Glow: text-shadow 0 0 20px rgba(204, 255, 0, 0.8)

Layout: 🔥 142 ← Neon lime, enormous DAY STREAK ← Small caps, 14px gray

Centered on dashboard hero section. 8. Leaderboard Row text Background: #0F0F0F Border-bottom: 1px solid #1A1A1A Padding: 16px Height: 72px

Layout: ┌──────────────────────────────────────┐ │ #1 👤 @bob.near 🔥 89 days │ │ 10 SOL staked │ └──────────────────────────────────────┘ ↑ ↑ ↑ Rank Username Streak (lime) Top 3 special styling:

#1: Gold gradient border

#2: Silver gray border

#3: Bronze orange border

9. Modal / Bottom Sheet text For mobile: slide up from bottom (native feel) For desktop: centered modal with backdrop blur

Background: #0F0F0F Border radius: 24px 24px 0 0 (mobile) / 20px (desktop) Backdrop: rgba(0, 0, 0, 0.7) with blur(10px) [web:673] Animation: slide-up 0.3s cubic-bezier + backdrop fade-in

Header:

• Drag handle (mobile): 32px wide, 4px tall, #606060, centered top
• Close button (desktop): X icon top-right

Max height: 85vh (mobile), 600px (desktop) Scrollable content if overflow 10. Status Badge text Small pill-shaped indicators

Active:

• Background: rgba(204, 255, 0, 0.15)
• Border: 1px solid #CCFF00
• Text: #CCFF00 Satoshi 600 SemiBold 11px uppercase

At Risk:

• Background: rgba(255, 107, 0, 0.15)
• Border: 1px solid #FF6B00
• Text: #FF6B00

Failed:

• Background: rgba(255, 0, 85, 0.15)
• Border: 1px solid #FF0055
• Text: #FF0055

Completed:

• Background: rgba(0, 240, 255, 0.15)
• Border: 1px solid #00F0FF
• Text: #00F0FF

Height: 24px Padding: 4px 10px Border radius: 12px Iconography System: Phosphor Icons (Duotone style) Size: 24px (standard), 20px (compact), 32px (hero) Color: Matches text hierarchy (#FFFFFF primary, #A0A0A0 secondary)

Key Icons:

🔥 Fire: Active streaks

✓ Check: Successful check-ins

⚠ Warning: At-risk status

💰 Money bag: Stake amounts

👤 User: Profile/verifier

📊 Chart: Leaderboard/stats

⚙️ Gear: Settings

🔔 Bell: Notifications

➕ Plus: Create new commitment

🏆 Trophy: Milestones

Custom illustrations: Minimal 3D style for empty states, onboarding — think Spline exports (WebGL micro-interactions).

Animations & Micro-interactions Performance budget: 60fps mandatory. Use GPU-accelerated properties only (transform, opacity).

Key Animations:

1. Check-In Success:

text User taps check-in button → Haptic feedback (medium impact) → Confetti explosion (lottie animation, 1.5s) → +1 counter animation on streak number → Progress bar smooth fill extension → Success toast: "Day 13 complete! 🔥" 2. Streak Milestone (10, 20, 30 days):

text Progress bar hits milestone → Screen flashes lime (#CCFF00 overlay, 0.2s) → Firework animation (lottie, 2s) → Trophy icon drops from top (bounce easing) → Sound effect (optional, user preference) 3. Commitment Failure:

text Deadline passes without check-in → Screen slowly saturates to red tint (2s) → All lime accents turn red → "Streak Broken" modal slides up with forfeit details → Sad trombone sound (optional) 4. Leaderboard Position Change:

text Your rank improves → Your row pulses lime glow (0.5s) → Slides up to new position (0.8s ease-out) → Confetti if you enter top 3 5. Loading States:

text Smart contract transactions → Skeleton screens (no spinners — feels faster) → Pulse animation on skeleton (1.5s loop) → Lime accent bar slides across top (indeterminate progress) 6. Page Transitions:

text Route changes → Current view fades out (0.2s) → New view slides in from right (0.3s, 20px offset) → Overlapping timing (feels snappier than sequential) Libraries:

Framer Motion (React animations)

Lottie (complex illustrations like confetti)

GSAP (timeline-based sequences if needed)

Responsive Breakpoints text Mobile: 320px — 767px (primary target) Tablet: 768px — 1023px Desktop: 1024px+

Design mobile-first, enhance for larger screens. Never hide features on mobile — optimize layout instead. Mobile-specific UX:

Bottom tab navigation (5 tabs max)

Swipe gestures for card actions (swipe left = forfeit, swipe right = details)

Pull-to-refresh on feed

Native-style modals (slide from bottom)

Thumb-zone optimization (CTAs in bottom 2/3 of screen)

Desktop enhancements:

Two-column layout (feed on left, stats sidebar on right)

Hover states on all interactive elements

Keyboard shortcuts (? for help modal, N for new commitment)

Persistent navigation sidebar

User Flows Flow 1: Create First Commitment text

1. Landing Page ↓ User sees hero: "Put money on the line. Change your life." ↓ CTA: "START YOUR STREAK" (lime gradient button)

2. Connect Wallet Modal ↓ Choose wallet: NEAR, Metamask, Phantom, etc. (WalletConnect) ↓ One-click social login option (NEAR wallet selector)

3. Onboarding Swiper (3 screens) ↓ Screen 1: "How it works — Commit, Verify, Win or Lose" ↓ Screen 2: "Choose any token from any chain — we handle routing" ↓ Screen 3: "Invite a friend as your verifier for accountability" ↓ CTA: "GOT IT"

4. Create Commitment Form ↓ Field 1: Goal text (placeholder: "Exercise every day for 30 days") ↓ Field 2: Duration (selector: 7 / 14 / 30 / 60 / 90 days) ↓ Field 3: Stake amount (input + token dropdown) ↓ Field 4: Verifier (search username or paste address) ↓ Field 5: Pool privacy (toggle: Public / Confidential) ↓ Preview card shows: stake amount in USD, daily check-in requirement ↓ CTA: "COMMIT & STAKE" (shows loading state during tx)

5. Transaction Confirmation ↓ Wallet prompts signature ↓ NEAR Intents processes cross-chain deposit (10-30s) ↓ Success screen: "You're in! 🔥 Day 1 starts now" ↓ CTA: "VIEW MY STREAK"

6. Dashboard ↓ Hero shows: Day 1 streak counter ↓ Card shows: Active commitment with countdown to next check-in ↓ FAB visible: "CHECK IN" (pulsing, lime) Flow 2: Daily Check-In text

7. User opens app (push notification reminder sent 1hr before deadline)

8. Dashboard shows: "Check-in due in 47 minutes" (countdown, orange warning)

9. User taps FAB: "CHECK IN"

10. Modal appears: ↓ "Confirm your progress today" ↓ Optional: Add photo or note (social feed sharing) ↓ CTA: "CONFIRM CHECK-IN"

11. Success animation (confetti + haptic)

12. Streak counter animates: 1 → 2

13. Toast: "Day 2 complete! 🔥 28 days to go"

14. Verifier gets notification: "@username checked in — approve?" Flow 3: Commitment Completion text

15. Final day check-in submitted

16. Verifier approves within 24hr grace period

17. Smart contract settles: ↓ User succeeded → calculates winnings share ↓ Contract triggers payout via NEAR Intents

18. Success modal: ↓ "30 DAYS COMPLETE! 🏆" ↓ Shows: Original stake + winnings (e.g., "0.5 SOL → 0.68 SOL") ↓ Stats: "You outlasted 67% of participants" ↓ CTA: "CLAIM WINNINGS" (one tap, gas fee paid from winnings)

19. Celebration animation (fireworks, 3s)

20. Trophy badge added to profile

21. Share card generated: ↓ Beautiful image: "I completed a 30-day streak on Streak" ↓ CTAs: Share to Twitter, Instagram story, etc. Flow 4: Commitment Failure text

22. Deadline passes without check-in

23. Smart contract marks commitment as failed

24. Push notification: "Your streak is broken 💔"

25. User opens app

26. Screen tints red

27. Modal appears: ↓ "Streak Broken" ↓ Shows: Days completed (e.g., "Made it 12/30 days") ↓ Forfeit amount: "0.5 SOL forfeited" ↓ Breakdown: "0.4 SOL to winners, 0.1 SOL to protocol" ↓ Encouragement: "Try again? 80% of people who restart succeed" ↓ CTA: "START NEW STREAK"

28. Failed commitment moves to "Past Streaks" (grayed out)

29. Verifier earns verification fee (0.01 NEAR per verified commitment) Key Screens (Wireframe Descriptions) Screen 1: Landing / Hero text ┌─────────────────────────────────────────────┐ │ │ │ │ │ 🔥 STREAK │ ← Logo (lime) │ │ │ │ │ Put money on the line. │ ← H1 (white, 32px) │ Change your life. │ │ │ │ Commit to your goals. Stake crypto. │ ← Body (gray) │ Succeed and win. Fail and forfeit. │ │ │ │ ┌───────────────────────────────────┐ │ │ │ START YOUR STREAK 🔥 │ │ ← CTA (gradient) │ └───────────────────────────────────┘ │ │ │ │ Any token. Any chain. Trustless. │ ← Caption (cyan) │ Powered by NEAR Intents │ │ │ │ ───────────────────────────────────── │ │ │ │ Live Stats: │ ← Social proof │ • 1,247 active streaks │ │ • $89,432 currently staked │ │ • 67% success rate │ │ │ │ ───────────────────────────────────── │ │ │ │ How it works (3 cards: Commit, Verify, │ │ Win/Lose) with icons and short text │ │ │ │ ┌───────────────────────────────────┐ │ │ │ CONNECT WALLET │ │ ← Secondary CTA │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ Scroll behavior: Sticky header with logo + wallet button.

Screen 2: Dashboard (Home) text ┌─────────────────────────────────────────────┐ │ 🔥 Dashboard [Notif] [Profile] 👤 │ ← Header (fixed) ├─────────────────────────────────────────────┤ │ │ │ 🔥 │ │ 23 │ ← Streak number (lime, huge) │ DAY STREAK │ ← Caption (gray, small) │ │ │ ───────────────────────────────────── │ │ │ │ Active Commitments (2) │ ← Section header │ │ │ ┌───────────────────────────────────┐ │ │ │ 🔥 23 days [ACTIVE] │ │ ← Commitment card 1 │ │ │ │ │ │ Exercise every morning │ │ │ │ 0.5 SOL · $67.20 │ │ │ │ │ │ │ │ ████████████░░░░░░░ 23/30 │ │ ← Progress │ │ │ │ │ │ Next: in 4 hours │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 🔥 7 days [AT RISK ⚠] │ │ ← Card 2 (orange) │ │ │ │ │ │ No junk food │ │ │ │ 100 USDC · $100 │ │ │ │ │ │ │ │ ██████░░░░░░░░░░░ 7/30 │ │ │ │ │ │ │ │ ⚠ CHECK IN NOW (2 hrs left) │ │ │ └───────────────────────────────────┘ │ │ │ │ ───────────────────────────────────── │ │ │ │ Browse Pools │ ← CTA link (cyan) │ View Leaderboard │ │ │ │ [🔥 CHECK IN] │ ← FAB (bottom right) └─────────────────────────────────────────────┘ │ Home Pools Stats Verify Profile │ ← Bottom nav └─────────────────────────────────────────────┘ Pull-to-refresh: Updates stake USD values, checks for verifications.

Screen 3: Create Commitment text ┌─────────────────────────────────────────────┐ │ ← Back New Commitment │ ├─────────────────────────────────────────────┤ │ │ │ Your Goal │ ← Label │ ┌───────────────────────────────────┐ │ │ │ Exercise every morning │ │ ← Text input │ └───────────────────────────────────┘ │ │ │ │ Duration │ │ ┌─────┬─────┬─────┬─────┬─────┐ │ │ │ 7 │ 14 │ │ 60 │ 90 │ │ ← Chip selector │ └─────┴─────┴─────┴─────┴─────┘ │ │ days │ │ │ │ Stake Amount │ │ ┌────────────────┬──────────────┐ │ │ │ 0.5 │ SOL ▼ │ │ ← Input + dropdown │ └────────────────┴──────────────┘ │ │ ≈ $67.20 USD │ ← Live conversion │ │ │ Verifier (who checks your progress?) │ │ ┌───────────────────────────────────┐ │ │ │ @alice.near ✓ │ │ ← Autocomplete │ └───────────────────────────────────┘ │ │ Or paste wallet address │ │ │ │ Privacy │ │ ┌─────────────────────────────────┐ │ │ │ ⚪ Public ⚫ Confidential │ │ ← Toggle │ └─────────────────────────────────┘ │ │ (Confidential hides stake amount) │ │ │ │ ───────────────────────────────────── │ │ │ │ Preview: │ │ • Daily check-in required │ │ • If you succeed: stake + pool share │ │ • If you fail: 80% to winners, 20% fee │ │ │ │ ┌───────────────────────────────────┐ │ │ │ COMMIT & STAKE (0.5 SOL) │ │ ← Primary CTA │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ Validation: All fields required. Minimum stake: 0.1 NEAR equivalent.

Screen 4: Pools Browser text ┌─────────────────────────────────────────────┐ │ 🔥 Pools [Filter 🎛] │ ├─────────────────────────────────────────────┤ │ │ │ Join a pool or create your own │ │ │ │ Categories: │ │ ┌─────┬─────┬─────┬─────┬─────┐ │ │ │[All]│Fit. │Diet │Prod.│Study│ │ ← Filters │ └─────┴─────┴─────┴─────┴─────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 💪 30-Day Fitness Challenge │ │ ← Pool card │ │ │ │ │ │ 47 participants · $4,200 staked │ │ │ │ Starts: Mar 1, 2026 │ │ │ │ │ │ │ │ [JOIN POOL →] │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 🥗 Sugar-Free February │ │ │ │ │ │ │ │ 23 participants · $1,850 staked │ │ │ │ Starts: Tomorrow │ │ │ │ │ │ │ │ [JOIN POOL →] │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 💻 Daily Coding Streak │ │ │ │ │ │ │ │ 89 participants · $8,900 staked │ │ │ │ In progress (Day 12/30) │ │ │ │ │ │ │ │ [VIEW DETAILS →] │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ + CREATE CUSTOM POOL │ │ ← Secondary CTA │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ Tap pool card → opens detail modal with participant list, rules, join button.

Screen 5: Leaderboard text ┌─────────────────────────────────────────────┐ │ 🏆 Leaderboard [Filter: All ▼] │ ├─────────────────────────────────────────────┤ │ │ │ Top Streakers │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 🥇 @bob.near 🔥 142 days │ │ ← Gold border │ │ 18.5 NEAR staked │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 🥈 @carol.eth 🔥 89 days │ │ ← Silver border │ │ 12.0 ETH staked │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ 🥉 @dan.sol 🔥 76 days │ │ ← Bronze border │ │ 250 SOL staked │ │ │ └───────────────────────────────────┘ │ │ │ │ ───────────────────────────────────── │ │ │ │ ┌───────────────────────────────────┐ │ │ │ #4 @eve.near 🔥 54 days │ │ │ │ 5.2 NEAR staked │ │ │ └───────────────────────────────────┘ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ #5 @frank.btc 🔥 47 days │ │ │ │ 0.08 BTC staked │ │ │ └───────────────────────────────────┘ │ │ │ │ ... │ │ │ │ ┌───────────────────────────────────┐ │ │ │ #47 YOU @montaq.near 🔥 23 days │ │ ← User row (lime) │ │ 0.5 SOL staked │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ Filter options: All time / This month / Fitness / Diet / Productivity.

Screen 6: Profile text ┌─────────────────────────────────────────────┐ │ ← Back @montaq.near [⚙ Edit] │ ├─────────────────────────────────────────────┤ │ │ │ 👤 │ ← Avatar (auto-gen) │ @montaq.near │ │ montaq.pool.near │ ← Full address (mono) │ │ │ ┌────────┬────────┬────────┐ │ │ │ 23 │ 2 │ 67% │ │ ← Stats grid │ │ Days │Active │Success │ │ │ └────────┴────────┴────────┘ │ │ │ │ ───────────────────────────────────── │ │ │ │ Achievements 🏆 │ │ │ │ ┌────┬────┬────┬────┐ │ │ │ 🔥 │ 🎯 │ 💎 │ 🚀 │ │ ← Badge grid │ └────┴────┴────┴────┘ │ │ 7-day 30-day Perfect 100-day │ │ │ │ ───────────────────────────────────── │ │ │ │ Past Streaks (14) │ │ │ │ ✅ No junk food - 30 days (completed) │ │ ✅ Exercise daily - 60 days (completed) │ │ ❌ Meditation - 14/30 days (failed) │ │ ✅ Reading - 21 days (completed) │ │ │ │ [VIEW ALL →] │ │ │ │ ───────────────────────────────────── │ │ │ │ Total Earned: $287.40 │ ← Lifetime stats │ Total Forfeited: $50.00 │ │ │ │ ┌───────────────────────────────────┐ │ │ │ SHARE PROFILE │ │ ← Share card CTA │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────┘ Settings (gear icon): Notifications, wallet management, privacy, delete account.

PWA Features Installation Prompt text Trigger: After 2 successful check-ins Location: Bottom banner (dismissible) Copy: "Add Streak to your home screen for faster check-ins" CTA: "INSTALL" (lime button)

iOS: Uses native share sheet → "Add to Home Screen" Android: Native install prompt Desktop: Chrome install banner Offline Support text Service Worker Caching Strategy:

• Static assets (JS, CSS, fonts): Cache first
• Images: Cache with network fallback
• API calls: Network first, cache fallback
• Smart contract calls: Network only (fails gracefully)

Offline UI:

• Gray banner at top: "You're offline — changes will sync when connected"
• Check-ins queue locally, submit when online
• Read-only mode for dashboard (cached data shown with timestamp) Push Notifications text Permission Request:
• Ask after first commitment created
• Modal: "Get reminders so you never miss a check-in"
• CTA: "ENABLE NOTIFICATIONS"

Notification Types:

1. Check-in reminder: "Check in due in 1 hour 🔥"
2. Milestone: "You've hit 10 days! Keep going 💪"
3. At risk: "You missed your check-in — you have 2 hours left ⚠️"
4. Verifier: "@username needs your approval to check in"
5. Pool update: "3 people joined your pool today"
6. Payout: "You earned 0.68 SOL from your streak! 🎉"

All notifications deep link to relevant screen. App Shortcuts (Android) text Long-press app icon:

1. "Check In" → Opens check-in modal
2. "View Streak" → Opens dashboard
3. "New Commitment" → Opens create form iOS Home Screen Widget (future) text Small widget: Shows current streak count + days remaining Medium widget: Shows next check-in countdown Large widget: Shows leaderboard top 3 Accessibility WCAG 2.1 AA Compliance Color Contrast:

All text: Minimum 4.5:1 against background

Lime (#CCFF00) on black (#000000): 16.8:1 ✓

Gray (#A0A0A0) on black: 7.1:1 ✓

Focus States:

All interactive elements have visible focus ring (2px lime outline)

Keyboard navigation: Tab order matches visual hierarchy

Skip links: "Skip to main content"

Screen Reader Support:

All images have alt text

Icons have aria-labels

Form inputs have associated labels

Status announcements use aria-live regions Example: "Check-in successful, you're on day 23"

Motion Preferences:

css @media (prefers-reduced-motion: reduce) {

• { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } Font Scaling:

Supports browser zoom up to 200%

Uses relative units (rem, em) for all type

Layout reflows gracefully

Touch Targets:

Minimum 44x44px (iOS guideline)

Adequate spacing between tappable elements (min 8px)

Performance Targets Core Web Vitals text Largest Contentful Paint (LCP): < 2.5s First Input Delay (FID): < 100ms Cumulative Layout Shift (CLS): < 0.1 Time to Interactive (TTI): < 3.5s Optimization Strategies Code Splitting:

Route-based code splitting (Next.js automatic)

Lazy load modals/bottom sheets (React.lazy)

Dynamic imports for heavy libraries (Lottie, GSAP)

Asset Optimization:

Images: WebP format, responsive sizes, lazy loading

Fonts: WOFF2, preload critical fonts, font-display: swap

SVG icons: Inline for above-fold, sprite sheet for others

Bundle Size Budget:

Initial JS: < 150kb (gzipped)

Initial CSS: < 50kb (gzipped)

Total page weight: < 500kb

Caching Strategy:

Static assets: 1 year cache (cache-busting via hashed filenames)

API responses: 5 minute cache (stale-while-revalidate)

Smart contract data: 30 second cache

Monitoring:

Lighthouse CI in GitHub Actions (fails if score < 90)

Real User Monitoring via PostHog

Bundle size tracking via bundlesize.js

Security & Privacy Data Collection (Minimal) Stored On-Chain:

Commitment metadata (goal text, duration, stake amount)

Check-in timestamps

Verifier address

Settlement results

Stored Off-Chain (Supabase):

User profile (username, avatar URL)

Goal templates (public)

Social feed posts (optional, user-generated)

Not Collected:

Email addresses (not required)

Phone numbers

KYC data

Geolocation

Device fingerprints

Privacy Features Confidential Intents:

Stake amounts hidden on-chain (ZK proofs) [web:657]

Only user and verifier can see actual amount

Public pools show participant count, not individual stakes

Data Portability:

Export all data as JSON (GDPR compliance)

Delete account: purges off-chain data, on-chain data remains (immutable)

Wallet Permissions:

Read-only by default

Transaction signing requires explicit user approval

No auto-sign (no gasless relayers by default)

Smart Contract Security Audit Checklist:

Reentrancy guards on all fund transfers

Integer overflow/underflow protections (Rust u128 checks)

Access control on admin functions

Emergency pause mechanism (multisig controlled)

Rate limiting on commitment creation

Verifier staking (skin in the game)

Timelock on contract upgrades (48 hour delay)

Bug Bounty:

$5,000 — $50,000 depending on severity

Reported via Immunefi

Launch Checklist Pre-Launch (Week -2) Smart contract deployed to NEAR testnet

Internal security audit completed

NEAR Intents integration tested on testnet

Frontend deployed to staging (Vercel preview)

10 beta testers onboarded (internal team)

Bug tracking board setup (Linear)

Launch Week (Week 0) Smart contract deployed to NEAR mainnet

Frontend live at streak.app

Landing page SEO optimized

Social media accounts created (@streakapp)

Product Hunt page prepared

Press kit created (screenshots, logos, copy)

Discord/Telegram community channels opened

Post-Launch (Week +1) Submit to Product Hunt

Post on NEAR Forum

Submit NEAR Foundation grant application

Share on Crypto Twitter (CT)

Monitor Sentry for errors

Daily user feedback calls

Growth (Month 1-3) Weekly feature releases

Integrate with fitness APIs (Apple Health, Strava)

Launch referral program

Sponsor NEAR ecosystem podcasts

Conference presence (NEARCON 2026)

Success Metrics North Star Metric Active Commitments — number of currently in-progress stakes.

Supporting Metrics Acquisition:

New users per week

Wallet connection rate

Source attribution (Product Hunt, Twitter, organic)

Activation:

% of users who create first commitment

Time to first commitment

Average stake size

Retention:

Daily Active Users (DAU)

Weekly check-in rate

% of users who create 2nd commitment after completing 1st

Revenue:

Total value locked (TVL) in contracts

Protocol fees earned per week

Average forfeit rate

Referral:

Viral coefficient (K-factor)

% of commitments with invited verifiers

Social shares per completed streak

Target KPIs (End of Month 3) text 1,000 registered users 300 active commitments $50,000 TVL $2,000/week protocol revenue 30% user completion rate (reasonable for hard goals) Future Roadmap Phase 2 (Month 4-6) Team Streaks: Groups commit together, shared pool

Smart Verifiers: Oracle integration (Chainlink, UMA) for automated verification

Apple Health API for fitness goals

GitHub commits for coding goals

Screen time API for digital detox

Streak NFTs: Mint an NFT for completed 90+ day streaks (flex)

Recurring Commitments: Auto-renew monthly (subscription-like)

Phase 3 (Month 7-12) DAO Governance: Protocol fee distribution decided by token holders

Staking Pools: Passive staking for non-participants (liquidity providers earn yield)

Insurance Market: Buy/sell "streak insurance" (if you fail, insurance pays out)

Mobile App: Native iOS/Android (React Native or Flutter) for better notifications

Phase 4 (Year 2+) B2B SaaS: White-label for corporate wellness programs

AI Coach: LLM-powered personal accountability assistant

Cross-Chain Expansion: Deploy contracts on Solana, Ethereum L2s (maintain NEAR as primary)

Brand Voice & Copywriting Tone Confident, direct, slightly edgy. No corporate speak. No false motivation. This is about money and accountability — own it.

Good examples:

"Put money on the line. Change your life."

"Succeed and win. Fail and forfeit."

"Your friend verifies you checked in — or you lose your stake."

Bad examples:

"Join our community of goal-setters!" (too generic)

"Unlock your potential with blockchain!" (buzzword soup)

"We're here to support your journey" (fake motivation)

Copywriting Guidelines Headlines: Bold, short, declarative. Max 8 words. Body: Conversational but precise. Write like you're texting a smart friend. CTAs: Action verbs. "START YOUR STREAK" not "Get Started". Errors: Human, helpful. "Oops, connection failed — try again?" not "Error code 500".

Microcopy examples:

Empty state (no active commitments): "No streaks yet. What are you waiting for?"

Loading screen: "Locking your funds on-chain..."

Success toast: "Day 7 complete! 🔥 You're crushing it"

Failure modal: "Streak broken. That $50 just funded someone else's win."

Open Questions / Future Decisions Verifier incentives: Should verifiers earn a fee per verification? (Currently: 0.01 NEAR per check-in)

Dispute resolution: What happens if user and verifier disagree? (Currently: manual DAO vote)

Grace periods: How long after a missed check-in before auto-forfeit? (Currently: 2 hours)

Minimum stake: Prevent spam commitments? (Suggested: 0.1 NEAR equivalent / ~$0.40)

Maximum pool size: Cap participants per pool for fairness? (Suggested: 500 users max)

Social features: In-app chat between user and verifier? Public comments on streaks?

Gamification: Leaderboards, badges, titles — how much is too much?

Appendix: Design System Export Color Tokens (CSS Variables):

css :root { --color-black: #000000; --color-obsidian: #0F0F0F; --color-charcoal: #1A1A1A; --color-lime: #CCFF00; --color-red: #FF0055; --color-orange: #FF6B00; --color-cyan: #00F0FF; --color-white: #FFFFFF; --color-gray-light: #A0A0A0; --color-gray-dark: #606060; --color-slate: #4A4A4A; } Typography Tokens:

css :root { --font-primary: 'Satoshi', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;

--font-display: 900; --font-bold: 700; --font-semibold: 600; --font-medium: 500; --font-regular: 400;

--text-display: clamp(40px, 8vw, 72px); --text-h1: clamp(28px, 5vw, 40px); --text-h2: clamp(22px, 4vw, 28px); --text-h3: 18px; --text-body-lg: 16px; --text-body: 14px; --text-caption: 12px; --text-label: 11px; } Spacing Tokens:

css :root { --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-base: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; } Border Radius:

css :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; } Shadows:

css :root { --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-lime: 0 4px 12px rgba(204, 255, 0, 0.4); --shadow-red: 0 4px 12px rgba(255, 0, 85, 0.5); } Animation Tokens:

css :root { --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 600ms; } Document Version History v1.0 — Feb 27, 2026

Initial technical & design specification

Complete PWA architecture defined

NEAR Intents integration documented

Gen Z design system established

All core screens wireframed

End of Specification

Ready for:

Engineering sprint planning

Design system implementation in Figma

Smart contract development kickoff

Grant application submission

Built by MontaQ Labs with 🔥