From b9c23d4f94069e59b98c07ece0c6dac0fcd32434 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Tue, 16 Jul 2019 10:52:17 +0200 Subject: [PATCH 01/23] :fire: Remove account, copyToClipboard, header, privateWrapper and resultBox components --- i18n/locales/en/common.json | 8 - jest.config.js | 2 - src/components/account/account.css | 109 ----- src/components/account/account.js | 52 --- src/components/account/account.test.js | 72 --- src/components/account/index.js | 14 - src/components/account/stories.js | 34 -- .../copyToClipboard/copyToClipboard.css | 3 - src/components/copyToClipboard/index.js | 56 --- src/components/copyToClipboard/index.test.js | 52 --- src/components/header/countDownTemplate.js | 14 - .../header/countDownTemplate.test.js | 27 -- src/components/header/customCountDown.css | 48 -- src/components/header/customCountDown.js | 113 ----- src/components/header/customCountDown.test.js | 44 -- src/components/header/header.css | 419 ------------------ src/components/header/header.js | 168 ------- src/components/header/header.test.js | 94 ---- src/components/header/index.js | 31 -- src/components/privateWrapper/index.js | 8 - src/components/privateWrapper/index.test.js | 23 - .../privateWrapper/privateWrapper.js | 7 - src/components/resultBox/index.js | 21 - src/components/resultBox/resultBox.css | 66 --- src/components/resultBox/resultBox.js | 133 ------ src/components/resultBox/resultBox.test.js | 176 -------- 26 files changed, 1794 deletions(-) delete mode 100644 src/components/account/account.css delete mode 100644 src/components/account/account.js delete mode 100644 src/components/account/account.test.js delete mode 100644 src/components/account/index.js delete mode 100644 src/components/account/stories.js delete mode 100644 src/components/copyToClipboard/copyToClipboard.css delete mode 100644 src/components/copyToClipboard/index.js delete mode 100644 src/components/copyToClipboard/index.test.js delete mode 100644 src/components/header/countDownTemplate.js delete mode 100644 src/components/header/countDownTemplate.test.js delete mode 100644 src/components/header/customCountDown.css delete mode 100644 src/components/header/customCountDown.js delete mode 100644 src/components/header/customCountDown.test.js delete mode 100644 src/components/header/header.css delete mode 100644 src/components/header/header.js delete mode 100644 src/components/header/header.test.js delete mode 100644 src/components/header/index.js delete mode 100644 src/components/privateWrapper/index.js delete mode 100644 src/components/privateWrapper/index.test.js delete mode 100644 src/components/privateWrapper/privateWrapper.js delete mode 100644 src/components/resultBox/index.js delete mode 100644 src/components/resultBox/resultBox.css delete mode 100644 src/components/resultBox/resultBox.js delete mode 100644 src/components/resultBox/resultBox.test.js diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 5506bade5f..eb2e7a680e 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -25,13 +25,11 @@ "Add address to bookmarks": "Add address to bookmarks", "Add bookmark": "Add bookmark", "Add some {{activeToken}} to your Lisk Hub account now!": "Add some {{activeToken}} to your Lisk Hub account now!", - "Add to bookmarks": "Add to bookmarks", "Added Votes": "Added Votes", "Added votes": "Added votes", "Adding extensions is currently disabled in production version of Lisk Hub": "Adding extensions is currently disabled in production version of Lisk Hub", "Address": "Address", "Advanced": "Advanced", - "After logging out of your account you will be able to access the Dashboard, Settings and Search.": "After logging out of your account you will be able to access the Dashboard, Settings and Search.", "All": "All", "All bookmarks": "All bookmarks", "All delegates": "All delegates", @@ -97,7 +95,6 @@ "Connect": "Connect", "Connect your Hardware Wallet": "Connect your Hardware Wallet", "Connected": "Connected", - "Connected to ": "Connected to ", "Connected to:": "Connected to:", "Connection re-established": "Connection re-established", "Continue": "Continue", @@ -272,7 +269,6 @@ "Locale": "Locale", "Log out automatically after 10 minutes.": "Log out automatically after 10 minutes.", "Login Type not recognized.": "Login Type not recognized.", - "Logout": "Logout", "Look at your Ledger for confirmation": "Look at your Ledger for confirmation", "Look at your Trezor %s for completing the action": "Look at your Trezor %s for completing the action", "Looking for a device...": "Looking for a device...", @@ -381,7 +377,6 @@ "Request {{token}}": "Request {{token}}", "Requested amount": "Requested amount", "Required": "Required", - "Reset": "Reset", "Reset timer & continue": "Reset timer & continue", "Restart now": "Restart now", "Retry": "Retry", @@ -414,7 +409,6 @@ "Send {{token}} to this wallet ": "Send {{token}} to this wallet ", "Sender": "Sender", "Session timeout": "Session timeout", - "Session timeout in": "Session timeout in", "Settings": "Settings", "Settings saved!": "Settings saved!", "Sharing link": "Sharing link", @@ -525,7 +519,6 @@ "Wallet address:": "Wallet address:", "Wallet details": "Wallet details", "We highly recommend deleting the PDF file after printing.": "We highly recommend deleting the PDF file after printing.", - "Welcome back": "Welcome back", "Welcome to Lisk Delegates!": "Welcome to Lisk Delegates!", "Welcome to the Lisk Hub!": "Welcome to the Lisk Hub!", "What is Lisk Academy?": "What is Lisk Academy?", @@ -574,7 +567,6 @@ "[Today], HH:mm": "[Today], HH:mm", "[Tomorrow], HH:mm": "[Tomorrow], HH:mm", "[Yesterday], HH:mm": "[Yesterday], HH:mm", - "for full access": "for full access", "from": "from", "ie. 192.168.0.1": "ie. 192.168.0.1", "ie. Lisker123": "ie. Lisker123", diff --git a/jest.config.js b/jest.config.js index bd9a9af637..c95b925e73 100644 --- a/jest.config.js +++ b/jest.config.js @@ -43,7 +43,6 @@ module.exports = { 'app/src/ledger.js', 'src/actions/liskService.js', 'src/actions/transactions.js', - 'src/components/account/stories.js', 'src/components/accountInitialization/index.js', 'src/components/backgroundMaker/index.js', 'src/components/dashboard/currencyGraph.js', // This should be unskipped in issue #1499 @@ -64,7 +63,6 @@ module.exports = { 'src/components/request/index.js', 'src/components/request/index.js', 'src/components/request/specifyRequest.js', - 'src/components/resultBox/index.js', 'src/components/searchBar/index.js', // Passing in mocha but not in Jest 'src/components/send/steps/form/stories.js', 'src/components/spinner/stories.js', diff --git a/src/components/account/account.css b/src/components/account/account.css deleted file mode 100644 index 638229e8b7..0000000000 --- a/src/components/account/account.css +++ /dev/null @@ -1,109 +0,0 @@ -@import './../app/variables.css'; - -.wrapper { - margin: 8px -8px 16px; -} - -.network { - margin-right: 8px; - margin-top: -3px; -} - -.value-wrapper { - position: relative; - width: 100%; - height: 70px; - text-align: center; - background: #eee; - overflow: hidden; - - & :global .inner { - font-size: 100%; - color: #5f696e; - display: inline-block; - width: 100%; - margin: 0; - box-sizing: border-box; - position: relative; - z-index: 1; - - &.primary { - font-weight: bold; - padding: 9px; - } - - &.secondary { - font-size: 100%; - } - - &.full { - line-height: 51px; - height: 70px; - } - - &.tooltip { - position: absolute; - width: 100%; - text-align: center; - left: 0; - top: 100%; - transition: all ease 200ms; - font-size: 85% !important; - z-index: 0; - } - - &.hasTip:hover { - color: #000; - } - - &.hasTip:hover + .tooltip { - top: 45px; - } - } - - & :global .status { - position: absolute; - top: 5px; - right: 5px; - z-index: 1; - } -} - -.title { - color: var(--color-grayscale-dark); - height: 56px; - display: flex; - flex-direction: column; - justify-content: center; - - & span:first-child { - font-weight: 600; - } -} - -.testnetTitle, -.devnetTitle { - color: var(--color-grayscale-dark); -} - -.current { - color: var(--color-grayscale-dark); - margin-top: 8px; - margin-left: 32px; - display: inline-block; -} - -.peer { - font-size: 16px; - display: inline-block; - text-align: left; - width: auto; - height: 56px; - margin-bottom: 20px; -} - -@media (--medium-viewport) { - .peer { - display: none; - } -} diff --git a/src/components/account/account.js b/src/components/account/account.js deleted file mode 100644 index cd2a6dff99..0000000000 --- a/src/components/account/account.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import Lisk from '@liskhq/lisk-client'; -import { FontIcon } from '../fontIcon'; -import networks from '../../constants/networks'; -import styles from './account.css'; - - -/** - * Contains some of the important and basic information about the account - * - * @param {object} props - include properties of component - */ - -const Account = ({ peers, t, showNetworkIndicator }) => { - const iconMap = ['mainnet', 'testnet', 'devnet']; - const translations = iconMap.map(code => t(code)); - - let iconCode = peers.options.code; - if (iconCode === 2) { - iconCode = (peers.options.nethash === Lisk.constants.MAINNET_NETHASH) - ? networks.mainnet.code : iconCode; - iconCode = (peers.options.nethash === Lisk.constants.TESTNET_NETHASH) - ? networks.testnet.code : iconCode; - } - - const status = (peers.status && peers.status.online) - ? - : ; - - const shouldShowNetworkIndicator = (peers.liskAPIClient - && (showNetworkIndicator || peers.options.code !== networks.mainnet.code)); - - return (shouldShowNetworkIndicator - ? ( -
-
- - {status} - {t('Connected to ')} - {translations[iconCode]} - - - {peers.liskAPIClient.currentNode} - -
-
- ) - : null - ); -}; - -export default Account; diff --git a/src/components/account/account.test.js b/src/components/account/account.test.js deleted file mode 100644 index df4278502e..0000000000 --- a/src/components/account/account.test.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import Lisk from '@liskhq/lisk-client'; -import { expect } from 'chai'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; -import networks from '../../constants/networks'; -import Account from './account'; - -describe('Account', () => { - let props; - - beforeEach(() => { - props = { - t: key => key, - i18n: {}, - store: {}, - onActivePeerUpdated: sinon.spy(), - showNetworkIndicator: true, - peers: { - status: { - online: false, - }, - liskAPIClient: { - currentPeer: 'localhost', - port: 4000, - }, - options: { - name: 'Custom Node', - }, - }, - account: { - isDelegate: false, - address: '16313739661670634666L', - username: 'lisk-hub', - balance: 1e8, - }, - }; - }); - - // Should be updated once we know what happens with this component - // Maybe it should be merged with the avatar or sidebar part, we don't know yet - it.skip('should Address component', () => { - const wrapper = shallow(); - expect(wrapper.find('Address')).to.have.lengthOf(1); - }); - - it('shows network indicator online', () => { - props.peers.status.online = true; - props.peers.options.code = networks.mainnet.code; - const wrapper = shallow(); - wrapper.update(); - expect(wrapper).to.have.exactly(1).descendants('.online'); - }); - - it('shows network indicator offline', () => { - props.peers.status.online = false; - const wrapper = shallow(); - wrapper.update(); - expect(wrapper).to.have.exactly(1).descendants('.offline'); - }); - - it('shows testnet icon when online and nethash matches', () => { - props.peers.status.online = true; - props.peers.options.nethash = Lisk.constants.TESTNET_NETHASH; - props.peers.options.code = networks.customNode.code; - props.peers.liskAPIClient.currentNode = 'http://localhost:4000'; - const wrapper = shallow(); - wrapper.update(); - expect(wrapper).to.have.exactly(1).descendants('.online'); - expect(wrapper).to.have.exactly(1).descendants('.testnet-title'); - }); -}); diff --git a/src/components/account/index.js b/src/components/account/index.js deleted file mode 100644 index bd3ef5f807..0000000000 --- a/src/components/account/index.js +++ /dev/null @@ -1,14 +0,0 @@ -/* istanbul skip file */ -import { connect } from 'react-redux'; -import { translate } from 'react-i18next'; -import Account from './account'; - -/** - * Passing state - */ -const mapStateToProps = state => ({ - peers: state.peers, - account: state.account, -}); - -export default connect(mapStateToProps)(translate()(Account)); diff --git a/src/components/account/stories.js b/src/components/account/stories.js deleted file mode 100644 index 9cbe88bddf..0000000000 --- a/src/components/account/stories.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; - -import { storiesOf } from '@storybook/react'; -import Account from './account'; -import store from '../../store'; - -storiesOf('Account', module) - .add('delegate', () => ( - - - - )); diff --git a/src/components/copyToClipboard/copyToClipboard.css b/src/components/copyToClipboard/copyToClipboard.css deleted file mode 100644 index cd9df37a34..0000000000 --- a/src/components/copyToClipboard/copyToClipboard.css +++ /dev/null @@ -1,3 +0,0 @@ -.clickable { - cursor: pointer; -} diff --git a/src/components/copyToClipboard/index.js b/src/components/copyToClipboard/index.js deleted file mode 100644 index 365afa2b2c..0000000000 --- a/src/components/copyToClipboard/index.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import { CopyToClipboard as ReactCopyToClipboard } from 'react-copy-to-clipboard'; -import { translate } from 'react-i18next'; -import { FontIcon } from '../fontIcon'; -import styles from './copyToClipboard.css'; -import Piwik from '../../utils/piwik'; - -class CopyToClipboard extends React.Component { - constructor() { - super(); - this.state = { - copied: false, - }; - } - - textIsCopied() { - Piwik.trackingEvent('CopyToClipboard', 'button', 'Copy'); - this.setState({ - copied: true, - }); - setTimeout(() => { - this.setState({ - copied: false, - }); - }, 3000); - } - - render() { - const { - value, t, className, text, copyClassName, - } = this.props; - return ( -
{ - e.stopPropagation(); - }} - > - this.textIsCopied()}> - {this.state.copied ? ( - - - {' '} - {t('Copied!')} - - ) : ( - - - {text || value} - - )} - -
- ); - } -} - -export default (translate()(CopyToClipboard)); diff --git a/src/components/copyToClipboard/index.test.js b/src/components/copyToClipboard/index.test.js deleted file mode 100644 index 66cdc1b988..0000000000 --- a/src/components/copyToClipboard/index.test.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import PropTypes from 'prop-types'; -import sinon from 'sinon'; -import i18n from '../../i18n'; -import CopyToClipboard from './index'; - -describe('CopyToClipboard', () => { - let wrapper; - let clock; - const props = { - text: 'test', - className: 'className', - value: 2, - t: key => key, - i18n, - }; - const options = { - context: { i18n }, - childContextTypes: { - i18n: PropTypes.object.isRequired, - }, - }; - const copiedText = ' Copied!'; - - beforeEach(() => { - wrapper = mount(, options); - clock = sinon.useFakeTimers({ - toFake: ['setTimeout', 'clearTimeout', 'Date', 'setInterval'], - }); - }); - - afterEach(() => { - clock.restore(); - }); - - it('should show "Copied!" on click', () => { - wrapper.find('.default').simulate('click'); - expect(wrapper.find('.copied')).to.have.text(copiedText); - }); - - it('should hide "Copied!" after 3000ms', () => { - wrapper.find('.default').simulate('click'); - clock.tick(2900); - expect(wrapper.find('.copied')).to.have.text(copiedText); - clock.tick(2000); - wrapper.update(); - expect(wrapper.find('.copied')).to.have.length(0); - expect(wrapper.find('.default')).to.have.text(props.text); - }); -}); diff --git a/src/components/header/countDownTemplate.js b/src/components/header/countDownTemplate.js deleted file mode 100644 index 2221592999..0000000000 --- a/src/components/header/countDownTemplate.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Fragment } from 'react'; - -const Renderer = ({ minutes, seconds, children }) => { - const child = React.cloneElement(children, { minutes, seconds }); - return ( - - {' '} - {child} - {' '} - - ); -}; - -export default Renderer; diff --git a/src/components/header/countDownTemplate.test.js b/src/components/header/countDownTemplate.test.js deleted file mode 100644 index 3f959f4d6c..0000000000 --- a/src/components/header/countDownTemplate.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import CountDownTemplate from './countDownTemplate'; - -describe('countDownTemplate', () => { - let wrapper; - const Child = props => ( -
- {props.minutes} -: - {props.seconds} -
- ); - - beforeEach(() => { - const propsMock = { - minutes: 10, - seconds: 25, - }; - wrapper = mount(); - }); - - it('should mount Renderer', () => { - expect(wrapper).to.have.descendants('Renderer'); - }); -}); diff --git a/src/components/header/customCountDown.css b/src/components/header/customCountDown.css deleted file mode 100644 index c661716fb0..0000000000 --- a/src/components/header/customCountDown.css +++ /dev/null @@ -1,48 +0,0 @@ -@import '../app/variables.css'; -@import '../app/variablesV2.css'; - -.reset { - margin-right: 15px; - padding-left: 3px; - padding-right: 3px; - padding-bottom: 3px; - cursor: pointer; - color: var(--color-primary-standard); - display: flex; - align-items: center; - font-family: 'Open Sans', sans-serif; - font-weight: 600; - font-size: 12px; -} - -.default { - color: var(--color-grayscale-medium); -} - -.time { - color: var(--color-content-light); -} - -.timeout { - color: var(--color-error); -} - -.timerRow { - display: flex; - justify-content: flex-end; - font-weight: 600; - font-size: 12px; - font-family: 'Open Sans', sans-serif; -} - -.timerRow > p { - font-weight: 600; - font-size: 12px; - font-family: 'Open Sans', sans-serif; -} - -@media (--medium-viewport) { - .default { - color: var(--color-grayscale-medium); - } -} diff --git a/src/components/header/customCountDown.js b/src/components/header/customCountDown.js deleted file mode 100644 index f1bab1cd12..0000000000 --- a/src/components/header/customCountDown.js +++ /dev/null @@ -1,113 +0,0 @@ -import React, { Fragment } from 'react'; -import Options from '../dialog/options'; -import routes from '../../constants/routes'; -import Piwik from '../../utils/piwik'; -import styles from './customCountDown.css'; - -class CustomCountDown extends React.Component { - componentDidUpdate() { - const { - resetTimer, t, setActiveDialog, closeDialog, - } = this.props; - const minutes = parseInt(this.props.minutes, 10); - const seconds = parseInt(this.props.seconds, 10); - - if (minutes === 0 && seconds === 59) { - setActiveDialog({ - childComponent: Options, - childComponentProps: { - title: t('Timeout soon'), - text: t('You will be signed out in a minute due to no network activity. You can turn off Auto-Logout in the settings.'), - firstButton: { - text: t('Go to settings'), - onClickHandler: this.goTo.bind(this, routes.setting.path), - }, - secondButton: { - text: t('Reset timer & continue'), - onClickHandler: /* istanbul ignore next */ () => { - resetTimer(); - closeDialog(); - }, - }, - }, - }); - } - if (minutes === 0 && seconds === 1) { - setActiveDialog({ - childComponent: Options, - childComponentProps: { - title: t('Session timeout'), - text: t('Your session was timed out after 10 minutes of no network activity. You may continue to use certain sections of your Lisk Hub or sign back in to access everything.'), - firstButton: { - text: t('Sign back in'), - onClickHandler: this.goTo.bind(this, routes.loginV2.path), - }, - secondButton: { - text: t('Continue to Dashboard'), - onClickHandler: this.goTo.bind(this, routes.dashboard.path), - }, - }, - }); - } - } - - /* istanbul ignore next */ - goTo(path) { - this.props.history.replace(path); - this.props.closeDialog(); - } - - onResetTimer() { - Piwik.trackingEvent('CustomCountDown', 'button', 'Reset timer'); - this.props.resetTimer(); - } - - render() { - const { - minutes, - autoLog, - seconds, - t, - } = this.props; - const min = `0${minutes}`.slice(-2); - const sec = `0${seconds}`.slice(-2); - - const resetCondition = (minutes < 5); - const timeoutCondition = (minutes === 0 && seconds === 0); - - const resetButton = resetCondition && !timeoutCondition - ? ( -
this.onResetTimer()} - className={`${styles.reset} reset`} - > - {t('Reset')} -
- ) - :
; - - const resetStyle = resetCondition ? styles.timeout : styles.time; - const timer = !timeoutCondition - && ( -

- {t('Session timeout in')} - {' '} - - {min} -: - {sec} - -

- ); - - const renderComponent = autoLog ? ( -
- {resetButton} - {timer} -
- ) : null; - - return ({renderComponent}); - } -} -export default CustomCountDown; diff --git a/src/components/header/customCountDown.test.js b/src/components/header/customCountDown.test.js deleted file mode 100644 index 98342fe550..0000000000 --- a/src/components/header/customCountDown.test.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; -import { spy } from 'sinon'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import CustomCountDown from './customCountDown'; - -describe('customCountDown', () => { - let wrapper; - - beforeEach(() => { - const propsMock = { - minutes: 10, - seconds: 25, - autoLog: true, - resetTimer: spy(), - setActiveDialog: () => {}, - t: key => key, - history: { - replace: () => {}, - }, - closeDialog: () => {}, - }; - wrapper = mount(); - }); - - it('should render "Session timeout in 10:25"', () => { - expect(wrapper.find('p').text()).to.be.equal('Session timeout in 10:25'); - }); - - it('should render reset button', () => { - wrapper.setProps({ minutes: 0, seconds: 59 }); - expect(wrapper.find('p').text()).to.be.equal('Session timeout in 00:59'); - expect(wrapper).to.have.descendants('.reset'); - }); - - it('should call resetTimer', () => { - wrapper.setProps({ minutes: 0, seconds: 1 }); - expect(wrapper).to.have.descendants('.reset'); - expect(wrapper.props().resetTimer).to.not.be.calledWith(); - wrapper.find('.reset').simulate('click'); - wrapper.update(); - expect(wrapper.props().resetTimer).to.be.calledWith(); - }); -}); diff --git a/src/components/header/header.css b/src/components/header/header.css deleted file mode 100644 index 03a9262a1f..0000000000 --- a/src/components/header/header.css +++ /dev/null @@ -1,419 +0,0 @@ -@import '../toolbox/buttons/css/base.css'; -@import '../app/variables.css'; - -:root { - --header-margin-right-left-M: 20px; - --header-margin-top-bottom-M: 23px; - --header-margin-right-left-S: 20px; - --header-margin-top-bottom-S: 10px; - --avatar-height: 69px; - --avatar-height-s: 33px; - --menu-icon-height-XL: 39px; - --menu-icon-height-M: 34px; - --font-size-normal: 16px; - --font-size-small: 12px; -} - -.wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - height: 138px; - box-sizing: border-box; - padding-top: 15px; - - & .noPadding { - padding: 0px; - } - - & .searchBar { - display: inline-block; - float: left; - margin-bottom: 30px; - margin-right: 32px; - } -} - -.unlocked { - color: var(--color-error); - font-family: 'Open Sans', sans-serif; - font-weight: 600; - font-size: var(--font-size-small); - line-height: 1.5em; /* stylelint-disable-line */ -} - -.logoWrapper { - width: 25%; -} - -.logo { - display: none; -} - -.logoutButton { - padding: 8px; - margin: 6px 8px; - height: auto; - float: right; -} - -.lock { - font-size: 19px; - height: auto; - vertical-align: top; - line-height: 24px !important; - margin-left: 5px; -} - -.primary { - line-height: 40px; - - @mixin buttonBasics; - @mixin buttonPrimary; -} - -.secondaryBlue { - line-height: 39px; - - @mixin buttonBasics; - @mixin buttonSecondary--blue; -} - -.material-icons { - font-size: 24px !important; -} - -.login { - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; - - & > p { - color: var(--color-black); - font-family: var(--heading-font); - font-size: 18px; - font-weight: 800; - margin: 0; - padding: 0; - } - - & .link { - display: flex; - flex-direction: row; - align-items: center; - margin-top: 7px; - height: 23px; - font-size: 14px; - font-family: var(--content-font); - font-weight: var(--font-weight-bold); - color: var(--color-black); - text-decoration: none; - - & > span:first-child { - font-size: 21px; - } - - & > span { - font-weight: normal; - margin-left: 5px; - color: var(--color-grayscale-dark); - } - - &:hover { - color: var(--color-primary-standard); - - & > span:first-child { - color: var(--color-primary-standard); - } - } - } -} - -.loginInfo { - display: flex; - flex-direction: column; - height: 86px; - margin: 3px 4px 0 0; -} - -.rightSide { - display: inline-block; - width: 32vw; /* stylelint-disable-line */ -} - -.logout { - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - cursor: pointer; - color: var(--color-black); - background-color: var(--color-white); - height: 25px; - width: 26px; - border-radius: 13.5px; - overflow: hidden; - font-family: 'Open Sans', sans-serif; - font-size: 12px; - font-weight: 600; - position: absolute; - top: 44px; - right: -5px; - transition: all ease 0.1s; - box-shadow: var(--normal-shadow); - - &:hover { - width: 75px; - color: var(--color-primary-standard); - } -} - -.logoutIcon { - font-size: 18px; - margin: 0 4px 0 5px; -} - -.logoutInfo { - display: flex; - justify-content: flex-end; -} - -.account { - position: relative; - height: 80px; - - & .avatar { - display: inline-block; - vertical-align: middle; - height: var(--avatar-height); - width: var(--avatar-height); - margin-right: 30px; - transition: transform ease-in-out 500ms; - - &:hover { - transform: scale(1.1); - transform-origin: 50%; - } - } - - & .information { - display: inline-block; - line-height: 25px; - padding-right: 20px; - height: var(--avatar-height); - font-family: 'Open Sans', sans-serif; - font-weight: 600; - vertical-align: top; - - & .balance { - font-size: 24px; - font-family: var(--heading-font); - color: var(--color-black); - line-height: 0.5em; /* stylelint-disable-line */ - padding-top: 7px; - - & small { - padding-left: 5px; - font-size: var(--font-size-small); - } - } - - & .address { - font-size: 14px; - color: var(--color-grayscale-medium); - } - - & .copy { - font-size: 24px; - padding-right: 5px; - } - - & .timer { - display: flex; - justify-content: flex-end; - font-size: var(--font-size-small); - color: var(--color-grayscale-medium); - line-height: 1.5em; /* stylelint-disable-line */ - } - } - - & .menu { - cursor: pointer; - - & .item { - padding: 0; - } - - & .link { - text-decoration: none; - width: 100%; - height: 100%; - line-height: 39px; - color: rgba(0, 0, 0, 0.87); - padding: 0; - text-align: center; - } - - & .iconCircle { - position: absolute; - bottom: -14px; - right: -24px; - background: var(--color-white); - border-radius: 100%; - height: var(--menu-icon-height-XL); - width: var(--menu-icon-height-XL); - box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.62); - text-align: center; - - & .button { - padding: 2px; - } - } - } -} - -@media (--medium-viewport) { - .logout { - color: var(--color-grayscale-medium); - } - - .loginInfo { - width: 100%; - float: none; - margin: 0; - - & > div { - display: flex; - flex-direction: row; - justify-content: space-between; - } - } - - .wrapper { - margin: 0px; - box-shadow: 0 2px 4px 0 rgba(60, 80, 104, 0.14), 0 8px 10px 0 rgba(60, 80, 104, 0.1); - width: 100%; - position: fixed; - top: 0; - background-color: var(--color-white); - z-index: var(--headerbar-index); - height: auto; - - & .searchBar { - width: 100%; - margin-bottom: 0; - display: none; - } - } - - .logo { - display: inline-block; - height: 50px; - padding: 20px; - } - - .logoutButton { - display: none; - } - - .account { - margin: 13px 13px 0; - height: 72px; - - & .avatar { - margin-right: 0; - } - - & .information { - & .balance { - font-size: 20px; - color: var(--color-black); - font-family: var(--heading-font); - - & small { - font-size: 12px; - } - } - - & .address { - font-size: 12px; - font-weight: 400; - } - } - - & .menu { - & .iconCircle { - display: none; - } - } - } - - .login { - height: 86px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; - margin-right: 5px; - } -} - -@media (--small-viewport) { - .wrapper { - height: auto; - } - - .account { - margin: var(--header-margin-top-bottom-S) var(--header-margin-right-left-S) 0px 0px; - height: auto; - display: flex; - padding-bottom: 30px; - - & .avatar { - margin-top: 4px; - height: var(--avatar-height-s); - width: var(--avatar-height-s); - } - - & .information { - margin-top: 0; - height: var(--avatar-height-s); - line-height: 20px; - - & .balance { - font-size: 18px; - font-weight: 300; - - & small { - font-size: 10px; - } - } - } - } - - .logo { - height: 40px; - padding: 10px 10px 7px 20px; - } - - .login { - height: 86px; - - & .link { - margin: var(--header-margin-top-bottom-S) var(--header-margin-right-left-S) var(--header-margin-top-bottom-S) 0px; - line-height: 46px; - } - } -} - -@media (--xSmall-viewport) { - .logo { - padding: 10px 0 7px; - } - - .loginInfo { - margin: 0; - } -} diff --git a/src/components/header/header.js b/src/components/header/header.js deleted file mode 100644 index a9736c8563..0000000000 --- a/src/components/header/header.js +++ /dev/null @@ -1,168 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import Countdown from 'react-countdown-now'; -import { FontIcon } from '../fontIcon'; -import AccountVisual from '../accountVisual'; -import SearchBar from '../searchBar'; -import CountDownTemplate from './countDownTemplate'; -import CopyToClipboard from '../copyToClipboard'; -import LiskAmount from '../liskAmount'; -import Account from '../account'; -import logo from '../../assets/images/Lisk-Logo.svg'; -import PrivateWrapper from '../privateWrapper'; -import styles from './header.css'; -import CustomCountDown from './customCountDown'; -import Options from '../dialog/options'; -import routes from '../../constants/routes'; -import Piwik from '../../utils/piwik'; - -class Header extends React.Component { - /* istanbul ignore next */ - logOut() { - this.props.logOut(); - this.props.closeDialog(); - this.props.history.replace(`${routes.dashboard.path}`); - } - - shouldShowActionButton() { - const { pathname } = this.props.location; - return !this.props.isAuthenticated - && !this.props.account.loading - && pathname !== routes.loginV2.path - && ![routes.register.path, routes.addAccount.path] - .some(el => pathname.includes(el)); - } - - shouldShowSearchBar() { - const { pathname } = this.props.location; - return ![routes.register.path, routes.addAccount.path] - .some(el => pathname.includes(el)); - } - - openLogoutDialog() { - Piwik.trackingEvent('Header', 'button', 'Open logout dialog'); - - this.props.setActiveDialog({ - childComponent: Options, - childComponentProps: { - title: this.props.t('Logout'), - text: this.props.t('After logging out of your account you will be able to access the Dashboard, Settings and Search.'), - firstButton: { - text: this.props.t('Cancel'), - onClickHandler: this.props.closeDialog, - }, - secondButton: { - text: this.props.t('Logout'), - onClickHandler: this.logOut.bind(this), - }, - }, - }); - } - - render() { - const { peers, t, showNetworkIndicator } = this.props; - return ( -
-
-
- {this.shouldShowSearchBar() && } -
- {this.props.account.loading - ? null - : } -
- -
-
-
- -
-
- -
-
-
- - LSK -
- - -
- {this.props.autoLog - ? ( -
- {((this.props.account.expireTime - && this.props.account.expireTime !== 0) - && this.props.account.passphrase) - ? ( -
- { - this.props.logOut(); - this.props.history.replace(routes.loginV2.path); - }} - > - - -
- ) - : null - } -
- ) - : null - } -
-
- -
this.openLogoutDialog()} - > - {this.props.t('Logout')} - -
-
- - { - this.shouldShowActionButton() - && ( -
-

{this.props.t('Welcome back')}

- - - {this.props.t('Sign in')} - - {this.props.t('for full access')} - - -
- ) - } -
-
-
-
- ); - } -} - - -export default Header; diff --git a/src/components/header/header.test.js b/src/components/header/header.test.js deleted file mode 100644 index 14640e31fb..0000000000 --- a/src/components/header/header.test.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { MemoryRouter as Router } from 'react-router-dom'; -import { mount } from 'enzyme'; -import configureMockStore from 'redux-mock-store'; -import PropTypes from 'prop-types'; -import sinon from 'sinon'; -import Header from './header'; -import i18n from '../../i18n'; -import routes from '../../constants/routes'; -import accounts from '../../../test/constants/accounts'; - -describe('Header', () => { - let wrapper; - const mountWithRouter = (node, options) => mount({node}, options); - const storeObject = { - peers: { liskAPIClient: {}, options: {} }, - account: { - info: {}, - }, - liskAPIClientSet: () => {}, - search: { - suggestions: { - delegates: [], - addresses: [], - transactions: [], - }, - }, - }; - const mockInputProps = { - setActiveDialog: () => { }, - resetTimer: sinon.spy(), - logOut: sinon.spy(), - history: { replace: sinon.spy() }, - account: { address: accounts.genesis.address }, - t: key => key, - location: { pathname: `${routes.search}` }, - isAuthenticated: false, - removePassphrase: sinon.spy(), - }; - - const history = { - location: { pathname: `${routes.search}` }, - replace: sinon.spy(), - createHref: sinon.spy(), - push: sinon.spy(), - }; - - const store = configureMockStore([])(storeObject); - const options = { - context: { - store, history, i18n, router: { route: history, history }, - }, - childContextTypes: { - store: PropTypes.object.isRequired, - history: PropTypes.object.isRequired, - i18n: PropTypes.object.isRequired, - router: PropTypes.object.isRequired, - }, - }; - - it('renders 1 Link component if not logged in', () => { - wrapper = mountWithRouter(
, options); - expect(wrapper.find('Link')).to.have.length(1); - }); - - it('does not show timer if account is not locked auto logout it turned off', () => { - mockInputProps.account.passphrase = accounts.genesis.passphrase; - storeObject.account = { publicKey: '123', info: {} }; - wrapper = mountWithRouter(
, options); - expect(wrapper.find('Countdown')).to.have.length(0); - }); - - it('does show timer if account is not locked auto logout it turned on', () => { - mockInputProps.account.passphrase = accounts.genesis.passphrase; - mockInputProps.account.expireTime = 1527755244818; - mockInputProps.autoLog = true; - storeObject.account = { publicKey: '123', info: {} }; - wrapper = mountWithRouter(
, options); - expect(wrapper.find('Countdown')).to.have.length(1); - }); - - it('should display logout dialog window', () => { - wrapper = mountWithRouter(
, options); - wrapper.find('.logout').first().simulate('click'); - expect(wrapper.find('Countdown')).to.have.length(1); - }); - - it('should redirect to dashboard after 10 min', () => { - wrapper = mountWithRouter(
, options); - wrapper.find('Countdown').props().onComplete(); - expect(mockInputProps.history.replace).to.have.been.calledWith(`${routes.loginV2.path}`); - }); -}); diff --git a/src/components/header/index.js b/src/components/header/index.js deleted file mode 100644 index 4f9b0c1ab4..0000000000 --- a/src/components/header/index.js +++ /dev/null @@ -1,31 +0,0 @@ -/* istanbul ignore file */ -import { connect } from 'react-redux'; -import { withRouter } from 'react-router'; -import { translate } from 'react-i18next'; -import { dialogDisplayed, dialogHidden } from '../../actions/dialog'; -import { accountLoggedOut, removePassphrase, accountUpdated } from '../../actions/account'; -import accountConfig from '../../constants/account'; -import Header from './header'; - -const { lockDuration } = accountConfig; - -const mapStateToProps = state => ({ - account: state.account, - autoLog: state.settings.autoLog, - isAuthenticated: !!state.account.publicKey, - peers: state.peers, - showNetworkIndicator: state.settings.showNetwork, -}); - -const mapDispatchToProps = { - setActiveDialog: dialogDisplayed, - closeDialog: dialogHidden, - logOut: accountLoggedOut, - removePassphrase, - resetTimer: () => accountUpdated({ expireTime: Date.now() + lockDuration }), -}; - -export default withRouter(connect( - mapStateToProps, - mapDispatchToProps, -)(translate()(Header))); diff --git a/src/components/privateWrapper/index.js b/src/components/privateWrapper/index.js deleted file mode 100644 index f2c5ed9318..0000000000 --- a/src/components/privateWrapper/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { connect } from 'react-redux'; -import PrivateWrapper from './privateWrapper'; - -const mapStateToProps = state => ({ - isAuthenticated: !!state.account.info, -}); - -export default connect(mapStateToProps)(PrivateWrapper); diff --git a/src/components/privateWrapper/index.test.js b/src/components/privateWrapper/index.test.js deleted file mode 100644 index 12790106fb..0000000000 --- a/src/components/privateWrapper/index.test.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { shallow } from 'enzyme'; -import PrivateWrapper from './privateWrapper'; - -const Private = () =>

