fix: improve code

input-output-hk · Apr 25, 2024 · 1b31dcf · 1b31dcf
1 parent 53386eb
commit 1b31dcf
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/apps/browser-extension-wallet/src/lib/translations/en.json b/apps/browser-extension-wallet/src/lib/translations/en.json
@@ -1288,8 +1288,7 @@
   "core.walletSetupMnemonicStepRevamp.passphraseError": "Make sure the words of your recovery phrase are in the right order and spelled correctly.",
   "core.walletSetupMnemonicStepRevamp.copyToClipboard": "Copy to clipboard",
   "core.walletSetupMnemonicStepRevamp.pasteFromClipboard": "Paste from clipboard",
-  "core.walletSetupMnemonicStepRevamp.copyPasteTooltipText1": "Best practices on copying and pasting.",
-  "core.walletSetupMnemonicStepRevamp.copyPasteTooltipText2": "Read more",
+  "core.walletSetupMnemonicStepRevamp.copyPasteTooltipText": "Best practices on copying and pasting. <a>Read more<a/>",
   "core.walletSetupMnemonicStepRevamp.recoveryPhraseCopied": "Recovery phrase copied",
   "core.walletSetupMnemonicStepRevamp.recoveryPhrasePasted": "Recovery phrase pasted",
   "core.walletSetupMnemonicIntroStep.title": "Keeping your wallet secure",

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
@@ -1,6 +1,6 @@
 /* eslint-disable complexity, sonarjs/cognitive-complexity, max-statements, sonarjs/no-duplicate-string, unicorn/no-nested-ternary */
 import React, { Suspense, useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { wordlists } from 'bip39';
 import { useLocalStorage, useTimeSpentOnPage, useWalletManager } from '@hooks';
 import {
@@ -105,6 +105,7 @@ export const WalletSetupWizard = ({
       sendAnalytics(postHogOnboardingActions.restore.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
       return;
     }
+
     currentMnemonicStage === 'writedown'
       ? sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_COPY_READ_MORE_CLICK)
       : sendAnalytics(postHogOnboardingActions.create.RECOVERY_PHRASE_PASTE_READ_MORE_CLICK);
@@ -121,12 +122,19 @@ export const WalletSetupWizard = ({
     copyToClipboard: t('core.walletSetupMnemonicStepRevamp.copyToClipboard'),
     pasteFromClipboard: t('core.walletSetupMnemonicStepRevamp.pasteFromClipboard'),
     copyPasteTooltipText: (
-      <>
-        {t('core.walletSetupMnemonicStepRevamp.copyPasteTooltipText1')}{' '}
-        <a href={COPY_PASTE_TOOLTIP_URL} target="_blank" rel="noopener noreferrer" onClick={handleReadMoreOnClick}>
-          {t('core.walletSetupMnemonicStepRevamp.copyPasteTooltipText2')}
-        </a>
-      </>
+      <Trans
+        i18nKey="core.walletSetupMnemonicStepRevamp.copyPasteTooltipText"
+        components={{
+          a: (
+            <a
+              href={COPY_PASTE_TOOLTIP_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleReadMoreOnClick}
+            />
+          )
+        }}
+      />
     )
   };
 

diff --git a/packages/core/src/ui/components/WalletSetup/WalletSetupOption.module.scss b/packages/core/src/ui/components/WalletSetup/WalletSetupOption.module.scss
@@ -1,5 +1,6 @@
 @import '../../styles/theme.scss';
 @import '../../../../../common/src/ui/styles/abstracts/typography';
+@import "shared.scss";
 
 .walletSetupOption {
   flex: 1;
@@ -73,10 +74,5 @@
 }
 
 .btnContentWrapper {
-  display: flex !important;
-  gap: size_unit(0.5) !important;
-
-  svg {
-    font-size: 24px;
-  }
+  @extend .btnContentWrapper;
 }
diff --git a/packages/core/src/ui/components/WalletSetup/shared.scss b/packages/core/src/ui/components/WalletSetup/shared.scss
@@ -0,0 +1,10 @@
+@import '../../styles/theme.scss';
+
+.btnContentWrapper {
+  display: flex !important;
+  gap: size_unit(0.5) !important;
+
+  svg {
+    font-size: 24px;
+  }
+}
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/WalletSetupOption.module.scss';
+@import '../../WalletSetup/shared.scss';
 
 .mnemonicContainer {
   margin-top: size_unit(2) !important;