Added Confirmation Modal for Delete Network (#6776)

3 files changed, 15 insertions, 11 deletions

diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
index 388e2665f..0349aa14f 100644
--- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js
+++ b/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
-    delRpcTarget(rpcUrl)
-    this.resetForm()
-    onClear()
+    const { showConfirmDeleteNetworkModal, rpcUrl, onClear } = this.props
+    showConfirmDeleteNetworkModal({
+      target: rpcUrl,
+      onConfirm: () => {
+        this.resetForm()
+        onClear()
+      },
+    })
   }
 
   stateIsUnchanged () {
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.component.js b/ui/app/pages/settings/networks-tab/networks-tab.component.js
index f6c8443cf..cf634058f 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.component.js
+++ b/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}
diff --git a/ui/app/pages/settings/networks-tab/networks-tab.container.js b/ui/app/pages/settings/networks-tab/networks-tab.container.js
index 9e1098922..8cc18a4bd 100644
--- a/ui/app/pages/settings/networks-tab/networks-tab.container.js
+++ b/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) => {
-      dispatch(delRpcTarget(target))
+    showConfirmDeleteNetworkModal: ({ target, onConfirm }) => {
+      return dispatch(showModal({ name: 'CONFIRM_DELETE_NETWORK', target, onConfirm }))
     },
     displayWarning: warning => dispatch(displayWarning(warning)),
     setNetworksTabAddMode: isInAddMode => dispatch(setNetworksTabAddMode(isInAddMode)),