Fix #20305 - Show the network name in Delete Network modal (#20309)

* Fix #20305 - Show the network name in Delete Network modal

* Update app/_locales/en/messages.json

Co-authored-by: George Marshall <george.marshall@consensys.net>

* Add unit test

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

app/_locales/am/messages.json

@@ -205,9 +205,6 @@
   "deleteNetwork": {
     "message": "አውታረ መረብ ይሰረዝ?"
   },
-  "deleteNetworkDescription": {
-    "message": "ይህን አውታረ መረብ ለመሰረዝ እንደሚፈልጉ እርግጠኛ ነዎት?"
-  },
   "details": {
     "message": "ዝርዝሮች"
   },

app/_locales/ar/messages.json

@@ -218,9 +218,6 @@
   "deleteNetwork": {
     "message": "هل تريد حذف الشبكة؟"
   },
-  "deleteNetworkDescription": {
-    "message": "هل أنت متأكد أنك تريد حذف هذه الشبكة؟"
-  },
   "details": {
     "message": "التفاصيل"
   },

app/_locales/bg/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Да се изтрие ли мрежата?"
   },
-  "deleteNetworkDescription": {
-    "message": "Наистина ли искате да изтриете тази мрежа?"
-  },
   "details": {
     "message": "Подробности"
   },

app/_locales/bn/messages.json

@@ -211,9 +211,6 @@
   "deleteNetwork": {
     "message": "নেটওয়ার্ক মুছবেন?"
   },
-  "deleteNetworkDescription": {
-    "message": "আপনি কি এই নেটওয়ার্কটি মোছার বিষয়ে নিশ্চিত?"
-  },
   "details": {
     "message": "বিশদ বিবরণ"
   },

app/_locales/ca/messages.json

@@ -211,9 +211,6 @@
   "deleteNetwork": {
     "message": "Esborrar Xarxa?"
   },
-  "deleteNetworkDescription": {
-    "message": "Estàs segur que vols eliminar aquesta xarxa?"
-  },
   "details": {
     "message": "Detalls"
   },

app/_locales/da/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Slet Netværk?"
   },
-  "deleteNetworkDescription": {
-    "message": "Er du sikker på, at du vil slette dette netværk?"
-  },
   "details": {
     "message": "Detaljer"
   },

app/_locales/de/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Netzwerk löschen?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sind Sie sicher, dass Sie dieses Netzwerk löschen möchten?"
-  },
   "deposit": {
     "message": "Einzahlung"
   },

app/_locales/el/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Διαγραφή Δικτύου;"
   },
-  "deleteNetworkDescription": {
-    "message": "Θέλετε σίγουρα να διαγράψετε αυτό το δίκτυο;"
-  },
   "deposit": {
     "message": "Κατάθεση"
   },

app/_locales/en/messages.json

@@ -1120,8 +1120,12 @@
   "deleteNetwork": {
     "message": "Delete network?"
   },
-  "deleteNetworkDescription": {
+  "deleteNetworkIntro": {
-    "message": "Are you sure you want to delete this network?"
+    "message": "If you delete this network, you will need to add it again to view your assets in this network"
+  },
+  "deleteNetworkTitle": {
+    "message": "Delete $1 network?",
+    "description": "$1 represents the name of the network"
   },
   "deposit": {
     "message": "Deposit"

app/_locales/es/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "¿Eliminar red?"
   },
-  "deleteNetworkDescription": {
-    "message": "¿Está seguro de que quiere eliminar esta red?"
-  },
   "deposit": {
     "message": "Depositar"
   },

app/_locales/es_419/messages.json

@@ -584,9 +584,6 @@
   "deleteNetwork": {
     "message": "¿Eliminar red?"
   },
-  "deleteNetworkDescription": {
-    "message": "¿Está seguro de que quiere eliminar esta red?"
-  },
   "description": {
     "message": "Descripción"
   },

app/_locales/et/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Võrk kustutada?"
   },
-  "deleteNetworkDescription": {
-    "message": "Olete kindel, et soovite selle võrgu kustutada?"
-  },
   "details": {
     "message": "Üksikasjad"
   },

app/_locales/fa/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "شبکه حذف شود؟"
   },
