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