feat: Move MM fee into a tooltip for Predict Withdraw (#26637)

## **Description**
Moves MM fee into a tooltip for Predict Withdraw and use "Provider fee"
instead of "Bridge Provider fee" in a tooltip.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: null

## **Manual testing steps**
1. Open Predict Withdraw
2. Select a token for withdraw
3. On the overview page click on the tooltip for Transaction fee

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**
> Changes fee presentation and the `Transaction fee` total calculation
to include the MetaMask fee, which could affect user-visible pricing and
requires careful validation of totals across transaction types.
> 
> **Overview**
> Updates the confirmation `Transaction fee` row to **include the
MetaMask fee in the displayed total** and removes the dedicated
`metamask-fee-row` (and its loading skeleton) from the main list.
> 
> Moves the MetaMask fee breakdown into the transaction-fee tooltip
alongside network and provider fees, and renames the tooltip label from
*Bridge provider fee* to **Provider fee** (adds new
`confirm.label.provider_fee` locale string).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
25f47bb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

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

Author: dan437

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

@@ -86,7 +86,7 @@ describe('BridgeFeeRow', () => {
     expect(getByTestId(ConfirmationRowComponentIDs.NETWORK_FEE)).toBeDefined();
     expect(getByText('$0.23')).toBeDefined();
     expect(queryByText('$1.23')).toBeNull();
-    expect(queryByTestId('metamask-fee-row')).toBeDefined();
+    expect(queryByTestId('metamask-fee-row')).toBeNull();
     expect(queryByTestId('bridge-fee-row')).toBeNull();
   });
 
@@ -125,10 +125,10 @@ describe('BridgeFeeRow', () => {
   it('renders skeletons if quotes loading', async () => {
     useIsTransactionPayLoadingMock.mockReturnValue(true);
 
-    const { getByTestId } = render();
+    const { getByTestId, queryByTestId } = render();
 
     expect(getByTestId('bridge-fee-row-skeleton')).toBeDefined();
-    expect(getByTestId('metamask-fee-row-skeleton')).toBeDefined();
+    expect(queryByTestId('metamask-fee-row-skeleton')).toBeNull();
   });
 
   it('does not render tooltip if no quotes', async () => {
@@ -137,42 +137,52 @@ describe('BridgeFeeRow', () => {
     expect(queryByTestId('info-row-tooltip-open-btn')).toBeNull();
   });
 
-  it('renders metamask fee from totals', () => {
+  it('includes metamask fee in transaction fee total', () => {
     useTransactionTotalsMock.mockReturnValue({
       fees: {
-        provider: { usd: '0.03' },
-        sourceNetwork: { estimate: { usd: '0.01' } },
+        provider: { usd: '0' },
+        sourceNetwork: { estimate: { usd: '0' } },
         targetNetwork: { usd: '0' },
-        metaMask: { usd: '0.00435', fiat: '0.00435' },
+        metaMask: { usd: '0.50', fiat: '0.50' },
       },
     } as TransactionPayTotals);
 
     const { getByText } = render();
 
-    expect(getByText('<$0.01')).toBeOnTheScreen();
+    expect(getByText('$0.50')).toBeOnTheScreen();
   });
 
-  it('renders metamask fee as $0 when fee is zero', () => {
+  it('transaction fee total is correct when metamask fee is zero', () => {
     useTransactionTotalsMock.mockReturnValue({
       fees: {
-        provider: { usd: '0.03' },
-        sourceNetwork: { estimate: { usd: '0.01' } },
-        targetNetwork: { usd: '0' },
+        provider: { usd: '1.00' },
+        sourceNetwork: { estimate: { usd: '0.20' } },
+        targetNetwork: { usd: '0.03' },
         metaMask: { usd: '0', fiat: '0' },
       },
     } as TransactionPayTotals);
 
     const { getByText } = render();
 
-    expect(getByText('$0')).toBeOnTheScreen();
+    expect(getByText('$1.23')).toBeOnTheScreen();
   });
 
-  it('does not render metamask fee if no quotes', async () => {
-    useTransactionPayQuotesMock.mockReturnValue([]);
+  it('renders metamask fee in tooltip', async () => {
+    useTransactionTotalsMock.mockReturnValue({
+      fees: {
+        provider: { usd: '0.05' },
+        sourceNetwork: { estimate: { usd: '0.01' } },
+        targetNetwork: { usd: '0' },
+        metaMask: { usd: '0.50', fiat: '0.50' },
+      },
+    } as TransactionPayTotals);
 
-    const { getByTestId, queryByTestId } = render();
+    const { getByTestId, getByText } = render();
 
-    expect(getByTestId('bridge-fee-row')).toBeDefined();
-    expect(queryByTestId('metamask-fee-row')).toBeNull();
+    await act(async () => {
+      fireEvent.press(getByTestId('info-row-tooltip-open-btn'));
+    });
+
+    expect(getByText('$0.50')).toBeOnTheScreen();
   });
 });

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

@@ -1,5 +1,4 @@
 import React, { ReactNode, useMemo } from 'react';
-import InfoRow from '../../UI/info-row';
 import { useTransactionMetadataOrThrow } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import Text, {
   TextColor,
@@ -44,28 +43,22 @@ export function BridgeFeeRow() {
 
   if (hasTransactionType(transactionMetadata, NETWORK_FEE_ONLY_TYPES)) {
     return (
-      <>
-        <NetworkFeeRow
-          totals={totals}
-          hasAlert={hasAlert}
-          isLoading={isLoading}
-        />
-        <MetaMaskFeeRow quotes={quotes} totals={totals} isLoading={isLoading} />
-      </>
-    );
-  }
-
-  return (
-    <>
-      <TransactionFeeRow
+      <NetworkFeeRow
         totals={totals}
-        quotes={quotes}
-        transactionMeta={transactionMetadata}
         hasAlert={hasAlert}
         isLoading={isLoading}
       />
-      <MetaMaskFeeRow quotes={quotes} totals={totals} isLoading={isLoading} />
-    </>
+    );
+  }
+
+  return (
+    <TransactionFeeRow
+      totals={totals}
+      quotes={quotes}
+      transactionMeta={transactionMetadata}
+      hasAlert={hasAlert}
+      isLoading={isLoading}
+    />
   );
 }
 
@@ -88,7 +81,8 @@ function TransactionFeeRow({
     if (!totals?.fees) return '';
 
     return formatFiat(
-      new BigNumber(totals.fees.provider.usd)
+      new BigNumber(totals.fees.metaMask.usd ?? 0)
+        .plus(totals.fees.provider.usd)
         .plus(totals.fees.sourceNetwork.estimate.usd)
         .plus(totals.fees.targetNetwork.usd),
     );
@@ -174,41 +168,6 @@ function NetworkFeeRow({
   );
 }
 
-function MetaMaskFeeRow({
-  quotes,
-  totals,
-  isLoading,
-}: {
-  quotes?: TransactionPayQuote<Json>[];
-  totals?: TransactionPayTotals;
-  isLoading: boolean;
-}) {
-  const formatFiat = useFiatFormatter({ currency: 'usd' });
-
-  const hasQuotes = Boolean(quotes?.length);
-
-  const metamaskFeeUsd = useMemo(
-    () => formatFiat(new BigNumber(totals?.fees.metaMask.usd ?? 0)),
-    [totals, formatFiat],
-  );
-
-  if (isLoading) return <InfoRowSkeleton testId="metamask-fee-row-skeleton" />;
-
-  if (!hasQuotes) return null;
-
-  return (
-    <InfoRow
-      testID="metamask-fee-row"
-      label={strings('confirm.label.metamask_fee')}
-      rowVariant={InfoRowVariant.Small}
-    >
-      <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
-        {metamaskFeeUsd}
-      </Text>
-    </InfoRow>
-  );
-}
-
 function Tooltip({
   transactionMeta,
   totals,
@@ -265,6 +224,11 @@ function FeesTooltip({
     [totals, formatFiat],
   );
 
+  const metaMaskFeeUsd = useMemo(
+    () => formatFiat(new BigNumber(totals.fees.metaMask.usd ?? 0)),
+    [totals, formatFiat],
+  );
+
   return (
     <Box gap={14}>
       <Text>{message}</Text>
@@ -282,10 +246,19 @@ function FeesTooltip({
         justifyContent={JustifyContent.spaceBetween}
       >
         <Text color={TextColor.Alternative}>
-          {strings('confirm.label.bridge_fee')}
+          {strings('confirm.label.provider_fee')}
         </Text>
         <Text color={TextColor.Alternative}>{providerFeeUsd}</Text>
       </Box>
+      <Box
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
+        <Text color={TextColor.Alternative}>
+          {strings('confirm.label.metamask_fee')}
+        </Text>
+        <Text color={TextColor.Alternative}>{metaMaskFeeUsd}</Text>
+      </Box>
     </Box>
   );
 }

locales/languages/en.json

@@ -6318,7 +6318,8 @@
       "transaction_fees": "Transaction fees",
       "metamask_fee": "MetaMask fee",
       "network_fee": "Network fee",
-      "bridge_fee": "Bridge provider fee"
+      "bridge_fee": "Bridge provider fee",
+      "provider_fee": "Provider fee"
     },
     "title": {
       "signature": "Signature request",