-  "deleteNetworkDescription": {
-    "message": "آیا مطمئن هستید که این شبکه حذف شود؟"
-  },
   "details": {
     "message": "جزئیات"
   },

app/_locales/fi/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Poistetaanko verkko?"
   },
-  "deleteNetworkDescription": {
-    "message": "Haluatko varmasti poistaa tämän verkon?"
-  },
   "details": {
     "message": "Tiedot"
   },

app/_locales/fil/messages.json

@@ -190,9 +190,6 @@
   "deleteNetwork": {
     "message": "I-delete ang Network?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sigurado ka bang gusto mong i-delete ang network na ito?"
-  },
   "details": {
     "message": "Mga Detalye"
   },

app/_locales/fr/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Supprimer le réseau ?"
   },
-  "deleteNetworkDescription": {
-    "message": "Souhaitez-vous vraiment supprimer ce réseau ?"
-  },
   "deposit": {
     "message": "Effectuez un dépôt"
   },

app/_locales/he/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "למחוק את הרשת?"
   },
-  "deleteNetworkDescription": {
-    "message": "הנך בטוח/ה שברצונך למחוק רשת זו?"
-  },
   "details": {
     "message": "פרטים"
   },

app/_locales/hi/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "नेटवर्क हटाएं?"
   },
-  "deleteNetworkDescription": {
-    "message": "क्या आप वाकई इस नेटवर्क को हटाना चाहते हैं?"
-  },
   "deposit": {
     "message": "जमा करें"
   },

app/_locales/hr/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Izbrisati mrežu?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sigurno želite izbrisati ovu mrežu?"
-  },
   "details": {
     "message": "Detalji"
   },

app/_locales/hu/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Törli a hálózatot?"
   },
-  "deleteNetworkDescription": {
-    "message": "Biztosan törli ezt a hálózatot?"
-  },
   "details": {
     "message": "Részletek"
   },

app/_locales/id/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Hapus jaringan?"
   },
-  "deleteNetworkDescription": {
-    "message": "Anda yakin ingin menghapus jaringan ini?"
-  },
   "deposit": {
     "message": "Deposit"
   },

app/_locales/it/messages.json

@@ -719,9 +719,6 @@
   "deleteNetwork": {
     "message": "Cancella la rete?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sei sicuro di voler eliminare questa rete?"
-  },
   "deprecatedTestNetworksLink": {
     "message": "Scopri di più"
   },

app/_locales/ja/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "ネットワークを削除しますか?"
   },
-  "deleteNetworkDescription": {
-    "message": "このネットワークを削除しますか?"
-  },
   "deposit": {
     "message": "入金"
   },

app/_locales/kn/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "ನೆಟ್‌ವರ್ಕ್ ಅಳಿಸುವುದೇ?"
   },
-  "deleteNetworkDescription": {
-    "message": "ನೀವು ಈ ನೆಟ್‌ವರ್ಕ್ ಅನ್ನು ಖಚಿತವಾಗಿ ಅಳಿಸಲು ಬಯಸುತ್ತೀರಾ?"
-  },
   "details": {
     "message": "ವಿವರಗಳು"
   },

app/_locales/ko/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "네트워크를 삭제할까요?"
   },
-  "deleteNetworkDescription": {
-    "message": "이 네트워크를 삭제할까요?"
-  },
   "deposit": {
     "message": "예치"
   },

app/_locales/lt/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Panaikinti tinklą?"
   },
-  "deleteNetworkDescription": {
-    "message": "Ar tikrai norite panaikinti šį tinklą?"
-  },
   "details": {
     "message": "Išsami informacija"
   },

app/_locales/lv/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Dzēst tīklu?"
   },
-  "deleteNetworkDescription": {
-    "message": "Vai tiešām vēlaties dzēst šo tīklu?"
-  },
   "details": {
     "message": "Informācija"
   },

app/_locales/ms/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Padamkan Rangkaian?"
   },
-  "deleteNetworkDescription": {
-    "message": "Anda pasti anda ingin padamkan rangkaian ini?"
-  },
   "details": {
     "message": "Butiran"
   },

app/_locales/no/messages.json

