m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Convert AccountList component to use JSX (#7524)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-23 12:52:52 -03:30 committed by GitHub
parent 9841845b30
commit 3086c0db71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 113 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

223
ui/app/pages/create-account/connect-hardware/account-list.js
View File

@ -1,8 +1,7 @@
const { Component } = require('react') import PropTypes from 'prop-types'
const PropTypes = require('prop-types') import React, { Component } from 'react'
const h = require('react-hyperscript') import Select from 'react-select'
const genAccountLink = require('../../../../lib/account-link.js') const genAccountLink = require('../../../../lib/account-link.js')
const Select = require('react-select').default
import Button from '../../../components/ui/button' import Button from '../../../components/ui/button'
class AccountList extends Component { class AccountList extends Component {
@ -36,22 +35,28 @@ class AccountList extends Component {
const { onPathChange, selectedPath } = this.props const { onPathChange, selectedPath } = this.props
const options = this.getHdPaths() const options = this.getHdPaths()
return h('div', [ return (
h('h3.hw-connect__hdPath__title', {}, this.context.t('selectHdPath')), <div>
h('p.hw-connect__msg', {}, this.context.t('selectPathHelp')), <h3 className="hw-connect__hdPath__title">
h('div.hw-connect__hdPath', [ {this.context.t('selectHdPath')}
h(Select, { </h3>
className: 'hw-connect__hdPath__select', <p className="hw-connect__msg">
name: 'hd-path-select', {this.context.t('selectPathHelp')}
clearable: false, </p>
value: selectedPath, <div className="hw-connect__hdPath">
options, <Select
onChange: (opt) => { className="hw-connect__hdPath__select"
onPathChange(opt.value) name="hd-path-select"
}, clearable={false}
}), value={selectedPath}
]), options={options}
]) onChange={(opt) => {
onPathChange(opt.value)
}}
/>
</div>
</div>
)
} }
capitalizeDevice (device) { capitalizeDevice (device) {
@ -61,75 +66,64 @@ class AccountList extends Component {
renderHeader () { renderHeader () {
const { device } = this.props const { device } = this.props
return ( return (
h('div.hw-connect', [ <div className="hw-connect">
<h3 className="hw-connect__unlock-title">
h('h3.hw-connect__unlock-title', {}, `${this.context.t('unlock')} ${this.capitalizeDevice(device)}`), {`${this.context.t('unlock')} ${this.capitalizeDevice(device)}`}
</h3>
device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null, {device.toLowerCase() === 'ledger' ? this.renderHdPathSelector() : null}
<h3 className="hw-connect__hdPath__title">
h('h3.hw-connect__hdPath__title', {}, this.context.t('selectAnAccount')), {this.context.t('selectAnAccount')}
h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')), </h3>
]) <p className="hw-connect__msg">{this.context.t('selectAnAccountHelp')}</p>
</div>
) )
} }
renderAccounts () { renderAccounts () {
return h('div.hw-account-list', [ return (
this.props.accounts.map((a, i) => { <div className="hw-account-list">
{this.props.accounts.map((account, idx) => (
return h('div.hw-account-list__item', { key: a.address }, [ <div className="hw-account-list__item" key={account.address}>
h('div.hw-account-list__item__radio', [ <div className="hw-account-list__item__radio">
h('input', { <input
type: 'radio', type="radio"
name: 'selectedAccount', name="selectedAccount"
id: `address-${i}`, id={`address-${idx}`}
value: a.index, value={account.index}
onChange: (e) => this.props.onAccountChange(e.target.value), onChange={(e) => this.props.onAccountChange(e.target.value)}
checked: this.props.selectedAccount === a.index.toString(), checked={this.props.selectedAccount === account.index.toString()}
}), />
h( <label className="hw-account-list__item__label" htmlFor={`address-${idx}`}>
'label.hw-account-list__item__label', <span className="hw-account-list__item__index">{account.index + 1}</span>
{ {`${account.address.slice(0, 4)}...${account.address.slice(-4)}`}
htmlFor: `address-${i}`, <span className="hw-account-list__item__balance">{`${account.balance}`}</span>
}, </label>
[ </div>
h('span.hw-account-list__item__index', a.index + 1), <a
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`, className="hw-account-list__item__link"
h('span.hw-account-list__item__balance', `${a.balance}`), href={genAccountLink(account.address, this.props.network)}
]), target="_blank"
]), title={this.context.t('etherscanView')}
h( >
'a.hw-account-list__item__link', <img src="images/popout.svg" alt="" />
{ </a>
href: genAccountLink(a.address, this.props.network), </div>
target: '_blank', ))}
title: this.context.t('etherscanView'), </div>
}, )
h('img', { src: 'images/popout.svg' })
),
])
}),
])
} }
renderPagination () { renderPagination () {
return h('div.hw-list-pagination', [ return (
h( <div className="hw-list-pagination">
'button.hw-list-pagination__button', <button className="hw-list-pagination__button" onClick={this.goToPreviousPage}>
{ {`< ${this.context.t('prev')}`}
onClick: this.goToPreviousPage, </button>
}, <button className="hw-list-pagination__button" onClick={this.goToNextPage}>
`< ${this.context.t('prev')}` {`${this.context.t('next')} >`}
), </button>
</div>
h( )
'button.hw-list-pagination__button',
{
onClick: this.goToNextPage,
},
`${this.context.t('next')} >`
),
])
} }
renderButtons () { renderButtons () {
@ -139,40 +133,49 @@ class AccountList extends Component {
buttonProps.disabled = true buttonProps.disabled = true
} }
return h('div.new-account-connect-form__buttons', {}, [ return (
h(Button, { <div className="new-account-connect-form__buttons">
type: 'default', <Button
large: true, type="default"
className: 'new-account-connect-form__button', large
onClick: this.props.onCancel.bind(this), className="new-account-connect-form__button"
}, [this.context.t('cancel')]), onClick={this.props.onCancel.bind(this)}
>
h(Button, { {this.context.t('cancel')}
type: 'primary', </Button>
large: true, <Button
className: 'new-account-connect-form__button unlock', type="primary"
disabled, large
onClick: this.props.onUnlockAccount.bind(this, this.props.device), className="new-account-connect-form__button unlock"
}, [this.context.t('unlock')]), disabled={disabled}
]) onClick={this.props.onUnlockAccount.bind(this, this.props.device)}
>
{this.context.t('unlock')}
</Button>
</div>
)
} }
renderForgetDevice () { renderForgetDevice () {
return h('div.hw-forget-device-container', {}, [ return (
h('a', { <div className="hw-forget-device-container">
onClick: this.props.onForgetDevice.bind(this, this.props.device), <a onClick={this.props.onForgetDevice.bind(this, this.props.device)}>
}, this.context.t('forgetDevice')), {this.context.t('forgetDevice')}
]) </a>
</div>
)
} }
render () { render () {
return h('div.new-account-connect-form.account-list', {}, [ return (
this.renderHeader(), <div className="new-account-connect-form account-list">
this.renderAccounts(), {this.renderHeader()}
this.renderPagination(), {this.renderAccounts()}
this.renderButtons(), {this.renderPagination()}
this.renderForgetDevice(), {this.renderButtons()}
]) {this.renderForgetDevice()}
</div>
)
} }
} }