feat(neuron-ui): add loading effects on creating/import wallets

Author: Keith-CY

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

@@ -29,6 +29,7 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
     settings: { wallets },
   } = props
   const [fields, setFields] = useState(defaultFields)
+  const [loading, setLoading] = useState(false)
   const goBack = useGoBack(history)
 
   useEffect(() => {
@@ -66,12 +67,18 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
   }, [fields])
 
   const onSubmit = useCallback(() => {
-    importWalletWithKeystore({
-      name: fields.name || '',
-      keystorePath: fields.path,
-      password: fields.password,
-    })(dispatch, history)
-  }, [fields.name, fields.password, fields.path, history, dispatch])
+    if (loading) {
+      return
+    }
+    setLoading(true)
+    setTimeout(() => {
+      importWalletWithKeystore({
+        name: fields.name || '',
+        keystorePath: fields.path,
+        password: fields.password,
+      })(dispatch, history).finally(() => setLoading(false))
+    }, 200)
+  }, [fields.name, fields.password, fields.path, history, dispatch, loading])
 
   return (
     <Stack verticalFill verticalAlign="center" tokens={{ childrenGap: 15 }}>
@@ -117,7 +124,10 @@ const ImportKeystore = (props: React.PropsWithoutRef<StateWithDispatch & RouteCo
       </Stack>
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
         <DefaultButton onClick={goBack}>{t('import-keystore.button.back')}</DefaultButton>
-        <PrimaryButton disabled={!(fields.name && fields.path && fields.password && !isNameUsed)} onClick={onSubmit}>
+        <PrimaryButton
+          disabled={loading || !(fields.name && fields.path && fields.password && !isNameUsed)}
+          onClick={onSubmit}
+        >
           {t('import-keystore.button.submit')}
         </PrimaryButton>
       </Stack>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useState, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   Stack,
@@ -224,9 +224,13 @@ const Submission = ({
 }: WizardElementProps<{ type: string }>) => {
   const { name, password, confirmPassword, imported } = state
   const [t] = useTranslation()
+  const [loading, setLoading] = useState(false)
   const message = 'wizard.set-wallet-name-and-password'
 
   useEffect(() => {
+    if (loading) {
+      return
+    }
     dispatch({
       type: 'name',
       payload: generateWalletName(wallets, wallets.length + 1, t),
@@ -239,7 +243,7 @@ const Submission = ({
       type: 'confirmPassword',
       payload: '',
     })
-  }, [dispatch, wallets, t])
+  }, [loading, dispatch, wallets, t])
 
   const onChange = useCallback(
     (e: any, value?: string) => {
@@ -258,22 +262,28 @@ const Submission = ({
   )
 
   const onNext = useCallback(() => {
+    if (loading) {
+      return
+    }
     const p = {
       name,
       password,
       mnemonic: imported,
     }
-    if (type === MnemonicAction.Create) {
-      createWalletWithMnemonic(p)(dispatch, history)
-    } else {
-      importWalletWithMnemonic(p)(dispatch, history)
-    }
-  }, [type, name, password, imported, history, dispatch])
+    setLoading(true)
+    setTimeout(() => {
+      if (type === MnemonicAction.Create) {
+        createWalletWithMnemonic(p)(dispatch, history).finally(() => setLoading(false))
+      } else {
+        importWalletWithMnemonic(p)(dispatch, history).finally(() => setLoading(false))
+      }
+    }, 0)
+  }, [type, name, password, imported, history, dispatch, loading])
 
   const isNameUnused = useMemo(() => name && !wallets.find(w => w.name === name), [name, wallets])
   const isPwdComplex = useMemo(() => verifyPasswordComplexity(password) === true, [password])
   const isPwdSame = useMemo(() => password && password === confirmPassword, [password, confirmPassword])
-  const disableNext = !(isNameUnused && isPwdComplex && isPwdSame)
+  const disableNext = loading || !(isNameUnused && isPwdComplex && isPwdSame)
 
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts

@@ -45,7 +45,7 @@ export const createWalletWithMnemonic = (params: Controller.ImportMnemonicParams
   _dispatch: StateDispatch,
   history: any
 ) => {
-  createWallet(params).then(res => {
+  return createWallet(params).then(res => {
     if (res.status === 1) {
       history.push(Routes.Overview)
     } else if (res.status > 0) {
@@ -63,7 +63,7 @@ export const importWalletWithMnemonic = (params: Controller.ImportMnemonicParams
   _dispatch: StateDispatch,
   history: any
 ) => {
-  importMnemonic(params).then(res => {
+  return importMnemonic(params).then(res => {
     if (res.status === 1) {
       history.push(Routes.Overview)
     } else if (res.status > 0) {
@@ -81,7 +81,7 @@ export const importWalletWithKeystore = (params: Controller.ImportKeystoreParams
   _dispatch: StateDispatch,
   history: any
 ) => {
-  importKeystore(params).then(res => {
+  return importKeystore(params).then(res => {
     if (res.status === 1) {
       history.push(Routes.Overview)
     } else if (res.status > 0) {