Merge pull request #1678 from LiskHQ/1670-implement-ledger-login-v2

Implement ledger login on LoginV2 - Closes #1670

i18n/locales/en/common.json

@@ -150,6 +150,7 @@
   "Go to your Dashboard": "Go to your Dashboard",
   "Got it": "Got it",
   "Great!\nYou’re almost done": "Great!\nYou’re almost done",
+  "Hardware login (beta): ": "Hardware login (beta): ",
   "Hardware wallet login (beta):": "Hardware wallet login (beta):",
   "Height": "Height",
   "Help": "Help",
@@ -227,7 +228,7 @@
   "Names are unique. Once you register a name, it can't be changed.": "Names are unique. Once you register a name, it can't be changed.",
   "Network to connect to": "Network to connect to",
   "New to Hub? Take a tour": "New to Hub? Take a tour",
-  "New to Lisk?": "New to Lisk?",
+  "New to Lisk? ": "New to Lisk? ",
   "New version available": "New version available",
   "News": "News",
   "Next": "Next",

src/components/app/index.js

@@ -61,13 +61,15 @@ class App extends React.Component {
               `${stylesV2.v2Wrapper} ${stylesV2.loaded} appLoaded` :
               `${styles.v2Wrapper}`
             } ref={(el) => { this.main = el; }}>
+              <div id='onboardingAnchor'></div>
               <Switch>
                 {this.state.loaded &&
                   routesV2Layout.map((route, key) => (
                     <Route
                       path={route.path}
                       key={key}
                       component={route.component}
+                      exact={route.exact}
                     />
                   ))
                 }

src/components/hwWallet/index.js

