feat(extension,core): add copy and paste shortcuts for the mnemonic s…

…creens, reduce toasts duration
input-output-hk · Apr 30, 2024 · bce0ae4 · bce0ae4
1 parent a92edef
commit bce0ae4
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 40 deletions.
diff --git a/...sion-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx b/...sion-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx
@@ -29,7 +29,6 @@ import { isScriptAddress } from '@cardano-sdk/wallet';
 import { filter, firstValueFrom } from 'rxjs';
 import { getWalletFromStorage } from '@src/utils/get-wallet-from-storage';
 import { toast } from '@lace/common';
-import { TOAST_DEFAULT_DURATION } from '@hooks/useActionExecution';
 import Copy from '@src/assets/icons/copy.component.svg';
 import Paste from '@src/assets/icons/paste.component.svg';
 
@@ -63,6 +62,8 @@ export interface WalletSetupWizardProps {
 const DEFAULT_MNEMONIC_LENGTH = 24;
 const COPY_PASTE_TOOLTIP_URL = `${process.env.FAQ_URL}?question=best-practices-for-using-the-copy-to-clipboard-paste-from-clipboard-recovery-phrase-features`;
 
+const twoSecondsToastDuration = 1.5;
+
 export const WalletSetupWizard = ({
   onCancel,
   setupType,
@@ -262,7 +263,7 @@ export const WalletSetupWizard = ({
           onPasteFromClipboard={() => {
             sendAnalytics(postHogOnboardingActions[setupType]?.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK);
             toast.notify({
-              duration: TOAST_DEFAULT_DURATION,
+              duration: twoSecondsToastDuration,
               text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'),
               icon: Paste
             });
@@ -303,15 +304,15 @@ export const WalletSetupWizard = ({
         onCopyToClipboard={() => {
           sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_TO_CLIPBOARD_CLICK);
           toast.notify({
-            duration: TOAST_DEFAULT_DURATION,
+            duration: twoSecondsToastDuration,
             text: t('core.walletSetupMnemonicStepRevamp.recoveryPhraseCopied'),
             icon: Copy
           });
         }}
         onPasteFromClipboard={() => {
           sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_FROM_CLIPBOARD_CLICK);
           toast.notify({
-            duration: TOAST_DEFAULT_DURATION,
+            duration: twoSecondsToastDuration,
             text: t('core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted'),
             icon: Paste
           });

diff --git a/...ponents/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx b/...ponents/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { WalletTimelineSteps } from '../../WalletSetup';
 import { MnemonicWordsWritedownRevamp } from './MnemonicWordsWritedownRevamp';
@@ -64,23 +64,47 @@ export const WalletSetupMnemonicStepRevamp = ({
     setMnemonicWordsConfirm(mnemonicStage === 'writedown' ? mnemonic.map(() => '') : mnemonic);
   }, [mnemonic, mnemonicConfirm.length, mnemonicStage]);
 
-  const pasteRecoveryPhrase = async (offset = 0) => {
-    const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
+  const copyRecoveryPhrase = useCallback(async () => {
+    await writeMnemonicToClipboard(mnemonic);
+    onCopyToClipboard();
+  }, [mnemonic, onCopyToClipboard]);
 
-    if (copiedWords.length === 0) return;
+  const pasteRecoveryPhrase = useCallback(
+    async (offset = 0) => {
+      const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
 
-    const newMnemonic = [...mnemonicConfirm];
+      if (copiedWords.length === 0) return;
 
-    copiedWords.forEach((word, index) => {
-      const newIndex = offset + index;
-      if (newIndex < newMnemonic.length) {
-        newMnemonic[newIndex] = word;
-      }
-    });
+      const newMnemonic = [...mnemonicConfirm];
 
-    setMnemonicWordsConfirm(newMnemonic);
-    onPasteFromClipboard();
-  };
+      copiedWords.forEach((word, index) => {
+        const newIndex = offset + index;
+        if (newIndex < newMnemonic.length) {
+          newMnemonic[newIndex] = word;
+        }
+      });
+
+      setMnemonicWordsConfirm(newMnemonic);
+      onPasteFromClipboard();
+    },
+    [mnemonic.length, mnemonicConfirm, onPasteFromClipboard]
+  );
+
+  useEffect(() => {
+    const handleEnterKeyPress = (event: KeyboardEvent) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      if (event.key === 'c' && mnemonicStage === 'writedown') {
+        void copyRecoveryPhrase();
+      }
+      if (event.key === 'v' && mnemonicStage === 'input') {
+        void pasteRecoveryPhrase();
+      }
+    };
+    document.addEventListener('keydown', handleEnterKeyPress);
+    return () => {
+      document.removeEventListener('keydown', handleEnterKeyPress);
+    };
+  }, [copyRecoveryPhrase, mnemonic, mnemonicStage, pasteRecoveryPhrase]);
 
   const handleBack = () => {
     if (mnemonicStage === 'writedown') {
@@ -138,14 +162,7 @@ export const WalletSetupMnemonicStepRevamp = ({
         customAction={
           mnemonicStage === 'writedown' ? (
             <Tooltip placement="top" title={translations.copyPasteTooltipText} showArrow={false}>
-              <Button
-                type="link"
-                onClick={async () => {
-                  await writeMnemonicToClipboard(mnemonic);
-                  onCopyToClipboard();
-                }}
-                data-testid="copy-to-clipboard-button"
-              >
+              <Button type="link" onClick={copyRecoveryPhrase} data-testid="copy-to-clipboard-button">
                 <span className={styles.btnContentWrapper}>
                   <CopyIcon />
                   {translations.copyToClipboard}

diff --git a/...etSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.tsx b/...etSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-magic-numbers */
 /* eslint-disable unicorn/no-array-for-each */
 /* eslint-disable unicorn/no-new-array */
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { WalletSetupStepLayoutRevamp } from '../WalletSetupStepLayoutRevamp';
 import { MnemonicWordsConfirmInputRevamp } from './MnemonicWordsConfirmInputRevamp';
 import styles from './WalletSetupMnemonicVerificationStepRevamp.module.scss';
@@ -51,23 +51,37 @@ export const WalletSetupMnemonicVerificationStepRevamp = ({
     </>
   );
 
-  const pasteRecoveryPhrase = async (offset = 0) => {
-    const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
+  const pasteRecoveryPhrase = useCallback(
+    async (offset = 0) => {
+      const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
 
-    if (copiedWords.length === 0) return;
+      if (copiedWords.length === 0) return;
 
-    const newMnemonic = [...mnemonic];
+      const newMnemonic = [...mnemonic];
 
-    copiedWords.forEach((word, index) => {
-      const newIndex = offset + index;
-      if (newIndex < newMnemonic.length) {
-        newMnemonic[newIndex] = word;
-      }
-    });
+      copiedWords.forEach((word, index) => {
+        const newIndex = offset + index;
+        if (newIndex < newMnemonic.length) {
+          newMnemonic[newIndex] = word;
+        }
+      });
+
+      onChange(newMnemonic);
+      onPasteFromClipboard?.();
+    },
+    [mnemonic, onChange, onPasteFromClipboard]
+  );
 
-    onChange(newMnemonic);
-    onPasteFromClipboard?.();
-  };
+  useEffect(() => {
+    const handleEnterKeyPress = (event: KeyboardEvent) => {
+      if ((!event.ctrlKey && !event.metaKey) || event.key !== 'v') return;
+      void pasteRecoveryPhrase();
+    };
+    document.addEventListener('keydown', handleEnterKeyPress);
+    return () => {
+      document.removeEventListener('keydown', handleEnterKeyPress);
+    };
+  }, [mnemonic, pasteRecoveryPhrase]);
 
   return (
     <WalletSetupStepLayoutRevamp