Fix naming, add eth.getCode check for actions, fix translations for statuses

app/_locales/en/messages.json

@@ -705,6 +705,9 @@
   "pasteSeed": {
     "message": "Paste your seed phrase here!"
   },
+  "pending": {
+    "message": "pending"
+  },
   "personalAddressDetected": {
     "message": "Personal address detected. Input the token contract address."
   },

ui/app/components/balance-component.js

@@ -4,8 +4,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
 const Identicon = require('./identicon')
-const currencyFormatter = require('currency-formatter')
-const currencies = require('currency-formatter/currencies')
+import CurrencyDisplay from './currency-display'
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
@@ -80,38 +79,12 @@ BalanceComponent.prototype.renderBalance = function () {
       style: {},
     }, this.getTokenBalance(formattedBalance, shorten)),
 
-    showFiat ? this.renderFiatValue(formattedBalance) : null,
+    showFiat && h(CurrencyDisplay, {
+      value: balanceValue,
+    }),
   ])
 }
 
-BalanceComponent.prototype.renderFiatValue = function (formattedBalance) {
-
-  const { conversionRate, currentCurrency } = this.props
-
-  const fiatDisplayNumber = this.getFiatDisplayNumber(formattedBalance, conversionRate)
-
-  const fiatPrefix = currentCurrency === 'USD' ? '$' : ''
-
-  return this.renderFiatAmount(fiatDisplayNumber, currentCurrency, fiatPrefix)
-}
-
-BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatSuffix, fiatPrefix) {
-  const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0
-  if (shouldNotRenderFiat) return null
-
-  const upperCaseFiatSuffix = fiatSuffix.toUpperCase()
-
-  const display = currencies.find(currency => currency.code === upperCaseFiatSuffix)
-    ? currencyFormatter.format(Number(fiatDisplayNumber), {
-      code: upperCaseFiatSuffix,
-    })
-    : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}`
-
-  return h('div.fiat-amount', {
-    style: {},
-  }, display)
-}
-
 BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) {
   const balanceObj = generateBalanceObject(formattedBalance, shorten ? 1 : 3)
 

ui/app/components/currency-display/currency-display.component.js

@@ -1,11 +1,13 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import { ETH } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
     displayValue: PropTypes.string,
     prefix: PropTypes.string,
+    currency: PropTypes.oneOf([ETH]),
   }
 
   render () {

ui/app/components/currency-display/currency-display.container.js

@@ -1,13 +1,12 @@
 import { connect } from 'react-redux'
 import CurrencyDisplay from './currency-display.component'
 import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
-import { ETH } from '../../constants/common'
 
 const mapStateToProps = (state, ownProps) => {
   const { value, numberOfDecimals = 2, currency } = ownProps
   const { metamask: { currentCurrency, conversionRate } } = state
 
-  const toCurrency = currency === ETH ? ETH : currentCurrency
+  const toCurrency = currency || currentCurrency
   const convertedValue = getValueFromWeiHex({ value, toCurrency, conversionRate, numberOfDecimals })
   const formattedValue = formatCurrency(convertedValue, toCurrency)
   const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}`

ui/app/components/index.scss

@@ -24,9 +24,9 @@
 
 @import './tabs/index';
 
-@import './token-view/index';
+@import './transaction-view/index';
 
-@import './token-view-balance/index';
+@import './transaction-view-balance/index';
 
 @import './transaction-list/index';
 

