From 6439a0e934c42d7a32b5444af8e924ddba5d72e5 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 15 Dec 2022 08:38:15 -0600 Subject: [PATCH] Onboarding: Set SeedPhraseBackedUp when appropriate (#16875) * Onboarding: Set SeedPhraseBackedUp when appropriate * Dispatch setSeedPhraseBackedUp * Fix test * Make call async * Fix test * Fix test * enhance test Co-authored-by: Alex --- .../recovery-phrase/confirm-recovery-phrase.js | 6 +++++- .../secure-your-wallet/secure-your-wallet.test.js | 15 ++++++++++++--- .../secure-your-wallet/skip-srp-backup-popover.js | 9 ++++++++- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js index ccd4ca2e4..2523e5da5 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js +++ b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js @@ -1,5 +1,6 @@ import React, { useState, useMemo } from 'react'; import { useHistory } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import Box from '../../../components/ui/box'; @@ -17,11 +18,13 @@ import { } from '../../../components/app/step-progress-bar'; import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes'; import { useI18nContext } from '../../../hooks/useI18nContext'; +import { setSeedPhraseBackedUp } from '../../../store/actions'; import RecoveryPhraseChips from './recovery-phrase-chips'; export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) { const history = useHistory(); const t = useI18nContext(); + const dispatch = useDispatch(); const splitSecretRecoveryPhrase = secretRecoveryPhrase.split(' '); const indicesToCheck = [2, 3, 7]; const [matching, setMatching] = useState(false); @@ -93,7 +96,8 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) { type="primary" large className="recovery-phrase__footer__confirm--button" - onClick={() => { + onClick={async () => { + await dispatch(setSeedPhraseBackedUp(true)); history.push(ONBOARDING_COMPLETION_ROUTE); }} disabled={!matching} diff --git a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.test.js b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.test.js index 1622f8069..cecbda1a0 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.test.js +++ b/ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.test.js @@ -1,9 +1,11 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import configureMockStore from 'redux-mock-store'; +import thunk from 'redux-thunk'; import reactRouterDom from 'react-router-dom'; import { renderWithProvider } from '../../../../test/lib/render-helpers'; import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes'; +import * as Actions from '../../../store/actions'; import SecureYourWallet from './secure-your-wallet'; describe('Secure Your Wallet Onboarding View', () => { @@ -28,7 +30,8 @@ describe('Secure Your Wallet Onboarding View', () => { }, }; - const store = configureMockStore()(mockStore); + const store = configureMockStore([thunk])(mockStore); + it('should show a popover asking the user if they want to skip account security if they click "Remind me later"', () => { const { queryAllByText, getByText } = renderWithProvider( , @@ -40,7 +43,11 @@ describe('Secure Your Wallet Onboarding View', () => { expect(queryAllByText('Skip account security?')).toHaveLength(1); }); - it('should not be able to click "skip" until "Skip Account Security" terms are agreed to', () => { + it('should not be able to click "skip" until "Skip Account Security" terms are agreed to', async () => { + const setSeedPhraseBackedUpSpy = jest + .spyOn(Actions, 'setSeedPhraseBackedUp') + .mockReturnValue({ type: 'setSeedPhraseBackedUp' }); + const { getByText, getByTestId } = renderWithProvider( , store, @@ -52,7 +59,9 @@ describe('Secure Your Wallet Onboarding View', () => { expect(pushMock).toHaveBeenCalledTimes(0); const checkbox = getByTestId('skip-srp-backup-popover-checkbox'); fireEvent.click(checkbox); - fireEvent.click(skipButton); + const confirmSkip = getByTestId('skip-srp-backup'); + await fireEvent.click(confirmSkip); + expect(setSeedPhraseBackedUpSpy).toHaveBeenCalledTimes(1); expect(pushMock).toHaveBeenCalledTimes(1); expect(pushMock).toHaveBeenCalledWith(ONBOARDING_COMPLETION_ROUTE); }); diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js index 1557d5388..202096213 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js +++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; +import { useDispatch } from 'react-redux'; import { useI18nContext } from '../../../hooks/useI18nContext'; import Button from '../../../components/ui/button'; import Popover from '../../../components/ui/popover'; @@ -13,6 +14,7 @@ import { JUSTIFY_CONTENT, TYPOGRAPHY, } from '../../../helpers/constants/design-system'; +import { setSeedPhraseBackedUp } from '../../../store/actions'; import Checkbox from '../../../components/ui/check-box'; import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes'; @@ -20,6 +22,8 @@ export default function SkipSRPBackup({ handleClose }) { const [checked, setChecked] = useState(false); const t = useI18nContext(); const history = useHistory(); + const dispatch = useDispatch(); + return ( history.push(ONBOARDING_COMPLETION_ROUTE)} + onClick={async () => { + await dispatch(setSeedPhraseBackedUp(false)); + history.push(ONBOARDING_COMPLETION_ROUTE); + }} > {t('skip')}