MetaMask / MetaMask/metamask-mobile

Update alerts, fee/time rows, and amount input for fiat payment

Open
#27,114 0 comments 0 reactions 0 assignees View on GitHub
INVALID-ISSUE-TEMPLATE
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.