fix: cp-7.46.0 show bridge button when the mobile feature flag is off and redirect to Portfolio

app/components/UI/Bridge/utils/index.test.ts

@@ -0,0 +1,74 @@
+import { isBridgeAllowed } from './index';
+import AppConstants from '../../../../core/AppConstants';
+import {
+  ARBITRUM_CHAIN_ID,
+  AVALANCHE_CHAIN_ID,
+  BASE_CHAIN_ID,
+  BSC_CHAIN_ID,
+  ETH_CHAIN_ID,
+  LINEA_CHAIN_ID,
+  OPTIMISM_CHAIN_ID,
+  POLYGON_CHAIN_ID,
+  ZKSYNC_ERA_CHAIN_ID,
+} from '@metamask/swaps-controller/dist/constants';
+import { Hex } from '@metamask/utils';
+
+jest.mock('../../../../core/AppConstants', () => ({
+  BRIDGE: {
+    ACTIVE: true,
+  },
+}));
+
+describe('Bridge Utils', () => {
+  describe('isBridgeAllowed', () => {
+    const supportedChainIds: Hex[] = [
+      ETH_CHAIN_ID,
+      OPTIMISM_CHAIN_ID,
+      BSC_CHAIN_ID,
+      POLYGON_CHAIN_ID,
+      ZKSYNC_ERA_CHAIN_ID,
+      BASE_CHAIN_ID,
+      ARBITRUM_CHAIN_ID,
+      AVALANCHE_CHAIN_ID,
+      LINEA_CHAIN_ID,
+    ];
+
+    it('should return true when bridge is active and chain ID is allowed', () => {
+      supportedChainIds.forEach((chainId) => {
+        expect(isBridgeAllowed(chainId)).toBe(true);
+      });
+    });
+
+    it('should return false when bridge is active but chain ID is not allowed', () => {
+      const unsupportedChainId = '0x1234' as Hex;
+      expect(isBridgeAllowed(unsupportedChainId)).toBe(false);
+    });
+
+    it('should return false when bridge is inactive', () => {
+      Object.defineProperty(AppConstants.BRIDGE, 'ACTIVE', {
+        get: () => false,
+      });
+
+      supportedChainIds.forEach((chainId) => {
+        expect(isBridgeAllowed(chainId)).toBe(false);
+      });
+    });
+
+    it('should handle invalid chain ID formats', () => {
+      const invalidChainIds = ['0x123' as Hex, '0x' as Hex];
+
+      invalidChainIds.forEach((chainId) => {
+        expect(isBridgeAllowed(chainId)).toBe(false);
+      });
+    });
+
+    it('should handle edge cases', () => {
+      // Test with malformed chain ID
+      expect(
+        isBridgeAllowed(
+          '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef' as Hex,
+        ),
+      ).toBe(false);
+    });
+  });
+});

app/components/UI/Bridge/utils/index.ts

@@ -0,0 +1,41 @@
+import {
+  CaipChainId,
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  SolScope
+///: END:ONLY_INCLUDE_IF(keyring-snaps)
+} from '@metamask/keyring-api';
+import AppConstants from '../../../../core/AppConstants';
+import { Hex } from '@metamask/utils';
+import {
+  ARBITRUM_CHAIN_ID,
+  AVALANCHE_CHAIN_ID,
+  BASE_CHAIN_ID,
+  BSC_CHAIN_ID,
+  ETH_CHAIN_ID,
+  LINEA_CHAIN_ID,
+  OPTIMISM_CHAIN_ID,
+  POLYGON_CHAIN_ID,
+  ZKSYNC_ERA_CHAIN_ID,
+} from '@metamask/swaps-controller/dist/constants';
+
+const ALLOWED_CHAIN_IDS: (Hex | CaipChainId)[] = [
+  ETH_CHAIN_ID,
+  OPTIMISM_CHAIN_ID,
+  BSC_CHAIN_ID,
+  POLYGON_CHAIN_ID,
+  ZKSYNC_ERA_CHAIN_ID,
+  BASE_CHAIN_ID,
+  ARBITRUM_CHAIN_ID,
+  AVALANCHE_CHAIN_ID,
+  LINEA_CHAIN_ID,
+  ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  SolScope.Mainnet,
+  ///: END:ONLY_INCLUDE_IF(keyring-snaps)
+];
+
+export const isBridgeAllowed = (chainId: Hex | CaipChainId) => {
+  if (!AppConstants.BRIDGE.ACTIVE) {
+    return false;
+  }
+  return ALLOWED_CHAIN_IDS.includes(chainId);
+};

