chore: cherry-pick-12107 (#12119)

This PR cherry picks
23d311c

---------

Co-authored-by: Nico MASSART <NicolasMassart@users.noreply.github.com>

.nvmrc

@@ -1 +1 @@
-20.12.2
+20.17.0

app/components/Nav/App/index.js

@@ -123,6 +123,7 @@ import NftOptions from '../../../components/Views/NftOptions';
 import ShowTokenIdSheet from '../../../components/Views/ShowTokenIdSheet';
 import OriginSpamModal from '../../Views/OriginSpamModal/OriginSpamModal';
 import { isNetworkUiRedesignEnabled } from '../../../util/networks/isNetworkUiRedesignEnabled';
+import ChangeInSimulationModal from '../../Views/ChangeInSimulationModal/ChangeInSimulationModal';
 import TooltipModal from '../../../components/Views/TooltipModal';
 ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
 import { SnapsExecutionWebView } from '../../../lib/snaps';
@@ -728,6 +729,10 @@ const App = (props) => {
         name={Routes.SHEET.ORIGIN_SPAM_MODAL}
         component={OriginSpamModal}
       />
+      <Stack.Screen
+        name={Routes.SHEET.CHANGE_IN_SIMULATION_MODAL}
+        component={ChangeInSimulationModal}
+      />
       <Stack.Screen
         name={Routes.SHEET.TOOLTIP_MODAL}
         component={TooltipModal}

app/components/Views/ChangeInSimulationModal/ChangeInSimulationModal.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithProvider, {
+  DeepPartial,
+} from '../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../util/test/initial-root-state';
+import ChangeInSimulationModal, {
+  PROCEED_BUTTON_TEST_ID,
+  REJECT_BUTTON_TEST_ID,
+} from './ChangeInSimulationModal';
+import { RootState } from '../../../reducers';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => jest.fn(),
+}));
+
+jest.mock(
+  '../../../component-library/components/BottomSheets/BottomSheet',
+  () =>
+    ({ children }: { children: React.ReactElement }) =>
+      <>{children}</>,
+);
+
+const NAVIGATION_PARAMS_MOCK = {
+  params: {
+    onProceed: jest.fn(),
+    onReject: jest.fn(),
+  },
+};
+
+const mockInitialState: DeepPartial<RootState> = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+    },
+  },
+};
+
+describe('ChangeInSimulationModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('render matches snapshot', () => {
+    const { toJSON } = renderWithProvider(
+      <ChangeInSimulationModal route={NAVIGATION_PARAMS_MOCK} />,
+      {
+        state: mockInitialState,
+      },
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('calls onProceed and onReject callbacks', () => {
+    const mockOnReject = jest.fn();
+    const mockOnProceed = jest.fn();
+    const wrapper = renderWithProvider(
+      <ChangeInSimulationModal
+        route={{ params: { onProceed: mockOnProceed, onReject: mockOnReject } }}
+      />,
+      {
+        state: mockInitialState,
+      },
+    );
+    fireEvent.press(wrapper.getByTestId(PROCEED_BUTTON_TEST_ID));
+    expect(mockOnProceed).toHaveBeenCalledTimes(1);
+
+    fireEvent.press(wrapper.getByTestId(REJECT_BUTTON_TEST_ID));
+    expect(mockOnReject).toHaveBeenCalledTimes(1);
+  });
+});

