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

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

45
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,10 +18,6 @@ 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')]),
@ -39,6 +34,7 @@ export default class AccountList extends Component {
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',
@ -64,9 +60,6 @@ export default class AccountList extends Component {
}
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

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

@ -2,20 +2,14 @@ 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', {}, [
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')),
@ -26,27 +20,25 @@ export default class ConnectScreen extends Component {
url: 'https://google.com/chrome',
}), style: { margin: 12 } },
this.context.t('downloadGoogleChrome')
)]
),
])
)
}
renderConnectButton () {
return !this.state.accounts.length
? h(
return h(
'button.btn-primary.btn--large',
{ onClick: this.connectToTrezor, style: { margin: 12 } },
{ onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } },
this.props.btnText
)
: null
}
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

43
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') })
}
return this.props.unlockTrezorAccount(this.state.selectedAccount)
onUnlockAccount = () => {
if (this.state.selectedAccount === null) {
this.setState({ error: this.context.t('accountSelectionRequired') })
}
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,
})
}