mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +01:00
Split TokenCell into container and component files (#7560)
This commit is contained in:
Whymarrh Whitby
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}`
|
||||
}
|
||||
|
||||
1
ui/app/components/app/token-cell/index.js
Normal file
1
ui/app/components/app/token-cell/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './token-cell.container'
|
||||
140
ui/app/components/app/token-cell/token-cell.component.js
Normal file
140
ui/app/components/app/token-cell/token-cell.component.js
Normal file
@ -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}`
|
||||
}
|
||||
|
||||
25
ui/app/components/app/token-cell/token-cell.container.js
Normal file
25
ui/app/components/app/token-cell/token-cell.container.js
Normal file
@ -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)
|
||||
@ -1,8 +1,8 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { Component } from 'react'
|
||||
import TokenCell from './token-cell'
|
||||
const inherits = require('util').inherits
|
||||
const TokenTracker = require('eth-token-tracker')
|
||||
const TokenCell = require('./token-cell.js')
|
||||
const connect = require('react-redux').connect
|
||||
const selectors = require('../../selectors/selectors')
|
||||
const log = require('loglevel')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user