[pull] main from MetaMask:main

app/component-library/components-temp/MultichainAccounts/MultichainAddressRowsList/MultichainAddressRowsList.utils.test.ts

@@ -1,6 +1,6 @@
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
-import { SolScope } from '@metamask/keyring-api';
+import { SolScope, BtcScope, TrxScope } from '@metamask/keyring-api';
 import { CaipChainId } from '@metamask/utils';
 import {
   sortNetworkAddressItems,
@@ -62,7 +62,7 @@ describe('MultichainAddressRowsList Utils', () => {
       expect(sorted[0].chainId).toBe(`eip155:${CHAIN_IDS.MAINNET}`);
     });
 
-    it('sorts networks with Solana second after Ethereum', () => {
+    it('sorts networks with Bitcoin second and Solana third after Ethereum', () => {
       const items: NetworkAddressItem[] = [
         { chainId: 'eip155:0x89', networkName: 'Polygon', address: '0x123' },
         { chainId: SolScope.Mainnet, networkName: 'Solana', address: '0x123' },
@@ -71,11 +71,59 @@ describe('MultichainAddressRowsList Utils', () => {
           networkName: 'Ethereum',
           address: '0x123',
         },
+        { chainId: BtcScope.Mainnet, networkName: 'Bitcoin', address: '0x123' },
       ];
 
       const sorted = sortNetworkAddressItems(items);
       expect(sorted[0].chainId).toBe(`eip155:${CHAIN_IDS.MAINNET}`);
-      expect(sorted[1].chainId).toBe(SolScope.Mainnet);
+      expect(sorted[1].chainId).toBe(BtcScope.Mainnet);
+      expect(sorted[2].chainId).toBe(SolScope.Mainnet);
+    });
+
+    it('sorts networks with Tron fourth after Ethereum, Bitcoin, and Solana', () => {
+      const items: NetworkAddressItem[] = [
+        { chainId: TrxScope.Mainnet, networkName: 'Tron', address: '0x123' },
+        { chainId: 'eip155:0x89', networkName: 'Polygon', address: '0x123' },
+        { chainId: SolScope.Mainnet, networkName: 'Solana', address: '0x123' },
+        {
+          chainId: `eip155:${CHAIN_IDS.MAINNET}`,
+          networkName: 'Ethereum',
+          address: '0x123',
+        },
+        { chainId: BtcScope.Mainnet, networkName: 'Bitcoin', address: '0x123' },
+      ];
+
+      const sorted = sortNetworkAddressItems(items);
+      expect(sorted[0].chainId).toBe(`eip155:${CHAIN_IDS.MAINNET}`);
+      expect(sorted[1].chainId).toBe(BtcScope.Mainnet);
+      expect(sorted[2].chainId).toBe(SolScope.Mainnet);
+      expect(sorted[3].chainId).toBe(TrxScope.Mainnet);
+    });
+
+    it('sorts networks with Linea fifth after Ethereum, Bitcoin, Solana, and Tron', () => {
+      const items: NetworkAddressItem[] = [
+        {
+          chainId: `eip155:${CHAIN_IDS.LINEA_MAINNET}`,
+          networkName: 'Linea',
+          address: '0x123',
+        },
+        { chainId: TrxScope.Mainnet, networkName: 'Tron', address: '0x123' },
+        { chainId: 'eip155:0x89', networkName: 'Polygon', address: '0x123' },
+        { chainId: SolScope.Mainnet, networkName: 'Solana', address: '0x123' },
+        {
+          chainId: `eip155:${CHAIN_IDS.MAINNET}`,
+          networkName: 'Ethereum',
+          address: '0x123',
+        },
+        { chainId: BtcScope.Mainnet, networkName: 'Bitcoin', address: '0x123' },
+      ];
+
+      const sorted = sortNetworkAddressItems(items);
+      expect(sorted[0].chainId).toBe(`eip155:${CHAIN_IDS.MAINNET}`);
+      expect(sorted[1].chainId).toBe(BtcScope.Mainnet);
+      expect(sorted[2].chainId).toBe(SolScope.Mainnet);
+      expect(sorted[3].chainId).toBe(TrxScope.Mainnet);
+      expect(sorted[4].chainId).toBe(`eip155:${CHAIN_IDS.LINEA_MAINNET}`);
     });
 
     it('sorts test networks last', () => {

app/component-library/components-temp/MultichainAccounts/MultichainAddressRowsList/MultichainAddressRowsList.utils.ts

@@ -1,6 +1,6 @@
 import { InternalAccount } from '@metamask/keyring-internal-api';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
-import { SolScope } from '@metamask/keyring-api';
+import { SolScope, BtcScope, TrxScope } from '@metamask/keyring-api';
 import { CaipChainId } from '@metamask/utils';
 import { TEST_NETWORK_IDS } from '../../../../constants/network';
 import { PopularList } from '../../../../util/networks/customNetworks';
@@ -18,7 +18,12 @@ export interface NetworkAddressItem {
  */
 const extractHexChainId = (chainId: CaipChainId): string => {
   if (chainId.startsWith('eip155:')) {
-    return chainId.split(':')[1];
+    const chainIdPart = chainId.split(':')[1];
+    // Convert decimal to hex format if needed (CAIP format uses decimal)
+    if (!chainIdPart.startsWith('0x')) {
+      return `0x${parseInt(chainIdPart, 10).toString(16)}`;
+    }
+    return chainIdPart;
   }
   return chainId;
 };
@@ -33,30 +38,40 @@ const getNetworkPriority = (chainId: CaipChainId): number => {
   // For EVM networks, extract hex chain ID for comparison
   const hexChainId = extractHexChainId(chainId);
 
+  // Hardcoded order for top networks
   if (hexChainId === CHAIN_IDS.MAINNET) {
     return 0;
   } // Ethereum first
-  if (chainId === SolScope.Mainnet) {
+  if (chainId === BtcScope.Mainnet) {
     return 1;
-  } // Solana second
+  } // Bitcoin second
+  if (chainId === SolScope.Mainnet) {
+    return 2;
+  } // Solana third
+  if (chainId === TrxScope.Mainnet) {
+    return 3;
+  } // Tron fourth
+  if (hexChainId === CHAIN_IDS.LINEA_MAINNET) {
+    return 4;
+  } // Linea fifth
   if (
     TEST_NETWORK_IDS.includes(hexChainId as (typeof TEST_NETWORK_IDS)[number])
   ) {
-    return 4;
+    return 7;
   } // Test networks last
 
   // Featured networks (popular networks)
   const popularChainIds = PopularList.map((network) => network.chainId);
   if (popularChainIds.includes(hexChainId as `0x${string}`)) {
-    return 2;
+    return 5;
   }
 
-  return 3; // Other custom networks
+  return 6; // Other custom networks
 };
 
 /**
  * Sorts network address items according to priority:
- * 1. Ethereum first, 2. Solana second, 3. Featured networks, 4. Other custom networks, 5. Test networks last
+ * 1. Ethereum, 2. Bitcoin, 3. Solana, 4. Tron, 5. Linea, 6. Featured networks, 7. Other custom networks, 8. Test networks last
  *
  * @param items - Array of NetworkAddressItem objects to sort
  * @returns Sorted array of NetworkAddressItem objects

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -62,7 +62,8 @@ import {
 } from '../../../util/analytics/actionButtonTracking';
 import { selectSelectedAccountGroup } from '../../../selectors/multichainAccounts/accountTreeController';
 import { selectSelectedInternalAccountByScope } from '../../../selectors/multichainAccounts/accounts';
-import { createBuyNavigationDetails } from '../Ramp/Aggregator/routes/utils';
+import { useRampNavigation, RampMode } from '../Ramp/hooks/useRampNavigation';
+import { RampType as AggregatorRampType } from '../Ramp/Aggregator/types';
 import { TokenI } from '../Tokens/types';
 import AssetDetailsActions from '../../../components/Views/AssetDetails/AssetDetailsActions';
 import {
@@ -168,6 +169,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   ///: END:ONLY_INCLUDE_IF
 
   const currentAddress = asset.address as Hex;
+  const { goToRamps } = useRampNavigation();
 
   const { data: prices = [], isLoading } = useTokenHistoricalPrices({
     asset,
@@ -337,11 +339,13 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
       assetId = undefined;
     }
 
-    navigation.navigate(
-      ...createBuyNavigationDetails({
-        assetId,
-      }),
-    );
+    goToRamps({
+      mode: RampMode.AGGREGATOR,
+      params: {
+        rampType: AggregatorRampType.BUY,
+        intent: assetId ? { assetId } : undefined,
+      },
+    });
 
     trackEvent(
       createEventBuilder(MetaMetricsEvents.BUY_BUTTON_CLICKED)

app/components/UI/BalanceEmptyState/BalanceEmptyState.test.tsx

@@ -5,26 +5,13 @@ import { backgroundState } from '../../../util/test/initial-root-state';
 import BalanceEmptyState from './BalanceEmptyState';
 import { BalanceEmptyStateProps } from './BalanceEmptyState.types';
 
-// Mock navigation (component requires it)
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({
-    navigate: mockNavigate,
-  }),
+// Mock useRampNavigation hook
+const mockGoToRamps = jest.fn();
+jest.mock('../Ramp/hooks/useRampNavigation', () => ({
+  useRampNavigation: jest.fn(() => ({ goToRamps: mockGoToRamps })),
+  RampMode: { AGGREGATOR: 'AGGREGATOR', DEPOSIT: 'DEPOSIT' },
 }));
 
-// Mock buy navigation details
-const mockBuyNavigationDetails = ['RampBuy', { screen: 'GetStarted' }];
-jest.mock('../Ramp/Aggregator/routes/utils', () => ({
-  createBuyNavigationDetails: jest.fn(() => mockBuyNavigationDetails),
-}));
-
-// Get the mock function to verify calls
-const { createBuyNavigationDetails } = jest.requireMock(
-  '../Ramp/Aggregator/routes/utils',
-);
-
 describe('BalanceEmptyState', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -60,15 +47,11 @@ describe('BalanceEmptyState', () => {
 
     expect(actionButton).toBeDefined();
 
-    // Press the button
     fireEvent.press(actionButton);
 
-    // Verify that buy navigation details are created
-    expect(createBuyNavigationDetails).toHaveBeenCalled();
-
-    // Verify that navigation was triggered with buy flow parameters
-    expect(mockNavigate).toHaveBeenCalledWith('RampBuy', {
-      screen: 'GetStarted',
+    expect(mockGoToRamps).toHaveBeenCalledWith({
+      mode: 'AGGREGATOR',
+      params: { rampType: expect.anything() },
     });
   });
 });

app/components/UI/BalanceEmptyState/BalanceEmptyState.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Image } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import {
   Box,
@@ -21,7 +20,8 @@ import { MetaMetricsEvents, useMetrics } from '../../hooks/useMetrics';
 import { getDecimalChainId } from '../../../util/networks';
 import { selectChainId } from '../../../selectors/networkController';
 import { trace, TraceName } from '../../../util/trace';
-import { createBuyNavigationDetails } from '../Ramp/Aggregator/routes/utils';
+import { useRampNavigation, RampMode } from '../Ramp/hooks/useRampNavigation';
+import { RampType } from '../Ramp/Aggregator/types';
 import { BalanceEmptyStateProps } from './BalanceEmptyState.types';
 import bankTransferImage from '../../../images/bank-transfer.png';
 import { getDetectedGeolocation } from '../../../reducers/fiatOrders';
@@ -36,12 +36,15 @@ const BalanceEmptyState: React.FC<BalanceEmptyStateProps> = ({
 }) => {
   const tw = useTailwind();
   const chainId = useSelector(selectChainId);
-  const navigation = useNavigation();
   const { trackEvent, createEventBuilder } = useMetrics();
   const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
+  const { goToRamps } = useRampNavigation();
 
   const handleAction = () => {
-    navigation.navigate(...createBuyNavigationDetails());
+    goToRamps({
+      mode: RampMode.AGGREGATOR,
+      params: { rampType: RampType.BUY },
+    });
 
     trackEvent(
       createEventBuilder(MetaMetricsEvents.BUY_BUTTON_CLICKED).build(),

app/components/UI/Card/Views/CardHome/CardHome.test.tsx

@@ -185,6 +185,11 @@ jest.mock('../../hooks/useOpenSwaps', () => ({
   useOpenSwaps: jest.fn(),
 }));
 
+jest.mock('../../../Ramp/hooks/useRampNavigation', () => ({
+  useRampNavigation: jest.fn(),
+  RampMode: { AGGREGATOR: 'AGGREGATOR', DEPOSIT: 'DEPOSIT' },
+}));
+
 jest.mock('../../hooks/useIsSwapEnabledForPriorityToken', () => ({
   useIsSwapEnabledForPriorityToken: jest.fn(),
 }));
@@ -563,6 +568,13 @@ describe('CardHome Component', () => {
       openSwaps: mockOpenSwaps,
     });
 
+    const { useRampNavigation } = jest.requireMock(
+      '../../../Ramp/hooks/useRampNavigation',
+    );
+    (useRampNavigation as jest.Mock).mockReturnValue({
+      goToRamps: jest.fn(),
+    });
+
     (useMetrics as jest.Mock).mockReturnValue({
       trackEvent: mockTrackEvent,
       createEventBuilder: mockCreateEventBuilder,

app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.test.tsx

@@ -10,15 +10,20 @@ import { trace, TraceName } from '../../../../../util/trace';
 import { CardTokenAllowance, AllowanceState } from '../../types';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
-import { createDepositNavigationDetails } from '../../../Ramp/Deposit/routes/utils';
+import {
+  useRampNavigation,
+  RampMode,
+} from '../../../Ramp/hooks/useRampNavigation';
 import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
 
 // Mock hooks first - must be hoisted before imports
 const mockUseParams = jest.fn();
 const mockGoBack = jest.fn();
 const mockNavigate = jest.fn();
+const mockGoToRamps = jest.fn();
 
 // Mock dependencies
+jest.mock('../../../Ramp/hooks/useRampNavigation');
 jest.mock('../../hooks/useOpenSwaps', () => ({
   useOpenSwaps: jest.fn(),
 }));
@@ -135,6 +140,10 @@ describe('AddFundsBottomSheet', () => {
       openSwaps: mockOpenSwaps,
     });
 
+    (useRampNavigation as jest.Mock).mockReturnValue({
+      goToRamps: mockGoToRamps,
+    });
+
     (useDepositEnabled as jest.Mock).mockReturnValue({
       isDepositEnabled: true,
     });
@@ -292,9 +301,7 @@ describe('AddFundsBottomSheet', () => {
 
     fireEvent.press(getByText('Fund with cash'));
 
-    expect(mockNavigate).toHaveBeenCalledWith(
-      ...createDepositNavigationDetails(),
-    );
+    expect(mockGoToRamps).toHaveBeenCalledWith({ mode: RampMode.DEPOSIT });
   });
 
   it('renders component correctly', () => {

app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigation } from '@react-navigation/native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
@@ -31,7 +30,10 @@ import { useOpenSwaps } from '../../hooks/useOpenSwaps';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { strings } from '../../../../../../locales/i18n';
 import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
-import { createDepositNavigationDetails } from '../../../Ramp/Deposit/routes/utils';
+import {
+  useRampNavigation,
+  RampMode,
+} from '../../../Ramp/hooks/useRampNavigation';
 import { safeFormatChainIdToHex } from '../../util/safeFormatChainIdToHex';
 import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 import {
@@ -52,7 +54,6 @@ export const createAddFundsModalNavigationDetails =
 
 const AddFundsBottomSheet: React.FC = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
-  const navigation = useNavigation();
   const { priorityToken } = useParams<AddFundsModalNavigationDetails>();
 
   const { isDepositEnabled } = useDepositEnabled();
@@ -63,6 +64,7 @@ const AddFundsBottomSheet: React.FC = () => {
   });
   const { trackEvent, createEventBuilder } = useMetrics();
   const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
+  const { goToRamps } = useRampNavigation();
 
   const closeBottomSheetAndNavigate = useCallback(
     (navigateFunc: () => void) => {
@@ -80,7 +82,7 @@ const AddFundsBottomSheet: React.FC = () => {
 
   const openDeposit = useCallback(() => {
     closeBottomSheetAndNavigate(() => {
-      navigation.navigate(...createDepositNavigationDetails());
+      goToRamps({ mode: RampMode.DEPOSIT });
     });
     trackEvent(
       createEventBuilder(
@@ -106,7 +108,7 @@ const AddFundsBottomSheet: React.FC = () => {
   }, [
     rampGeodetectedRegion,
     closeBottomSheetAndNavigate,
-    navigation,
+    goToRamps,
     trackEvent,
     createEventBuilder,
     priorityToken,