From 6b2511f94f436a30c6c683f9da2c3142d9a6461c Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 5 Jul 2018 20:59:31 -0400 Subject: UI refactor --- .../connect-hardware/account-list.js | 111 ++++++++++----------- .../connect-hardware/connect-screen.js | 51 +++++----- .../pages/create-account/connect-hardware/index.js | 41 ++++++-- 3 files changed, 106 insertions(+), 97 deletions(-) (limited to 'ui/app/components/pages/create-account/connect-hardware') diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js index 598865ad8..77e0af3ac 100644 --- a/ui/app/components/pages/create-account/connect-hardware/account-list.js +++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js @@ -1,11 +1,10 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -const genAccountLink = require('../../../../lib/account-link.js') -const { DEFAULT_ROUTE } = require('../../../routes') -const { formatBalance } = require('../../../util') +const genAccountLink = require('../../../../../lib/account-link.js') +const { formatBalance } = require('../../../../util') -export default class AccountList extends Component { +class AccountList extends Component { constructor (props, context) { super(props) } @@ -19,54 +18,48 @@ export default class AccountList extends Component { } renderAccounts () { - if (!this.props.accounts.length) { - return null - } - return h('div.hw-account-list', [ - h('div.hw-account-list__title_wrapper', [ - h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]), - h('div.hw-account-list__device', {}, ['Trezor - ETH']), - ]), - this.props.accounts.map((a, i) => { + h('div.hw-account-list__title_wrapper', [ + h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]), + h('div.hw-account-list__device', {}, ['Trezor - ETH']), + ]), + this.props.accounts.map((a, i) => { - return h('div.hw-account-list__item', { key: a.address }, [ - h('span.hw-account-list__item__index', a.index + 1), - h('div.hw-account-list__item__radio', [ - h('input', { - type: 'radio', - name: 'selectedAccount', - id: `address-${i}`, - value: a.index, - onChange: (e) => this.props.onAccountChange(e.target.value), - }), + return h('div.hw-account-list__item', { key: a.address }, [ + h('span.hw-account-list__item__index', a.index + 1), + h('div.hw-account-list__item__radio', [ + h('input', { + type: 'radio', + name: 'selectedAccount', + id: `address-${i}`, + value: a.index, + onChange: (e) => this.props.onAccountChange(e.target.value), + checked: this.props.selectedAccount === a.index.toString(), + }), + h( + 'label.hw-account-list__item__label', + { + htmlFor: `address-${i}`, + }, + `${a.address.slice(0, 4)}...${a.address.slice(-4)}` + ), + ]), + h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`), h( - 'label.hw-account-list__item__label', - { - htmlFor: `address-${i}`, - }, - `${a.address.slice(0, 4)}...${a.address.slice(-4)}` + 'a.hw-account-list__item__link', + { + href: genAccountLink(a.address, this.props.network), + target: '_blank', + title: this.context.t('etherscanView'), + }, + h('img', { src: 'images/popout.svg' }) ), - ]), - h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`), - h( - 'a.hw-account-list__item__link', - { - href: genAccountLink(a.address, this.props.network), - target: '_blank', - title: this.context.t('etherscanView'), - }, - h('img', { src: 'images/popout.svg' }) - ), - ]) - }), + ]) + }), ]) } renderPagination () { - if (!this.state.accounts.length) { - return null - } return h('div.hw-list-pagination', [ h( 'button.btn-primary.hw-list-pagination__button', @@ -87,30 +80,19 @@ export default class AccountList extends Component { } renderButtons () { - if (!this.state.accounts.length) { - return null - } - const { history } = this.props - return h('div.new-account-create-form__buttons', {}, [ h( 'button.btn-default.btn--large.new-account-create-form__button', { - onClick: () => history.push(DEFAULT_ROUTE), + onClick: this.props.onCancel.bind(this), }, [this.context.t('cancel')] ), h( - 'button.btn-primary.btn--large.new-account-create-form__button', + `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`, { - onClick: () => { - this.unlockAccount(this.state.selectedAccount) - .then(() => history.push(DEFAULT_ROUTE)) - .catch(e => { - this.setState({ error: e.error }) - }) - }, + onClick: this.props.onUnlockAccount.bind(this), }, [this.context.t('unlock')] ), @@ -118,20 +100,29 @@ export default class AccountList extends Component { } render () { - return null + return h('div', {}, [ + this.renderAccounts(), + this.renderPagination(), + this.renderButtons(), + ]) } } AccountList.propTypes = { - accounts: PropTypes.object.isRequired, + accounts: PropTypes.array.isRequired, onAccountChange: PropTypes.func.isRequired, getPage: PropTypes.func.isRequired, network: PropTypes.string, + selectedAccount: PropTypes.string, history: PropTypes.object, + onUnlockAccount: PropTypes.func, + onCancel: PropTypes.func, } AccountList.contextTypes = { t: PropTypes.func, } + +module.exports = AccountList diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index 1b064a15c..ec6a11b40 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -2,51 +2,43 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') -export default class ConnectScreen extends Component { +class ConnectScreen extends Component { constructor (props, context) { super(props) } - connectToTrezor = () => { - if (this.props.connectToTrezor) { - this.props.connectToTrezor() - } - } - renderUnsupportedBrowser () { return ( - [ - h('div.hw-unsupported-browser', [ - h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')), - h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')), - ]), - h( - 'button.btn-primary.btn--large', - { onClick: () => global.platform.openWindow({ - url: 'https://google.com/chrome', - }), style: { margin: 12 } }, - this.context.t('downloadGoogleChrome') - )] + h('div', {}, [ + h('div.hw-unsupported-browser', [ + h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')), + h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')), + ]), + h( + 'button.btn-primary.btn--large', + { onClick: () => global.platform.openWindow({ + url: 'https://google.com/chrome', + }), style: { margin: 12 } }, + this.context.t('downloadGoogleChrome') + ), + ]) ) } renderConnectButton () { - return !this.state.accounts.length - ? h( - 'button.btn-primary.btn--large', - { onClick: this.connectToTrezor, style: { margin: 12 } }, - this.props.btnText - ) - : null + return h( + 'button.btn-primary.btn--large', + { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } }, + this.props.btnText + ) } render () { const isChrome = window.navigator.userAgent.search('Chrome') !== -1 if (isChrome) { return this.renderConnectButton() - } else { - return this.renderUnsupportedBrowser() } + return this.renderUnsupportedBrowser() } } @@ -58,3 +50,6 @@ ConnectScreen.propTypes = { ConnectScreen.contextTypes = { t: PropTypes.func, } + +module.exports = ConnectScreen + diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js index 04e69162f..22c54d28c 100644 --- a/ui/app/components/pages/create-account/connect-hardware/index.js +++ b/ui/app/components/pages/create-account/connect-hardware/index.js @@ -2,9 +2,10 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') const connect = require('react-redux').connect -const actions = require('../../../actions') +const actions = require('../../../../actions') const ConnectScreen = require('./connect-screen') const AccountList = require('./account-list') +const { DEFAULT_ROUTE } = require('../../../../routes') class ConnectHardwareForm extends Component { constructor (props, context) { @@ -13,7 +14,7 @@ class ConnectHardwareForm extends Component { error: null, response: null, btnText: context.t('connectToTrezor'), - selectedAccount: '', + selectedAccount: null, accounts: [], } } @@ -23,11 +24,11 @@ class ConnectHardwareForm extends Component { return null } this.setState({ btnText: this.context.t('connecting')}) - this.getPage(1) + this.getPage(0) } onAccountChange = (account) => { - this.setState({selectedAccount: account, error: null}) + this.setState({selectedAccount: account.toString(), error: null}) } getPage = (page) => { @@ -35,7 +36,16 @@ class ConnectHardwareForm extends Component { .connectHardware('trezor', page) .then(accounts => { if (accounts.length) { - this.setState({ accounts: accounts }) + const newState = { accounts: accounts } + // Default to the first account + if (this.state.selectedAccount === null) { + const firstAccount = accounts[0] + newState.selectedAccount = firstAccount.index.toString() + // If the page doesn't contain the selected account, let's deselect it + } else if (!accounts.filter(a => a.index.toString() === '').lenght) { + newState.selectedAccount = null + } + this.setState(newState) } }) .catch(e => { @@ -43,13 +53,23 @@ class ConnectHardwareForm extends Component { }) } - unlockAccount () { - if (this.state.selectedAccount === '') { - return Promise.reject({ error: this.context.t('accountSelectionRequired') }) + onUnlockAccount = () => { + + if (this.state.selectedAccount === null) { + this.setState({ error: this.context.t('accountSelectionRequired') }) } - return this.props.unlockTrezorAccount(this.state.selectedAccount) + + this.props.unlockTrezorAccount(this.state.selectedAccount) + .then(_ => { + this.props.history.push(DEFAULT_ROUTE) + }).catch(e => { + this.setState({ error: e.toString() }) + }) } + onCancel = () => { + this.props.history.push(DEFAULT_ROUTE) + } renderError () { return this.state.error @@ -67,10 +87,13 @@ class ConnectHardwareForm extends Component { return h(AccountList, { accounts: this.state.accounts, + selectedAccount: this.state.selectedAccount, onAccountChange: this.onAccountChange, network: this.props.network, getPage: this.getPage, history: this.props.history, + onUnlockAccount: this.onUnlockAccount, + onCancel: this.onCancel, }) } -- cgit