Disabling network and account changes after the send flow is initiated (#18086)

coverage-targets.js

@@ -6,10 +6,10 @@
 // subset of files to check against these targets.
 module.exports = {
   global: {
-    lines: 66,
-    branches: 54.4,
-    statements: 65,
-    functions: 58.5,
+    lines: 67.8,
+    branches: 55.84,
+    statements: 67.13,
+    functions: 59.66,
   },
   transforms: {
     branches: 100,

test/data/mock-send-state.json

@@ -2,6 +2,13 @@
   "DNS": {
     "resolution": ""
   },
+  "activeTab": {
+    "id": 113,
+    "title": "E2E Test Dapp",
+    "origin": "https://metamask.github.io",
+    "protocol": "https:",
+    "url": "https://metamask.github.io/test-dapp/"
+  },
   "appState": {
     "networkDropdownOpen": false,
     "gasIsLoading": false,
@@ -16,7 +23,8 @@
         "name": null
       }
     },
-    "warning": null
+    "warning": null,
+    "alertOpen": false
   },
   "confirmTransaction": {
     "txData": {
@@ -42,6 +50,10 @@
   "history": {
     "mostRecentOverviewPage": "/mostRecentOverviewPage"
   },
+  "invalidCustomNetwork": {
+    "state": "CLOSED",
+    "networkName": ""
+  },
   "metamask": {
     "ipfsGateway": "",
     "dismissSeedBackUpReminder": false,
@@ -88,6 +100,14 @@
     "ensResolutionsByAddress": {},
     "isAccountMenuOpen": false,
     "isUnlocked": true,
+    "completedOnboarding": true,
+    "usedNetworks": {
+      "0x1": true,
+      "0x5": true,
+      "0x539": true
+    },
+    "showTestnetMessageInDropdown": true,
+    "networkConfigurations": {},
     "alertEnabledness": {
       "unconnectedAccount": true
     },
@@ -1358,5 +1378,8 @@
       "balance": "0x4563918244f40000"
     },
     "stage": "DRAFT"
+  },
+  "unconnectedAccount": {
+    "state": "CLOSED"
   }
 }

ui/components/app/app-header/app-header.component.js

@@ -89,6 +89,7 @@ export default class AppHeader extends PureComponent {
           className={classnames('account-menu__icon', {
             'account-menu__icon--disabled': disabled,
           })}
+          disabled={Boolean(disabled)}
           onClick={() => {
             if (!disabled) {
               !isAccountMenuOpen &&

ui/pages/routes/routes.component.js

@@ -322,7 +322,11 @@ export default class Routes extends Component {
   }
 
   onEditTransactionPage() {
-    return this.props.sendStage === SEND_STAGES.EDIT;
+    return (
+      this.props.sendStage === SEND_STAGES.EDIT ||
+      this.props.sendStage === SEND_STAGES.DRAFT ||
+      this.props.sendStage === SEND_STAGES.ADD_RECIPIENT
+    );
   }
 
   onSwapsPage() {

ui/pages/routes/routes.component.test.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent } from '@testing-library/react';
+
+import { SEND_STAGES } from '../../ducks/send';
+import { renderWithProvider } from '../../../test/jest';
+import mockSendState from '../../../test/data/mock-send-state.json';
+import Routes from '.';
+
+const mockShowNetworkDropdown = jest.fn();
+const mockHideNetworkDropdown = jest.fn();
+
+jest.mock('webextension-polyfill', () => ({
+  runtime: {
+    onMessage: {
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    },
+    getManifest: () => ({ manifest_version: 2 }),
+  },
+}));
+
+jest.mock('../../store/actions', () => ({
+  getGasFeeTimeEstimate: jest.fn().mockImplementation(() => Promise.resolve()),
+  getGasFeeEstimatesAndStartPolling: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve()),
+  addPollingTokenToAppState: jest.fn(),
+  showNetworkDropdown: () => mockShowNetworkDropdown,
+  hideNetworkDropdown: () => mockHideNetworkDropdown,
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn(),
+  }),
+}));
+
+jest.mock('../../ducks/send', () => ({
+  ...jest.requireActual('../../ducks/send'),
+  resetSendState: () => ({ type: 'XXX' }),
+  getGasPrice: jest.fn(),
+}));
+
+jest.mock('../../ducks/domains', () => ({
+  ...jest.requireActual('../../ducks/domains'),
+  initializeDomainSlice: () => ({ type: 'XXX' }),
+}));
+
+describe('Routes Component', () => {
+  afterEach(() => {
+    mockShowNetworkDropdown.mockClear();
+    mockHideNetworkDropdown.mockClear();
+  });
+  describe('render during send flow', () => {
+    it('should render with network and account change disabled while adding recipient for send flow', () => {
+      const store = configureMockStore()({
+        ...mockSendState,
+        send: {
+          ...mockSendState.send,
+          stage: SEND_STAGES.ADD_RECIPIENT,
+        },
+      });
+      const { getByTestId } = renderWithProvider(<Routes />, store, ['/send']);
+
+      expect(getByTestId('account-menu-icon')).toBeDisabled();
+
+      const networkDisplay = getByTestId('network-display');
+      fireEvent.click(networkDisplay);
+      expect(mockShowNetworkDropdown).not.toHaveBeenCalled();
+    });
+    it('should render with network and account change disabled while user is in send page', () => {
+      const store = configureMockStore()({
+        ...mockSendState,
+      });
+      const { getByTestId } = renderWithProvider(<Routes />, store, ['/send']);
+
+      expect(getByTestId('account-menu-icon')).toBeDisabled();
+
+      const networkDisplay = getByTestId('network-display');
+      fireEvent.click(networkDisplay);
+      expect(mockShowNetworkDropdown).not.toHaveBeenCalled();
+    });
+    it('should render with network and account change disabled while editing a send transaction', () => {
+      const store = configureMockStore()({
+        ...mockSendState,
+        send: {
+          ...mockSendState.send,
+          stage: SEND_STAGES.EDIT,
+        },
+      });
+      const { getByTestId } = renderWithProvider(<Routes />, store, ['/send']);
+
+      expect(getByTestId('account-menu-icon')).toBeDisabled();
+
+      const networkDisplay = getByTestId('network-display');
+      fireEvent.click(networkDisplay);
+      expect(mockShowNetworkDropdown).not.toHaveBeenCalled();
+    });
+    it('should render when send transaction is not active', () => {
+      const store = configureMockStore()({
+        ...mockSendState,
+        metamask: {
+          ...mockSendState.metamask,
+          swapsState: {
+            ...mockSendState.metamask.swapsState,
+            swapsFeatureIsLive: true,
+          },
+          pendingApprovals: {},
+          announcements: {},
+        },
+        send: {
+          ...mockSendState.send,
+          stage: SEND_STAGES.INACTIVE,
+        },
+      });
+      const { getByTestId } = renderWithProvider(<Routes />, store);
+      expect(getByTestId('account-menu-icon')).not.toBeDisabled();
+    });
+  });
+});