@@ -211,9 +211,6 @@
   "deleteNetwork": {
     "message": "Slette nettverk? "
   },
-  "deleteNetworkDescription": {
-    "message": "Er du sikker på at du vil slette dette nettverket?"
-  },
   "details": {
     "message": "Detaljer"
   },

app/_locales/ph/messages.json

@@ -409,9 +409,6 @@
   "deleteNetwork": {
     "message": "I-delete ang Network?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sigurado ka bang gusto mong i-delete ang network na ito?"
-  },
   "details": {
     "message": "Mga Detalye"
   },

app/_locales/pl/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Usunąć sieć?"
   },
-  "deleteNetworkDescription": {
-    "message": "Czy na pewno chcesz usunąć tę sieć?"
-  },
   "details": {
     "message": "Szczegóły"
   },

app/_locales/pt/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Excluir rede?"
   },
-  "deleteNetworkDescription": {
-    "message": "Quer mesmo excluir essa rede?"
-  },
   "deposit": {
     "message": "Depositar"
   },

app/_locales/pt_BR/messages.json

@@ -584,9 +584,6 @@
   "deleteNetwork": {
     "message": "Excluir rede?"
   },
-  "deleteNetworkDescription": {
-    "message": "Quer mesmo excluir essa rede?"
-  },
   "description": {
     "message": "Descrição"
   },

app/_locales/ro/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Ștergeți rețeaua?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sigur vreți să ștergeți această rețea?"
-  },
   "details": {
     "message": "Detalii"
   },

app/_locales/ru/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Удалить сеть?"
   },
-  "deleteNetworkDescription": {
-    "message": "Уверены, что хотите удалить эту сеть?"
-  },
   "deposit": {
     "message": "Внести деньги"
   },

app/_locales/sk/messages.json

@@ -208,9 +208,6 @@
   "deleteNetwork": {
     "message": "Odstrániť sieť?"
   },
-  "deleteNetworkDescription": {
-    "message": "Naozaj chcete túto sieť odstrániť?"
-  },
   "details": {
     "message": "Podrobnosti"
   },

app/_locales/sl/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Izbrišem to omrežje?"
   },
-  "deleteNetworkDescription": {
-    "message": "Ali ste prepričani, da želite izbrisati to omrežje?"
-  },
   "details": {
     "message": "Podrobnosti"
   },

app/_locales/sr/messages.json

@@ -211,9 +211,6 @@
   "deleteNetwork": {
     "message": "Da li želite da obrišete mrežu?"
   },
-  "deleteNetworkDescription": {
-    "message": "Da li ste sigurni da želite da izbrišete ovu mrežu?"
-  },
   "details": {
     "message": "Детаљи"
   },

app/_locales/sv/messages.json

@@ -208,9 +208,6 @@
   "deleteNetwork": {
     "message": "Radera nätverk?"
   },
-  "deleteNetworkDescription": {
-    "message": "Är du säker på att du vill ta bort detta nätverk?"
-  },
   "details": {
     "message": "Info"
   },

app/_locales/sw/messages.json

@@ -208,9 +208,6 @@
   "deleteNetwork": {
     "message": "Futa Mtandao?"
   },
-  "deleteNetworkDescription": {
-    "message": "Una uhakika unataka kufuta mtandao huu?"
-  },
   "details": {
     "message": "Maelezo"
   },

app/_locales/tl/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "I-delete ang network?"
   },
-  "deleteNetworkDescription": {
-    "message": "Sigurado ka bang gusto mong i-delete ang network na ito?"
-  },
   "deposit": {
     "message": "Deposito"
   },

app/_locales/tr/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Ağı Sil?"
   },
-  "deleteNetworkDescription": {
-    "message": "Bu ağı silmek istediğinizden emin misiniz?"
-  },
   "deposit": {
     "message": "Para Yatır"
   },

app/_locales/uk/messages.json

@@ -214,9 +214,6 @@
   "deleteNetwork": {
     "message": "Видалити мережу?"
   },
-  "deleteNetworkDescription": {
-    "message": "Ви впевнені, що хочете видалити цю мережу?"
-  },
   "details": {
     "message": "Деталі"
   },

