From 00060d787a7381632b86a6b686c5c43f4ae10d04 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 27 Nov 2019 11:36:12 -0330 Subject: [PATCH] Split TokenCell into container and component files (#7560) --- ui/app/components/app/token-cell.js | 177 ------------------ ui/app/components/app/token-cell/index.js | 1 + .../app/token-cell/token-cell.component.js | 140 ++++++++++++++ .../app/token-cell/token-cell.container.js | 25 +++ ui/app/components/app/token-list.js | 2 +- 5 files changed, 167 insertions(+), 178 deletions(-) delete mode 100644 ui/app/components/app/token-cell.js create mode 100644 ui/app/components/app/token-cell/index.js create mode 100644 ui/app/components/app/token-cell/token-cell.component.js create mode 100644 ui/app/components/app/token-cell/token-cell.container.js diff --git a/ui/app/components/app/token-cell.js b/ui/app/components/app/token-cell.js deleted file mode 100644 index 495b9502b..000000000 --- a/ui/app/components/app/token-cell.js +++ /dev/null @@ -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}` -} - diff --git a/ui/app/components/app/token-cell/index.js b/ui/app/components/app/token-cell/index.js new file mode 100644 index 000000000..f0f3bcb4a --- /dev/null +++ b/ui/app/components/app/token-cell/index.js @@ -0,0 +1 @@ +export { default } from './token-cell.container' diff --git a/ui/app/components/app/token-cell/token-cell.component.js b/ui/app/components/app/token-cell/token-cell.component.js new file mode 100644 index 000000000..10a3447d1 --- /dev/null +++ b/ui/app/components/app/token-cell/token-cell.component.js @@ -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 ( +
{ + setSelectedToken(address) + this.context.metricsEvent({ + eventOpts: { + category: 'Navigation', + action: 'Token Menu', + name: 'Clicked Token', + }, + }) + selectedTokenAddress !== address && sidebarOpen && hideSidebar() + }} + > + +
+
+
{string || 0}
+
{symbol}
+ {showFiat && ( +
+ {formattedFiat} +
+ )} +
+ { + e.stopPropagation() + this.setState({ tokenMenuOpen: true }) + }} + /> +
+ {tokenMenuOpen && ( + this.setState({ tokenMenuOpen: false })} + token={{ symbol, address }} + /> + )} +
+ ) + } +} + +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}` +} + diff --git a/ui/app/components/app/token-cell/token-cell.container.js b/ui/app/components/app/token-cell/token-cell.container.js new file mode 100644 index 000000000..176e93008 --- /dev/null +++ b/ui/app/components/app/token-cell/token-cell.container.js @@ -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) diff --git a/ui/app/components/app/token-list.js b/ui/app/components/app/token-list.js index 5bab96a45..7917cd54a 100644 --- a/ui/app/components/app/token-list.js +++ b/ui/app/components/app/token-list.js @@ -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')