refactor(extension,core): improve TranslationsFor type, refactor Mnem…

…onicStep, fix clipoard bug
input-output-hk · Apr 30, 2024 · a92edef · a92edef
1 parent eb40042
commit a92edef
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 91 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
@@ -73,10 +73,8 @@ export const WalletSetupWizard = ({
   const [walletInstance, setWalletInstance] = useState<Wallet.CardanoWallet | undefined>();
   const [mnemonicLength, setMnemonicLength] = useState<number>(DEFAULT_MNEMONIC_LENGTH);
   const [mnemonic, setMnemonic] = useState<string[]>([]);
-  const [resetMnemonicStage, setResetMnemonicStage] = useState<MnemonicStage | ''>('');
+  const [currentSetupMnemonicStage, setCurrentSetupMnemonicStage] = useState<MnemonicStage>('writedown');
   const [isResetMnemonicModalOpen, setIsResetMnemonicModalOpen] = useState(false);
-  const [isBackFromNextStep, setIsBackFromNextStep] = useState(false);
-  const [currentMnemonicStage, setCurrentMnemonicStage] = useState<MnemonicStage>('writedown');
   const walletName = getWalletFromStorage()?.name;
   const { createWallet } = useWalletManager();
   const analytics = useAnalyticsContext();
@@ -106,7 +104,7 @@ export const WalletSetupWizard = ({
       return;
     }
 
-    currentMnemonicStage === 'writedown'
+    currentSetupMnemonicStage === 'writedown'
       ? sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_READ_MORE_CLICK)
       : sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
   };
@@ -276,16 +274,18 @@ export const WalletSetupWizard = ({
     return (
       <WalletSetupMnemonicStepRevamp
         mnemonic={mnemonic}
-        onReset={(resetStage) => {
-          setResetMnemonicStage(resetStage);
-          if (resetStage === 'input') {
-            setIsResetMnemonicModalOpen(true);
-            setIsBackFromNextStep(false);
-            setCurrentMnemonicStage('writedown');
+        mnemonicStage={currentSetupMnemonicStage}
+        onStageChange={(nextStage) => {
+          if (nextStage === 'input') {
+            setCurrentSetupMnemonicStage(nextStage);
+            void sendAnalytics(postHogOnboardingActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK);
           } else {
-            onCancel();
+            setIsResetMnemonicModalOpen(true);
+            void sendAnalytics(postHogOnboardingActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
           }
         }}
+        onBack={onCancel}
+        onNext={moveForward}
         renderVideoPopupContent={({ onClose }) => (
           <MnemonicVideoPopupContent
             translations={mnemonicVideoPopupContentTranslations}
@@ -296,13 +296,6 @@ export const WalletSetupWizard = ({
             }}
           />
         )}
-        onNext={moveForward}
-        onStepNext={(mnemonicStage) => {
-          mnemonicStage === 'writedown' && setCurrentMnemonicStage('input');
-          mnemonicStage === 'writedown'
-            ? sendAnalytics(postHogOnboardingActions.create.SAVE_RECOVERY_PHRASE_NEXT_CLICK)
-            : sendAnalytics(postHogOnboardingActions.create.ENTER_RECOVERY_PHRASE_NEXT_CLICK);
-        }}
         translations={walletSetupMnemonicStepTranslations}
         suggestionList={wordList}
         passphraseInfoLink={`${process.env.FAQ_URL}?question=what-happens-if-i-lose-my-recovery-phrase`}
@@ -323,7 +316,6 @@ export const WalletSetupWizard = ({
             icon: Paste
           });
         }}
-        isBackFromNextStep={isBackFromNextStep}
       />
     );
   };
@@ -341,7 +333,6 @@ export const WalletSetupWizard = ({
       {currentStep === WalletSetupSteps.Register && (
         <WalletSetupNamePasswordStepRevamp
           onBack={() => {
-            setIsBackFromNextStep(true);
             moveBack();
           }}
           onNext={handleSubmit}
@@ -358,15 +349,11 @@ export const WalletSetupWizard = ({
           confirmLabel={t('browserView.walletSetup.mnemonicResetModal.confirm')}
           onCancel={() => {
             setIsResetMnemonicModalOpen(false);
-            setResetMnemonicStage('');
           }}
           onConfirm={() => {
             setMnemonic(util.generateMnemonicWords());
             setIsResetMnemonicModalOpen(false);
-            if (resetMnemonicStage === 'writedown') {
-              moveBack();
-            }
-            setResetMnemonicStage('');
+            setCurrentSetupMnemonicStage('writedown');
           }}
         />
       )}

diff --git a/packages/core/src/ui/components/ActivityDetail/TxDetailsList.tsx b/packages/core/src/ui/components/ActivityDetail/TxDetailsList.tsx
@@ -4,7 +4,6 @@ import cn from 'classnames';
 import React, { useState } from 'react';
 import { DownOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { Button } from '@lace/common';
-import { TranslationsFor } from '@src/ui/utils/types';
 import { ReactComponent as BracketDown } from '../../assets/icons/bracket-down.component.svg';
 import { DetailRows } from './components';
 import styles from './TransactionInputOutput.module.scss';
@@ -15,7 +14,7 @@ interface TxDetailListProps<T extends string> {
   title: string;
   subTitle: string;
   lists: TxDetails<T>[];
-  translations: TranslationsFor<T>;
+  translations: Record<T, string>;
   tooltipContent?: React.ReactNode;
   withSeparatorLine?: boolean;
 }

diff --git a/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx b/packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import cn from 'classnames';
 import { DetailRow } from './DetailRow';
 import { TxDetails } from '../types';
-import { TranslationsFor } from '@src/ui/utils/types';
 import styles from '../TransactionInputOutput.module.scss';
 
 type DetailRowsProps<T extends string> = {
   list: TxDetails<T>;
   testId: string;
-  translations: TranslationsFor<T>;
+  translations: Record<T, string>;
 };
 
 export const DetailRows = function DetailRows<T extends string>({

diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupOption.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupOption.module.scss
@@ -1,6 +1,5 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/typography';
-@import "shared.scss";
 
 .walletSetupOption {
   flex: 1;
@@ -72,7 +71,3 @@
   left: 0;
   opacity: 0;
 }
-
-.btnContentWrapper {
-  @extend .btnContentWrapper;
-}
diff --git a/packages/core/src/ui/components/WalletSetup/shared.scss b/packages/core/src/ui/components/WalletSetup/shared.scss
diff --git a/...lletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicRevampCommon.module.scss b/...lletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicRevampCommon.module.scss
@@ -4,11 +4,20 @@
   .ant-btn-link {
     color: var(--primary-default, #7f5af0) !important;
     font-weight: 600 !important;
-    
+
     &:hover,
     &:active,
     &:focus {
         color: var(--primary-default, #7f5af0) !important;
     }
   }
 }
+
+.btnContentWrapper {
+  display: flex !important;
+  gap: size_unit(0.5) !important;
+
+  svg {
+    font-size: 24px;
+  }
+}
diff --git a/...WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.module.scss b/...WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.module.scss
@@ -0,0 +1,18 @@
+@import '../../../styles/theme.scss';
+@import '../../../../../../common/src/ui/styles/abstracts/typography';
+@import './WalletSetupMnemonicRevampCommon.module';
+
+.containerWordsConfirm {
+  margin-top: size_unit(2) !important;
+}
+
+.link {
+  color: var(--data-blue);
+  cursor: pointer;
+}
+
+.errorMessage {
+  @include text-bodyXs-semi-bold;
+  margin-top: size_unit(2) !important;
+  color: var(--color-pink, #ff5470);
+}
diff --git a/...ponents/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx b/...ponents/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicStepRevamp.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { WalletTimelineSteps } from '../../WalletSetup';
 import { MnemonicWordsWritedownRevamp } from './MnemonicWordsWritedownRevamp';
 import { WalletSetupStepLayoutRevamp } from '../WalletSetupStepLayoutRevamp';
-import styles from '../../WalletSetup/WalletSetupOption.module.scss';
+import styles from './WalletSetupMnemonicStepRevamp.module.scss';
 import './WalletSetupMnemonicRevampCommon.module.scss';
-import { TranslationsForJSX } from '@ui/utils/types';
+import { TranslationsFor } from '@ui/utils/types';
 import { hasEmptyString } from './WalletSetupMnemonicVerificationStepRevamp';
 import { Dialog } from '@lace/ui';
 import { MnemonicWordsConfirmInputRevamp } from './MnemonicWordsConfirmInputRevamp';
@@ -19,21 +19,22 @@ export type MnemonicStage = 'writedown' | 'input';
 
 export interface WalletSetupMnemonicStepProps {
   mnemonic: string[];
-  onReset: (mnemonicStage?: MnemonicStage) => void;
+  mnemonicStage: MnemonicStage;
+  onBack: () => void;
   onNext: () => void;
-  onStepNext?: (currentStage: MnemonicStage) => void;
-  isBackFromNextStep?: boolean;
-  translations: TranslationsForJSX<
-    | 'writePassphraseTitle'
-    | 'enterPassphraseDescription'
-    | 'enterPassphrase'
-    | 'writePassphraseSubtitle1'
-    | 'writePassphraseSubtitle2'
-    | 'passphraseError'
-    | 'copyToClipboard'
-    | 'pasteFromClipboard'
-    | 'copyPasteTooltipText'
-  >;
+  onStageChange?: (currentStage: MnemonicStage) => void;
+  translations: TranslationsFor<{
+    jsxElementKey: 'copyPasteTooltipText';
+    stringKey:
+      | 'writePassphraseTitle'
+      | 'enterPassphraseDescription'
+      | 'enterPassphrase'
+      | 'writePassphraseSubtitle1'
+      | 'writePassphraseSubtitle2'
+      | 'passphraseError'
+      | 'copyToClipboard'
+      | 'pasteFromClipboard';
+  }>;
   suggestionList?: Array<string>;
   passphraseInfoLink?: string;
   onWatchVideoClick?: () => void;
@@ -44,32 +45,29 @@ export interface WalletSetupMnemonicStepProps {
 
 export const WalletSetupMnemonicStepRevamp = ({
   mnemonic,
-  onReset,
+  mnemonicStage,
+  onBack,
   onNext,
-  onStepNext,
+  onStageChange,
   translations,
   suggestionList,
   renderVideoPopupContent,
   onWatchVideoClick,
   onCopyToClipboard,
-  onPasteFromClipboard,
-  isBackFromNextStep = false
+  onPasteFromClipboard
 }: WalletSetupMnemonicStepProps): React.ReactElement => {
-  const initialMnemonicWordsConfirm = useMemo(() => mnemonic.map(() => ''), [mnemonic]);
-  const [mnemonicStage, setMnemonicStage] = useState<MnemonicStage>('writedown');
-  const [mnemonicConfirm, setMnemonicWordsConfirm] = useState(initialMnemonicWordsConfirm);
+  const [mnemonicConfirm, setMnemonicWordsConfirm] = useState<string[]>([]);
   const [videoModalOpen, setVideoModalOpen] = useState(false);
 
-  // reset the state on mnemonic change
   useEffect(() => {
-    setMnemonicStage(isBackFromNextStep ? 'input' : 'writedown');
-    setMnemonicWordsConfirm(isBackFromNextStep ? mnemonic : initialMnemonicWordsConfirm);
-  }, [initialMnemonicWordsConfirm, isBackFromNextStep, mnemonic]);
+    if (mnemonicConfirm.length > 0) return;
+    setMnemonicWordsConfirm(mnemonicStage === 'writedown' ? mnemonic.map(() => '') : mnemonic);
+  }, [mnemonic, mnemonicConfirm.length, mnemonicStage]);
 
   const pasteRecoveryPhrase = async (offset = 0) => {
     const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
 
-    if (copiedWords.length === -1) return;
+    if (copiedWords.length === 0) return;
 
     const newMnemonic = [...mnemonicConfirm];
 
@@ -85,16 +83,20 @@ export const WalletSetupMnemonicStepRevamp = ({
   };
 
   const handleBack = () => {
-    onReset(mnemonicStage);
+    if (mnemonicStage === 'writedown') {
+      onBack();
+    }
+    setMnemonicWordsConfirm(mnemonic.map(() => ''));
+    onStageChange('writedown');
   };
 
   const handleNext = () => {
-    onStepNext && onStepNext(mnemonicStage);
     if (mnemonicStage === 'input') {
       onNext();
       return;
     }
-    setMnemonicStage('input');
+    setMnemonicWordsConfirm(mnemonic.map(() => ''));
+    onStageChange('input');
   };
 
   const title = mnemonicStage === 'writedown' ? translations.writePassphraseTitle : translations.enterPassphrase;
@@ -166,7 +168,7 @@ export const WalletSetupMnemonicStepRevamp = ({
         {mnemonicStage === 'writedown' ? (
           <MnemonicWordsWritedownRevamp words={mnemonic} />
         ) : (
-          <div className={styles.ContainerWordsConfirm}>
+          <div className={styles.containerWordsConfirm}>
             <MnemonicWordsConfirmInputRevamp
               handlePaste={pasteRecoveryPhrase}
               words={mnemonicConfirm}

diff --git a/...evamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.module.scss b/...evamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.module.scss
@@ -1,6 +1,6 @@
 @import '../../../styles/theme.scss';
 @import '../../../../../../common/src/ui/styles/abstracts/typography';
-@import '../../WalletSetup/shared.scss';
+@import './WalletSetupMnemonicRevampCommon.module';
 
 .mnemonicContainer {
   margin-top: size_unit(2) !important;
@@ -53,7 +53,3 @@
   margin-top: size_unit(2) !important;
   color: var(--color-pink, #ff5470);
 }
-
-.btnContentWrapper {
-  @extend .btnContentWrapper;
-}
diff --git a/...etSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.tsx b/...etSetupRevamp/WalletSetupMnemonicStepRevamp/WalletSetupMnemonicVerificationStepRevamp.tsx
@@ -6,7 +6,7 @@ import { WalletSetupStepLayoutRevamp } from '../WalletSetupStepLayoutRevamp';
 import { MnemonicWordsConfirmInputRevamp } from './MnemonicWordsConfirmInputRevamp';
 import styles from './WalletSetupMnemonicVerificationStepRevamp.module.scss';
 import './WalletSetupMnemonicRevampCommon.module.scss';
-import { TranslationsForJSX } from '@ui/utils/types';
+import { TranslationsFor } from '@ui/utils/types';
 import { Segmented, Button, Tooltip } from 'antd';
 import { readMnemonicFromClipboard } from './wallet-utils';
 import { WalletTimelineSteps } from '@ui/components/WalletSetup';
@@ -21,9 +21,10 @@ export interface WalletSetupMnemonicVerificationStepProps {
   onSubmit: () => void;
   isSubmitEnabled: boolean;
   mnemonicWordsInStep?: number;
-  translations: TranslationsForJSX<
-    'enterPassphrase' | 'passphraseError' | 'enterPassphraseLength' | 'pasteFromClipboard' | 'copyPasteTooltipText'
-  >;
+  translations: TranslationsFor<{
+    jsxElementKey: 'copyPasteTooltipText';
+    stringKey: 'enterPassphrase' | 'passphraseError' | 'enterPassphraseLength' | 'pasteFromClipboard';
+  }>;
   onCancel?: () => void;
   suggestionList?: Array<string>;
   defaultMnemonicLength?: number;
@@ -53,7 +54,7 @@ export const WalletSetupMnemonicVerificationStepRevamp = ({
   const pasteRecoveryPhrase = async (offset = 0) => {
     const copiedWords = await readMnemonicFromClipboard(mnemonic.length);
 
-    if (copiedWords.length === -1) return;
+    if (copiedWords.length === 0) return;
 
     const newMnemonic = [...mnemonic];
 

diff --git a/...es/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/wallet-utils.ts b/...es/core/src/ui/components/WalletSetupRevamp/WalletSetupMnemonicStepRevamp/wallet-utils.ts
@@ -7,5 +7,6 @@ export const writeMnemonicToClipboard = async (mnemonic: string[], joiner = ' ')
 export const readMnemonicFromClipboard = async (limitTo = 24, offset = 0): Promise<string[]> => {
   const text = await navigator.clipboard.readText();
   navigator.clipboard.writeText('');
-  return text.split(/[\s,]+/).slice(offset, limitTo);
+  const mnemonic = text.split(/[\s,]+/).slice(offset, limitTo);
+  return mnemonic.length === 1 && !mnemonic[0] ? [] : mnemonic;
 };
diff --git a/packages/core/src/ui/lib/translations/en.json b/packages/core/src/ui/lib/translations/en.json
@@ -522,11 +522,14 @@
   "core.walletSetupMnemonicStep.passphraseInfo3": "Find out more.",
   "core.walletSetupMnemonicStep.writePassphrase": "Write down your secret passphrase",
   "core.walletSetupMnemonicStepRevamp.copyToClipboard": "Copy to clipboard",
+  "core.walletSetupMnemonicStepRevamp.copyPasteTooltipText": "Best practices on copying and pasting. <a>Read more</a>",
   "core.walletSetupMnemonicStepRevamp.enterPassphrase": "Enter your recovery passphrase",
   "core.walletSetupMnemonicStepRevamp.enterPassphraseDescription": "Let's check you've got the correct recovery phrase. Type each word in the right order or paste from clipboard to verify it.",
   "core.walletSetupMnemonicStepRevamp.enterPassphraseLength": "Choose recovery phrase length",
   "core.walletSetupMnemonicStepRevamp.passphraseError": "Make sure the words of your recovery phrase are in the right order and spelled correctly.",
   "core.walletSetupMnemonicStepRevamp.pasteFromClipboard": "Paste from clipboard",
+  "core.walletSetupMnemonicStepRevamp.recoveryPhraseCopied": "Recovery phrase copied",
+  "core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted": "Recovery phrase pasted. Clipboard now cleared",
   "core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle1": "Consider your recovery phrase as the master key to your wallet.",
   "core.walletSetupMnemonicStepRevamp.writePassphraseSubtitle2": "Watch video.",
   "core.walletSetupMnemonicStepRevamp.writePassphraseTitle": "Start by saving your recovery phrase",