fix: transaction page display and alerts for money account transactions (#29725)

jpuri · web-flow · commit 0b8d63871a09 · 2026-05-05T15:38:51.000Z
## **Description** Fix transaction page display and alerts for money account transactions ## **Changelog**  CHANGELOG entry: ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1342 ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **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. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **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.  --- > [!NOTE] > **Medium Risk** > Expands several transaction-type conditionals to include `moneyAccountDeposit`/`moneyAccountWithdraw`, including post-quote config for withdrawals, which could affect how pay/withdraw transactions are labeled and configured. Coverage is improved with new unit tests, but regressions are possible if type routing is incomplete or mislabeled. > > **Overview** > Improves confirmations/activity transaction details handling for *money account* transactions by treating `moneyAccountDeposit`/`moneyAccountWithdraw` as supported types across the hero amount, summary routing, account row, and fee/total rows (including using *provider fee* labeling and receive-type totals where appropriate). > > Updates pay-related behavior so money-account withdrawals are excluded from insufficient-balance alerts, included in signed/submitted pay-type checks (for deposits), and avoid setting `refundTo`/`isHyperliquidSource` in `useTransactionPayPostQuote`. > > Adds/extends unit tests to cover the new money-account deposit/withdraw cases and the updated fallbacks/labels. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 08b5327. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-account-row/transaction-details-account-row.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-account-row/transaction-details-account-row.test.tsx
@@ -65,4 +65,18 @@ describe('TransactionDetailsAccountRow', () => {
     const { toJSON } = render();
     expect(toJSON()).toBeNull();
   });
+
+  it.each([
+    TransactionType.moneyAccountWithdraw,
+    TransactionType.perpsWithdraw,
+    TransactionType.predictClaim,
+    TransactionType.predictWithdraw,
+  ])('renders account row for %s', (type) => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: { ...TRANSACTION_META_MOCK, type },
+    });
+
+    const { getByText } = render();
+    expect(getByText(ACCOUNT_NAME_MOCK)).toBeDefined();
+  });
 });
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-account-row/transaction-details-account-row.tsx b/app/components/Views/confirmations/components/activity/transaction-details-account-row/transaction-details-account-row.tsx
@@ -11,6 +11,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 import { hasTransactionType } from '../../../utils/transaction';
 
 const TRANSACTION_TYPES = [
+  TransactionType.moneyAccountWithdraw,
   TransactionType.perpsWithdraw,
   TransactionType.predictClaim,
   TransactionType.predictWithdraw,
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-bridge-fee-row/transaction-details-bridge-fee-row.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-bridge-fee-row/transaction-details-bridge-fee-row.test.tsx
@@ -68,6 +68,20 @@ describe('TransactionDetailsBridgeFeeRow', () => {
     expect(getByText('Provider fee')).toBeOnTheScreen();
   });
 
+  it('renders "Provider fee" label for money account withdrawals', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        type: TransactionType.moneyAccountWithdraw,
+        metamaskPay: {
+          bridgeFeeFiat: BRIDGE_FEE_FIAT_MOCK,
+        },
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+    expect(getByText('Provider fee')).toBeOnTheScreen();
+  });
+
   it('renders nothing if no bridge fee fiat', () => {
     useTransactionDetailsMock.mockReturnValue({
       transactionMeta: {
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-bridge-fee-row/transaction-details-bridge-fee-row.tsx b/app/components/Views/confirmations/components/activity/transaction-details-bridge-fee-row/transaction-details-bridge-fee-row.tsx
@@ -16,8 +16,9 @@ export function TransactionDetailsBridgeFeeRow() {
   const { bridgeFeeFiat } = metamaskPay || {};
 
   const isWithdraw = hasTransactionType(transactionMeta, [
-    TransactionType.predictWithdraw,
+    TransactionType.moneyAccountWithdraw,
     TransactionType.perpsWithdraw,
+    TransactionType.predictWithdraw,
   ]);
 
   const label = isWithdraw
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-hero/transaction-details-hero.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-hero/transaction-details-hero.test.tsx
@@ -218,4 +218,19 @@ describe('TransactionDetailsHero', () => {
     const { queryByTestId } = render();
     expect(queryByTestId('transaction-details-hero')).toBeNull();
   });
+
+  it.each([
+    TransactionType.moneyAccountDeposit,
+    TransactionType.moneyAccountWithdraw,
+  ])('renders hero amount for %s', (type) => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        ...TRANSACTION_META_MOCK,
+        type,
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+    expect(getByText('$123.46')).toBeDefined();
+  });
 });
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-hero/transaction-details-hero.tsx b/app/components/Views/confirmations/components/activity/transaction-details-hero/transaction-details-hero.tsx
@@ -32,6 +32,8 @@ import { RootState } from '../../../../../../reducers';
 import useNetworkInfo from '../../../hooks/useNetworkInfo';
 
 const SUPPORTED_TYPES = [
+  TransactionType.moneyAccountDeposit,
+  TransactionType.moneyAccountWithdraw,
   TransactionType.musdClaim,
   TransactionType.musdConversion,
   TransactionType.perpsDeposit,
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-network-fee-row/transaction-details-network-fee-row.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-network-fee-row/transaction-details-network-fee-row.test.tsx
@@ -65,4 +65,15 @@ describe('TransactionDetailsNetworkFeeRow', () => {
 
     expect(toJSON()).toBeNull();
   });
+
+  it('renders calculated network fee for moneyAccountWithdraw fallback', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        type: TransactionType.moneyAccountWithdraw,
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+    expect(getByText(`$${CALCULATED_FEE_MOCK}`)).toBeDefined();
+  });
 });
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-network-fee-row/transaction-details-network-fee-row.tsx b/app/components/Views/confirmations/components/activity/transaction-details-network-fee-row/transaction-details-network-fee-row.tsx
@@ -11,6 +11,7 @@ import { TransactionDetailsSelectorIDs } from '../TransactionDetailsModal.testId
 import { usePayFiatFormatter } from '../../../hooks/pay/usePayFiatFormatter';
 
 const FALLBACK_TYPES = [
+  TransactionType.moneyAccountWithdraw,
   TransactionType.perpsWithdraw,
   TransactionType.predictClaim,
   TransactionType.predictWithdraw,
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-summary/transaction-details-summary.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-summary/transaction-details-summary.test.tsx
@@ -128,6 +128,20 @@ describe('TransactionDetailsSummary', () => {
     expect(getByText('ReceiveSummaryLine')).toBeDefined();
   });
 
+  it('routes moneyAccountDeposit to ReceiveSummaryLine', () => {
+    const { getByText } = render({
+      transactions: [
+        {
+          id: transactionIdMock,
+          chainId: '0x1',
+          type: TransactionType.moneyAccountDeposit,
+        },
+      ],
+    });
+
+    expect(getByText('ReceiveSummaryLine')).toBeDefined();
+  });
+
   it('routes unsupported types to DefaultSummaryLine', () => {
     const { getByText } = render({
       transactions: [
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-summary/transaction-details-summary.tsx b/app/components/Views/confirmations/components/activity/transaction-details-summary/transaction-details-summary.tsx
@@ -114,6 +114,7 @@ function SummaryLine({
 
   if (
     hasTransactionType(transactionMeta, [
+      TransactionType.moneyAccountDeposit,
       TransactionType.perpsDeposit,
       TransactionType.predictDeposit,
       TransactionType.musdConversion,
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-total-row/transaction-details-total-row.test.tsx b/app/components/Views/confirmations/components/activity/transaction-details-total-row/transaction-details-total-row.test.tsx
@@ -130,4 +130,31 @@ describe('TransactionDetailsTotalRow', () => {
     // Uses fiatUnformatted and user's currency formatter
     expect(getByText('$123.45')).toBeOnTheScreen();
   });
+
+  it('falls back to token amount for moneyAccountWithdraw without pay totals', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        metamaskPay: {},
+        type: TransactionType.moneyAccountWithdraw,
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+    expect(getByText(`$${TOKEN_TOTAL}`)).toBeOnTheScreen();
+  });
+
+  it('renders targetFiat for moneyAccountWithdraw as a receive-type', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        type: TransactionType.moneyAccountWithdraw,
+        metamaskPay: {
+          totalFiat: PAY_TOTAL,
+          targetFiat: '88.88',
+        },
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+    expect(getByText('$88.88')).toBeOnTheScreen();
+  });
 });
diff --git a/app/components/Views/confirmations/components/activity/transaction-details-total-row/transaction-details-total-row.tsx b/app/components/Views/confirmations/components/activity/transaction-details-total-row/transaction-details-total-row.tsx
@@ -12,12 +12,14 @@ import { usePayFiatFormatter } from '../../../hooks/pay/usePayFiatFormatter';
 import { USER_CURRENCY_TYPES } from '../../../constants/confirmations';
 
 const FALLBACK_TYPES = [
+  TransactionType.moneyAccountWithdraw,
   TransactionType.musdClaim,
   TransactionType.perpsWithdraw,
   TransactionType.predictWithdraw,
 ];
 
 const RECEIVE_TYPES = [
+  TransactionType.moneyAccountWithdraw,
   TransactionType.musdClaim,
   TransactionType.perpsWithdraw,
   TransactionType.predictClaim,
diff --git a/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.test.tsx b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.test.tsx
@@ -123,6 +123,7 @@ describe('PayTokenAmount', () => {
   });
 
   it.each([
+    TransactionType.moneyAccountDeposit,
     TransactionType.perpsDeposit,
     TransactionType.perpsDepositAndOrder,
     TransactionType.predictDeposit,
diff --git a/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.tsx b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.tsx
@@ -80,15 +80,17 @@ export function PayTokenAmount({ amountHuman, disabled }: PayTokenAmountProps) {
     return null;
   }
 
-  // Don't render token amount for perps and predict deposit transactions
-  const isPerpsOrPredictDeposit = hasTransactionType(transaction, [
+  // Don't render token amount for perps, predict, and money-account deposit
+  // transactions — they have custom amount entry UIs.
+  const isCustomAmountDeposit = hasTransactionType(transaction, [
+    TransactionType.moneyAccountDeposit,
     TransactionType.perpsDeposit,
     TransactionType.perpsDepositAndOrder,
     TransactionType.predictDeposit,
     TransactionType.predictDepositAndOrder,
   ]);
 
-  if (isPerpsOrPredictDeposit) {
+  if (isCustomAmountDeposit) {
     return null;
   }
 
diff --git a/app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.test.ts b/app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.test.ts
@@ -290,6 +290,17 @@ describe('useInsufficientBalanceAlert', () => {
     expect(result.current).toStrictEqual([]);
   });
 
+  it('returns empty array if transaction type is moneyAccountWithdraw', () => {
+    mockUseTransactionMetadataRequest.mockReturnValue({
+      ...mockTransaction,
+      type: TransactionType.moneyAccountWithdraw,
+    } as unknown as TransactionMeta);
+
+    const { result } = renderHook(() => useInsufficientBalanceAlert());
+
+    expect(result.current).toStrictEqual([]);
+  });
+
   it('returns empty array when using pay source amounts', () => {
     useTransactionPayHasSourceAmountMock.mockReturnValue(true);
 
diff --git a/app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.ts b/app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.ts
@@ -17,6 +17,7 @@ import { useHasInsufficientBalance } from '../useHasInsufficientBalance';
 import { useIsTransactionPayLoading } from '../pay/useTransactionPayData';
 
 const IGNORE_TYPES = [
+  TransactionType.moneyAccountWithdraw,
   TransactionType.perpsWithdraw,
   TransactionType.predictWithdraw,
 ];
diff --git a/app/components/Views/confirmations/hooks/alerts/useSignedOrSubmittedAlert.ts b/app/components/Views/confirmations/hooks/alerts/useSignedOrSubmittedAlert.ts
@@ -16,6 +16,7 @@ import { isHardwareAccount } from '../../../../../util/address';
 import { selectMetaMaskPayHardwareFlags } from '../../../../../selectors/featureFlagController/confirmations';
 
 export const PAY_TYPES = [
+  TransactionType.moneyAccountDeposit,
   TransactionType.perpsDeposit,
   TransactionType.predictDeposit,
 ];
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayPostQuote.test.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayPostQuote.test.ts
@@ -236,4 +236,31 @@ describe('useTransactionPayPostQuote', () => {
     expect(config.refundTo).toBe(PROXY_ADDRESS_MOCK);
     expect(config.isHyperliquidSource).toBeUndefined();
   });
+
+  it('skips refundTo and isHyperliquidSource for moneyAccountWithdraw', () => {
+    useTransactionMetadataRequestMock.mockReturnValue({
+      id: TRANSACTION_ID_MOCK,
+      txParams: { from: FROM_MOCK },
+      type: TransactionType.moneyAccountWithdraw,
+    } as never);
+    useTransactionPayWithdrawMock.mockReturnValue({
+      isWithdraw: true,
+      canSelectWithdrawToken: true,
+    });
+
+    renderHook(() => useTransactionPayPostQuote());
+
+    const callback = setTransactionConfigMock.mock.calls[0][1];
+    const config = {} as {
+      isPostQuote?: boolean;
+      refundTo?: Hex;
+      isHyperliquidSource?: boolean;
+    };
+    callback(config);
+
+    expect(config.isPostQuote).toBe(true);
+    expect(config.refundTo).toBeUndefined();
+    expect(config.isHyperliquidSource).toBeUndefined();
+    expect(computeProxyAddressMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayPostQuote.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayPostQuote.ts
@@ -30,6 +30,9 @@ export function useTransactionPayPostQuote(): void {
   const isPerpsWithdraw = hasTransactionType(transactionMeta, [
     TransactionType.perpsWithdraw,
   ]);
+  const isMoneyAccountWithdraw = hasTransactionType(transactionMeta, [
+    TransactionType.moneyAccountWithdraw,
+  ]);
 
   useEffect(() => {
     if (
@@ -45,12 +48,15 @@ export function useTransactionPayPostQuote(): void {
       const from = transactionMeta?.txParams?.from as Hex | undefined;
 
       // Predict withdrawals refund to the Safe proxy address.
-      // Perps withdrawals don't use refundTo -- funds go HyperCore -> Relay directly.
-      const refundTo = isPerpsWithdraw
-        ? undefined
-        : from
-          ? computeProxyAddress(from)
-          : undefined;
+      // Perps and money-account withdrawals don't use refundTo -- funds land
+      // on the user's address directly (HyperCore -> Relay for perps; vault
+      // teller -> user for money account).
+      const refundTo =
+        isPerpsWithdraw || isMoneyAccountWithdraw
+          ? undefined
+          : from
+            ? computeProxyAddress(from)
+            : undefined;
 
       TransactionPayController.setTransactionConfig(transactionId, (config) => {
         config.isPostQuote = true;
@@ -70,6 +76,7 @@ export function useTransactionPayPostQuote(): void {
         transactionId,
         refundTo,
         isPerpsWithdraw,
+        isMoneyAccountWithdraw,
       });
     } catch (error) {
       log('Error initializing post-quote transaction', {
@@ -79,6 +86,7 @@ export function useTransactionPayPostQuote(): void {
     }
   }, [
     canSelectWithdrawToken,
+    isMoneyAccountWithdraw,
     isPerpsWithdraw,
     transactionId,
     transactionMeta?.txParams?.from,
diff --git a/app/components/Views/confirmations/hooks/transactions/useTransactionConfirm.ts b/app/components/Views/confirmations/hooks/transactions/useTransactionConfirm.ts
@@ -22,6 +22,8 @@ import { useMusdConfirmNavigation } from '../../../../UI/Earn/hooks/useMusdConfi
 const log = createProjectLogger('transaction-confirm');
 
 export const GO_BACK_TYPES = [
+  TransactionType.moneyAccountDeposit,
+  TransactionType.moneyAccountWithdraw,
   TransactionType.perpsWithdraw,
   TransactionType.predictClaim,
   TransactionType.predictDeposit,
