feat: Support import hardware wallet 24-bit seed (#3275)

Author: yanguoyu

packages/neuron-ui/src/components/Receive/index.tsx

@@ -90,8 +90,9 @@ export const AddressQrCodeWithCopyZone = ({
 const Receive = ({ onClose, address }: { onClose?: () => void; address?: string }) => {
   const [t] = useTranslation()
   const { wallet } = useGlobalState()
-  const { addresses } = wallet
+  const { addresses, isHD } = wallet
   const isSingleAddress = addresses.length === 1
+  const isHardwareWallet = !isHD && isSingleAddress
 
   const accountAddress = useMemo(() => {
     if (isSingleAddress) {
@@ -128,7 +129,7 @@ const Receive = ({ onClose, address }: { onClose?: () => void; address?: string
           onClick={() => setIsInShortFormat(is => !is)}
         />
 
-        {isSingleAddress && <VerifyHardwareAddress address={accountAddress} wallet={wallet} onClose={onClose} />}
+        {isHardwareWallet && <VerifyHardwareAddress address={accountAddress} wallet={wallet} onClose={onClose} />}
       </div>
     </Dialog>
   )

packages/neuron-ui/src/components/WalletWizard/hooks.ts

@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 
 const MNEMONIC_SENTENCE_WORDS = 12
 
-export const useInputWords = () => {
-  const [inputsWords, setInputsWords] = useState<string[]>(new Array(MNEMONIC_SENTENCE_WORDS).fill(''))
+export const useInputWords = (wordsCount: number = MNEMONIC_SENTENCE_WORDS) => {
+  const [inputsWords, setInputsWords] = useState<string[]>(new Array(wordsCount).fill(''))
   const onChangeInput = useCallback(
     (
       e:
@@ -37,6 +37,9 @@ export const useInputWords = () => {
     },
     [setInputsWords]
   )
+  useEffect(() => {
+    setInputsWords(new Array(wordsCount).fill(''))
+  }, [wordsCount])
   return {
     inputsWords,
     onChangeInput,

packages/neuron-ui/src/components/WalletWizard/index.tsx

@@ -76,6 +76,7 @@ const initState: WithWizardState = {
   password: '',
   confirmPassword: '',
   name: '',
+  isHardware: false,
 }
 
 const submissionInputs = [
@@ -182,6 +183,8 @@ const Welcome = ({ rootPath = '/wizard/', wallets = [], dispatch }: WizardElemen
 
 Welcome.displayName = 'Welcome'
 
+const LEDGER_WORDS_COUNT = 24
+
 const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: WizardElementProps) => {
   const { generated, imported } = state
   const navigate = useNavigate()
@@ -193,8 +196,9 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard
     [MnemonicAction.Verify]: 'wizard.replenish-your-seed',
     [MnemonicAction.Import]: 'wizard.input-your-seed',
   }[type]
-  const { inputsWords, onChangeInput, setInputsWords } = useInputWords()
   const [searchParams] = useSearchParams()
+  const isHardware = searchParams.get('isHardware') === 'true'
+  const { inputsWords, onChangeInput, setInputsWords } = useInputWords(isHardware ? LEDGER_WORDS_COUNT : undefined)
   const disableNext =
     (type === MnemonicAction.Import && inputsWords.some(v => !v)) ||
     (type === MnemonicAction.Verify && generated !== inputsWords.join(' '))
@@ -228,6 +232,14 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard
       })
     }
   }, [dispatch, type, navigate, setBlankIndexes])
+  useEffect(() => {
+    if (isHardware) {
+      dispatch({
+        type: 'isHardware',
+        payload: true,
+      })
+    }
+  }, [dispatch, isHardware])
 
   const globalDispatch = useDispatch()
 
@@ -317,6 +329,7 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard/', dispatch }: Wizard
         inputsWords={inputsWords}
         onChangeInputWord={onChangeInput}
         blankIndexes={MnemonicAction.Import ? undefined : blankIndexes}
+        wordsCount={isHardware ? LEDGER_WORDS_COUNT : undefined}
       />
       {type === MnemonicAction.Import && <div className={styles.tips}>{t('wizard.input-seed-first-empty-space')}</div>}
       <div className={styles.actions}>
@@ -337,7 +350,7 @@ export const getAlertStatus = (fieldInit: boolean, success: boolean) => {
 }
 
 const Submission = ({ state = initState, wallets = [], dispatch }: WizardElementProps) => {
-  const { name, password, confirmPassword, imported } = state
+  const { name, password, confirmPassword, imported, isHardware } = state
   const navigate = useNavigate()
   const { type = MnemonicAction.Create } = useParams<{ type: MnemonicAction }>()
   const [t] = useTranslation()
@@ -396,6 +409,7 @@ const Submission = ({ state = initState, wallets = [], dispatch }: WizardElement
         name,
         password,
         mnemonic: imported,
+        isHardware,
       }
       openDialog()
       setTimeout(() => {

packages/neuron-ui/src/components/withWizard/index.tsx

@@ -7,8 +7,14 @@ export interface Element {
   comp: React.FC<any>
 }
 
-export interface WithWizardState {
-  [key: string]: string
+export type WithWizardState = {
+  generated: string
+  imported: string
+  password: string
+  confirmPassword: string
+  name: string
+  isHardware: boolean
+  [propName: string]: any
 }
 
 export interface WizardProps {
@@ -27,7 +33,7 @@ export interface WizardElementProps {
 }
 
 const reducer = (
-  state: { [key: string]: string },
+  state: WithWizardState,
   {
     type,
     payload,

packages/neuron-ui/src/types/Controller/index.d.ts

@@ -27,6 +27,7 @@ declare namespace Controller {
     name: string
     mnemonic: string
     password: string
+    isHardware?: boolean
   }
 
   interface ImportKeystoreParams {

packages/neuron-ui/src/widgets/MnemonicInput/index.tsx

@@ -9,6 +9,7 @@ const MnemonicInput = ({
   inputsWords,
   onChangeInputWord,
   blankIndexes,
+  wordsCount,
 }: {
   disabled?: boolean
   words: string
@@ -23,10 +24,13 @@ const MnemonicInput = ({
           }
         }
   ) => void
-
+  wordsCount?: number
   blankIndexes?: number[]
 }) => {
-  const wordList = useMemo(() => Object.assign(new Array(12).fill(''), words?.split(' ')), [words])
+  const wordList = useMemo(
+    () => Object.assign(new Array(wordsCount ?? 12).fill(''), words?.split(' ')),
+    [words, wordsCount]
+  )
   const [focusIndex, setFocusIndex] = useState(-1)
   const mounted = useRef(true)
   const root = useRef<HTMLDivElement>(null)

packages/neuron-wallet/src/controllers/api.ts

@@ -368,9 +368,12 @@ export default class ApiController {
       return this.#walletsController.activate(id)
     })
 
-    handle('import-mnemonic', async (_, params: { name: string; password: string; mnemonic: string }) => {
-      return this.#walletsController.importMnemonic(params)
-    })
+    handle(
+      'import-mnemonic',
+      async (_, params: { name: string; password: string; mnemonic: string; isHardware?: boolean }) => {
+        return this.#walletsController.importMnemonic(params)
+      }
+    )
 
     handle('import-keystore', async (_, params: { name: string; password: string; keystorePath: string }) => {
       return this.#walletsController.importKeystore(params)

packages/neuron-wallet/src/controllers/app/menu.ts

@@ -231,6 +231,13 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
               importHardware(URL.ImportHardware)
             },
           },
+          {
+            id: 'import-hardware-seed',
+            label: t('application-menu.wallet.import-hardware-mnemonic'),
+            click: () => {
+              importHardware(`${URL.ImportMnemonic}?isHardware=true`)
+            },
+          },
         ],
       },
       separator,

packages/neuron-wallet/src/controllers/wallets.ts

@@ -70,12 +70,14 @@ export default class WalletsController {
     name,
     password,
     mnemonic,
+    isHardware,
   }: {
     name: string
     password: string
     mnemonic: string
+    isHardware?: boolean
   }): Promise<Controller.Response<Omit<WalletProperties, 'extendedKey'>>> {
-    return await this.createByMnemonic({ name, password, mnemonic, isImporting: true })
+    return await this.createByMnemonic({ name, password, mnemonic, isImporting: true, isHardware })
   }
 
   public async create({
@@ -95,11 +97,13 @@ export default class WalletsController {
     password,
     mnemonic,
     isImporting,
+    isHardware,
   }: {
     name: string
     password: string
     mnemonic: string
     isImporting: boolean
+    isHardware?: boolean
   }): Promise<Controller.Response<Omit<WalletProperties, 'extendedKey'>>> {
     if (!validateMnemonic(mnemonic)) {
       throw new InvalidMnemonic()
@@ -139,6 +143,7 @@ export default class WalletsController {
       extendedKey: accountExtendedPublicKey.serialize(),
       keystore,
       startBlockNumber: startBlockNumber,
+      hardwareFromSeed: isHardware,
     })
 
     wallet.checkAndGenerateAddresses(isImporting)

packages/neuron-wallet/src/locales/en.ts

@@ -25,6 +25,7 @@ export default {
         'import-keystore': 'Import from Keystore',
         'import-xpubkey': 'Import Extended Public Key',
         'import-hardware': 'Import Hardware Wallet',
+        'import-hardware-mnemonic': 'Import Hardware Wallet Seed',
       },
       edit: {
         label: 'Edit',