|
|
|
@ -3,7 +3,8 @@ const connect = require('react-redux').connect |
|
|
|
|
const h = require('react-hyperscript') |
|
|
|
|
const inherits = require('util').inherits |
|
|
|
|
const Identicon = require('./identicon') |
|
|
|
|
const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns |
|
|
|
|
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
|
|
|
|
|
const copyToClipboard = require('copy-to-clipboard') |
|
|
|
|
const actions = require('../actions') |
|
|
|
|
const BalanceComponent = require('./balance-component') |
|
|
|
|
const TokenList = require('./token-list') |
|
|
|
@ -19,6 +20,7 @@ function mapStateToProps (state) { |
|
|
|
|
identities: state.metamask.identities, |
|
|
|
|
accounts: state.metamask.accounts, |
|
|
|
|
tokens: state.metamask.tokens, |
|
|
|
|
keyrings: state.metamask.keyrings, |
|
|
|
|
selectedAddress: selectors.getSelectedAddress(state), |
|
|
|
|
selectedIdentity: selectors.getSelectedIdentity(state), |
|
|
|
|
selectedAccount: selectors.getSelectedAccount(state), |
|
|
|
@ -28,9 +30,12 @@ function mapStateToProps (state) { |
|
|
|
|
|
|
|
|
|
function mapDispatchToProps (dispatch) { |
|
|
|
|
return { |
|
|
|
|
showSendPage: () => { dispatch(actions.showSendPage()) }, |
|
|
|
|
hideSidebar: () => { dispatch(actions.hideSidebar()) }, |
|
|
|
|
showSendPage: () => dispatch(actions.showSendPage()), |
|
|
|
|
hideSidebar: () => dispatch(actions.hideSidebar()), |
|
|
|
|
unsetSelectedToken: () => dispatch(actions.setSelectedToken()), |
|
|
|
|
showAccountDetailModal: () => { |
|
|
|
|
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' })) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -47,7 +52,7 @@ WalletView.prototype.renderWalletBalance = function () { |
|
|
|
|
hideSidebar, |
|
|
|
|
sidebarOpen, |
|
|
|
|
} = this.props |
|
|
|
|
console.log({ selectedAccount }) |
|
|
|
|
|
|
|
|
|
const selectedClass = selectedTokenAddress |
|
|
|
|
? '' |
|
|
|
|
: 'wallet-balance-wrapper--active' |
|
|
|
@ -73,13 +78,24 @@ WalletView.prototype.renderWalletBalance = function () { |
|
|
|
|
|
|
|
|
|
WalletView.prototype.render = function () { |
|
|
|
|
const { |
|
|
|
|
network, responsiveDisplayClassname, identities, |
|
|
|
|
selectedAddress, accounts, |
|
|
|
|
responsiveDisplayClassname, |
|
|
|
|
selectedAddress, |
|
|
|
|
selectedIdentity, |
|
|
|
|
keyrings, |
|
|
|
|
showAccountDetailModal, |
|
|
|
|
hideSidebar, |
|
|
|
|
} = this.props |
|
|
|
|
// temporary logs + fake extra wallets
|
|
|
|
|
// console.log('walletview, selectedAccount:', selectedAccount)
|
|
|
|
|
|
|
|
|
|
const keyring = keyrings.find((kr) => { |
|
|
|
|
return kr.accounts.includes(selectedAddress) || |
|
|
|
|
kr.accounts.includes(selectedIdentity.address) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const type = keyring.type |
|
|
|
|
const isLoose = type !== 'HD Key Tree' |
|
|
|
|
|
|
|
|
|
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), { |
|
|
|
|
style: {}, |
|
|
|
|
}, [ |
|
|
|
@ -88,57 +104,15 @@ WalletView.prototype.render = function () { |
|
|
|
|
h('div.flex-column.wallet-view-account-details', { |
|
|
|
|
style: {}, |
|
|
|
|
}, [ |
|
|
|
|
h('div.wallet-view__sidebar-close', { |
|
|
|
|
onClick: hideSidebar, |
|
|
|
|
}), |
|
|
|
|
|
|
|
|
|
h('div.flex-row.account-options-menu', { |
|
|
|
|
style: { |
|
|
|
|
position: 'relative', |
|
|
|
|
}, |
|
|
|
|
}, [ |
|
|
|
|
|
|
|
|
|
h(AccountDropdowns, { |
|
|
|
|
selected: selectedAddress, |
|
|
|
|
network, |
|
|
|
|
identities, |
|
|
|
|
useCssTransition: true, |
|
|
|
|
enableAccountOptions: true, |
|
|
|
|
dropdownWrapperStyle: { |
|
|
|
|
padding: '1px 15px', |
|
|
|
|
marginLeft: '-25px', |
|
|
|
|
position: 'absolute', |
|
|
|
|
width: '122%', // TODO, refactor all of this component out into media queries
|
|
|
|
|
}, |
|
|
|
|
menuItemStyles: { |
|
|
|
|
padding: '0px 0px', |
|
|
|
|
margin: '22px 0px', |
|
|
|
|
}, |
|
|
|
|
}, []), |
|
|
|
|
|
|
|
|
|
]), |
|
|
|
|
h('div.wallet-view__keyring-label', isLoose ? 'IMPORTED' : ''), |
|
|
|
|
|
|
|
|
|
h('div.flex-column.flex-center', { |
|
|
|
|
style: { margin: '0 auto' }, |
|
|
|
|
}, [ |
|
|
|
|
h('div', { |
|
|
|
|
style: { |
|
|
|
|
position: 'relative', |
|
|
|
|
}, |
|
|
|
|
}, [ |
|
|
|
|
h(AccountDropdowns, { |
|
|
|
|
accounts, |
|
|
|
|
style: { |
|
|
|
|
position: 'absolute', |
|
|
|
|
left: 'calc(50% + 28px + 5.5px)', |
|
|
|
|
top: '14px', |
|
|
|
|
}, |
|
|
|
|
innerStyle: { |
|
|
|
|
padding: '10px 16px', |
|
|
|
|
}, |
|
|
|
|
useCssTransition: true, |
|
|
|
|
selected: selectedAddress, |
|
|
|
|
network, |
|
|
|
|
identities, |
|
|
|
|
}, []), |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
h(Identicon, { |
|
|
|
|
diameter: 54, |
|
|
|
|
address: selectedAddress, |
|
|
|
@ -149,14 +123,20 @@ WalletView.prototype.render = function () { |
|
|
|
|
}, [ |
|
|
|
|
selectedIdentity.name, |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
]), |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
h('button.wallet-view__details-button', { onClick: showAccountDetailModal }, 'DETAILS'), |
|
|
|
|
|
|
|
|
|
h('div.wallet-view__address', { onClick: () => copyToClipboard(selectedAddress) }, [ |
|
|
|
|
`${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`, |
|
|
|
|
h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }), |
|
|
|
|
]), |
|
|
|
|
|
|
|
|
|
// 'Wallet' - Title
|
|
|
|
|
// Not visible on mobile
|
|
|
|
|
h('div.flex-column.wallet-view-title-wrapper', {}, [ |
|
|
|
|
h('span.wallet-view-title', {}, [ |
|
|
|
|
h('div.flex-column.wallet-view-title-wrapper', [ |
|
|
|
|
h('span.wallet-view-title', [ |
|
|
|
|
'Wallet', |
|
|
|
|
]), |
|
|
|
|
]), |
|
|
|
|