Convert ConfirmTokenTransactionBase to functional component (#9373)

* Convert ConfirmTokenTransactionBase to functional component

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/helpers/utils/conversions.util.test.js

@@ -1,6 +1,18 @@
 import assert from 'assert'
+import { ETH } from '../constants/common'
 import * as utils from './conversions.util'
 
+describe('getWeiHexFromDecimalValue', function () {
+  it('should correctly convert 0 in ETH', function () {
+    const weiValue = utils.getWeiHexFromDecimalValue({
+      value: '0',
+      fromCurrency: ETH,
+      fromDenomination: ETH,
+    })
+    assert.equal(weiValue, '0')
+  })
+})
+
 describe('decETHToDecWEI', function () {
   it('should correctly convert 1 ETH to WEI', function () {
     const weiValue = utils.decETHToDecWEI('1')

ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js

@@ -1,5 +1,7 @@
-import React, { Component } from 'react'
+import React, { useContext, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import BigNumber from 'bignumber.js'
+import { I18nContext } from '../../contexts/i18n'
 import ConfirmTransactionBase from '../confirm-transaction-base'
 import UserPreferencedCurrencyDisplay from '../../components/app/user-preferenced-currency-display'
 import {
@@ -11,52 +13,70 @@ import {
 import { getWeiHexFromDecimalValue } from '../../helpers/utils/conversions.util'
 import { ETH, PRIMARY } from '../../helpers/constants/common'
 
-export default class ConfirmTokenTransactionBase extends Component {
+export default function ConfirmTokenTransactionBase ({
-  static contextTypes = {
+  toAddress,
-    t: PropTypes.func,
+  tokenAddress,
-  }
+  tokenAmount = '0',
+  tokenSymbol,
+  fiatTransactionTotal,
+  ethTransactionTotal,
+  contractExchangeRate,
+  conversionRate,
+  currentCurrency,
+}) {
+  const t = useContext(I18nContext)
 
-  static propTypes = {
+  const hexWeiValue = useMemo(() => {
-    tokenAddress: PropTypes.string,
+    if (tokenAmount === '0' || !contractExchangeRate) {
-    toAddress: PropTypes.string,
+      return '0'
-    tokenAmount: PropTypes.string,
-    tokenSymbol: PropTypes.string,
-    fiatTransactionTotal: PropTypes.string,
-    ethTransactionTotal: PropTypes.string,
-    contractExchangeRate: PropTypes.number,
-    conversionRate: PropTypes.number,
-    currentCurrency: PropTypes.string,
     }
 
-  static defaultProps = {
+    const decimalEthValue = (
-    tokenAmount: '0',
+      (new BigNumber(tokenAmount)).times(new BigNumber(contractExchangeRate))
-  }
+    ).toFixed()
 
-  getFiatTransactionAmount () {
+    return getWeiHexFromDecimalValue({
-    const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props
+      value: decimalEthValue,
+      fromCurrency: ETH,
+      fromDenomination: ETH,
+    })
+  }, [tokenAmount, contractExchangeRate])
 
-    return convertTokenToFiat({
+  const secondaryTotalTextOverride = useMemo(() => {
+    if (typeof contractExchangeRate === 'undefined') {
+      return formatCurrency(fiatTransactionTotal, currentCurrency)
+    }
+
+    const fiatTransactionAmount = convertTokenToFiat({
       value: tokenAmount,
       toCurrency: currentCurrency,
       conversionRate,
       contractExchangeRate,
     })
-  }
+    const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
-
+    const roundedFiatTotal = roundExponential(fiatTotal)
-  renderSubtitleComponent () {
+    return formatCurrency(roundedFiatTotal, currentCurrency)
-    const { contractExchangeRate, tokenAmount } = this.props
+  },
+  [
+    currentCurrency,
+    conversionRate,
+    contractExchangeRate,
+    fiatTransactionTotal,
+    tokenAmount,
+  ])
 
-    const decimalEthValue = (tokenAmount * contractExchangeRate) || '0'
+  const tokensText = `${tokenAmount} ${tokenSymbol}`
-    const hexWeiValue = getWeiHexFromDecimalValue({
-      value: decimalEthValue,
-      fromCurrency: ETH,
-      fromDenomination: ETH,
-    })
 
-    return typeof contractExchangeRate === 'undefined'
+  return (
+    <ConfirmTransactionBase
+      toAddress={toAddress}
+      identiconAddress={tokenAddress}
+      title={tokensText}
+      subtitleComponent={
+        contractExchangeRate === undefined
           ? (
             <span>
-          { this.context.t('noConversionRateAvailable') }
+              { t('noConversionRateAvailable') }
             </span>
           ) : (
             <UserPreferencedCurrencyDisplay
@@ -67,12 +87,7 @@ export default class ConfirmTokenTransactionBase extends Component {
             />
           )
       }
-
+      primaryTotalTextOverride={(
-  renderPrimaryTotalTextOverride () {
-    const { tokenAmount, tokenSymbol, ethTransactionTotal } = this.props
-    const tokensText = `${tokenAmount} ${tokenSymbol}`
-
-    return (
         <div>
           <span>{ `${tokensText} + ` }</span>
           <img
@@ -81,42 +96,20 @@ export default class ConfirmTokenTransactionBase extends Component {
           />
           <span>{ ethTransactionTotal }</span>
         </div>
-    )
+      )}
-  }
+      secondaryTotalTextOverride={secondaryTotalTextOverride}
-
-  getSecondaryTotalTextOverride () {
-    const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props
-
-    if (typeof contractExchangeRate === 'undefined') {
-      return formatCurrency(fiatTransactionTotal, currentCurrency)
-    }
-    const fiatTransactionAmount = this.getFiatTransactionAmount()
-    const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
-    const roundedFiatTotal = roundExponential(fiatTotal)
-    return formatCurrency(roundedFiatTotal, currentCurrency)
-  }
-
-  render () {
-    const {
-      toAddress,
-      tokenAddress,
-      tokenSymbol,
-      tokenAmount,
-      ...restProps
-    } = this.props
-
-    const tokensText = `${tokenAmount} ${tokenSymbol}`
-
-    return (
-      <ConfirmTransactionBase
-        toAddress={toAddress}
-        identiconAddress={tokenAddress}
-        title={tokensText}
-        subtitleComponent={this.renderSubtitleComponent()}
-        primaryTotalTextOverride={this.renderPrimaryTotalTextOverride()}
-        secondaryTotalTextOverride={this.getSecondaryTotalTextOverride()}
-        {...restProps}
     />
   )
-  }
+}
+
+ConfirmTokenTransactionBase.propTypes = {
+  tokenAddress: PropTypes.string,
+  toAddress: PropTypes.string,
+  tokenAmount: PropTypes.string,
+  tokenSymbol: PropTypes.string,
+  fiatTransactionTotal: PropTypes.string,
+  ethTransactionTotal: PropTypes.string,
+  contractExchangeRate: PropTypes.number,
+  conversionRate: PropTypes.number,
+  currentCurrency: PropTypes.string,
 }