Add "processing" to add hot signer flow

app/dash/Accounts/Add/Components/index.js

@@ -165,7 +165,13 @@ export function AddHotAccount({
   const steps = [
     firstFlowStep,
     <CreatePassword key={1} onCreate={onCreate} autofocus={viewIndex === 1} />,
-    <ConfirmPassword key={2} password={password} onConfirm={onConfirm} autofocus={viewIndex === 2} />,
+    <ConfirmPassword
+      key={2}
+      password={password}
+      onConfirm={onConfirm}
+      autofocus={viewIndex === 2}
+      lastStep={true}
+    />,
     <Error key={3} error={error} />
   ]
 

app/dash/Accounts/Add/style/index.styl

@@ -277,9 +277,15 @@
     font-size 12px
     color var(--moon)
     text-align center
+
+  .addAccountItemOptionProcessing
+    height 34px
+    padding 0px 20px
+    margin-top 12px
+    font-size 12px
+    text-align center
 
   .addAccountItemOptionSubmit
-    background var(--ghostB)
     height 32px
     border-radius 16px
     padding 0px 40px

resources/Components/Password/index.js

@@ -6,21 +6,36 @@ import { debounce } from '../../utils'
 
 const NO_PASSWORD_ENTERED = 'Enter password'
 
-export const PasswordInput = ({ getError: getInputError, next, title, buttonText, autofocus }) => {
+export const PasswordInput = ({
+  getError: getInputError,
+  next,
+  title,
+  buttonText,
+  autofocus,
+  lastStep = false
+}) => {
   const [error, setError] = useState(NO_PASSWORD_ENTERED)
   const inputRef = useFocusableRef(autofocus)
   const [disabled, setDisabled] = useState(false)
+  const [processing, setProcessing] = useState(false)
 
   const resetError = () => setError(NO_PASSWORD_ENTERED)
 
   const clear = () => {
-    resetError()
     inputRef.current && (inputRef.current.value = '')
   }
 
   const handleSubmit = () => {
     next(inputRef.current.value)
-    setTimeout(clear, 1_000)
+    if (lastStep) {
+      setProcessing(true)
+      clear()
+    } else {
+      setTimeout(() => {
+        resetError()
+        clear()
+      }, 1_000)
+    }
   }
 
   const getError = () =>
@@ -60,6 +75,10 @@ export const PasswordInput = ({ getError: getInputError, next, title, buttonText
         <div role='button' className='addAccountItemOptionError'>
           {error}
         </div>
+      ) : processing ? (
+        <div role='button' className='addAccountItemOptionProcessing'>
+          Processing...
+        </div>
       ) : (
         <div role='button' className='addAccountItemOptionSubmit' onClick={() => !disabled && handleSubmit()}>
           {buttonText}
@@ -92,7 +111,7 @@ export const CreatePassword = ({ onCreate, autofocus }) => {
   )
 }
 
-export const ConfirmPassword = ({ password, onConfirm, autofocus }) => {
+export const ConfirmPassword = ({ password, onConfirm, autofocus, lastStep }) => {
   const getError = (confirmedPassword) => {
     if (password !== confirmedPassword) return 'PASSWORDS DO NOT MATCH'
   }
@@ -104,6 +123,7 @@ export const ConfirmPassword = ({ password, onConfirm, autofocus }) => {
       title='Confirm Password'
       buttonText='Create'
       autofocus={autofocus}
+      lastStep={lastStep}
     />
   )
 }