app/components/Views/Asset/index.js

@@ -74,7 +74,7 @@ import {
   selectSupportedSwapTokenAddressesForChainId,
 } from '../../../selectors/tokenSearchDiscoveryDataController';
 import { isNonEvmChainId } from '../../../core/Multichain/utils';
-import { selectIsBridgeEnabledSource } from '../../../core/redux/slices/bridge';
+import { isBridgeAllowed } from '../../UI/Bridge/utils';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -187,10 +187,6 @@ class Asset extends PureComponent {
      * Function to set the swaps liveness
      */
     setLiveness: PropTypes.func,
-    /**
-     * Boolean that indicates if bridge is enabled for the source chain
-     */
-    isBridgeEnabledSource: PropTypes.bool,
   };
 
   state = {
@@ -525,25 +521,28 @@ class Asset extends PureComponent {
     const styles = createStyles(colors);
     const asset = navigation && params;
     const isSwapsFeatureLive = this.props.swapsIsLive;
-    const isNetworkAllowed = isPortfolioViewEnabled()
+    const isSwapsNetworkAllowed = isPortfolioViewEnabled()
       ? isSwapsAllowed(asset.chainId)
       : isSwapsAllowed(chainId);
 
-    let isAssetAllowed;
+    let isSwapsAssetAllowed;
     if (asset.isETH || asset.isNative) {
-      isAssetAllowed = true;
+      isSwapsAssetAllowed = true;
     } else if (isAssetFromSearch(asset)) {
-      isAssetAllowed = this.props.searchDiscoverySwapsTokens?.includes(
+      isSwapsAssetAllowed = this.props.searchDiscoverySwapsTokens?.includes(
         asset.address?.toLowerCase(),
       );
     } else {
-      isAssetAllowed = asset.address?.toLowerCase() in this.props.swapsTokens;
+      isSwapsAssetAllowed =
+        asset.address?.toLowerCase() in this.props.swapsTokens;
     }
 
     const displaySwapsButton =
-      isNetworkAllowed && isAssetAllowed && AppConstants.SWAPS.ACTIVE;
+      isSwapsNetworkAllowed && isSwapsAssetAllowed && AppConstants.SWAPS.ACTIVE;
 
-    const displayBridgeButton = this.props.isBridgeEnabledSource;
+    const displayBridgeButton = isPortfolioViewEnabled()
+      ? isBridgeAllowed(asset.chainId)
+      : isBridgeAllowed(chainId);
 
     const displayBuyButton = asset.isETH
       ? this.props.isNetworkBuyNativeTokenSupported
@@ -620,10 +619,6 @@ const mapStateToProps = (state, { route }) => ({
     getRampNetworks(state),
   ),
   networkClientId: selectNetworkClientId(state),
-  isBridgeEnabledSource: selectIsBridgeEnabledSource(
-    state,
-    route.params.chainId,
-  ),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/Views/WalletActions/WalletActions.test.tsx

@@ -31,7 +31,7 @@ import { sendMultichainTransaction } from '../../../core/SnapKeyring/utils/sendM
 import { trace, TraceName } from '../../../util/trace';
 import { RampType } from '../../../reducers/fiatOrders/types';
 import { selectStablecoinLendingEnabledFlag } from '../../UI/Earn/selectors/featureFlags';
-import { selectIsBridgeEnabledSource } from '../../../core/redux/slices/bridge';
+import { isBridgeAllowed } from '../../UI/Bridge/utils';
 
 jest.mock('../../UI/Earn/selectors/featureFlags', () => ({
   selectStablecoinLendingEnabledFlag: jest.fn(),
@@ -131,6 +131,10 @@ jest.mock('../../../components/UI/Swaps/utils', () => ({
   isSwapsAllowed: jest.fn().mockReturnValue(true),
 }));
 
+jest.mock('../../UI/Bridge/utils', () => ({
+  isBridgeAllowed: jest.fn().mockReturnValue(true),
+}));
+
 jest.mock('../../UI/Ramp/hooks/useRampNetwork', () => ({
   __esModule: true,
   default: jest.fn().mockReturnValue([true]),
@@ -149,6 +153,7 @@ jest.mock('../../../core/AppConstants', () => ({
     PROJECT_ID: 'test-project-id',
   },
   BRIDGE: {
+    ACTIVE: true,
     URL: 'https://bridge.metamask.io',
   },
 }));
@@ -313,9 +318,7 @@ describe('WalletActions', () => {
 
   it('should not show the buy button and swap button if the chain does not allow buying', () => {
     (isSwapsAllowed as jest.Mock).mockReturnValue(false);
-    (selectIsBridgeEnabledSource as unknown as jest.Mock).mockReturnValue(
-      false,
-    );
+    (isBridgeAllowed as jest.Mock).mockReturnValue(false);
     jest
       .requireMock('../../UI/Ramp/hooks/useRampNetwork')
       .default.mockReturnValue([false]);
@@ -424,7 +427,6 @@ describe('WalletActions', () => {
   it('should call the goToSwaps function when the Swap button is pressed', () => {
     (isSwapsAllowed as jest.Mock).mockReturnValue(true);
     (selectChainId as unknown as jest.Mock).mockReturnValue('0x1');
-    (selectIsBridgeEnabledSource as unknown as jest.Mock).mockReturnValue(true);
 
     const { getByTestId } = renderWithProvider(<WalletActions />, {
       state: mockInitialState,
@@ -467,7 +469,7 @@ describe('WalletActions', () => {
   });
 
   it('should call the goToBridge function when the Bridge button is pressed', () => {
-    (selectIsBridgeEnabledSource as unknown as jest.Mock).mockReturnValue(true);
+    (isBridgeAllowed as jest.Mock).mockReturnValue(true);
     const { getByTestId } = renderWithProvider(<WalletActions />, {
       state: mockInitialState,
     });
@@ -503,7 +505,7 @@ describe('WalletActions', () => {
   it('disables action buttons when the account cannot sign transactions', () => {
     (selectCanSignTransactions as unknown as jest.Mock).mockReturnValue(false);
     (isSwapsAllowed as jest.Mock).mockReturnValue(true);
-    (selectIsBridgeEnabledSource as unknown as jest.Mock).mockReturnValue(true);
+    (isBridgeAllowed as jest.Mock).mockReturnValue(true);
     jest
       .requireMock('../../UI/Ramp/hooks/useRampNetwork')
       .default.mockReturnValue([true]);

app/components/Views/WalletActions/WalletActions.tsx

@@ -54,8 +54,7 @@ import {
 } from '../../UI/Bridge/hooks/useSwapBridgeNavigation';
 import { RampType } from '../../../reducers/fiatOrders/types';
 import { selectStablecoinLendingEnabledFlag } from '../../UI/Earn/selectors/featureFlags';
-import { RootState } from '../../../reducers';
-import { selectIsBridgeEnabledSource } from '../../../core/redux/slices/bridge';
+import { isBridgeAllowed } from '../../UI/Bridge/utils';
 
 const WalletActions = () => {
   const { styles } = useStyles(styleSheet, {});
@@ -74,9 +73,6 @@ const WalletActions = () => {
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   const selectedAccount = useSelector(selectSelectedInternalAccount);
   ///: END:ONLY_INCLUDE_IF
-  const isBridgeEnabledSource = useSelector((state: RootState) =>
-    selectIsBridgeEnabledSource(state, chainId),
-  );
 
   const canSignTransactions = useSelector(selectCanSignTransactions);
   const { goToBridge: goToBridgeBase, goToSwaps: goToSwapsBase } =
@@ -333,7 +329,7 @@ const WalletActions = () => {
             disabled={!canSignTransactions || !swapsIsLive}
           />
         )}
-        {isBridgeEnabledSource && (
+        {AppConstants.BRIDGE.ACTIVE && isBridgeAllowed(chainId) && (
           <WalletAction
             actionType={WalletActionType.Bridge}
             iconName={IconName.Bridge}