app/_locales/vi/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "Xóa mạng?"
   },
-  "deleteNetworkDescription": {
-    "message": "Bạn có chắc chắn muốn xóa mạng này không?"
-  },
   "deposit": {
     "message": "Nạp"
   },

app/_locales/zh_CN/messages.json

@@ -908,9 +908,6 @@
   "deleteNetwork": {
     "message": "删除网络？"
   },
-  "deleteNetworkDescription": {
-    "message": "您确定要删除该网络吗？"
-  },
   "deposit": {
     "message": "存入"
   },

app/_locales/zh_TW/messages.json

@@ -411,9 +411,6 @@
   "deleteNetwork": {
     "message": "刪除網路？"
   },
-  "deleteNetworkDescription": {
-    "message": "你確定要刪除網路嗎？"
-  },
   "details": {
     "message": "詳情"
   },

ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap

@@ -14,12 +14,12 @@ exports[`Confirm Delete Network should match snapshot 1`] = `
         <div
           class="modal-content__title"
         >
-          Delete network?
+          Delete Custom Mainnet RPC network?
         </div>
         <div
           class="modal-content__description"
         >
-          Are you sure you want to delete this network?
+          If you delete this network, you will need to add it again to view your assets in this network
         </div>
       </div>
     </div>

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

@@ -8,21 +8,22 @@ export default class ConfirmDeleteNetwork extends PureComponent {
     removeNetworkConfiguration: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
     target: PropTypes.string.isRequired,
+    networkNickname: PropTypes.string.isRequired,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
-  handleDelete = () => {
+  handleDelete = async () => {
-    this.props.removeNetworkConfiguration(this.props.target).then(() => {
+    await this.props.removeNetworkConfiguration(this.props.target);
-      this.props.onConfirm();
+    this.props.onConfirm();
-      this.props.hideModal();
+    this.props.hideModal();
-    });
   };
 
   render() {
     const { t } = this.context;
+    const { networkNickname } = this.props;
 
     return (
       <Modal
@@ -33,8 +34,8 @@ export default class ConfirmDeleteNetwork extends PureComponent {
         submitType="danger-primary"
       >
         <ModalContent
-          title={t('deleteNetwork')}
+          title={t('deleteNetworkTitle', [networkNickname])}
-          description={t('deleteNetworkDescription')}
+          description={t('deleteNetworkIntro')}
         />
       </Modal>
     );

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

@@ -2,8 +2,16 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import { removeNetworkConfiguration } from '../../../../store/actions';
+import { getNetworkConfigurations } from '../../../../selectors';
 import ConfirmDeleteNetwork from './confirm-delete-network.component';
 
+const mapStateToProps = (state, ownProps) => {
+  const networkConfigurations = getNetworkConfigurations(state);
+  const networkNickname = networkConfigurations[ownProps.target].nickname;
+
+  return { networkNickname };
+};
+
 const mapDispatchToProps = (dispatch) => {
   return {
     removeNetworkConfiguration: (target) =>
@@ -13,5 +21,5 @@ const mapDispatchToProps = (dispatch) => {
 
 export default compose(
   withModalProps,
-  connect(null, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ConfirmDeleteNetwork);

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

@@ -10,7 +10,7 @@ describe('Confirm Delete Network', () => {
     hideModal: jest.fn(),
     onConfirm: jest.fn(),
     removeNetworkConfiguration: jest.fn().mockResolvedValue(),
-    target: 'target',
+    target: 'testNetworkConfigurationId',
   };
 
   it('should match snapshot', () => {
@@ -23,6 +23,17 @@ describe('Confirm Delete Network', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should mention network name in modal', () => {
+    const mockStore = configureMockStore()(mockState);
+    const { getByText } = renderWithProvider(
+      <ConfirmDeleteNetwork {...props} />,
+      mockStore,
+    );
+    const expectedTitle = 'Delete Custom Mainnet RPC network?';
+
+    expect(getByText(expectedTitle)).toBeInTheDocument();
+  });
+
   it('clicks cancel to hide modal', async () => {
     const { queryByText } = renderWithProvider(
       <ConfirmDeleteNetwork.WrappedComponent {...props} />,