Merge branch 'main' into fix-hardcode-remove-gns-ff

Author: vinnyhoward

app/components/Nav/Main/MainNavigator.js

@@ -100,13 +100,9 @@ import {
   PerpsScreenStack,
   PerpsModalStack,
   PerpsTutorialCarousel,
-  selectPerpsEnabledFlag,
 } from '../../UI/Perps';
-import {
-  PredictScreenStack,
-  PredictModalStack,
-  selectPredictEnabledFlag,
-} from '../../UI/Predict';
+import { PredictScreenStack, PredictModalStack } from '../../UI/Predict';
+import { useFeatureFlag, FeatureFlagNames } from '../../hooks/useFeatureFlag';
 import { selectAssetsTrendingTokensEnabled } from '../../../selectors/featureFlagController/assetsTrendingTokens';
 import PerpsPositionTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView';
 import PerpsOrderTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView';
@@ -921,11 +917,15 @@ const SampleFeatureFlow = () => (
 
 const MainNavigator = () => {
   // Get feature flag state for conditional Perps screen registration
-  const perpsEnabledFlag = useSelector(selectPerpsEnabledFlag);
+  const perpsEnabledFlag = useFeatureFlag(
+    FeatureFlagNames.perpsPerpTradingEnabled,
+  );
   const isEvmSelected = useSelector(selectIsEvmNetworkSelected);
   const isPerpsEnabled = useMemo(() => perpsEnabledFlag, [perpsEnabledFlag]);
   // Get feature flag state for conditional Predict screen registration
-  const predictEnabledFlag = useSelector(selectPredictEnabledFlag);
+  const predictEnabledFlag = useFeatureFlag(
+    FeatureFlagNames.predictTradingEnabled,
+  );
   const isPredictEnabled = useMemo(
     () => predictEnabledFlag,
     [predictEnabledFlag],

app/components/UI/Bridge/Views/BridgeView/BridgeView.styles.ts

@@ -26,32 +26,6 @@ export const createStyles = (params: { theme: Theme }) => {
     button: {
       width: '100%',
     },
-    arrowContainer: {
-      position: 'relative',
-      alignItems: 'center',
-      height: 1,
-      backgroundColor: theme.colors.border.muted,
-    },
-    arrowCircle: {
-      position: 'absolute',
-      top: -22,
-      backgroundColor: theme.colors.background.alternative,
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    arrow: {
-      fontSize: 20,
-      color: theme.colors.text.default,
-      lineHeight: 20,
-      height: 20,
-      includeFontPadding: false,
-      textAlignVertical: 'center',
-      paddingTop: 1,
-    },
     quoteContainer: {
       flex: 1,
       justifyContent: 'flex-end',
@@ -77,7 +51,7 @@ export const createStyles = (params: { theme: Theme }) => {
       textAlign: 'center',
     },
     destTokenArea: {
-      marginTop: 16,
+      // marginTop: 16,
     },
   });
 };

app/components/UI/Bridge/Views/BridgeView/__snapshots__/BridgeView.test.tsx.snap

@@ -17,7 +17,6 @@ import Text, {
   TextColor,
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
-import { IconName } from '../../../../../component-library/components/Icons/Icon';
 import {
   getDecimalChainId,
   getNetworkImageSource,
@@ -55,9 +54,6 @@ import { strings } from '../../../../../../locales/i18n';
 import useSubmitBridgeTx from '../../../../../util/bridge/hooks/useSubmitBridgeTx';
 import Engine from '../../../../../core/Engine';
 import Routes from '../../../../../constants/navigation/Routes';
-import ButtonIcon, {
-  ButtonIconSizes,
-} from '../../../../../component-library/components/Buttons/ButtonIcon';
 import QuoteDetailsCard from '../../components/QuoteDetailsCard';
 import { useBridgeQuoteRequest } from '../../hooks/useBridgeQuoteRequest';
 import { useBridgeQuoteData } from '../../hooks/useBridgeQuoteData';
@@ -86,6 +82,7 @@ import { isNullOrUndefined } from '@metamask/utils';
 import { useBridgeQuoteEvents } from '../../hooks/useBridgeQuoteEvents/index.ts';
 import { SwapsKeypad } from '../../components/SwapsKeypad/index.tsx';
 import { useGasIncluded } from '../../hooks/useGasIncluded';
+import { FLipQuoteButton } from '../../components/FlipQuoteButton/index.tsx';
 
 export interface BridgeRouteParams {
   sourcePage: string;
@@ -485,7 +482,7 @@ const BridgeView = () => {
     // @ts-expect-error The type is incorrect, this will work
     <ScreenView contentContainerStyle={styles.screen}>
       <Box style={styles.content}>
-        <Box style={styles.inputsContainer} gap={8}>
+        <Box style={styles.inputsContainer}>
           <TokenInputArea
             ref={inputRef}
             amount={sourceAmount}
@@ -509,17 +506,10 @@ const BridgeView = () => {
             latestAtomicBalance={latestSourceBalance?.atomicBalance}
             isSourceToken
           />
-          <Box style={styles.arrowContainer}>
-            <Box style={styles.arrowCircle}>
-              <ButtonIcon
-                iconName={IconName.SwapVertical}
-                onPress={handleSwitchTokens(destTokenAmount)}
-                disabled={!destChainId || !destToken}
-                testID="arrow-button"
-                size={ButtonIconSizes.Lg}
-              />
-            </Box>
-          </Box>
+          <FLipQuoteButton
+            onPress={handleSwitchTokens(destTokenAmount)}
+            disabled={!destChainId || !destToken || !sourceToken}
+          />
           <TokenInputArea
             amount={destTokenAmount}
             token={destToken}

app/components/UI/Bridge/Views/BridgeView/index.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { FLipQuoteButton } from './index';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { initialState } from '../../_mocks_/initialState';
+
+const mockOnPress = jest.fn();
+
+const renderFlipQuoteButton = (disabled: boolean = false) =>
+  renderWithProvider(
+    <FLipQuoteButton onPress={mockOnPress} disabled={disabled} />,
+    {
+      state: initialState,
+    },
+  );
+
+describe('FLipQuoteButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with enabled state', () => {
+      const { toJSON, getByTestId } = renderFlipQuoteButton(false);
+
+      expect(getByTestId('arrow-button')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it('renders with disabled state', () => {
+      const { toJSON, getByTestId } = renderFlipQuoteButton(true);
+
+      expect(getByTestId('arrow-button')).toBeTruthy();
+      expect(toJSON()).toMatchSnapshot();
+    });
+
+    it('renders SwapVertical icon', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      expect(button).toBeTruthy();
+    });
+  });
+
+  describe('Interaction - Enabled State', () => {
+    it('calls onPress when button is pressed and enabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent.press(button);
+
+      expect(mockOnPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles onPressIn event when enabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+
+      // Component should handle pressIn without errors
+      expect(button).toBeTruthy();
+    });
+
+    it('handles onPressOut event when enabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressOut');
+
+      // Component should handle pressOut without errors
+      expect(button).toBeTruthy();
+    });
+
+    it('handles complete press cycle with pressIn and pressOut', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+      fireEvent.press(button);
+      fireEvent(button, 'pressOut');
+
+      expect(mockOnPress).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Interaction - Disabled State', () => {
+    it('sets onPress handler to undefined when disabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.onPress).toBeUndefined();
+    });
+
+    it('sets onPressIn handler to undefined when disabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.onPressIn).toBeUndefined();
+    });
+
+    it('sets onPressOut handler to undefined when disabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.onPressOut).toBeUndefined();
+    });
+
+    it('has disabled prop set to true when disabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.disabled).toBe(true);
+    });
+  });
+
+  describe('Press State Management', () => {
+    it('updates pressed state on pressIn', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+
+      // Pressed state should be true, affecting the button's style
+      expect(button).toBeTruthy();
+    });
+
+    it('resets pressed state on pressOut', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+      fireEvent(button, 'pressOut');
+
+      // Pressed state should be false, resetting the button's style
+      expect(button).toBeTruthy();
+    });
+
+    it('maintains pressed state when transitioning from pressIn to press', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+      fireEvent.press(button);
+
+      expect(mockOnPress).toHaveBeenCalledTimes(1);
+      expect(button).toBeTruthy();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has accessible property set to true', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.accessible).toBe(true);
+    });
+
+    it('maintains accessibility when disabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.accessible).toBe(true);
+      expect(button.props.disabled).toBe(true);
+    });
+
+    it('has testID for test identification', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+
+      expect(getByTestId('arrow-button')).toBeTruthy();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles rapid successive presses when enabled', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent.press(button);
+      fireEvent.press(button);
+      fireEvent.press(button);
+
+      expect(mockOnPress).toHaveBeenCalledTimes(3);
+    });
+
+    it('handles pressIn without corresponding pressOut', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressIn');
+      // No pressOut called
+
+      expect(button).toBeTruthy();
+    });
+
+    it('handles pressOut without preceding pressIn', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent(button, 'pressOut');
+
+      expect(button).toBeTruthy();
+    });
+
+    it('maintains disabled state with all handlers undefined', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.onPress).toBeUndefined();
+      expect(button.props.onPressIn).toBeUndefined();
+      expect(button.props.onPressOut).toBeUndefined();
+      expect(button.props.disabled).toBe(true);
+    });
+  });
+
+  describe('Props Validation', () => {
+    it('accepts and uses onPress callback prop', () => {
+      const customCallback = jest.fn();
+      const { getByTestId } = renderWithProvider(
+        <FLipQuoteButton onPress={customCallback} disabled={false} />,
+        { state: initialState },
+      );
+
+      const button = getByTestId('arrow-button');
+      fireEvent.press(button);
+
+      expect(customCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('respects disabled prop set to false', () => {
+      const { getByTestId } = renderFlipQuoteButton(false);
+      const button = getByTestId('arrow-button');
+
+      fireEvent.press(button);
+
+      expect(mockOnPress).toHaveBeenCalled();
+    });
+
+    it('respects disabled prop set to true', () => {
+      const { getByTestId } = renderFlipQuoteButton(true);
+      const button = getByTestId('arrow-button');
+
+      expect(button.props.disabled).toBe(true);
+      expect(button.props.onPress).toBeUndefined();
+    });
+  });
+});