Split TokenCell into container and component files (#7560)

ui/app/components/app/token-cell.js

@@ -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}`
-}
-

ui/app/components/app/token-cell/index.js

@@ -0,0 +1 @@
+export { default } from './token-cell.container'

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 (
+      <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}`
+}
+

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)

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')