feat(neuron-ui): use the same naming strategy as importing mnemonic words

Author: Keith-CY

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

@@ -1,11 +1,12 @@
-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo, useEffect } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { Stack, DefaultButton, PrimaryButton, TextField } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { showOpenDialog } from 'services/remote'
 import { importWalletWithKeystore } from 'states/stateProvider/actionCreators'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { useGoBack } from 'utils/hooks'
+import generateWalletName from 'utils/generateWalletName'
 
 const defaultFields = {
   path: '',
@@ -23,6 +24,16 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
   const [fields, setFields] = useState(defaultFields)
   const goBack = useGoBack(history)
 
+  useEffect(() => {
+    if (fields.name === '') {
+      const name = generateWalletName(wallets, wallets.length + 1, t)
+      setFields({
+        ...fields,
+        name,
+      })
+    }
+  }, [wallets, fields, setFields, t])
+
   const exsitingNames = useMemo(() => {
     return wallets.map(w => w.name)
   }, [wallets])
@@ -39,11 +50,9 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
           return
         }
         const filePath = filePaths[0]
-        const filename = filePath.split('/').pop() || 'Imported wallet'
         setFields({
           ...fields,
           path: filePath,
-          name: filename,
         })
       },
     })

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

@@ -19,6 +19,7 @@ import { createWalletWithMnemonic, importWalletWithMnemonic } from 'states/state
 import { Routes, MnemonicAction } from 'utils/const'
 import { buttonGrommetIconStyles } from 'utils/icons'
 import { verifyPasswordComplexity } from 'utils/validators'
+import generateWalletName from 'utils/generateWalletName'
 
 export enum WalletWizardPath {
   Welcome = '/welcome',
@@ -212,16 +213,9 @@ const Submission = ({
   const message = 'wizard.set-wallet-name-and-password'
 
   useEffect(() => {
-    const genName = (baseNum: number = 0): string => {
-      const walletName = t('wizard.wallet-suffix', { suffix: baseNum })
-      if (wallets.some(wallet => wallet.name === walletName)) {
-        return genName(baseNum + 1)
-      }
-      return walletName
-    }
     dispatch({
       type: 'name',
-      payload: genName(wallets.length + 1),
+      payload: generateWalletName(wallets, wallets.length + 1, t),
     })
     dispatch({
       type: 'password',

packages/neuron-ui/src/utils/generateWalletName.ts

@@ -0,0 +1,8 @@
+const generateWalletName = (wallets: State.WalletIdentity[], baseNum: number = 0, t: any): string => {
+  const walletName = t('wizard.wallet-suffix', { suffix: baseNum })
+  if (wallets.some(wallet => wallet.name === walletName)) {
+    return generateWalletName(wallets, baseNum + 1, t)
+  }
+  return walletName
+}
+export default generateWalletName