app/components/Views/ChangeInSimulationModal/ChangeInSimulationModal.tsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useRef } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { strings } from '../../../../locales/i18n';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../component-library/components/BottomSheets/BottomSheet';
+import Button from '../../../component-library/components/Buttons/Button/Button';
+import Icon, {
+  IconSize,
+  IconName,
+  IconColor,
+} from '../../../component-library/components/Icons/Icon';
+import {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../../component-library/components/Buttons/Button';
+import SheetHeader from '../../../component-library/components/Sheet/SheetHeader';
+import Text from '../../../component-library/components/Texts/Text';
+
+export const PROCEED_BUTTON_TEST_ID = 'proceed-button';
+export const REJECT_BUTTON_TEST_ID = 'reject-button';
+
+const createStyles = () =>
+  StyleSheet.create({
+    buttonsWrapper: {
+      alignSelf: 'stretch',
+      flexDirection: 'column',
+      gap: 16,
+      paddingTop: 24,
+    },
+    wrapper: {
+      alignItems: 'center',
+      padding: 16,
+    },
+    description: {
+      textAlign: 'center',
+    },
+  });
+
+const ChangeInSimulationModal = ({
+  route,
+}: {
+  route: { params: { onProceed: () => void; onReject: () => void } };
+}) => {
+  const styles = createStyles();
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const { onProceed, onReject } = route.params;
+
+  const handleProceed = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+    onProceed();
+  }, [onProceed, sheetRef]);
+
+  const handleReject = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+    onReject();
+  }, [onReject, sheetRef]);
+
+  return (
+    <BottomSheet ref={sheetRef}>
+      <View style={styles.wrapper}>
+        <Icon
+          color={IconColor.Error}
+          name={IconName.Warning}
+          size={IconSize.Xl}
+        />
+        <SheetHeader title={strings('change_in_simulation_modal.title')} />
+        <Text>{strings('change_in_simulation_modal.description')}</Text>
+        <View style={styles.buttonsWrapper}>
+          <Button
+            label={strings('change_in_simulation_modal.reject')}
+            onPress={handleReject}
+            size={ButtonSize.Lg}
+            testID={REJECT_BUTTON_TEST_ID}
+            variant={ButtonVariants.Primary}
+            width={ButtonWidthTypes.Full}
+          />
+          <Button
+            label={strings('change_in_simulation_modal.proceed')}
+            onPress={handleProceed}
+            size={ButtonSize.Lg}
+            testID={PROCEED_BUTTON_TEST_ID}
+            variant={ButtonVariants.Secondary}
+            width={ButtonWidthTypes.Full}
+          />
+        </View>
+      </View>
+    </BottomSheet>
+  );
+};
+
+export default ChangeInSimulationModal;

app/components/Views/ChangeInSimulationModal/__snapshots__/ChangeInSimulationModal.test.tsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChangeInSimulationModal render matches snapshot 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "padding": 16,
+    }
+  }
+>
+  <SvgMock
+    color="#d73847"
+    height={32}
+    name="Warning"
+    style={
+      {
+        "height": 32,
+        "width": 32,
+      }
+    }
+    width={32}
+  />
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "height": 32,
+        "justifyContent": "space-between",
+        "margin": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    />
+    <Text
+      accessibilityRole="text"
+      style={
+        {
+          "color": "#141618",
+          "fontFamily": "EuclidCircularB-Bold",
+          "fontSize": 18,
+          "fontWeight": "700",
+          "letterSpacing": 0,
+          "lineHeight": 24,
+        }
+      }
+    >
+      Results have changed
+    </Text>
+    <View
+      style={
+        {
+          "alignItems": "flex-end",
+          "flex": 1,
+        }
+      }
+    />
+  </View>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#141618",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+      }
+    }
+  >
+    Estimated changes for this transaction have been updated. Review them closely before proceeding.
+  </Text>
+  <View
+    style={
+      {
+        "alignSelf": "stretch",
+        "flexDirection": "column",
+        "gap": 16,
+        "paddingTop": 24,
+      }
+    }
+  >
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
+      activeOpacity={1}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#0376c9",
+          "borderRadius": 24,
+          "flexDirection": "row",
+          "height": 48,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+        }
+      }
+      testID="reject-button"
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#ffffff",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Reject the transaction
+      </Text>
+    </TouchableOpacity>
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessible={true}
+      activeOpacity={1}
+      onPress={[Function]}
+      onPressIn={[Function]}
+      onPressOut={[Function]}
+      style={
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "transparent",
+          "borderColor": "#0376c9",
+          "borderRadius": 24,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": 48,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+        }
+      }
+      testID="proceed-button"
+    >
+      <Text
+        accessibilityRole="text"
+        style={
+          {
+            "color": "#0376c9",
+            "fontFamily": "EuclidCircularB-Regular",
+            "fontSize": 14,
+            "fontWeight": "400",
+            "letterSpacing": 0,
+            "lineHeight": 22,
+          }
+        }
+      >
+        Proceed
+      </Text>
+    </TouchableOpacity>
+  </View>
+</View>
+`;