Add Transaction Details to the Transaction List view

app/_locales/en/messages.json

@@ -17,6 +17,9 @@
   "accountSelectionRequired": {
     "message": "You need to select an account!"
   },
+  "activityLog": {
+    "message": "activity log"
+  },
   "address": {
     "message": "Address"
   },
@@ -857,6 +860,9 @@
   "save": {
     "message": "Save"
   },
+  "speedUp": {
+    "message": "speed up"
+  },
   "speedUpTitle": {
     "message": "Speed Up Transaction"
   },
@@ -1085,6 +1091,27 @@
   "total": {
     "message": "Total"
   },
+  "transaction": {
+    "message": "transaction"
+  },
+  "transactionConfirmed": {
+    "message": "Transaction confirmed on $2."
+  },
+  "transactionCreated": {
+    "message": "Transaction created with a value of $1 on $2."
+  },
+  "transactionDropped": {
+    "message": "Transaction dropped on $2."
+  },
+  "transactionSubmitted": {
+    "message": "Transaction submitted on $2."
+  },
+  "transactionUpdated": {
+    "message": "Transaction updated on $2."
+  },
+  "transactionUpdatedGas": {
+    "message": "Transaction updated with a gas price of $1 on $2."
+  },
   "transactions": {
     "message": "transactions"
   },
@@ -1131,6 +1158,9 @@
   "unavailable": {
     "message": "Unavailable"
   },
+  "units": {
+    "message": "units"
+  },
   "unknown": {
     "message": "Unknown"
   },

test/e2e/beta/from-import-beta-ui.spec.js

@@ -317,7 +317,7 @@ describe('Using MetaMask with an existing account', function () {
       const transactions = await findElements(driver, By.css('.transaction-list-item'))
       assert.equal(transactions.length, 1)
 
-      const txValues = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
+      const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
       assert.equal(txValues.length, 1)
       assert.equal(await txValues[0].getText(), '-1 ETH')
     })

test/e2e/beta/metamask-beta-ui.spec.js

@@ -408,7 +408,7 @@ describe('MetaMask', function () {
       assert.equal(transactions.length, 1)
 
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
-        const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+        const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
         await driver.wait(until.elementTextMatches(txValues, /-1\sETH/), 10000)
       }
     })
@@ -450,7 +450,7 @@ describe('MetaMask', function () {
       const transactions = await findElements(driver, By.css('.transaction-list-item'))
       assert.equal(transactions.length, 2)
 
-      const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+      const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
       await driver.wait(until.elementTextMatches(txValues, /-3\sETH/), 10000)
     })
   })
