sdtsui
7 years ago
parent
2adfce772c
commit
fce7bf3a1c
@ -1,91 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const ethUtil = require('ethereumjs-util') |
||||
|
||||
const EthBalance = require('../components/eth-balance') |
||||
const CopyButton = require('../components/copyButton') |
||||
const Identicon = require('../components/identicon') |
||||
|
||||
module.exports = AccountListItem |
||||
|
||||
inherits(AccountListItem, Component) |
||||
function AccountListItem () { |
||||
Component.call(this) |
||||
} |
||||
|
||||
AccountListItem.prototype.render = function () { |
||||
const { identity, selectedAddress, accounts, onShowDetail, |
||||
conversionRate, currentCurrency } = this.props |
||||
|
||||
const checksumAddress = identity && identity.address && ethUtil.toChecksumAddress(identity.address) |
||||
const isSelected = selectedAddress === identity.address |
||||
const account = accounts[identity.address] |
||||
const selectedClass = isSelected ? '.selected' : '' |
||||
|
||||
return ( |
||||
h(`.accounts-list-option.flex-row.flex-space-between.pointer.hover-white${selectedClass}`, { |
||||
key: `account-panel-${identity.address}`, |
||||
onClick: (event) => onShowDetail(identity.address, event), |
||||
}, [ |
||||
|
||||
h('.identicon-wrapper.flex-column.flex-center.select-none', [ |
||||
this.pendingOrNot(), |
||||
this.indicateIfLoose(), |
||||
h(Identicon, { |
||||
address: identity.address, |
||||
imageify: true, |
||||
}), |
||||
]), |
||||
|
||||
// account address, balance
|
||||
h('.identity-data.flex-column.flex-justify-center.flex-grow.select-none', { |
||||
style: { |
||||
width: '200px', |
||||
}, |
||||
}, [ |
||||
h('span', identity.name), |
||||
h('span.font-small', { |
||||
style: { |
||||
overflow: 'hidden', |
||||
textOverflow: 'ellipsis', |
||||
}, |
||||
}, checksumAddress), |
||||
h(EthBalance, { |
||||
value: account && account.balance, |
||||
currentCurrency, |
||||
conversionRate, |
||||
style: { |
||||
lineHeight: '7px', |
||||
marginTop: '10px', |
||||
}, |
||||
}), |
||||
]), |
||||
|
||||
// copy button
|
||||
h('.identity-copy.flex-column', { |
||||
style: { |
||||
margin: '0 20px', |
||||
}, |
||||
}, [ |
||||
h(CopyButton, { |
||||
value: checksumAddress, |
||||
}), |
||||
]), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
AccountListItem.prototype.indicateIfLoose = function () { |
||||
try { // Sometimes keyrings aren't loaded yet:
|
||||
const type = this.props.keyring.type |
||||
const isLoose = type !== 'HD Key Tree' |
||||
return isLoose ? h('.keyring-label', 'LOOSE') : null |
||||
} catch (e) { return } |
||||
} |
||||
|
||||
AccountListItem.prototype.pendingOrNot = function () { |
||||
const pending = this.props.pending |
||||
if (pending.length === 0) return null |
||||
return h('.pending-dot', pending.length) |
||||
} |
||||
@ -1,163 +0,0 @@ |
||||
const inherits = require('util').inherits |
||||
const Component = require('react').Component |
||||
const h = require('react-hyperscript') |
||||
const connect = require('react-redux').connect |
||||
const actions = require('../actions') |
||||
const valuesFor = require('../util').valuesFor |
||||
const findDOMNode = require('react-dom').findDOMNode |
||||
const AccountListItem = require('./account-list-item') |
||||
|
||||
module.exports = connect(mapStateToProps)(AccountsScreen) |
||||
|
||||
function mapStateToProps (state) { |
||||
const pendingTxs = valuesFor(state.metamask.unapprovedTxs) |
||||
.filter(txMeta => txMeta.metamaskNetworkId === state.metamask.network) |
||||
const pendingMsgs = valuesFor(state.metamask.unapprovedMsgs) |
||||
const pending = pendingTxs.concat(pendingMsgs) |
||||
|
||||
return { |
||||
accounts: state.metamask.accounts, |
||||
identities: state.metamask.identities, |
||||
unapprovedTxs: state.metamask.unapprovedTxs, |
||||
selectedAddress: state.metamask.selectedAddress, |
||||
scrollToBottom: state.appState.scrollToBottom, |
||||
pending, |
||||
keyrings: state.metamask.keyrings, |
||||
conversionRate: state.metamask.conversionRate, |
||||
currentCurrency: state.metamask.currentCurrency, |
||||
} |
||||
} |
||||
|
||||
inherits(AccountsScreen, Component) |
||||
function AccountsScreen () { |
||||
Component.call(this) |
||||
} |
||||
|
||||
AccountsScreen.prototype.render = function () { |
||||
const props = this.props |
||||
const { keyrings, conversionRate, currentCurrency } = props |
||||
const identityList = valuesFor(props.identities) |
||||
const unapprovedTxList = valuesFor(props.unapprovedTxs) |
||||
|
||||
return ( |
||||
|
||||
h('.accounts-section.flex-grow', [ |
||||
|
||||
// subtitle and nav
|
||||
h('.section-title.flex-center', [ |
||||
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { |
||||
onClick: this.goHome.bind(this), |
||||
}), |
||||
h('h2.page-subtitle', 'Select Account'), |
||||
]), |
||||
|
||||
h('hr.horizontal-line'), |
||||
|
||||
// identity selection
|
||||
h('section.identity-section', { |
||||
style: { |
||||
overflowY: 'auto', |
||||
overflowX: 'hidden', |
||||
}, |
||||
}, |
||||
[ |
||||
identityList.map((identity) => { |
||||
const pending = this.props.pending.filter((txOrMsg) => { |
||||
if ('txParams' in txOrMsg) { |
||||
return txOrMsg.txParams.from === identity.address |
||||
} else if ('msgParams' in txOrMsg) { |
||||
return txOrMsg.msgParams.from === identity.address |
||||
} else { |
||||
return false |
||||
} |
||||
}) |
||||
|
||||
const simpleAddress = identity.address.substring(2).toLowerCase() |
||||
const keyring = keyrings.find((kr) => { |
||||
return kr.accounts.includes(simpleAddress) || |
||||
kr.accounts.includes(identity.address) |
||||
}) |
||||
|
||||
return h(AccountListItem, { |
||||
key: `acct-panel-${identity.address}`, |
||||
identity, |
||||
selectedAddress: this.props.selectedAddress, |
||||
conversionRate, |
||||
currentCurrency, |
||||
accounts: this.props.accounts, |
||||
onShowDetail: this.onShowDetail.bind(this), |
||||
pending, |
||||
keyring, |
||||
}) |
||||
}), |
||||
|
||||
h('hr.horizontal-line'), |
||||
h('div.footer.hover-white.pointer', { |
||||
key: 'reveal-account-bar', |
||||
onClick: () => { |
||||
this.addNewAccount() |
||||
}, |
||||
style: { |
||||
display: 'flex', |
||||
height: '40px', |
||||
padding: '10px', |
||||
justifyContent: 'center', |
||||
alignItems: 'center', |
||||
}, |
||||
}, [ |
||||
h('i.fa.fa-plus.fa-lg', {key: ''}), |
||||
]), |
||||
h('hr.horizontal-line'), |
||||
]), |
||||
|
||||
unapprovedTxList.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 |
||||
), |
||||
]) |
||||
) |
||||
} |
||||
|
||||
// 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.onShowDetail = function (address, event) { |
||||
event.stopPropagation() |
||||
this.props.dispatch(actions.showAccountDetail(address)) |
||||
} |
||||
|
||||
AccountsScreen.prototype.addNewAccount = function () { |
||||
this.props.dispatch(actions.addNewAccount(0)) |
||||
} |
||||
|
||||
/* An optional view proposed in this design: |
||||
* https://consensys.quip.com/zZVrAysM5znY
|
||||
AccountsScreen.prototype.addNewAccount = function () { |
||||
this.props.dispatch(actions.navigateToNewAccountScreen()) |
||||
} |
||||
*/ |
||||
|
||||
AccountsScreen.prototype.goHome = function () { |
||||
this.props.dispatch(actions.goHome()) |
||||
} |
||||
@ -0,0 +1,217 @@ |
||||
const Component = require('react').Component |
||||
const PropTypes = require('react').PropTypes |
||||
const h = require('react-hyperscript') |
||||
const actions = require('../actions') |
||||
const genAccountLink = require('../../lib/account-link.js') |
||||
const connect = require('react-redux').connect |
||||
const Dropdown = require('./dropdown').Dropdown |
||||
const DropdownMenuItem = require('./dropdown').DropdownMenuItem |
||||
const Identicon = require('./identicon') |
||||
const ethUtil = require('ethereumjs-util') |
||||
const copyToClipboard = require('copy-to-clipboard') |
||||
|
||||
class AccountDropdowns extends Component { |
||||
constructor (props) { |
||||
super(props) |
||||
this.state = { |
||||
overflowMenuActive: false, |
||||
switchingMenuActive: false, |
||||
} |
||||
} |
||||
|
||||
getAccounts () { |
||||
const { identities, selected } = this.props |
||||
|
||||
return Object.keys(identities).map((key) => { |
||||
const identity = identities[key] |
||||
const isSelected = identity.address === selected |
||||
|
||||
return h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => { |
||||
this.props.actions.showAccountDetail(identity.address) |
||||
}, |
||||
}, |
||||
[ |
||||
h( |
||||
Identicon, |
||||
{ |
||||
address: identity.address, |
||||
diameter: 16, |
||||
}, |
||||
), |
||||
h('span', { style: { marginLeft: '10px' } }, identity.name || ''), |
||||
h('span', { style: { marginLeft: '10px' } }, isSelected ? h('.check', '✓') : null), |
||||
] |
||||
) |
||||
}) |
||||
} |
||||
|
||||
render () { |
||||
const { style, actions } = this.props |
||||
const { switchingMenuActive, overflowMenuActive } = this.state |
||||
|
||||
return h( |
||||
'span', |
||||
{ |
||||
style: style, |
||||
}, |
||||
[ |
||||
h( |
||||
'i.fa.fa-angle-down', |
||||
{ |
||||
style: {}, |
||||
onClick: (event) => { |
||||
event.stopPropagation() |
||||
this.setState({ |
||||
switchingMenuActive: !switchingMenuActive, |
||||
overflowMenuActive: false, |
||||
}) |
||||
}, |
||||
}, |
||||
[ |
||||
h( |
||||
Dropdown, |
||||
{ |
||||
style: { |
||||
marginLeft: '-140px', |
||||
minWidth: '180px', |
||||
}, |
||||
isOpen: switchingMenuActive, |
||||
onClickOutside: () => { this.setState({ switchingMenuActive: false}) }, |
||||
}, |
||||
[ |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => actions.showConfigPage(), |
||||
}, |
||||
'Account Settings', |
||||
), |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => { |
||||
const { selected, network } = this.props |
||||
const url = genAccountLink(selected, network) |
||||
global.platform.openWindow({ url }) |
||||
}, |
||||
}, |
||||
'View account on Etherscan', |
||||
), |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => { |
||||
const { selected } = this.props |
||||
const checkSumAddress = selected && ethUtil.toChecksumAddress(selected) |
||||
copyToClipboard(checkSumAddress) |
||||
}, |
||||
}, |
||||
'Copy Address to clipboard', |
||||
), |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => { |
||||
actions.requestAccountExport() |
||||
}, |
||||
}, |
||||
'Export Private Key', |
||||
), |
||||
] |
||||
), |
||||
], |
||||
), |
||||
h( |
||||
'i.fa.fa-ellipsis-h', |
||||
{ |
||||
style: { 'marginLeft': '10px'}, |
||||
onClick: (event) => { |
||||
event.stopPropagation() |
||||
this.setState({ |
||||
overflowMenuActive: !overflowMenuActive, |
||||
switchingMenuActive: false, |
||||
}) |
||||
}, |
||||
}, |
||||
[ |
||||
h( |
||||
Dropdown, |
||||
{ |
||||
style: { |
||||
marginLeft: '-155px', |
||||
minWidth: '180px', |
||||
}, |
||||
isOpen: overflowMenuActive, |
||||
onClickOutside: () => { this.setState({ overflowMenuActive: false}) }, |
||||
}, |
||||
[ |
||||
...this.getAccounts(), |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => actions.addNewAccount(), |
||||
}, |
||||
[ |
||||
h( |
||||
Identicon, |
||||
{ |
||||
diameter: 16, |
||||
}, |
||||
), |
||||
h('span', { style: { marginLeft: '10px' } }, 'Create Account'), |
||||
], |
||||
), |
||||
h( |
||||
DropdownMenuItem, |
||||
{ |
||||
closeMenu: () => {}, |
||||
onClick: () => actions.showImportPage(), |
||||
}, |
||||
[ |
||||
h( |
||||
Identicon, |
||||
{ |
||||
diameter: 16, |
||||
}, |
||||
), |
||||
h('span', { style: { marginLeft: '10px' } }, 'Import Account'), |
||||
] |
||||
), |
||||
] |
||||
), |
||||
] |
||||
), |
||||
] |
||||
) |
||||
} |
||||
} |
||||
|
||||
AccountDropdowns.propTypes = { |
||||
identities: PropTypes.objectOf(PropTypes.object), |
||||
selected: PropTypes.string, |
||||
} |
||||
|
||||
const mapDispatchToProps = (dispatch, ownProps) => { |
||||
return { |
||||
actions: { |
||||
showConfigPage: () => dispatch(actions.showConfigPage()), |
||||
requestAccountExport: () => dispatch(actions.requestExportAccount()), |
||||
showAccountDetail: (address) => dispatch(actions.showAccountDetail(address)), |
||||
addNewAccount: () => dispatch(actions.addNewAccount()), |
||||
showImportPage: () => dispatch(actions.showImportPage()), |
||||
}, |
||||
} |
||||
} |
||||
|
||||
module.exports = { |
||||
AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), |
||||
} |
||||
Loading…
Reference in new issue