MetaMask / MetaMask/metamask-mobile
Update alerts, fee/time rows, and amount input for fiat payment
- Dominant language
- TypeScript
- Stars
- 3k
- Forks
- 1.7k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
**Goal**
Ensure the confirmation screen renders correctly when a fiat payment method is selected: suppress irrelevant balance alerts, show fiat-specific fee info, hide inapplicable time estimates, and adapt the amount input for fiat entry.
**Scope**
- **`useInsufficientPayTokenBalanceAlert`**:
- Import `useTransactionPaySelectedFiatPaymentMethod()`.
- When a fiat payment method is selected, return `[]` — user is buying with fiat, balance alerts are irrelevant.
- **`useNoPayTokenQuotesAlert`**:
- Import `useTransactionPayFiatPayment()`.
- Add fiat-specific "no quotes" detection: when fiat is selected + valid amount entered + no quotes returned → show blocking alert.
- Existing non-fiat logic unchanged.
- **`bridge-fee-row`**:
- Import `useTransactionPaySelectedFiatPaymentMethod()`.
- When fiat is selected, show fiat provider fee (from `quote.fees.fiatProvider`).
- Pass `isFiatPaymentSelected` to sub-components for conditional rendering.
- **`bridge-time-row`**:
- Import `useTransactionPaySelectedFiatPaymentMethod()`.
- When fiat is selected, hide the bridge time estimate row (fiat timing is communicated via payment method delay description in the Pay-With row).
- **`custom-amount-info`**:
- Import `useTransactionPayFiatPayment()`.
- When a fiat payment method is selected, the amount input calls `updateFiatPayment({ transactionId, amount })` instead of the token amount flow.
- Hide percentage quick-pick buttons when fiat is selected (`hidePercentageButtons={Boolean(selectedFiatPaymentMethodId)}`).
**Acceptance criteria**
- No "insufficient balance" alert when fiat payment is selected.
- "No quotes" alert shows for fiat when amount is entered but quotes fail.
- Fee row shows fiat provider fee when fiat is selected.
- Time row is hidden when fiat is selected.
- Amount input updates `fiatPayment.amount` via `updateFiatPayment`.
- Percentage buttons hidden when fiat is selected.
- All existing non-fiat behavior is completely unchanged.
- Unit tests for alert hooks with fiat scenarios.
**Out of scope**
- Confirmation submit/trigger logic (Task 6).
- Ramp flow navigation.
**Key files**
- `app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.ts`
- `app/components/Views/confirmations/hooks/alerts/useNoPayTokenQuotesAlert.ts`
- `app/components/Views/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx`
- `app/components/Views/confirmations/components/rows/bridge-time-row/bridge-time-row.tsx`
- `app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx`
Contributor guide
Research direction
Start with the five listed TypeScript files under app/components/Views/confirmations and trace the existing non-fiat hooks and row behavior before checking their unit tests. Implement the fiat branches without changing non-fiat behavior, then verify the alert, fee, time-row, amount-update, and percentage-button acceptance criteria, including fiat alert scenarios.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100