Trade Layer
Yellow-powered seamless trading with swipe mechanics for rapid positions
Trade Layer
Created At
Winner of
Yellow - Best Use of ERC-7824 and Nitro Protocol 2nd place
Project Description
Swipe right to go long, left to short, all powered by super-fast Yellow / ERC7824 backbone.
We've taken the head-scratching complexity of DeFi and transformed it into a thumb-flicking good time, without sacrificing the serious security your digital assets deserve. No more squinting at intimidating trading interfaces or drowning in jargon!
Just swipe, confirm, and watch your positions like you're checking your crush's Instagram stories.
How it's Made
TradeLayer is built on React and Next.js with TypeScript for type safety. UI components are styled using Tailwind CSS, with shadcn/ui providing a consistent design system. The application is fully responsive, functioning across desktop and mobile devices.
We implemented a custom React hook (useMetaMask) that manages wallet connections, handles account changes, and facilitates transaction signing. This hook includes:
- Connection state management
- Error handling for common MetaMask issues
- Event listeners for account and chain changes
- SSR compatibility through conditional window object access
Communication with Yellow Protocol's infrastructure occurs via:
- WebSocket connections to ClearNode services
- EIP-712 typed data signatures for secure authentication
- Challenge-response authentication flow
- Message formatting according to ERC-7824 standards
The application employs a dual-key security model, MetaMask Key: Handles primary transaction authorization and wallet authentication Participant Key: Locally stored session key that manages trading permissions This separation provides enhanced security without sacrificing user experience.
Application state is managed through react context for global state (wallet, trading positions, etc.), local component state for UI interactions, and custom hooks that abstract service interactions
The distinctive card-swiping interface is built with custom touch and mouse event handlers, direction detection for long/short position creation, position management through the trading service layer and real-time price updates via WebSocket
