Split TokenCell into container and component files (#7560)
Whymarrh Whitby
5 years ago
committed by
GitHub
parent
724bd42e2c
commit
00060d787a
@ -1,177 +0,0 @@ |
||||
const Component = require('react').Component |
||||
const PropTypes = require('prop-types') |
||||
const h = require('react-hyperscript') |
||||
const inherits = require('util').inherits |
||||
const connect = require('react-redux').connect |
||||
import Identicon from '../ui/identicon' |
||||
const prefixForNetwork = require('../../../lib/etherscan-prefix-for-network') |
||||
const selectors = require('../../selectors/selectors') |
||||
const actions = require('../../store/actions') |
||||
const { conversionUtil, multiplyCurrencies } = require('../../helpers/utils/conversion-util') |
||||
|
||||
const TokenMenuDropdown = require('./dropdowns/token-menu-dropdown.js') |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
network: state.metamask.network, |
||||
currentCurrency: state.metamask.currentCurrency, |
||||
selectedTokenAddress: state.metamask.selectedTokenAddress, |
||||
userAddress: selectors.getSelectedAddress(state), |
||||
contractExchangeRates: state.metamask.contractExchangeRates, |
||||
conversionRate: state.metamask.conversionRate, |
||||
sidebarOpen: state.appState.sidebar.isOpen, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
setSelectedToken: address => dispatch(actions.setSelectedToken(address)), |
||||
hideSidebar: () => dispatch(actions.hideSidebar()), |
||||
} |
||||
} |
||||
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(TokenCell) |
||||
|
||||
inherits(TokenCell, Component) |
||||
function TokenCell () { |
||||
Component.call(this) |
||||
|
||||
this.state = { |
||||
tokenMenuOpen: false, |
||||
} |
||||
} |
||||
|
||||
TokenCell.contextTypes = { |
||||
metricsEvent: PropTypes.func, |
||||
} |
||||
|
||||
TokenCell.prototype.render = function () { |
||||
const { tokenMenuOpen } = this.state |
||||
const props = this.props |
||||
const { |
||||
address, |
||||
symbol, |
||||
string, |
||||
network, |
||||
setSelectedToken, |
||||
selectedTokenAddress, |
||||
contractExchangeRates, |
||||
conversionRate, |
||||
hideSidebar, |
||||
sidebarOpen, |
||||
currentCurrency, |
||||
// userAddress,
|
||||
image, |
||||
} = props |
||||
let currentTokenToFiatRate |
||||
let currentTokenInFiat |
||||
let formattedFiat = '' |
||||
|
||||
if (contractExchangeRates[address]) { |
||||
currentTokenToFiatRate = multiplyCurrencies( |
||||
contractExchangeRates[address], |
||||
conversionRate |
||||
) |
||||
currentTokenInFiat = conversionUtil(string, { |
||||
fromNumericBase: 'dec', |
||||
fromCurrency: symbol, |
||||
toCurrency: currentCurrency.toUpperCase(), |
||||
numberOfDecimals: 2, |
||||
conversionRate: currentTokenToFiatRate, |
||||
}) |
||||
formattedFiat = currentTokenInFiat.toString() === '0' |
||||
? '' |
||||
: `${currentTokenInFiat} ${currentCurrency.toUpperCase()}` |
||||
} |
||||
|
||||
const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol |
||||
|
||||
return ( |
||||
h('div.token-list-item', { |
||||
className: `token-list-item ${selectedTokenAddress === address ? 'token-list-item--active' : ''}`, |
||||
// style: { cursor: network === '1' ? 'pointer' : 'default' },
|
||||
// onClick: this.view.bind(this, address, userAddress, network),
|
||||
onClick: () => { |
||||
setSelectedToken(address) |
||||
this.context.metricsEvent({ |
||||
eventOpts: { |
||||
category: 'Navigation', |
||||
action: 'Token Menu', |
||||
name: 'Clicked Token', |
||||
}, |
||||
}) |
||||
selectedTokenAddress !== address && sidebarOpen && hideSidebar() |
||||
}, |
||||
}, [ |
||||
|
||||
h(Identicon, { |
||||
className: 'token-list-item__identicon', |
||||
diameter: 50, |
||||
address, |
||||
network, |
||||
image, |
||||
}), |
||||
|
||||
h('div.token-list-item__balance-ellipsis', null, [ |
||||
h('div.token-list-item__balance-wrapper', null, [ |
||||
h('div.token-list-item__token-balance', `${string || 0}`), |
||||
h('div.token-list-item__token-symbol', symbol), |
||||
showFiat && h('div.token-list-item__fiat-amount', { |
||||
style: {}, |
||||
}, formattedFiat), |
||||
]), |
||||
|
||||
h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', { |
||||
onClick: (e) => { |
||||
e.stopPropagation() |
||||
this.setState({ tokenMenuOpen: true }) |
||||
}, |
||||
}), |
||||
|
||||
]), |
||||
|
||||
|
||||
tokenMenuOpen && h(TokenMenuDropdown, { |
||||
onClose: () => this.setState({ tokenMenuOpen: false }), |
||||
token: { symbol, address }, |
||||
}), |
||||
|
||||
/* |
||||
h('button', { |
||||
onClick: this.send.bind(this, address), |
||||
}, 'SEND'), |
||||
*/ |
||||
|
||||
]) |
||||
) |
||||
} |
||||
|
||||
TokenCell.prototype.send = function (address, event) { |
||||
event.preventDefault() |
||||
event.stopPropagation() |
||||
const url = tokenFactoryFor(address) |
||||
if (url) { |
||||
navigateTo(url) |
||||
} |
||||
} |
||||
|
||||
TokenCell.prototype.view = function (address, userAddress, network) { |
||||
const url = etherscanLinkFor(address, userAddress, network) |
||||
if (url) { |
||||
navigateTo(url) |
||||
} |
||||
} |
||||
|
||||
function navigateTo (url) { |
||||
global.platform.openWindow({ url }) |
||||
} |
||||
|
||||
function etherscanLinkFor (tokenAddress, address, network) { |
||||
const prefix = prefixForNetwork(network) |
||||
return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}` |
||||
} |
||||
|
||||
function tokenFactoryFor (tokenAddress) { |
||||
return `https://tokenfactory.surge.sh/#/token/${tokenAddress}` |
||||
} |
||||
|
||||
@ -0,0 +1 @@ |
||||
export { default } from './token-cell.container' |
||||
@ -0,0 +1,140 @@ |
||||
import classnames from 'classnames' |
||||
import PropTypes from 'prop-types' |
||||
import React, { Component } from 'react' |
||||
import Identicon from '../../ui/identicon' |
||||
const prefixForNetwork = require('../../../../lib/etherscan-prefix-for-network') |
||||
const { conversionUtil, multiplyCurrencies } = require('../../../helpers/utils/conversion-util') |
||||
|
||||
const TokenMenuDropdown = require('../dropdowns/token-menu-dropdown.js') |
||||
|
||||
export default class TokenCell extends Component { |
||||
static contextTypes = { |
||||
metricsEvent: PropTypes.func, |
||||
} |
||||
|
||||
state = { |
||||
tokenMenuOpen: false, |
||||
} |
||||
|
||||
send (address, event) { |
||||
event.preventDefault() |
||||
event.stopPropagation() |
||||
const url = tokenFactoryFor(address) |
||||
if (url) { |
||||
navigateTo(url) |
||||
} |
||||
} |
||||
|
||||
view (address, userAddress, network) { |
||||
const url = etherscanLinkFor(address, userAddress, network) |
||||
if (url) { |
||||
navigateTo(url) |
||||
} |
||||
} |
||||
|
||||
render () { |
||||
const { tokenMenuOpen } = this.state |
||||
const props = this.props |
||||
const { |
||||
address, |
||||
symbol, |
||||
string, |
||||
network, |
||||
setSelectedToken, |
||||
selectedTokenAddress, |
||||
contractExchangeRates, |
||||
conversionRate, |
||||
hideSidebar, |
||||
sidebarOpen, |
||||
currentCurrency, |
||||
// userAddress,
|
||||
image, |
||||
} = props |
||||
let currentTokenToFiatRate |
||||
let currentTokenInFiat |
||||
let formattedFiat = '' |
||||
|
||||
if (contractExchangeRates[address]) { |
||||
currentTokenToFiatRate = multiplyCurrencies( |
||||
contractExchangeRates[address], |
||||
conversionRate |
||||
) |
||||
currentTokenInFiat = conversionUtil(string, { |
||||
fromNumericBase: 'dec', |
||||
fromCurrency: symbol, |
||||
toCurrency: currentCurrency.toUpperCase(), |
||||
numberOfDecimals: 2, |
||||
conversionRate: currentTokenToFiatRate, |
||||
}) |
||||
formattedFiat = currentTokenInFiat.toString() === '0' |
||||
? '' |
||||
: `${currentTokenInFiat} ${currentCurrency.toUpperCase()}` |
||||
} |
||||
|
||||
const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol |
||||
|
||||
return ( |
||||
<div |
||||
className={classnames(`token-list-item`, { |
||||
'token-list-item--active': selectedTokenAddress === address, |
||||
})} |
||||
onClick={() => { |
||||
setSelectedToken(address) |
||||
this.context.metricsEvent({ |
||||
eventOpts: { |
||||
category: 'Navigation', |
||||
action: 'Token Menu', |
||||
name: 'Clicked Token', |
||||
}, |
||||
}) |
||||
selectedTokenAddress !== address && sidebarOpen && hideSidebar() |
||||
}} |
||||
> |
||||
<Identicon |
||||
className="token-list-item__identicon" |
||||
diameter={50} |
||||
address={address} |
||||
network={network} |
||||
image={image} |
||||
/> |
||||
<div className="token-list-item__balance-ellipsis"> |
||||
<div className="token-list-item__balance-wrapper"> |
||||
<div className="token-list-item__token-balance">{string || 0}</div> |
||||
<div className="token-list-item__token-symbol">{symbol}</div> |
||||
{showFiat && ( |
||||
<div className="token-list-item__fiat-amount"> |
||||
{formattedFiat} |
||||
</div> |
||||
)} |
||||
</div> |
||||
<i className="fa fa-ellipsis-h fa-lg token-list-item__ellipsis cursor-pointer" |
||||
onClick={(e) => { |
||||
e.stopPropagation() |
||||
this.setState({ tokenMenuOpen: true }) |
||||
}} |
||||
/> |
||||
</div> |
||||
{tokenMenuOpen && ( |
||||
<TokenMenuDropdown |
||||
onClose={() => this.setState({ tokenMenuOpen: false })} |
||||
token={{ symbol, address }} |
||||
/> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
|
||||
function navigateTo (url) { |
||||
global.platform.openWindow({ url }) |
||||
} |
||||
|
||||
function etherscanLinkFor (tokenAddress, address, network) { |
||||
const prefix = prefixForNetwork(network) |
||||
return `https://${prefix}etherscan.io/token/${tokenAddress}?a=${address}` |
||||
} |
||||
|
||||
function tokenFactoryFor (tokenAddress) { |
||||
return `https://tokenfactory.surge.sh/#/token/${tokenAddress}` |
||||
} |
||||
|
||||
@ -0,0 +1,25 @@ |
||||
import { connect } from 'react-redux' |
||||
import { setSelectedToken, hideSidebar } from '../../../store/actions' |
||||
import { getSelectedAddress } from '../../../selectors/selectors' |
||||
import TokenCell from './token-cell.component' |
||||
|
||||
function mapStateToProps (state) { |
||||
return { |
||||
network: state.metamask.network, |
||||
currentCurrency: state.metamask.currentCurrency, |
||||
selectedTokenAddress: state.metamask.selectedTokenAddress, |
||||
userAddress: getSelectedAddress(state), |
||||
contractExchangeRates: state.metamask.contractExchangeRates, |
||||
conversionRate: state.metamask.conversionRate, |
||||
sidebarOpen: state.appState.sidebar.isOpen, |
||||
} |
||||
} |
||||
|
||||
function mapDispatchToProps (dispatch) { |
||||
return { |
||||
setSelectedToken: address => dispatch(setSelectedToken(address)), |
||||
hideSidebar: () => dispatch(hideSidebar()), |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(TokenCell) |
||||
Loading…
Reference in new issue