feat(calculator): integrate real-time market exchange rates with live badge and offline fallback (!41) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(calculator): integrate real-time market exchange rates with live badge and offline fallback

Overview

This pull request integrates real-time interbank currency exchange rate fetching into the FinWise Calculator Modal, replacing static baseline rates with automated live rate lookups, clear visual status indicators, and reliable offline fallbacks without consuming AI tokens.

Key Changes

1. Real-Time Interbank Exchange Rate Feed (`src/services/currency.service.ts`)

Live Interbank Fetching: Added fetchLiveExchangeRate(from, to) to query interbank rates via FloatRates and Open Exchange Rates with request timeouts and error handling.
Offline & Graceful Fallback: Automatically falls back to cached rates or modernized baseline values (DEFAULT_VND_RATES) when network requests fail or offline.
Updated Baseline Rates: Refreshed default hardcoded rates against VND (e.g., USD: 25,922.52, EUR: 30,067.05, JPY: 168.3, etc.).

2. Dynamic Calculator Modal UI (`src/components/ui/CalculatorModal.tsx`)

Automated Rate Fetching: Automatically triggers rate lookup when user switches fromCurrency or toCurrency.
Live vs Baseline Badges:
- Displays a green Live Market badge when fetching real-time market rates.
- Displays a Baseline indicator when serving cached or offline rates.
Loading State: Pulse animation with animated spinner while fetching updated rates, preventing race conditions.
Manual Refresh Action: Added a one-click refresh button with spinning state to pull the latest rate on demand.
Source Note / Tooltip: Informative tip showing the active market feed source (e.g., FloatRates, Open Exchange Rates, or identical currency notification).
Disabled State: Temporarily disables the "Apply" button while rates are updating to ensure arithmetic integrity.

3. AI Assistant Service & Types (`src/services/ai-assistant.service.ts`, `src/types/ai.ts`)

Added getExchangeRate method to aiAssistantService for direct interaction with /ai-assistant/exchange-rate.
Defined strongly-typed interfaces: AIExchangeRateInput and AIExchangeRateData.

4. Internationalization (`src/i18n/locales/en.json`, `src/i18n/locales/vi.json`)

Added complete English and Vietnamese localization keys:
- currency.updatingRate: "Updating market rate..." / "Đang cập nhật tỷ giá..."
- currency.liveBadge: "Live Market" / "Thị trường"
- currency.estimated: "Baseline" / "Cơ sở"
- currency.refreshRate: "Refresh market rate" / "Cập nhật tỷ giá thị trường"
- currency.sameCurrencyNote: "Exchange rate for identical currencies" / "Tỷ giá giữa cùng một loại tiền tệ"

## Overview
This pull request integrates real-time interbank currency exchange rate fetching into the FinWise Calculator Modal, replacing static baseline rates with automated live rate lookups, clear visual status indicators, and reliable offline fallbacks without consuming AI tokens.

---

## Key Changes

### 1. Real-Time Interbank Exchange Rate Feed (`src/services/currency.service.ts`)
- **Live Interbank Fetching**: Added `fetchLiveExchangeRate(from, to)` to query interbank rates via [FloatRates](https://www.floatrates.com) and [Open Exchange Rates](https://open.er-api.com) with request timeouts and error handling.
- **Offline & Graceful Fallback**: Automatically falls back to cached rates or modernized baseline values (`DEFAULT_VND_RATES`) when network requests fail or offline.
- **Updated Baseline Rates**: Refreshed default hardcoded rates against VND (e.g., USD: 25,922.52, EUR: 30,067.05, JPY: 168.3, etc.).

### 2. Dynamic Calculator Modal UI (`src/components/ui/CalculatorModal.tsx`)
- **Automated Rate Fetching**: Automatically triggers rate lookup when user switches `fromCurrency` or `toCurrency`.
- **Live vs Baseline Badges**:
  - Displays a green `Live Market` badge when fetching real-time market rates.
  - Displays a `Baseline` indicator when serving cached or offline rates.
- **Loading State**: Pulse animation with animated spinner while fetching updated rates, preventing race conditions.
- **Manual Refresh Action**: Added a one-click refresh button with spinning state to pull the latest rate on demand.
- **Source Note / Tooltip**: Informative tip showing the active market feed source (e.g., *FloatRates*, *Open Exchange Rates*, or identical currency notification).
- **Disabled State**: Temporarily disables the "Apply" button while rates are updating to ensure arithmetic integrity.

### 3. AI Assistant Service & Types (`src/services/ai-assistant.service.ts`, `src/types/ai.ts`)
- Added `getExchangeRate` method to `aiAssistantService` for direct interaction with `/ai-assistant/exchange-rate`.
- Defined strongly-typed interfaces: `AIExchangeRateInput` and `AIExchangeRateData`.

### 4. Internationalization (`src/i18n/locales/en.json`, `src/i18n/locales/vi.json`)
- Added complete English and Vietnamese localization keys:
  - `currency.updatingRate`: "Updating market rate..." / "Đang cập nhật tỷ giá..."
  - `currency.liveBadge`: "Live Market" / "Thị trường"
  - `currency.estimated`: "Baseline" / "Cơ sở"
  - `currency.refreshRate`: "Refresh market rate" / "Cập nhật tỷ giá thị trường"
  - `currency.sameCurrencyNote`: "Exchange rate for identical currencies" / "Tỷ giá giữa cùng một loại tiền tệ"