Amana Protocol - Decentralized Exchange
Amana Protocol is a decentralized exchange interface spanning seven screens: swap, stake, lend and borrow, concentrated liquidity, plus analytics, portfolio, and transaction history. Token prices are read live from Chainlink oracles on-chain via wagmi and viem. The lending module is real: supply, borrow, repay, and withdraw settle on a Solidity lending pool I deployed to Base Sepolia, with the health factor read straight from the contract. Swap, stake, and liquidity are fully designed and interactive but simulated on the client, and every module is labelled so the boundary is never ambiguous.
The Problem
Most DEX interfaces are built for power users and feel like a Bloomberg terminal from 2015. Dense tables, unexplained numbers, and liquidation risk buried in tooltips. New DeFi users get liquidated because the UI never made risk visible.
Research & Discovery
- 01Audited Uniswap, Aave, and GMX flows and catalogued every number shown without explanation: slippage, price impact, health factor, APR versus APY.
- 02Identified liquidation as the highest stakes moment. On most platforms, health factor is a small decimal in a corner, and users do not act on numbers they do not understand.
- 03Defined a hierarchy rule before designing: risk information always outranks reward information on any screen where both appear.
Key Design Decisions
Health Factor as a first class UI element
The lending module surfaces health factor as a large, color coded indicator with plain language states like safe and at risk, not a decimal in a corner. It recomputes as the borrow amount changes so the risk consequence is visible before acting. Risk visibility drives the layout, not yield numbers.
Preview before commit, always
Every action, whether swap, stake, borrow, or LP, shows slippage, fees, and price impact before the confirm step. No transaction is ever a surprise, which is the core trust contract of the product.
Four modules, one interaction grammar
Swap, stake, lend, and LP screens share the same card anatomy: input, computed outcome, risk line, action. Learning one module teaches all four, which flattens the DeFi learning curve.
In range indicator for concentrated liquidity
LP positions show a live In Range or Out of Range state with unclaimed fees front and center, turning the most confusing concept in Uniswap v3 into a glanceable status.
Built With
Outcome
Shipped a seven screen DeFi interface with live Chainlink oracle reads through wagmi and viem, wallet support via RainbowKit, and full type safety in TypeScript. The lending module runs against a real Solidity pool I wrote and deployed to Base Sepolia, so supply, borrow, and health factor are genuine on chain reads and writes. The unified card grammar means every module ships from one design system with minimal bespoke UI, which is what let a solo build cover this much surface area.
What I Learned
DeFi UX is risk communication design. The best performing pattern was the pre action preview: showing slippage, fees, and health factor before commitment. I also learned where to draw the line for a portfolio build, deploying a real lending pool where on chain state makes the risk UX honest, and simulating swap and liquidity where a full protocol deployment would not add to the design story. The rule I settled on: label every module so a reviewer always knows what is live and what is mocked.
Next case study
RiskLens - Token Risk Scanner