diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx index 7cd80f040..eb550f2dd 100644 --- a/ts/components/registration/stages/RestoreAccount.tsx +++ b/ts/components/registration/stages/RestoreAccount.tsx @@ -20,6 +20,8 @@ import { OnboardContainer, OnboardDescription, OnboardHeading } from '../compone import { BackButtonWithininContainer } from '../components/BackButton'; import { sanitizeDisplayNameOrToast } from '../utils'; +let interval: NodeJS.Timeout; + export const RestoreAccount = () => { const step = useOnboardAccountRestorationStep(); @@ -33,18 +35,7 @@ export const RestoreAccount = () => { const dispatch = useDispatch(); - // Seed is mandatory no matter which mode - const seedOK = !!recoveryPhrase && !recoveryPhraseError; - const displayNameOK = !!displayName && !displayNameError; - - const activateContinueButton = - seedOK && - !( - step === - (AccountRestoration.Loading || AccountRestoration.Finishing || AccountRestoration.Finished) - ); - - const recoverWithoutDisplayName = async () => { + const recoverAndFetchDisplayName = async () => { setProgress(0); dispatch(setAccountRestorationStep(AccountRestoration.Loading)); try { @@ -57,8 +48,7 @@ export const RestoreAccount = () => { } catch (e) { if (e instanceof NotFoundError) { window.log.debug( - `WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually error ${e.message || - e}` + `WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually. Error: ${e}` ); dispatch(setAccountRestorationStep(AccountRestoration.DisplayName)); } else { @@ -67,12 +57,12 @@ export const RestoreAccount = () => { } }; - const recoverWithDisplayName = async () => { - if (!displayNameOK) { + const recoverAndEnterDisplayName = async () => { + if (!(!!displayName && !displayNameError)) { return; } - void signInWithNewDisplayName({ + await signInWithNewDisplayName({ displayName, userRecoveryPhrase: recoveryPhrase, }); @@ -81,8 +71,6 @@ export const RestoreAccount = () => { }; useEffect(() => { - let interval: NodeJS.Timeout; - if (step === AccountRestoration.Loading) { interval = setInterval(() => { if (progress < 100) { @@ -96,7 +84,7 @@ export const RestoreAccount = () => { clearInterval(interval); // if we didn't get the display name in time, we need to enter it manually window.log.debug( - `WIP: [continueYourSession] AccountRestoration.Loading We didn't get the display name in time, we need to enter it manually` + `WIP: [continueYourSession] AccountRestoration.Loading We didn't get the display name in time, so we need to enter it manually` ); dispatch(setAccountRestorationStep(AccountRestoration.DisplayName)); } @@ -128,7 +116,7 @@ export const RestoreAccount = () => { ); dispatch(setAccountRestorationStep(AccountRestoration.Complete)); } else { - dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword)); + dispatch(setAccountRestorationStep(AccountRestoration.DisplayName)); window.log.debug( `WIP: [continueYourSession] AccountRestoration.DisplayName failed to fetch display name so we need to enter it manually` ); @@ -137,6 +125,7 @@ export const RestoreAccount = () => { } if (step === AccountRestoration.Complete) { + clearInterval(interval); if (!isEmpty(displayName)) { window.log.debug( `WIP: [continueYourSession] AccountRestoration.Complete opening inbox for ${displayName}` @@ -156,6 +145,7 @@ export const RestoreAccount = () => { container={true} width="100%" flexDirection="column" + justifyContent="flex-start" alignItems="flex-start" margin={'0 0 0 8px'} > @@ -182,7 +172,7 @@ export const RestoreAccount = () => { setRecoveryPhrase(seed); setRecoveryPhraseError(!seed ? window.i18n('recoveryPhraseEmpty') : undefined); }} - onEnterPressed={recoverWithoutDisplayName} + onEnterPressed={recoverAndFetchDisplayName} error={recoveryPhraseError} enableShowHide={true} inputDataTestId="recovery-phrase-input" @@ -190,51 +180,57 @@ export const RestoreAccount = () => { ) : ( - <> - {/* TODO this doesn't load for some reason */} - - {window.i18n('displayNamePick')} - - {window.i18n('displayNameDescription')} - - { - sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); - }} - onEnterPressed={recoverWithDisplayName} - error={displayNameError} - inputDataTestId="display-name-input" - /> - - - - + + {window.i18n('displayNamePick')} + + {window.i18n('displayNameDescription')} + + { + sanitizeDisplayNameOrToast(name, setDisplayName, setDisplayNameError); + }} + onEnterPressed={recoverAndEnterDisplayName} + error={displayNameError} + inputDataTestId="display-name-input" + /> + + + )} ) : (