feat: migrate FundActionMenu to BottomSheet

app/components/UI/FundActionMenu/FundActionMenu.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
+import mockSafeAreaContext from 'react-native-safe-area-context/jest/mock';
 
 // External dependencies.
 import { MetaMetricsEvents } from '../../../core/Analytics';
@@ -20,37 +21,7 @@ import { trace, TraceName } from '../../../util/trace';
 import FundActionMenu from './FundActionMenu';
 import { RampsButtonClickData } from '../Ramp/hooks/useRampsButtonClickData';
 
-// Mock BottomSheet component
-jest.mock(
-  '../../../component-library/components/BottomSheets/BottomSheet',
-  () => {
-    const { View } = jest.requireActual('react-native');
-    const { forwardRef, useImperativeHandle } = jest.requireActual('react');
-
-    const MockBottomSheet = forwardRef(
-      (props: { children: React.ReactNode }, ref: React.Ref<unknown>) => {
-        useImperativeHandle(ref, () => ({
-          onOpenBottomSheet: jest.fn(),
-          onCloseBottomSheet: jest.fn((callback?: () => void) => {
-            if (callback) callback();
-          }),
-        }));
-
-        return (
-          <View testID="bottom-sheet" {...props}>
-            {props.children}
-          </View>
-        );
-      },
-    );
-
-    return {
-      __esModule: true,
-      default: MockBottomSheet,
-    };
-  },
-);
-
+jest.mock('react-native-safe-area-context', () => mockSafeAreaContext);
 // Mock dependencies
 jest.mock('@react-navigation/native');
 jest.mock('@react-navigation/compat', () => ({
@@ -133,6 +104,7 @@ describe('FundActionMenu', () => {
     // Setup default mocks
     mockUseNavigation.mockReturnValue({
       navigate: mockNavigate,
+      goBack: jest.fn(),
     } as never);
 
     mockUseRoute.mockReturnValue({

app/components/UI/FundActionMenu/FundActionMenu.tsx

@@ -1,15 +1,17 @@
 // Third party dependencies.
 import React, { useCallback, useRef, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { useRoute } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 // External dependencies.
-import BottomSheet, {
-  BottomSheetRef,
-} from '../../../component-library/components/BottomSheets/BottomSheet';
 import { selectChainId } from '../../../selectors/networkController';
 import { MetaMetricsEvents } from '../../../core/Analytics';
-import { IconName, Box } from '@metamask/design-system-react-native';
+import {
+  IconName,
+  Box,
+  BottomSheet,
+  BottomSheetRef,
+} from '@metamask/design-system-react-native';
 import ActionListItem from '../../../component-library/components-temp/ActionListItem';
 import useRampNetwork from '../Ramp/Aggregator/hooks/useRampNetwork';
 import { getDecimalChainId } from '../../../util/networks';
@@ -36,6 +38,7 @@ import { useRampsButtonClickData } from '../Ramp/hooks/useRampsButtonClickData';
 
 const FundActionMenu = () => {
   const sheetRef = useRef<BottomSheetRef>(null);
+  const navigation = useNavigation();
   const route = useRoute<FundActionMenuRouteProp>();
 
   const customOnBuy = route.params?.onBuy;
@@ -231,7 +234,11 @@ const FundActionMenu = () => {
   );
 
   return (
-    <BottomSheet ref={sheetRef}>
+    <BottomSheet
+      ref={sheetRef}
+      goBack={navigation.goBack}
+      testID="bottom-sheet"
+    >
       <Box twClassName="py-4">
         {actionConfigs.map(
           (config) =>