feat(calculator): integrate currency converter and refine modal positioning & branding (!40) · Merge Requests · ThinhNC / finwise-miniapp-fe

feat(calculator): integrate currency converter and refine modal positioning & branding

Summary of Changes

This pull request introduces a currency conversion feature into the transaction calculator (CalculatorModal), improves calculator modal positioning on mobile devices, and resolves browser title and favicon synchronization.

Key Features & Improvements

1. Currency Conversion in Calculator (`CalculatorModal`)

Exchange Rate Engine (currency.service.ts & currency.ts):
- Provides standard baseline exchange rates for 11 popular currencies: VND, USD, EUR, JPY, KRW, CNY, GBP, THB, SGD, AUD, CAD.
- Supports automatic fetching of latest market rates with offline fallback and a 12-hour localStorage cache.
- Accurate conversion logic with currency-specific decimal rounding rules (0 decimals for VND, JPY, KRW; 2 decimals for USD, EUR, etc.).
Claymorphism UI & Controls:
- Clean circular icon-only toggle button (ExchangeIcon, size 18) in the modal header for seamless activation.
- Interactive conversion panel with From and To currency selectors and a 1-tap swap button (⇄).
- Real-time exchange rate indicator (1 USD = 25,450 VND) with custom rate editing option.
- Live preview and a single-click Apply button that updates the calculator display immediately.
Form Integration:
- Automatically derives the default target currency from the currently selected wallet in TransactionFormModal and WalletFormModal.

2. Mobile Layout & Alignment Fixes

Centered the CalculatorModal dialog across all viewport sizes (including mobile devices) instead of anchoring as a bottom sheet.
Uniform 4-corner rounded Claymorphic borders (rounded-clay-lg & border border-clay-highlight/60) and safe padding with my-auto scrolling for small viewports.

3. Browser Title & Favicon Synchronization

Updated index.html to reference /src/static/logo.png directly via Vite asset pipeline.
Added cross-frame synchronization in DocumentTitle.tsx to push title and favicon updates to the parent window when running inside the Zalo Mini App Simulator iframe.

4. Internationalization (i18n)

Added comprehensive translation keys for currency conversion in both vi.json and en.json (compact "Áp dụng" / "Apply" action buttons).

## Summary of Changes

This pull request introduces a currency conversion feature into the transaction calculator (`CalculatorModal`), improves calculator modal positioning on mobile devices, and resolves browser title and favicon synchronization.

---

### Key Features & Improvements

#### 1. Currency Conversion in Calculator (`CalculatorModal`)
- **Exchange Rate Engine (`currency.service.ts` & `currency.ts`)**:
  - Provides standard baseline exchange rates for 11 popular currencies: `VND`, `USD`, `EUR`, `JPY`, `KRW`, `CNY`, `GBP`, `THB`, `SGD`, `AUD`, `CAD`.
  - Supports automatic fetching of latest market rates with offline fallback and a 12-hour `localStorage` cache.
  - Accurate conversion logic with currency-specific decimal rounding rules (0 decimals for VND, JPY, KRW; 2 decimals for USD, EUR, etc.).
- **Claymorphism UI & Controls**:
  - Clean circular icon-only toggle button (`ExchangeIcon`, size 18) in the modal header for seamless activation.
  - Interactive conversion panel with **From** and **To** currency selectors and a 1-tap swap button (`⇄`).
  - Real-time exchange rate indicator (`1 USD = 25,450 VND`) with custom rate editing option.
  - Live preview and a single-click **Apply** button that updates the calculator display immediately.
- **Form Integration**:
  - Automatically derives the default target currency from the currently selected wallet in `TransactionFormModal` and `WalletFormModal`.

#### 2. Mobile Layout & Alignment Fixes
- Centered the `CalculatorModal` dialog across all viewport sizes (including mobile devices) instead of anchoring as a bottom sheet.
- Uniform 4-corner rounded Claymorphic borders (`rounded-clay-lg` & `border border-clay-highlight/60`) and safe padding with `my-auto` scrolling for small viewports.

#### 3. Browser Title & Favicon Synchronization
- Updated `index.html` to reference `/src/static/logo.png` directly via Vite asset pipeline.
- Added cross-frame synchronization in `DocumentTitle.tsx` to push title and favicon updates to the parent window when running inside the Zalo Mini App Simulator iframe.

#### 4. Internationalization (i18n)
- Added comprehensive translation keys for currency conversion in both `vi.json` and `en.json` (compact "Áp dụng" / "Apply" action buttons).