Fix: avoid having secrets/password in heap memory

src/components/MainMenu.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import {
   IconButton,
   Menu,
@@ -11,26 +9,20 @@ import {
 } from '@chakra-ui/react';
 import { IconMenu2 } from '@tabler/icons-react';
 
-import usePassword from '../store/usePassword';
+import useMnemonics from '../hooks/useMnemonics';
 import useWallet from '../store/useWallet';
 
 import KeyManager from './KeyManager';
 import MnemonicsModal from './MnemonicsModal';
 import WipeOutAlert from './WipeOutAlert';
 
 function MainMenu(): JSX.Element {
-  const { exportWalletFile, showMnemonics } = useWallet();
-  const { withPassword } = usePassword();
+  const { exportWalletFile } = useWallet();
 
   const wipeAlert = useDisclosure();
 
-  const mnemonicsModal = useDisclosure();
   const keyManagerDrawer = useDisclosure();
-  const [mnemonics, setMnemonics] = useState('');
-  const onMnemonicsClose = () => {
-    setMnemonics('');
-    mnemonicsModal.onClose();
-  };
+  const { revealMnemonics } = useMnemonics();
 
   return (
     <>
@@ -45,22 +37,7 @@ function MainMenu(): JSX.Element {
           <MenuItem onClick={keyManagerDrawer.onOpen}>
             Manage keys & accounts
           </MenuItem>
-          <MenuItem
-            onClick={async () => {
-              const words = await withPassword(
-                showMnemonics,
-                'Show mnemonics',
-                // eslint-disable-next-line max-len
-                'Please enter your password to read mnemonics from the secret part of your wallet:'
-              );
-              if (words) {
-                setMnemonics(words);
-                mnemonicsModal.onOpen();
-              }
-            }}
-          >
-            Backup mnemonic
-          </MenuItem>
+          <MenuItem onClick={revealMnemonics}>Backup mnemonic</MenuItem>
           <MenuItem onClick={exportWalletFile}>Export wallet file</MenuItem>
           <MenuDivider />
           <MenuItem color="red" onClick={wipeAlert.onOpen}>
@@ -69,11 +46,7 @@ function MainMenu(): JSX.Element {
         </MenuList>
       </Menu>
       <WipeOutAlert disclosure={wipeAlert} />
-      <MnemonicsModal
-        isOpen={mnemonicsModal.isOpen}
-        onClose={onMnemonicsClose}
-        mnemonics={mnemonics}
-      />
+      <MnemonicsModal />
       <KeyManager
         isOpen={keyManagerDrawer.isOpen}
         onClose={keyManagerDrawer.onClose}

src/components/MnemonicsModal.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 
 import {
   Button,
@@ -12,34 +13,25 @@ import {
   Text,
   Textarea,
 } from '@chakra-ui/react';
-import { useCopyToClipboard } from '@uidotdev/usehooks';
 
-type MnemonicsModalProps = {
-  mnemonics: string;
-  isOpen: boolean;
-  onClose: () => void;
-};
+import useCopy from '../hooks/useCopy';
+import useMnemonics from '../hooks/useMnemonics';
 
-function MnemonicsModal({
-  mnemonics,
-  isOpen,
-  onClose,
-}: MnemonicsModalProps): JSX.Element {
-  const [isCopied, setIsCopied] = useState(false);
-  const [, copy] = useCopyToClipboard();
+function MnemonicsModal(): JSX.Element {
+  const { mnemonics, closeMnemonicsModal, isOpen } = useMnemonics();
+  const { setValue, register } = useForm<{ mnemonics: string }>();
+  const { isCopied, onCopy } = useCopy();
 
-  let timeout: ReturnType<typeof setTimeout>;
-  const onCopyClick = (data: string) => () => {
-    clearTimeout(timeout);
-    copy(data);
-    setIsCopied(true);
-    timeout = setTimeout(() => {
-      setIsCopied(false);
-    }, 5000);
-  };
+  useEffect(() => {
+    // Used to clean up mnemonics from memory
+    setValue('mnemonics', mnemonics);
+    return () => {
+      setValue('mnemonics', '');
+    };
+  }, [mnemonics, setValue]);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={closeMnemonicsModal} isCentered>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
@@ -49,18 +41,29 @@ function MnemonicsModal({
             Please keep your mnemonics secret and do not share with anyone. They
             can be used to restore your wallet and access to your funds.
           </Text>
-          <Textarea readOnly value={mnemonics} rows={4} resize="none" />
+          <Textarea
+            {...register('mnemonics', {
+              value: mnemonics,
+            })}
+            readOnly
+            rows={4}
+            resize="none"
+          />
           <Text fontSize="xs" color="gray" mt={2}>
             We recommend you to remember mnemonics and not store them on your
             computer. Or write them down on a piece of paper and keep it in a
             safe place.
           </Text>
         </ModalBody>
         <ModalFooter>
-          <Button isDisabled={isCopied} onClick={onCopyClick(mnemonics)} w={20}>
+          <Button
+            isDisabled={isCopied}
+            onClick={() => onCopy(mnemonics)}
+            w={20}
+          >
             {isCopied ? 'Copied' : 'Copy'}
           </Button>
-          <Button colorScheme="blue" onClick={onClose} ml={2}>
+          <Button colorScheme="blue" onClick={closeMnemonicsModal} ml={2}>
             OK
           </Button>
         </ModalFooter>

src/components/RevealSecretKeyModal.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 
 import {
   Button,
@@ -12,57 +13,54 @@ import {
   Text,
   Textarea,
 } from '@chakra-ui/react';
-import { useCopyToClipboard } from '@uidotdev/usehooks';
 
-import { HexString } from '../types/common';
+import useCopy from '../hooks/useCopy';
+import useRevealSecretKey from '../hooks/useRevealSecretKey';
 
-type RevealSecretKeyProps = {
-  displayName: string;
-  secretKey: HexString;
-  isOpen: boolean;
-  onClose: () => void;
-};
+function RevealSecretKey(): JSX.Element {
+  const { secretKey, isOpen, closeSecretKeyModal } = useRevealSecretKey();
+  const { setValue, register } = useForm<{ secretKey: string }>();
+  const { isCopied, onCopy } = useCopy();
 
-function RevealSecretKey({
-  displayName,
-  secretKey,
-  isOpen,
-  onClose,
-}: RevealSecretKeyProps): JSX.Element {
-  const [isCopied, setIsCopied] = useState(false);
-  const [, copy] = useCopyToClipboard();
-
-  let timeout: ReturnType<typeof setTimeout>;
-  const onCopyClick = (data: string) => () => {
-    clearTimeout(timeout);
-    copy(data);
-    setIsCopied(true);
-    timeout = setTimeout(() => {
-      setIsCopied(false);
-    }, 5000);
-  };
+  useEffect(() => {
+    // Used to clean up mnemonics from memory
+    setValue('secretKey', secretKey?.secretKey || '');
+    return () => {
+      setValue('secretKey', '');
+    };
+  }, [secretKey, setValue]);
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={closeSecretKeyModal} isCentered>
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
         <ModalHeader>Secret Key</ModalHeader>
         <ModalBody>
           <Text mb={4}>
-            This is the secret key for account &quot;{displayName}&quot;.
+            This is the secret key for account &quot;
+            {secretKey?.displayName ?? ''}&quot;.
           </Text>
-          <Textarea readOnly value={secretKey} rows={4} resize="none" />
+          <Textarea
+            readOnly
+            {...register('secretKey', { value: secretKey?.secretKey ?? '' })}
+            rows={4}
+            resize="none"
+          />
           <Text fontSize="xs" color="gray" mt={2}>
             Please keep it secret and do not share it to anyone, otherwise your
             funds might be stolen.
           </Text>
         </ModalBody>
         <ModalFooter>
-          <Button isDisabled={isCopied} onClick={onCopyClick(secretKey)} w={20}>
+          <Button
+            isDisabled={isCopied}
+            onClick={() => onCopy(secretKey?.secretKey ?? '')}
+            w={20}
+          >
             {isCopied ? 'Copied' : 'Copy'}
           </Button>
-          <Button colorScheme="blue" onClick={onClose} ml={2}>
+          <Button colorScheme="blue" onClick={closeSecretKeyModal} ml={2}>
             Close
           </Button>
         </ModalFooter>