WalletSetupMnemonicIntroStep,
+
WalletSetupNamePasswordStep,
WalletSetupRecoveryPhraseLengthStep,
import { useAnalyticsContext } from '@providers';
import { ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY } from '@providers/AnalyticsProvider/matomo/config';
import * as process from 'process';
-
import { SendOnboardingAnalyticsEvent } from '../types';
+
import { SendOnboardingAnalyticsEvent, SetupType } from '../types';
+
const isCombinedPasswordNameStepEnabled = process.env.USE_COMBINED_PASSWORD_NAME_STEP_COMPONENT === 'true';
+
const walletSetupWizardForABTest = {
+
[WalletSetupSteps.PreMnemonic]: { ...walletSetupWizard['pre-mnemonic'], prev: WalletSetupSteps.Register },
+
[WalletSetupSteps.RecoveryPhraseLength]: {
+
...walletSetupWizard['recovery-phrase-length'],
+
prev: WalletSetupSteps.Register
+
[WalletSetupSteps.Mnemonic]: { ...walletSetupWizard.mnemonic, prev: WalletSetupSteps.Register }
const WalletSetupModeStep = React.lazy(() =>
import('@lace/core').then((module) => ({ default: module.WalletSetupModeStep }))
const { WalletSetup: Events } = AnalyticsEventNames;
export interface WalletSetupWizardProps {
-
setupType: 'create' | 'restore' | 'forgot_password';
sendAnalytics: SendOnboardingAnalyticsEvent;
initialStep?: WalletSetupSteps;
initialStep = WalletSetupSteps.Legal
}: WalletSetupWizardProps): React.ReactElement => {
const [currentStep, setCurrentStep] = useState<WalletSetupSteps>(
-
setupType === 'forgot_password' ? WalletSetupSteps.Password : initialStep
+
setupType === SetupType.FORGOT_PASSWORD ? WalletSetupSteps.Password : initialStep
const [walletName, setWalletName] = useState(getValueFromLocalStorage<ILocalStorage, 'wallet'>('wallet')?.name);
const [password, setPassword] = useState('');
-
['restore', 'forgot_password'].includes(setupType)
+
[SetupType.RESTORE, SetupType.FORGOT_PASSWORD].includes(setupType)
? () => Array.from({ length: mnemonicLength }).map(() => '')
: util.generateMnemonicWords()
}, [currentStep, setCurrentStep]);
-
const prevStep = walletSetupWizard[currentStep].prev;
+
const prevStep = isCombinedPasswordNameStepEnabled
+
? walletSetupWizardForABTest[currentStep].prev
+
: walletSetupWizard[currentStep].prev;
setCurrentStep(prevStep);
setDoesUserAllowAnalytics(
isAnalyticsAccepted ? EnhancedAnalyticsOptInStatus.OptedIn : EnhancedAnalyticsOptInStatus.OptedOut
-
if (setupType === 'forgot_password') {
+
if (setupType === SetupType.FORGOT_PASSWORD) {
deleteFromLocalStorage('isForgotPasswordFlow');
+
const createFlowPasswordNextStep = () => {
+
setupType === SetupType.CREATE
+
? skipTo(WalletSetupSteps.PreMnemonic)
+
: useDifferentMnemonicLengths
+
? skipTo(WalletSetupSteps.RecoveryPhraseLength)
+
: skipTo(WalletSetupSteps.Mnemonic);
+
const handleNamePasswordStepNextButtonClick = (result: { password: string; walletName: string }) => {
+
setPassword(result.password);
+
setWalletName(result.walletName);
+
sendAnalytics(Events.WALLET_PASSWORD_NEXT, postHogOnboardingActions[setupType]?.WALLET_NAME_PASSWORD_NEXT_CLICK);
+
createFlowPasswordNextStep();
+
const handlePasswordStepNextButtonClick = (result: { password: string }) => {
+
sendAnalytics(Events.WALLET_PASSWORD_NEXT, postHogOnboardingActions[setupType]?.WALLET_PASSWORD_NEXT_CLICK);
+
setPassword(result.password);
+
createFlowPasswordNextStep();
+
const handleRegisterStepNextButtonClick = (result: { walletName: string }) => {
+
sendAnalytics(Events.WALLET_NAME_NEXT, postHogOnboardingActions[setupType]?.WALLET_NAME_NEXT_CLICK);
+
setWalletName(result.walletName);
if (password && currentStep === WalletSetupSteps.Create && !walletIsCreating) {
setWalletIsCreating(true);
// eslint-disable-next-line sonarjs/cognitive-complexity
const renderedMnemonicStep = () => {
-
if (['restore', 'forgot_password'].includes(setupType)) {
+
if ([SetupType.RESTORE, SetupType.FORGOT_PASSWORD].includes(setupType)) {
const isMnemonicSubmitEnabled = util.validateMnemonic(util.joinMnemonicWords(mnemonic));
<WalletSetupModeStep onBack={moveBack} onNext={moveForward} translations={walletSetupModeStepTranslations} />
-
{currentStep === WalletSetupSteps.Register && (
-
<WalletSetupRegisterStep
-
sendAnalytics(Events.WALLET_NAME_NEXT, postHogOnboardingActions[setupType]?.WALLET_NAME_NEXT_CLICK);
-
setWalletName(result.walletName);
-
initialWalletName={walletName}
-
translations={walletSetupRegisterStepTranslations}
-
{currentStep === WalletSetupSteps.Password && (
-
<WalletSetupPasswordStep
-
onBack={setupType !== 'forgot_password' ? moveBack : undefined}
-
sendAnalytics(Events.WALLET_PASSWORD_NEXT, postHogOnboardingActions[setupType]?.WALLET_PASSWORD_NEXT_CLICK);
-
setPassword(result.password);
-
? skipTo(WalletSetupSteps.PreMnemonic)
-
: useDifferentMnemonicLengths
-
? skipTo(WalletSetupSteps.RecoveryPhraseLength)
-
: skipTo(WalletSetupSteps.Mnemonic);
-
translations={walletSetupPasswordStepTranslations}
-
getFeedbackTranslations={passwordFeedbackTranslation}
+
{isCombinedPasswordNameStepEnabled ? (
+
{currentStep === WalletSetupSteps.Register && (
+
<WalletSetupNamePasswordStep onBack={moveBack} onNext={handleNamePasswordStepNextButtonClick} />
+
{currentStep === WalletSetupSteps.Register && (
+
<WalletSetupRegisterStep
+
onNext={handleRegisterStepNextButtonClick}
+
initialWalletName={walletName}
+
translations={walletSetupRegisterStepTranslations}
+
{currentStep === WalletSetupSteps.Password && (
+
<WalletSetupPasswordStep
+
onBack={setupType !== SetupType.FORGOT_PASSWORD ? moveBack : undefined}
+
onNext={handlePasswordStepNextButtonClick}
+
translations={walletSetupPasswordStepTranslations}
+
getFeedbackTranslations={passwordFeedbackTranslation}
{currentStep === WalletSetupSteps.RecoveryPhraseLength && (
<WalletSetupRecoveryPhraseLengthStep
translations={walletSetupFinalStepTranslations}
-
{setupType === 'create' && isResetMnemonicModalOpen && (
+
{setupType === SetupType.CREATE && isResetMnemonicModalOpen && (
header={t('browserView.walletSetup.mnemonicResetModal.header')}
content={t('browserView.walletSetup.mnemonicResetModal.content')}