1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js

104 lines
3.1 KiB
JavaScript
Raw Normal View History

import React, { useState, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
import { debounce } from 'lodash';
import PropTypes from 'prop-types';
import Box from '../../../components/ui/box';
import Button from '../../../components/ui/button';
import Typography from '../../../components/ui/typography';
import {
TEXT_ALIGN,
TYPOGRAPHY,
JUSTIFY_CONTENT,
FONT_WEIGHT,
} from '../../../helpers/constants/design-system';
import {
ThreeStepProgressBar,
threeStepStages,
} from '../../../components/app/step-progress-bar';
import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
import { useI18nContext } from '../../../hooks/useI18nContext';
import RecoveryPhraseChips from './recovery-phrase-chips';
export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
const history = useHistory();
const t = useI18nContext();
const splitSecretRecoveryPhrase = secretRecoveryPhrase.split(' ');
const indicesToCheck = [2, 3, 7];
const [matching, setMatching] = useState(false);
// Removes seed phrase words from chips corresponding to the
// indicesToCheck so that user has to complete the phrase and confirm
// they have saved it.
const initializePhraseElements = () => {
const phraseElements = { ...splitSecretRecoveryPhrase };
indicesToCheck.forEach((i) => {
phraseElements[i] = '';
});
return phraseElements;
};
const [phraseElements, setPhraseElements] = useState(
initializePhraseElements(),
);
const validate = useMemo(
() =>
debounce((elements) => {
setMatching(Object.values(elements).join(' ') === secretRecoveryPhrase);
}, 500),
[setMatching, secretRecoveryPhrase],
);
const handleSetPhraseElements = (values) => {
setPhraseElements(values);
validate(values);
};
return (
<div>
<ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_CONFIRM} />
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}
textAlign={TEXT_ALIGN.CENTER}
marginBottom={4}
>
<Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
{t('seedPhraseConfirm')}
</Typography>
</Box>
<Box
justifyContent={JUSTIFY_CONTENT.CENTER}
textAlign={TEXT_ALIGN.CENTER}
marginBottom={4}
>
<Typography variant={TYPOGRAPHY.H4}>
{t('seedPhraseEnterMissingWords')}
</Typography>
</Box>
<RecoveryPhraseChips
secretRecoveryPhrase={splitSecretRecoveryPhrase}
confirmPhase
setInputValue={handleSetPhraseElements}
inputValue={phraseElements}
indicesToCheck={indicesToCheck}
/>
<div className="recovery-phrase__footer">
<Button
data-testid="recovery-phrase-confirm"
type="primary"
className="recovery-phrase__footer--button"
onClick={() => {
history.push(ONBOARDING_COMPLETION_ROUTE);
}}
disabled={!matching}
>
{t('confirm')}
</Button>
</div>
</div>
);
}
ConfirmRecoveryPhrase.propTypes = {
secretRecoveryPhrase: PropTypes.string,
};