mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Split WalletView into component and container files (#7546)
This commit is contained in:
Whymarrh Whitby
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: {},
|
||||
// }),
|
||||
// ]),
|
||||
// ])
|
||||
1
ui/app/components/app/wallet-view/index.js
Normal file
1
ui/app/components/app/wallet-view/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './wallet-view.container'
|
||||
132
ui/app/components/app/wallet-view/wallet-view.component.js
Normal file
132
ui/app/components/app/wallet-view/wallet-view.component.js
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
}
|
||||
33
ui/app/components/app/wallet-view/wallet-view.container.js
Normal file
33
ui/app/components/app/wallet-view/wallet-view.container.js
Normal file
@ -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
Block a user