Translate method names in the transaction list only when applicable

app/_locales/en/messages.json

@@ -1163,6 +1163,9 @@
   "transfer": {
     "message": "Transfer"
   },
+  "transferFrom": {
+    "message": "Transfer From"
+  },
   "transfers": {
     "message": "Transfers"
   },

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

@@ -6,14 +6,18 @@ import TransactionAction from '../transaction-action.component'
 
 describe('TransactionAction Component', () => {
   const t = key => key
+
+
+  describe('Outgoing transaction', () => {
+    beforeEach(() => {
       global.eth = {
         getCode: sinon.stub().callsFake(address => {
           const code = address === 'approveAddress' ? 'contract' : '0x'
           return Promise.resolve(code)
         }),
       }
+    })
 
-  describe('Outgoing transaction', () => {
     it('should render -- when methodData is still fetching', () => {
       const methodData = { data: {}, done: false, error: null }
       const transaction = {
@@ -69,7 +73,7 @@ describe('TransactionAction Component', () => {
       assert.equal(wrapper.text(), 'sentEther')
     })
 
-    it('should render Approved', () => {
+    it('should render Approved', async () => {
       const methodData = {
         data: {
           name: 'Approve',
@@ -97,15 +101,62 @@ describe('TransactionAction Component', () => {
         },
       }
 
-      const wrapper = shallow(<TransactionAction
+      const wrapper = shallow(
+        <TransactionAction
           methodData={methodData}
           transaction={transaction}
-        className="transaction-action"
+          className="test-class"
-      />, { context: { t }})
+        />,
+        { context: { t } }
+      )
 
-      assert.equal(wrapper.find('.transaction-action').length, 1)
+      assert.ok(wrapper)
-      wrapper.setState({ transactionAction: 'approve' })
+      assert.equal(wrapper.find('.test-class').length, 1)
-      assert.equal(wrapper.text(), 'approve')
+      await wrapper.instance().getTransactionAction()
+      assert.equal(wrapper.state('transactionAction'), 'approve')
+    })
+
+    it('should render Accept Fulfillment', async () => {
+      const methodData = {
+        data: {
+          name: 'AcceptFulfillment',
+          params: [
+            { type: 'address' },
+            { type: 'uint256' },
+          ],
+        },
+        done: true,
+        error: null,
+      }
+      const transaction = {
+        id: 1,
+        status: 'confirmed',
+        submittedTime: 1534045442919,
+        time: 1534045440641,
+        txParams: {
+          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          gas: '0x5208',
+          gasPrice: '0x3b9aca00',
+          nonce: '0x96',
+          to: 'approveAddress',
+          value: '0x2386f26fc10000',
+          data: '0x095ea7b300000000000000000000000050a9d56c2b8ba9a5c7f2c08c3d26e0499f23a7060000000000000000000000000000000000000000000000000000000000000003',
+        },
+      }
+
+      const wrapper = shallow(
+        <TransactionAction
+          methodData={methodData}
+          transaction={transaction}
+          className="test-class"
+        />,
+        { context: { t }}
+      )
+
+      assert.ok(wrapper)
+      assert.equal(wrapper.find('.test-class').length, 1)
+      await wrapper.instance().getTransactionAction()
+      assert.equal(wrapper.state('transactionAction'), ' Accept Fulfillment')
     })
   })
 })

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

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { getTransactionActionKey } from '../../helpers/transactions.util'
+import { camelCaseToCapitalize } from '../../helpers/common.util'
 
 export default class TransactionAction extends PureComponent {
   static contextTypes = {
@@ -29,13 +31,17 @@ export default class TransactionAction extends PureComponent {
     const { transactionAction } = this.state
     const { transaction, methodData } = this.props
     const { data, done } = methodData
+    const { name } = data
 
     if (!done || transactionAction) {
       return
     }
 
     const actionKey = await getTransactionActionKey(transaction, data)
-    const action = actionKey && this.context.t(actionKey)
+    const action = actionKey
+      ? this.context.t(actionKey)
+      : camelCaseToCapitalize(name)
+
     this.setState({ transactionAction: action })
   }
 
@@ -44,7 +50,7 @@ export default class TransactionAction extends PureComponent {
     const { transactionAction } = this.state
 
     return (
-      <div className={className}>
+      <div className={classnames('transaction-action', className)}>
         { (done && transactionAction) || '--' }
       </div>
     )

ui/app/helpers/common.util.js

@@ -0,0 +1,5 @@
+export function camelCaseToCapitalize (str) {
+  return str
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, str => str.toUpperCase())
+}

ui/app/helpers/tests/common.util.test.js

@@ -0,0 +1,23 @@
+import * as utils from '../common.util'
+import assert from 'assert'
+
+describe('Common utils', () => {
+  describe('camelCaseToCapitalize', () => {
+    it('should return a capitalized string from a camel-cased string', () => {
+      const tests = [
+        {
+          test: '',
+          expected: '',
+        },
+        {
+          test: 'thisIsATest',
+          expected: 'This Is A Test',
+        },
+      ]
+
+      tests.forEach(({ test, expected }) => {
+        assert.equal(utils.camelCaseToCapitalize(test), expected)
+      })
+    })
+  })
+})

ui/app/helpers/transactions.util.js

@@ -80,8 +80,6 @@ export async function getTransactionActionKey (transaction, methodData) {
         return APPROVE_ACTION_KEY
       case TOKEN_METHOD_TRANSFER_FROM:
         return TRANSFER_FROM_ACTION_KEY
-      default:
-        return name
     }
   } else {
     return SEND_ETHER_ACTION_KEY

ui/app/selectors/confirm-transaction.js

@@ -126,7 +126,8 @@ const TOKEN_PARAM_VALUE = '_value'
 
 export const tokenAmountAndToAddressSelector = createSelector(
   tokenDataParamsSelector,
-  params => {
+  tokenDecimalsSelector,
+  (params, tokenDecimals) => {
     let toAddress = ''
     let tokenAmount = 0
 
@@ -136,6 +137,10 @@ export const tokenAmountAndToAddressSelector = createSelector(
       toAddress = toParam ? toParam.value : params[0].value
       const value = valueParam ? Number(valueParam.value) : Number(params[1].value)
       tokenAmount = roundExponential(value)
+
+      if (tokenDecimals) {
+        tokenAmount = calcTokenAmount(value, tokenDecimals)
+      }
     }
 
     return {