Private

; - -describe('PrivateWrapper', () => { - const isAuth = isAuthenticated => ( - shallow( - - ) - ); - it('should render children components if user is authenticated', () => { - const wrapper = isAuth(true); - expect(wrapper.find(Private)).to.have.length(1); - }); - - it('should do not render children components if user is not authenticated', () => { - const wrapper = isAuth(false); - expect(wrapper.find(Private)).to.have.length(0); - }); -}); diff --git a/src/components/privateWrapper/privateWrapper.js b/src/components/privateWrapper/privateWrapper.js deleted file mode 100644 index 2904f87074..0000000000 --- a/src/components/privateWrapper/privateWrapper.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const PrivateWrapper = ({ isAuthenticated, children }) => ( - isAuthenticated && { children } -); - -export default PrivateWrapper; diff --git a/src/components/resultBox/index.js b/src/components/resultBox/index.js deleted file mode 100644 index aca664eaea..0000000000 --- a/src/components/resultBox/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import { translate } from 'react-i18next'; -import { connect } from 'react-redux'; -import { withRouter } from 'react-router-dom'; - -import actionTypes from '../../constants/actions'; -import ResultBox from './resultBox'; - -const mapStateToProps = state => ({ - bookmarks: state.bookmarks ? state.bookmarks : [], -}); - -const mapDispatchToProps = { - transactionFailedClear: () => ({ - type: actionTypes.transactionFailedClear, - }), -}; - -export default withRouter(connect( - mapStateToProps, - mapDispatchToProps, -)(translate()(ResultBox))); diff --git a/src/components/resultBox/resultBox.css b/src/components/resultBox/resultBox.css deleted file mode 100644 index 1fa6247dcc..0000000000 --- a/src/components/resultBox/resultBox.css +++ /dev/null @@ -1,66 +0,0 @@ -@import '../app/variables.css'; - -:root { - --copy-color: var(--color-primary-standard); - --paragraph-color: var(--color-grayscale-dark); - --paragraph-line-height: 36px; - --title-font-size: 32px; - --icon-font-size: 48px; -} - -.icon { - height: 30px; - width: 38.5px; - color: #ff6236; -} - -.resultBox { - text-align: center; - justify-content: space-evenly; - align-items: center; - flex-flow: column; - display: flex; - width: 100%; - height: 100%; - - & .header { - position: relative; - } - - & header > h2 { - font-size: 28px; - } - - & p { - color: var(--paragraph-color); - line-height: var(--paragraph-line-height); - font-size: 16px; - } - - & .copy { - color: var(--copy-color); - cursor: pointer; - font-size: 16px; - font-weight: 600; - } - - & footer { - padding: 0px; - display: flex; - bottom: 58px; - - & > div > button { - margin: 0; - } - - & .okButton { - width: 160px; - min-width: 160px; - } - - & .addBookmarkButton { - width: 160px; - min-width: 160px; - } - } -} diff --git a/src/components/resultBox/resultBox.js b/src/components/resultBox/resultBox.js deleted file mode 100644 index e7d7f3b2fa..0000000000 --- a/src/components/resultBox/resultBox.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import { Button, ActionButton } from '../toolbox/buttons/button'; -import { FontIcon } from '../fontIcon'; -import CopyToClipboard from '../copyToClipboard'; -import Piwik from '../../utils/piwik'; -import styles from './resultBox.css'; -import check from '../../assets/images/icons/check.svg'; -import { getIndexOfBookmark } from '../../utils/bookmarks'; -import { getTokenFromAddress } from '../../utils/api/transactions'; - -class ResultBox extends React.Component { - componentDidMount() { - if (typeof this.props.onMount === 'function') { - this.props.onMount(true, 'ResultBox'); - } - } - - isNotYetBookmarked(address) { - const { bookmarks } = this.props; - const token = getTokenFromAddress(address); - return getIndexOfBookmark(bookmarks, { address, token }) === -1; - } - - handleRetryButton() { - this.props.transactionFailedClear(); - this.props.prevStep({ - success: null, - account: this.props.account, - recipient: this.props.recipient, - amount: this.props.amount, - password: { value: '' }, - }); - } - - onAddToBookmarks() { - Piwik.trackingEvent('ResultBox', 'button', 'Add to bookmarks'); - this.props.nextStep({ address: this.props.recipientId }); - } - - onAddToBookmarksList() { - Piwik.trackingEvent('ResultBox', 'button', 'Add to bookmarks accounts'); - this.props.transactionFailedClear(); - this.props.prevStep({ - success: null, - account: this.props.account, - recipient: this.props.recipient, - amount: this.props.amount, - password: { value: '' }, - }); - } - - onOk() { - Piwik.trackingEvent('ResultBox', 'button', 'ok'); - this.props.transactionFailedClear(); - // istanbul ignore else - if (typeof this.props.finalCallback === 'function') this.props.finalCallback(); - this.props.reset(); - this.props.history.replace(this.props.history.location.pathname); - } - - render() { - return ( -
-
-
-
- {this.props.success - ? - : - } -
-

{this.props.title}

-
- -

- {this.props.body} -

- {this.props.copy - ? ( - - ) - : null - } -
- -
- {this.props.success - && this.props.recipientId && this.isNotYetBookmarked(this.props.recipientId) - ? ( -
- -
- ) : null - } - {!this.props.success && this.props.account && this.props.account.hwInfo - ? ( -
- -
- ) : null - } -
- - {this.props.t('Okay')} - -
-
{this.props.subTitle}
-
-
- - ); - } -} - -export default ResultBox; diff --git a/src/components/resultBox/resultBox.test.js b/src/components/resultBox/resultBox.test.js deleted file mode 100644 index 08e7a5da52..0000000000 --- a/src/components/resultBox/resultBox.test.js +++ /dev/null @@ -1,176 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import { spy } from 'sinon'; -import PropTypes from 'prop-types'; -import { FontIcon } from '../fontIcon'; -import ResultBox from './resultBox'; -import styles from './resultBox.css'; -import i18n from '../../i18n'; - -describe('Result Box', () => { - let wrapper; - let props; - - const options = { - context: { i18n }, - childContextTypes: { - i18n: PropTypes.object.isRequired, - }, - }; - - it('renders result box with success template', () => { - const title = 'Thank you'; - const body = 'Transaction is being processed and will be confirmed. It may take up to 15 minutes to be secured in the blockchain.'; - const copy = { - title: 'Copy Transaction-ID to clipboard', - value: '1234', - }; - props = { - copy, - account: {}, - title, - body, - success: true, - reset: spy(), - copyToClipboard: () => {}, - finalCallback: () => {}, - transactionFailedClear: () => {}, - t: () => {}, - history: { location: {}, push: () => {}, replace: () => {} }, - bookmarks: { - LSK: [], - }, - }; - - wrapper = mount(, options); - - expect(wrapper.find('h2').text()).to.contain(title); - expect(wrapper.find('.result-box-message').text()).to.contain(body); - expect(wrapper.find(`.${styles.header}`).find(FontIcon)).to.be.not.present(); - expect(wrapper.find('img')).to.have.length(1); - expect(wrapper.find('.copy-title').text()).to.contain(copy.title); - - wrapper.find('.okay-button').first().simulate('click'); - expect(props.reset).to.have.been.calledWith(); - }); - - it('renders result box with failure template', () => { - const title = 'Sorry'; - const body = 'An error occurred while creating the transaction.'; - props = { - copy: null, - title, - account: {}, - body, - success: false, - reset: () => {}, - copyToClipboard: () => {}, - t: () => {}, - bookmarks: { - LSK: [], - }, - }; - - wrapper = mount(, options); - - expect(wrapper.find('h2').text()).to.contain(title); - expect(wrapper.find('.result-box-message').text()).to.contain(body); - expect(wrapper.find(`.${styles.header}`).find(FontIcon)).to.be.present(); - expect(wrapper.find('img')).to.have.length(0); - expect(wrapper.find('.copy-title')).to.have.length(0); - }); - - it('calls props.onMount if it is a function', () => { - props = { - copy: null, - title: 'Sorry', - body: 'An error occurred while creating the transaction.', - success: false, - reset: () => {}, - copyToClipboard: () => {}, - t: () => {}, - onMount: spy(), - bookmarks: { - LSK: [], - }, - account: {}, - }; - - wrapper = mount(, options); - - expect(props.onMount).to.have.been.calledWith(true, 'ResultBox'); - }); - - it('display add follwed account button', () => { - props = { - copy: null, - title: 'test', - body: 'test', - success: true, - reset: () => {}, - copyToClipboard: () => {}, - t: () => {}, - onMount: spy(), - recipientId: '123L', - bookmarks: { - LSK: [{ - address: '1L', - }], - }, - account: { - hwInfo: {}, - }, - }; - - wrapper = mount(, options); - - expect(wrapper).to.have.descendants('.add-to-bookmarks'); - }); - - it('should go to next step after clicking "Retry"', () => { - props = { - copy: null, - title: 'test', - account: { hwInfo: {} }, - body: 'test', - success: false, - recipientId: '123', - reset: () => {}, - copyToClipboard: () => {}, - t: () => {}, - bookmarks: { - LSK: [], - }, - prevStep: spy(), - transactionFailedClear: spy(), - }; - wrapper = mount(, options); - wrapper.debug(); - wrapper.find('.add-follwed-account-button').at(0).simulate('click'); - expect(props.prevStep).to.have.been.calledWith(); - expect(props.transactionFailedClear).to.have.been.calledWith(); - }); - - it('should go to next step after clicking "Add Bookmark"', () => { - props = { - copy: null, - title: 'test', - account: { hwInfo: {} }, - body: 'test', - success: true, - recipientId: 455, - reset: () => {}, - copyToClipboard: () => {}, - t: () => {}, - bookmarks: { - LSK: [], - }, - nextStep: spy(), - }; - wrapper = mount(, options); - - wrapper.find('.add-to-bookmarks').at(0).simulate('click'); - expect(props.nextStep).to.have.been.calledWith({ address: 455 }); - }); -}); From b46113e3d4a42445e6e6ea76bb06c9769621968c Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Tue, 16 Jul 2019 11:01:41 +0200 Subject: [PATCH 02/23] :fire: Remove accountInitialization component --- .../accountInitialization/accountInit.css | 59 ------------- src/components/accountInitialization/index.js | 85 ------------------- 2 files changed, 144 deletions(-) delete mode 100644 src/components/accountInitialization/accountInit.css delete mode 100644 src/components/accountInitialization/index.js diff --git a/src/components/accountInitialization/accountInit.css b/src/components/accountInitialization/accountInit.css deleted file mode 100644 index 7e2e7b24b6..0000000000 --- a/src/components/accountInitialization/accountInit.css +++ /dev/null @@ -1,59 +0,0 @@ -@import '../app/variables.css'; - -:root { - --font-size-L: 16px; - --font-size-XS: 14px; -} - -.wrapper { - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - - & header { - & h2 { - font-weight: var(--font-weight-semi-bold); - text-align: left; - } - } - - & p { - line-height: 30px; - font-size: var(--font-size-L); - } - - & a { - font-weight: var(--font-weight-bold); - color: var(--color-link); - text-decoration: none; - } - - & .button { - font-weight: var(--font-weight-bold); - font-size: var(--font-size-L); - letter-spacing: 0; - line-height: 18px; - text-transform: none; - min-width: 0; - width: 100%; - } - - & > footer { - padding: 0; - margin-bottom: 20px; - } -} - -@media (--xSmall-viewport) { - .wrapper { - & p { - font-size: var(--font-size-XS); - } - - & .button { - font-size: var(--font-size-XS); - } - } -} diff --git a/src/components/accountInitialization/index.js b/src/components/accountInitialization/index.js deleted file mode 100644 index 2f10e58b83..0000000000 --- a/src/components/accountInitialization/index.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { translate } from 'react-i18next'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import { Button } from '../toolbox/buttons/button'; -import styles from './accountInit.css'; -import fees from '../../constants/fees'; -import { parseSearchParams } from '../../utils/searchParams'; -import { fromRawLsk } from '../../utils/lsk'; -import Piwik from '../../utils/piwik'; - -class AccountInitialization extends React.Component { - closeInfo() { - Piwik.trackingEvent('AccountInit', 'button', 'Close info dialog'); - this.props.nextStep(); - } - - componentDidMount() { - const { - account, nextStep, history, transactions, address, - } = this.props; - const search = Object.keys(parseSearchParams(history.location.search)); - const needsNoAccountInit = account.serverPublicKey - || account.balance === 0 - || transactions.pending.length > 0; - - if (search.includes('initializeAccount') && !needsNoAccountInit) { - history.replace({ - pathname: history.location.pathname, - search: '', - }); - nextStep({ account, accountInit: true }, 2); - } else if (needsNoAccountInit || address || search.includes('wallet')) { - nextStep(); - } - } - - onNext() { - const { account, nextStep } = this.props; - Piwik.trackingEvent('AccountInit', 'button', 'Next step'); - nextStep({ account, accountInit: true }, 2); - } - - render() { - const { t } = this.props; - - return ( -
-
-

{t('Initialize Lisk ID')}

-
-
-

{t('It is recommended that you initialize your Lisk ID.')}

-

{t('The easiest way to do this is to send LSK to yourself. It will cost you only the usual {{fee}} LSK transaction fee.', { fee: fromRawLsk(fees.send) })}

-
-
-
-
-
-
-
-
-
{t('Confirmation in the next step')}
-
-
- ); - } -} - -const mapStateToProps = state => ({ - account: state.account, - transactions: state.transactions, -}); - -export default connect(mapStateToProps)(translate()(AccountInitialization)); From 83ebf256876cbb495c1fd7e0b8877c3c637ee8d8 Mon Sep 17 00:00:00 2001 From: Renato Massao Yonamine Date: Tue, 16 Jul 2019 14:06:36 +0200 Subject: [PATCH 03/23] :fire: Remove actionBar, authInputs, authenticate, infoParagraph, passphraseSteps and priceButton components --- i18n/locales/en/common.json | 12 - src/components/actionBar/actionBar.css | 4 - src/components/actionBar/actionBar.js | 33 --- src/components/actionBar/index.js | 4 - src/components/actionBar/index.test.js | 68 ------ src/components/authInputs/authInputs.js | 60 ----- src/components/authInputs/authInputs.test.js | 78 ------- src/components/authInputs/index.js | 11 - src/components/authenticate/authenticate.js | 76 ------- .../authenticate/authenticate.test.js | 133 ----------- src/components/authenticate/index.js | 22 -- src/components/infoParagraph/index.js | 19 -- .../infoParagraph/infoParagraph.css | 18 -- src/components/passphraseSteps/index.js | 206 ------------------ .../passphraseSteps/passphraseSteps.css | 38 ---- src/components/pricedButton/index.js | 8 - src/components/pricedButton/index.test.js | 55 ----- src/components/pricedButton/pricedButton.css | 12 - src/components/pricedButton/pricedButton.js | 42 ---- src/utils/form.js | 26 +-- 20 files changed, 2 insertions(+), 923 deletions(-) delete mode 100644 src/components/actionBar/actionBar.css delete mode 100644 src/components/actionBar/actionBar.js delete mode 100644 src/components/actionBar/index.js delete mode 100644 src/components/actionBar/index.test.js delete mode 100644 src/components/authInputs/authInputs.js delete mode 100644 src/components/authInputs/authInputs.test.js delete mode 100644 src/components/authInputs/index.js delete mode 100644 src/components/authenticate/authenticate.js delete mode 100644 src/components/authenticate/authenticate.test.js delete mode 100644 src/components/authenticate/index.js delete mode 100644 src/components/infoParagraph/index.js delete mode 100644 src/components/infoParagraph/infoParagraph.css delete mode 100644 src/components/passphraseSteps/index.js delete mode 100644 src/components/passphraseSteps/passphraseSteps.css delete mode 100644 src/components/pricedButton/index.js delete mode 100644 src/components/pricedButton/index.test.js delete mode 100644 src/components/pricedButton/pricedButton.css delete mode 100644 src/components/pricedButton/pricedButton.js diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index eb2e7a680e..b1f2636da3 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -90,7 +90,6 @@ "Confirm transaction on {{deviceModel}}": "Confirm transaction on {{deviceModel}}", "Confirm voting": "Confirm voting", "Confirm your passphrase": "Confirm your passphrase", - "Confirmation in the next step": "Confirmation in the next step", "Confirmations": "Confirmations", "Connect": "Connect", "Connect your Hardware Wallet": "Connect your Hardware Wallet", @@ -137,7 +136,6 @@ "Delegates are the most commited Lisk community members responsible for \n securing the network and processing all the transactions on Lisk’s blockchain \n network.": "Delegates are the most commited Lisk community members responsible for \n securing the network and processing all the transactions on Lisk’s blockchain \n network.", "Delete": "Delete", "Details": "Details", - "Discard": "Discard", "Does the problem still persist?": "Does the problem still persist?", "Don’t be a stranger! Connect with our worldwide community.": "Don’t be a stranger! Connect with our worldwide community.", "Don’t worry, we’re here to help": "Don’t worry, we’re here to help", @@ -154,11 +152,6 @@ "Edit voting": "Edit voting", "Enable a network switcher that lets you select testnet or custom node when logging in.": "Enable a network switcher that lets you select testnet or custom node when logging in.", "Enter URL of the *.js file with the extension": "Enter URL of the *.js file with the extension", - "Enter your 1st passphrase to confirm": "Enter your 1st passphrase to confirm", - "Enter your passphrase": "Enter your passphrase", - "Enter your second passphrase": "Enter your second passphrase", - "Enter your second passphrase to confirm": "Enter your second passphrase to confirm", - "Entered passphrase does not belong to the active account": "Entered passphrase does not belong to the active account", "Error": "Error", "Error on Ledger Connection. Be sure your device is connected properly": "Error on Ledger Connection. Be sure your device is connected properly", "Error or Device Not Connected.": "Error or Device Not Connected.", @@ -173,7 +166,6 @@ "Failed to connect to node": "Failed to connect to node", "Failed to connect: Node {{address}} is not active": "Failed to connect: Node {{address}} is not active", "Fee": "Fee", - "Fee: {{amount}} LSK": "Fee: {{amount}} LSK", "Feedback": "Feedback", "Filter": "Filter", "Filter Transactions": "Filter Transactions", @@ -227,7 +219,6 @@ "Insert the amount of transaction": "Insert the amount of transaction", "Install update": "Install update", "Insufficient funds (Fee: {{fee}} LSK)": "Insufficient funds (Fee: {{fee}} LSK)", - "Insufficient funds for {{amount}} LSK fee": "Insufficient funds for {{amount}} LSK fee", "Invalid Dates": "Invalid Dates", "Invalid amount": "Invalid amount", "Is Blockchain Secure?": "Is Blockchain Secure?", @@ -456,7 +447,6 @@ "The Wallet will show your recent transactions.": "The Wallet will show your recent transactions.", "The download has started. Depending on your internet speed, it can take several minutes. You will be informed when it is finished and be prompted to restart the app.": "The download has started. Depending on your internet speed, it can take several minutes. You will be informed when it is finished and be prompted to restart the app.", "The easiest way to do this is to send LSK to yourself by clicking this button.": "The easiest way to do this is to send LSK to yourself by clicking this button.", - "The easiest way to do this is to send LSK to yourself. It will cost you only the usual {{fee}} LSK transaction fee.": "The easiest way to do this is to send LSK to yourself. It will cost you only the usual {{fee}} LSK transaction fee.", "The top 101 delegates are able to forge new blocks and recieve forging rewards.": "The top 101 delegates are able to forge new blocks and recieve forging rewards.", "The transaction has been canceled on your {{model}}": "The transaction has been canceled on your {{model}}", "There are no results matching this filter": "There are no results matching this filter", @@ -490,7 +480,6 @@ "Unable to detect the communication layer with your Hardware Wallet": "Unable to detect the communication layer with your Hardware Wallet", "Unable to detect the communication layer. Is ledger connected? Is Fido U2F Extension Installed?": "Unable to detect the communication layer. Is ledger connected? Is Fido U2F Extension Installed?", "Undo": "Undo", - "Unlock account": "Unlock account", "Unnamed account": "Unnamed account", "Update download finished": "Update download finished", "Updates downloaded, application has to be restarted to apply the updates.": "Updates downloaded, application has to be restarted to apply the updates.", @@ -531,7 +520,6 @@ "Window": "Window", "Would you like to download it now?": "Would you like to download it now?", "Write message": "Write message", - "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 can explore Lisk network using Hub without signing in.": "You can explore Lisk network using Hub without signing in.", "You can find out more about Lisk’s delgates, voting mechanism and benefits in a dedicated section of Lisk’s help centre.": "You can find out more about Lisk’s delgates, voting mechanism and benefits in a dedicated section of Lisk’s help centre.", "You can find the {{activeToken}} token on all of the worlds top exchanges and send them to your unique {{currency}} address:": "You can find the {{activeToken}} token on all of the worlds top exchanges and send them to your unique {{currency}} address:", diff --git a/src/components/actionBar/actionBar.css b/src/components/actionBar/actionBar.css deleted file mode 100644 index 619e768ee0..0000000000 --- a/src/components/actionBar/actionBar.css +++ /dev/null @@ -1,4 +0,0 @@ -.button { - min-width: 0; - width: 100%; -} diff --git a/src/components/actionBar/actionBar.js b/src/components/actionBar/actionBar.js deleted file mode 100644 index e75bff412b..0000000000 --- a/src/components/actionBar/actionBar.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import PricedButton from '../pricedButton'; -import styles from './actionBar.css'; -import { Button } from '../toolbox/buttons/button'; - -const ActionBar = ({ - secondaryButton, primaryButton, account, t, className, -}) => ( -
-
-); - -export default ActionBar; diff --git a/src/components/actionBar/index.js b/src/components/actionBar/index.js deleted file mode 100644 index 3458f2ca2d..0000000000 --- a/src/components/actionBar/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { translate } from 'react-i18next'; -import ActionBar from './actionBar'; - -export default translate()(ActionBar); diff --git a/src/components/actionBar/index.test.js b/src/components/actionBar/index.test.js deleted file mode 100644 index 8854a83e7d..0000000000 --- a/src/components/actionBar/index.test.js +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import configureStore from 'redux-mock-store'; -import PropTypes from 'prop-types'; -import sinon from 'sinon'; -import i18n from '../../i18n'; -import ActionBar from './actionBar'; -// import * as accountApi from '../../utils/api/account'; - -const fakeStore = configureStore(); - -describe('ActionBar', () => { - let wrapper; - let props; - - beforeEach(() => { - props = { - secondaryButton: { - label: 'Test cancel', - onClick: sinon.spy(), - }, - primaryButton: { - label: 'Test confirm', - disabled: false, - onClick: sinon.spy(), - }, - }; - const store = fakeStore({ - account: { - balance: 100e8, - }, - }); - wrapper = mount(, { - context: { store, i18n }, - childContextTypes: { - store: PropTypes.object.isRequired, - i18n: PropTypes.object.isRequired, - }, - }); - }); - - it('renders two Button components', () => { - expect(wrapper.find('Button')).to.have.length(2); - }); - - it('binds props.secondaryButton.label to first button label', () => { - expect(wrapper.find('Button').at(0).props().label).to.equal(props.secondaryButton.label); - }); - - it('binds props.primaryButton.label to second button label', () => { - expect(wrapper.find('Button').at(1).props().label).to.equal(props.primaryButton.label); - }); - - it('binds props.primaryButton.disabled to second button disabled', () => { - expect(wrapper.find('Button').at(1).props().disabled).to.equal(props.primaryButton.disabled); - }); - - it('binds props.secondaryButton.onClick to first button onClick', () => { - wrapper.find('Button').at(0).simulate('click'); - expect(props.secondaryButton.onClick).to.have.been.calledWith(); - }); - - it('binds props.primaryButton.onClick to second button onClick', () => { - wrapper.find('Button').at(1).simulate('click'); - expect(props.primaryButton.onClick).to.have.been.calledWith(); - }); -}); diff --git a/src/components/authInputs/authInputs.js b/src/components/authInputs/authInputs.js deleted file mode 100644 index 19fd54ab69..0000000000 --- a/src/components/authInputs/authInputs.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -// eslint-disable-next-line import/no-named-as-default -import PassphraseInput from '../passphraseInput'; -import { extractPublicKey } from '../../utils/account'; - -class AuthInputs extends React.Component { - componentDidMount() { - if (this.props.account.secondPublicKey) { - this.props.onChange('secondPassphrase', ''); - } - } - - onChange(name, value, error) { - if (!error) { - const publicKeyMap = { - passphrase: 'publicKey', - secondPassphrase: 'secondPublicKey', - }; - const expectedPublicKey = this.props.account[publicKeyMap[name]]; - - if (expectedPublicKey && expectedPublicKey !== extractPublicKey(value)) { - error = this.props.t('Entered passphrase does not belong to the active account'); - } - } - this.props.onChange(name, value, error); - } - - render() { - return ( - - {(!this.props.account.passphrase - && ( - - ))} - {(this.props.account.secondPublicKey - && ( - - ))} - - ); - } -} - -export default AuthInputs; diff --git a/src/components/authInputs/authInputs.test.js b/src/components/authInputs/authInputs.test.js deleted file mode 100644 index 8ee41a895a..0000000000 --- a/src/components/authInputs/authInputs.test.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import sinon from 'sinon'; -import { I18nextProvider } from 'react-i18next'; - -import accounts from '../../../test/constants/accounts'; -import i18n from '../../i18n'; // initialized i18next instance -import AuthInputs from './authInputs'; - - -describe('AuthInputs', () => { - let wrapper; - let props; - const { passphrase } = accounts.delegate; - - beforeEach(() => { - props = { - onChange: sinon.spy(), - secondPassphrase: { value: '' }, - account: { - passphrase, - }, - passphrase: { - value: passphrase, - }, - t: key => key, - }; - }); - - it('should render Input if props.account.secondPublicKey', () => { - props.account.secondPublicKey = true; - wrapper = mount(); - expect(wrapper.find('Input')).to.have.lengthOf(1); - }); - - it('should render null if !props.account.secondPublicKey', () => { - props.account.secondPublicKey = false; - wrapper = mount(); - expect(wrapper.html()).to.equal(''); - }); - - it('should render null if !props.account.secondPublicKey', () => { - props.account.secondPublicKey = false; - wrapper = mount(); - expect(wrapper.html()).to.equal(''); - }); - - it('should call props.onChange when input value changes', () => { - props.account.secondPublicKey = true; - wrapper = mount(); - wrapper.find('.second-passphrase input').first().simulate('change', { target: { value: passphrase } }); - expect(props.onChange).to.have.been.calledWith('secondPassphrase', passphrase); - }); - - it('should call props.onChange with an error if entered secondPassphrase does not belong to secondPublicKey', () => { - const error = 'Entered passphrase does not belong to the active account'; - props.account.secondPublicKey = true; - props.account.secondPublicKey = 'fab9d261ea050b9e326d7e11587eccc343a20e64e29d8781b50fd06683cacc88'; - wrapper = mount(); - wrapper.find('.second-passphrase input').first().simulate('change', { target: { value: passphrase } }); - expect(props.onChange).to.have.been.calledWith('secondPassphrase', passphrase, error); - }); - - it('should call props.onChange(\'secondPassphrase\', \'Required\') when input value changes to \'\'', () => { - props.account.secondPublicKey = true; - wrapper = mount(); - wrapper.find('.second-passphrase input').first().simulate('change', { target: { value: '' } }); - expect(props.onChange).to.have.been.calledWith('secondPassphrase', '', 'Required'); - }); - - it('should call props.onChange(\'secondPassphrase\', \'Invalid passphrase\') when input value changes to \'test\'', () => { - props.account.secondPublicKey = true; - wrapper = mount(); - wrapper.find('.second-passphrase input').first().simulate('change', { target: { value: 'test' } }); - expect(props.onChange).to.have.been.calledWith('secondPassphrase', 'test', 'Passphrase should have 12 words, entered passphrase has 1'); - }); -}); diff --git a/src/components/authInputs/index.js b/src/components/authInputs/index.js deleted file mode 100644 index 52d15260b2..0000000000 --- a/src/components/authInputs/index.js +++ /dev/null @@ -1,11 +0,0 @@ -/* istanbul skip file */ -import { connect } from 'react-redux'; -import { translate } from 'react-i18next'; - -import AuthInputs from './authInputs'; - -const mapStateToProps = state => ({ - account: state.account, -}); - -export default connect(mapStateToProps)(translate()(AuthInputs)); diff --git a/src/components/authenticate/authenticate.js b/src/components/authenticate/authenticate.js deleted file mode 100644 index af157af8c5..0000000000 --- a/src/components/authenticate/authenticate.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { handleChange, authStatePrefill, authStateIsValid } from '../../utils/form'; -import ActionBar from '../actionBar'; -import AuthInputs from '../authInputs'; -import InfoParagraph from '../infoParagraph'; -import Piwik from '../../utils/piwik'; - -class Authenticate extends React.Component { - constructor() { - super(); - this.state = { - ...authStatePrefill(), - }; - this.message = ''; - } - - componentDidMount() { - const newState = { - ...authStatePrefill(this.props.account), - }; - this.setState(newState); - } - - componentWillUpdate(props) { - const { nextAction, t } = props; - this.message = `${t('You are looking into a saved account. In order to {{nextAction}} you need to enter your passphrase.', { nextAction })}`; - } - - update() { - Piwik.trackingEvent('Authenticate', 'button', 'Update'); - const data = { - passphrase: this.state.passphrase.value, - }; - if (typeof this.props.account.secondPublicKey === 'string') { - data.secondPassphrase = this.state.secondPassphrase.value; - } - this.props.accountUpdated(data); - } - - closeDialog(e) { - e.preventDefault(); - Piwik.trackingEvent('Authenticate', 'button', 'Close dialog'); - this.props.closeDialog(); - } - - render() { - return ( -
- - {this.message} - - - - - - - ); - } -} - -export default Authenticate; diff --git a/src/components/authenticate/authenticate.test.js b/src/components/authenticate/authenticate.test.js deleted file mode 100644 index ee2ed909b3..0000000000 --- a/src/components/authenticate/authenticate.test.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import { mount } from 'enzyme'; -import configureStore from 'redux-mock-store'; -import i18next from 'i18next'; -import PropTypes from 'prop-types'; -import { spy } from 'sinon'; -import accounts from '../../../test/constants/accounts'; -import ActionBar from '../actionBar'; -import i18n from '../../i18n'; -import Authenticate from './authenticate'; - - -const fakeStore = configureStore(); - -describe('Authenticate', () => { - let wrapper; - let props; - - const peers = { - status: { - online: false, - }, - data: { - currentPeer: 'localhost', - port: 4000, - options: { - name: 'Custom Node', - }, - }, - }; - - const account = { - isDelegate: false, - publicKey: accounts.genesis.publicKey, - secondPublicKey: accounts.genesis.serverPublicKey, - address: accounts.genesis.address, - }; - - const { passphrase } = accounts.genesis; - - beforeEach(() => { - props = { - account, - peers, - t: (str, opts) => i18next.t(str, opts), - nextAction: 'perform a sample action', - closeDialog: spy(), - accountUpdated: spy(), - }; - - const store = fakeStore({ - account: { - balance: 100e8, - }, - }); - wrapper = mount(, { - context: { store, i18n }, - childContextTypes: { - store: PropTypes.object.isRequired, - i18n: PropTypes.object.isRequired, - }, - }); - }); - - it('renders 3 compound React components', () => { - expect(wrapper.find('InfoParagraph')).to.have.length(1); - expect(wrapper.find(ActionBar)).to.have.length(1); - expect(wrapper.find('AuthInputs')).to.have.length(1); - }); - - it('should render InfoParagraph with appropriate message', () => { - expect(wrapper.find('InfoParagraph').text()).to.include(`You are looking into a saved account. In order to ${props.nextAction} you need to enter your passphrase`); - }); - - it('should activate primary button if correct passphrase entered', () => { - expect(wrapper.find('button.authenticate-button').props().disabled).to.equal(true); - wrapper.find('.passphrase input').first().simulate('change', { target: { value: passphrase } }); - expect(wrapper.find('button.authenticate-button').props().disabled).to.equal(false); - }); - - it('should call accountUpdated if entered passphrase and clicked submit', () => { - wrapper.find('.passphrase input').first().simulate('change', { target: { value: passphrase } }); - wrapper.update(); - wrapper.find('Button.authenticate-button').simulate('click'); - wrapper.update(); - expect(props.accountUpdated).to.have.been.calledWith({ - passphrase, - secondPassphrase: null, - }); - }); - - it('should call accountUpdated if entered passphrase and clicked submit without PublicKey', () => { - props = { - account: { - isDelegate: false, - publicKey: accounts.genesis.publicKey, - address: accounts.genesis.address, - }, - peers, - t: (str, opts) => i18next.t(str, opts), - nextAction: 'perform a sample action', - closeDialog: spy(), - accountUpdated: spy(), - }; - - const store = fakeStore({ - account: { - balance: 100e8, - }, - }); - const customWrapper = mount(, { - context: { store, i18n }, - childContextTypes: { - store: PropTypes.object.isRequired, - i18n: PropTypes.object.isRequired, - }, - }); - customWrapper.find('.passphrase input').first().simulate('change', { target: { value: passphrase } }); - customWrapper.update(); - customWrapper.find('Button.authenticate-button').simulate('click'); - customWrapper.update(); - expect(props.accountUpdated).to.have.been.calledWith({ - passphrase, - }); - }); - - it('should close dialog on click the close button', () => { - wrapper.find('button.closeDialog-button').simulate('click'); - wrapper.update(); - expect(props.closeDialog).to.have.been.calledWith(); - }); -}); diff --git a/src/components/authenticate/index.js b/src/components/authenticate/index.js deleted file mode 100644 index 69de71bac3..0000000000 --- a/src/components/authenticate/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/* istanbul ignore file */ -import { connect } from 'react-redux'; -import { translate } from 'react-i18next'; -import { accountUpdated } from '../../actions/account'; -import Authenticate from './authenticate'; - -/** - * Passing state - */ -const mapStateToProps = state => ({ - peers: state.peers, - account: state.account, -}); - -const mapDispatchToProps = { - accountUpdated, -}; - -export default connect( - mapStateToProps, - mapDispatchToProps, -)(translate()(Authenticate)); diff --git a/src/components/infoParagraph/index.js b/src/components/infoParagraph/index.js deleted file mode 100644 index 72ca555f88..0000000000 --- a/src/components/infoParagraph/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import FontIcon from 'react-toolbox/lib/font_icon'; -import layout from './infoParagraph.css'; - -const InfoParagraph = props => ( -
-
- - - -
- {props.children} -
-
-
-
-); - -export default InfoParagraph; diff --git a/src/components/infoParagraph/infoParagraph.css b/src/components/infoParagraph/infoParagraph.css deleted file mode 100644 index 328265120a..0000000000 --- a/src/components/infoParagraph/infoParagraph.css +++ /dev/null @@ -1,18 +0,0 @@ -.layout-margin { - display: inline-block; - margin: 8px; -} - -.layout-padding { - display: inline-block; - padding: 8px; -} - -.layout-row { - display: flex; - flex-direction: row; -} - -.layout-align-center-center { - align-items: center; -} diff --git a/src/components/passphraseSteps/index.js b/src/components/passphraseSteps/index.js deleted file mode 100644 index 79623bcf22..0000000000 --- a/src/components/passphraseSteps/index.js +++ /dev/null @@ -1,206 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { translate } from 'react-i18next'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import { extractPublicKey, getActiveTokenAccount } from '../../utils/account'; -import { Button } from '../toolbox/buttons/button'; -// eslint-disable-next-line import/no-named-as-default -import PassphraseInput from '../passphraseInput'; -import { passphraseIsValid, authStatePrefill } from '../../utils/form'; -import Piwik from '../../utils/piwik'; -import styles from './passphraseSteps.css'; - -class PassphraseSteps extends React.Component { - constructor(props) { - super(props); - - this.state = { - done: { - passphrase: false, - secondPassphrase: false, - }, - ...authStatePrefill(this.props.account), - }; - } - - componentDidMount() { - if (this.props.account.secondPublicKey) { - this.setState({ - secondPassphrase: { - value: '', - error: '', - }, - }); - } - - if ((this.props.account.hwInfo && this.props.account.hwInfo.deviceId) - || (this.props.account.passphrase - && !this.props.account.secondPublicKey)) { - this.props.nextStep({ - ...this.props, - ...authStatePrefill(this.props.account), - skipped: true, - }); - } - - if (typeof this.props.onMount === 'function') { - this.props.onMount(true, 'PassphraseSteps'); - } - } - - hasCorrectPassphrases() { - const firstPPAndDone = !this.props.account.passphrase && this.state.done.passphrase; - const secondPPAndDone = this.props.account.secondPublicKey && this.state.done.secondPassphrase; - const onlyFirstPPAndDone = firstPPAndDone && !this.props.account.secondPublicKey; - const onlySecondPPAndDone = secondPPAndDone && !!this.props.account.passphrase; - - return onlyFirstPPAndDone || onlySecondPPAndDone || (firstPPAndDone && secondPPAndDone); - } - - componentDidUpdate() { - if (this.hasCorrectPassphrases()) { - this.props.nextStep({ - ...this.props, - skipped: false, - passphrase: this.state.passphrase, - secondPassphrase: this.state.secondPassphrase, - }); - } - } - - onChange(name, value, error) { - if (!error) { - const publicKeyMap = { - passphrase: 'publicKey', - secondPassphrase: 'secondPublicKey', - }; - - const expectedPublicKey = this.props.account[publicKeyMap[name]]; - - if (expectedPublicKey && expectedPublicKey !== extractPublicKey(value)) { - error = this.props.t('Entered passphrase does not belong to the active account'); - } - } - - this.setState({ - [name]: { - value, - error: typeof error === 'string' ? error : undefined, - }, - }); - } - - setDone(step) { - Piwik.trackingEvent('PassphraseSteps', 'button', 'Next step'); - const done = Object.assign(this.state.done, { [step]: true }); - this.setState({ done }); - } - - onPrevStep() { - Piwik.trackingEvent('PassphraseSteps', 'button', 'Previous step'); - this.props.prevStep({ - recipient: this.props.recipient, - amount: this.props.amount, - reset: this.props.accountInit, - }); - } - - getCurrentStep() { - if (this.props.account.secondPublicKey - && (this.state.done.passphrase || this.props.account.passphrase)) { - return 'secondPassphrase'; - } - - return 'passphrase'; - } - - render() { // eslint-disable-line max-statements - const values = { - columns: { xs: 6, sm: 4, md: 6 }, - passphrase: { - key: 'passphrase', - header: this.props.t('Enter your passphrase'), - state: this.state.passphrase, - className: 'passphrase', - buttonClassName: 'first-passphrase-next', - }, - secondPassphrase: { - key: 'secondPassphrase', - header: this.props.t('Enter your second passphrase'), - state: this.state.secondPassphrase, - className: 'second-passphrase', - buttonClassName: 'second-passphrase-next', - }, - footer: { - firstGrid: grid['col-xs-4'], - secondGrid: grid['col-xs-8'], - }, - }; - - let updatedValues = { ...values }; - let updatedStyles = { ...styles }; - - if (this.props.values) { - const columns = { ...updatedValues.columns, ...this.props.values.columns }; - const footer = { ...updatedValues.footer, ...this.props.values.footer }; - const passphrase = { ...updatedValues.passphrase, ...this.props.values.passphrase }; - const secondPassphrase = { - ...updatedValues.secondPassphrase, - ...this.props.values.secondPassphrase, - }; - updatedValues = { - columns, passphrase, secondPassphrase, footer, - }; - } - - if (this.props.styles) { - updatedStyles = { ...updatedStyles, ...this.props.styles }; - } - - return ( -
-
-

