MetaMask
diff --git a/‎app/components/UI/Navbar/index.js‎
Lines changed: 1 addition & 1 deletion b/‎app/components/UI/Navbar/index.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx‎
Lines changed: 15 additions & 1 deletion b/‎app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx‎
Lines changed: 15 additions & 1 deletion
diff --git a/‎app/components/UI/Ramp/Aggregator/Views/Modals/Settings/SettingsModal.test.tsx‎
Lines changed: 150 additions & 0 deletions b/‎app/components/UI/Ramp/Aggregator/Views/Modals/Settings/SettingsModal.test.tsx‎
Lines changed: 150 additions & 0 deletions
diff --git a/‎app/components/UI/Ramp/Aggregator/Views/Modals/Settings/SettingsModal.tsx‎
Lines changed: 67 additions & 0 deletions b/‎app/components/UI/Ramp/Aggregator/Views/Modals/Settings/SettingsModal.tsx‎
Lines changed: 67 additions & 0 deletions
@@ -1962,7 +1962,7 @@ export function getDepositNavbarOptions(
         ? () => (
             <ButtonIcon
               onPress={onConfigurationPress}
-              iconName={IconName.MoreHorizontal}
+              iconName={IconName.Setting}
               size={ButtonIconSize.Lg}
               testID="deposit-configuration-menu-button"
               style={styles.headerLeftButton}
 
@@ -100,6 +100,7 @@ import { trace, endTrace, TraceName } from '../../../../../../util/trace';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
 import { createUnsupportedRegionModalNavigationDetails } from '../../components/UnsupportedRegionModal';
 import { regex } from '../../../../../../util/regex';
+import { createBuySettingsModalNavigationDetails } from '../Modals/Settings/SettingsModal';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -417,6 +418,10 @@ const BuildQuote = () => {
     }
   }, [screenLocation, isBuy, selectedAsset?.network?.chainId, trackEvent]);
 
