Refactor BalanceComponent to jsx (#6048)

ui/app/components/account-export.js

@@ -1,138 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const PropTypes = require('prop-types')
-const inherits = require('util').inherits
-const exportAsFile = require('../util').exportAsFile
-const copyToClipboard = require('copy-to-clipboard')
-const actions = require('../actions')
-const ethUtil = require('ethereumjs-util')
-const connect = require('react-redux').connect
-
-ExportAccountView.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(ExportAccountView)
-
-
-inherits(ExportAccountView, Component)
-function ExportAccountView () {
-  Component.call(this)
-}
-
-function mapStateToProps (state) {
-  return {
-    warning: state.appState.warning,
-  }
-}
-
-ExportAccountView.prototype.render = function () {
-  const state = this.props
-  const accountDetail = state.accountDetail
-  const nickname = state.identities[state.address].name
-
-  if (!accountDetail) return h('div')
-  const accountExport = accountDetail.accountExport
-
-  const notExporting = accountExport === 'none'
-  const exportRequested = accountExport === 'requested'
-  const accountExported = accountExport === 'completed'
-
-  if (notExporting) return h('div')
-
-  if (exportRequested) {
-    const warning = this.context.t('exportPrivateKeyWarning')
-    return (
-      h('div', {
-        style: {
-          display: 'inline-block',
-          textAlign: 'center',
-        },
-      },
-        [
-          h('div', {
-            key: 'exporting',
-            style: {
-              margin: '0 20px',
-            },
-          }, [
-            h('p.error', warning),
-            h('input#exportAccount.sizing-input', {
-              type: 'password',
-              placeholder: this.context.t('confirmPassword').toLowerCase(),
-              onKeyPress: this.onExportKeyPress.bind(this),
-              style: {
-                position: 'relative',
-                top: '1.5px',
-                marginBottom: '7px',
-              },
-            }),
-          ]),
-          h('div', {
-            key: 'buttons',
-            style: {
-              margin: '0 20px',
-            },
-          },
-            [
-              h('button', {
-                onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),
-                style: {
-                  marginRight: '10px',
-                },
-              }, this.context.t('submit')),
-              h('button', {
-                onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-              }, this.context.t('cancel')),
-            ]),
-          (this.props.warning) && (
-          h('span.error', {
-            style: {
-              margin: '20px',
-            },
-          }, this.props.warning.split('-'))
-        ),
-        ])
-    )
-  }
-
-  if (accountExported) {
-    const plainKey = ethUtil.stripHexPrefix(accountDetail.privateKey)
-
-    return h('div.privateKey', {
-      style: {
-        margin: '0 20px',
-      },
-    }, [
-      h('label', this.context.t('copyPrivateKey') + ':'),
-      h('p.error.cursor-pointer', {
-        style: {
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          webkitUserSelect: 'text',
-          maxWidth: '275px',
-        },
-        onClick: function (event) {
-          copyToClipboard(ethUtil.stripHexPrefix(accountDetail.privateKey))
-        },
-      }, plainKey),
-      h('button', {
-        onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
-      }, this.context.t('done')),
-      h('button', {
-        style: {
-          marginLeft: '10px',
-        },
-        onClick: () => exportAsFile(`MetaMask ${nickname} Private Key`, plainKey),
-      }, this.context.t('saveAsFile')),
-    ])
-  }
-}
-
-ExportAccountView.prototype.onExportKeyPress = function (event) {
-  if (event.key !== 'Enter') return
-  event.preventDefault()
-
-  const input = document.getElementById('exportAccount').value
-  this.props.dispatch(actions.exportAccount(input, this.props.address))
-}

ui/app/components/balance-component.js

