Add fallback when no function found, fix network colors, add fiat values for tokens with contract exchange rates

3 files changed, 121 insertions, 0 deletions

diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
new file mode 100644
index 000000000..618ff123c
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import {
+  formatCurrency,
+  convertTokenToFiat,
+  addFiat,
+} from '../../../helpers/confirm-transaction/util'
+
+export default class ConfirmTokenTransactionBase extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    tokenAddress: PropTypes.string,
+    toAddress: PropTypes.string,
+    tokenAmount: PropTypes.number,
+    tokenSymbol: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    contractExchangeRate: PropTypes.number,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+  }
+
+  getFiatTransactionAmount () {
+    const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props
+
+    return convertTokenToFiat({
+      value: tokenAmount,
+      toCurrency: currentCurrency,
+      conversionRate,
+      contractExchangeRate,
+    })
+  }
+
+  getSubtitle () {
+    const { currentCurrency, contractExchangeRate } = this.props
+
+    if (typeof contractExchangeRate === 'undefined') {
+      return this.context.t('noConversionRate')
+    } else {
+      const fiatTransactionAmount = this.getFiatTransactionAmount()
+      return formatCurrency(fiatTransactionAmount, currentCurrency)
+    }
+  }
+
+  getFiatTotalTextOverride () {
+    const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props
+
+    if (typeof contractExchangeRate === 'undefined') {
+      return formatCurrency(fiatTransactionTotal, currentCurrency)
+    } else {
+      const fiatTransactionAmount = this.getFiatTransactionAmount()
+      const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
+      return formatCurrency(fiatTotal, currentCurrency)
+    }
+  }
+
+  render () {
+    const {
+      toAddress,
+      tokenAddress,
+      tokenSymbol,
+      tokenAmount,
+      ethTransactionTotal,
+      ...restProps
+    } = this.props
+
+    const tokensText = `${tokenAmount} ${tokenSymbol}`
+
+    return (
+      <ConfirmTransactionBase
+        toAddress={toAddress}
+        identiconAddress={tokenAddress}
+        title={tokensText}
+        subtitle={this.getSubtitle()}
+        ethTotalTextOverride={`${tokensText} + \u2666 ${ethTransactionTotal}`}
+        fiatTotalTextOverride={this.getFiatTotalTextOverride()}
+        {...restProps}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
new file mode 100644
index 000000000..be38acdb0
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux'
+import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
+import {
+  tokenAmountAndToAddressSelector,
+  contractExchangeRateSelector,
+} from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = (state, ownProps) => {
+  const { tokenAmount: ownTokenAmount } = ownProps
+  const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state
+  const {
+    txData: { txParams: { to: tokenAddress } = {} } = {},
+    tokenProps: { tokenSymbol } = {},
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  } = confirmTransaction
+
+  const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state)
+  const contractExchangeRate = contractExchangeRateSelector(state)
+
+  return {
+    toAddress,
+    tokenAddress,
+    tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount,
+    tokenSymbol,
+    currentCurrency,
+    conversionRate,
+    contractExchangeRate,
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmTokenTransactionBase)
diff --git a/ui/app/components/pages/confirm-token-transaction-base/index.js b/ui/app/components/pages/confirm-token-transaction-base/index.js
new file mode 100644
index 000000000..e15c5d56b
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/index.js
@@ -0,0 +1,2 @@
+export { default } from './confirm-token-transaction-base.container'
+export { default as ConfirmTokenTransactionBase } from './confirm-token-transaction-base.component'