You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
4.0 KiB
143 lines
4.0 KiB
const { Component } = require('react')
|
|
const PropTypes = require('prop-types')
|
|
const h = require('react-hyperscript')
|
|
const genAccountLink = require('../../../../../lib/account-link.js')
|
|
|
|
class AccountList extends Component {
|
|
constructor (props, context) {
|
|
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', [
|
|
this.props.accounts.map((a, i) => {
|
|
|
|
return h('div.hw-account-list__item', { key: a.address }, [
|
|
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}`,
|
|
},
|
|
[
|
|
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(
|
|
'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 () {
|
|
return h('div.hw-list-pagination', [
|
|
h(
|
|
'button.hw-list-pagination__button',
|
|
{
|
|
onClick: () => this.props.getPage(-1),
|
|
},
|
|
`< ${this.context.t('prev')}`
|
|
),
|
|
|
|
h(
|
|
'button.hw-list-pagination__button',
|
|
{
|
|
onClick: () => this.props.getPage(1),
|
|
},
|
|
`${this.context.t('next')} >`
|
|
),
|
|
])
|
|
}
|
|
|
|
renderButtons () {
|
|
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-connect-form__button',
|
|
{
|
|
onClick: this.props.onCancel.bind(this),
|
|
},
|
|
[this.context.t('cancel')]
|
|
),
|
|
|
|
h(
|
|
`button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
|
|
{
|
|
onClick: this.props.onUnlockAccount.bind(this),
|
|
...buttonProps,
|
|
},
|
|
[this.context.t('unlock')]
|
|
),
|
|
])
|
|
}
|
|
|
|
renderForgetDevice () {
|
|
return h('div.hw-forget-device-container', {}, [
|
|
h('a', {
|
|
onClick: this.props.onForgetDevice.bind(this),
|
|
}, this.context.t('forgetDevice')),
|
|
])
|
|
}
|
|
|
|
render () {
|
|
return h('div.new-account-connect-form.account-list', {}, [
|
|
this.renderHeader(),
|
|
this.renderAccounts(),
|
|
this.renderPagination(),
|
|
this.renderButtons(),
|
|
this.renderForgetDevice(),
|
|
])
|
|
}
|
|
|
|
}
|
|
|
|
|
|
AccountList.propTypes = {
|
|
accounts: PropTypes.array.isRequired,
|
|
onAccountChange: PropTypes.func.isRequired,
|
|
onForgetDevice: 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
|
|
|