mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
7d5aaaa5bd
Scrolling to the bottom of the accounts page now reveals a downward-facing chevron button. Pressing this button shows loading indication, adds a new account to the identity vault, displays it in the list, and scrolls the list to the bottom of the page. Any number of accounts can be generated in this way, and the UX feels intuitive without having to overly explain how HD paths work.
180 lines
5.0 KiB
JavaScript
180 lines
5.0 KiB
JavaScript
const inherits = require('util').inherits
|
|
const Component = require('react').Component
|
|
const h = require('react-hyperscript')
|
|
const connect = require('react-redux').connect
|
|
const extend = require('xtend')
|
|
const Identicon = require('./components/identicon')
|
|
const actions = require('./actions')
|
|
const EtherBalance = require('./components/eth-balance')
|
|
const valuesFor = require('./util').valuesFor
|
|
const addressSummary = require('./util').addressSummary
|
|
const formatBalance = require('./util').formatBalance
|
|
const findDOMNode = require('react-dom').findDOMNode
|
|
|
|
module.exports = connect(mapStateToProps)(AccountsScreen)
|
|
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
accounts: state.metamask.accounts,
|
|
identities: state.metamask.identities,
|
|
unconfTxs: state.metamask.unconfTxs,
|
|
selectedAddress: state.metamask.selectedAddress,
|
|
currentDomain: state.appState.currentDomain,
|
|
scrollToBottom: state.appState.scrollToBottom,
|
|
}
|
|
}
|
|
|
|
inherits(AccountsScreen, Component)
|
|
function AccountsScreen() {
|
|
Component.call(this)
|
|
}
|
|
|
|
|
|
AccountsScreen.prototype.render = function() {
|
|
var state = this.props
|
|
var identityList = valuesFor(state.identities)
|
|
var unconfTxList = valuesFor(state.unconfTxs)
|
|
var actions = {
|
|
onSelect: this.onSelect.bind(this),
|
|
onShowDetail: this.onShowDetail.bind(this),
|
|
revealAccount: this.onRevealAccount.bind(this),
|
|
}
|
|
return (
|
|
|
|
h('.accounts-section.flex-grow', [
|
|
|
|
// subtitle and nav
|
|
h('.section-title.flex-center', [
|
|
h('i.fa.fa-arrow-left.fa-lg.pointer.hover-white', {
|
|
onClick: (event) => {
|
|
state.dispatch(actions.goHome())
|
|
}
|
|
}),
|
|
h('h2.page-subtitle', 'Select Account'),
|
|
]),
|
|
|
|
h('hr.horizontal-line'),
|
|
|
|
// identity selection
|
|
h('section.identity-section.flex-column', {
|
|
style: {
|
|
height: '418px',
|
|
overflowY: 'auto',
|
|
overflowX: 'hidden',
|
|
}
|
|
},
|
|
[
|
|
identityList.map(renderAccountPanel),
|
|
|
|
h('hr.horizontal-line', {key: 'horizontal-line1'}),
|
|
h('div.footer.hover-white.pointer', {
|
|
key: 'reveal-account-bar',
|
|
onClick:() => {
|
|
actions.revealAccount()
|
|
},
|
|
style: {
|
|
display: 'flex',
|
|
flex: '1 0 auto',
|
|
height: '40px',
|
|
paddint: '10px',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}
|
|
}, [
|
|
h('i.fa.fa-chevron-down.fa-lg', {key: ''}),
|
|
]),
|
|
]),
|
|
|
|
unconfTxList.length ? (
|
|
|
|
h('.unconftx-link.flex-row.flex-center', {
|
|
onClick: this.navigateToConfTx.bind(this),
|
|
}, [
|
|
h('span', 'Unconfirmed Txs'),
|
|
h('i.fa.fa-arrow-right.fa-lg'),
|
|
])
|
|
|
|
) : (
|
|
null
|
|
),
|
|
])
|
|
)
|
|
|
|
function renderAccountPanel(identity){
|
|
var mayBeFauceting = identity.mayBeFauceting
|
|
var isSelected = state.selectedAddress === identity.address
|
|
var account = state.accounts[identity.address]
|
|
var isFauceting = mayBeFauceting && account.balance === '0x0'
|
|
var componentState = extend(actions, {
|
|
identity: identity,
|
|
account: account,
|
|
isSelected: false,
|
|
isFauceting: isFauceting,
|
|
})
|
|
|
|
return (
|
|
h('.accounts-list-option.flex-row.flex-space-between.cursor-pointer', {
|
|
key: `account-panel-${identity.address}`,
|
|
style: {
|
|
flex: '1 0 auto',
|
|
background: isSelected ? 'white' : 'none',
|
|
},
|
|
onClick: (event) => actions.onShowDetail(identity.address, event),
|
|
}, [
|
|
|
|
h('.identicon-wrapper.flex-column.flex-center.select-none', [
|
|
h(Identicon, {
|
|
address: identity.address
|
|
}),
|
|
]),
|
|
|
|
// account address, balance
|
|
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', [
|
|
|
|
h('span', identity.name),
|
|
h('span.font-small', addressSummary(identity.address)),
|
|
// h('span.font-small', formatBalance(account.balance)),
|
|
h(EtherBalance, {
|
|
value: account.balance,
|
|
}),
|
|
|
|
]),
|
|
|
|
])
|
|
)
|
|
}
|
|
}
|
|
|
|
// If a new account was revealed, scroll to the bottom
|
|
AccountsScreen.prototype.componentDidUpdate = function(){
|
|
const scrollToBottom = this.props.scrollToBottom
|
|
|
|
if (scrollToBottom) {
|
|
var container = findDOMNode(this)
|
|
var scrollable = container.querySelector('.identity-section')
|
|
scrollable.scrollTop = scrollable.scrollHeight
|
|
}
|
|
}
|
|
|
|
AccountsScreen.prototype.navigateToConfTx = function(){
|
|
event.stopPropagation()
|
|
this.props.dispatch(actions.showConfTxPage())
|
|
}
|
|
|
|
AccountsScreen.prototype.onSelect = function(address, event){
|
|
event.stopPropagation()
|
|
// if already selected, deselect
|
|
if (this.props.selectedAddress === address) address = null
|
|
this.props.dispatch(actions.setSelectedAddress(address))
|
|
}
|
|
|
|
AccountsScreen.prototype.onShowDetail = function(address, event){
|
|
event.stopPropagation()
|
|
this.props.dispatch(actions.showAccountDetail(address))
|
|
}
|
|
|
|
AccountsScreen.prototype.onRevealAccount = function() {
|
|
this.props.dispatch(actions.revealAccount())
|
|
}
|