Clean up of code introduced with 43f7a44 (#15158)

app/scripts/metamask-controller.js

@@ -1604,7 +1604,7 @@ export default class MetamaskController extends EventEmitter {
       updateAndSetCustomRpc: this.updateAndSetCustomRpc.bind(this),
       delCustomRpc: this.delCustomRpc.bind(this),
       addCustomNetwork: this.addCustomNetwork.bind(this),
-      requestUserApproval: this.requestUserApproval.bind(this),
+      requestAddNetworkApproval: this.requestAddNetworkApproval.bind(this),
       // PreferencesController
       setSelectedAddress: preferencesController.setSelectedAddress.bind(
         preferencesController,
@@ -2053,7 +2053,7 @@ export default class MetamaskController extends EventEmitter {
     }
   }
 
-  async requestUserApproval(customRpc, originIsMetaMask) {
+  async requestAddNetworkApproval(customRpc, originIsMetaMask) {
     try {
       await this.approvalController.addAndShowApprovalRequest({
         origin: 'metamask',

ui/components/app/add-network/add-network.js

@@ -28,7 +28,7 @@ import {
   ENVIRONMENT_TYPE_POPUP,
   MESSAGE_TYPE,
 } from '../../../../shared/constants/app';
-import { requestUserApproval } from '../../../store/actions';
+import { requestAddNetworkApproval } from '../../../store/actions';
 import Popover from '../../ui/popover';
 import ConfirmationPage from '../../../pages/confirmation/confirmation';
 import { FEATURED_RPCS } from '../../../../shared/constants/network';
@@ -239,7 +239,7 @@ const AddNetwork = () => {
                     type="inline"
                     className="add-network__add-button"
                     onClick={async () => {
-                      await dispatch(requestUserApproval(item, true));
+                      await dispatch(requestAddNetworkApproval(item, true));
                     }}
                   >
                     {t('add')}
@@ -277,7 +277,7 @@ const AddNetwork = () => {
       )}
       {showPopover && (
         <Popover>
-          <ConfirmationPage />
+          <ConfirmationPage redirectToHomeOnZeroConfirmations={false} />
         </Popover>
       )}
     </>

ui/pages/confirmation/confirmation.js

@@ -5,6 +5,8 @@ import React, {
   useReducer,
   useState,
 } from 'react';
+import PropTypes from 'prop-types';
+
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
@@ -24,7 +26,6 @@ import { getUnapprovedTemplatedConfirmations } from '../../selectors';
 import NetworkDisplay from '../../components/app/network-display/network-display';
 import Callout from '../../components/ui/callout';
 import SiteOrigin from '../../components/ui/site-origin';
-import { addCustomNetwork } from '../../store/actions';
 import ConfirmationFooter from './components/confirmation-footer';
 import { getTemplateValues, getTemplateAlerts } from './templates';
 
@@ -116,7 +117,9 @@ function useAlertState(pendingConfirmation) {
   return [alertState, dismissAlert];
 }
 
-export default function ConfirmationPage() {
+export default function ConfirmationPage({
+  redirectToHomeOnZeroConfirmations = true,
+}) {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const history = useHistory();
@@ -130,28 +133,35 @@ export default function ConfirmationPage() {
   const pendingConfirmation = pendingConfirmations[currentPendingConfirmation];
   const originMetadata = useOriginMetadata(pendingConfirmation?.origin) || {};
   const [alertState, dismissAlert] = useAlertState(pendingConfirmation);
-  const [stayOnPage, setStayOnPage] = useState(false);
 
   // Generating templatedValues is potentially expensive, and if done on every render
   // will result in a new object. Avoiding calling this generation unnecessarily will
   // improve performance and prevent unnecessary draws.
   const templatedValues = useMemo(() => {
     return pendingConfirmation
-      ? getTemplateValues(pendingConfirmation, t, dispatch)
+      ? getTemplateValues(pendingConfirmation, t, dispatch, history)
       : {};
-  }, [pendingConfirmation, t, dispatch]);
+  }, [pendingConfirmation, t, dispatch, history]);
 
   useEffect(() => {
     // If the number of pending confirmations reduces to zero when the user
     // return them to the default route. Otherwise, if the number of pending
     // confirmations reduces to a number that is less than the currently
     // viewed index, reset the index.
-    if (pendingConfirmations.length === 0) {
+    if (
-      !stayOnPage && history.push(DEFAULT_ROUTE);
+      pendingConfirmations.length === 0 &&
+      redirectToHomeOnZeroConfirmations
+    ) {
+      history.push(DEFAULT_ROUTE);
     } else if (pendingConfirmations.length <= currentPendingConfirmation) {
       setCurrentPendingConfirmation(pendingConfirmations.length - 1);
     }
-  }, [pendingConfirmations, history, currentPendingConfirmation, stayOnPage]);
+  }, [
+    pendingConfirmations,
+    history,
+    currentPendingConfirmation,
+    redirectToHomeOnZeroConfirmations,
+  ]);
   if (!pendingConfirmation) {
     return null;
   }
@@ -237,18 +247,15 @@ export default function ConfirmationPage() {
               </Callout>
             ))
         }
-        onApprove={() => {
+        onApprove={templatedValues.onApprove}
-          templatedValues.onApprove.apply();
+        onCancel={templatedValues.onCancel}
-          pendingConfirmation.origin === 'metamask' &&
-            dispatch(addCustomNetwork(pendingConfirmation.requestData));
-        }}
-        onCancel={() => {
-          templatedValues.onCancel.apply();
-          pendingConfirmation.origin === 'metamask' && setStayOnPage(true);
-        }}
         approveText={templatedValues.approvalText}
         cancelText={templatedValues.cancelText}
       />
     </div>
   );
 }
+
+ConfirmationPage.propTypes = {
+  redirectToHomeOnZeroConfirmations: PropTypes.bool,
+};

ui/pages/confirmation/templates/add-ethereum-chain.js

@@ -9,6 +9,8 @@ import {
   DISPLAY,
   COLORS,
 } from '../../../helpers/constants/design-system';
+import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+
 import fetchWithCache from '../../../helpers/utils/fetch-with-cache';
 
 const UNRECOGNIZED_CHAIN = {
@@ -142,7 +144,7 @@ async function getAlerts(pendingApproval) {
   return alerts;
 }
 
-function getValues(pendingApproval, t, actions) {
+function getValues(pendingApproval, t, actions, history) {
   const originIsMetaMask = pendingApproval.origin === 'metamask';
 
   return {
@@ -320,12 +322,16 @@ function getValues(pendingApproval, t, actions) {
     ],
     approvalText: t('approveButtonText'),
     cancelText: t('cancel'),
-    onApprove: () =>
+    onApprove: async () => {
-      actions.resolvePendingApproval(
+      await actions.resolvePendingApproval(
         pendingApproval.id,
         pendingApproval.requestData,
-      ),
+      );
-
+      if (originIsMetaMask) {
+        actions.addCustomNetwork(pendingApproval.requestData);
+        history.push(DEFAULT_ROUTE);
+      }
+    },
     onCancel: () =>
       actions.rejectPendingApproval(
         pendingApproval.id,

ui/pages/confirmation/templates/index.js

@@ -3,6 +3,7 @@ import { MESSAGE_TYPE } from '../../../../shared/constants/app';
 import {
   rejectPendingApproval,
   resolvePendingApproval,
+  addCustomNetwork,
 } from '../../../store/actions';
 import addEthereumChain from './add-ethereum-chain';
 import switchEthereumChain from './switch-ethereum-chain';
@@ -106,6 +107,7 @@ function getAttenuatedDispatch(dispatch) {
       dispatch(rejectPendingApproval(...args)),
     resolvePendingApproval: (...args) =>
       dispatch(resolvePendingApproval(...args)),
+    addCustomNetwork: (...args) => dispatch(addCustomNetwork(...args)),
   };
 }
 
@@ -115,8 +117,9 @@ function getAttenuatedDispatch(dispatch) {
  * @param {object} pendingApproval - The pending confirmation object
  * @param {Function} t - Translation function
  * @param {Function} dispatch - Redux dispatch function
+ * @param history
  */
-export function getTemplateValues(pendingApproval, t, dispatch) {
+export function getTemplateValues(pendingApproval, t, dispatch, history) {
   const fn = APPROVAL_TEMPLATES[pendingApproval.type]?.getValues;
   if (!fn) {
     throw new Error(
@@ -125,7 +128,7 @@ export function getTemplateValues(pendingApproval, t, dispatch) {
   }
 
   const safeActions = getAttenuatedDispatch(dispatch);
-  const values = fn(pendingApproval, t, safeActions);
+  const values = fn(pendingApproval, t, safeActions, history);
   const extraneousKeys = omit(values, ALLOWED_TEMPLATE_KEYS);
   const safeValues = pick(values, ALLOWED_TEMPLATE_KEYS);
   if (extraneousKeys.length > 0) {

ui/pages/home/home.component.js

@@ -142,7 +142,7 @@ export default class Home extends PureComponent {
     newTokensImported: PropTypes.string,
     setNewTokensImported: PropTypes.func.isRequired,
     newCustomNetworkAdded: PropTypes.object,
-    setNewCustomNetworkAdded: PropTypes.func,
+    clearNewCustomNetworkAdded: PropTypes.func,
     setRpcTarget: PropTypes.func,
   };
 
@@ -282,7 +282,7 @@ export default class Home extends PureComponent {
       newTokensImported,
       setNewTokensImported,
       newCustomNetworkAdded,
-      setNewCustomNetworkAdded,
+      clearNewCustomNetworkAdded,
       setRpcTarget,
     } = this.props;
     return (
@@ -507,7 +507,7 @@ export default class Home extends PureComponent {
                     newCustomNetworkAdded.ticker,
                     newCustomNetworkAdded.chainName,
                   );
-                  setNewCustomNetworkAdded();
+                  clearNewCustomNetworkAdded();
                 }}
               >
                 <Typography
@@ -520,7 +520,7 @@ export default class Home extends PureComponent {
               </Button>
               <Button
                 type="secondary"
-                onClick={() => setNewCustomNetworkAdded()}
+                onClick={() => clearNewCustomNetworkAdded()}
               >
                 <Typography
                   variant={TYPOGRAPHY.H6}

ui/pages/home/home.container.js

@@ -186,7 +186,7 @@ const mapDispatchToProps = (dispatch) => ({
   setNewTokensImported: (newTokens) => {
     dispatch(setNewTokensImported(newTokens));
   },
-  setNewCustomNetworkAdded: () => {
+  clearNewCustomNetworkAdded: () => {
     dispatch(setNewCustomNetworkAdded({}));
   },
   setRpcTarget: (rpcUrl, chainId, ticker, nickname) => {

ui/store/actions.js

@@ -3788,10 +3788,10 @@ export function addCustomNetwork(customRpc) {
   };
 }
 
-export function requestUserApproval(customRpc, originIsMetaMask) {
+export function requestAddNetworkApproval(customRpc, originIsMetaMask) {
   return async (dispatch) => {
     try {
-      await promisifiedBackground.requestUserApproval(
+      await promisifiedBackground.requestAddNetworkApproval(
         customRpc,
         originIsMetaMask,
       );