Added Confirmation Modal for Delete Network (#6776)

app/_locales/en/messages.json

@@ -1208,6 +1208,12 @@
   "resetAccountDescription": {
     "message": "Resetting your account will clear your transaction history."
   },
+  "deleteNetwork": {
+    "message": "Delete Network?"
+  },
+  "deleteNetworkDescription": {
+    "message": "Are you sure you want to delete this network?"
+  },
   "restoreFromSeed": {
     "message": "Restore account?"
   },

test/e2e/beta/metamask-beta-ui.spec.js

@@ -1522,6 +1522,15 @@ describe('MetaMask', function () {
       const deleteButton = await findElement(driver, By.css('.btn-danger'))
       await deleteButton.click()
       await delay(regularDelayMs)
+
+      const confirmDeleteNetworkModal = await findElement(driver, By.css('span .modal'))
+
+      const byConfirmDeleteNetworkButton = By.css('.button.btn-danger.modal-container__footer-button')
+      const confirmDeleteNetworkButton = await driver.wait(until.elementLocated(byConfirmDeleteNetworkButton))
+      await confirmDeleteNetworkButton.click()
+
+      await driver.wait(until.stalenessOf(confirmDeleteNetworkModal))
+
       const newNetworkListItems = await findElements(driver, By.css('.networks-tab__networks-list-name'))
 
       assert.equal(networkListItems.length - 1, newNetworkListItems.length)

ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.component.js

@@ -0,0 +1,43 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Modal, { ModalContent } from '../../modal'
+
+export default class ConfirmDeleteNetwork extends PureComponent {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    delRpcTarget: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    target: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  handleDelete = () => {
+    this.props.delRpcTarget(this.props.target)
+      .then(() => {
+        this.props.onConfirm()
+        this.props.hideModal()
+      })
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <Modal
+        onSubmit={this.handleDelete}
+        onCancel={() => this.props.hideModal()}
+        submitText={t('delete')}
+        cancelText={t('cancel')}
+        submitType="danger"
+      >
+        <ModalContent
+          title={t('deleteNetwork')}
+          description={t('deleteNetworkDescription')}
+        />
+      </Modal>
+    )
+  }
+}

ui/app/components/app/modals/confirm-delete-network/confirm-delete-network.container.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'
+import ConfirmDeleteNetwork from './confirm-delete-network.component'
+import { delRpcTarget } from '../../../../store/actions'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    delRpcTarget: (target) => dispatch(delRpcTarget(target)),
+  }
+}
+
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ConfirmDeleteNetwork)

ui/app/components/app/modals/confirm-delete-network/index.js

@@ -0,0 +1 @@
+export { default } from './confirm-delete-network.container'

ui/app/components/app/modals/modal.js

@@ -29,6 +29,7 @@ import MetaMetricsOptInModal from './metametrics-opt-in-modal'
 import RejectTransactions from './reject-transactions'
 import ClearApprovedOrigins from './clear-approved-origins'
 import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container'
+import ConfirmDeleteNetwork from './confirm-delete-network'
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -301,6 +302,19 @@ const MODALS = {
     },
   },
 
+  CONFIRM_DELETE_NETWORK: {
+    contents: h(ConfirmDeleteNetwork),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),

ui/app/pages/settings/networks-tab/network-form/network-form.component.js

@@ -12,7 +12,7 @@ export default class NetworkForm extends PureComponent {
 
   static propTypes = {
     editRpc: PropTypes.func.isRequired,
-    delRpcTarget: PropTypes.func.isRequired,
+    showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
     rpcUrl: PropTypes.string,
     chainId: PropTypes.string,
     ticker: PropTypes.string,
@@ -131,10 +131,14 @@ export default class NetworkForm extends PureComponent {
   }
 
   onDelete = () => {
-    const { delRpcTarget, rpcUrl, onClear } = this.props
+    const { showConfirmDeleteNetworkModal, rpcUrl, onClear } = this.props
-    delRpcTarget(rpcUrl)
+    showConfirmDeleteNetworkModal({
+      target: rpcUrl,
+      onConfirm: () => {
         this.resetForm()
         onClear()
+      },
+    })
   }
 
   stateIsUnchanged () {

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -25,7 +25,7 @@ export default class NetworksTab extends PureComponent {
     setNetworksTabAddMode: PropTypes.func.isRequired,
     setRpcTarget: PropTypes.func.isRequired,
     setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
-    delRpcTarget: PropTypes.func.isRequired,
+    showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
     providerUrl: PropTypes.string,
     providerType: PropTypes.string,
     networkDefaultedToProvider: PropTypes.bool,
@@ -160,7 +160,7 @@ export default class NetworksTab extends PureComponent {
     const { t } = this.context
     const {
       setRpcTarget,
-      delRpcTarget,
+      showConfirmDeleteNetworkModal,
       setSelectedSettingsRpcUrl,
       setNetworksTabAddMode,
       selectedNetwork: {
@@ -199,7 +199,7 @@ export default class NetworksTab extends PureComponent {
                   setNetworksTabAddMode(false)
                   setSelectedSettingsRpcUrl(null)
                 }}
-                delRpcTarget={delRpcTarget}
+                showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
                 isCurrentRpcTarget={providerUrl === rpcUrl}
                 networksTabIsInAddMode={networksTabIsInAddMode}

ui/app/pages/settings/networks-tab/networks-tab.container.js

@@ -8,7 +8,7 @@ import {
   displayWarning,
   setNetworksTabAddMode,
   editRpc,
-  delRpcTarget,
+  showModal,
 } from '../../../store/actions'
 import { defaultNetworksData } from './networks-tab.constants'
 const defaultNetworks = defaultNetworksData.map(network => ({ ...network, viewOnly: true }))
@@ -64,8 +64,8 @@ const mapDispatchToProps = dispatch => {
     setRpcTarget: (newRpc, chainId, ticker, nickname, rpcPrefs) => {
       dispatch(updateAndSetCustomRpc(newRpc, chainId, ticker, nickname, rpcPrefs))
     },
-    delRpcTarget: (target) => {
+    showConfirmDeleteNetworkModal: ({ target, onConfirm }) => {
-      dispatch(delRpcTarget(target))
+      return dispatch(showModal({ name: 'CONFIRM_DELETE_NETWORK', target, onConfirm }))
     },
     displayWarning: warning => dispatch(displayWarning(warning)),
     setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),

ui/app/store/actions.js

@@ -2037,12 +2037,16 @@ function setRpcTarget (newRpc, chainId, ticker = 'ETH', nickname) {
 function delRpcTarget (oldRpc) {
   return (dispatch) => {
     log.debug(`background.delRpcTarget: ${oldRpc}`)
+    return new Promise((resolve, reject) => {
       background.delCustomRpc(oldRpc, (err) => {
         if (err) {
           log.error(err)
-        return dispatch(self.displayWarning('Had a problem removing network!'))
+          dispatch(self.displayWarning('Had a problem removing network!'))
+          return reject(err)
         }
         dispatch(actions.setSelectedToken())
+        resolve()
+      })
     })
   }
 }