From c47598a9483358574fe6daea440e5447e82c8288 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 22 Nov 2024 14:31:23 +0800
Subject: [PATCH] fix: seed phrase input

---
 .../component/WordsMatrix/MnemonicsInputs.tsx | 33 +++++++++------
 .../views/NewUserImport/ImportSeedPhrase.tsx  | 41 +++++++++++++------
 2 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/ui/component/WordsMatrix/MnemonicsInputs.tsx b/src/ui/component/WordsMatrix/MnemonicsInputs.tsx
index 30592a3520e..bde8356ca20 100644
--- a/src/ui/component/WordsMatrix/MnemonicsInputs.tsx
+++ b/src/ui/component/WordsMatrix/MnemonicsInputs.tsx
@@ -71,11 +71,26 @@ const MatrixWrapper = styled.div.withConfig<{
       width: calc(calc(100% - 18px) / 3);
       border: 0.5px solid var(--r-neutral-line, #e0e5ec) !important;
       .mnemonics-input {
+        text-align: center;
         &:focus,
         &.ant-input-focused {
           box-shadow: none;
         }
       }
+
+      ${styid(NumberFlag)} {
+        top: 8px;
+        left: 8px;
+        color: var(--r-neutral-body, #3e495e);
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 400;
+      }
+    }
+    .matrix-word-item.invalid {
+      ${styid(NumberFlag)} {
+        color: var(--r-red-default, #e34935);
+      }
     }
   }
 
@@ -604,7 +619,7 @@ function MnemonicsInputs({
                   key={`word-input-${ver}-${word}-${idx}`}
                   className={clsx(
                     'mnemonics-input  pr-10',
-                    newUserImport ? 'pl-[30px]' : 'pl-[46px]',
+                    newUserImport ? 'pl-[10px]' : 'pl-[46px]',
                     isCurrentFocusing && 'ant-input-focused',
                     {
                       'opacity-50':
@@ -664,7 +679,7 @@ function MnemonicsInputs({
       {errMsgs?.[0] || invalidWords.length > 0 ? (
         <div
           className={
-            'ant-form-item-explain ant-form-item-explain-error mt-[12px] pt-[0] min-h-0 text-[14px]'
+            'ant-form-item-explain ant-form-item-explain-error text-r-red-default mt-[12px] pt-[0] min-h-0 text-[13px]'
           }
         >
           {invalidWords.length > 0 && (
@@ -692,27 +707,19 @@ const SLIP39MnemonicsInput = ({
   onTextChange: (text: string) => void;
   idx: number;
   error?: boolean;
-  onPaste?: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;
 }) => {
   const { t } = useTranslation();
   const [show, setShow] = useState(false);
 
   return (
     <div className="relative ">
-      <Input.TextArea
+      <Input
+        type={show ? 'text' : 'password'}
         key={`slip39-seed-phrase-${idx}`}
         autoComplete="off"
         autoCorrect="off"
         autoCapitalize="off"
-        // type="password"
-        autoSize
-        style={
-          !show
-            ? {
-                WebkitTextSecurity: 'disc',
-              }
-            : undefined
-        }
         onPaste={onPaste}
         className={clsx(
           'min-h-[100px] p-12 border-rabby-neutral-line bg-rabby-neutral-card-1 ',
diff --git a/src/ui/views/NewUserImport/ImportSeedPhrase.tsx b/src/ui/views/NewUserImport/ImportSeedPhrase.tsx
index a7a0ef9f61e..76004c5bf8f 100644
--- a/src/ui/views/NewUserImport/ImportSeedPhrase.tsx
+++ b/src/ui/views/NewUserImport/ImportSeedPhrase.tsx
@@ -9,6 +9,8 @@ import { getUiType, useWallet } from '@/ui/utils';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { useNewUserGuideStore } from './hooks/useNewUserGuideStore';
+import * as bip39 from '@scure/bip39';
+import { wordlist } from '@scure/bip39/wordlists/english';
 
 const FormItemWrapper = styled.div`
   .mnemonics-with-error,
@@ -115,13 +117,27 @@ export const ImportSeedPhrase = () => {
   );
 
   const [errMsgs, setErrMsgs] = React.useState<string[]>();
-  const [checkPass, setCheckPass] = React.useState(false);
 
   const disabledButton = React.useMemo(() => {
-    if (!checkPass) return true;
-    if (!isSlip39) return false;
+    if (!isSlip39) return;
     return secretShares.length < slip39GroupNumber;
-  }, [isSlip39, secretShares, slip39GroupNumber, checkPass]);
+  }, [isSlip39, secretShares, slip39GroupNumber]);
+
+  const validateMnemonic = React.useCallback(
+    async (mnemonics: string, skipSlip39?: boolean) => {
+      try {
+        if (skipSlip39 && isSlip39) return true;
+        if (!isSlip39) {
+          return bip39.validateMnemonic(mnemonics, wordlist);
+        }
+        const result = await wallet.validateMnemonic(mnemonics);
+        return result;
+      } catch (err) {
+        return false;
+      }
+    },
+    [isSlip39]
+  );
 
   const run = React.useCallback(
     async ({
@@ -133,6 +149,13 @@ export const ImportSeedPhrase = () => {
     }) => {
       try {
         await checkSubmitSlip39Mnemonics(mnemonics);
+
+        if (!(await validateMnemonic(mnemonics))) {
+          throw new Error(
+            t('page.newAddress.theSeedPhraseIsInvalidPleaseCheck')
+          );
+        }
+
         setStore({ seedPhrase: mnemonics, passphrase });
         history.push('/new-user/import/seed-phrase/set-password');
       } catch (err) {
@@ -148,7 +171,7 @@ export const ImportSeedPhrase = () => {
         ]);
       }
     },
-    [checkSubmitSlip39Mnemonics, setStore, form, t]
+    [validateMnemonic, checkSubmitSlip39Mnemonics, setStore, form, t]
   );
 
   return (
@@ -169,15 +192,9 @@ export const ImportSeedPhrase = () => {
         onValuesChange={async (states) => {
           setErrMsgs([]);
           setSlip39ErrorIndex(-1);
-          try {
-            const pass = await wallet.validateMnemonic(states.mnemonics);
-            setCheckPass(pass);
-          } catch (error) {
-            setCheckPass(false);
-          }
         }}
       >
-        <FormItemWrapper className="relative">
+        <FormItemWrapper className="relative mb-16">
           <Form.Item
             name="mnemonics"
             className={clsx(