Merge pull request #666 from LiskHQ/637-second-passphrase-doesnt-info…

…rm-about-balance

Second passphrase doesn't inform about balance - Closes #637

i18n/locales/en/common.json

@@ -9,6 +9,7 @@
   "Additional fee": "Additional fee",
   "Address": "Address",
   "After 10 minutes of not using your passphrase,\n  // your Lisk ID will be locked to prevent an unauthorized use of your Lisk ID. .\n  // The timer will reset as soon as you make an transaction.\n  // After 5 minutes, you can also reset the timer by clicking on \"reset\".": "After 10 minutes of not using your passphrase,\n  // your Lisk ID will be locked to prevent an unauthorized use of your Lisk ID. .\n  // The timer will reset as soon as you make an transaction.\n  // After 5 minutes, you can also reset the timer by clicking on \"reset\".",
+  "After registration, you will need it to use your Lisk ID, like sending and voting.": "After registration, you will need it to use your Lisk ID, like sending and voting.",
   "All": "All",
   "Amount (LSK)": "Amount (LSK)",
   "An error occurred while creating the transaction.": "An error occurred while creating the transaction.",
@@ -94,6 +95,7 @@
   "Incoming": "Incoming",
   "Initialize Lisk ID": "Initialize Lisk ID",
   "Insufficient funds": "Insufficient funds",
+  "Insufficient funds (Fee: {{fee}} LSK)": "Insufficient funds (Fee: {{fee}} LSK)",
   "Insufficient funds for {{amount}} LSK fee": "Insufficient funds for {{amount}} LSK fee",
   "Invalid address": "Invalid address",
   "Invalid amount": "Invalid amount",
@@ -164,9 +166,7 @@
   "Redo": "Redo",
   "Register": "Register",
   "Register 2nd passphrase": "Register 2nd passphrase",
-  "Register Second Passphrase": "Register Second Passphrase",
   "Register and oversee your decentralized application here. Available soon.": "Register and oversee your decentralized application here. Available soon.",
-  "Register as delegate": "Register as delegate",
   "Reload": "Reload",
   "Remove": "Remove",
   "Report Issue...": "Report Issue...",
@@ -178,6 +178,7 @@
   "Search for Lisk ID or Transaction ID": "Search for Lisk ID or Transaction ID",
   "Search for a delegate": "Search for a delegate",
   "Second Signature Creation": "Second Signature Creation",
+  "Secure the use of your Lisk ID": "Secure the use of your Lisk ID",
   "Secure the use of your Lisk ID with a second passphrase.": "Secure the use of your Lisk ID with a second passphrase.",
   "Security": "Security",
   "See all transactions": "See all transactions",
@@ -254,12 +255,9 @@
   "Window": "Window",
   "Yes! It's safe": "Yes! It's safe",
   "You are looking into a saved account. In order to {{nextAction}} you need to enter your passphrase.": "You are looking into a saved account. In order to {{nextAction}} you need to enter your passphrase.",
+  "You are responsible for keeping your 2nd passphrase safe. No one can restore it, not even Lisk.": "You are responsible for keeping your 2nd passphrase safe. No one can restore it, not even Lisk.",
   "You can also press ↲ enter to search": "You can also press ↲ enter to search",
   "You can always get it back.": "You can always get it back.",
-  "You can select up to {{count}} delegates in one voting turn.": "You can select up to {{count}} delegates in one voting turn.",
-  "You can select up to {{count}} delegates in one voting turn._plural": "",
-  "You can vote for up to {{count}} delegates in total.": "You can vote for up to {{count}} delegates in total.",
-  "You can vote for up to {{count}} delegates in total._plural": "",
   "You can now use Lisk Hub.<br": {
     " If you want to repeat the onboarding, navigate to \"More\" on the sidebar.": "You can now use Lisk Hub.<br> If you want to repeat the onboarding, navigate to \"More\" on the sidebar."
   },
@@ -279,6 +277,7 @@
   "by moving your mouse.": "by moving your mouse.",
   "by tilting your device.": "by tilting your device.",
   "more": "more",
