Build interactive frontend dashboard for SplitStream contract management

[Yusufolosun]

Objective
Create a production-ready web application that allows users to interact with deployed SplitStream contracts through an intuitive, user-friendly interface. This frontend will serve as the primary way non-technical users manage their payment splitters.

Problem Statement
Currently, users must interact with SplitStream contracts via:

• Command-line scripts (technical barrier)
• Direct Etherscan interaction (poor UX)
• Custom integration code (requires development skills)

This limits adoption to technical users and developers. We need a consumer-facing interface that makes SplitStream accessible to DAOs, teams, and creators without blockchain development expertise.

Proposed Solution

Technology Stack

• Framework: Next.js 14 (App Router) with TypeScript
• Styling: Tailwind CSS + shadcn/ui components
• Web3 Integration: wagmi v2 + viem
• Wallet Connection: RainbowKit or ConnectKit
• State Management: React Context + Zustand (for complex state)
• Charts/Visualization: Recharts or Chart.js
• Deployment: Vercel

Core Features

. Contract Discovery & Connection

• Connect wallet (Coinbase Wallet, MetaMask, WalletConnect)
• Auto-detect user's deployed SplitStream contracts
• Manual contract address input with validation
• Network switching (Base mainnet/testnet)
• Contract verification status display

. Dashboard Overview

• Total contract balance (ETH)
• Total shares distribution (pie chart)
• Total released vs pending amounts
• Recent payment activity timeline
• Quick action buttons (Send, Release, Monitor)

. Payee Management View

• List all payees with:
  • Address (with ENS resolution)
  • Share percentage
  • Total released amount
  • Pending releasable amount
  • Last withdrawal timestamp
• Individual payee detail pages
• Payee contact information (off-chain, optional)

. Payment Operations

• Send Payment Interface:

  • ETH amount input with USD conversion
  • Transaction preview (gas estimate, distribution breakdown)
  • Confirmation modal with details
  • Transaction status tracking

• Release Payment Interface:

  • One-click release for current user
  • Release for specific payee (if permissioned)
  • Batch release for all payees
  • Gas optimization suggestions

. Analytics & Reporting

• Payment history table (filterable, exportable)
• Distribution charts over time
• Average time to withdrawal metrics
• Gas cost analytics
• Export to CSV/JSON for accounting

. Contract Deployment Wizard

• Step-by-step deployment flow:
  1. Enter payee addresses (with validation)
  2. Set share percentages (real-time pie chart)
  3. Review and confirm
  4. Deploy transaction
  5. Verification and setup
• Save deployment configurations
• Share deployment link with team

Design Requirements

• Mobile-responsive (works on all screen sizes)
• Accessibility (WCAG 2.1 AA compliant)
• Dark/Light mode toggle
• Real-time updates via WebSocket or polling
• Loading states for all async operations
• Error handling with user-friendly messages
• Transaction notifications (success, pending, failed)

User Flows

New User Flow:

1. Land on homepage → Connect wallet
2. No contracts detected → "Deploy New Contract" CTA
3. Deployment wizard → Contract created
4. Redirected to dashboard → See contract details

Existing User Flow:

1. Connect wallet → Auto-detect contracts
2. Select contract from list
3. Dashboard shows current state
4. Perform operations (send, release, monitor)

Payee Flow:

1. Receive link to contract dashboard
2. Connect wallet
3. See personal share and pending amount
4. One-click release funds

Technical Implementation Details

Project Structure

frontend/
├── app/
│ ├── (dashboard)/
│ │ ├── layout.tsx
│ │ ├── page.tsx # Main dashboard
│ │ ├── deploy/page.tsx # Deployment wizard
│ │ ├── [address]/ # Contract-specific pages
│ │ │ ├── page.tsx # Contract overview
│ │ │ ├── payees/page.tsx # Payee management
│ │ │ ├── analytics/page.tsx # Analytics
│ │ │ └── settings/page.tsx # Contract settings
│ ├── api/ # API routes (if needed)
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── contract/ # Contract-specific components
│ ├── wallet/ # Wallet connection
│ └── shared/ # Shared components
├── hooks/
│ ├── useContract.ts # Contract interaction hooks
│ ├── useBalance.ts
│ └── useEvents.ts
├── lib/
│ ├── wagmi.ts # wagmi configuration
│ ├── contracts.ts # Contract ABIs and addresses
│ └── utils.ts # Utilities
└── styles/
└── globals.css # Global styles

Integration with Existing Codebase

• Import contract ABIs from artifacts/
• Use deployment addresses from scripts
• Link to documentation from UI
• Integrate with existing monitoring scripts

Acceptance Criteria

Phase 1: MVP (Essential Features)

• Wallet connection working on Base mainnet
• Contract connection (by address) functional
• Dashboard displays: balance, shares, payees
• Send payment functionality working
• Release payment functionality working
• Basic responsive design implemented
• Error handling for common cases

Phase 2: Enhanced UX

• Auto-detect user's contracts
• ENS name resolution for addresses
• Real-time balance updates
• Transaction history display
• Dark/light mode toggle
• Mobile-optimized interface

Phase 3: Advanced Features

• Contract deployment wizard
• Analytics dashboard with charts
• CSV export functionality
• Batch operations (release all)
• Gas optimization suggestions
• Multi-language support (i18n)

Testing Requirements

• Unit tests for all hooks
• Component tests with React Testing Library
• E2E tests for critical flows (Playwright)
• Wallet connection tests
• Contract interaction tests on testnet

Documentation

• Frontend README with setup instructions
• Component documentation (Storybook optional)
• User guide for dashboard features
• Deployment guide (Vercel/Netlify)

Success Metrics

• Dashboard loads in < 2 seconds
• Transaction confirmation in < 5 seconds (Base network)
• 95%+ uptime when deployed
• Mobile responsive (works on screens 320px+)
• Lighthouse score: 90+ for Performance, Accessibility, Best Practices

Out of Scope (Future Enhancements)

• Multi-contract management dashboard
• Notifications (email/push)
• Advanced analytics (AI-powered insights)
• Integration with accounting software
• Mobile native app