feat: improve price impact row and warnings

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

@@ -2,13 +2,14 @@ import React from 'react';
 import '../../_mocks_/initialState';
 import { fireEvent, waitFor } from '@testing-library/react-native';
 import { renderScreen } from '../../../../../util/test/renderWithProvider';
-import QuoteDetailsCard from './QuoteDetailsCard';
+import QuoteDetailsCard, { getPriceImpactTextColor } from './QuoteDetailsCard';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import mockQuotes from '../../_mocks_/mock-quotes-sol-sol.json';
 import mockQuotesGasIncluded from '../../_mocks_/mock-quotes-gas-included.json';
 import { createBridgeTestState } from '../../testUtils';
 import { useBridgeQuoteData } from '../../hooks/useBridgeQuoteData';
+import { TextColor } from '../../../../../component-library/components/Texts/Text';
 
 jest.mock(
   '../../../../../animations/rewards_icon_animations.riv',
@@ -267,6 +268,21 @@ describe('QuoteDetailsCard', () => {
     jest.clearAllMocks();
   });
 
+  it.each([
+    { priceImpact: undefined, expectedColor: TextColor.Alternative },
+    { priceImpact: '-0.06%', expectedColor: TextColor.Alternative },
+    { priceImpact: '5.00%', expectedColor: TextColor.Alternative },
+    { priceImpact: '5.01%', expectedColor: TextColor.Warning },
+    { priceImpact: '25.00%', expectedColor: TextColor.Warning },
+    { priceImpact: '25.01%', expectedColor: TextColor.Error },
+    { priceImpact: 'invalid', expectedColor: TextColor.Alternative },
+  ])(
+    'returns the right text color for $priceImpact',
+    ({ priceImpact, expectedColor }) => {
+      expect(getPriceImpactTextColor(priceImpact)).toBe(expectedColor);
+    },
+  );
+
   it('renders initial state', () => {
     const { toJSON } = renderScreen(
       QuoteDetailsCard,

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

@@ -45,6 +45,7 @@ import { useLatestBalance } from '../../hooks/useLatestBalance';
 import TagColored, {
   TagColor,
 } from '../../../../../component-library/components-temp/TagColored';
+import AppConstants from '../../../../../core/AppConstants';
 
 if (
   Platform.OS === 'android' &&
@@ -53,6 +54,30 @@ if (
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
+export const getPriceImpactTextColor = (
+  priceImpactValue?: string,
+): TextColor => {
+  if (!priceImpactValue) {
+    return TextColor.Alternative;
+  }
+
+  const priceImpact = Number.parseFloat(priceImpactValue.replace('%', ''));
+
+  if (!Number.isFinite(priceImpact)) {
+    return TextColor.Alternative;
+  }
+
+  if (priceImpact > AppConstants.BRIDGE.PRICE_IMPACT_ERROR_THRESHOLD) {
+    return TextColor.Error;
+  }
+
+  if (priceImpact > AppConstants.BRIDGE.PRICE_IMPACT_WARNING_THRESHOLD) {
+    return TextColor.Warning;
+  }
+
+  return TextColor.Alternative;
+};
+
 const QuoteDetailsCard: React.FC = () => {
   const theme = useTheme();
   const navigation = useNavigation();
@@ -62,7 +87,6 @@ const QuoteDetailsCard: React.FC = () => {
     formattedQuoteData,
     activeQuote,
     isLoading: isQuoteLoading,
-    shouldShowPriceImpactWarning,
   } = useBridgeQuoteData();
   const sourceToken = useSelector(selectSourceToken);
   const destToken = useSelector(selectDestToken);
@@ -353,9 +377,7 @@ const QuoteDetailsCard: React.FC = () => {
               label: {
                 text: priceImpact,
                 variant: TextVariant.BodyMD,
-                color: shouldShowPriceImpactWarning
-                  ? TextColor.Error
-                  : TextColor.Alternative,
+                color: getPriceImpactTextColor(priceImpact),
               },
             }}
           />

app/core/AppConstants.ts

@@ -30,6 +30,8 @@ export default {
   BRIDGE: {
     ACTIVE: true,
     URL: `${PORTFOLIO_URL}/bridge`,
+    PRICE_IMPACT_WARNING_THRESHOLD: 5,
+    PRICE_IMPACT_ERROR_THRESHOLD: 25,
     // Check app/components/UI/Bridge/types.ts
     // for interface definition.
     SLIPPAGE_CONFIG: {