Implement add account with recovery phrase flow - Closes #4302

packages/common/store/reducers/index.js

@@ -10,3 +10,4 @@ export { default as voting } from '@dpos/validator/store/reducers/voting';
 export { default as watchList } from '@dpos/validator/store/reducers/watchList';
 export { default as service } from './service';
 export { default as loading } from './loading';
+export { account } from 'src/modules/account/store/reducer';

packages/views/screens/router/routes.js

@@ -1,77 +1,72 @@
 export default {
-  wallet: {
-    path: '/wallet',
-    isPrivate: true,
-    exact: false,
-    forbiddenTokens: [],
-  },
   addAccount: {
     path: '/add-account',
     isPrivate: false,
     forbiddenTokens: [],
   },
-  explorer: {
-    path: '/explorer',
-    searchParam: 'address',
+  addAccountBySecretRecovery: {
+    path: '/account/add/secrete-recovery',
     isPrivate: false,
     forbiddenTokens: [],
+    exact: true,
   },
-  hwWallet: {
-    path: '/hw-wallet-login',
-    isSigninFlow: true,
+  addAccountOptions: {
+    path: '/account',
     isPrivate: false,
     forbiddenTokens: [],
+    exact: true,
   },
-  register: {
-    path: '/register',
+  block: {
+    path: '/block',
+    searchParam: 'id',
     isPrivate: false,
-    isSigninFlow: true,
+    exact: true,
     forbiddenTokens: [],
   },
-  login: {
-    path: '/login',
+  blocks: {
+    path: '/blocks',
     isPrivate: false,
-    isSigninFlow: true,
     exact: true,
     forbiddenTokens: [],
   },
-  termsOfUse: {
-    path: '/terms-of-use',
+  dashboard: {
+    path: '/',
     isPrivate: false,
-    isSigninFlow: true,
     forbiddenTokens: [],
+    exact: true,
   },
-  transactions: {
-    path: '/transactions',
+  delegates: {
+    path: '/delegates',
+    exact: true,
     isPrivate: false,
     forbiddenTokens: [],
   },
-  blocks: {
-    path: '/blocks',
+  explorer: {
+    path: '/explorer',
+    searchParam: 'address',
     isPrivate: false,
-    exact: true,
     forbiddenTokens: [],
   },
-  block: {
-    path: '/block',
-    searchParam: 'id',
+  hwWallet: {
+    path: '/hw-wallet-login',
+    isSigninFlow: true,
     isPrivate: false,
-    exact: true,
     forbiddenTokens: [],
   },
-  wallets: {
-    path: '/wallets',
+  login: {
+    path: '/login',
     isPrivate: false,
+    isSigninFlow: true,
+    exact: true,
     forbiddenTokens: [],
   },
-  network: {
-    path: '/network',
+  manageAccounts: {
+    path: '/account/manage',
     isPrivate: false,
     forbiddenTokens: [],
   },
-  delegates: {
-    path: '/delegates',
-    exact: true,
+  network: {
+    path: '/network',
     isPrivate: false,
     forbiddenTokens: [],
   },
@@ -80,16 +75,33 @@ export default {
     isPrivate: true,
     forbiddenTokens: [],
   },
-  accountSelect: {
-    path: '/account/manage',
+  register: {
+    path: '/register',
     isPrivate: false,
+    isSigninFlow: true,
     forbiddenTokens: [],
   },
-  dashboard: {
-    path: '/',
+  termsOfUse: {
+    path: '/terms-of-use',
+    isPrivate: false,
+    isSigninFlow: true,
+    forbiddenTokens: [],
+  },
+  transactions: {
+    path: '/transactions',
     isPrivate: false,
     forbiddenTokens: [],
-    exact: true,
+  },
+  wallets: {
+    path: '/wallets',
+    isPrivate: false,
+    forbiddenTokens: [],
+  },
+  wallet: {
+    path: '/wallet',
+    isPrivate: true,
+    exact: false,
+    forbiddenTokens: [],
   },
 };
 
@@ -174,4 +186,8 @@ export const modals = {
     isPrivate: false,
     forbiddenTokens: [],
   },
+  setPassword: {
+    isPrivate: false,
+    forbiddenTokens: [],
+  },
 };

packages/views/screens/router/routesMap.js

@@ -32,7 +32,10 @@ import ReclaimBalanceModal from '@legacy/manager/reclaimBalanceModal';
 import RegisterMultisig from '@wallet/manager/registerMultisigManager';
 import SignMultiSig from '@wallet/manager/signMultisigManager';
 import MultisigAccountDetails from '@wallet/manager/multisigAccountDetailsManager';
-import AccountSelect from '@account/components/AccountSelect';
+import ManageAccounts from '@account/components/ManageAccounts';
+import AddAccountOptions from '@account/components/AddAccountOptions';
+import AddAccountBySecretRecovery from 'src/modules/account/components/AddAccountBySecretRecovery';
+import AddAccountForm from '@account/components/AddAccountForm';
 
 export default {
   wallet: AccountDetails,
@@ -70,5 +73,8 @@ export default {
   multiSignature: RegisterMultisig,
   multisigAccountDetails: MultisigAccountDetails,
   signMultiSignTransaction: SignMultiSig,
-  accountSelect: AccountSelect,
+  manageAccounts: ManageAccounts,
+  addAccountOptions: AddAccountOptions,
+  accountAdd: AddAccountForm,
+  addAccountBySecretRecovery: AddAccountBySecretRecovery,
 };

src/locales/en/common.json

@@ -126,6 +126,7 @@
   "Discreet mode": "Discreet mode",
   "Does the problem still persist?": "Does the problem still persist?",
   "Done": "Done",
+  "Don’t have a Lisk account yet?": "Don’t have a Lisk account yet?",
   "Download": "Download",
   "Download completed": "Download completed",
   "Duplicate public keys detected.": "Duplicate public keys detected.",
@@ -158,6 +159,7 @@
   "From": "From",
   "Generated by": "Generated by",
   "German": "German",
+  "Go Back": "Go Back",
   "Go back": "Go back",
   "Go to confirmation": "Go to confirmation",
   "Go to dashboard": "Go to dashboard",
@@ -342,6 +344,8 @@
   "Secret recovery phrase": "Secret recovery phrase",
   "Security": "Security",
   "Select All": "Select All",
+  "Select Network": "Select Network",
+  "Select the applicable mode.": "Select the applicable mode.",
   "Send": "Send",
   "Send a reclaim transaction": "Send a reclaim transaction",
   "Send using second passphrase right away": "Send using second passphrase right away",

src/modules/account/components/AddAccountBySecretRecovery/AddAccountBySecretRecovery.css

@@ -0,0 +1,19 @@
+@import '../../../../../setup/react/app/mixins.css';
+
+.addAccount {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  margin: 0;
+  min-height: 100%;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+}
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 24px;
+}

src/modules/account/components/AddAccountBySecretRecovery/AddAccountBySecretRecovery.js

@@ -0,0 +1,49 @@
+/* eslint-disable max-lines */
+import React, { useRef, useState } from 'react';
+import { withRouter } from 'react-router';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+import SetPasswordForm from 'src/modules/auth/components/SetPasswordForm/SetPasswordForm';
+import MultiStep from 'src/modules/common/components/MultiStep';
+import SetPasswordSuccess from 'src/modules/auth/components/SetPasswordSuccess';
+import routes from '@views/screens/router/routes';
+import { useCurrentAccount } from '@account/hooks';
+import AddAccountForm from '../AddAccountForm';
+import styles from './AddAccountBySecretRecovery.css';
+
+const AddAccountBySecretRecovery = ({ history, login }) => {
+  const multiStepRef = useRef(null);
+  const [passphrase, setPassphrase] = useState(null);
+  const [currentAccount, setCurrentAccount] = useCurrentAccount();
+  const onAddAccount = (passphraseData) => {
+    setPassphrase(passphraseData);
+    multiStepRef.current.next();
+  };
+
+  const onSetPassword = (account) => {
+    setCurrentAccount(account);
+    multiStepRef.current.next();
+  };
+
+  const onPasswordSetComplete = () => {
+    login(passphrase); // Todo this login method is depricated
+    history.push(routes.dashboard.path);
+  };
+
+  return (
+    <div className={`${styles.addAccount} ${grid.row}`}>
+      <MultiStep
+        navStyles={{ multiStepWrapper: styles.wrapper }}
+        ref={multiStepRef}
+      >
+        <AddAccountForm onAddAccount={onAddAccount} />
+        <SetPasswordForm recoveryPhrase={passphrase} onSubmit={onSetPassword} />
+        <SetPasswordSuccess
+          encryptedPhrase={currentAccount}
+          onClose={onPasswordSetComplete}
+        />
+      </MultiStep>
+    </div>
+  );
+};
+
+export default withRouter(AddAccountBySecretRecovery);

src/modules/account/components/AddAccountBySecretRecovery/AddAccountBySecretRecovery.test.js

@@ -0,0 +1,60 @@
+import {
+  createEvent, fireEvent, screen, waitFor,
+} from '@testing-library/react';
+import mockSavedAccounts from '@tests/fixtures/accounts';
+import { renderWithRouter } from 'src/utils/testHelpers';
+import AddAccountByPassPhrase from './AddAccountBySecretRecovery';
+
+jest.mock('react-i18next');
+jest.mock('../../hooks/useAccounts', () => ({
+  useAccounts: jest.fn().mockReturnValue([mockSavedAccounts]),
+}));
+
+const props = {
+  history: { push: jest.fn() },
+  login: jest.fn(),
+};
+
+beforeEach(() => {
+  renderWithRouter(AddAccountByPassPhrase, props);
+});
+
+describe('Add account by secrete recovery phrase flow', async () => {
+  it('Should successfull go though the flow', async () => {
+    expect(screen.getByText('Add account')).toBeTruthy();
+    expect(screen.getByText('Enter your secret recovery phrase to manage your account.')).toBeTruthy();
+    expect(screen.getByText('Continue')).toBeTruthy();
+    expect(screen.getByText('Go Back')).toBeTruthy();
+
+    const inputField = screen.getByTestId('recovery-1');
+    const pasteEvent = createEvent.paste(inputField, {
+      clipboardData: {
+        getData: () => 'below record evolve eye youth post control consider spice swamp hidden easily',
+      },
+    });
+
+    fireEvent(inputField, pasteEvent);
+    fireEvent.click(screen.getByText('Continue'));
+
+    const password = screen.getByTestId('password');
+    const cPassword = screen.getByTestId('cPassword');
+    const accountName = screen.getByTestId('accountName');
+    const hasAgreed = screen.getByTestId('hasAgreed');
+
+    fireEvent.change(password, { target: { value: 'Password1$' } });
+    fireEvent.change(cPassword, { target: { value: 'Password1$' } });
+    fireEvent.change(accountName, { target: { value: 'test account name' } });
+    fireEvent.click(hasAgreed);
+    fireEvent.click(screen.getByText('Save Account'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Perfect! You\'re all set')).toBeTruthy();
+      expect(screen.getByText('You can now download your encrypted secret recovery phrase and use it to add your account on other devices.')).toBeTruthy();
+      expect(screen.getByText('Download')).toBeTruthy();
+
+      fireEvent.click(screen.getByText('Continue to Dashboard'));
+
+      expect(props.login).toBeCalled();
+    });
+  });
+});

src/modules/account/components/AddAccountBySecretRecovery/index.js

@@ -0,0 +1,13 @@
+/* istanbul ignore file */
+import { connect } from 'react-redux';
+import { login } from '@auth/store/action';
+import AddAccountBySecretRecovery from './AddAccountBySecretRecovery';
+
+const mapDispatchToProps = {
+  login,
+};
+
+export default connect(
+  null,
+  mapDispatchToProps,
+)(AddAccountBySecretRecovery);