@@ -528,7 +528,7 @@ describe('MetaMask', function () {
       await delay(largeDelayMs)
 
       await findElements(driver, By.css('.transaction-list-item'))
-      const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
+      const [txListValue] = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
       await driver.wait(until.elementTextMatches(txListValue, /-4\sETH/), 10000)
       await txListValue.click()
       await delay(regularDelayMs)
@@ -562,7 +562,7 @@ describe('MetaMask', function () {
         return confirmedTxes.length === 4
       }, 10000)
 
-      const txValues = await findElements(driver, By.css('.transaction-list-item__amount--secondary'))
+      const txValues = await findElements(driver, By.css('.transaction-list-item__amount--primary'))
       await driver.wait(until.elementTextMatches(txValues[0], /-4\sETH/), 10000)
 
       // const txAccounts = await findElements(driver, By.css('.tx-list-account'))
@@ -594,7 +594,7 @@ describe('MetaMask', function () {
         return confirmedTxes.length === 5
       }, 10000)
 
-      const txValues = await findElement(driver, By.css('.transaction-list-item__amount--secondary'))
+      const txValues = await findElement(driver, By.css('.transaction-list-item__amount--primary'))
       await driver.wait(until.elementTextMatches(txValues, /-0\sETH/), 10000)
 
       await closeAllWindowHandlesExcept(driver, [extension, dapp])

test/integration/lib/confirm-sig-requests.js

@@ -19,7 +19,7 @@ async function runConfirmSigRequestsTest (assert, done) {
   selectState.val('confirm sig requests')
   reactTriggerChange(selectState[0])
 
-  const pendingRequestItem = $.find('.transaction-list-item')
+  const pendingRequestItem = $.find('.transaction-list-item .transaction-list-item__grid')
 
   if (pendingRequestItem[0]) {
     pendingRequestItem[0].click()

test/integration/lib/tx-list-items.js

@@ -32,9 +32,11 @@ async function runTxListItemsTest (assert, done) {
   const txListItems = await queryAsync($, '.transaction-list-item')
   assert.equal(txListItems.length, 8, 'all tx list items are rendered')
 
-  const retryTx = txListItems[1]
-  const retryTxLink = await findAsync($(retryTx), '.transaction-list-item__retry')
-  assert.equal(retryTxLink[0].textContent, 'Taking too long? Increase the gas price on your transaction', 'retryTx has expected link')
+  const retryTxGrid = await findAsync($(txListItems[1]), '.transaction-list-item__grid')
+  retryTxGrid[0].click()
+  const retryTxDetails = await findAsync($(txListItems[1]), '.transaction-list-item-details')
+  const headerButtons = await findAsync($(retryTxDetails[0]), '.transaction-list-item-details__header-button')
+  assert.equal(headerButtons[0].textContent, 'speed up')
 
   const approvedTx = txListItems[2]
   const approvedTxRenderedStatus = await findAsync($(approvedTx), '.transaction-list-item__status')

ui/app/components/button/button.component.js

@@ -6,21 +6,23 @@ const CLASSNAME_DEFAULT = 'btn-default'
 const CLASSNAME_PRIMARY = 'btn-primary'
 const CLASSNAME_SECONDARY = 'btn-secondary'
 const CLASSNAME_CONFIRM = 'btn-confirm'
+const CLASSNAME_RAISED = 'btn-raised'
 const CLASSNAME_LARGE = 'btn--large'
 
 const typeHash = {
   default: CLASSNAME_DEFAULT,
   primary: CLASSNAME_PRIMARY,
   secondary: CLASSNAME_SECONDARY,
   confirm: CLASSNAME_CONFIRM,
+  raised: CLASSNAME_RAISED,
 }
 
 export default class Button extends Component {
   static propTypes = {
     type: PropTypes.string,
     large: PropTypes.bool,
     className: PropTypes.string,
-    children: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   }
 
   render () {
@@ -29,6 +31,7 @@ export default class Button extends Component {
     return (
       <button
         className={classnames(
+          'button',
           typeHash[type],
           large && CLASSNAME_LARGE,
           className

ui/app/components/card/card.component.js

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class Card extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    overrideClassName: PropTypes.bool,
+    title: PropTypes.string,
+    children: PropTypes.node,
+  }
+
+  render () {
+    const { className, overrideClassName, title } = this.props
+
+    return (
+      <div className={classnames({ 'card': !overrideClassName }, className)}>
+        <div className="card__title">
+          { title }
+        </div>
+        { this.props.children }
+      </div>
+    )
+  }
+}

ui/app/components/card/index.js

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

ui/app/components/card/index.scss

@@ -0,0 +1,11 @@
+.card {
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+  padding: 8px;
+
+  &__title {
+    border-bottom: 1px solid #d8d8d8;
+    padding-bottom: 4px;
+    text-transform: capitalize;
+  }
+}

ui/app/components/card/tests/card.component.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import Card from '../card.component'
+
+describe('Card Component', () => {
+  it('should render a card with a title and child element', () => {
+    const wrapper = shallow(
+      <Card
+        title="Test"
+        className="card-test-class"
+      >
+        <div className="child-test-class">Child</div>
+      </Card>
+    )
+
+    assert.ok(wrapper.hasClass('card-test-class'))
+    const title = wrapper.find('.card__title')
+    assert.ok(title)
+    assert.equal(title.text(), 'Test')
+    const child = wrapper.find('.child-test-class')
+    assert.ok(child)
+    assert.equal(child.text(), 'Child')
+  })
+})

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

@@ -1,13 +1,18 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { ETH } from '../../constants/common'
+import { ETH, GWEI } from '../../constants/common'
 
 export default class CurrencyDisplay extends PureComponent {
   static propTypes = {
     className: PropTypes.string,
     displayValue: PropTypes.string,
     prefix: PropTypes.string,
+    // Used in container
     currency: PropTypes.oneOf([ETH]),
+    denomination: PropTypes.oneOf([GWEI]),
+    value: PropTypes.string,
+    numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    hideLabel: PropTypes.bool,
   }
 
   render () {

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

@@ -3,13 +3,15 @@ import CurrencyDisplay from './currency-display.component'
 import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util'
 
 const mapStateToProps = (state, ownProps) => {
-  const { value, numberOfDecimals = 2, currency } = ownProps
+  const { value, numberOfDecimals = 2, currency, denomination, hideLabel } = ownProps
   const { metamask: { currentCurrency, conversionRate } } = state
 
   const toCurrency = currency || currentCurrency
-  const convertedValue = getValueFromWeiHex({ value, toCurrency, conversionRate, numberOfDecimals })
+  const convertedValue = getValueFromWeiHex({
+    value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination,
+  })
   const formattedValue = formatCurrency(convertedValue, toCurrency)
-  const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}`
+  const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}`
 
   return {
     displayValue,

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

@@ -51,6 +51,50 @@ describe('CurrencyDisplay container', () => {
             displayValue: '1.266 ETH',
           },
         },
+        {
+          props: {
+            value: '0x1193461d01595930',
+            currency: 'ETH',
+            numberOfDecimals: 3,
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1.266',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            denomination: 'GWEI',
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            denomination: 'WEI',
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1000000000',
+          },
+        },
+        {
+          props: {
+            value: '0x3b9aca00',
+            currency: 'ETH',
+            numberOfDecimals: 100,
+            hideLabel: true,
+          },
+          result: {
+            displayValue: '1e-9',
+          },
+        },
       ]
 
       tests.forEach(({ props, result }) => {

ui/app/components/customize-gas-modal/index.js

@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const GasModalCard = require('./gas-modal-card')
+import Button from '../button'
 
 const ethUtil = require('ethereumjs-util')
 
@@ -353,16 +354,16 @@ CustomizeGasModal.prototype.render = function () {
         }, [this.context.t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('button.btn-default.send-v2__customize-gas__cancel', {
+          h(Button, {
+            type: 'default',
+            className: 'send-v2__customize-gas__cancel',
             onClick: this.props.hideModal,
-            style: {
-              marginRight: '10px',
-            },
           }, [this.context.t('cancel')]),
-
-          h('button.btn-primary.send-v2__customize-gas__save', {
+          h(Button, {
+            type: 'primary',
+            className: 'send-v2__customize-gas__save',
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
-            className: error && 'btn-primary--disabled',
+            disabled: error,
           }, [this.context.t('save')]),
         ]),