IntentCompass

IntentCompass is a visual intent composer for cross-chain DeFi. It solves a critical problem: users don't know costs, timing, or outcomes before executing complex multi-step operations like "bridge USDC from Base to Optimism and stake on Aave."

Core Features: Visual Canvas - Drag-and-drop node-based designer powered by React Flow Pre-Execution Simulation - See exact fees, routing, and timing before committing funds Atomic Execution - Execute entire flows in one transaction using Avail Nexus SDK Template System - Save and reuse successful flows Unified Balances - Track assets across all chains simultaneously

Built with React 19, Next.js 15, TypeScript, Zustand, and fully integrated with the Avail Nexus SDK.

Architecture A layered, modular design with: React/Next.js Frontend → Components, Canvas UI, State Management Service Layer → NexusSDK, Simulation, Execution, Templates Avail Nexus SDK → Cross-chain abstraction and atomic composition

Key Technologies & Integration

1. React Flow (Canvas) Drag-and-drop interface for designing flows Node positioning, zooming, panning, edge management

2. Zustand (State Management) Single source of truth for nodes, edges, simulation results, execution status localStorage persistence for templates (no backend needed)

3. Avail Nexus SDK (The Superpower) The entire project leverages these SDK features: getUnifiedBalances() - See user balances across ALL chains bridge() - Move tokens between chains with optimal routing transfer() - Send tokens to addresses execute() - Call DeFi contracts (stake, lend, swap) bridgeAndExecute() - KEY FEATURE: Bridge and execute atomically in one transaction simulateBridgeAndExecute() - Preview costs/fees before committing

4. Wagmi + RainbowKit Multi-wallet support (MetaMask, WalletConnect, etc.) Automatic chain switching

5. Tailwind CSS + Custom UI Components Beautiful, responsive design Mobile-friendly canvas Accessible theming