1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/app/components/wallet-view.js
Whymarrh Whitby 665ac860e5 Remove selectedIdentity prop from wallet view
The selectedIdentity property is computed based on the selectedAddress
which means that using both the selectedAddress and the selectedIdentity
is redundant. In the case of the Array#find call on the set of keyrings,
we wouldn't have a situation where one is included and the other isn't.

This changeset removes the selectedIdentity from the wallet view because
it isn't needed.
2018-06-05 12:25:06 -07:00

205 lines
5.7 KiB
JavaScript

const Component = require('react').Component
const PropTypes = require('prop-types')
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const { withRouter } = require('react-router-dom')
const { compose } = require('recompose')
const inherits = require('util').inherits
const classnames = require('classnames')
const { checksumAddress } = require('../util')
const Identicon = require('./identicon')
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
const Tooltip = require('./tooltip-v2.js')
const copyToClipboard = require('copy-to-clipboard')
const actions = require('../actions')
const BalanceComponent = require('./balance-component')
const TokenList = require('./token-list')
const selectors = require('../selectors')
const { ADD_TOKEN_ROUTE } = require('../routes')
module.exports = compose(
withRouter,
connect(mapStateToProps, mapDispatchToProps)
)(WalletView)
WalletView.contextTypes = {
t: PropTypes.func,
}
function mapStateToProps (state) {
return {
network: state.metamask.network,
sidebarOpen: state.appState.sidebarOpen,
identities: state.metamask.identities,
accounts: state.metamask.accounts,
tokens: state.metamask.tokens,
keyrings: state.metamask.keyrings,
selectedAddress: selectors.getSelectedAddress(state),
selectedAccount: selectors.getSelectedAccount(state),
selectedTokenAddress: state.metamask.selectedTokenAddress,
}
}
function mapDispatchToProps (dispatch) {
return {
showSendPage: () => dispatch(actions.showSendPage()),
hideSidebar: () => dispatch(actions.hideSidebar()),
unsetSelectedToken: () => dispatch(actions.setSelectedToken()),
showAccountDetailModal: () => {
dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
},
showAddTokenPage: () => dispatch(actions.showAddTokenPage()),
}
}
inherits(WalletView, Component)
function WalletView () {
Component.call(this)
this.state = {
hasCopied: false,
copyToClipboardPressed: false,
}
}
WalletView.prototype.renderWalletBalance = function () {
const {
selectedTokenAddress,
selectedAccount,
unsetSelectedToken,
hideSidebar,
sidebarOpen,
} = this.props
const selectedClass = selectedTokenAddress
? ''
: 'wallet-balance-wrapper--active'
const className = `flex-column wallet-balance-wrapper ${selectedClass}`
return h('div', { className }, [
h('div.wallet-balance',
{
onClick: () => {
unsetSelectedToken()
selectedTokenAddress && sidebarOpen && hideSidebar()
},
},
[
h(BalanceComponent, {
balanceValue: selectedAccount ? selectedAccount.balance : '',
style: {},
}),
]
),
])
}
WalletView.prototype.render = function () {
const {
responsiveDisplayClassname,
selectedAddress,
keyrings,
showAccountDetailModal,
sidebarOpen,
hideSidebar,
history,
identities,
} = this.props
// temporary logs + fake extra wallets
// console.log('walletview, selectedAccount:', selectedAccount)
const checksummedAddress = checksumAddress(selectedAddress)
if (!selectedAddress) {
throw new Error('selectedAddress should not be ' + String(selectedAddress))
}
const keyring = keyrings.find((kr) => {
return kr.accounts.includes(selectedAddress)
})
const type = keyring.type
const isLoose = type !== 'HD Key Tree'
return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
style: {},
}, [
// TODO: Separate component: wallet account details
h('div.flex-column.wallet-view-account-details', {
style: {},
}, [
h('div.wallet-view__sidebar-close', {
onClick: hideSidebar,
}),
h('div.wallet-view__keyring-label.allcaps', isLoose ? this.context.t('imported') : ''),
h('div.flex-column.flex-center.wallet-view__name-container', {
style: { margin: '0 auto' },
onClick: showAccountDetailModal,
}, [
h(Identicon, {
diameter: 54,
address: checksummedAddress,
}),
h('span.account-name', {
style: {},
}, [
identities[selectedAddress].name,
]),
h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
]),
]),
h(Tooltip, {
position: 'bottom',
title: this.state.hasCopied ? this.context.t('copiedExclamation') : this.context.t('copyToClipboard'),
wrapperClassName: 'wallet-view__tooltip',
}, [
h('button.wallet-view__address', {
className: classnames({
'wallet-view__address__pressed': this.state.copyToClipboardPressed,
}),
onClick: () => {
copyToClipboard(checksummedAddress)
this.setState({ hasCopied: true })
setTimeout(() => this.setState({ hasCopied: false }), 3000)
},
onMouseDown: () => {
this.setState({ copyToClipboardPressed: true })
},
onMouseUp: () => {
this.setState({ copyToClipboardPressed: false })
},
}, [
`${checksummedAddress.slice(0, 4)}...${checksummedAddress.slice(-4)}`,
h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
]),
]),
this.renderWalletBalance(),
h(TokenList),
h('button.btn-primary.wallet-view__add-token-button', {
onClick: () => {
history.push(ADD_TOKEN_ROUTE)
sidebarOpen && hideSidebar()
},
}, this.context.t('addToken')),
])
}
// TODO: Extra wallets, for dev testing. Remove when PRing to master.
// const extraWallet = h('div.flex-column.wallet-balance-wrapper', {}, [
// h('div.wallet-balance', {}, [
// h(BalanceComponent, {
// balanceValue: selectedAccount.balance,
// style: {},
// }),
// ]),
// ])