fix: cp-7.60.0 fix metamask pay totals (#22829)

## **Description**

Fix total calculation when using alternate currencies.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #22714 

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **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]
> Switches to a unified USD fiat formatter across confirmation views,
fixes total/fee/balance USD calculations, and updates custom amount
logic and tests.
> 
> - **Confirmations UI (fiat display)**:
> - Replace `useTransactionPayFiat` with `useFiatFormatter({ currency:
'usd' })` in `predict-claim-footer`, `bridge-fee-row`, `pay-with-row`,
and `total-row`.
> - Format amounts via `BigNumber` and use USD fields (`.usd`,
`balanceUsd`) for totals/fees/balances.
> - **Bridge fees**:
> - Recalculate fee totals and tooltip breakdown using USD values
(provider + sourceNetwork + targetNetwork) and format with USD
formatter.
> - **Pay With row**:
> - Display USD balance using `payToken.balanceUsd` instead of
fiat-converted balance.
> - **Predict claim footer**:
>   - Format single-win amount in USD via formatter.
> - **Custom amount logic** (`useTransactionCustomAmount`):
> - Use token USD rate and direct USD balances; compute percentage
amounts from USD balances; update `useTokenBalance` to return USD
values.
>   - Adjust related test expectations (e.g., 43% -> `530.86`).
> - **Cleanup**:
>   - Remove `useTransactionPayFiat` hook and its test.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e213a26. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: matthewwalsh0

app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.tsx

@@ -21,7 +21,8 @@ import { selectPredictWonPositions } from '../../../../../UI/Predict/selectors/p
 import { selectSelectedInternalAccountAddress } from '../../../../../../selectors/accountsController';
 import { PredictPosition } from '../../../../../UI/Predict';
 import { AlignItems, FlexDirection } from '../../../../../UI/Box/box.types';
