diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 0cdf998047..2a11e5f999 100644 --- a/i18n/locales/en/common.json +++ b/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. 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.", diff --git a/src/components/passphrase/create/create.css b/src/components/passphrase/create/create.css index 3c1bcb7de3..254daeb84f 100644 --- a/src/components/passphrase/create/create.css +++ b/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; diff --git a/src/components/passphrase/create/index.js b/src/components/passphrase/create/index.js index cdd3d70d41..644e6dbac3 100644 --- a/src/components/passphrase/create/index.js +++ b/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 { : null } -
+

diff --git a/src/components/passphrase/createSecond/index.js b/src/components/passphrase/createSecond/index.js index 44043d3de6..12a6b7d5f1 100644 --- a/src/components/passphrase/createSecond/index.js +++ b/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,18 +109,24 @@ 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.') : @@ -168,10 +134,37 @@ class Create extends React.Component { return (
+ +
{ this.pageRoot = pageRoot; } }> +
+

+ {t('Secure the use of your Lisk ID')} +
+ {t('with a 2nd passphrase')} +

+
+

+ {t('After registration, you will need it to use your Lisk ID, like sending and voting.')} +
+ {t('You are responsible for keeping your 2nd passphrase safe. No one can restore it, not even Lisk.')} +

+ + {hasFund ?

+ {t('Insufficient funds (Fee: {{fee}} LSK)', { fee: fromRawLsk(fees.setSecondPassphrase) })} +

: '' } +
+
{ this.pageRoot = pageRoot; } }> -
+

{t('Create your second passphrase')} diff --git a/src/components/passphrase/safekeeping/index.js b/src/components/passphrase/safekeeping/index.js index 96bbf41dd2..2d8ee49d94 100644 --- a/src/components/passphrase/safekeeping/index.js +++ b/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(() => { diff --git a/src/components/secondPassphrase/secondPassphrase.js b/src/components/secondPassphrase/secondPassphrase.js index eab0af70b1..8111fb3b96 100644 --- a/src/components/secondPassphrase/secondPassphrase.js +++ b/src/components/secondPassphrase/secondPassphrase.js @@ -39,8 +39,8 @@ class SecondPassphrase extends React.Component { showNav={true} finalCallback={onPassphraseRegister} backButtonLabel={t('Back')}> - - + diff --git a/test/e2e/registerSecondPassphrase.feature b/test/e2e/registerSecondPassphrase.feature index 128a94c436..1caba7d9f1 100644 --- a/test/e2e/registerSecondPassphrase.feature +++ b/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