+  "with a 2nd passphrase": "with a 2nd passphrase",
   "{{count}} delegate names were successfully resolved for unvoting.": "{{count}} delegate name successfully resolved to remove vote from.",
   "{{count}} delegate names were successfully resolved for unvoting._plural": "{{count}} delegate names were successfully resolved for unvoting.",
   "{{count}} delegate names were successfully resolved for voting.": "{{count}} delegate name successfully resolved to add vote to.",

src/components/passphrase/create/create.css

@@ -176,6 +176,19 @@ hr {
   width: 100%;
 }
 
+.info {
+  margin-bottom: 80px;
+  line-height: 26px;
+}
+
+.nextButton {
+  margin: 0 auto;
+}
+
+.error {
+  color: var(--color-error);
+}
+
 @media (--large-viewport) {
   .generation aside.description {
     padding-top: 150px;

src/components/passphrase/create/index.js

@@ -41,17 +41,6 @@ class Create extends React.Component {
     }
   }
 
-  moveTitle() {
-    setTimeout(() => {
-      const { percentage } = this.state.data;
-      if (percentage > 15 && percentage < 18) {
-        this.setState({
-          headingClass: styles.goToTop,
-        });
-      }
-    }, 10);
-  }
-
   // eslint-disable-next-line class-methods-use-this
   hideShapeRandomly(list) {
     const result = [];
@@ -68,12 +57,6 @@ class Create extends React.Component {
     return list;
   }
 
-  componentDidUpdate() {
-    if (this.state.data) {
-      this.moveTitle();
-    }
-  }
-
   componentWillUnmount() {
     const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove';
     document.removeEventListener(eventName, this.seedGeneratorBoundToThis, true);
@@ -185,7 +168,7 @@ class Create extends React.Component {
             <Shapes percentage={percentage} shapes={this.state.shapes} /> :
             null
           }
-          <header className={this.state.headingClass}>
+          <header>
             <TransitionWrapper current={this.state.step} step='generate'>
               <h2 className={`${styles.generatorHeader}`}
                 id="generatorHeader" >

src/components/passphrase/createSecond/index.js

@@ -5,13 +5,15 @@ import { generateSeed, generatePassphrase } from '../../../utils/passphrase';
 import styles from '../create/create.css';
 import ProgressBarTheme from './progressBar.css';
 import TransitionWrapper from '../../toolbox/transitionWrapper';
+import { PrimaryButton } from '../../toolbox/buttons/button';
+import { fromRawLsk } from '../../../utils/lsk';
+import fees from '../../../constants/fees';
 
 class Create extends React.Component {
   constructor() {
     super();
     this.state = {
-      step: 'generate',
-      showHint: false,
+      step: 'info',
       address: null,
       lastCaptured: {
         x: 0,
@@ -29,48 +31,6 @@ class Create extends React.Component {
     this.eventNormalizer = this._eventNormalizer.bind(this);
   }
 
-  componentDidMount() {
-    this.container = document.getElementById('generatorContainer');
-    this.isTouchDevice = this.checkDevice(this.props.agent);
-    const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove';
-
-    window.addEventListener(eventName, this.eventNormalizer, true);
-  }
-
-
-  moveTitle() {
-    setTimeout(() => {
-      const { percentage } = this.state.data;
-      if (percentage > 15 && percentage < 18) {
-        this.setState({
-          headingClass: styles.goToTop,
-        });
-      }
-    }, 10);
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  hideShapeRandomly(list) {
-    const result = [];
-    const min = 0;
-    const max = 9;
-    let randomNumber;
-    while (result.length < 4) {
-      randomNumber = Math.floor((Math.random() * (max - min)) + min);
-      if (result.indexOf(randomNumber) === -1) {
-        result.push(randomNumber);
-      }
-    }
-    result.forEach((item) => { list[item] = 0; });
-    return list;
-  }
-
-  componentDidUpdate() {
-    if (this.state.data) {
-      this.moveTitle();
-    }
-  }
-
   componentWillUnmount() {
     const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove';
     document.removeEventListener(eventName, this.seedGeneratorBoundToThis, true);
@@ -149,29 +109,62 @@ class Create extends React.Component {
       setTimeout(() => {
         nextStep({
           passphrase,
-          step: 'info',
         });
       }, 300);
     }
   }
 
-  showHint() {
-    this.setState({ showHint: !this.state.showHint });
+  next() {
+    this.container = document.getElementById('generatorContainer');
+    this.isTouchDevice = this.checkDevice(this.props.agent);
+    const eventName = this.isTouchDevice ? 'devicemotion' : 'mousemove';
+    window.addEventListener(eventName, this.eventNormalizer, true);
+    this.setState({
+      step: 'generate',
+    });
   }
 
   render() {
-    const { t } = this.props;
+    const { t, balance } = this.props;
+    const hasFund = fromRawLsk(balance) * 1 < fromRawLsk(fees.setSecondPassphrase) * 1;
     const percentage = this.state.data ? this.state.data.percentage : 0;
     const hintTitle = this.isTouchDevice ?
       t('by tilting your device.') :
       t('by moving your mouse.');
 
     return (
       <section className={`${grid.row} ${grid['center-xs']} ${styles.wrapper} ${styles.generation}`} id="generatorContainer" >
+        <TransitionWrapper current={this.state.step} step='info'>
+          <div className={styles.secondPassphrase}
+            ref={ (pageRoot) => { this.pageRoot = pageRoot; } }>
+            <header>
+              <h2 className={`${styles.generatorHeader}`}
+                id="generatorHeader" >
+                {t('Secure the use of your Lisk ID')}
+                <br />
+                {t('with a 2nd passphrase')}
+              </h2>
+            </header>
+            <p className={styles.info}>
+              {t('After registration, you will need it to use your Lisk ID, like sending and voting.')}
+              <br />
+              {t('You are responsible for keeping your 2nd passphrase safe. No one can restore it, not even Lisk.')}
+            </p>
+            <PrimaryButton
+              className={`${styles.nextButton} next`}
+              disabled={hasFund}
+              label={t('Next')}
+              onClick={this.next.bind(this)}
+              type={'button'} />
+            {hasFund ? <p className={styles.error}>
+              {t('Insufficient funds (Fee: {{fee}} LSK)', { fee: fromRawLsk(fees.setSecondPassphrase) })}
+            </p> : '' }
+          </div>
+        </TransitionWrapper>
         <TransitionWrapper current={this.state.step} step='generate'>
           <div className={styles.secondPassphrase}
             ref={ (pageRoot) => { this.pageRoot = pageRoot; } }>
-            <header className={this.state.headingClass}>
+            <header>
               <h2 className={`${styles.generatorHeader}`}
                 id="generatorHeader" >
                 {t('Create your second passphrase')}

src/components/passphrase/safekeeping/index.js

@@ -9,10 +9,16 @@ class SafeKeeping extends React.Component {
   constructor() {
     super();
     this.state = {
-      step: 'introduction-step',
+      step: '',
     };
   }
 
+  componentDidMount() {
+    this.setState({
+      step: this.props.step || 'introduction-step',
+    });
+  }
+
   next(e) {
     clearTimeout(this.timeout);
     this.timeout = setTimeout(() => {

src/components/secondPassphrase/secondPassphrase.js

@@ -39,8 +39,8 @@ class SecondPassphrase extends React.Component {
           showNav={true}
           finalCallback={onPassphraseRegister}
           backButtonLabel={t('Back')}>
-          <CreateSecond title={t('Create')} t={t} icon='add' />
-          <Safekeeping title={t('Safekeeping')} t={t}
+          <CreateSecond title={t('Create')} t={t} icon='add' balance={account.balance} />
+          <Safekeeping title={t('Safekeeping')} t={t} step='revealing-step'
             icon='checkmark' header={header} message={message} />
           <Confirm title={t('Confirm')} t={t} confirmButton='Register'
             icon='login' secondPassConfirmation={true} />

test/e2e/registerSecondPassphrase.feature

@@ -4,10 +4,10 @@ Feature: Register second passphrase
     And I wait 0.1 seconds
     When I go to "main/second-passphrase/"
     And I wait 0.5 seconds
+    And I click "next"
+    And I wait 0.5 seconds
     And I 150 times move mouse randomly
     And I wait 0.5 seconds
-    And I swipe "i understand checkbox" to right
-    And I wait 1 seconds
     And I copy the second passphrase
     And I swipe "reveal checkbox" to right
     And I wait 0.5 seconds