Tw-1045/improve UI import seed phrase

public/_locales/en/messages.json

@@ -577,7 +577,15 @@
     "message": "Inclusion of at least one special character, e.g., ! @ # ? ] - (optional, recommended)."
   },
   "mnemonicWordsAmountConstraint": {
-    "message": "12, 15, 18, 21 or 24 words in English"
+    "message": "Seed phrase must contain $number$ words",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "mnemonicWordsError": {
+    "message": "Make sure the words spelled correctly"
   },
   "seedInputNumberOfWords": {
     "message": "My Seed phrase is $count$ words",
@@ -1406,7 +1414,7 @@
     "message": "The elliptical curve that the account will use."
   },
   "seedPhrase": {
-    "message": "Seed Phrase"
+    "message": "Seed phrase"
   },
   "pathForHDAccounts": {
     "message": "for HD acccounts. This is the thing you use to recover all your accounts from your seed phrase.",

public/_locales/en_GB/messages.json

@@ -466,7 +466,15 @@
     "message": "At least 1 uppercase letter"
   },
   "mnemonicWordsAmountConstraint": {
-    "message": "12, 15, 18, 21 or 24 words in English"
+    "message": "Seed phrase must contain $number$ words",
+    "placeholders": {
+      "number": {
+        "content": "$1"
+      }
+    }
+  },
+  "mnemonicWordsError": {
+    "message": "Make sure the words spelled correctly"
   },
   "mnemonicSpacingConstraint": {
     "message": "Each word separated with a single space"
@@ -1088,7 +1096,7 @@
     "message": "Derivation path"
   },
   "seedPhrase": {
-    "message": "Seed Phrase"
+    "message": "Seed phrase"
   },
   "pathForHDAccounts": {
     "message": "for HD acccounts. This is the thing you use to recover all your accounts from your seed phrase.",

src/app/atoms/ImportTabSwitcher.tsx

@@ -19,7 +19,7 @@ type ImportTabSwitcherProps = {
 
 const ImportTabSwitcher: React.FC<ImportTabSwitcherProps> = ({ className, tabs, activeTabSlug, urlPrefix }) => (
   <div className={classNames('w-full', className)} style={{ borderBottomWidth: 1, fontSize: 17 }}>
-    <div className={classNames('flex items-center justify-around')}>
+    <div className={classNames('flex items-center justify-between px-25')}>
       {tabs.map(({ slug, i18nKey }) => {
         const active = slug === activeTabSlug;
 

src/app/pages/ImportAccount/ByFundraiserForm.tsx

@@ -10,6 +10,7 @@ import { t } from 'lib/i18n';
 import { useTempleClient } from 'lib/temple/front';
 import { delay } from 'lib/utils';
 
+import { defaultNumberOfWords } from './constants';
 import { ImportAccountSelectors, ImportAccountFormType } from './selectors';
 
 interface ByFundraiserFormData {
@@ -27,6 +28,8 @@ export const ByFundraiserForm: FC = () => {
   const [seedPhrase, setSeedPhrase] = useState('');
   const [seedError, setSeedError] = useState('');
 
+  const [numberOfWords, setNumberOfWords] = useState(defaultNumberOfWords);
+
   const onSubmit = useCallback<(data: ByFundraiserFormData) => void>(
     async data => {
       if (formState.isSubmitting) return;
@@ -48,10 +51,10 @@ export const ByFundraiserForm: FC = () => {
           setError(err.message);
         }
       } else if (seedError === '') {
-        setSeedError(t('mnemonicWordsAmountConstraint'));
+        setSeedError(t('mnemonicWordsAmountConstraint', [numberOfWords]) as string);
       }
     },
-    [seedPhrase, importFundraiserAccount, formState.isSubmitting, setError, seedError, formAnalytics]
+    [seedPhrase, importFundraiserAccount, formState.isSubmitting, setError, seedError, formAnalytics, numberOfWords]
   );
 
   const resetSeedPhrase = useCallback(() => void setSeedPhrase(''), []);
@@ -90,6 +93,8 @@ export const ByFundraiserForm: FC = () => {
         setSeedError={setSeedError}
         onChange={setSeedPhrase}
         reset={resetSeedPhrase}
+        numberOfWords={numberOfWords}
+        setNumberOfWords={setNumberOfWords}
         testID={ImportAccountSelectors.fundraiserSeedPhraseInput}
       />
 

src/app/pages/ImportAccount/ByMnemonicForm.tsx

@@ -12,6 +12,7 @@ import { TID, T, t } from 'lib/i18n';
 import { useTempleClient, validateDerivationPath } from 'lib/temple/front';
 import { delay } from 'lib/utils';
 
+import { defaultNumberOfWords } from './constants';
 import { ImportAccountSelectors, ImportAccountFormType } from './selectors';
 
 interface DerivationPath {
@@ -43,6 +44,8 @@ export const ByMnemonicForm: FC = () => {
   const [seedPhrase, setSeedPhrase] = useState('');
   const [seedError, setSeedError] = useState('');
 
+  const [numberOfWords, setNumberOfWords] = useState(defaultNumberOfWords);
+
   const { register, handleSubmit, errors, formState, reset } = useForm<ByMnemonicFormData>({
     defaultValues: {
       customDerivationPath: DEFAULT_DERIVATION_PATH,
@@ -78,10 +81,19 @@ export const ByMnemonicForm: FC = () => {
           setError(err.message);
         }
       } else if (seedError === '') {
-        setSeedError(t('mnemonicWordsAmountConstraint'));
+        setSeedError(t('mnemonicWordsAmountConstraint', [numberOfWords]) as string);
       }
     },
-    [seedPhrase, seedError, formState.isSubmitting, setError, importMnemonicAccount, derivationPath, formAnalytics]
+    [
+      seedPhrase,
+      seedError,
+      formState.isSubmitting,
+      setError,
+      importMnemonicAccount,
+      derivationPath,
+      formAnalytics,
+      numberOfWords
+    ]
   );
 
   return (
@@ -97,6 +109,8 @@ export const ByMnemonicForm: FC = () => {
           onChange={setSeedPhrase}
           reset={reset}
           testID={ImportAccountSelectors.mnemonicWordInput}
+          numberOfWords={numberOfWords}
+          setNumberOfWords={setNumberOfWords}
         />
       </div>