Merge branch 'main' into android_footer_fix

.github/CODEOWNERS

@@ -71,6 +71,10 @@ e2e/specs/identity @MetaMask/identity
 ses.cjs                              @MetaMask/supply-chain
 patches/react-native+0.*.patch       @MetaMask/supply-chain
 
+# Portfolio Team
+app/components/hooks/useTokenSearchDiscovery @MetaMask/portfolio
+app/core/Engine/controllers/TokenSearchDiscoveryController @MetaMask/portfolio
+
 # Snaps Team
 **/snaps/**                          @MetaMask/snaps-devs
 **/Snaps/**                          @MetaMask/snaps-devs

android/app/build.gradle

@@ -178,8 +178,8 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionName "7.39.0"
-        versionCode 1544
+        versionName "7.40.0"
+        versionCode 1553
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

app/components/Nav/Main/MainNavigator.js

@@ -89,6 +89,7 @@ import NftDetailsFullImage from '../../Views/NftDetails/NFtDetailsFullImage';
 import AccountPermissions from '../../../components/Views/AccountPermissions';
 import { AccountPermissionsScreens } from '../../../components/Views/AccountPermissions/AccountPermissions.types';
 import { StakeModalStack, StakeScreenStack } from '../../UI/Stake/routes';
+import BridgeView from '../../UI/Bridge';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -713,6 +714,16 @@ const Swaps = () => (
   </Stack.Navigator>
 );
 
+const Bridge = () => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="BridgeView"
+      component={BridgeView}
+      options={BridgeView.navigationOptions}
+    />
+  </Stack.Navigator>
+);
+
 const SetPasswordFlow = () => (
   <Stack.Navigator>
     <Stack.Screen
@@ -817,6 +828,7 @@ const MainNavigator = () => (
       {() => <RampRoutes rampType={RampType.SELL} />}
     </Stack.Screen>
     <Stack.Screen name="Swaps" component={Swaps} />
+    <Stack.Screen name="Bridge" component={Bridge} />
     <Stack.Screen name="StakeScreens" component={StakeScreenStack} />
     <Stack.Screen
       name="StakeModals"

app/components/UI/AssetOverview/AssetOverview.test.tsx

@@ -20,6 +20,8 @@ import * as networks from '../../../util/networks';
 // eslint-disable-next-line import/no-namespace
 import * as transactions from '../../../util/transactions';
 import { mockNetworkState } from '../../../util/test/network';
+import Engine from '../../../core/Engine';
+import Routes from '../../../constants/navigation/Routes';
 
 const MOCK_CHAIN_ID = '0x1';
 
@@ -106,6 +108,9 @@ jest.mock('../../../core/Engine', () => ({
         .mockReturnValue(mockNetworkConfiguration),
       setActiveNetwork: jest.fn().mockResolvedValue(undefined),
     },
+    MultichainNetworkController: {
+      setActiveNetwork: jest.fn().mockResolvedValue(undefined),
+    },
   },
 }));
 
@@ -338,4 +343,120 @@ describe('AssetOverview', () => {
     const buyButton = queryByTestId(TokenOverviewSelectorsIDs.BUY_BUTTON);
     expect(buyButton).toBeNull();
   });
+
+  describe('Portfolio view network switching', () => {
+    beforeEach(() => {
+      jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(true);
+      jest.useFakeTimers();
+      // Reset mocks before each test
+      jest.clearAllMocks();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('should switch networks before sending when on different chain', async () => {
+      const differentChainAsset = {
+        ...asset,
+        chainId: '0x89', // Different chain (Polygon)
+      };
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverview
+          asset={differentChainAsset}
+          displayBuyButton
+          displaySwapsButton
+          swapsIsLive
+        />,
+        { state: mockInitialState },
+      );
+
+      const sendButton = getByTestId('token-send-button');
+      await fireEvent.press(sendButton);
+
+      // Wait for all promises to resolve
+      await Promise.resolve();
+
+      expect(navigate).toHaveBeenCalledWith(Routes.WALLET.HOME, {
+        screen: Routes.WALLET.TAB_STACK_FLOW,
+        params: {
+          screen: Routes.WALLET_VIEW,
+        },
+      });
+    });
+
+    it('should switch networks before swapping when on different chain', async () => {
+      const differentChainAsset = {
+        ...asset,
+        chainId: '0x89', // Different chain (Polygon)
+      };
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverview
+          asset={differentChainAsset}
+          displayBuyButton
+          displaySwapsButton
+          swapsIsLive
+        />,
+        { state: mockInitialState },
+      );
+
+      const swapButton = getByTestId('token-swap-button');
+      await fireEvent.press(swapButton);
+
+      // Wait for all promises to resolve
+      await Promise.resolve();
+
+      expect(navigate).toHaveBeenCalledWith(Routes.WALLET.HOME, {
+        screen: Routes.WALLET.TAB_STACK_FLOW,
+        params: {
+          screen: Routes.WALLET_VIEW,
+        },
+      });
+
+      expect(
+        Engine.context.NetworkController.getNetworkConfigurationByChainId,
+      ).toHaveBeenCalledWith('0x89');
+
+      // Fast-forward timers to trigger the swap navigation
+      jest.advanceTimersByTime(500);
+
+      expect(navigate).toHaveBeenCalledWith('Swaps', {
+        screen: 'SwapsAmountView',
+        params: {
+          sourceToken: differentChainAsset.address,
+          sourcePage: 'MainView',
+          chainId: '0x89',
+        },
+      });
+    });
+
+    it('should not switch networks when on same chain', async () => {
+      const sameChainAsset = {
+        ...asset,
+        chainId: MOCK_CHAIN_ID, // Same chain as current
+      };
+
+      const { getByTestId } = renderWithProvider(
+        <AssetOverview
+          asset={sameChainAsset}
+          displayBuyButton
+          displaySwapsButton
+          swapsIsLive
+        />,
+        { state: mockInitialState },
+      );
+
+      const sendButton = getByTestId('token-send-button');
+      await fireEvent.press(sendButton);
+
+      // Wait for all promises to resolve
+      await Promise.resolve();
+
+      expect(
+        Engine.context.MultichainNetworkController.setActiveNetwork,
+      ).not.toHaveBeenCalled();
+    });
+  });
 });

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -95,7 +95,6 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const primaryCurrency = useSelector(
     (state: RootState) => state.settings.primaryCurrency,
   );
-  const goToBridge = useGoToBridge('TokenDetails');
   const selectedAddress = useSelector(
     selectSelectedInternalAccountFormattedAddress,
   );
@@ -176,6 +175,23 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     });
   }, [navigation, asset.address, asset.chainId]);
 
+  const handleBridgeNavigation = useCallback(() => {
+    navigation.navigate('Bridge', {
+      screen: 'BridgeView',
+      params: {
+        sourceToken: asset.address,
+        sourcePage: 'MainView',
+        chainId: asset.chainId,
+      },
+    });
+  }, [navigation, asset.address, asset.chainId]);
+
+  const goToPortfolioBridge = useGoToBridge('TokenDetails');
+
+  const goToBridge = process.env.MM_BRIDGE_UI_ENABLED === 'true'
+    ? handleBridgeNavigation
+    : goToPortfolioBridge;
+
   const onSend = async () => {
     if (isPortfolioViewEnabled()) {
       navigation.navigate(Routes.WALLET.HOME, {
@@ -186,7 +202,8 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
       });
 
       if (asset.chainId !== selectedChainId) {
-        const { NetworkController } = Engine.context;
+        const { NetworkController, MultichainNetworkController } =
+          Engine.context;
         const networkConfiguration =
           NetworkController.getNetworkConfigurationByChainId(
             asset.chainId as Hex,
@@ -197,7 +214,9 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
             networkConfiguration.defaultRpcEndpointIndex
           ]?.networkClientId;
 
-        await NetworkController.setActiveNetwork(networkClientId as string);
+        await MultichainNetworkController.setActiveNetwork(
+          networkClientId as string,
+        );
       }
     }
     if ((asset.isETH || asset.isNative) && ticker) {
@@ -217,7 +236,8 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
         },
       });
       if (asset.chainId !== selectedChainId) {
-        const { NetworkController } = Engine.context;
+        const { NetworkController, MultichainNetworkController } =
+          Engine.context;
         const networkConfiguration =
           NetworkController.getNetworkConfigurationByChainId(
             asset.chainId as Hex,
@@ -228,13 +248,13 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
             networkConfiguration.defaultRpcEndpointIndex
           ]?.networkClientId;
 
-        NetworkController.setActiveNetwork(networkClientId as string).then(
-          () => {
-            setTimeout(() => {
-              handleSwapNavigation();
-            }, 500);
-          },
-        );
+        MultichainNetworkController.setActiveNetwork(
+          networkClientId as string,
+        ).then(() => {
+          setTimeout(() => {
+            handleSwapNavigation();
+          }, 500);
+        });
       } else {
         handleSwapNavigation();
       }

app/components/UI/Bridge/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import ScreenView from '../../Base/ScreenView';
+import { useTheme } from '../../../util/theme';
+import Text from '../../../component-library/components/Texts/Text';
+
+const createStyles = (colors) =>
+  StyleSheet.create({
+    container: { backgroundColor: colors.background.default },
+    content: {
+      flexGrow: 1,
+      justifyContent: 'center',
+    },
+  });
+
+const BridgeView = () => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  return (
+    <ScreenView
+      style={styles.container}
+      contentContainerStyle={styles.screen}
+      keyboardShouldPersistTaps="handled"
+    >
+      <View style={styles.content}>
+        <Text>Bridge</Text>
+      </View>
+    </ScreenView>
+  );
+};
+
+export default BridgeView;

app/components/UI/Bridge/index.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import renderWithProvider, {
+  DeepPartial,
+} from '../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../util/test/initial-root-state';
+import { RootState } from '../../../reducers';
+import BridgeView from './';
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      setOptions: jest.fn(),
+      pop: jest.fn(),
+      navigate: jest.fn(),
+    }),
+    useRoute: () => ({}),
+  };
+});
+
+jest.mock('../../../core/Engine', () => ({
+  context: {
+    SwapsController: {
+      fetchAggregatorMetadataWithCache: jest.fn(),
+      fetchTopAssetsWithCache: jest.fn(),
+      fetchTokenWithCache: jest.fn(),
+    },
+  },
+}));
+
+const mockInitialState: DeepPartial<RootState> = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+    },
+  },
+};
+
+describe('BridgeView', () => {
+  it('renders', async () => {
+    const { getByText } = renderWithProvider(<BridgeView />, {
+      state: mockInitialState,
+    });
+    expect(getByText('Bridge')).toBeDefined();
+  });
+});