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) { if (!keyring) {
keyring = await this.keyringController.addNewKeyring('Trezor Hardware') keyring = await this.keyringController.addNewKeyring('Trezor Hardware')
} }
if (page === 0) {
const accounts = page === 1 ? await keyring.getNextPage() : await keyring.getPreviousPage() keyring.page = 0
}
const accounts = page === -1 ? await keyring.getPreviousPage() : await keyring.getNextPage()
this.accountTracker.syncWithAddresses(accounts.map(a => a.address)) this.accountTracker.syncWithAddresses(accounts.map(a => a.address))
return accounts 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 { Component } = require('react')
const PropTypes = require('prop-types') const PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
const genAccountLink = require('../../../../lib/account-link.js') const genAccountLink = require('../../../../../lib/account-link.js')
const { DEFAULT_ROUTE } = require('../../../routes') const { formatBalance } = require('../../../../util')
const { formatBalance } = require('../../../util')
export default class AccountList extends Component { class AccountList extends Component {
constructor (props, context) { constructor (props, context) {
super(props) super(props)
} }
@ -19,54 +18,48 @@ export default class AccountList extends Component {
} }
renderAccounts () { renderAccounts () {
if (!this.props.accounts.length) {
return null
}
return h('div.hw-account-list', [ return h('div.hw-account-list', [
h('div.hw-account-list__title_wrapper', [ h('div.hw-account-list__title_wrapper', [
h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]), h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
h('div.hw-account-list__device', {}, ['Trezor - ETH']), 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('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`), this.props.accounts.map((a, i) => {
h(
'a.hw-account-list__item__link', return h('div.hw-account-list__item', { key: a.address }, [
{ h('span.hw-account-list__item__index', a.index + 1),
href: genAccountLink(a.address, this.props.network), h('div.hw-account-list__item__radio', [
target: '_blank', h('input', {
title: this.context.t('etherscanView'), type: 'radio',
}, name: 'selectedAccount',
h('img', { src: 'images/popout.svg' }) 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 () { renderPagination () {
if (!this.state.accounts.length) {
return null
}
return h('div.hw-list-pagination', [ return h('div.hw-list-pagination', [
h( h(
'button.btn-primary.hw-list-pagination__button', 'button.btn-primary.hw-list-pagination__button',
@ -87,30 +80,19 @@ export default class AccountList extends Component {
} }
renderButtons () { renderButtons () {
if (!this.state.accounts.length) {
return null
}
const { history } = this.props
return h('div.new-account-create-form__buttons', {}, [ return h('div.new-account-create-form__buttons', {}, [
h( h(
'button.btn-default.btn--large.new-account-create-form__button', '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')] [this.context.t('cancel')]
), ),
h( 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: () => { onClick: this.props.onUnlockAccount.bind(this),
this.unlockAccount(this.state.selectedAccount)
.then(() => history.push(DEFAULT_ROUTE))
.catch(e => {
this.setState({ error: e.error })
})
},
}, },
[this.context.t('unlock')] [this.context.t('unlock')]
), ),
@ -118,20 +100,29 @@ export default class AccountList extends Component {
} }
render () { render () {
return null return h('div', {}, [
this.renderAccounts(),
this.renderPagination(),
this.renderButtons(),
])
} }
} }
AccountList.propTypes = { AccountList.propTypes = {
accounts: PropTypes.object.isRequired, accounts: PropTypes.array.isRequired,
onAccountChange: PropTypes.func.isRequired, onAccountChange: PropTypes.func.isRequired,
getPage: PropTypes.func.isRequired, getPage: PropTypes.func.isRequired,
network: PropTypes.string, network: PropTypes.string,
selectedAccount: PropTypes.string,
history: PropTypes.object, history: PropTypes.object,
onUnlockAccount: PropTypes.func,
onCancel: PropTypes.func,
} }
AccountList.contextTypes = { AccountList.contextTypes = {
t: PropTypes.func, 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 PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
export default class ConnectScreen extends Component { class ConnectScreen extends Component {
constructor (props, context) { constructor (props, context) {
super(props) super(props)
} }
connectToTrezor = () => {
if (this.props.connectToTrezor) {
this.props.connectToTrezor()
}
}
renderUnsupportedBrowser () { renderUnsupportedBrowser () {
return ( return (
[ h('div', {}, [
h('div.hw-unsupported-browser', [ h('div.hw-unsupported-browser', [
h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')), h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')), h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
]), ]),
h( h(
'button.btn-primary.btn--large', 'button.btn-primary.btn--large',
{ onClick: () => global.platform.openWindow({ { onClick: () => global.platform.openWindow({
url: 'https://google.com/chrome', url: 'https://google.com/chrome',
}), style: { margin: 12 } }, }), style: { margin: 12 } },
this.context.t('downloadGoogleChrome') this.context.t('downloadGoogleChrome')
)] ),
])
) )
} }
renderConnectButton () { renderConnectButton () {
return !this.state.accounts.length return h(
? h( 'button.btn-primary.btn--large',
'button.btn-primary.btn--large', { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } },
{ onClick: this.connectToTrezor, style: { margin: 12 } }, this.props.btnText
this.props.btnText )
)
: null
} }
render () { render () {
const isChrome = window.navigator.userAgent.search('Chrome') !== -1 const isChrome = window.navigator.userAgent.search('Chrome') !== -1
if (isChrome) { if (isChrome) {
return this.renderConnectButton() return this.renderConnectButton()
} else {
return this.renderUnsupportedBrowser()
} }
return this.renderUnsupportedBrowser()
} }
} }
@ -58,3 +50,6 @@ ConnectScreen.propTypes = {
ConnectScreen.contextTypes = { ConnectScreen.contextTypes = {
t: PropTypes.func, 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 PropTypes = require('prop-types')
const h = require('react-hyperscript') const h = require('react-hyperscript')
const connect = require('react-redux').connect const connect = require('react-redux').connect
const actions = require('../../../actions') const actions = require('../../../../actions')
const ConnectScreen = require('./connect-screen') const ConnectScreen = require('./connect-screen')
const AccountList = require('./account-list') const AccountList = require('./account-list')
const { DEFAULT_ROUTE } = require('../../../../routes')
class ConnectHardwareForm extends Component { class ConnectHardwareForm extends Component {
constructor (props, context) { constructor (props, context) {
@ -13,7 +14,7 @@ class ConnectHardwareForm extends Component {
error: null, error: null,
response: null, response: null,
btnText: context.t('connectToTrezor'), btnText: context.t('connectToTrezor'),
selectedAccount: '', selectedAccount: null,
accounts: [], accounts: [],
} }
} }
@ -23,11 +24,11 @@ class ConnectHardwareForm extends Component {
return null return null
} }
this.setState({ btnText: this.context.t('connecting')}) this.setState({ btnText: this.context.t('connecting')})
this.getPage(1) this.getPage(0)
} }
onAccountChange = (account) => { onAccountChange = (account) => {
this.setState({selectedAccount: account, error: null}) this.setState({selectedAccount: account.toString(), error: null})
} }
getPage = (page) => { getPage = (page) => {
@ -35,7 +36,16 @@ class ConnectHardwareForm extends Component {
.connectHardware('trezor', page) .connectHardware('trezor', page)
.then(accounts => { .then(accounts => {
if (accounts.length) { 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 => { .catch(e => {
@ -43,13 +53,23 @@ class ConnectHardwareForm extends Component {
}) })
} }
unlockAccount () { onUnlockAccount = () => {
if (this.state.selectedAccount === '') {
return Promise.reject({ error: this.context.t('accountSelectionRequired') }) 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 () { renderError () {
return this.state.error return this.state.error
@ -67,10 +87,13 @@ class ConnectHardwareForm extends Component {
return h(AccountList, { return h(AccountList, {
accounts: this.state.accounts, accounts: this.state.accounts,
selectedAccount: this.state.selectedAccount,
onAccountChange: this.onAccountChange, onAccountChange: this.onAccountChange,
network: this.props.network, network: this.props.network,
getPage: this.getPage, getPage: this.getPage,
history: this.props.history, history: this.props.history,
onUnlockAccount: this.onUnlockAccount,
onCancel: this.onCancel,
}) })
} }