How to Show STON.fi Liquidity Pools in a React Web App
Displaying STON.fi pool data in a web app is straightforward with the official REST API or @ston-fi/api. Fetch pools and assets, turn addresses into symbols, format reserves correctly, and present liquidity plus 24h volume in clean cards—no contract reading or wallet connection required.
🔥 What Makes the STON.fi API Ideal
- Endpoints like GET /v1/pools and GET /v1/pools/by_market cover the full set
- getPools(), getAssets() and getPoolsByAssetPair() wrap everything in TypeScript
- Responses already include reserves, USD liquidity and volume fields
- The client handles snake_case to camelCase conversion automatically
⚡ Step-by-Step Dashboard Setup
1. Scaffold a React-TypeScript app with Vite and install @ston-fi/api
2. Create a shared StonApiClient instance pointed at the default base URL
3. Load pools and assets together with Promise.all inside a useEffect
4. Map token addresses to symbols and decimals, then render filtered pool cards
🧠 Key Display Details That Matter
- Never show raw addresses as primary labels—resolve them via asset metadata
- Apply the exact decimals from each token instead of assuming nine
- Sort by lpTotalSupplyUsd and hide deprecated pools for cleaner results
- Keep base-unit strings for any future calculations
💬 Practical Takeaway for Builders
A periodically refreshed pool directory is perfect for explorers and analytics pages. Cache responses, show loading and error states, and remember the API targets mainnet data. Once the transformation layer is solid, adding search or detail views becomes incremental.
The useful part is clear: STON.fi turns protocol state into UI-ready data so your React app can focus on presentation rather than on-chain parsing.
Which pool metric would you surface first—liquidity or 24h volume? 👇
Tell us what filtering option you would build next in the comments.
Not investment advice - research on your own! 🚀
$GRAM @STONfi DEX
Displaying STON.fi pool data in a web app is straightforward with the official REST API or @ston-fi/api. Fetch pools and assets, turn addresses into symbols, format reserves correctly, and present liquidity plus 24h volume in clean cards—no contract reading or wallet connection required.
🔥 What Makes the STON.fi API Ideal
- Endpoints like GET /v1/pools and GET /v1/pools/by_market cover the full set
- getPools(), getAssets() and getPoolsByAssetPair() wrap everything in TypeScript
- Responses already include reserves, USD liquidity and volume fields
- The client handles snake_case to camelCase conversion automatically
⚡ Step-by-Step Dashboard Setup
1. Scaffold a React-TypeScript app with Vite and install @ston-fi/api
2. Create a shared StonApiClient instance pointed at the default base URL
3. Load pools and assets together with Promise.all inside a useEffect
4. Map token addresses to symbols and decimals, then render filtered pool cards
🧠 Key Display Details That Matter
- Never show raw addresses as primary labels—resolve them via asset metadata
- Apply the exact decimals from each token instead of assuming nine
- Sort by lpTotalSupplyUsd and hide deprecated pools for cleaner results
- Keep base-unit strings for any future calculations
💬 Practical Takeaway for Builders
A periodically refreshed pool directory is perfect for explorers and analytics pages. Cache responses, show loading and error states, and remember the API targets mainnet data. Once the transformation layer is solid, adding search or detail views becomes incremental.
The useful part is clear: STON.fi turns protocol state into UI-ready data so your React app can focus on presentation rather than on-chain parsing.
Which pool metric would you surface first—liquidity or 24h volume? 👇
Tell us what filtering option you would build next in the comments.
Not investment advice - research on your own! 🚀
$GRAM @STONfi DEX