1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Fixed issues in onboarding flow (#13826)

This commit is contained in:
filipsekulic 2022-03-10 17:33:53 +01:00 committed by GitHub
parent c196fa7688
commit c439953d94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 14 deletions

View File

@ -17,7 +17,6 @@ ul.two-steps {
font-size: 12px; font-size: 12px;
position: relative; position: relative;
text-align: center; text-align: center;
text-transform: uppercase;
color: #7d7d7d; color: #7d7d7d;
z-index: 2; z-index: 2;
} }
@ -84,7 +83,7 @@ ul.two-steps {
} }
} }
.progressbar li.active + li::after { .progressbar li.complete + li::after {
background-color: var(--primary-blue); background-color: var(--primary-blue);
z-index: -1; z-index: -1;

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { capitalize } from 'lodash';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box'; import Box from '../../ui/box';
import { BLOCK_SIZES } from '../../../helpers/constants/design-system'; import { BLOCK_SIZES } from '../../../helpers/constants/design-system';
@ -26,26 +27,26 @@ export function ThreeStepProgressBar({ stage }) {
<li <li
className={classnames({ className={classnames({
active: stage >= 1, active: stage >= 1,
complete: stage >= 1, complete: stage > 1,
})} })}
> >
{t('createPassword')} {capitalize(t('createPassword'))}
</li> </li>
<li <li
className={classnames({ className={classnames({
active: stage >= 2, active: stage >= 2,
complete: stage >= 3, complete: stage > 3,
})} })}
> >
{t('secureWallet')} {capitalize(t('secureWallet'))}
</li> </li>
<li <li
className={classnames({ className={classnames({
active: stage >= 4, active: stage >= 4,
complete: stage >= 5, complete: stage > 5,
})} })}
> >
{t('confirmRecoveryPhrase')} {capitalize(t('confirmRecoveryPhrase'))}
</li> </li>
</ul> </ul>
</Box> </Box>
@ -63,7 +64,7 @@ export function TwoStepProgressBar({ stage }) {
complete: stage > 1, complete: stage > 1,
})} })}
> >
{t('confirmRecoveryPhrase')} {capitalize(t('confirmRecoveryPhrase'))}
</li> </li>
<li <li
className={classnames('two-steps', { className={classnames('two-steps', {
@ -71,7 +72,7 @@ export function TwoStepProgressBar({ stage }) {
complete: stage > 2, complete: stage > 2,
})} })}
> >
{t('createPassword')} {capitalize(t('createPassword'))}
</li> </li>
</ul> </ul>
</Box> </Box>

View File

@ -0,0 +1,6 @@
const FIRST_TIME_FLOW_TYPES = {
IMPORT: 'import',
CREATE: 'create',
};
export { FIRST_TIME_FLOW_TYPES };

View File

@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import zxcvbn from 'zxcvbn'; import zxcvbn from 'zxcvbn';
import { useSelector } from 'react-redux';
import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../../components/ui/button'; import Button from '../../../components/ui/button';
@ -27,6 +28,8 @@ import {
twoStepStages, twoStepStages,
} from '../../../components/app/step-progress-bar'; } from '../../../components/app/step-progress-bar';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { getFirstTimeFlowType } from '../../../selectors';
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
export default function CreatePassword({ export default function CreatePassword({
createNewAccount, createNewAccount,
@ -43,6 +46,7 @@ export default function CreatePassword({
const [termsChecked, setTermsChecked] = useState(false); const [termsChecked, setTermsChecked] = useState(false);
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const history = useHistory(); const history = useHistory();
const firstTimeFlowType = useSelector(getFirstTimeFlowType);
const submitPasswordEvent = useNewMetricEvent({ const submitPasswordEvent = useNewMetricEvent({
event: 'Submit Password', event: 'Submit Password',
@ -126,7 +130,10 @@ export default function CreatePassword({
return; return;
} }
// If secretRecoveryPhrase is defined we are in import wallet flow // If secretRecoveryPhrase is defined we are in import wallet flow
if (secretRecoveryPhrase) { if (
secretRecoveryPhrase &&
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
) {
await importWithRecoveryPhrase(password, secretRecoveryPhrase); await importWithRecoveryPhrase(password, secretRecoveryPhrase);
history.push(ONBOARDING_COMPLETION_ROUTE); history.push(ONBOARDING_COMPLETION_ROUTE);
} else { } else {
@ -145,7 +152,8 @@ export default function CreatePassword({
return ( return (
<div className="create-password__wrapper"> <div className="create-password__wrapper">
{secretRecoveryPhrase ? ( {secretRecoveryPhrase &&
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT ? (
<TwoStepProgressBar stage={twoStepStages.PASSWORD_CREATE} /> <TwoStepProgressBar stage={twoStepStages.PASSWORD_CREATE} />
) : ( ) : (
<ThreeStepProgressBar stage={threeStepStages.PASSWORD_CREATE} /> <ThreeStepProgressBar stage={threeStepStages.PASSWORD_CREATE} />
@ -231,7 +239,8 @@ export default function CreatePassword({
</Box> </Box>
<Button <Button
data-testid={ data-testid={
secretRecoveryPhrase secretRecoveryPhrase &&
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
? 'create-password-import' ? 'create-password-import'
: 'create-password-wallet' : 'create-password-wallet'
} }
@ -240,7 +249,10 @@ export default function CreatePassword({
disabled={!isValid || !termsChecked} disabled={!isValid || !termsChecked}
onClick={handleCreate} onClick={handleCreate}
> >
{secretRecoveryPhrase ? t('importMyWallet') : t('createNewWallet')} {secretRecoveryPhrase &&
firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
? t('importMyWallet')
: t('createNewWallet')}
</Button> </Button>
</form> </form>
</Box> </Box>