fix: show transaction fee, est. time, and total rows for same-chain payments (#28652)

## **Description**

PR #28588 added a `hasQuoteResults` guard to hide fee/time/total rows
when bridge quotes fail (preventing incorrect data from displaying).
However, this also hid the rows for same-chain payments (USDC.E on
Polygon → Predict deposit on Polygon) where no bridge quote is needed
but valid fee data still exists.

This PR refines the visibility logic so rows are shown for same-chain
payments while still being hidden when quotes fail with a blocking
alert. It also removes the per-row `!hasQuotes` guards in `BridgeFeeRow`
and `ReceiveRow` since the parent component now handles the "no quotes"
error case.

**Changes:**
- `custom-amount-info.tsx`: `hasQuoteResults` now considers
`!hasSourceAmount && !hasBlockingAlerts` — shows rows for same-chain,
hides on quote failure
- `bridge-fee-row.tsx`: Removed `!hasQuotes` guard from fee calculation
— totals are trusted when the parent decides to render
- `bridge-time-row.tsx`: Added `isSameChain` to `showEstimate` —
displays "< 10 sec" for same-chain payments
- `receive-row.tsx`: Removed `!hasQuotes` guard and unused
`useTransactionPayQuotes` import

## **Changelog**

CHANGELOG entry: Fixed transaction fee, estimated time, and total rows
not appearing for same-chain Predict deposits/withdrawals

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open Add Prediction funds with USDC.E on Polygon
2. Enter an amount and press Done
3. Verify Transaction fee, Est. time, and Total rows appear with values
4. Open Predict Withdraw, select USDC.E on Polygon as receive token
5. Enter a withdrawal amount and press Done
6. Verify Transaction fee, Est. time, and You'll receive rows appear
with values
7. Trigger a "no quotes" scenario (e.g. select a token/amount with no
available route)
8. Verify fee/time/total rows are hidden and the button shows "No
quotes" disabled

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Adjusts confirmation UI gating for fee/time/total rows based on
quotes, source amount, and alerts; mistakes could hide or show incorrect
cost details during transaction confirmation.
> 
> **Overview**
> Fixes confirmation amount review so **fee/estimated time/total (or
receive) rows render for same-chain payments even when no bridge quotes
exist**, while still hiding those rows when a blocking
`AlertKeys.NoPayTokenQuotes` alert is present.
> 
> Moves the “no quotes” error handling to the parent
(`CustomAmountInfo`) via `showPaymentDetails`, and simplifies
`BridgeFeeRow` and `ReceiveRow` to compute from `totals` even without
quotes (with `BridgeFeeRow` only showing its tooltip when quotes exist).
`BridgeTimeRow` now also shows an estimate for same-chain payments
without quotes. Tests are updated/added to cover these scenarios.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
39e0f79. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Signed-off-by: dan437 <80175477+dan437@users.noreply.github.com>

Author: dan437

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.test.tsx

@@ -12,7 +12,8 @@ import { otherControllersMock } from '../../../__mocks__/controllers/other-contr
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useTransactionCustomAmount } from '../../../hooks/transactions/useTransactionCustomAmount';
 import { useConfirmationContext } from '../../../context/confirmation-context';
