feat: add network fees modal

Author: infiniteflower

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

@@ -131,7 +131,7 @@ describe('BatchSellFinalReviewModal', () => {
     expect(getByText('UNI • 0.5% slippage')).toBeOnTheScreen();
   });
 
-  it('swaps to the minimum received info modal when the info button is pressed', () => {
+  it('switches to the minimum received info modal when the info button is pressed', () => {
     const { getByTestId } = renderModal();
 
     fireEvent.press(
@@ -151,6 +151,26 @@ describe('BatchSellFinalReviewModal', () => {
     );
   });
 
+  it('switches to the network fee info modal when the info button is pressed', () => {
+    const { getByTestId } = renderModal();
+
+    fireEvent.press(
+      getByTestId(
+        BatchSellFinalReviewModalSelectorsIDs.NETWORK_FEE_INFO_BUTTON,
+      ),
+    );
+
+    expect(mockReplace).toHaveBeenCalledWith(
+      Routes.BRIDGE.MODALS.BATCH_SELL_NETWORK_FEE_INFO_MODAL,
+      {
+        sourceModal: {
+          screen: Routes.BRIDGE.MODALS.BATCH_SELL_FINAL_REVIEW_MODAL,
+          params: defaultParams,
+        },
+      },
+    );
+  });
+
   it('renders quote amount skeletons while loading', () => {
     const { getByTestId, getByText, queryByText } = renderModal({
       isLoading: true,

app/components/UI/Bridge/components/BatchSellFinalReviewModal/BatchSellFinalReviewModal.testIds.ts

@@ -5,6 +5,7 @@ export const BatchSellFinalReviewModalSelectorsIDs = {
   YOU_SELL_TOGGLE_BUTTON: 'batch-sell-final-review-you-sell-toggle-button',
   SOURCE_TOKEN_AVATAR: 'batch-sell-final-review-source-token-avatar',
   NETWORK_FEE_ROW: 'batch-sell-final-review-network-fee-row',
+  NETWORK_FEE_INFO_BUTTON: 'batch-sell-final-review-network-fee-info-button',
   SELL_ALL_BUTTON: 'batch-sell-final-review-sell-all-button',
   METAMASK_FEE_DISCLOSURE: 'batch-sell-final-review-metamask-fee-disclosure',
 };

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

@@ -133,9 +133,11 @@ function YouSellRow({
 function NetworkFeeRow({
   networkFee,
   networkFeeFiat,
+  onInfoPress,
 }: {
   networkFee: string;
   networkFeeFiat: string;
+  onInfoPress: () => void;
 }) {
   return (
     <Box
@@ -158,11 +160,17 @@ function NetworkFeeRow({
         >
           {strings('bridge.network_fee')}
         </Text>
-        <Icon
-          name={IconName.Info}
-          size={IconSize.Sm}
-          color={IconColor.IconAlternative}
-        />
+        <Pressable
+          onPress={onInfoPress}
+          testID={BatchSellFinalReviewModalSelectorsIDs.NETWORK_FEE_INFO_BUTTON}
+          accessibilityRole="button"
+        >
+          <Icon
+            name={IconName.Info}
+            size={IconSize.Sm}
+            color={IconColor.IconAlternative}
+          />
+        </Pressable>
       </Box>
       <Box
         flexDirection={BoxFlexDirection.Row}
@@ -214,6 +222,15 @@ export function BatchSellFinalReviewModal() {
     );
   };
 
+  const handleOpenNetworkFeeInfo = () => {
+    navigation.replace(Routes.BRIDGE.MODALS.BATCH_SELL_NETWORK_FEE_INFO_MODAL, {
+      sourceModal: {
+        screen: Routes.BRIDGE.MODALS.BATCH_SELL_FINAL_REVIEW_MODAL,
+        params,
+      },
+    });
+  };
+
   return (
     <BottomSheet
       testID={BatchSellFinalReviewModalSelectorsIDs.SHEET}
@@ -244,6 +261,7 @@ export function BatchSellFinalReviewModal() {
       <NetworkFeeRow
         networkFee={params.networkFee}
         networkFeeFiat={params.networkFeeFiat}
+        onInfoPress={handleOpenNetworkFeeInfo}
       />
       <Box paddingHorizontal={4} paddingTop={4} paddingBottom={4} gap={2}>
         <Button

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { strings } from '../../../../../../locales/i18n';
+import { BatchSellNetworkFeeInfoModal } from './index';
+import { BatchSellNetworkFeeInfoModalSelectorsIDs } from './BatchSellNetworkFeeInfoModal.testIds';
+import { BatchSellNetworkFeeInfoModalParams } from './BatchSellNetworkFeeInfoModal.types';
+
+const mockGoBack = jest.fn();
+const mockReplace = jest.fn();
+let mockRouteParams: BatchSellNetworkFeeInfoModalParams;
+
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({
+    goBack: mockGoBack,
+    replace: mockReplace,
+  }),
+}));
+
+jest.mock('../../../../../util/navigation/navUtils', () => ({
+  useParams: () => mockRouteParams,
+}));
+
+function renderModal(params: BatchSellNetworkFeeInfoModalParams = {}) {
+  mockRouteParams = params;
+
+  return render(<BatchSellNetworkFeeInfoModal />);
+}
+
+describe('BatchSellNetworkFeeInfoModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockRouteParams = {};
+  });
+
+  it('renders the network fee information', () => {
+    const { getByTestId, getByText } = renderModal();
+
+    expect(
+      getByTestId(BatchSellNetworkFeeInfoModalSelectorsIDs.SHEET),
+    ).toBeOnTheScreen();
+    expect(
+      getByText(strings('bridge.network_fee_info_title')),
+    ).toBeOnTheScreen();
+    expect(
+      getByTestId(BatchSellNetworkFeeInfoModalSelectorsIDs.DESCRIPTION),
+    ).toBeOnTheScreen();
+    expect(
+      getByText(strings('bridge.network_fee_info_content')),
+    ).toBeOnTheScreen();
+  });
+
+  it('closes with navigation when the close button is pressed', () => {
+    const { getByTestId } = renderModal();
+
+    fireEvent.press(
+      getByTestId(BatchSellNetworkFeeInfoModalSelectorsIDs.CLOSE_BUTTON),
+    );
+
+    expect(mockGoBack).toHaveBeenCalledTimes(1);
+  });
+
+  it('restores the source modal when the back button is pressed', () => {
+    const sourceModal = {
+      screen: 'BatchSellFinalReviewModal',
+      params: {
+        networkFee: '1.20 USDC',
+      },
+    };
+    const { getByTestId } = renderModal({ sourceModal });
+
+    fireEvent.press(
+      getByTestId(BatchSellNetworkFeeInfoModalSelectorsIDs.BACK_BUTTON),
+    );
+
+    expect(mockReplace).toHaveBeenCalledWith(
+      sourceModal.screen,
+      sourceModal.params,
+    );
+  });
+
+  it('does not render a back button without a source modal', () => {
+    const { queryByTestId } = renderModal();
+
+    expect(
+      queryByTestId(BatchSellNetworkFeeInfoModalSelectorsIDs.BACK_BUTTON),
+    ).toBeNull();
+  });
+});

app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/BatchSellNetworkFeeInfoModal.testIds.ts

@@ -0,0 +1,6 @@
+export const BatchSellNetworkFeeInfoModalSelectorsIDs = {
+  SHEET: 'batch-sell-network-fee-info-modal-sheet',
+  BACK_BUTTON: 'batch-sell-network-fee-info-modal-back-button',
+  CLOSE_BUTTON: 'batch-sell-network-fee-info-modal-close-button',
+  DESCRIPTION: 'batch-sell-network-fee-info-modal-description',
+};

app/components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/BatchSellNetworkFeeInfoModal.types.ts

@@ -0,0 +1,6 @@
+export interface BatchSellNetworkFeeInfoModalParams {
+  sourceModal?: {
+    screen: string;
+    params?: object;
+  };
+}

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

@@ -0,0 +1,56 @@
+import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import React from 'react';
+import {
+  BottomSheet,
+  BottomSheetHeader,
+  Box,
+  ButtonIconSize,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+
+import { strings } from '../../../../../../locales/i18n';
+import { useParams } from '../../../../../util/navigation/navUtils';
+import { BatchSellNetworkFeeInfoModalSelectorsIDs } from './BatchSellNetworkFeeInfoModal.testIds';
+import { BatchSellNetworkFeeInfoModalParams } from './BatchSellNetworkFeeInfoModal.types';
+
+export function BatchSellNetworkFeeInfoModal() {
+  const navigation =
+    useNavigation<StackNavigationProp<Record<string, object | undefined>>>();
+  const { sourceModal } = useParams<BatchSellNetworkFeeInfoModalParams>();
+  const handleBack = sourceModal
+    ? () => navigation.replace(sourceModal.screen, sourceModal.params)
+    : undefined;
+
+  return (
+    <BottomSheet
+      testID={BatchSellNetworkFeeInfoModalSelectorsIDs.SHEET}
+      goBack={navigation.goBack}
+    >
+      <BottomSheetHeader
+        onBack={handleBack}
+        backButtonProps={{
+          testID: BatchSellNetworkFeeInfoModalSelectorsIDs.BACK_BUTTON,
+        }}
+        onClose={navigation.goBack}
+        closeButtonProps={{
+          size: ButtonIconSize.Md,
+          testID: BatchSellNetworkFeeInfoModalSelectorsIDs.CLOSE_BUTTON,
+        }}
+      >
+        {strings('bridge.network_fee_info_title')}
+      </BottomSheetHeader>
+      <Box paddingHorizontal={4} paddingTop={2} paddingBottom={4}>
+        <Text
+          variant={TextVariant.BodySm}
+          color={TextColor.TextAlternative}
+          testID={BatchSellNetworkFeeInfoModalSelectorsIDs.DESCRIPTION}
+        >
+          {strings('bridge.network_fee_info_content')}
+        </Text>
+      </Box>
+    </BottomSheet>
+  );
+}

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

@@ -173,7 +173,7 @@ describe('BatchSellQuoteDetailsModal', () => {
     expect(onMinimumReceivedInfoPress).toHaveBeenCalledTimes(1);
   });
 
-  it('swaps to the minimum received info modal when the info button is pressed', () => {
+  it('switches to the minimum received info modal when the info button is pressed', () => {
     const { getByTestId } = renderModal();
 
     fireEvent.press(

app/components/UI/Bridge/routes.tsx

@@ -26,6 +26,7 @@ import { HighRateAlertModal } from './components/HighRateAlertModal';
 import { BatchSellDestinationTokenSelectorModal } from './components/BatchSellDestinationTokenSelectorModal';
 import { BatchSellQuoteDetailsModal } from './components/BatchSellQuoteDetailsModal';
 import { BatchSellFinalReviewModal } from './components/BatchSellFinalReviewModal';
+import { BatchSellNetworkFeeInfoModal } from './components/BatchSellNetworkFeeInfoModal';
 import { BatchSellMinimumReceivedInfoModal } from './components/BatchSellMinimumReceivedInfoModal';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -128,6 +129,10 @@ export const BridgeModalStack = () => (
       name={Routes.BRIDGE.MODALS.BATCH_SELL_FINAL_REVIEW_MODAL}
       component={BatchSellFinalReviewModal}
     />
+    <ModalStack.Screen
+      name={Routes.BRIDGE.MODALS.BATCH_SELL_NETWORK_FEE_INFO_MODAL}
+      component={BatchSellNetworkFeeInfoModal}
+    />
     <ModalStack.Screen
       name={Routes.BRIDGE.MODALS.BATCH_SELL_MINIMUM_RECEIVED_INFO_MODAL}
       component={BatchSellMinimumReceivedInfoModal}

app/constants/navigation/Routes.ts

@@ -331,6 +331,7 @@ const Routes = {
         'BatchSellDestinationTokenSelectorModal',
       BATCH_SELL_QUOTE_DETAILS_MODAL: 'BatchSellQuoteDetailsModal',
       BATCH_SELL_FINAL_REVIEW_MODAL: 'BatchSellFinalReviewModal',
+      BATCH_SELL_NETWORK_FEE_INFO_MODAL: 'BatchSellNetworkFeeInfoModal',
       BATCH_SELL_MINIMUM_RECEIVED_INFO_MODAL:
         'BatchSellMinimumReceivedInfoModal',
     },