Implement real-time crypto-to-fiat price converter for dashboard #31
Description
🧩 Problem
CropChain users (especially Farmers and Mandi managers) deal in local fiat currencies like INR or USD. However, all blockchain transactions, gas fees, and batch values are recorded in MATIC or ETH. This creates "cognitive friction"—users have to leave the app to check exchange rates.
Impact: Real-time conversion makes the app user-friendly for non-crypto natives and provides immediate financial clarity.
✨ Proposed Change
Integrate a live price feed (via CoinGecko or CryptoCompare) to dynamically convert and display all crypto values in the user's chosen fiat currency.
Technical Requirements:
- API Integration:
- Use the CoinGecko Free API (no API key required for basic usage) to fetch current prices for MATIC/ETH.
- Endpoint:
https://api.coingecko.com/api/v3/simple/price?ids=polygon-pos,ethereum&vs_currencies=inr,usd
- State Management:
- Implement a Global Toggle (e.g., in the Navbar or Dashboard header) to switch between
Crypto,INR, andUSD. - Store the user's preference in
localStorage.
- Implement a Global Toggle (e.g., in the Navbar or Dashboard header) to switch between
- Conversion Logic:
- Create a utility hook
usePriceConverterthat takes a crypto value and returns the converted string:- Example:
0.5 MATIC->₹42.50(based on live rate).
- Example:
- Create a utility hook
- Dashboard Update:
- Apply this conversion to:
- Total Batch Value.
- Estimated Gas Fees.
- Historical transaction logs.
- Apply this conversion to:
🎨 UI/UX Guidelines
- Toggle Design: Use a sleek segmented control or a small dropdown next to the wallet balance.
- Visual Feedback: When the price updates, show a subtle "Price Updated" timestamp or a small green/red indicator for market trends.
- Skeletons: Show loading skeletons while the API is fetching the latest rates to prevent layout shifts.
✅ Acceptance Criteria
- Users can toggle between MATIC/ETH and INR/USD.
- Prices are fetched successfully and updated at least every 60 seconds (or on page refresh).
- Fallback mechanism: If the API fails, the app should default to showing only Crypto values without crashing.
- Precision: Fiat values should be rounded to 2 decimal places.
🛠️ Implementation Hint
You can use React Query (TanStack Query) to handle the API fetching and caching. This ensures you don't hit the CoinGecko rate limits by requesting the price too often across different components.
// Example Fetch logic
const fetchPrices = async () => {
const res = await fetch('[https://api.coingecko.com/api/v3/simple/price?ids=matic-network&vs_currencies=inr](https://api.coingecko.com/api/v3/simple/price?ids=matic-network&vs_currencies=inr)');
const data = await res.json();
return data['matic-network'].inr;
}