-import { Alert } from '../../../types/alerts';
+import { Alert, Severity } from '../../../types/alerts';
+import { AlertKeys } from '../../../constants/alerts';
 import {
   AlertsContextParams,
   useAlerts,
@@ -24,7 +25,9 @@ import { AssetType } from '../../../types/token';
 import {
   useTransactionPayRequiredTokens,
   useIsTransactionPayLoading,
+  useTransactionPayQuotes,
 } from '../../../hooks/pay/useTransactionPayData';
+import { useTransactionPayHasSourceAmount } from '../../../hooks/pay/useTransactionPayHasSourceAmount';
 import { strings } from '../../../../../../../locales/i18n';
 import { Hex } from '@metamask/utils';
 import { TransactionPayRequiredToken } from '@metamask/transaction-pay-controller';
@@ -47,6 +50,8 @@ jest.mock('../../../hooks/pay/useTransactionPayMetrics');
 jest.mock('../../../hooks/send/useAccountTokens');
 jest.mock('../../../hooks/pay/useTransactionPayAvailableTokens');
 jest.mock('../../../hooks/pay/useTransactionPayData');
+jest.mock('../../../hooks/pay/useTransactionPayHasSourceAmount');
+jest.mock('../../../hooks/pay/useTransactionPaySelectedFiatPaymentMethod');
 jest.mock('../../../hooks/transactions/useTransactionConfirm');
 jest.mock('../../../hooks/transactions/useTransactionMetadataRequest');
 jest.mock('../../../hooks/pay/useTransactionPayWithdraw', () => ({
@@ -184,6 +189,12 @@ describe('CustomAmountInfo', () => {
     useIsTransactionPayLoading,
   );
 
+  const useTransactionPayQuotesMock = jest.mocked(useTransactionPayQuotes);
+
+  const useTransactionPayHasSourceAmountMock = jest.mocked(
+    useTransactionPayHasSourceAmount,
+  );
+
   const useTransactionCustomAmountAlertsMock = jest.mocked(
     useTransactionCustomAmountAlerts,
   );
@@ -255,6 +266,8 @@ describe('CustomAmountInfo', () => {
     useTransactionPayRequiredTokensMock.mockReturnValue([]);
     useTransactionConfirmMock.mockReturnValue({} as never);
     useIsTransactionPayLoadingMock.mockReturnValue(false);
+    useTransactionPayQuotesMock.mockReturnValue([]);
+    useTransactionPayHasSourceAmountMock.mockReturnValue(false);
     useTokenFiatRatesMock.mockReturnValue([1, 1]);
     useTransactionMetadataRequestMock.mockReturnValue({
       type: TransactionType.contractInteraction,
@@ -537,6 +550,57 @@ describe('CustomAmountInfo', () => {
       from: '0xTestRecipient',
     });
   });
+
+  describe('showPaymentDetails', () => {
+    async function pressDone(
+      getByText: ReturnType<typeof render>['getByText'],
+    ) {
+      await act(async () => {
+        fireEvent.press(getByText(strings('confirm.edit_amount_done')));
+      });
+    }
+
+    it('shows fee rows for same-chain payment without quotes', async () => {
+      useTransactionPayHasSourceAmountMock.mockReturnValue(false);
+      useTransactionPayQuotesMock.mockReturnValue([]);
+
+      const { getByText, getByTestId } = render();
+      await pressDone(getByText);
+
+      expect(getByTestId('bridge-fee-row')).toBeOnTheScreen();
+    });
+
+    it('hides fee rows when no-quotes alert is present', async () => {
+      useTransactionPayHasSourceAmountMock.mockReturnValue(false);
+      useTransactionPayQuotesMock.mockReturnValue([]);
+      useAlertsMock.mockReturnValue({
+        alerts: [
+          {
+            key: AlertKeys.NoPayTokenQuotes,
+            severity: Severity.Danger,
+            isBlocking: true,
+          },
+        ] as Alert[],
+        generalAlerts: [] as Alert[],
+        fieldAlerts: [] as Alert[],
+      } as AlertsContextParams);
+
+      const { getByText, queryByTestId } = render();
+      await pressDone(getByText);
+
+      expect(queryByTestId('bridge-fee-row')).toBeNull();
+    });
+
+    it('shows fee rows when quotes exist regardless of source amount', async () => {
+      useTransactionPayHasSourceAmountMock.mockReturnValue(true);
+      useTransactionPayQuotesMock.mockReturnValue([{} as never]);
+
+      const { getByText, getByTestId } = render();
+      await pressDone(getByText);
+
+      expect(getByTestId('bridge-fee-row')).toBeOnTheScreen();
+    });
+  });
 });
 
 describe('CustomAmountInfoSkeleton', () => {

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

@@ -58,6 +58,7 @@ import {
   TextVariant as TextVariantComponent,
 } from '@metamask/design-system-react-native';
 import { useAlerts } from '../../../context/alert-system-context';
+import { AlertKeys } from '../../../constants/alerts';
 import { useTransactionConfirm } from '../../../hooks/transactions/useTransactionConfirm';
 import EngineService from '../../../../../../core/EngineService';
 import Engine from '../../../../../../core/Engine';
@@ -169,7 +170,15 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
     const isResultReady = useIsResultReady({ isKeyboardVisible });
     const quotes = useTransactionPayQuotes();
     const isQuotesLoading = useIsTransactionPayLoading();
-    const hasQuoteResults = isQuotesLoading || Boolean(quotes?.length);
+    const hasSourceAmount = useTransactionPayHasSourceAmount();
+    const { alerts } = useAlerts();
+    const hasNoQuotesAlert = alerts.some(
+      (a) => a.key === AlertKeys.NoPayTokenQuotes,
+    );
+    const showPaymentDetails =
+      isQuotesLoading ||
+      Boolean(quotes?.length) ||
+      (!hasSourceAmount && !hasNoQuotesAlert);
 
     const {
       amountFiat,
@@ -272,7 +281,7 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
               {!overrideContent && disablePay !== true && hasTokens && (
                 <PayWithRow />
               )}
-              {hasQuoteResults && (
+              {showPaymentDetails && (
                 <>
                   <BridgeFeeRow />
                   <BridgeTimeRow />

app/components/Views/confirmations/components/rows/bridge-fee-row/bridge-fee-row.test.tsx

@@ -106,10 +106,16 @@ describe('BridgeFeeRow', () => {
     expect(queryByTestId('metamask-fee-row-skeleton')).toBeNull();
   });
 
-  it('renders empty fee when there are no quotes', () => {
+  it('renders fee from totals when there are no quotes', () => {
     useTransactionPayQuotesMock.mockReturnValue([]);
-    const { getByTestId } = render();
-    expect(getByTestId('bridge-fee-row')).toBeDefined();
+    const { getByText } = render();
+    expect(getByText('$1.23')).toBeOnTheScreen();
+  });
+
+  it('does not render tooltip when there are no quotes', () => {
+    useTransactionPayQuotesMock.mockReturnValue([]);
+    const { queryByTestId } = render();
+    expect(queryByTestId('info-row-tooltip-open-btn')).toBeNull();
   });
 
   it('includes metamask fee in transaction fee total', () => {

app/components/Views/confirmations/components/rows/bridge-fee-row/bridge-fee-row.tsx

@@ -67,7 +67,7 @@ function TransactionFeeRow({
   const hasQuotes = Boolean(quotes?.length);
 
   const feeTotalUsd = useMemo(() => {
-    if (!totals?.fees || !hasQuotes) return '';
+    if (!totals?.fees) return '';
 
     const metaMask = totals.fees.metaMask.usd ?? 0;
     const provider = totals.fees.provider.usd;
@@ -80,7 +80,7 @@ function TransactionFeeRow({
         .plus(sourceNetwork)
         .plus(targetNetwork),
     );
-  }, [totals, formatFiat, hasQuotes]);
+  }, [totals, formatFiat]);
 
   if (isLoading) return <InfoRowSkeleton testId="bridge-fee-row-skeleton" />;
 

app/components/Views/confirmations/components/rows/bridge-time-row/bridge-time-row.test.tsx

@@ -102,6 +102,20 @@ describe('BridgeTimeRow', () => {
     expect(getByText('< 10 sec')).toBeDefined();
   });
 
+  it('renders estimated time for same-chain payment without quotes', () => {
+    useTransactionPayQuotesMock.mockReturnValue([]);
+    useTransactionPayTotalsMock.mockReturnValue({
+      estimatedDuration: 0,
+    } as TransactionPayTotals);
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: { chainId: '0x1' as Hex },
+    } as ReturnType<typeof useTransactionPayToken>);
+
+    const { getByText } = render();
+
+    expect(getByText('< 10 sec')).toBeOnTheScreen();
+  });
+
   it('renders skeleton if quotes loading', async () => {
     useIsTransactionPayLoadingMock.mockReturnValue(true);
 

app/components/Views/confirmations/components/rows/bridge-time-row/bridge-time-row.tsx

@@ -32,9 +32,11 @@ export function BridgeTimeRow() {
   const selectedFiatPaymentMethod =
     useTransactionPaySelectedFiatPaymentMethod();
 
+  const isSameChain = payToken?.chainId != null && payToken.chainId === chainId;
+
   const showEstimate =
     !hasTransactionType(transactionMetadata, HIDE_TYPES) &&
-    (isLoading || Boolean(quotes?.length)) &&
+    (isLoading || Boolean(quotes?.length) || isSameChain) &&
     !selectedFiatPaymentMethod;
 
   if (!showEstimate) {
@@ -44,8 +46,6 @@ export function BridgeTimeRow() {
   if (isLoading) {
     return <InfoRowSkeleton testId="bridge-time-row-skeleton" />;
   }
-
-  const isSameChain = payToken?.chainId === chainId;
   const formattedSeconds = formatSeconds(estimatedDuration ?? 0, isSameChain);
 
   return (

app/components/Views/confirmations/components/rows/receive-row/receive-row.test.tsx

@@ -6,14 +6,9 @@ import { simpleSendTransactionControllerMock } from '../../../__mocks__/controll
 import { transactionApprovalControllerMock } from '../../../__mocks__/controllers/approval-controller-mock';
 import {
   useIsTransactionPayLoading,
-  useTransactionPayQuotes,
   useTransactionPayTotals,
 } from '../../../hooks/pay/useTransactionPayData';
-import {
-  TransactionPayQuote,
-  TransactionPayTotals,
-} from '@metamask/transaction-pay-controller';
-import { Json } from '@metamask/utils';
+import { TransactionPayTotals } from '@metamask/transaction-pay-controller';
 import { otherControllersMock } from '../../../__mocks__/controllers/other-controllers-mock';
 
 jest.mock('../../../hooks/pay/useTransactionPayData');
@@ -40,7 +35,6 @@ describe('ReceiveRow', () => {
   const useIsTransactionPayLoadingMock = jest.mocked(
     useIsTransactionPayLoading,
   );
-  const useTransactionPayQuotesMock = jest.mocked(useTransactionPayQuotes);
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -54,9 +48,6 @@ describe('ReceiveRow', () => {
     } as unknown as TransactionPayTotals);
 
     useIsTransactionPayLoadingMock.mockReturnValue(false);
-    useTransactionPayQuotesMock.mockReturnValue([
-      {} as TransactionPayQuote<Json>,
-    ]);
   });
 
   it('renders the receive amount (input minus all fees)', () => {
@@ -97,10 +88,8 @@ describe('ReceiveRow', () => {
     expect(queryByText(EXPECTED_RECEIVE_MOCK)).toBeNull();
   });
 
-  it('renders empty receive amount when there are no quotes', () => {
-    useTransactionPayQuotesMock.mockReturnValue([]);
-
-    const { getByTestId } = render();
-    expect(getByTestId('receive-row')).toBeDefined();
+  it('renders receive amount from totals without quotes', () => {
+    const { getByText } = render();
+    expect(getByText(EXPECTED_RECEIVE_MOCK)).toBeOnTheScreen();
   });
 });

app/components/Views/confirmations/components/rows/receive-row/receive-row.tsx

@@ -9,7 +9,6 @@ import { View } from 'react-native';
 import { BigNumber } from 'bignumber.js';
 import {
   useIsTransactionPayLoading,
-  useTransactionPayQuotes,
   useTransactionPayTotals,
 } from '../../../hooks/pay/useTransactionPayData';
 import { InfoRowSkeleton, InfoRowVariant } from '../../UI/info-row/info-row';
@@ -31,11 +30,9 @@ export function ReceiveRow({ inputAmountUsd }: ReceiveRowProps) {
   const formatFiat = useFiatFormatter({ currency: 'usd' });
   const isLoading = useIsTransactionPayLoading();
   const totals = useTransactionPayTotals();
-  const quotes = useTransactionPayQuotes();
-  const hasQuotes = Boolean(quotes?.length);
 
   const receiveUsd = useMemo(() => {
-    if (!totals || inputAmountUsd == null || !hasQuotes) return '';
+    if (!totals || inputAmountUsd == null) return '';
 
     const inputUsd = new BigNumber(inputAmountUsd);
     const providerFee = new BigNumber(totals.fees?.provider?.usd ?? 0);
@@ -53,7 +50,7 @@ export function ReceiveRow({ inputAmountUsd }: ReceiveRowProps) {
       .plus(metaMaskFee);
     const youReceive = inputUsd.minus(totalFees);
     return formatFiat(youReceive.isPositive() ? youReceive : new BigNumber(0));
-  }, [totals, formatFiat, inputAmountUsd, hasQuotes]);
+  }, [totals, formatFiat, inputAmountUsd]);
 
   if (isLoading) {
     return <InfoRowSkeleton testId="receive-row-skeleton" />;