ui/app/components/pages/home/home.component.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
-import TokenView from '../../token-view'
+import TransactionView from '../../transaction-view'
 import {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
@@ -58,7 +58,7 @@ export default class Home extends PureComponent {
             query="(min-width: 576px)"
             render={() => <WalletView />}
           />
-          <TokenView />
+          <TransactionView />
         </div>
       </div>
     )

ui/app/components/token-currency-display/token-currency-display.component.js

@@ -4,7 +4,7 @@ import CurrencyDisplay from '../currency-display/currency-display.component'
 import { getTokenData } from '../../helpers/transactions.util'
 import { calcTokenAmount } from '../../token-util'
 
-export default class TokenCurrencyDisplayContainer extends PureComponent {
+export default class TokenCurrencyDisplay extends PureComponent {
   static propTypes = {
     transactionData: PropTypes.string,
     token: PropTypes.object,

ui/app/components/token-view-balance/index.js

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

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

@@ -1 +0,0 @@
-export { default } from './token-view.component'

ui/app/components/transaction-action/transaction-action.component.js

@@ -25,7 +25,7 @@ export default class TransactionAction extends PureComponent {
     this.getTransactionAction()
   }
 
-  getTransactionAction () {
+  async getTransactionAction () {
     const { transactionAction } = this.state
     const { transaction, methodData } = this.props
     const { data, done } = methodData
@@ -34,18 +34,18 @@ export default class TransactionAction extends PureComponent {
       return
     }
 
-    const actionKey = getTransactionActionKey(transaction, data)
+    const actionKey = await getTransactionActionKey(transaction, data)
     const action = actionKey && this.context.tOrDefault(actionKey)
     this.setState({ transactionAction: action })
   }
 
   render () {
-    const { className, methodData: { isFetching } } = this.props
+    const { className, methodData: { done } } = this.props
     const { transactionAction } = this.state
 
     return (
       <div className={className}>
-        { (!isFetching && transactionAction) || '--' }
+        { (done && transactionAction) || '--' }
       </div>
     )
   }

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

@@ -127,13 +127,13 @@ export default class TransactionListItem extends PureComponent {
           </div>
           <TransactionStatus
             className="transaction-list-item__status"
-            status={transaction.status}
+            statusKey={transaction.status}
           />
           { this.renderPrimaryCurrency() }
           { this.renderSecondaryCurrency() }
         </div>
         {
-          showRetry && !methodData.isFetching && (
+          showRetry && methodData.done && (
             <div
               className="transaction-list-item__retry"
               onClick={this.handleRetryClick}

ui/app/components/transaction-status/transaction-status.component.js

@@ -1,15 +1,16 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-
-const UNAPPROVED_STATUS = 'unapproved'
-const REJECTED_STATUS = 'rejected'
-const APPROVED_STATUS = 'approved'
-const SIGNED_STATUS = 'signed'
-const SUBMITTED_STATUS = 'submitted'
-const CONFIRMED_STATUS = 'confirmed'
-const FAILED_STATUS = 'failed'
-const DROPPED_STATUS = 'dropped'
+import {
+  UNAPPROVED_STATUS,
+  REJECTED_STATUS,
+  APPROVED_STATUS,
+  SIGNED_STATUS,
+  SUBMITTED_STATUS,
+  CONFIRMED_STATUS,
+  FAILED_STATUS,
+  DROPPED_STATUS,
+} from '../../constants/transactions'
 
 const statusToClassNameHash = {
   [UNAPPROVED_STATUS]: 'transaction-status--unapproved',
@@ -28,17 +29,22 @@ const statusToTextHash = {
 }
 
 export default class TransactionStatus extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
   static propTypes = {
-    status: PropTypes.string,
+    statusKey: PropTypes.string,
     className: PropTypes.string,
   }
 
   render () {
-    const { className, status } = this.props
+    const { className, statusKey } = this.props
+    const statusText = this.context.t(statusToTextHash[statusKey] || statusKey)
 
     return (
-      <div className={classnames('transaction-status', className, statusToClassNameHash[status])}>
-        { statusToTextHash[status] || status }
+      <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}>
+        { statusText }
       </div>
     )
   }

ui/app/components/transaction-view-balance/index.js

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

ui/app/components/transaction-view-balance/index.scss

@@ -1,4 +1,4 @@
-.token-view-balance {
+.transaction-view-balance {
   display: flex;
   justify-content: space-between;
   align-items: center;

ui/app/components/transaction-view-balance/tests/token-view-balance.component.test.js

@@ -5,7 +5,7 @@ import sinon from 'sinon'
 import TokenBalance from '../../token-balance'
 import CurrencyDisplay from '../../currency-display'
 import { SEND_ROUTE } from '../../../routes'
-import TokenViewBalance from '../token-view-balance.component'
+import TransactionViewBalance from '../transaction-view-balance.component'
 
 const propsMethodSpies = {
   showDepositModal: sinon.spy(),
@@ -17,14 +17,14 @@ const historySpies = {
 
 const t = (str1, str2) => str2 ? str1 + str2 : str1
 
-describe('TokenViewBalance Component', () => {
+describe('TransactionViewBalance Component', () => {
   afterEach(() => {
     propsMethodSpies.showDepositModal.resetHistory()
     historySpies.push.resetHistory()
   })
 
   it('should render ETH balance properly', () => {
-    const wrapper = shallow(<TokenViewBalance
+    const wrapper = shallow(<TransactionViewBalance
       showDepositModal={propsMethodSpies.showDepositModal}
       history={historySpies}
       network="3"
@@ -33,11 +33,11 @@ describe('TokenViewBalance Component', () => {
       currentCurrency="usd"
     />, { context: { t } })
 
-    assert.equal(wrapper.find('.token-view-balance').length, 1)
-    assert.equal(wrapper.find('.token-view-balance__button').length, 2)
+    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+    assert.equal(wrapper.find('.transaction-view-balance__button').length, 2)
     assert.equal(wrapper.find(CurrencyDisplay).length, 2)
 
-    const buttons = wrapper.find('.token-view-balance__buttons')
+    const buttons = wrapper.find('.transaction-view-balance__buttons')
     assert.equal(propsMethodSpies.showDepositModal.callCount, 0)
     buttons.childAt(0).simulate('click')
     assert.equal(propsMethodSpies.showDepositModal.callCount, 1)
@@ -54,7 +54,7 @@ describe('TokenViewBalance Component', () => {
       symbol: 'ABC',
     }
 
-    const wrapper = shallow(<TokenViewBalance
+    const wrapper = shallow(<TransactionViewBalance
       showDepositModal={propsMethodSpies.showDepositModal}
       history={historySpies}
       network="3"
@@ -64,8 +64,8 @@ describe('TokenViewBalance Component', () => {
       selectedToken={token}
     />, { context: { t } })
 
-    assert.equal(wrapper.find('.token-view-balance').length, 1)
-    assert.equal(wrapper.find('.token-view-balance__button').length, 1)
+    assert.equal(wrapper.find('.transaction-view-balance').length, 1)
+    assert.equal(wrapper.find('.transaction-view-balance__button').length, 1)
     assert.equal(wrapper.find(TokenBalance).length, 1)
   })
 })

ui/app/components/transaction-view-balance/transaction-view-balance.component.js

@@ -7,7 +7,7 @@ import CurrencyDisplay from '../currency-display'
 import { SEND_ROUTE } from '../../routes'
 import { ETH } from '../../constants/common'
 
-export default class TokenViewBalance extends PureComponent {
+export default class TransactionViewBalance extends PureComponent {
   static contextTypes = {
     t: PropTypes.func,
   }
@@ -28,18 +28,18 @@ export default class TokenViewBalance extends PureComponent {
         <TokenBalance
           token={selectedToken}
           withSymbol
-          className="token-view-balance__token-balance"
+          className="transaction-view-balance__token-balance"
         />
       ) : (
-        <div className="token-view-balance__balance">
+        <div className="transaction-view-balance__balance">
           <CurrencyDisplay
-            className="token-view-balance__primary-balance"
+            className="transaction-view-balance__primary-balance"
             value={balance}
             currency={ETH}
             numberOfDecimals={3}
           />
           <CurrencyDisplay
-            className="token-view-balance__secondary-balance"
+            className="transaction-view-balance__secondary-balance"
             value={balance}
           />
         </div>
@@ -51,12 +51,12 @@ export default class TokenViewBalance extends PureComponent {
     const { selectedToken, showDepositModal, history } = this.props
 
     return (
-      <div className="token-view-balance__buttons">
+      <div className="transaction-view-balance__buttons">
         {
           !selectedToken && (
             <Button
               type="primary"
-              className="token-view-balance__button"
+              className="transaction-view-balance__button"
               onClick={() => showDepositModal()}
             >
               { t('deposit') }
@@ -65,7 +65,7 @@ export default class TokenViewBalance extends PureComponent {
         }
         <Button
           type="primary"
-          className="token-view-balance__button"
+          className="transaction-view-balance__button"
           onClick={() => history.push(SEND_ROUTE)}
         >
           { t('send') }
@@ -78,8 +78,8 @@ export default class TokenViewBalance extends PureComponent {
     const { network, selectedToken } = this.props
 
     return (
-      <div className="token-view-balance">
-        <div className="token-view-balance__balance-container">
+      <div className="transaction-view-balance">
+        <div className="transaction-view-balance__balance-container">
           <Identicon
             diameter={50}
             address={selectedToken && selectedToken.address}

ui/app/components/transaction-view-balance/transaction-view-balance.container.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
-import TokenViewBalance from './token-view-balance.component'
+import TransactionViewBalance from './transaction-view-balance.component'
 import { getSelectedToken, getSelectedAddress } from '../../selectors'
 import { showModal } from '../../actions'
 
@@ -27,4 +27,4 @@ const mapDispatchToProps = dispatch => {
 export default compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
-)(TokenViewBalance)
+)(TransactionViewBalance)

ui/app/components/transaction-view/index.js

@@ -0,0 +1 @@
+export { default } from './transaction-view.component'

ui/app/components/transaction-view/index.scss

@@ -1,4 +1,4 @@
-.token-view {
+.transaction-view {
   flex: 1 1 66.5%;
   background: $white;
   min-width: 0;

ui/app/components/transaction-view/transaction-view.component.js

@@ -2,23 +2,23 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Media from 'react-media'
 import MenuBar from '../menu-bar'
-import TokenViewBalance from '../token-view-balance'
+import TransactionViewBalance from '../transaction-view-balance'
 import TransactionList from '../transaction-list'
 
-export default class TokenView extends PureComponent {
+export default class TransactionView extends PureComponent {
   static contextTypes = {
     t: PropTypes.func,
   }
 
   render () {
     return (
-      <div className="token-view">
+      <div className="transaction-view">
         <Media
           query="(max-width: 575px)"
           render={() => <MenuBar />}
         />
-        <div className="token-view__balance-wrapper">
-          <TokenViewBalance />
+        <div className="transaction-view__balance-wrapper">
+          <TransactionViewBalance />
         </div>
         <TransactionList />
       </div>

ui/app/ducks/confirm-transaction.duck.js

@@ -12,10 +12,9 @@ import {
   addEth,
   increaseLastGasPrice,
   hexGreaterThan,
-  isSmartContractAddress,
 } from '../helpers/confirm-transaction/util'
 
-import { getTokenData, getMethodData } from '../helpers/transactions.util'
+import { getTokenData, getMethodData, isSmartContractAddress } from '../helpers/transactions.util'
 import { getSymbolAndDecimals } from '../token-util'
 import { conversionUtil } from '../conversion-util'
 

ui/app/helpers/confirm-transaction/util.js

@@ -123,8 +123,3 @@ export function roundExponential (value) {
   // In JS, numbers with exponentials greater than 20 get displayed as an exponential.
   return bigNumberValue.e > 20 ? Number(bigNumberValue.toPrecision(PRECISION)) : value
 }
-
-export async function isSmartContractAddress (address) {
-  const code = await global.eth.getCode(address)
-  return code && code !== '0x'
-}

ui/app/helpers/transactions.util.js

@@ -41,8 +41,8 @@ export function isConfirmDeployContract (txData = {}) {
   return !txParams.to
 }
 
-export function getTransactionActionKey (transaction, methodData) {
-  const { txParams: { data } = {}, msgParams } = transaction
+export async function getTransactionActionKey (transaction, methodData) {
+  const { txParams: { data, to } = {}, msgParams } = transaction
 
   if (msgParams) {
     return SIGNATURE_REQUEST_KEY
@@ -53,6 +53,12 @@ export function getTransactionActionKey (transaction, methodData) {
   }
 
   if (data) {
+    const toSmartContract = await isSmartContractAddress(to)
+
+    if (!toSmartContract) {
+      return SEND_ETHER_ACTION_KEY
+    }
+
     const { name } = methodData
     const methodName = name && name.toLowerCase()
 
@@ -92,3 +98,8 @@ export function getLatestSubmittedTxWithNonce (transactions = [], nonce = '0x0')
     }
   }, {})
 }
+
+export async function isSmartContractAddress (address) {
+  const code = await global.eth.getCode(address)
+  return code && code !== '0x'
+}