Merge branch 'main' into price-alerts-price-percent

Author: bergarces

app/components/UI/Money/components/MoneyAddMoneySheet/MoneyAddMoneySheet.pendingTransaction.test.tsx

@@ -163,6 +163,9 @@ jest.mock('../../../../../selectors/tokenBalancesController', () => ({
 jest.mock('../../hooks/useMoneyAnalytics', () => ({
   useMoneyAnalytics: jest.fn(),
 }));
+jest.mock('../../../Ramp/hooks/useRampNavigation', () => ({
+  useRampNavigation: () => ({ goToBuy: jest.fn(() => Promise.resolve()) }),
+}));
 jest.mock('../../../../../selectors/preferencesController', () => ({
   ...jest.requireActual('../../../../../selectors/preferencesController'),
   selectPrivacyMode: jest.fn(() => false),

app/components/UI/Money/components/MoneyAddMoneySheet/MoneyAddMoneySheet.test.tsx

@@ -33,6 +33,11 @@ const mockOnCloseBottomSheet = jest.fn((cb?: () => void) => cb?.());
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
 const mockInitiateDeposit = jest.fn(() => Promise.resolve());
+const mockGoToBuy = jest.fn(() => Promise.resolve());
+
+jest.mock('../../../Ramp/hooks/useRampNavigation', () => ({
+  useRampNavigation: () => ({ goToBuy: mockGoToBuy }),
+}));
 
 jest.mock('@react-navigation/native', () => {
   const actualReactNavigation = jest.requireActual('@react-navigation/native');
@@ -202,7 +207,7 @@ describe('MoneyAddMoneySheet', () => {
     expect(getByText('mUSD')).toBeOnTheScreen();
   });
 
-  it('shows the move-mUSD row disabled with the "Add mUSD" label when the selected EVM account has no mUSD tokens or fiat balance', () => {
+  it('shows the move-mUSD row with the "Add mUSD" label and routes to the Ramps buy flow when the selected EVM account has no mUSD tokens or fiat balance', () => {
     (useMusdBalance as jest.Mock).mockReturnValue({
       fiatBalanceAggregated: undefined,
       fiatBalanceAggregatedFormatted: '$0.00',
@@ -222,11 +227,14 @@ describe('MoneyAddMoneySheet', () => {
 
     fireEvent.press(getByTestId(MoneyAddMoneySheetTestIds.MOVE_MUSD_OPTION));
 
-    expect(mockOnCloseBottomSheet).not.toHaveBeenCalled();
+    expect(mockOnCloseBottomSheet).toHaveBeenCalledTimes(1);
+    expect(mockGoToBuy).toHaveBeenCalledWith({
+      assetId: MUSD_TOKEN_ASSET_ID_BY_CHAIN[MUSD_CONVERSION_DEFAULT_CHAIN_ID],
+    });
     expect(mockInitiateDeposit).not.toHaveBeenCalled();
   });
 
-  it('shows the move-mUSD row disabled with the "Add mUSD" label when the selected EVM account mUSD fiat balance is zero', () => {
+  it('shows the move-mUSD row with the "Add mUSD" label and routes to the Ramps buy flow when the selected EVM account mUSD fiat balance is zero', () => {
     (useMusdBalance as jest.Mock).mockReturnValue({
       fiatBalanceAggregated: '0',
       fiatBalanceAggregatedFormatted: '$0.00',
@@ -246,7 +254,10 @@ describe('MoneyAddMoneySheet', () => {
 
     fireEvent.press(getByTestId(MoneyAddMoneySheetTestIds.MOVE_MUSD_OPTION));
 
-    expect(mockOnCloseBottomSheet).not.toHaveBeenCalled();
+    expect(mockOnCloseBottomSheet).toHaveBeenCalledTimes(1);
+    expect(mockGoToBuy).toHaveBeenCalledWith({
+      assetId: MUSD_TOKEN_ASSET_ID_BY_CHAIN[MUSD_CONVERSION_DEFAULT_CHAIN_ID],
+    });
     expect(mockInitiateDeposit).not.toHaveBeenCalled();
   });
 
@@ -590,5 +601,24 @@ describe('MoneyAddMoneySheet', () => {
         redirect_target: SCREEN_NAMES.MONEY_DEPOSIT,
       });
     });
+
+    it('calls trackSurfaceClicked with the RAMPS_BUY redirect target when "Add mUSD" is pressed with no mUSD balance', () => {
+      (useMusdBalance as jest.Mock).mockReturnValue({
+        fiatBalanceAggregated: '0',
+        fiatBalanceAggregatedFormatted: '$0.00',
+        hasMusdBalanceOnAnyChain: false,
+        tokenBalanceAggregated: '0',
+        tokenBalanceByChain: {},
+      });
+
+      const { getByTestId } = renderWithProvider(<MoneyAddMoneySheet />);
+
+      fireEvent.press(getByTestId(MoneyAddMoneySheetTestIds.MOVE_MUSD_OPTION));
+
+      expect(mockTrackSurfaceClicked).toHaveBeenCalledWith({
+        component_name: COMPONENT_NAMES.MONEY_ADD_MONEY_SHEET_MOVE_MUSD,
+        redirect_target: SCREEN_NAMES.RAMPS_BUY,
+      });
+    });
   });
 });

app/components/UI/Money/components/MoneyAddMoneySheet/MoneyAddMoneySheet.tsx

@@ -29,7 +29,10 @@ import {
   MUSD_CONVERSION_DEFAULT_CHAIN_ID,
   MUSD_TOKEN,
   MUSD_TOKEN_ADDRESS_BY_CHAIN,
+  MUSD_TOKEN_ASSET_ID_BY_CHAIN,
 } from '../../../Earn/constants/musd';
+import { useRampNavigation } from '../../../Ramp/hooks/useRampNavigation';
+import Logger from '../../../../../util/Logger';
 import {
   useMoneyAccountDeposit,
   type InitiateDepositOptions,
@@ -68,6 +71,7 @@ const MoneyAddMoneySheet: React.FC = () => {
     tokenBalanceByChain,
   } = useMusdBalance();
   const { initiateDeposit } = useMoneyAccountDeposit();
+  const { goToBuy } = useRampNavigation();
   const { enabledTransactionTypes } = useMMPayFiatConfig();
   const hasAnyCryptoBalance = useSelector(selectHasAnyNonZeroTokenBalance);
   const transactions = useSelector(selectTransactions);
@@ -164,7 +168,34 @@ const MoneyAddMoneySheet: React.FC = () => {
     startDeposit({ autoSelectFiatPayment: true, intent: 'card' });
   }, [startDeposit, trackSurfaceClicked]);
 
+  const parsedMusdFiat = Number(fiatBalanceAggregated);
+  const hasParsedFiatBalance =
+    Number.isFinite(parsedMusdFiat) && parsedMusdFiat > 0;
+  const hasMusdBalance = hasMusdBalanceOnAnyChain || hasParsedFiatBalance;
+
   const handleMoveMusd = useCallback(() => {
+    // With no mUSD anywhere there is nothing to move, so the row routes to
+    // Ramps to buy mUSD instead.
+    if (!hasMusdBalance) {
+      trackSurfaceClicked({
+        component_name: COMPONENT_NAMES.MONEY_ADD_MONEY_SHEET_MOVE_MUSD,
+        redirect_target: SCREEN_NAMES.RAMPS_BUY,
+      });
+
+      sheetRef.current?.onCloseBottomSheet(() => {
+        goToBuy({
+          assetId:
+            MUSD_TOKEN_ASSET_ID_BY_CHAIN[MUSD_CONVERSION_DEFAULT_CHAIN_ID],
+        }).catch((error) => {
+          Logger.error(
+            error as Error,
+            '[MoneyAddMoneySheet] Failed to open the Ramps buy flow for mUSD',
+          );
+        });
+      });
+      return;
+    }
+
     let sourceChainId: Hex = MUSD_CONVERSION_DEFAULT_CHAIN_ID;
     let bestBalance = new BigNumber(0);
     for (const [chainId, balance] of Object.entries(
@@ -189,12 +220,13 @@ const MoneyAddMoneySheet: React.FC = () => {
         chainId: sourceChainId,
       },
     });
-  }, [startDeposit, tokenBalanceByChain, trackSurfaceClicked]);
-
-  const parsedMusdFiat = Number(fiatBalanceAggregated);
-  const hasParsedFiatBalance =
-    Number.isFinite(parsedMusdFiat) && parsedMusdFiat > 0;
-  const hasMusdBalance = hasMusdBalanceOnAnyChain || hasParsedFiatBalance;
+  }, [
+    goToBuy,
+    hasMusdBalance,
+    startDeposit,
+    tokenBalanceByChain,
+    trackSurfaceClicked,
+  ]);
 
   const moveMusdAmount = useMemo(
     () => moneyFormatUsd(new BigNumber(tokenBalanceAggregated)),
@@ -236,7 +268,6 @@ const MoneyAddMoneySheet: React.FC = () => {
       icon: IconName.Add,
       onPress: handleMoveMusd,
       testID: MoneyAddMoneySheetTestIds.MOVE_MUSD_OPTION,
-      disabled: !hasMusdBalance,
     },
     {
       label: strings('money.add_money_sheet.bank_account'),

app/components/UI/Money/constants/moneyEvents.ts

@@ -17,6 +17,7 @@ export enum SCREEN_NAMES {
   MONEY_ACTIVITY_DETAILS = 'money_activity_details',
   MONEY_POTENTIAL_EARNINGS = 'money_potential_earnings',
   MONEY_FIRST_TIME_DEPOSIT = 'money_first_time_deposit',
+  RAMPS_BUY = 'ramps_buy',
 }
 
 export enum BOTTOM_SHEET_NAMES {

app/components/UI/Money/hooks/useMoneyTransactionStatus.test.ts

@@ -20,6 +20,7 @@ import {
 } from './useMoneyAccount';
 import { shouldShowMoneyFirstTimeDepositAnimation } from '../utils/firstTimeDeposit';
 import { getMemoizedInternalAccountByAddress } from '../../../../selectors/accountsController';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
 import { selectAccountToGroupMap } from '../../../../selectors/multichainAccounts/accountTreeController';
 import Routes from '../../../../constants/navigation/Routes';
 import NavigationService from '../../../../core/NavigationService/NavigationService';
@@ -683,7 +684,7 @@ describe('useMoneyTransactionStatus', () => {
       });
     });
 
-    it('confirmed → success toast with decoded fiat amount', () => {
+    it('confirmed → success toast with decoded dollar amount', () => {
       const { confirmedHandler } = renderAndGetHandlers();
 
       confirmedHandler(
@@ -699,8 +700,7 @@ describe('useMoneyTransactionStatus', () => {
 
       expect(depositSuccessFn).toHaveBeenCalledTimes(1);
       const params = depositSuccessFn.mock.calls[0][0];
-      expect(params.amountFiat).toContain('mUSD');
-      expect(params.amountFiat).toContain('12.34');
+      expect(params.amountFiat).toBe('$12.34');
     });
 
     it('failed → deposit failed toast', () => {
@@ -1508,37 +1508,82 @@ describe('useMoneyTransactionStatus', () => {
   });
 
   describe('formatMusdAmountForToast', () => {
-    it('falls back to mUSD format when no fiat rate is available', () => {
-      expect(formatMusdAmountForToast(BigInt(1_000_000))).toBe('1.00 mUSD');
-      expect(formatMusdAmountForToast(BigInt(123_456))).toBe('0.12 mUSD');
+    it('formats the decoded mUSD amount as US dollars', () => {
+      expect(formatMusdAmountForToast(BigInt(1_000_000))).toBe('$1.00');
+      expect(formatMusdAmountForToast(BigInt(123_456))).toBe('$0.12');
+      expect(formatMusdAmountForToast(BigInt(5_000_000))).toBe('$5.00');
     });
+  });
+
+  describe('USD formatting regardless of preferred currency', () => {
+    beforeEach(() => {
+      jest.mocked(selectCurrentCurrency).mockReturnValue('EUR');
+    });
+
+    afterEach(() => {
+      jest.mocked(selectCurrentCurrency).mockReturnValue('usd');
+    });
+
+    it('confirmed deposit → success amount is dollar-formatted when the preferred currency is EUR', () => {
+      const { confirmedHandler } = renderAndGetHandlers();
 
-    it('formats as fiat when token market data, currency rates and network config resolve', () => {
-      const tokenRatesMock = jest.requireMock(
-        '../../../../selectors/tokenRatesController',
+      confirmedHandler(
+        buildTxMeta({
+          type: TransactionType.moneyAccountDeposit,
+          status: TransactionStatus.confirmed,
+          txParams: {
+            from: '0x0',
+            data: encodeDepositData(BigInt(12_340_000)),
+          },
+        }),
       );
-      const currencyRatesMock = jest.requireMock(
-        '../../../../selectors/currencyRateController',
+
+      expect(depositSuccessFn).toHaveBeenCalledTimes(1);
+      const amountFiat = depositSuccessFn.mock.calls[0][0].amountFiat;
+      expect(amountFiat).toMatch(/^\$/);
+      expect(amountFiat).not.toContain('€');
+    });
+
+    it('confirmed withdraw → success amount is dollar-formatted when the preferred currency is EUR', () => {
+      const { confirmedHandler } = renderAndGetHandlers();
+
+      confirmedHandler(
+        buildTxMeta({
+          type: TransactionType.moneyAccountWithdraw,
+          status: TransactionStatus.confirmed,
+          txParams: {
+            from: '0x0',
+            data: encodeWithdrawData(BigInt(50_000_000)),
+          },
+        }),
       );
-      const networkConfigMock = jest.requireMock(
-        '../../../../selectors/networkController',
+
+      expect(withdrawSuccessFn).toHaveBeenCalledTimes(1);
+      const amountFiat = withdrawSuccessFn.mock.calls[0][0].amountFiat;
+      expect(amountFiat).toMatch(/^\$/);
+      expect(amountFiat).not.toContain('€');
+    });
+
+    it('confirmed perps send → success amount is dollar-formatted when the preferred currency is EUR', () => {
+      const { confirmedHandler } = renderAndGetHandlers();
+
+      confirmedHandler(
+        buildTxMeta({
+          id: 'eur-send-tx',
+          type: TransactionType.perpsDeposit,
+          status: TransactionStatus.confirmed,
+          metamaskPay: {
+            tokenAddress: MUSD_ADDRESS,
+            chainId: CHAIN_IDS.MONAD,
+            targetFiat: '100',
+          },
+        } as unknown as Partial<TransactionMeta>),
       );
-      tokenRatesMock.selectTokenMarketData.mockReturnValueOnce({
-        '0x1': {
-          '0xacA92E438df0B2401fF60dA7E4337B687a2435DA': { price: 1 },
-        },
-      });
-      currencyRatesMock.selectCurrencyRates.mockReturnValueOnce({
-        ETH: { conversionRate: 2 },
-      });
-      networkConfigMock.selectNetworkConfigurations.mockReturnValueOnce({
-        '0x1': { nativeCurrency: 'ETH' },
-      });
-      currencyRatesMock.selectCurrentCurrency.mockReturnValueOnce('usd');
 
-      const formatted = formatMusdAmountForToast(BigInt(5_000_000));
-      expect(formatted).not.toContain('mUSD');
-      expect(formatted).toMatch(/10/);
+      expect(sendSuccessFn).toHaveBeenCalledTimes(1);
+      const amountFiat = sendSuccessFn.mock.calls[0][0].amountFiat;
+      expect(amountFiat).toMatch(/^\$/);
+      expect(amountFiat).not.toContain('€');
     });
   });
 

app/components/UI/Money/hooks/useMoneyTransactionStatus.ts

@@ -1,5 +1,4 @@
 import {
-  CHAIN_IDS,
   TransactionMeta,
   TransactionStatus,
   TransactionType,
@@ -15,24 +14,14 @@ import Logger from '../../../../util/Logger';
 import { fromTokenMinimalUnitString } from '../../../../util/number/bigint';
 import { strings } from '../../../../../locales/i18n';
 import { store } from '../../../../store';
-import {
-  selectCurrencyRates,
-  selectCurrentCurrency,
-} from '../../../../selectors/currencyRateController';
-import { selectNetworkConfigurations } from '../../../../selectors/networkController';
 import { getMemoizedInternalAccountByAddress } from '../../../../selectors/accountsController';
 import { selectAccountToGroupMap } from '../../../../selectors/multichainAccounts/accountTreeController';
-import { selectTokenMarketData } from '../../../../selectors/tokenRatesController';
-import {
-  renderShortAddress,
-  toChecksumAddress,
-} from '../../../../util/address';
+import { renderShortAddress } from '../../../../util/address';
 import {
   MUSD_DECIMALS,
-  MUSD_TOKEN_ADDRESS_BY_CHAIN,
   TOAST_TRACKING_CLEANUP_DELAY_MS,
 } from '../../Earn/constants/musd';
-import { moneyFormatFiat } from '../utils/moneyFormatFiat';
+import { moneyFormatUsd } from '../utils/moneyFormatFiat';
 import { TELLER_ABI } from '../utils/moneyAccountTransactions';
 import {
   isMoneyAccountTx,
@@ -117,50 +106,17 @@ function decodeTellerAmount(
   return undefined;
 }
 
-function getMusdFiatRate(): BigNumber | undefined {
-  const state = store.getState();
-  const tokenMarketData = selectTokenMarketData(state);
-  const currencyRates = selectCurrencyRates(state);
-  const networkConfigurations = selectNetworkConfigurations(state);
-
-  const musdAddress = MUSD_TOKEN_ADDRESS_BY_CHAIN[CHAIN_IDS.MAINNET];
-  if (!musdAddress) return undefined;
-
-  const checksumAddress = toChecksumAddress(musdAddress);
-  const chainConfig = networkConfigurations?.[CHAIN_IDS.MAINNET];
-  const nativeCurrency = chainConfig?.nativeCurrency;
-  const conversionRate = nativeCurrency
-    ? currencyRates?.[nativeCurrency]?.conversionRate
-    : undefined;
-
-  const priceInNativeCurrency =
-    tokenMarketData?.[CHAIN_IDS.MAINNET]?.[checksumAddress]?.price ??
-    tokenMarketData?.[CHAIN_IDS.MAINNET]?.[musdAddress]?.price;
-
-  if (!conversionRate || priceInNativeCurrency === undefined) return undefined;
-  return new BigNumber(priceInNativeCurrency).times(conversionRate);
-}
-
 export function formatMusdAmountForToast(amountWei: bigint): string {
   const musdDecimal = new BigNumber(
     fromTokenMinimalUnitString(amountWei.toString(), MUSD_DECIMALS),
   );
-  const rate = getMusdFiatRate();
-  const currentCurrency = selectCurrentCurrency(store.getState());
-
-  if (!rate || !currentCurrency) {
-    return `${musdDecimal.toFixed(2)} mUSD`;
-  }
-  return moneyFormatFiat(musdDecimal.times(rate), currentCurrency);
+  return moneyFormatUsd(musdDecimal);
 }
 
 function formatMetamaskPayFiat(value: unknown): string | undefined {
   const fiat = Number(value);
   if (Number.isNaN(fiat) || fiat <= 0) return undefined;
-  return moneyFormatFiat(
-    new BigNumber(fiat),
-    selectCurrentCurrency(store.getState()),
-  );
+  return moneyFormatUsd(new BigNumber(fiat));
 }
 
 function navigateToMoneyTransactionDetails(transactionId: string) {