Yellow Tok

YellowTok is a decentralized live streaming platform that reimagines creator monetization using Yellow Network's off-chain state channels (ERC-7824).

The problem: Traditional platforms like TikTok and Twitch take 50-70% commissions, settlements take weeks, and blockchain alternatives require expensive gas fees per transaction with constant wallet popups.

Our solution: Viewers authenticate once via EIP-712, then send unlimited micro-tips ($0.001-$10) with zero gas fees and zero popups. Session keys sign all transfers off-chain through Yellow Network's ClearNode. When the stream ends, one single on-chain transaction settles everything.

Streamers keep 90-97% (vs 30-50% on Web2 platforms), viewers enjoy frictionless tipping, and ENS integration provides decentralized identity with avatars, bios, and social links.

Built for the Hack the Money hackathon to demonstrate that Web3 UX can match Web2 while maintaining self-custody and transparency.

YellowTok is built with React 19 + Vite 6 + TypeScript for the frontend, styled with Tailwind CSS 4 and animated with Framer Motion. We use wagmi v2 + viem for Ethereum interactions and ENS resolution.

The core payment infrastructure uses Yellow Network's @erc7824/nitrolite SDK (v0.5.3) which implements ERC-7824 state channels. The authentication flow uses EIP-712 challenge-response to create ephemeral session keys that sign off-chain transfers without requiring wallet popups.

The app connects to Yellow Network's ClearNode via WebSocket (wss://clearnet-sandbox.yellow.com/ws) for sandbox testing on Sepolia, with a production branch ready for Base mainnet. We use Three.js + @react-three/fiber for the 3D landing page particle network.

Key technical achievements:

• Single wallet popup per session (EIP-712 auth)
• Zero gas fees for unlimited tips via createTransferMessage
• Real-time balance updates through ClearNode WebSocket
• ENS integration for streamer profiles (avatar, bio, Twitter, URL)
• Spending limits and session management with localStorage persistence
• One final on-chain USDC settlement when closing the stream

The architecture follows a clean separation: React components → useYellow hook → YellowTokService (event-driven) → Yellow Network. All Mermaid sequence diagrams and technical docs are in ARCHITECTURE.md (github repository)