add title to transaction action component (#8050)

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

@@ -46,6 +46,7 @@ describe('TransactionAction Component', function () {
       assert.equal(wrapper.find('.transaction-action').length, 1)
       wrapper.setState({ transactionAction: 'sentEther' })
       assert.equal(wrapper.text(), 'sentEther')
+      assert.equal(wrapper.find('.transaction-action').props().title.trim(), 'sentEther')
     })
 
     it('should render Approved', async function () {
@@ -81,6 +82,7 @@ describe('TransactionAction Component', function () {
       assert.ok(wrapper)
       assert.equal(wrapper.find('.transaction-action').length, 1)
       assert.equal(wrapper.find('.transaction-action').text().trim(), 'Approve')
+      assert.equal(wrapper.find('.transaction-action').props().title.trim(), 'Approve')
     })
 
     it('should render contractInteraction', async function () {
@@ -114,6 +116,7 @@ describe('TransactionAction Component', function () {
       assert.ok(wrapper)
       assert.equal(wrapper.find('.transaction-action').length, 1)
       assert.equal(wrapper.find('.transaction-action').text().trim(), 'contractInteraction')
+      assert.equal(wrapper.find('.transaction-action').props().title.trim(), 'contractInteraction')
     })
   })
 })

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

@@ -29,9 +29,11 @@ export default class TransactionAction extends PureComponent {
   render () {
     const { className } = this.props
 
+    const action = this.getTransactionAction()
+
     return (
-      <div className={classnames('transaction-action', className)}>
+      <div className={classnames('transaction-action', className)} title={action}>
-        { this.getTransactionAction() }
+        { action }
       </div>
     )
   }