-import { useTransactionPayFiat } from '../../../hooks/pay/useTransactionPayFiat';
+import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
+import { BigNumber } from 'bignumber.js';
 
 export interface PredictClaimFooterProps {
   onPress: () => void;
@@ -71,13 +72,13 @@ export function PredictClaimFooter({ onPress }: PredictClaimFooterProps) {
 }
 
 function SingleWin({ wonPositions }: { wonPositions: PredictPosition[] }) {
-  const { formatFiat } = useTransactionPayFiat();
+  const formatFiat = useFiatFormatter({ currency: 'usd' });
 
   const position = wonPositions[0];
   const { amount } = position;
 
   const amountFormatted = useMemo(
-    () => formatFiat(amount),
+    () => formatFiat(new BigNumber(amount)),
     [amount, formatFiat],
   );
 

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

@@ -19,16 +19,16 @@ import {
   useTransactionPayQuotes,
   useTransactionPayTotals,
 } from '../../../hooks/pay/useTransactionPayData';
-import { useTransactionPayFiat } from '../../../hooks/pay/useTransactionPayFiat';
 import { BigNumber } from 'bignumber.js';
 import { InfoRowSkeleton, InfoRowVariant } from '../../UI/info-row/info-row';
 import AlertRow from '../../UI/info-row/alert-row';
 import { RowAlertKey } from '../../UI/info-row/alert-row/constants';
 import { useAlerts } from '../../../context/alert-system-context';
+import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
 
 export function BridgeFeeRow() {
   const transactionMetadata = useTransactionMetadataOrThrow();
-  const { formatFiat } = useTransactionPayFiat();
+  const formatFiat = useFiatFormatter({ currency: 'usd' });
   const isLoading = useIsTransactionPayLoading();
   const quotes = useTransactionPayQuotes();
   const totals = useTransactionPayTotals();
@@ -128,7 +128,7 @@ function FeesTooltip({
   message: string;
   totals: TransactionPayTotals;
 }) {
-  const { formatFiat } = useTransactionPayFiat();
+  const formatFiat = useFiatFormatter({ currency: 'usd' });
 
   const networkFeeUsd = useMemo(
     () =>

app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx

@@ -25,12 +25,12 @@ import Icon, {
   IconName,
   IconSize,
 } from '../../../../../../component-library/components/Icons/Icon';
-import { useTransactionPayFiat } from '../../../hooks/pay/useTransactionPayFiat';
+import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
 
 export function PayWithRow() {
   const navigation = useNavigation();
   const { payToken } = useTransactionPayToken();
-  const { formatFiat } = useTransactionPayFiat();
+  const formatFiat = useFiatFormatter({ currency: 'usd' });
   const { styles } = useStyles(styleSheet, {});
 
   const {
@@ -46,8 +46,8 @@ export function PayWithRow() {
   }, [canEdit, navigation]);
 
   const balanceUsdFormatted = useMemo(
-    () => formatFiat(new BigNumber(payToken?.balanceFiat ?? '0')),
-    [formatFiat, payToken?.balanceFiat],
+    () => formatFiat(new BigNumber(payToken?.balanceUsd ?? '0')),
+    [formatFiat, payToken?.balanceUsd],
   );
 
   if (!payToken) {

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

@@ -11,11 +11,11 @@ import {
   useIsTransactionPayLoading,
   useTransactionPayTotals,
 } from '../../../hooks/pay/useTransactionPayData';
-import { useTransactionPayFiat } from '../../../hooks/pay/useTransactionPayFiat';
 import { InfoRowSkeleton, InfoRowVariant } from '../../UI/info-row/info-row';
+import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
 
 export function TotalRow() {
-  const { formatFiat } = useTransactionPayFiat();
+  const formatFiat = useFiatFormatter({ currency: 'usd' });
   const isLoading = useIsTransactionPayLoading();
   const totals = useTransactionPayTotals();
 

app/components/Views/confirmations/hooks/pay/useTransactionPayFiat.test.ts

@@ -294,7 +294,7 @@ describe('useTransactionCustomAmount', () => {
         result.current.updatePendingAmountPercentage(43);
       });
 
-      expect(result.current.amountFiat).toBe('1061.72');
+      expect(result.current.amountFiat).toBe('530.86');
     });
 
     it('minus buffers if 100', async () => {

app/components/Views/confirmations/hooks/pay/useTransactionPayFiat.ts

@@ -15,7 +15,6 @@ import { useSelector } from 'react-redux';
 import { selectMetaMaskPayFlags } from '../../../../../selectors/featureFlagController/confirmations';
 import { getNativeTokenAddress } from '@metamask/assets-controllers';
 import { hasTransactionType } from '../../utils/transaction';
-import { useTransactionPayFiat } from '../pay/useTransactionPayFiat';
 import { usePredictBalance } from '../../../../UI/Predict/hooks/usePredictBalance';
 import { useTransactionPayRequiredTokens } from '../pay/useTransactionPayData';
 
@@ -161,22 +160,24 @@ function useMaxPercentage() {
   }, [chainId, featureFlags, payToken, requiredTokens]);
 }
 
-function useTokenBalance(tokenFiatRate: number) {
+function useTokenBalance(tokenUsdRate: number) {
   const transactionMeta = useTransactionMetadataRequest() as TransactionMeta;
-  const { convertFiat } = useTransactionPayFiat();
 
   const { payToken } = useTransactionPayToken();
-  const payTokenBalance = convertFiat(payToken?.balanceUsd ?? 0);
+
+  const payTokenBalanceUsd = new BigNumber(
+    payToken?.balanceUsd ?? 0,
+  ).toNumber();
 
   const { balance: predictBalanceHuman } = usePredictBalance({
     loadOnMount: true,
   });
 
   const predictBalanceUsd = new BigNumber(predictBalanceHuman ?? '0')
-    .multipliedBy(tokenFiatRate)
+    .multipliedBy(tokenUsdRate)
     .toNumber();
 
   return hasTransactionType(transactionMeta, [TransactionType.predictWithdraw])
     ? predictBalanceUsd
-    : payTokenBalance;
+    : payTokenBalanceUsd;
 }