+  const handleConfigurationPress = useCallback(() => {
+    navigation.navigate(...createBuySettingsModalNavigationDetails());
+  }, [navigation]);
+
   useEffect(() => {
     navigation.setOptions(
       getDepositNavbarOptions(
@@ -426,12 +431,21 @@ const BuildQuote = () => {
             ? strings('fiat_on_ramp_aggregator.amount_to_buy')
             : strings('fiat_on_ramp_aggregator.amount_to_sell'),
           showBack: params.showBack,
+          showConfiguration: isBuy,
+          onConfigurationPress: handleConfigurationPress,
         },
         theme,
         handleCancelPress,
       ),
     );
-  }, [navigation, theme, handleCancelPress, params.showBack, isBuy]);
+  }, [
+    navigation,
+    theme,
+    handleCancelPress,
+    params.showBack,
+    isBuy,
+    handleConfigurationPress,
+  ]);
 
   /**
    * * Keypad style, handlers and effects
 
@@ -0,0 +1,150 @@
+// Third party dependencies.
+import { fireEvent } from '@testing-library/react-native';
+
+// Internal dependencies.
+import SettingsModal from './SettingsModal';
+import { renderScreen } from '../../../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../../../util/test/initial-root-state';
+import Routes from '../../../../../../../constants/navigation/Routes';
+import { createDepositNavigationDetails } from '../../../../Deposit/routes/utils';
+
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+const mockDangerouslyGetParent = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  const actualReactNavigation = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualReactNavigation,
+    useNavigation: () => ({
+      ...actualReactNavigation.useNavigation(),
+      navigate: mockNavigate,
+      goBack: mockGoBack,
+      dangerouslyGetParent: mockDangerouslyGetParent,
+    }),
+  };
+});
+
+function render() {
+  return renderScreen(
+    SettingsModal,
+    {
+      name: 'SettingsModal',
+    },
+    {
+      state: {
+        engine: {
+          backgroundState,
+        },
+      },
+    },
+  );
+}
+
+describe('SettingsModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockDangerouslyGetParent.mockReturnValue({
+      dangerouslyGetParent: jest.fn().mockReturnValue({
+        goBack: jest.fn(),
+      }),
+    });
+  });
+
+  it('renders snapshot correctly', () => {
+    const { toJSON } = render();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('displays settings title in header', () => {
+    const { getByText } = render();
+
+    expect(getByText('Settings')).toBeTruthy();
+  });
+
+  it('displays view order history menu item', () => {
+    const { getByText } = render();
+
+    expect(getByText('View order history')).toBeTruthy();
+  });
+
+  it('displays use new buy experience menu item', () => {
+    const { getByText } = render();
+
+    expect(getByText('Use new buy experience')).toBeTruthy();
+    expect(getByText('Try new native on ramp')).toBeTruthy();
+  });
+
+  it('navigates to transactions view when view order history is pressed', () => {
+    const { getByText } = render();
+    const viewOrderHistoryButton = getByText('View order history');
+
+    fireEvent.press(viewOrderHistoryButton);
+
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.TRANSACTIONS_VIEW, {
+      screen: Routes.TRANSACTIONS_VIEW,
+      params: {
+        redirectToOrders: true,
+      },
+    });
+  });
+
+  it('navigates to deposit when use new buy experience is pressed', () => {
+    const { getByText } = render();
+    const newBuyExperienceButton = getByText('Use new buy experience');
+
+    fireEvent.press(newBuyExperienceButton);
+
+    expect(mockDangerouslyGetParent).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenCalledWith(
+      ...createDepositNavigationDetails(),
+    );
+  });
+
+  it('navigates back through parent navigation when deposit is pressed', () => {
+    const mockParentGoBack = jest.fn();
+    mockDangerouslyGetParent.mockReturnValue({
+      dangerouslyGetParent: jest.fn().mockReturnValue({
+        goBack: mockParentGoBack,
+      }),
+    });
+
+    const { getByText } = render();
+    const newBuyExperienceButton = getByText('Use new buy experience');
+
+    fireEvent.press(newBuyExperienceButton);
+
+    expect(mockParentGoBack).toHaveBeenCalled();
+  });
+
+  describe('bottom sheet behavior', () => {
+    it('renders bottom sheet with settings content', () => {
+      const { getByText } = render();
+
+      expect(getByText('Settings')).toBeTruthy();
+    });
+  });
+
+  describe('menu item icons', () => {
+    it('renders clock icon for view order history', () => {
+      const { getByText } = render();
+
+      expect(getByText('View order history')).toBeTruthy();
+    });
+
+    it('renders add icon for new buy experience', () => {
+      const { getByText } = render();
+
+      expect(getByText('Use new buy experience')).toBeTruthy();
+    });
+  });
+
+  describe('callback functions', () => {
+    it('calls navigation callbacks only when menu items are pressed', () => {
+      render();
+
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDangerouslyGetParent).not.toHaveBeenCalled();
+    });
+  });
+});
@@ -0,0 +1,67 @@
+import React, { useCallback, useRef } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { strings } from '../../../../../../../../locales/i18n';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../../../../../component-library/components/BottomSheets/BottomSheet';
+import BottomSheetHeader from '../../../../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import { IconName } from '../../../../../../../component-library/components/Icons/Icon';
+import Routes from '../../../../../../../constants/navigation/Routes';
+import { createNavigationDetails } from '../../../../../../../util/navigation/navUtils';
+import MenuItem from '../../../../components/MenuItem';
+import { createDepositNavigationDetails } from '../../../../Deposit/routes/utils';
+
+export const createBuySettingsModalNavigationDetails = createNavigationDetails(
+  Routes.RAMP.MODALS.ID,
+  Routes.RAMP.MODALS.SETTINGS,
+);
+
+function SettingsModal() {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const navigation = useNavigation();
+
+  const handleNavigateToOrderHistory = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+    navigation.navigate(Routes.TRANSACTIONS_VIEW, {
+      screen: Routes.TRANSACTIONS_VIEW,
+      params: {
+        redirectToOrders: true,
+      },
+    });
+  }, [navigation]);
+
+  const handleDepositPress = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+    navigation.dangerouslyGetParent()?.dangerouslyGetParent()?.goBack();
+    navigation.navigate(...createDepositNavigationDetails());
+  }, [navigation]);
+
+  const handleClosePress = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+  }, []);
+
+  return (
+    <BottomSheet ref={sheetRef} shouldNavigateBack>
+      <BottomSheetHeader onClose={handleClosePress}>
+        {strings('fiat_on_ramp_aggregator.settings_modal.title')}
+      </BottomSheetHeader>
+      <MenuItem
+        iconName={IconName.Clock}
+        title={strings('deposit.configuration_modal.view_order_history')}
+        onPress={handleNavigateToOrderHistory}
+      />
+      <MenuItem
+        iconName={IconName.Add}
+        title={strings(
+          'fiat_on_ramp_aggregator.settings_modal.use_new_buy_experience',
+        )}
+        description={strings(
+          'fiat_on_ramp_aggregator.settings_modal.use_new_buy_experience_description',
+        )}
+        onPress={handleDepositPress}
+      />
+    </BottomSheet>
+  );
+}
+
+export default SettingsModal;