3 files changed, 165 insertions, 0 deletions
diff --git a/ui/app/components/transaction-action/index.js b/ui/app/components/transaction-action/index.js
new file mode 100644
index 000000000..a6e9097f1
--- /dev/null
+++ b/ui/app/components/transaction-action/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-action.component'
diff --git a/ui/app/components/transaction-action/tests/transaction-action.component.test.js b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
new file mode 100644
index 000000000..218792847
--- /dev/null
+++ b/ui/app/components/transaction-action/tests/transaction-action.component.test.js
@@ -0,0 +1,112 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import TransactionAction from '../transaction-action.component'
+
+describe('TransactionAction Component', () => {
+  const tOrDefault = key => key
+  global.eth = {
+    getCode: sinon.stub().callsFake(address => {
+      console.log('CALLED')
+      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 = {
+        id: 1,
+        status: 'confirmed',
+        submittedTime: 1534045442919,
+        time: 1534045440641,
+        txParams: {
+          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          gas: '0x5208',
+          gasPrice: '0x3b9aca00',
+          nonce: '0x96',
+          to: '0x50a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706',
+          value: '0x2386f26fc10000',
+        },
+      }
+
+      const wrapper = shallow(<TransactionAction
+        methodData={methodData}
+        transaction={transaction}
+        className="transaction-action"
+      />, { context: { tOrDefault }})
+
+      assert.equal(wrapper.find('.transaction-action').length, 1)
+      assert.equal(wrapper.text(), '--')
+    })
+
+    it('should render Sent Ether', () => {
+      const methodData = { data: {}, done: true, error: null }
+      const transaction = {
+        id: 1,
+        status: 'confirmed',
+        submittedTime: 1534045442919,
+        time: 1534045440641,
+        txParams: {
+          from: '0xc5ae6383e126f901dcb06131d97a88745bfa88d6',
+          gas: '0x5208',
+          gasPrice: '0x3b9aca00',
+          nonce: '0x96',
+          to: 'sentEtherAddress',
+          value: '0x2386f26fc10000',
+        },
+      }
+
+      const wrapper = shallow(<TransactionAction
+        methodData={methodData}
+        transaction={transaction}
+        className="transaction-action"
+      />, { context: { tOrDefault }})
+
+      assert.equal(wrapper.find('.transaction-action').length, 1)
+      wrapper.setState({ transactionAction: 'sentEther' })
+      assert.equal(wrapper.text(), 'sentEther')
+    })
+
+    it('should render Approved', () => {
+      const methodData = {
+        data: {
+          name: 'Approve',
+          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="transaction-action"
+      />, { context: { tOrDefault }})
+
+      assert.equal(wrapper.find('.transaction-action').length, 1)
+      wrapper.setState({ transactionAction: 'approve' })
+      assert.equal(wrapper.text(), 'approve')
+    })
+  })
+})
diff --git a/ui/app/components/transaction-action/transaction-action.component.js b/ui/app/components/transaction-action/transaction-action.component.js
new file mode 100644
index 000000000..81a1e96d0
--- /dev/null
+++ b/ui/app/components/transaction-action/transaction-action.component.js
@@ -0,0 +1,52 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getTransactionActionKey } from '../../helpers/transactions.util'
+
+export default class TransactionAction extends PureComponent {
+  static contextTypes = {
+    tOrDefault: PropTypes.func,
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    transaction: PropTypes.object,
+    methodData: PropTypes.object,
+  }
+
+  state = {
+    transactionAction: '',
+  }
+
+  componentDidMount () {
+    this.getTransactionAction()
+  }
+
+  componentDidUpdate () {
+    this.getTransactionAction()
+  }
+
+  async getTransactionAction () {
+    const { transactionAction } = this.state
+    const { transaction, methodData } = this.props
+    const { data, done } = methodData
+
+    if (!done || transactionAction) {
+      return
+    }
+
+    const actionKey = await getTransactionActionKey(transaction, data)
+    const action = actionKey && this.context.tOrDefault(actionKey)
+    this.setState({ transactionAction: action })
+  }
+
+  render () {
+    const { className, methodData: { done } } = this.props
+    const { transactionAction } = this.state
+
+    return (
+      <div className={className}>
+        { (done && transactionAction) || '--' }
+      </div>
+    )
+  }
+}