chore: use bottom sheet from design system package

Author: infiniteflower

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

@@ -6,45 +6,39 @@ import { HighRateAlertModalSelectorsIDs } from './HighRateAlertModal.testIds';
 import { BridgeToken } from '../../types';
 
 const mockGoToSwaps = jest.fn();
+const mockGoBack = jest.fn();
 
-jest.mock(
-  '../../../../../component-library/components/BottomSheets/BottomSheet',
-  () => {
-    const ReactActual = jest.requireActual('react');
-    const { View } = jest.requireActual('react-native');
-
-    return {
-      __esModule: true,
-      default: ReactActual.forwardRef(
-        (
-          {
-            children,
-            testID,
-          }: {
-            children?: React.ReactNode;
-            testID?: string;
-          },
-          ref: React.Ref<{
-            onCloseBottomSheet: (callback?: () => void) => void;
-          }>,
-        ) => {
-          ReactActual.useImperativeHandle(ref, () => ({
-            onCloseBottomSheet: (callback?: () => void) => {
-              callback?.();
-            },
-          }));
-
-          return <View testID={testID}>{children}</View>;
-        },
-      ),
-    };
-  },
-);
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({ goBack: mockGoBack }),
+}));
 
 jest.mock('@metamask/design-system-react-native', () => {
+  const ReactActual = jest.requireActual('react');
   const { Pressable, Text, View } = jest.requireActual('react-native');
 
   return {
+    BottomSheet: ReactActual.forwardRef(
+      (
+        {
+          children,
+          testID,
+        }: {
+          children?: React.ReactNode;
+          testID?: string;
+        },
+        ref: React.Ref<{
+          onCloseBottomSheet: (callback?: () => void) => void;
+        }>,
+      ) => {
+        ReactActual.useImperativeHandle(ref, () => ({
+          onCloseBottomSheet: (callback?: () => void) => {
+            callback?.();
+          },
+        }));
+
+        return <View testID={testID}>{children}</View>;
+      },
+    ),
     BottomSheetFooter: ({
       primaryButtonProps,
     }: {

app/components/UI/Bridge/components/HighRateAlertModal/index.tsx

@@ -1,16 +1,16 @@
 import React, { useCallback, useRef } from 'react';
+import { useNavigation } from '@react-navigation/native';
 import {
+  BottomSheet,
   BottomSheetFooter,
   BottomSheetHeader,
+  BottomSheetRef,
   Box,
   ButtonIconSize,
   Text,
   TextColor,
   TextVariant,
 } from '@metamask/design-system-react-native';
-import BottomSheet, {
-  BottomSheetRef,
-} from '../../../../../component-library/components/BottomSheets/BottomSheet';
 import { strings } from '../../../../../../locales/i18n';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import { BridgeToken } from '../../types';
@@ -27,6 +27,7 @@ export interface HighRateAlertModalParams {
 
 export function HighRateAlertModal() {
   const sheetRef = useRef<BottomSheetRef>(null);
+  const { goBack } = useNavigation();
   const { sourceToken, destToken } = useParams<HighRateAlertModalParams>();
   const { goToSwaps } = useSwapBridgeNavigation({
     location: SwapBridgeNavigationLocation.MainView,
@@ -44,7 +45,11 @@ export function HighRateAlertModal() {
   }, [destToken, goToSwaps, sourceToken]);
 
   return (
-    <BottomSheet ref={sheetRef} testID={HighRateAlertModalSelectorsIDs.SHEET}>
+    <BottomSheet
+      ref={sheetRef}
+      goBack={goBack}
+      testID={HighRateAlertModalSelectorsIDs.SHEET}
+    >
       <BottomSheetHeader
         onClose={handleClose}
         closeButtonProps={{