Rename delete account to delete mnemonic (#120)

src/components/DeleteMnemonicDialog.js

@@ -1,16 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import DialogForm from './DialogForm';
 import { forgetWallet } from '../utils/wallet-seed';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { DialogContentText } from '@material-ui/core';
 import DialogActions from '@material-ui/core/DialogActions';
+import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 
-export default function DeleteAccountDialog({
-  open,
-  onClose,
-  isDeleteAccountEnabled,
-}) {
+export default function DeleteMnemonicDialog({ open, onClose }) {
+  const [deleteCheck, setDeleteCheck] = useState('');
   return (
     <>
       <DialogForm
@@ -22,7 +20,7 @@ export default function DeleteAccountDialog({
         }}
         fullWidth
       >
-        <DialogTitle>Delete Account</DialogTitle>
+        <DialogTitle>Delete Mnemonic</DialogTitle>
         <DialogContentText style={{ margin: 20 }}>
           <div
             style={{
@@ -35,20 +33,28 @@ export default function DeleteAccountDialog({
             all current accounts from your browser.
             <br />
             <br />
-            <strong style={{ textAlign: 'center' }}>
+            <strong>
               To prevent loss of funds, please ensure you have the seed phrase
               and the private key for all current accounts.
             </strong>
           </div>
+          <TextField
+            label={`Please type "delete" to confirm`}
+            fullWidth
+            variant="outlined"
+            margin="normal"
+            value={deleteCheck}
+            onChange={(e) => setDeleteCheck(e.target.value.trim())}
+          />
         </DialogContentText>
         <DialogActions>
           <Button onClick={onClose}>Close</Button>
           <Button
             type="submit"
             color="secondary"
-            disabled={!isDeleteAccountEnabled}
+            disabled={deleteCheck !== 'delete'}
           >
-            Delete Account
+            Delete
           </Button>
         </DialogActions>
       </DialogForm>

src/components/NavigationFrame.js

@@ -23,7 +23,7 @@ import CodeIcon from '@material-ui/icons/Code';
 import Tooltip from '@material-ui/core/Tooltip';
 import ImportExportIcon from '@material-ui/icons/ImportExport';
 import AddAccountDialog from './AddAccountDialog';
-import DeleteAccountDialog from './DeleteAccountDialog';
+import DeleteMnemonicDialog from './DeleteMnemonicDialog';
 import AddHardwareWalletDialog from './AddHarwareWalletDialog';
 import { ExportMnemonicDialog } from './ExportAccountDialog.js';
 
@@ -139,8 +139,7 @@ function WalletSelector() {
     addHardwareWalletDialogOpen,
     setAddHardwareWalletDialogOpen,
   ] = useState(false);
-  const [deleteAccountOpen, setDeleteAccountOpen] = useState(false);
-  const [isDeleteAccountEnabled, setIsDeleteAccountEnabled] = useState(false);
+  const [deleteMnemonicOpen, setDeleteMnemonicOpen] = useState(false);
   const [exportMnemonicOpen, setExportMnemonicOpen] = useState(false);
   const classes = useStyles();
 
@@ -185,10 +184,9 @@ function WalletSelector() {
         open={exportMnemonicOpen}
         onClose={() => setExportMnemonicOpen(false)}
       />
-      <DeleteAccountDialog
-        open={deleteAccountOpen}
-        onClose={() => setDeleteAccountOpen(false)}
-        isDeleteAccountEnabled={isDeleteAccountEnabled}
+      <DeleteMnemonicDialog
+        open={deleteMnemonicOpen}
+        onClose={() => setDeleteMnemonicOpen(false)}
       />
       <Hidden xsDown>
         <Button
@@ -269,17 +267,13 @@ function WalletSelector() {
         <MenuItem
           onClick={() => {
             setAnchorEl(null);
-            setIsDeleteAccountEnabled(false);
-            setDeleteAccountOpen(true);
-            setTimeout(() => {
-              setIsDeleteAccountEnabled(true);
-            }, 3000);
+            setDeleteMnemonicOpen(true);
           }}
         >
           <ListItemIcon className={classes.menuItemIcon}>
             <ExitToApp fontSize="small" />
           </ListItemIcon>
-          Delete Account
+          Delete Mnemonic
         </MenuItem>
       </Menu>
     </>