Add MM Pay provider fallback and Across routing support

Author: pedronfigueiredo

app/components/UI/Perps/components/PerpsProgressBar/PerpsProgressBar.test.tsx

@@ -876,6 +876,32 @@ describe('PerpsProgressBar', () => {
       );
     });
 
+    it('resumes progress from persisted state for the same withdrawal', () => {
+      const mockPersistentProgress = {
+        progress: 99,
+        lastUpdated: Date.now(),
+        activeWithdrawalId: 'withdrawal1',
+      };
+
+      mockUsePerpsSelector.mockReturnValue(mockPersistentProgress);
+      mockUseWithdrawalRequests.mockReturnValue({
+        withdrawalRequests: [mockWithdrawalRequests[0]],
+        isLoading: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      const { getByTestId } = renderWithProvider(
+        <PerpsProgressBar {...defaultProps} />,
+      );
+
+      expect(getByTestId('perps-progress-bar')).toBeTruthy();
+      expect(mockController.updateWithdrawalProgress).not.toHaveBeenCalledWith(
+        25,
+        'withdrawal1',
+      );
+    });
+
     it('handles withdrawal without ID gracefully', () => {
       const withdrawalWithoutId = {
         ...mockWithdrawalRequests[0],

app/components/UI/Perps/components/PerpsProgressBar/PerpsProgressBar.tsx

@@ -15,7 +15,6 @@ import { usePerpsSelector } from '../../hooks/usePerpsSelector';
 import {
   TransactionMeta,
   TransactionStatus,
-  TransactionType,
 } from '@metamask/transaction-controller';
 import Engine from '../../../../../core/Engine';
 import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
@@ -25,6 +24,7 @@ import {
   PROGRESS_BAR_COMPLETION_DELAY_MS,
 } from '@metamask/perps-controller';
 import { HYPERLIQUID_WITHDRAWAL_PROGRESS_INTERVAL_MS } from '../../constants/perpsUIConfig';
+import { hasPerpsDepositTransactionType } from '../../../../../util/transactions/metamask-pay';
 
 interface PerpsProgressBarProps {
   /**
@@ -178,10 +178,7 @@ export const PerpsProgressBar: React.FC<PerpsProgressBarProps> = ({
     }: {
       transactionMeta: TransactionMeta;
     }) => {
-      if (
-        transactionMeta.type === TransactionType.perpsDeposit ||
-        transactionMeta.type === TransactionType.perpsDepositAndOrder
-      ) {
+      if (hasPerpsDepositTransactionType(transactionMeta)) {
         const progress = getProgressFromStatus(transactionMeta.status);
         setTransactionProgress(progress);
 

app/components/UI/Perps/hooks/usePerpsDepositProgress.ts

@@ -1,11 +1,11 @@
 import {
   TransactionMeta,
   TransactionStatus,
-  TransactionType,
 } from '@metamask/transaction-controller';
 import { useEffect, useRef, useState } from 'react';
 import Engine from '../../../../core/Engine';
 import { usePerpsLiveAccount } from './stream/usePerpsLiveAccount';
+import { hasPerpsDepositTransactionType } from '../../../../util/transactions/metamask-pay';
 
 /**
  * Hook to track deposit progress state for UI components
@@ -36,10 +36,7 @@ export const usePerpsDepositProgress = () => {
     }: {
       transactionMeta: TransactionMeta;
     }) => {
-      if (
-        transactionMeta.type !== TransactionType.perpsDepositAndOrder &&
-        transactionMeta.type !== TransactionType.perpsDeposit
-      ) {
+      if (!hasPerpsDepositTransactionType(transactionMeta)) {
         return;
       }
 

app/components/UI/Perps/hooks/usePerpsTransactionHistory.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import usePrevious from '../../../hooks/usePrevious';
 import { BigNumber } from 'bignumber.js';
-import { TransactionType } from '@metamask/transaction-controller';
 import Engine from '../../../../core/Engine';
 import DevLogger from '../../../../core/SDKConnect/utils/DevLogger';
 import type { CaipAccountId } from '@metamask/utils';
@@ -19,6 +18,7 @@ import {
   transformUserHistoryToTransactions,
   transformWalletPerpsDepositsToTransactions,
 } from '../utils/transactionTransforms';
+import { hasPerpsDepositTransactionType } from '../../../../util/transactions/metamask-pay';
 
 interface UsePerpsTransactionHistoryParams {
   startTime?: number;
@@ -71,8 +71,7 @@ export const usePerpsTransactionHistory = ({
       (tx) =>
         selectedAddress &&
         areAddressesEqual(tx.txParams?.from ?? '', selectedAddress) &&
-        (tx.type === TransactionType.perpsDeposit ||
-          tx.type === TransactionType.perpsDepositAndOrder),
+        hasPerpsDepositTransactionType(tx),
     );
     return transformWalletPerpsDepositsToTransactions(filtered);
   }, [walletTransactions, selectedAddress]);

app/components/UI/Perps/utils/transactionTransforms.test.ts

@@ -20,7 +20,10 @@ import {
 } from '../types/transactionHistory';
 
 jest.mock('../../../Views/confirmations/utils/transaction-pay');
-jest.mock('../../../Views/confirmations/utils/transaction');
+jest.mock('../../../Views/confirmations/utils/transaction', () => ({
+  ...jest.requireActual('../../../Views/confirmations/utils/transaction'),
+  parseStandardTokenTransactionData: jest.fn(),
+}));
 jest.mock('../../../../util/transactions', () => ({
   ...jest.requireActual('../../../../util/transactions'),
   calcTokenAmount: jest.fn((value: string) => (Number(value) / 1e6).toString()),
@@ -1913,5 +1916,18 @@ describe('transactionTransforms', () => {
       expect(result[0].title).toBe('Deposit');
       expect(result[0].depositWithdrawal?.amountNumber).toBe(0);
     });
+
+    it('uses Deposit title and zero amount when parsed token data is missing a value', () => {
+      mockParseStandardTokenTransactionData.mockReturnValue({
+        args: {},
+      } as never);
+
+      const result = transformWalletPerpsDepositsToTransactions([
+        createMockTx(),
+      ] as never);
+
+      expect(result[0].title).toBe('Deposit');
+      expect(result[0].depositWithdrawal?.amountNumber).toBe(0);
+    });
   });
 });

app/components/UI/Perps/utils/transactionTransforms.ts

@@ -22,6 +22,7 @@ import { getTokenTransferData } from '../../../Views/confirmations/utils/transac
 import { parseStandardTokenTransactionData } from '../../../Views/confirmations/utils/transaction';
 import { calcTokenAmount } from '../../../../util/transactions';
 import { ARBITRUM_USDC } from '../../../Views/confirmations/constants/perps';
+import { hasPerpsDepositTransactionType } from '../../../../util/transactions/metamask-pay';
 
 /**
  * Determines the close direction category for aggregation purposes.
@@ -627,11 +628,7 @@ export function transformWalletPerpsDepositsToTransactions(
   transactions: TransactionMeta[],
 ): PerpsTransaction[] {
   return transactions
-    .filter(
-      (tx) =>
-        tx.type === TransactionType.perpsDeposit ||
-        tx.type === TransactionType.perpsDepositAndOrder,
-    )
+    .filter((tx) => hasPerpsDepositTransactionType(tx))
     .map((tx) => {
       const tokenData = getTokenTransferData(tx);
       const decoded = tokenData?.data

app/components/UI/TransactionElement/index.js

@@ -66,6 +66,7 @@ import {
   getMonetizedPrimitive,
 } from '../../../core/Analytics/events/transactions';
 import { getTransactionTypeValue } from '../../../core/Engine/controllers/transaction-controller/metrics_properties/base';
+import { MM_PAY_DETAIL_TRANSACTION_TYPES } from '../../../util/transactions/metamask-pay';
 
 const createStyles = (colors, typography) =>
   StyleSheet.create({
@@ -149,15 +150,7 @@ const transactionIconReceivedFailed = require('../../../images/transaction-icons
 const transactionIconSwapFailed = require('../../../images/transaction-icons/swap-failed.png');
 /* eslint-enable import-x/no-commonjs */
 
-const NEW_TRANSACTION_DETAILS_TYPES = [
-  TransactionType.musdClaim,
-  TransactionType.musdConversion,
-  TransactionType.perpsDeposit,
-  TransactionType.perpsDepositAndOrder,
-  TransactionType.predictClaim,
-  TransactionType.predictDeposit,
-  TransactionType.predictWithdraw,
-];
+const NEW_TRANSACTION_DETAILS_TYPES = [...MM_PAY_DETAIL_TRANSACTION_TYPES];
 
 const INTENT_STATUS = {
   SUBMITTED: 'SUBMITTED',

app/components/UI/TransactionElement/utils.js

@@ -47,14 +47,10 @@ import {
 import { selectSingleTokenByAddressAndChainId } from '../../../selectors/tokensController';
 import { selectTickerByChainId } from '../../../selectors/networkController';
 import { selectContractExchangeRatesByChainId } from '../../../selectors/tokenRatesController';
+import { MM_PAY_POSITIVE_TRANSFER_TRANSACTION_TYPES } from '../../../util/transactions/metamask-pay';
 
-const POSITIVE_TRANSFER_TRANSACTION_TYPES = [
-  TransactionType.musdConversion,
-  TransactionType.perpsDeposit,
-  TransactionType.perpsDepositAndOrder,
-  TransactionType.predictDeposit,
-  TransactionType.predictWithdraw,
-];
+const POSITIVE_TRANSFER_TRANSACTION_TYPES =
+  MM_PAY_POSITIVE_TRANSFER_TRANSACTION_TYPES;
 
 function getTokenTransfer(args) {
   const {

app/components/UI/TransactionElement/utils.test.js

@@ -381,6 +381,10 @@ describe('Transaction Element Utils', () => {
         TransactionType.predictDeposit,
         strings('transactions.tx_review_predict_deposit'),
       ],
+      [
+        TransactionType.predictAcrossDeposit,
+        strings('transactions.tx_review_predict_deposit'),
+      ],
       [
         TransactionType.predictWithdraw,
         strings('transactions.tx_review_predict_withdraw'),
@@ -389,6 +393,10 @@ describe('Transaction Element Utils', () => {
         TransactionType.musdConversion,
         strings('transactions.tx_review_musd_conversion'),
       ],
+      [
+        TransactionType.perpsAcrossDeposit,
+        strings('transactions.tx_review_perps_deposit'),
+      ],
     ])('if %s', async (transactionType, title) => {
       const args = {
         tx: {

app/components/Views/confirmations/components/activity/transaction-details-hero/transaction-details-hero.test.tsx

@@ -204,6 +204,32 @@ describe('TransactionDetailsHero', () => {
     expect(getByText('$75.50')).toBeDefined();
   });
 
+  it('renders amount for perpsDepositAndOrder transactions', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        ...TRANSACTION_META_MOCK,
+        type: TransactionType.perpsDepositAndOrder,
+      } as unknown as TransactionMeta,
+    });
+
+    const { getByText } = render();
+
+    expect(getByText('$123.46')).toBeDefined();
+  });
+
+  it('renders nothing for predictClaim transactions', () => {
+    useTransactionDetailsMock.mockReturnValue({
+      transactionMeta: {
+        ...TRANSACTION_META_MOCK,
+        type: TransactionType.predictClaim,
+      } as unknown as TransactionMeta,
+    });
+
+    const { queryByTestId } = render();
+
+    expect(queryByTestId('transaction-details-hero')).toBeNull();
+  });
+
   it('renders nothing for musdClaim without valid claim data', () => {
     useTransactionDetailsMock.mockReturnValue({
       transactionMeta: {