refactor: Replace redesign confirmation BottomModal with BottomSheet

app/component-library/components/BottomSheets/BottomSheet/BottomSheet.tsx

@@ -36,6 +36,7 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
       children,
       onClose,
       onOpen,
+      stylesDialogSheet,
       isInteractable = true,
       shouldNavigateBack = true,
       isFullscreen = false,
@@ -107,6 +108,7 @@ const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
           onOpen={onOpenCB}
           ref={bottomSheetDialogRef}
           isFullscreen={isFullscreen}
+          stylesDialogSheet={stylesDialogSheet}
         >
           {children}
         </BottomSheetDialog>

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.styles.ts

@@ -21,7 +21,12 @@ const styleSheet = (params: {
 }) => {
   const { vars, theme } = params;
   const { colors, shadows } = theme;
-  const { maxSheetHeight, screenBottomPadding, isFullscreen } = vars;
+  const {
+    isFullscreen,
+    maxSheetHeight,
+    screenBottomPadding,
+    stylesDialogSheet,
+  } = vars;
 
   return StyleSheet.create({
     base: Object.assign({
@@ -30,7 +35,7 @@ const styleSheet = (params: {
       left: 0,
       right: 0,
     } as ViewStyle) as ViewStyle,
-    sheet: {
+    sheet: Object.assign({
       backgroundColor: colors.background.default,
       borderTopLeftRadius: 8,
       borderTopRightRadius: 8,
@@ -41,7 +46,9 @@ const styleSheet = (params: {
       borderColor: colors.border.muted,
       ...(isFullscreen && { height: maxSheetHeight }),
       ...shadows.size.lg,
-    },
+      },
+      stylesDialogSheet,
+    ) as ViewStyle,
     notchWrapper: {
       alignSelf: 'stretch',
       padding: 4,

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx

@@ -59,6 +59,7 @@ const BottomSheetDialog = forwardRef<
       isInteractable = true,
       onClose,
       onOpen,
+      stylesDialogSheet = {},
       ...props
     },
     ref,
@@ -71,6 +72,7 @@ const BottomSheetDialog = forwardRef<
     const { styles } = useStyles(styleSheet, {
       maxSheetHeight,
       screenBottomPadding,
+      stylesDialogSheet,
       isFullscreen,
     });
     // X and Y values start on top left of the DIALOG

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.types.ts

@@ -1,5 +1,5 @@
 // Third party dependencies.
-import { ViewProps } from 'react-native';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 
 /**
  * BottomSheetDialog component props.
@@ -27,6 +27,10 @@ export interface BottomSheetDialogProps extends ViewProps {
    * Optional callback that gets triggered when sheet is opened.
    */
   onOpen?: (hasPendingAction?: boolean) => void;
+  /**
+   * Optional sheet styles
+   */
+  stylesDialogSheet?: StyleProp<ViewStyle>;
 }
 
 export interface BottomSheetDialogRef {
@@ -40,5 +44,6 @@ export interface BottomSheetDialogRef {
 export interface BottomSheetDialogStyleSheetVars {
   maxSheetHeight: number;
   screenBottomPadding: number;
+  stylesDialogSheet: StyleProp<ViewStyle>;
   isFullscreen: boolean;
 }

app/components/Views/confirmations/Approval/__snapshots__/index.test.tsx.snap

@@ -595,7 +595,7 @@ exports[`Approval render matches snapshot 1`] = `
                                                   <View
                                                     style={
                                                       {
-                                                        "marginBottom": -8,
+                                                        "marginBottom": 8,
                                                         "marginHorizontal": 16,
                                                       }
                                                     }

app/components/Views/confirmations/ApproveView/Approve/__snapshots__/index.test.tsx.snap

@@ -590,6 +590,15 @@ exports[`Approve should render transaction approval 1`] = `
                                                       }
                                                     }
                                                   >
+                                                    <View
+                                                      style={
+                                                        {
+                                                          "marginBottom": 10,
+                                                          "marginHorizontal": 10,
+                                                          "marginTop": 20,
+                                                        }
+                                                      }
+                                                    />
                                                     <Text
                                                       accessibilityRole="text"
                                                       style={

app/components/Views/confirmations/Confirm/Confirm.styles.ts

@@ -1,18 +1,19 @@
 import { StyleSheet } from 'react-native';
-
-import Device from '../../../../util/device';
 import { Theme } from '../../../../util/theme/models';
 
 const styleSheet = (params: {
-  theme: Theme;
   vars: { isFlatConfirmation: boolean };
+  theme: Theme;
 }) => {
   const {
     theme,
     vars: { isFlatConfirmation },
   } = params;
 
   return StyleSheet.create({
+    bottomSheetDialogSheet: {
+      backgroundColor: theme.colors.background.alternative,
+    },
     flatContainer: {
       position: 'absolute',
       top: 0,
@@ -24,25 +25,9 @@ const styleSheet = (params: {
       justifyContent: 'space-between',
       paddingHorizontal: 16,
     },
-    modalContainer: {
-      backgroundColor: theme.colors.background.alternative,
+    scrollView: {
       paddingHorizontal: 16,
-      paddingVertical: 24,
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-      paddingBottom: Device.isIphoneX() ? 20 : 0,
-      maxHeight: '90%',
-    },
-    scrollableSection: {
-      padding: 4,
-    },
-    scrollable: {
-      minHeight: '100%',
-    },
-    scrollWrapper: {
-      minHeight: isFlatConfirmation ? '100%' : '75%',
-      maxHeight: isFlatConfirmation ? '100%' : '75%',
-      margin: 0,
+      height: isFlatConfirmation ? '100%' : undefined,
     },
   });
 };

app/components/Views/confirmations/Confirm/Confirm.test.tsx

@@ -1,17 +1,53 @@
 import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { act } from '@testing-library/react-native';
 
 import renderWithProvider from '../../../../util/test/renderWithProvider';
 import {
   personalSignatureConfirmationState,
   securityAlertResponse,
-  typedSignV1ConfirmationState,
   stakingDepositConfirmationState,
+  typedSignV1ConfirmationState,
 } from '../../../../util/test/confirm-data-helpers';
 // eslint-disable-next-line import/no-namespace
 import * as ConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled';
 
 import Confirm from './index';
 
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    addListener: jest.fn(),
+    dispatch: jest.fn(),
+    goBack: jest.fn(),
+    navigate: jest.fn(),
+    removeListener: jest.fn(),
+  }),
+}));
+
+jest.mock('react-native/Libraries/Linking/Linking', () => ({
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  openURL: jest.fn(),
+  canOpenURL: jest.fn(),
+  getInitialURL: jest.fn(),
+}));
+
+jest.mock('react-native-safe-area-context', () => {
+  const inset = { top: 0, right: 0, bottom: 0, left: 0 };
+  const frame = { width: 0, height: 0, x: 0, y: 0 };
+
+  return {
+    ...jest.requireActual('react-native-safe-area-context'),
+    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({ children }) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
+  };
+});
+
 jest.mock('../../../../core/Engine', () => ({
   getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
   context: {
@@ -24,46 +60,43 @@ jest.mock('../../../../core/Engine', () => ({
   },
   controllerMessenger: {
     subscribe: jest.fn(),
+    unsubscribe: jest.fn(),
   },
 }));
 
-jest.mock('../../../../util/address', () => ({
-  ...jest.requireActual('../../../../util/address'),
-  getAddressAccountType: (str: string) => str,
-}));
-
 jest.mock('react-native-gzip', () => ({
   deflate: (str: string) => str,
 }));
 
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({
-    navigate: jest.fn(),
-    addListener: jest.fn(),
-    dispatch: jest.fn(),
-  }),
-}));
-
 describe('Confirm', () => {
-  it('renders flat confirmation', async () => {
+  it('renders a flat confirmation for specified type(s): staking deposit', () => {
     const { getByTestId } = renderWithProvider(<Confirm />, {
       state: stakingDepositConfirmationState,
     });
     expect(getByTestId('flat-confirmation-container')).toBeDefined();
   });
 
-  it('renders modal confirmation', async () => {
-    const { getByTestId } = renderWithProvider(<Confirm />, {
-      state: typedSignV1ConfirmationState,
-    });
+  it('renders a modal confirmation', () => {
+    const { getByTestId } = renderWithProvider(
+      <SafeAreaProvider>
+        <Confirm />
+      </SafeAreaProvider>,
+      {
+        state: typedSignV1ConfirmationState,
+      },
+    );
     expect(getByTestId('modal-confirmation-container')).toBeDefined();
   });
 
-  it('renders correct information for personal sign', async () => {
-    const { getAllByRole, getByText } = renderWithProvider(<Confirm />, {
-      state: personalSignatureConfirmationState,
-    });
+  it('renders correct information for personal sign', () => {
+    const { getAllByRole, getByText } = renderWithProvider(
+      <SafeAreaProvider>
+        <Confirm />
+      </SafeAreaProvider>,
+      {
+        state: personalSignatureConfirmationState,
+      },
+    );
     expect(getByText('Signature request')).toBeDefined();
     expect(
       getByText('Review request details before you confirm.'),
@@ -75,11 +108,16 @@ describe('Confirm', () => {
     expect(getAllByRole('button')).toHaveLength(2);
   });
 
-  it('renders correct information for typed sign v1', async () => {
+  it('renders correct information for typed sign v1', () => {
     const { getAllByRole, getAllByText, getByText, queryByText } =
-      renderWithProvider(<Confirm />, {
-        state: typedSignV1ConfirmationState,
-      });
+      renderWithProvider(
+        <SafeAreaProvider>
+          <Confirm />
+        </SafeAreaProvider>,
+        {
+          state: typedSignV1ConfirmationState,
+        },
+      );
     expect(getByText('Signature request')).toBeDefined();
     expect(getByText('Request from')).toBeDefined();
     expect(getByText('metamask.github.io')).toBeDefined();
@@ -89,18 +127,26 @@ describe('Confirm', () => {
     expect(queryByText('This is a deceptive request')).toBeNull();
   });
 
-  it('renders blockaid banner if confirmation has blockaid error response', async () => {
-    const { getByText } = renderWithProvider(<Confirm />, {
-      state: {
-        ...typedSignV1ConfirmationState,
-        signatureRequest: { securityAlertResponse },
+  it('renders a blockaid banner if the confirmation has blockaid error response', async () => {
+    const { getByText } = renderWithProvider(
+      <SafeAreaProvider>
+        <Confirm />
+      </SafeAreaProvider>,
+      {
+        state: {
+          ...typedSignV1ConfirmationState,
+          signatureRequest: { securityAlertResponse },
+        },
       },
-    });
+    );
+
+    await act(async () => undefined);
+
     expect(getByText('Signature request')).toBeDefined();
     expect(getByText('This is a deceptive request')).toBeDefined();
   });
 
-  it('returns null if re-design is not enabled for confirmation', () => {
+  it('returns null if confirmation redesign is not enabled', () => {
     jest
       .spyOn(ConfirmationRedesignEnabled, 'useConfirmationRedesignEnabled')
       .mockReturnValue({ isRedesignedEnabled: false });