@@ -36,7 +36,7 @@ class HwWallet extends React.Component {
 
   cancelLedgerLogin() {
     Piwik.trackingEvent('HwWallet', 'button', 'Cancel Ledger');
-    this.props.history.push(`${routes.login.path}`);
+    this.props.history.push(`${routes.loginV2.path}`);
   }
 
   async ledgerLogin() { // eslint-disable-line max-statements

src/components/hwWallet/ledgerLogin.js

@@ -106,7 +106,7 @@ class LedgerLogin extends React.Component {
 
   onCancelLegderLogin() {
     Piwik.trackingEvent('LedgerLogin', 'button', 'Cancel ledger login');
-    this.props.history.push(routes.login.path);
+    this.props.history.push(routes.loginV2.path);
   }
 
   render() {

src/components/loginV2/loginV2.css

@@ -20,6 +20,10 @@
   flex-direction: column;
   padding: 20px 24px;
 
+  & form {
+    width: 100%;
+  }
+
   & .button {
     margin-top: 12px;
     width: 100%;
@@ -170,16 +174,49 @@
   }
 }
 
+.hardwareHolder {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: 0;
+  max-height: 0;
+  transform: scale(0);
+  transform-origin: left center;
+  transition:
+    margin var(--animation-speed-fast) linear,
+    max-height var(--animation-speed-fast) linear,
+    transform var(--animation-speed-fast) linear;
+  width: 100%;
+
+  &.show {
+    margin-top: 40px;
+    max-height: 72px;
+    transform: scale(1);
+  }
+
+  & .label {
+    color: var(--color-content-light);
+    font-family: var(--content-font);
+    font-size: var(--paragraph-font-size-l);
+    font-weight: var(--font-weight-semi-bold);
+    height: 22px;
+    line-height: 1.47;
+    margin-bottom: 8px;
+  }
+}
+
 .link {
   color: var(--color-link);
+  cursor: pointer;
   display: inline-block;
   font-family: var(--heading-font);
   font-size: var(--paragraph-font-size-l);
   font-weight: var(--font-weight-bold);
   line-height: 1.47;
   margin-bottom: 20px;
-  margin-left: 5px;
   text-align: center;
+  text-decoration: underline;
 }
 
 .tooltip {

src/components/loginV2/loginV2.js

@@ -1,5 +1,8 @@
+// eslint-disable-line
 import React from 'react';
 import i18next from 'i18next';
+import Lisk from 'lisk-elements';
+
 import { translate } from 'react-i18next';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { Link } from 'react-router-dom';
@@ -12,6 +15,7 @@ import getNetwork from '../../utils/getNetwork';
 import networks from '../../constants/networks';
 import { PrimaryButtonV2, SecondaryButtonV2 } from '../toolbox/buttons/button';
 import links from '../../constants/externalLinks';
+import feedbackLinks from '../../constants/feedbackLinks';
 import Tooltip from '../toolbox/tooltip/tooltip';
 import HeaderV2 from '../headerV2/headerV2';
 import PassphraseInputV2 from '../passphraseInputV2/passphraseInputV2';
@@ -49,12 +53,11 @@ class LoginV2 extends React.Component {
     this.changeAddress = this.changeAddress.bind(this);
     this.onFormSubmit = this.onFormSubmit.bind(this);
     this.onLoginSubmission = this.onLoginSubmission.bind(this);
+    this.validateCorrectNode = this.validateCorrectNode.bind(this);
   }
 
   componentDidMount() {
-    i18next.on('languageChanged', () => {
-      this.getNetworksList();
-    });
+    i18next.on('languageChanged', this.getNetworksList);
   }
 
   componentDidUpdate(prevProps) {
@@ -155,6 +158,34 @@ class LoginV2 extends React.Component {
     }
   }
 
+  validateCorrectNode(nextPath) {
+    const { address } = this.state;
+    const nodeURL = address !== '' ? addHttp(address) : address;
+    if (this.state.network === networks.customNode.code) {
+      const liskAPIClient = new Lisk.APIClient([nodeURL], {});
+      liskAPIClient.node.getConstants()
+        .then((res) => {
+          if (res.data) {
+            this.props.liskAPIClientSet({
+              network: {
+                ...this.getNetwork(this.state.network),
+                address: nodeURL,
+              },
+            });
+            this.props.history.push(nextPath);
+          } else {
+            throw new Error();
+          }
+        }).catch(() => {
+          this.props.errorToastDisplayed({ label: i18next.t('Unable to connect to the node') });
+        });
+    } else {
+      const network = this.getNetwork(this.state.network);
+      this.props.liskAPIClientSet({ network });
+      this.props.history.push(nextPath);
+    }
+  }
+
   render() {
     const { t } = this.props;
     return (
@@ -175,7 +206,7 @@ class LoginV2 extends React.Component {
                 {t('Sign in with a Passphrase')}
               </h1>
               <p>
-                {t('New to Lisk?')}
+                {t('New to Lisk? ')}
                 <Link className={`${styles.link}`}
                   to={routes.registration.path}>
                   {t('Create an Account')}
@@ -199,6 +230,7 @@ class LoginV2 extends React.Component {
                     </span>
                   </div>
                 </div>
+
                 <h2 className={`${styles.inputLabel}`}>
                   {t('Type or insert your passphrase')}
                   <Tooltip
@@ -227,6 +259,23 @@ class LoginV2 extends React.Component {
                   inputsLength={12}
                   onFill={this.checkPassphrase} />
 
+                  <div className={`${styles.hardwareHolder} ${(this.props.settings && this.props.settings.isHarwareWalletConnected) ? styles.show : ''}`}>
+                    <div className={`${styles.label}`}>
+                      {t('Hardware login (beta): ')}
+                      <span className={`${styles.link} hardwareWalletLink`}
+                        onClick={() => this.validateCorrectNode(routes.hwWallet.path)}>
+                        Ledger Nano S
+                      </span>
+                    </div>
+                    <a
+                      className={styles.link}
+                      target='_blank'
+                      href={feedbackLinks.ledger}
+                      rel='noopener noreferrer'>
+                      {t('Give feedback about this feature')}
+                    </a>
+                  </div>
+
               </div>
 
               <div className={`${styles.buttonsHolder} ${grid.row}`}>

src/components/loginV2/loginV2.test.js

@@ -100,6 +100,17 @@ describe('LoginV2', () => {
       customNode.find('input').simulate('change', { target: { value: 'localhost:4000' } });
       expect(customNode.find('.errorMessage')).to.not.have.className('showError');
     });
+
+    it('Should show hardware login if hardware is connected and should go to hwWallet on click', () => {
+      wrapper.setProps({
+        children: React.cloneElement(wrapper.props().children, {
+          settings: { isHarwareWalletConnected: true },
+        }),
+      });
+      expect(wrapper).to.have.exactly(1).descendants('.hardwareHolder');
+      wrapper.find('.hardwareWalletLink').simulate('click');
+      expect(props.history.push).to.have.been.calledWith(`${routes.hwWallet.path}`);
+    });
   });
 
   describe('History management', () => {

src/components/passphraseInputV2/passphraseInputV2.css

@@ -2,7 +2,7 @@
 
 .inputs {
   flex-wrap: wrap;
-  padding-top: 40px;
+  margin-top: 12px;
 
   & > span {
     margin: 12px 0;