Prevent editing of networks and accounts while send duck is initializing

ui/ducks/send/send.js

@@ -393,6 +393,7 @@ export const draftTransactionInitialState = {
   status: SEND_STATUSES.VALID,
   transactionType: TRANSACTION_ENVELOPE_TYPES.LEGACY,
   userInputHexData: null,
+  contextEditingDisabled: true,
 };
 
 /**
@@ -842,6 +843,9 @@ const slice = createSlice({
       // validate send state
       slice.caseReducers.validateSendState(state);
     },
+    disableContextEditing: (state) => {
+      state.contextEditingDisabled = true;
+    },
     /**
      * Clears all drafts from send state and drops the currentTransactionUUID.
      * This is an important first step before adding a new draft transaction to
@@ -1548,6 +1552,7 @@ const slice = createSlice({
         slice.caseReducers.validateAmountField(state);
         slice.caseReducers.validateGasField(state);
         slice.caseReducers.validateSendState(state);
+        state.contextEditingDisabled = false;
       })
       .addCase(SELECTED_ACCOUNT_CHANGED, (state, action) => {
         // If we are on the edit flow the account we are keyed into will be the
@@ -1615,6 +1620,7 @@ const {
   updateRecipientSearchMode,
   addHistoryEntry,
   acknowledgeRecipientWarning,
+  disableContextEditing,
 } = actions;
 
 export {
@@ -1623,6 +1629,7 @@ export {
   updateGasLimit,
   addHistoryEntry,
   acknowledgeRecipientWarning,
+  disableContextEditing,
 };
 
 // Action Creators
@@ -1662,6 +1669,7 @@ const debouncedValidateRecipientUserInput = debounce(
  */
 export function editExistingTransaction(assetType, transactionId) {
   return async (dispatch, getState) => {
+    await dispatch(actions.disableContextEditing());
     await dispatch(actions.clearPreviousDrafts());
     const state = getState();
     const unapprovedTransactions = getUnapprovedTxs(state);
@@ -2312,6 +2320,7 @@ export function toggleSendMaxMode() {
  */
 export function startNewDraftTransaction(asset) {
   return async (dispatch) => {
+    await dispatch(actions.disableContextEditing());
     await dispatch(actions.clearPreviousDrafts());
 
     await dispatch(

ui/pages/routes/routes.component.js

@@ -104,6 +104,7 @@ export default class Routes extends Component {
     browserEnvironmentBrowser: PropTypes.string,
     theme: PropTypes.string,
     sendStage: PropTypes.string,
+    disableContextEditing: PropTypes.bool,
   };
 
   static contextTypes = {
@@ -358,6 +359,7 @@ export default class Routes extends Component {
       isMouseUser,
       browserEnvironmentOs: os,
       browserEnvironmentBrowser: browser,
+      disableContextEditing,
     } = this.props;
     const loadMessage =
       loadingMessage || isNetworkLoading
@@ -384,9 +386,12 @@ export default class Routes extends Component {
         {!this.hideAppHeader() && (
           <AppHeader
             hideNetworkIndicator={this.onInitializationUnlockPage()}
-            disableNetworkIndicator={this.onSwapsPage()}
+            disableNetworkIndicator={
+              disableContextEditing || this.onSwapsPage()
+            }
             onClick={this.onAppHeaderClick}
             disabled={
+              disableContextEditing ||
               this.onConfirmPage() ||
               this.onEditTransactionPage() ||
               (this.onSwapsPage() && !this.onSwapsBuildQuotePage())

ui/pages/routes/routes.container.js

@@ -19,7 +19,7 @@ import { getSendStage } from '../../ducks/send';
 import Routes from './routes.component';
 
 function mapStateToProps(state) {
-  const { appState } = state;
+  const { appState, send } = state;
   const { alertOpen, alertMessage, isLoading, loadingMessage } = appState;
   const { autoLockTimeLimit = 0 } = getPreferences(state);
 
@@ -40,6 +40,7 @@ function mapStateToProps(state) {
     providerType: state.metamask.provider?.type,
     theme: getTheme(state),
     sendStage: getSendStage(state),
+    disableSendContextEditing: send.disableContextEditing,
   };
 }
 

ui/store/actions.js

@@ -31,6 +31,7 @@ import {
   computeEstimatedGasLimit,
   initializeSendState,
   resetSendState,
+  disableContextEditing,
 } from '../ducks/send';
 import { switchedToUnconnectedAccount } from '../ducks/alerts/unconnected-account';
 import { getUnconnectedAccountAlertEnabledness } from '../ducks/metamask/metamask';
@@ -1449,6 +1450,7 @@ export function updateMetamaskState(newState) {
         type: actionConstants.CHAIN_CHANGED,
         payload: newProvider.chainId,
       });
+      dispatch(disableContextEditing());
       // We dispatch this action to ensure that the send state stays up to date
       // after the chain changes. This async thunk will fail gracefully in the
       // event that we are not yet on the send flow with a draftTransaction in