feat: reset data menu

public/electron.js

@@ -115,14 +115,15 @@ function createWindow () {
         { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
         { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
         { label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' }
-      ]}
+      ]},
   ];
 
   if (debugMode) {
     template.push({
       label: 'Debug',
       submenu: [
-        { label: `Open DevTools`, accelerator: 'CmdOrCtrl+B', click: function() { mainWindow.webContents.openDevTools(); }}
+        { label: `Open DevTools`, accelerator: 'CmdOrCtrl+B', click: function() { mainWindow.webContents.openDevTools(); }},
+        { label: 'Reset all data', click: function() { mainWindow.webContents.send('app:clear_storage'); }},
       ]
     });
   };
@@ -167,6 +168,11 @@ function createWindow () {
     }
   });
 
+  ipcMain.on('app:clear_storage_success', () => {
+    console.log('Data reset success. Closing window...');
+    mainWindow.close();
+  });
+
   addLedgerListeners(mainWindow);
 }
 

src/App.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { Redirect, Route, Switch, useHistory, useRouteMatch } from 'react-router-dom';
 import Wallet from './screens/Wallet';
 import SendTokens from './screens/SendTokens';
@@ -38,6 +38,7 @@
 import storageUtils from './utils/storage';
 import { useDispatch, useSelector } from 'react-redux';
 import RequestErrorModal from './components/RequestError';
+import { GlobalModalContext, MODAL_TYPES } from './components/GlobalModal';
 import createRequestInstance from './api/axiosInstance';
 import hathorLib from '@hathor/wallet-lib';
 import { IPC_RENDERER } from './constants';
@@ -67,6 +68,7 @@
   });
   const dispatch = useDispatch();
   const history = useHistory();
+  const context = useContext(GlobalModalContext);
 
   // Monitors when Ledger device loses connection or the app is closed
   useEffect(() => {
@@ -98,6 +100,17 @@
 
     // If there is an `Inter Process Communication` channel available, initialize Ledger logic
     if (IPC_RENDERER) {
+      // Event called when the user wants to reset all data
+      IPC_RENDERER.on('app:clear_storage', async () => {
+        context.showModal(MODAL_TYPES.CONFIRM_CLEAR_STORAGE, {
+          success: () => {
+            localStorage.clear();
+            IPC_RENDERER.send('app:clear_storage_success');
+          },
+        });
+
+      });
+
       // Registers the event handlers for the ledger
 
       // Event called when user quits hathor app

src/components/GlobalModal.js

@@ -18,6 +18,7 @@ import ModalLedgerResetTokenSignatures from './ModalLedgerResetTokenSignatures';
 import ModalResetAllData from './ModalResetAllData';
 import ModalLedgerSignToken from './ModalLedgerSignToken';
 import ModalConfirmTestnet from './ModalConfirmTestnet';
+import ModalConfirmClearStorage from './ModalConfirmClearStorage';
 import ModalSendTx from './ModalSendTx';
 import ModalUnregisteredTokenInfo from './ModalUnregisteredTokenInfo';
 import ModalPin from "./ModalPin";
@@ -43,6 +44,7 @@ export const MODAL_TYPES = {
   'RESET_ALL_DATA': 'RESET_ALL_DATA',
   'LEDGER_SIGN_TOKEN': 'LEDGER_SIGN_TOKEN',
   'CONFIRM_TESTNET': 'CONFIRM_TESTNET',
+  'CONFIRM_CLEAR_STORAGE': 'CONFIRM_CLEAR_STORAGE',
   'SEND_TX': 'SEND_TX',
   'UNREGISTERED_TOKEN_INFO': 'UNREGISTERED_TOKEN_INFO',
   'PIN': 'PIN',
@@ -63,6 +65,7 @@ export const MODAL_COMPONENTS = {
   [MODAL_TYPES.RESET_ALL_DATA]: ModalResetAllData,
   [MODAL_TYPES.LEDGER_SIGN_TOKEN]: ModalLedgerSignToken,
   [MODAL_TYPES.CONFIRM_TESTNET]: ModalConfirmTestnet,
+  [MODAL_TYPES.CONFIRM_CLEAR_STORAGE]: ModalConfirmClearStorage,
   [MODAL_TYPES.SEND_TX]: ModalSendTx,
   [MODAL_TYPES.UNREGISTERED_TOKEN_INFO]: ModalUnregisteredTokenInfo,
   [MODAL_TYPES.PIN]: ModalPin,

src/components/ModalConfirmClearStorage.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { t } from 'ttag';
+import $ from 'jquery';
+import SpanFmt from './SpanFmt';
+import { CONFIRM_RESET_MESSAGE } from '../constants';
+
+export default function ModalConfirmClearStorage({ onClose, success }) {
+  const [confirmText, setConfirmText] = useState('');
+  const [confirmError, setConfirmError] = useState('');
+
+  useEffect(() => {
+    $('#modalConfirmResetAllData').modal('show');
+    $('#modalConfirmResetAllData').on('hidden.bs.modal', onClose);
+
+    return () => {
+      $('#modalConfirmResetAllData').modal('hide');
+      $('#modalConfirmResetAllData').off();
+    };
+  }, []);
+
+  const confirmResetData = useCallback(() => {
+    if (confirmText.toLowerCase() !== CONFIRM_RESET_MESSAGE.toLowerCase()) {
+      setConfirmError(t`Invalid value.`);
+      return;
+    }
+
+    success();
+  }, [confirmText, setConfirmError]);
+
+  return (
+    <div className="modal fade" id="modalConfirmResetAllData" tabIndex="-1" role="dialog" aria-labelledby="alertModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+      <div className="modal-dialog" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">
+              { t`Confirm reset all data` }
+            </h5>
+          </div>
+          <div className="modal-body">
+            <div>
+              <p><SpanFmt>{t`**Make sure you have the backup of your seed because this will turn your wallet into a fresh install.**`}</SpanFmt></p>
+              <p>{t`Do you want to reset all of your wallet data? Only continue if you know what you are doing.`}</p>
+              <p>{t`This action cannot be undone. All your data will be erased.`}</p>
+              <p>{t`Your wallet uniqueId will be reset.`}</p>
+              <p>uniqueId: {localStorage.getItem('app:uniqueId')}</p>
+              <p>{t`If you want to reset all data, please type '${CONFIRM_RESET_MESSAGE}' in the box below and click on 'Reset all data' button.`}</p>
+              <p>{t`After resetting the data, the application will close, and you will need to open it again.`}</p>
+              <div>
+                <input type="text" className="form-control" placeholder={t`Write '${CONFIRM_RESET_MESSAGE}'`} onChange={(e) => setConfirmText(e.target.value)} />
+                <span className="text-danger ml-2">
+                  {confirmError}
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="modal-footer">
+            <button onClick={confirmResetData} type="button" className="btn btn-secondary">
+              {t`Reset all data`}
+            </button>
+            <button onClick={onClose} type="button" className="btn btn-hathor">
+              { t`Cancel` }
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}