@@ -1,111 +0,0 @@
-const Component = require('react').Component
-const connect = require('react-redux').connect
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-import TokenBalance from './token-balance'
-import Identicon from './identicon'
-import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
-import { PRIMARY, SECONDARY } from '../constants/common'
-const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency, getMetaMaskAccounts } = require('../selectors')
-
-const { formatBalance } = require('../util')
-
-module.exports = connect(mapStateToProps)(BalanceComponent)
-
-function mapStateToProps (state) {
-  const accounts = getMetaMaskAccounts(state)
-  const network = state.metamask.network
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
-  const account = accounts[selectedAddress]
-
-  return {
-    account,
-    network,
-    nativeCurrency: getNativeCurrency(state),
-    conversionRate: conversionRateSelector(state),
-    currentCurrency: getCurrentCurrency(state),
-    assetImages: getAssetImages(state),
-  }
-}
-
-inherits(BalanceComponent, Component)
-function BalanceComponent () {
-  Component.call(this)
-}
-
-BalanceComponent.prototype.render = function () {
-  const props = this.props
-  const { token, network, assetImages } = props
-  const address = token && token.address
-  const image = assetImages && address ? assetImages[token.address] : undefined
-
-  return h('div.balance-container', {}, [
-
-    // TODO: balance icon needs to be passed in
-    // h('img.balance-icon', {
-    //   src: '../images/eth_logo.svg',
-    //   style: {},
-    // }),
-    h(Identicon, {
-      diameter: 50,
-      address,
-      network,
-      image,
-    }),
-
-    token ? this.renderTokenBalance() : this.renderBalance(),
-  ])
-}
-
-BalanceComponent.prototype.renderTokenBalance = function () {
-  const { token } = this.props
-
-  return h('div.flex-column.balance-display', [
-    h('div.token-amount', [ h(TokenBalance, { token }) ]),
-  ])
-}
-
-BalanceComponent.prototype.renderBalance = function () {
-  const props = this.props
-  const { account, nativeCurrency } = props
-  const balanceValue = account && account.balance
-  const needsParse = 'needsParse' in props ? props.needsParse : true
-  const formattedBalance = balanceValue ? formatBalance(balanceValue, 6, needsParse, nativeCurrency) : '...'
-  const showFiat = 'showFiat' in props ? props.showFiat : true
-
-  if (formattedBalance === 'None' || formattedBalance === '...') {
-    return h('div.flex-column.balance-display', {}, [
-      h('div.token-amount', {
-        style: {},
-      }, formattedBalance),
-    ])
-  }
-
-  return h('div.flex-column.balance-display', {}, [
-    h(UserPreferencedCurrencyDisplay, {
-      className: 'token-amount',
-      value: balanceValue,
-      type: PRIMARY,
-      ethNumberOfDecimals: 4,
-    }),
-
-    showFiat && h(UserPreferencedCurrencyDisplay, {
-      value: balanceValue,
-      type: SECONDARY,
-      ethNumberOfDecimals: 4,
-    }),
-  ])
-}
-
-BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, conversionRate) {
-  if (formattedBalance === 'None') return formattedBalance
-  if (conversionRate === 0) return 'N/A'
-
-  const splitBalance = formattedBalance.split(' ')
-
-  const convertedNumber = (Number(splitBalance[0]) * conversionRate)
-  const wholePart = Math.floor(convertedNumber)
-  const decimalPart = convertedNumber - wholePart
-
-  return wholePart + Number(decimalPart.toPrecision(2))
-}

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

@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import TokenBalance from '../token-balance'
+import Identicon from '../identicon'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
+import { PRIMARY, SECONDARY } from '../../constants/common'
+import { formatBalance } from '../../util'
+
+export default class Balance extends PureComponent {
+  static propTypes = {
+    account: PropTypes.object,
+    assetImages: PropTypes.object,
+    nativeCurrency: PropTypes.string,
+    needsParse: PropTypes.bool,
+    network: PropTypes.string,
+    showFiat: PropTypes.bool,
+    token: PropTypes.object,
+  }
+
+  static defaultProps = {
+    needsParse: true,
+    showFiat: true,
+  }
+
+  renderBalance () {
+    const { account, nativeCurrency, needsParse, showFiat } = this.props
+    const balanceValue = account && account.balance
+    const formattedBalance = balanceValue
+      ? formatBalance(balanceValue, 6, needsParse, nativeCurrency)
+      : '...'
+
+    if (formattedBalance === 'None' || formattedBalance === '...') {
+      return (
+        <div className="flex-column balance-display">
+          <div className="token-amount">
+            { formattedBalance }
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex-column balance-display">
+        <UserPreferencedCurrencyDisplay
+          className="token-amount"
+          value={balanceValue}
+          type={PRIMARY}
+          ethNumberOfDecimals={4}
+        />
+        {
+          showFiat && (
+            <UserPreferencedCurrencyDisplay
+              value={balanceValue}
+              type={SECONDARY}
+              ethNumberOfDecimals={4}
+            />
+          )
+        }
+      </div>
+    )
+  }
+
+  renderTokenBalance () {
+    const { token } = this.props
+
+    return (
+      <div className="flex-column balance-display">
+        <div className="token-amount">
+          <TokenBalance token={token} />
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { token, network, assetImages } = this.props
+    const address = token && token.address
+    const image = assetImages && address ? assetImages[token.address] : undefined
+
+    return (
+      <div className="balance-container">
+        <Identicon
+          diameter={50}
+          address={address}
+          network={network}
+          image={image}
+        />
+        { token ? this.renderTokenBalance() : this.renderBalance() }
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux'
+import Balance from './balance.component'
+import {
+  getNativeCurrency,
+  getAssetImages,
+  conversionRateSelector,
+  getCurrentCurrency,
+  getMetaMaskAccounts,
+} from '../../selectors'
+
+const mapStateToProps = state => {
+  const accounts = getMetaMaskAccounts(state)
+  const network = state.metamask.network
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
+  const account = accounts[selectedAddress]
+
+  return {
+    account,
+    network,
+    nativeCurrency: getNativeCurrency(state),
+    conversionRate: conversionRateSelector(state),
+    currentCurrency: getCurrentCurrency(state),
+    assetImages: getAssetImages(state),
+  }
+}
+
+export default connect(mapStateToProps)(Balance)

ui/app/components/balance/index.js

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

ui/app/components/wallet-view.js

@@ -12,7 +12,7 @@ import Identicon from './identicon'
 const Tooltip = require('./tooltip-v2.js').default
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
-const BalanceComponent = require('./balance-component')
+import BalanceComponent from './balance'
 const TokenList = require('./token-list')
 const selectors = require('../selectors')
 const { ADD_TOKEN_ROUTE } = require('../routes')