{updatedValues[this.getCurrentStep()].header}

-
- -
-
-
-
-
-
-
-
-
- ); - } -} - - -const mapStateToProps = state => ({ - account: getActiveTokenAccount(state), -}); - -export default connect(mapStateToProps)(translate()(PassphraseSteps)); diff --git a/src/components/passphraseSteps/passphraseSteps.css b/src/components/passphraseSteps/passphraseSteps.css deleted file mode 100644 index fb5d1f3389..0000000000 --- a/src/components/passphraseSteps/passphraseSteps.css +++ /dev/null @@ -1,38 +0,0 @@ -@import '../app/variables.css'; - -.wrapper { - display: flex; - flex-flow: column; - justify-content: space-between; - width: 100%; - box-sizing: border-box; - height: 100%; - - & footer { - width: 100%; - } -} - -.button { - min-width: 0; - width: 100%; -} - -.headerWrapper { - padding: 20px 0px 0; - - & h2 { - font-weight: var(--font-weight-semi-bold); - margin-bottom: 0; - } -} - -.input { - padding: 5px !important; -} - -@media (--small-viewport) { - .wrapper { - max-height: 100%; - } -} diff --git a/src/components/pricedButton/index.js b/src/components/pricedButton/index.js deleted file mode 100644 index f9a53c10c6..0000000000 --- a/src/components/pricedButton/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import { connect } from 'react-redux'; -import PricedButton from './pricedButton'; - -const mapStateToProps = state => ({ - balance: state.account.balance, -}); - -export default connect(mapStateToProps)(PricedButton); diff --git a/src/components/pricedButton/index.test.js b/src/components/pricedButton/index.test.js deleted file mode 100644 index 8fc38a3e62..0000000000 --- a/src/components/pricedButton/index.test.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { expect } from 'chai'; -import sinon from 'sinon'; -import { shallow } from 'enzyme'; -import { PrimaryButton } from '../toolbox/buttons/button'; -import PricedButton from './pricedButton'; -import i18n from '../../i18n'; -import styles from './pricedButton.css'; - - -describe('PricedButton', () => { - let wrapper; - const props = { - fee: 5e8, - onClick: sinon.spy(), - t: (key, options) => i18n.t(key, options), - }; - const insufficientBalance = 4.9999e8; - const sufficientBalance = 6e8; - - it('renders