Split WalletView into component and container files (#7546)
Whymarrh Whitby
5 years ago
committed by
GitHub
parent
1ffaa330ad
commit
2b4c99e031
@ -1,178 +0,0 @@ |
|||||||
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 { checksumAddress } = require('../../helpers/utils/util') |
|
||||||
// const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
|
|
||||||
const actions = require('../../store/actions') |
|
||||||
import BalanceComponent from '../ui/balance' |
|
||||||
const TokenList = require('./token-list') |
|
||||||
const selectors = require('../../selectors/selectors') |
|
||||||
const { ADD_TOKEN_ROUTE } = require('../../helpers/constants/routes') |
|
||||||
|
|
||||||
import AddTokenButton from './add-token-button' |
|
||||||
import AccountDetails from './account-details' |
|
||||||
|
|
||||||
module.exports = compose( |
|
||||||
withRouter, |
|
||||||
connect(mapStateToProps, mapDispatchToProps) |
|
||||||
)(WalletView) |
|
||||||
|
|
||||||
WalletView.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
metricsEvent: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
WalletView.defaultProps = { |
|
||||||
responsiveDisplayClassname: '', |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
|
|
||||||
return { |
|
||||||
network: state.metamask.network, |
|
||||||
sidebarOpen: state.appState.sidebar.isOpen, |
|
||||||
identities: state.metamask.identities, |
|
||||||
accounts: selectors.getMetaMaskAccounts(state), |
|
||||||
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()), |
|
||||||
showAddTokenPage: () => dispatch(actions.showAddTokenPage()), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
inherits(WalletView, Component) |
|
||||||
function WalletView () { |
|
||||||
Component.call(this) |
|
||||||
} |
|
||||||
|
|
||||||
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.renderAddToken = function () { |
|
||||||
const { |
|
||||||
sidebarOpen, |
|
||||||
hideSidebar, |
|
||||||
history, |
|
||||||
} = this.props |
|
||||||
const { metricsEvent } = this.context |
|
||||||
|
|
||||||
return h(AddTokenButton, { |
|
||||||
onClick () { |
|
||||||
history.push(ADD_TOKEN_ROUTE) |
|
||||||
metricsEvent({ |
|
||||||
eventOpts: { |
|
||||||
category: 'Navigation', |
|
||||||
action: 'Token Menu', |
|
||||||
name: 'Clicked "Add Token"', |
|
||||||
}, |
|
||||||
}) |
|
||||||
if (sidebarOpen) { |
|
||||||
hideSidebar() |
|
||||||
} |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
WalletView.prototype.render = function () { |
|
||||||
const { |
|
||||||
responsiveDisplayClassname, |
|
||||||
selectedAddress, |
|
||||||
keyrings, |
|
||||||
identities, |
|
||||||
network, |
|
||||||
} = this.props |
|
||||||
// temporary logs + fake extra wallets
|
|
||||||
|
|
||||||
const checksummedAddress = checksumAddress(selectedAddress, network) |
|
||||||
|
|
||||||
if (!selectedAddress) { |
|
||||||
throw new Error('selectedAddress should not be ' + String(selectedAddress)) |
|
||||||
} |
|
||||||
|
|
||||||
const keyring = keyrings.find((kr) => { |
|
||||||
return kr.accounts.includes(selectedAddress) |
|
||||||
}) |
|
||||||
|
|
||||||
let label = '' |
|
||||||
let type |
|
||||||
if (keyring) { |
|
||||||
type = keyring.type |
|
||||||
if (type !== 'HD Key Tree') { |
|
||||||
if (type.toLowerCase().search('hardware') !== -1) { |
|
||||||
label = this.context.t('hardware') |
|
||||||
} else { |
|
||||||
label = this.context.t('imported') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return h('div.wallet-view.flex-column', { |
|
||||||
style: {}, |
|
||||||
className: responsiveDisplayClassname, |
|
||||||
}, [ |
|
||||||
|
|
||||||
h(AccountDetails, { |
|
||||||
label, |
|
||||||
checksummedAddress, |
|
||||||
name: identities[selectedAddress].name, |
|
||||||
}), |
|
||||||
|
|
||||||
this.renderWalletBalance(), |
|
||||||
|
|
||||||
h(TokenList), |
|
||||||
|
|
||||||
this.renderAddToken(), |
|
||||||
]) |
|
||||||
} |
|
||||||
|
|
||||||
// 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: {},
|
|
||||||
// }),
|
|
||||||
// ]),
|
|
||||||
// ])
|
|
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './wallet-view.container' |
||||||
@ -0,0 +1,132 @@ |
|||||||
|
import classnames from 'classnames' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import React, { Component } from 'react' |
||||||
|
import BalanceComponent from '../../ui/balance' |
||||||
|
import AddTokenButton from '../add-token-button' |
||||||
|
import AccountDetails from '../account-details' |
||||||
|
|
||||||
|
const { checksumAddress } = require('../../../helpers/utils/util') |
||||||
|
const TokenList = require('../token-list') |
||||||
|
const { ADD_TOKEN_ROUTE } = require('../../../helpers/constants/routes') |
||||||
|
|
||||||
|
export default class WalletView extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
metricsEvent: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
static defaultProps = { |
||||||
|
responsiveDisplayClassname: '', |
||||||
|
selectedAccount: null, |
||||||
|
selectedTokenAddress: null, |
||||||
|
} |
||||||
|
|
||||||
|
static propTypes = { |
||||||
|
selectedTokenAddress: PropTypes.string, |
||||||
|
selectedAccount: PropTypes.object, |
||||||
|
selectedAddress: PropTypes.string.isRequired, |
||||||
|
keyrings: PropTypes.array.isRequired, |
||||||
|
responsiveDisplayClassname: PropTypes.string, |
||||||
|
identities: PropTypes.object.isRequired, |
||||||
|
history: PropTypes.object.isRequired, |
||||||
|
unsetSelectedToken: PropTypes.func.isRequired, |
||||||
|
sidebarOpen: PropTypes.bool.isRequired, |
||||||
|
hideSidebar: PropTypes.func.isRequired, |
||||||
|
} |
||||||
|
|
||||||
|
renderWalletBalance () { |
||||||
|
const { |
||||||
|
selectedTokenAddress, |
||||||
|
selectedAccount, |
||||||
|
unsetSelectedToken, |
||||||
|
hideSidebar, |
||||||
|
sidebarOpen, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classnames('flex-column', 'wallet-balance-wrapper', { |
||||||
|
'wallet-balance-wrapper--active': Boolean(selectedTokenAddress), |
||||||
|
})}> |
||||||
|
<div |
||||||
|
className="wallet-balance" |
||||||
|
onClick={() => { |
||||||
|
unsetSelectedToken() |
||||||
|
selectedTokenAddress && sidebarOpen && hideSidebar() |
||||||
|
}} |
||||||
|
> |
||||||
|
<BalanceComponent |
||||||
|
balanceValue={selectedAccount ? selectedAccount.balance : ''} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderAddToken () { |
||||||
|
const { |
||||||
|
sidebarOpen, |
||||||
|
hideSidebar, |
||||||
|
history, |
||||||
|
} = this.props |
||||||
|
const { metricsEvent } = this.context |
||||||
|
|
||||||
|
return ( |
||||||
|
<AddTokenButton |
||||||
|
onClick={() => { |
||||||
|
history.push(ADD_TOKEN_ROUTE) |
||||||
|
metricsEvent({ |
||||||
|
eventOpts: { |
||||||
|
category: 'Navigation', |
||||||
|
action: 'Token Menu', |
||||||
|
name: 'Clicked "Add Token"', |
||||||
|
}, |
||||||
|
}) |
||||||
|
if (sidebarOpen) { |
||||||
|
hideSidebar() |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
responsiveDisplayClassname, |
||||||
|
selectedAddress, |
||||||
|
keyrings, |
||||||
|
identities, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
const checksummedAddress = checksumAddress(selectedAddress) |
||||||
|
|
||||||
|
const keyring = keyrings.find((kr) => { |
||||||
|
return kr.accounts.includes(selectedAddress) |
||||||
|
}) |
||||||
|
|
||||||
|
let label = '' |
||||||
|
let type |
||||||
|
if (keyring) { |
||||||
|
type = keyring.type |
||||||
|
if (type !== 'HD Key Tree') { |
||||||
|
if (type.toLowerCase().search('hardware') !== -1) { |
||||||
|
label = this.context.t('hardware') |
||||||
|
} else { |
||||||
|
label = this.context.t('imported') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={classnames('wallet-view', 'flex-column', responsiveDisplayClassname)}> |
||||||
|
<AccountDetails |
||||||
|
label={label} |
||||||
|
checksummedAddress={checksummedAddress} |
||||||
|
name={identities[selectedAddress].name} |
||||||
|
/> |
||||||
|
{this.renderWalletBalance()} |
||||||
|
<TokenList /> |
||||||
|
{this.renderAddToken()} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { compose } from 'recompose' |
||||||
|
import WalletView from './wallet-view.component' |
||||||
|
import {showSendPage, hideSidebar, setSelectedToken, showAddTokenPage} from '../../../store/actions' |
||||||
|
import * as selectors from '../../../selectors/selectors' |
||||||
|
|
||||||
|
function mapStateToProps (state) { |
||||||
|
return { |
||||||
|
network: state.metamask.network, |
||||||
|
sidebarOpen: state.appState.sidebar.isOpen, |
||||||
|
identities: state.metamask.identities, |
||||||
|
accounts: selectors.getMetaMaskAccounts(state), |
||||||
|
keyrings: state.metamask.keyrings, |
||||||
|
selectedAddress: selectors.getSelectedAddress(state), |
||||||
|
selectedAccount: selectors.getSelectedAccount(state), |
||||||
|
selectedTokenAddress: state.metamask.selectedTokenAddress, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function mapDispatchToProps (dispatch) { |
||||||
|
return { |
||||||
|
showSendPage: () => dispatch(showSendPage()), |
||||||
|
hideSidebar: () => dispatch(hideSidebar()), |
||||||
|
unsetSelectedToken: () => dispatch(setSelectedToken()), |
||||||
|
showAddTokenPage: () => dispatch(showAddTokenPage()), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(WalletView) |
||||||
Loading…
Reference in new issue