Split EthBalance into container and component files (#7557)

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

ui/app/components/app/shift-list-item/shift-list-item.component.js

@@ -5,7 +5,7 @@ const actions = require('../../../store/actions')
 const { formatDate, addressSummary } = require('../../../helpers/utils/util')
 
 const CopyButton = require('../../ui/copyButton')
-const EthBalance = require('../../ui/eth-balance')
+const EthBalance = require('../../ui/eth-balance').default
 const Tooltip = require('../../ui/tooltip')
 
 export default class ShiftListItem extends Component {

ui/app/components/ui/eth-balance.js

@@ -1,106 +0,0 @@
-const { Component } = require('react')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const { inherits } = require('util')
-const {
-  formatBalance,
-  generateBalanceObject,
-} = require('../../helpers/utils/util')
-const Tooltip = require('./tooltip.js')
-const FiatValue = require('./fiat-value.js')
-
-module.exports = connect(mapStateToProps)(EthBalanceComponent)
-function mapStateToProps (state) {
-  return {
-    ticker: state.metamask.ticker,
-  }
-}
-
-inherits(EthBalanceComponent, Component)
-function EthBalanceComponent () {
-  Component.call(this)
-}
-
-EthBalanceComponent.prototype.render = function () {
-  const props = this.props
-  const { ticker, value, style, width, needsParse = true } = props
-
-  const formattedValue = value ? formatBalance(value, 6, needsParse, ticker) : '...'
-
-  return (
-
-    h('.ether-balance.ether-balance-amount', {
-      style,
-    }, [
-      h('div', {
-        style: {
-          display: 'inline',
-          width,
-        },
-      }, this.renderBalance(formattedValue)),
-    ])
-
-  )
-}
-EthBalanceComponent.prototype.renderBalance = function (value) {
-  if (value === 'None') {
-    return value
-  }
-  if (value === '...') {
-    return value
-  }
-
-  const {
-    conversionRate,
-    shorten,
-    incoming,
-    currentCurrency,
-    hideTooltip,
-    styleOveride = {},
-    showFiat = true,
-  } = this.props
-  const { fontSize, color, fontFamily, lineHeight } = styleOveride
-
-  const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
-  const balanceToRender = shorten ? shortBalance : balance
-
-  const [ethNumber, ethSuffix] = value.split(' ')
-  const containerProps = hideTooltip ? {} : {
-    position: 'bottom',
-    title: `${ethNumber} ${ethSuffix}`,
-  }
-
-  return (
-    h(hideTooltip ? 'div' : Tooltip,
-      containerProps,
-      h('div.flex-column', [
-        h('.flex-row', {
-          style: {
-            alignItems: 'flex-end',
-            lineHeight: lineHeight || '13px',
-            fontFamily: fontFamily || 'Montserrat Light',
-            textRendering: 'geometricPrecision',
-          },
-        }, [
-          h('div', {
-            style: {
-              width: '100%',
-              textAlign: 'right',
-              fontSize: fontSize || 'inherit',
-              color: color || 'inherit',
-            },
-          }, incoming ? `+${balanceToRender}` : balanceToRender),
-          h('div', {
-            style: {
-              color: color || '#AEAEAE',
-              fontSize: fontSize || '12px',
-              marginLeft: '5px',
-            },
-          }, label),
-        ]),
-
-        showFiat ? h(FiatValue, { value: this.props.value, conversionRate, currentCurrency }) : null,
-      ])
-    )
-  )
-}

ui/app/components/ui/eth-balance/eth-balance.component.js

@@ -0,0 +1,129 @@
+import PropTypes from 'prop-types'
+import React, {Component} from 'react'
+
+const {
+  formatBalance,
+  generateBalanceObject,
+} = require('../../../helpers/utils/util')
+const Tooltip = require('../tooltip.js')
+const FiatValue = require('../fiat-value.js')
+
+export default class EthBalance extends Component {
+  static defaultProps = {
+    style: null,
+    styleOverride: {},
+    showFiat: true,
+    needsParse: true,
+    width: undefined,
+    shorten: false,
+    incoming: false,
+  }
+
+  static propTypes = {
+    conversionRate: PropTypes.any.isRequired,
+    shorten: PropTypes.bool,
+    incoming: PropTypes.bool,
+    currentCurrency: PropTypes.string.isRequired,
+    hideTooltip: PropTypes.bool,
+    styleOverride: PropTypes.object,
+    showFiat: PropTypes.bool,
+    ticker: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    style: PropTypes.object,
+    width: PropTypes.string,
+    needsParse: PropTypes.bool,
+  }
+
+  renderBalance (value) {
+    if (value === 'None') {
+      return value
+    }
+    if (value === '...') {
+      return value
+    }
+
+    const {
+      conversionRate,
+      shorten,
+      incoming,
+      currentCurrency,
+      hideTooltip,
+      styleOverride = {},
+      showFiat = true,
+    } = this.props
+    const { fontSize, color, fontFamily, lineHeight } = styleOverride
+
+    const { shortBalance, balance, label } = generateBalanceObject(value, shorten ? 1 : 3)
+    const balanceToRender = shorten ? shortBalance : balance
+
+    const [ethNumber, ethSuffix] = value.split(' ')
+    const containerProps = hideTooltip ? {} : {
+      position: 'bottom',
+      title: `${ethNumber} ${ethSuffix}`,
+    }
+
+    const TooltipComponent = hideTooltip ? 'div' : Tooltip
+
+    return (
+      <TooltipComponent {...containerProps}>
+        <div className="flex-column">
+          <div className="flex-row" style={{
+            alignItems: 'flex-end',
+            lineHeight: lineHeight || '13px',
+            fontFamily: fontFamily || 'Montserrat Light',
+            textRendering: 'geometricPrecision',
+          }}>
+            <div style={{
+              width: '100%',
+              textAlign: 'right',
+              fontSize: fontSize || 'inherit',
+              color: color || 'inherit',
+            }}>
+              {
+                incoming
+                  ? `+${balanceToRender}`
+                  : balanceToRender
+              }
+            </div>
+            <div style={{
+              color: color || '#AEAEAE',
+              fontSize: fontSize || '12px',
+              marginLeft: '5px',
+            }}>
+              {label}
+            </div>
+          </div>
+        </div>
+        {
+          showFiat
+            ? (
+              <FiatValue
+                value={this.props.value}
+                conversionRate={conversionRate}
+                currentCurrency={currentCurrency}
+              />
+            )
+            : null
+        }
+      </TooltipComponent>
+    )
+  }
+
+  render () {
+    const { ticker, value, style, width, needsParse } = this.props
+    const formattedValue = value
+      ? formatBalance(value, 6, needsParse, ticker)
+      : '...'
+
+    return (
+      <div className="ether-balance ether-balance-amount" style={style}>
+        <div style={{
+          display: 'inline',
+          width,
+        }}>
+          {this.renderBalance(formattedValue)}
+        </div>
+      </div>
+    )
+  }
+}

ui/app/components/ui/eth-balance/eth-balance.container.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux'
+import EthBalance from './eth-balance.component'
+
+function mapStateToProps (state) {
+  return {
+    ticker: state.metamask.ticker,
+  }
+}
+
+export default connect(mapStateToProps)(EthBalance)

ui/app/components/ui/eth-balance/index.js

@@ -0,0 +1 @@
+export { default } from './eth-balance.container'