[pull] main from MetaMask:main

app/components/UI/Bridge/components/BridgeTokenSelector/NetworkListModal.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler'; // Must use this to make sure scroll works inside a bottom sheet on Android
 import { useSelector, useDispatch } from 'react-redux';
 import { Icon, IconName, IconSize } from '@metamask/design-system-react-native';
 import { IconName as ComponentLibraryIconName } from '../../../../../component-library/components/Icons/Icon';

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

@@ -602,6 +602,45 @@ describe('QuoteDetailsCard', () => {
     });
   });
 
+  it('does not navigate when price impact is below warning threshold', () => {
+    // priceImpact 0.04 < warning threshold 0.05 → priceImpactIsSafe = true → no navigation
+    const mockModule = jest.requireMock('../../hooks/useBridgeQuoteData');
+    mockModule.useBridgeQuoteData.mockImplementationOnce(() => ({
+      quoteFetchError: null,
+      activeQuote: {
+        ...mockQuotes[0],
+        quote: {
+          ...mockQuotes[0].quote,
+          priceData: { ...mockQuotes[0].quote.priceData, priceImpact: '0.04' },
+          gasIncluded: false,
+          gasIncluded7702: false,
+        },
+      },
+      destTokenAmount: '24.44',
+      isLoading: false,
+      formattedQuoteData: {
+        networkFee: '0.01',
+        estimatedTime: '1 min',
+        rate: '1 ETH = 24.4 USDC',
+        priceImpact: '0.04%',
+        slippage: '0.5%',
+      },
+    }));
+
+    const { getByTestId } = renderScreen(
+      QuoteDetailsCardTestScreen,
+      { name: Routes.BRIDGE.ROOT },
+      { state: testState },
+    );
+
+    fireEvent.press(getByTestId('price-impact-info-button'));
+
+    expect(mockNavigate).not.toHaveBeenCalledWith(Routes.BRIDGE.MODALS.ROOT, {
+      screen: Routes.BRIDGE.MODALS.PRICE_IMPACT_MODAL,
+      params: expect.anything(),
+    });
+  });
+
   it('opens rate tooltip modal when rate info icon is pressed', () => {
     const { getByLabelText } = renderScreen(
       QuoteDetailsCardTestScreen,

app/components/UI/Bridge/components/QuoteDetailsCard/QuoteDetailsCard.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { TouchableOpacity, Platform, UIManager, Pressable } from 'react-native';
+import { TouchableOpacity, Platform, UIManager } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { strings } from '../../../../../../locales/i18n';
 import { useTheme } from '../../../../../util/theme';
@@ -26,6 +26,7 @@ import {
   selectSourceAmount,
   selectDestToken,
   selectSourceToken,
+  selectBridgeFeatureFlags,
 } from '../../../../../core/redux/slices/bridge';
 import { getNativeSourceToken } from '../../utils/tokenUtils';
 import { formatMinimumReceived } from '../../utils/currencyUtils';
@@ -53,6 +54,7 @@ import { PriceImpactModalType } from '../PriceImpactModal/constants';
 import { formatPriceImpact } from '../../utils/formatPriceImpact';
 import KeyValueRowLabel from '../../../../../component-library/components-temp/KeyValueRow/KeyValueLabel/KeyValueLabel';
 import { usePriceImpactViewData } from '../../hooks/usePriceImpactViewData';
+import AppConstants from '../../../../../core/AppConstants';
 
 if (
   Platform.OS === 'android' &&
@@ -65,6 +67,7 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
   hasInsufficientBalance,
   location,
 }) => {
+  const bridgeFeatureFlags = useSelector(selectBridgeFeatureFlags);
   const tw = useTailwind();
   const theme = useTheme();
   const navigation = useNavigation();
@@ -90,6 +93,13 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
     isQuoteLoading,
   });
 
+  const priceImpactIsSafe =
+    !activeQuote?.quote.priceData?.priceImpact ||
+    Number(activeQuote.quote.priceData.priceImpact) <=
+      // @ts-expect-error TODO: remove comment after changes to core are published.
+      (bridgeFeatureFlags?.priceImpactThreshold?.warning ??
+        AppConstants.BRIDGE.PRICE_IMPACT_WARNING_THRESHOLD);
+
   const nativeTokenName = useMemo(() => {
     const chainId = sourceToken?.chainId;
     if (!chainId) return undefined;
@@ -117,6 +127,10 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
   };
 
   const handlePriceImpactPress = () => {
+    if (priceImpactIsSafe) {
+      return;
+    }
+
     navigation.navigate(Routes.BRIDGE.MODALS.ROOT, {
       screen: Routes.BRIDGE.MODALS.PRICE_IMPACT_MODAL,
       params: {
@@ -133,7 +147,7 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
     activeQuote?.minToTokenAmount?.amount || '0',
   );
 
-  const priceImactViewData = usePriceImpactViewData(
+  const priceImpactViewData = usePriceImpactViewData(
     activeQuote?.quote.priceData?.priceImpact,
   );
 
@@ -178,28 +192,33 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
               iconName: IconNameLegacy.Info,
             }}
           />
-          <Box twClassName="flex-1 min-w-0">
-            <Text
-              variant={TextVariant.BodyMd}
-              color={TextColor.TextAlternative}
-              style={tw`text-right`}
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {formattedQuoteData?.rate}
-            </Text>
-          </Box>
-          <Pressable
-            style={tw`shrink-0`}
+          <TouchableOpacity
+            style={tw`flex-1 items-end`}
             onPress={handleRatePress}
             testID="rate-arrow-button"
+            activeOpacity={0.6}
           >
-            <Icon
-              name={IconName.ArrowRight}
-              size={IconSize.Sm}
-              color={IconColor.IconAlternative}
-            />
-          </Pressable>
+            <Box
+              flexDirection={BoxFlexDirection.Row}
+              alignItems={BoxAlignItems.Center}
+              gap={1}
+            >
+              <Text
+                variant={TextVariant.BodyMd}
+                color={TextColor.TextAlternative}
+                style={tw`text-right`}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {formattedQuoteData?.rate}
+              </Text>
+              <Icon
+                name={IconName.ArrowRight}
+                size={IconSize.Sm}
+                color={IconColor.IconAlternative}
+              />
+            </Box>
+          </TouchableOpacity>
         </Box>
         {shouldShowGasSponsored ? (
           <KeyValueRow
@@ -372,32 +391,32 @@ const QuoteDetailsCard: React.FC<QuoteDetailsCardProps> = ({
           }}
           value={{
             label: (
-              <Box
-                flexDirection={BoxFlexDirection.Row}
-                alignItems={BoxAlignItems.Center}
-                gap={1}
+              <TouchableOpacity
+                testID="price-impact-info-button"
+                onPress={handlePriceImpactPress}
+                activeOpacity={priceImpactIsSafe ? 1 : 0.6}
               >
-                <TouchableOpacity
-                  testID="price-impact-info-button"
-                  onPress={handlePriceImpactPress}
-                  activeOpacity={0.6}
+                <Box
+                  flexDirection={BoxFlexDirection.Row}
+                  alignItems={BoxAlignItems.Center}
+                  gap={1}
                 >
-                  {priceImactViewData.icon && (
+                  {priceImpactViewData.icon && (
                     <Icon
-                      name={priceImactViewData.icon.name}
+                      name={priceImpactViewData.icon.name}
                       size={IconSize.Sm}
-                      color={priceImactViewData.icon.color}
+                      color={priceImpactViewData.icon.color}
                       twClassName="mt-[2px]"
                     />
                   )}
-                </TouchableOpacity>
-                <Text
-                  variant={TextVariant.BodyMd}
-                  color={priceImactViewData.textColor}
-                >
-                  {formatPriceImpact(formattedQuoteData.priceImpact)}
-                </Text>
-              </Box>
+                  <Text
+                    variant={TextVariant.BodyMd}
+                    color={priceImpactViewData.textColor}
+                  >
+                    {formatPriceImpact(formattedQuoteData.priceImpact)}
+                  </Text>
+                </Box>
+              </TouchableOpacity>
             ),
           }}
         />