01 / Case study
The challenge
Wallet connection starts a DeFi journey. Users must choose assets and amounts, grant contract permissions, confirm transactions and see their updated balances or positions. These stages differ across swaps, liquidity and pools. The challenge was keeping the interface coordinated with chain data and contracts while making operation status understandable.
My contribution
In 1400 SH (2021–2022), I developed the React frontend and Solidity smart-contract backend. The interface uses React, TypeScript, shared state and Web3 tools. Work included developing and integrating product journeys with wallets and contracts, within a codebase also using libraries and components from the DeFi ecosystem.
Token exchange & liquidity
Swap interface
Asset and amount selection with trade information and confirmation stages, connecting interface choices to Web3 logic and the wallet.
Liquidity & pool discovery
Active routes cover liquidity management, adding asset pairs and finding pools, providing liquidity operations alongside token exchange.
Pools, participation & rewards
Deposits & withdrawals
Pool components and participation logic convert selected amounts using token precision and execute deposit and withdrawal workflows through wallet transactions.
Reward collection
The rewards flow includes contract calls to collect user rewards and display participation information, alongside data updates and transaction state.
Initial sale & contract interaction
Initial token sale
A dedicated initial-sale route sits alongside the main DeFi functions, providing a separate participation experience within the same application.
Approvals & confirmation
Coordinate token permissions, transaction requests and results with the interface, separating connection, approval and waiting stages so users can follow on-chain operations.
Frontend architecture & web experience
Shared state & chain data
Redux Toolkit and shared hooks manage account information, block updates and pool data, periodically refreshing information across interface components.
Mobile, routing & notifications
Mobile navigation and toolbars, separate product routes, transaction notifications and loading states organize access across screen sizes.