diff options
updated account list based on new designs
Diffstat (limited to 'ui/app/components/pages/create-account/connect-hardware/account-list.js')
-rw-r--r-- | ui/app/components/pages/create-account/connect-hardware/account-list.js | 38 |
1 files changed, 26 insertions, 12 deletions
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 3bd6a00a7..06102e16f 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 @@ -8,16 +8,20 @@ class AccountList extends Component { super(props) } + renderHeader () { + return ( + h('div.hw-connect', [ + h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')), + h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), + ]) + ) + } + renderAccounts () { 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) => { 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', @@ -32,10 +36,12 @@ class AccountList extends Component { { htmlFor: `address-${i}`, }, - `${a.address.slice(0, 4)}...${a.address.slice(-4)}` - ), + [ + h('span.hw-account-list__item__index', a.index + 1), + `${a.address.slice(0, 4)}...${a.address.slice(-4)}`, + h('span.hw-account-list__item__balance', `${a.balance}`), + ]), ]), - h('span.hw-account-list__item__balance', `${a.balance}`), h( 'a.hw-account-list__item__link', { @@ -71,9 +77,15 @@ class AccountList extends Component { } renderButtons () { - return h('div.new-account-create-form__buttons', {}, [ + const disabled = this.props.selectedAccount === null + const buttonProps = {} + if (disabled) { + buttonProps.disabled = true + } + + return h('div.new-account-connect-form__buttons', {}, [ h( - 'button.btn-default.btn--large.new-account-create-form__button', + 'button.btn-default.btn--large.new-account-connect-form__button', { onClick: this.props.onCancel.bind(this), }, @@ -81,9 +93,10 @@ class AccountList extends Component { ), h( - `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`, + `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`, { onClick: this.props.onUnlockAccount.bind(this), + ...buttonProps, }, [this.context.t('unlock')] ), @@ -99,7 +112,8 @@ class AccountList extends Component { } render () { - return h('div', {}, [ + return h('div.new-account-connect-form', {}, [ + this.renderHeader(), this.renderAccounts(), this.renderPagination(), this.renderButtons(), |