m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

UI refactor

Browse Source
This commit is contained in:
brunobar79 2018-07-05 20:59:31 -04:00
parent 6c2730f243
commit 6b2511f94f
4 changed files with 112 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/scripts/metamask-controller.js
View File

@ -534,8 +534,10 @@ module.exports = class MetamaskController extends EventEmitter {
if (!keyring) {
keyring = await this.keyringController.addNewKeyring('Trezor Hardware')
}
const accounts = page === 1 ? await keyring.getNextPage() : await keyring.getPreviousPage()
if (page === 0) {
keyring.page = 0
}
const accounts = page === -1 ? await keyring.getPreviousPage() : await keyring.getNextPage()
this.accountTracker.syncWithAddresses(accounts.map(a => a.address))
return accounts

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

@ -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) => {
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),
}),
h(
'label.hw-account-list__item__label',
{
htmlFor: `address-${i}`,
},
`${a.address.slice(0, 4)}...${a.address.slice(-4)}`
),
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']),
]),
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' })
),
])
}),
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),
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(
'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

51
ui/app/components/pages/create-account/connect-hardware/connect-screen.js
View File

@ -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

41
ui/app/components/pages/create-account/connect-hardware/index.js
View File

@ -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,
})
}