Merge pull request #2142 from LiskHQ/2136-new-design-of-2nd-passphrase

Implement the new design of the Register second passphrase page - Closes #2136
LiskHQ · Jun 21, 2019 · 1357ce5 · 1357ce5
2 parents f9b8ecf + bbaa1d5
commit 1357ce5
Show file tree

Hide file tree

Showing 100 changed files with 798 additions and 3,873 deletions.
diff --git a/.importjs.js b/.importjs.js
@@ -0,0 +1,3 @@
+module.exports = {
+  emptyLineBetweenGroups: false,
+}
diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json
diff --git a/jest.config.js b/jest.config.js
@@ -20,7 +20,7 @@ module.exports = {
     'src/store/middlewares/socket.test.js',
     'src/store/middlewares/peers.test.js',
     'src/components/delegatesListView/*',
-    'src/components/registerV2/registerV2.test.js',
+    'src/components/register/register.test.js',
     'src/components/headerV2/headerV2.test.js',
   ],
   verbose: false,
@@ -131,7 +131,7 @@ module.exports = {
     'src/utils/hwWallet.js',
     'src/components/delegatesListView/*',
     'src/components/headerV2/headerV2.js',
-    'src/components/registerV2/registerV2.js',
+    'src/components/register/register.js',
   ],
   coverageThreshold: process.env.NO_COV ? {} : {
     global: {

diff --git a/src/actions/account.js b/src/actions/account.js
@@ -6,7 +6,6 @@ import { getTransactions } from '../utils/api/transactions';
 import { getBlocks } from '../utils/api/blocks';
 import { updateTransactions } from './transactions';
 import { delegateRegisteredFailure } from './delegate';
-import { secondPassphraseRegisteredFailure } from './secondPassphrase';
 import { liskAPIClientUpdate } from './peers';
 import { getTimeOffset } from '../utils/hacks';
 import Fees from '../constants/fees';
@@ -74,27 +73,28 @@ export const passphraseUsed = data => ({
 /**
  *
  */
-export const secondPassphraseRegistered = ({ secondPassphrase, account, passphrase }) =>
+export const secondPassphraseRegistered = ({
+  secondPassphrase, account, passphrase, callback,
+}) =>
   (dispatch, getState) => {
     const liskAPIClient = getState().peers.liskAPIClient;
     const timeOffset = getTimeOffset(getState());
     setSecondPassphrase(liskAPIClient, secondPassphrase, account.publicKey, passphrase, timeOffset)
-      .then((data) => {
+      .then((transaction) => {
         dispatch({
-          data: {
-            id: data.id,
-            senderPublicKey: account.publicKey,
-            senderId: account.address,
-            amount: 0,
-            fee: Fees.setSecondPassphrase,
-            type: transactionTypes.setSecondPassphrase,
-            token: 'LSK',
-          },
+          data: transaction,
           type: actionTypes.addPendingTransaction,
         });
+        callback({
+          success: true,
+          transaction,
+        });
       }).catch((error) => {
-        const text = (error && error.message) ? error.message : i18next.t('An error occurred while registering your second passphrase. Please try again.');
-        dispatch(secondPassphraseRegisteredFailure({ text }));
+        callback({
+          success: false,
+          error,
+          message: (error && error.message) ? error.message : i18next.t('An error occurred while registering your second passphrase. Please try again.'),
+        });
       });
     dispatch(passphraseUsed(passphrase));
   };

diff --git a/src/actions/account.test.js b/src/actions/account.test.js
@@ -15,7 +15,6 @@ import {
   updateAccountDelegateStats,
   login,
 } from './account';
-import { secondPassphraseRegisteredFailure } from './secondPassphrase';
 import { delegateRegisteredFailure } from './delegate';
 import * as accountApi from '../utils/api/account';
 import * as delegateApi from '../utils/api/delegates';
@@ -61,18 +60,16 @@ describe('actions: account', () => {
     const data = {
       passphrase: accounts['second passphrase account'].passphrase,
       secondPassphrase: accounts['second passphrase account'].secondPassphrase,
-      account: {
-        publicKey: accounts['second passphrase account'].publicKey,
-        address: accounts['second passphrase account'].address,
-      },
+      account: accounts['second passphrase account'],
+      callback: jest.fn(),
     };
     const actionFunction = secondPassphraseRegistered(data);
     let dispatch;
     let getState;
 
     beforeEach(() => {
       accountApiMock = stub(accountApi, 'setSecondPassphrase');
-      dispatch = spy();
+      dispatch = jest.fn();
       getState = () => ({
         peers: { liskAPIClient: {} },
       });
@@ -85,13 +82,8 @@ describe('actions: account', () => {
       i18nextMock.restore();
     });
 
-    it('should create an action function', () => {
-      chaiExpect(typeof actionFunction).to.be.deep.equal('function');
-    });
-
     it('should dispatch addPendingTransaction action if resolved', () => {
-      accountApiMock.returnsPromise().resolves({ id: '15626650747375562521' });
-      const expectedAction = {
+      const transaction = {
         id: '15626650747375562521',
         senderPublicKey: accounts['second passphrase account'].publicKey,
         senderId: accounts['second passphrase account'].address,
@@ -100,26 +92,28 @@ describe('actions: account', () => {
         type: transactionTypes.setSecondPassphrase,
         token: 'LSK',
       };
+      accountApiMock.returnsPromise().resolves(transaction);
 
       actionFunction(dispatch, getState);
-      chaiExpect(dispatch).to.have.been
-        .calledWith({ data: expectedAction, type: actionTypes.addPendingTransaction });
-    });
-
-    it('should dispatch secondPassphraseRegisteredFailure action if caught', () => {
-      accountApiMock.returnsPromise().rejects({ message: 'sample message' });
-
-      actionFunction(dispatch, getState);
-      const expectedAction = secondPassphraseRegisteredFailure({ text: 'sample message' });
-      chaiExpect(dispatch).to.have.been.calledWith(expectedAction);
+      expect(dispatch).toHaveBeenCalledWith({
+        data: transaction, type: actionTypes.addPendingTransaction,
+      });
+      expect(data.callback).toHaveBeenCalledWith({
+        success: true,
+        transaction,
+      });
     });
 
-    it('should dispatch secondPassphraseRegisteredFailure action if caught but no message returned', () => {
-      accountApiMock.returnsPromise().rejects({});
+    it('should call callback if api call fails', () => {
+      const error = { message: 'sample message' };
+      accountApiMock.returnsPromise().rejects(error);
 
       actionFunction(dispatch, getState);
-      const expectedAction = secondPassphraseRegisteredFailure({ text: 'An error occurred while registering your second passphrase. Please try again.' });
-      chaiExpect(dispatch).to.have.been.calledWith(expectedAction);
+      expect(data.callback).toHaveBeenCalledWith({
+        success: false,
+        error,
+        message: error.message,
+      });
     });
   });
 

diff --git a/src/actions/secondPassphrase.js b/src/actions/secondPassphrase.js
diff --git a/src/actions/secondPassphrase.test.js b/src/actions/secondPassphrase.test.js
diff --git a/src/actions/transactions.js b/src/actions/transactions.js
@@ -357,31 +357,28 @@ export const transactionCreated = data => async (dispatch, getState) => {
  * @param {Number} transaction.reference - Data field for LSK transactions
  * @param {String} transaction.secondPassphrase - Second passphrase for LSK transactions
  */
-export const transactionBroadcasted = transaction => async (dispatch, getState) => {
-  const { account, network, settings } = getState();
-  const activeToken = localStorage.getItem('btc') // TODO: Refactor after enabling BTC
-    ? settings.token.active
-    : tokenMap.LSK.key;
-
-  const [error, tx] = await to(transactionsAPI.broadcast(activeToken, transaction, network));
-
-  if (error) return dispatch(broadcastedTransactionError(({ error, transaction })));
+export const transactionBroadcasted = (transaction, callback = () => {}) =>
+  async (dispatch, getState) => {
+    const { network, settings } = getState();
+    const activeToken = localStorage.getItem('btc') // TODO: Refactor after enabling BTC
+      ? settings.token.active
+      : tokenMap.LSK.key;
+
+    const [error] = await to(transactionsAPI.broadcast(activeToken, transaction, network));
+
+    callback({ success: !error, error, transaction });
+    if (error) {
+      return dispatch(broadcastedTransactionError(({ error, transaction })));
+    }
 
-  dispatch(broadcastedTransactionSuccess(transaction));
+    dispatch(broadcastedTransactionSuccess(transaction));
 
-  if (activeToken !== tokenMap.BTC.key) {
-    dispatch(addPendingTransaction({
-      amount: transaction.amount,
-      asset: { reference: transaction.data },
-      fee: Fees.send,
-      id: tx.id,
-      recipientId: transaction.recipientId,
-      senderId: account.info[activeToken].address,
-      senderPublicKey: account.publicKey,
-      type: transactionTypes.send,
-      token: activeToken,
-    }));
-  }
+    if (activeToken !== tokenMap.BTC.key) {
+      dispatch(addPendingTransaction({
+        ...transaction,
+        senderId: extractAddress(transaction.senderPublicKey),
+      }));
+    }
 
-  return dispatch(passphraseUsed(transaction.passphrase));
-};
+    return dispatch(passphraseUsed(transaction.passphrase));
+  };