PayFloww

Demo

About

💸 PayFlow is a universal cross-chain payroll system that enables companies and DAOs to pay global contributors with a single click, regardless of which blockchain or token each recipient prefers. THE PROBLEM: Paying 100 employees across different chains currently requires 100+ separate transactions, costing $500+ in gas fees and hours of manual work. Each recipient must accept whatever token is sent, then manually bridge and swap to their preferred chain/token. THE SOLUTION: PayFlow combines three powerful protocols to reduce this to just 2-3 transactions: - Yellow Network - Session-based state channels allow us to queue unlimited payments off-chain (instant, gasless), then settle everything with a single on-chain transaction - Sui - Programmable Transaction Blocks (PTBs) enable batching 100+ payments into one atomic transaction - something impossible on EVM chains without custom contracts - LI.FI - Cross-chain routing automatically finds the optimal path to deliver payments in each recipient's preferred token on their preferred chain USER FLOW: 1. Company deposits USDC and opens a Yellow session 2. Uploads CSV or enters recipients with their preferred chain/token 3. PayFlow's smart routing engine categorizes payments optimally 4. One click executes everything - Yellow batches same-chain, LI.FI routes cross-chain, Sui PTB handles non-EVM 5. Everyone receives payment exactly how they want it RESULTS: 95% gas savings, 90% time savings, zero manual bridging. PayFlow is the future of Web3 payroll.

How it's made

PayFlow is built with a modular architecture where each protocol handles what it does best. Here's the technical deep-dive: FRONTEND: - React 18 + TypeScript + Vite for a fast, type-safe application - Tailwind CSS for responsive, professional UI - wagmi + viem for EVM wallet connections (MetaMask, Rainbow, etc.) - @mysten/sui.js for Sui wallet integration (Sui Wallet, Suiet) - React Query for efficient state management and caching YELLOW NETWORK INTEGRATION: We integrated the Yellow SDK and Nitrolite protocol for session-based batch payments. The key innovation is using state channels as a "payment queue" - we deposit once, queue unlimited off-chain transfers (each confirming in milliseconds with zero gas), then settle everything with one on-chain transaction. This is perfect for payroll where you're paying many people from a single treasury. We implemented session lifecycle management including deposit, transfer queuing, and settlement with proper error handling and status tracking. SUI INTEGRATION: This was our most technically interesting integration. We wrote a custom Move module (batch_pay.move) and leveraged Sui's PTBs to batch multiple payments atomically. The hacky part: on EVM, batching N payments requires either N transactions OR deploying a custom batch contract. On Sui, we construct a single TransactionBlock that splits coins and transfers to N recipients in ONE atomic transaction. We use txb.splitCoins() and txb.transferObjects() chained together - if any payment fails, they all revert. This showcases why Sui's architecture is fundamentally different and more powerful for this use case. LI.FI INTEGRATION: We use @lifi/sdk for cross-chain payment routing. When a recipient wants payment on a different chain (e.g., payer is on Base, recipient wants Arbitrum), we call getQuote() to find the optimal route across all supported bridges and DEXs, then executeRoute() to perform the cross-chain transfer. The clever part: we batch quote fetching for all cross-chain recipients in parallel using Promise.all(), significantly reducing wait time. We also implemented route status tracking via updateRouteHook to show real-time progress in the UI. SMART ROUTING ENGINE (payflowEngine.ts): The core innovation is our routing logic that categorizes payments optimally: - Same-chain EVM payments → Yellow session (gasless batch) - Cross-chain EVM payments → LI.FI routes (optimal bridging) - Sui payments → PTB batch (atomic execution) This means the protocol-level complexity is completely abstracted from the user - they just see "Pay All" and everyone gets paid efficiently. NOTABLE HACKS: 1. Dual wallet connection - Supporting both EVM (wagmi) and Sui (@mysten/sui.js) wallets simultaneously in one app, with unified transaction status tracking 2. Parallel execution - Yellow settlement, LI.FI routes, and Sui PTB all execute concurrently with Promise.all() for maximum speed 3. Optimistic UI updates - We update recipient status immediately and reconcile with actual tx confirmations 4. CSV parsing with chain/token validation - Smart detection of chain names and token symbols with fuzzy matching CHALLENGES OVERCOME: - Coordinating three different transaction paradigms (state channels, cross-chain messaging, PTBs) into one unified flow - Handling partial failures gracefully (if LI.FI route fails, Yellow and Sui payments still complete) - Building a responsive UI that tracks 3 different types of async operations simultaneously.