Merge pull request #5182 from MetaMask/tx-activity

Add Transaction Details to the Transaction List view

63 files changed, 1404 insertions, 318 deletions

diff --git a/ui/app/components/button/button.component.js b/ui/app/components/button/button.component.js
index 1e0ef1b64..4a06333e7 100644
--- a/ui/app/components/button/button.component.js
+++ b/ui/app/components/button/button.component.js
@@ -6,6 +6,7 @@ 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 = {
@@ -13,6 +14,7 @@ const typeHash = {
   primary: CLASSNAME_PRIMARY,
   secondary: CLASSNAME_SECONDARY,
   confirm: CLASSNAME_CONFIRM,
+  raised: CLASSNAME_RAISED,
 }
 
 export default class Button extends Component {
@@ -20,7 +22,7 @@ export default class Button extends Component {
     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
diff --git a/ui/app/components/card/card.component.js b/ui/app/components/card/card.component.js
new file mode 100644
index 000000000..bb7241da1
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/ui/app/components/card/index.js b/ui/app/components/card/index.js
new file mode 100644
index 000000000..c3ca6e3f4
--- /dev/null
+++ b/ui/app/components/card/index.js
@@ -0,0 +1 @@
+export { default } from './card.component'
diff --git a/ui/app/components/card/index.scss b/ui/app/components/card/index.scss
new file mode 100644
index 000000000..bde54a15e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ui/app/components/card/tests/card.component.test.js b/ui/app/components/card/tests/card.component.test.js
new file mode 100644
index 000000000..cea05033f
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js
index 389791b42..e4eb58a2a 100644
--- a/ui/app/components/currency-display/currency-display.component.js
+++ b/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 () {
diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js
index b8a738c65..6644a1099 100644
--- a/ui/app/components/currency-display/currency-display.container.js
+++ b/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,
diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js
index 474ce5378..5265bbb04 100644
--- a/ui/app/components/currency-display/tests/currency-display.container.test.js
+++ b/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 }) => {
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index c255fd64d..e67fbe45b 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/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')]),
         ]),
 
diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
deleted file mode 100644
index 75303a34a..000000000
--- a/ui/app/components/hex-as-decimal-input.js
+++ /dev/null
@@ -1,161 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-const extend = require('xtend')
-const connect = require('react-redux').connect
-
-HexAsDecimalInput.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(HexAsDecimalInput)
-
-
-inherits(HexAsDecimalInput, Component)
-function HexAsDecimalInput () {
-  this.state = { invalid: null }
-  Component.call(this)
-}
-
-/* Hex as Decimal Input
- *
- * A component for allowing easy, decimal editing
- * of a passed in hex string value.
- *
- * On change, calls back its `onChange` function parameter
- * and passes it an updated hex string.
- */
-
-HexAsDecimalInput.prototype.render = function () {
-  const props = this.props
-  const state = this.state
-
-  const { value, onChange, min, max } = props
-
-  const toEth = props.toEth
-  const suffix = props.suffix
-  const decimalValue = decimalize(value, toEth)
-  const style = props.style
-
-  return (
-    h('.flex-column', [
-      h('.flex-row', {
-        style: {
-          alignItems: 'flex-end',
-          lineHeight: '13px',
-          fontFamily: 'Montserrat Light',
-          textRendering: 'geometricPrecision',
-        },
-      }, [
-        h('input.hex-input', {
-          type: 'number',
-          required: true,
-          min: min,
-          max: max,
-          style: extend({
-            display: 'block',
-            textAlign: 'right',
-            backgroundColor: 'transparent',
-            border: '1px solid #bdbdbd',
-
-          }, style),
-          value: parseInt(decimalValue),
-          onBlur: (event) => {
-            this.updateValidity(event)
-          },
-          onChange: (event) => {
-            this.updateValidity(event)
-            const hexString = (event.target.value === '') ? '' : hexify(event.target.value)
-            onChange(hexString)
-          },
-          onInvalid: (event) => {
-            const msg = this.constructWarning()
-            if (msg === state.invalid) {
-              return
-            }
-            this.setState({ invalid: msg })
-            event.preventDefault()
-            return false
-          },
-        }),
-        h('div', {
-          style: {
-            color: ' #AEAEAE',
-            fontSize: '12px',
-            marginLeft: '5px',
-            marginRight: '6px',
-            width: '20px',
-          },
-        }, suffix),
-      ]),
-
-      state.invalid ? h('span.error', {
-        style: {
-          position: 'absolute',
-          right: '0px',
-          textAlign: 'right',
-          transform: 'translateY(26px)',
-          padding: '3px',
-          background: 'rgba(255,255,255,0.85)',
-          zIndex: '1',
-          textTransform: 'capitalize',
-          border: '2px solid #E20202',
-        },
-      }, state.invalid) : null,
-    ])
-  )
-}
-
-HexAsDecimalInput.prototype.setValid = function (message) {
-  this.setState({ invalid: null })
-}
-
-HexAsDecimalInput.prototype.updateValidity = function (event) {
-  const target = event.target
-  const value = this.props.value
-  const newValue = target.value
-
-  if (value === newValue) {
-    return
-  }
-
-  const valid = target.checkValidity()
-  if (valid) {
-    this.setState({ invalid: null })
-  }
-}
-
-HexAsDecimalInput.prototype.constructWarning = function () {
-  const { name, min, max } = this.props
-  let message = name ? name + ' ' : ''
-
-  if (min && max) {
-    message += this.context.t('betweenMinAndMax', [min, max])
-  } else if (min) {
-    message += this.context.t('greaterThanMin', [min])
-  } else if (max) {
-    message += this.context.t('lessThanMax', [max])
-  } else {
-    message += this.context.t('invalidInput')
-  }
-
-  return message
-}
-
-function hexify (decimalString) {
-  const hexBN = new BN(parseInt(decimalString), 10)
-  return '0x' + hexBN.toString('hex')
-}
-
-function decimalize (input, toEth) {
-  if (input === '') {
-    return ''
-  } else {
-    const strippedInput = ethUtil.stripHexPrefix(input)
-    const inputBN = new BN(strippedInput, 'hex')
-    return inputBN.toString(10)
-  }
-}
diff --git a/ui/app/components/hex-to-decimal/hex-to-decimal.component.js b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
new file mode 100644
index 000000000..6847a6919
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/hex-to-decimal.component.js
@@ -0,0 +1,21 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { hexToDecimal } from '../../helpers/conversions.util'
+
+export default class HexToDecimal extends PureComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  render () {
+    const { className, value } = this.props
+    const decimalValue = hexToDecimal(value)
+
+    return (
+      <div className={className}>
+        { decimalValue }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/hex-to-decimal/index.js b/ui/app/components/hex-to-decimal/index.js
new file mode 100644
index 000000000..6e8567ca9
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/index.js
@@ -0,0 +1 @@
+export { default } from './hex-to-decimal.component'
diff --git a/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
new file mode 100644
index 000000000..c98da9ad4
--- /dev/null
+++ b/ui/app/components/hex-to-decimal/tests/hex-to-decimal.component.test.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import HexToDecimal from '../hex-to-decimal.component'
+
+describe('HexToDecimal Component', () => {
+  it('should render a prefixed hex as a decimal with a className', () => {
+    const wrapper = shallow(<HexToDecimal
+      value="0x3039"
+      className="hex-to-decimal"
+    />)
+
+    assert.ok(wrapper.hasClass('hex-to-decimal'))
+    assert.equal(wrapper.text(), '12345')
+  })
+
+  it('should render an unprefixed hex as a decimal with a className', () => {
+    const wrapper = shallow(<HexToDecimal
+      value="1A85"
+      className="hex-to-decimal"
+    />)
+
+    assert.ok(wrapper.hasClass('hex-to-decimal'))
+    assert.equal(wrapper.text(), '6789')
+  })
+})
diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js
index 076e65b81..7bd921892 100644
--- a/ui/app/components/identicon.js
+++ b/ui/app/components/identicon.js
@@ -56,6 +56,7 @@ IdenticonComponent.prototype.render = function () {
     })
   } else {
     return h('img.balance-icon', {
+      className,
       src: './images/eth_logo.svg',
       style: {
         ...style,
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index cb4065fd9..983d6b98a 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -2,6 +2,8 @@
 
 @import './button-group/index';
 
+@import './card/index';
+
 @import './confirm-page-container/index';
 
 @import './export-text-container/index';
@@ -24,6 +26,10 @@
 
 @import './tabs/index';
 
+@import './transaction-activity-log/index';
+
+@import './transaction-breakdown/index';
+
 @import './transaction-view/index';
 
 @import './transaction-view-balance/index';
@@ -32,6 +38,8 @@
 
 @import './transaction-list-item/index';
 
+@import './transaction-list-item-details/index';
+
 @import './transaction-status/index';
 
 @import './app-header/index';
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index bc577fda0..248ffe008 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
 
+import Button from '../button'
+
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
@@ -80,12 +82,17 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-primary.account-modal__button', {
+      h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
+
+      exportPrivateKeyFeatureEnabled ? h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => showExportPrivateKeyModal(),
       }, this.context.t('exportPrivateKey')) : null,
 
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 0337c5413..3f526bd43 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
 import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../button'
 
 import {
   getDecimalGasLimit,
@@ -116,21 +117,23 @@ export default class CustomizeGas extends Component {
               { t('revert') }
             </div>
             <div className="customize-gas__buttons">
-              <button
-                className="btn-default customize-gas__cancel"
+              <Button
+                type="default"
+                className="customize-gas__cancel"
                 onClick={() => hideModal()}
                 style={{ marginRight: '10px' }}
               >
                 { t('cancel') }
-              </button>
-              <button
-                className="btn-primary customize-gas__save"
+              </Button>
+              <Button
+                type="primary"
+                className="customize-gas__save"
                 onClick={() => this.handleSave()}
                 style={{ marginRight: '10px' }}
                 disabled={!valid}
               >
                 { t('save') }
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d..09137d39a 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -7,6 +7,8 @@ const actions = require('../../actions')
 const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
 const ShapeshiftForm = require('../shapeshift-form')
 
+import Button from '../button'
+
 let DIRECT_DEPOSIT_ROW_TITLE
 let DIRECT_DEPOSIT_ROW_TEXT
 let COINBASE_ROW_TITLE
@@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
+        h(Button, {
+          type: 'primary',
+          className: 'deposit-ether-modal__deposit-button',
+          large: true,
           onClick: onButtonClick,
         }, [buttonLabel]),
       ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 60a416304..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
 const copyToClipboard = require('copy-to-clipboard')
 const { checksumAddress } = require('../../util')
+import Button from '../button'
 
 function mapStateToPropsFactory () {
   let selectedIdentity = null
@@ -97,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
     })
 }
 
-ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
-  return h('button', {
-    className,
-    onClick,
-  }, label)
-}
-
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
-    !privateKey && this.renderButton(
-      'btn-default btn--large export-private-key__button export-private-key__button--cancel',
-      () => hideModal(),
-      'Cancel'
-    ),
+    !privateKey && h(Button, {
+      type: 'default',
+      large: true,
+      className: 'export-private-key__button export-private-key__button--cancel',
+      onClick: () => hideModal(),
+    }, this.context.t('cancel')),
 
     (privateKey
-      ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
-      : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+      ? (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => hideModal(),
+        }, this.context.t('done'))
+      ) : (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+        }, this.context.t('confirm'))
+      )
     ),
 
   ])
diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 488a189ea..2767b2e1f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
 const Select = require('react-select').default
+import Button from '../../../button'
 
 class AccountList extends Component {
     constructor (props, context) {
@@ -143,22 +144,20 @@ class AccountList extends Component {
     }
 
     return h('div.new-account-connect-form__buttons', {}, [
-      h(
-        'button.btn-default.btn--large.new-account-connect-form__button',
-        {
-          onClick: this.props.onCancel.bind(this),
-        },
-        [this.context.t('cancel')]
-      ),
-
-      h(
-        `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
-        {
-          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
-          ...buttonProps,
-        },
-        [this.context.t('unlock')]
-      ),
+      h(Button, {
+        type: 'default',
+        large: true,
+        className: 'new-account-connect-form__button',
+        onClick: this.props.onCancel.bind(this),
+      }, [this.context.t('cancel')]),
+
+      h(Button, {
+        type: 'primary',
+        large: true,
+        className: 'new-account-connect-form__button unlock',
+        disabled,
+        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+      }, [this.context.t('unlock')]),
     ])
   }
 
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index b3dfa4ee2..d3abf3119 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
+import Button from '../../../button'
 
 class ConnectScreen extends Component {
     constructor (props, context) {
@@ -60,13 +61,13 @@ class ConnectScreen extends Component {
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                     h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
                 ]),
-                h(
-                    'button.btn-primary.btn--large',
-                    {
-                      onClick: () => global.platform.openWindow({
-                        url: 'https://google.com/chrome',
-                      }),
-                    },
+                h(Button, {
+                  type: 'primary',
+                  large: true,
+                  onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                  }),
+                },
                     this.context.t('downloadGoogleChrome')
                 ),
             ])
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index dd57256a3..32b1065aa 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -8,6 +8,7 @@ const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../../routes')
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../button'
 
 class JsonImportSubview extends Component {
   constructor (props) {
@@ -51,17 +52,19 @@ class JsonImportSubview extends Component {
 
         h('div.new-account-create-form__buttons', {}, [
 
-          h('button.btn-default.new-account-create-form__button', {
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, [
-            this.context.t('cancel'),
-          ]),
+          }, [this.context.t('cancel')]),
 
-          h('button.btn-primary.new-account-create-form__button', {
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.createNewKeychain(),
-          }, [
-            this.context.t('import'),
-          ]),
+          }, [this.context.t('import')]),
 
         ]),
 
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 1db999f2f..8db1bfbdd 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -7,6 +7,7 @@ const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+import Button from '../../../button'
 
 PrivateKeyImportView.contextTypes = {
   t: PropTypes.func,
@@ -61,20 +62,22 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => {
             displayWarning(null)
             this.props.history.push(DEFAULT_ROUTE)
           },
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => this.createNewKeychain(),
-        }, [
-          this.context.t('import'),
-        ]),
+        }, [this.context.t('import')]),
 
       ]),
 
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 402b8f03b..c9e4b113c 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+import Button from '../../button'
 
 class NewAccountCreateForm extends Component {
   constructor (props, context) {
@@ -38,20 +39,22 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => history.push(DEFAULT_ROUTE),
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className:'new-account-create-form__button',
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
           },
-        }, [
-          this.context.t('create'),
-        ]),
+        }, [this.context.t('create')]),
 
       ]),
 
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7d7d3f462..7782b541c 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,6 +8,8 @@ const { requestRevealSeedWords } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
 const ExportTextContainer = require('../../export-text-container')
 
+import Button from '../../button'
+
 const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
 
@@ -106,10 +108,16 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('cancel')),
-        h('button.btn-primary.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: event => this.handleSubmit(event),
           disabled: this.state.password === '',
         }, this.context.t('next')),
@@ -120,7 +128,10 @@ class RevealSeedPage extends Component {
   renderRevealSeedFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('close')),
       ])
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index a5ea1b89c..423276cf3 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -13,6 +13,8 @@ const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
 const locales = require('../../../../../app/_locales/index.json')
 
+import Button from '../../button'
+
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
     return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
@@ -241,7 +243,10 @@ class Settings extends Component {
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button',
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
@@ -266,7 +271,10 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--red', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button--red',
               onClick: event => {
                 event.preventDefault()
                 history.push(REVEAL_SEED_ROUTE)
@@ -286,7 +294,10 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--orange', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button--orange',
               onClick (event) {
                 event.preventDefault()
                 setFeatureFlagToBeta()
@@ -305,7 +316,10 @@ class Settings extends Component {
       h('div.settings__content-item', this.context.t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
-          h('button.btn-primary.btn--large.settings__button--orange', {
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'settings__button--orange',
             onClick (event) {
               event.preventDefault()
               showResetAccountConfirmationModal()
diff --git a/ui/app/components/sender-to-recipient/index.scss b/ui/app/components/sender-to-recipient/index.scss
index 656e30ddf..0ab0413be 100644
--- a/ui/app/components/sender-to-recipient/index.scss
+++ b/ui/app/components/sender-to-recipient/index.scss
@@ -80,13 +80,13 @@
     justify-content: center;
     position: relative;
     flex: 0 0 auto;
-    padding: 8px;
 
     .sender-to-recipient {
       &__party {
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: center;
         flex: 1;
         border-radius: 4px;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
@@ -111,7 +111,6 @@
       }
 
       &__arrow-container {
-        padding: 0 2px;
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
index 445a11d8a..61f77224d 100644
--- a/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/sender-to-recipient/sender-to-recipient.component.js
@@ -115,7 +115,7 @@ export default class SenderToRecipient extends PureComponent {
   renderRecipientWithoutAddress () {
     return (
       <div className="sender-to-recipient__party sender-to-recipient__party--recipient">
-        <i className="fa fa-file-text-o" />
+        { !this.props.addressOnly && <i className="fa fa-file-text-o" /> }
         <div className="sender-to-recipient__name">
           { this.context.t('newContract') }
         </div>
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2c4ba40bf..a842bcc8b 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -9,6 +9,8 @@ const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../actions
 const { isValidAddress } = require('../util')
 const SimpleDropdown = require('./dropdowns/simple-dropdown')
 
+import Button from './button'
+
 function mapStateToProps (state) {
   const {
     coinOptions,
@@ -242,8 +244,10 @@ ShapeshiftForm.prototype.render = function () {
 
       ]),
 
-      !depositAddress && h('button.btn-primary.btn--large.shapeshift-form__shapeshift-buy-btn', {
-        className: btnClass,
+      !depositAddress && h(Button, {
+        type: 'primary',
+        large: true,
+        className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
       }, [this.context.t('buy')]),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 2e0102d1a..2bfa350d3 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -23,6 +23,7 @@ const {
 } = require('../selectors.js')
 
 import { clearConfirmTransaction } from '../ducks/confirm-transaction.duck'
+import Button from './button'
 
 const { DEFAULT_ROUTE } = require('../routes')
 
@@ -248,7 +249,10 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.btn-default.btn--large.request-signature__footer__cancel-button', {
+    h(Button, {
+      type: 'default',
+      large: true,
+      className: 'request-signature__footer__cancel-button',
       onClick: event => {
         cancel(event).then(() => {
           this.props.clearConfirmTransaction()
@@ -256,7 +260,9 @@ SignatureRequest.prototype.renderFooter = function () {
         })
       },
     }, this.context.t('cancel')),
-    h('button.btn-primary.btn--large', {
+    h(Button, {
+      type: 'primary',
+      large: true,
       onClick: event => {
         sign(event).then(() => {
           this.props.clearConfirmTransaction()
diff --git a/ui/app/components/transaction-activity-log/index.js b/ui/app/components/transaction-activity-log/index.js
new file mode 100644
index 000000000..a33da15a3
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-activity-log.container'
diff --git a/ui/app/components/transaction-activity-log/index.scss b/ui/app/components/transaction-activity-log/index.scss
new file mode 100644
index 000000000..2324d44b1
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/index.scss
@@ -0,0 +1,63 @@
+.transaction-activity-log {
+  &__card {
+    background: $white;
+    height: 100%;
+  }
+
+  &__activities-container {
+    padding-top: 8px;
+  }
+
+  &__activity {
+    padding: 4px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 6px;
+      border-right: 1px solid $scorpion;
+    }
+
+    &:first-child::after {
+      height: 50%;
+      top: 50%;
+    }
+
+    &:last-child::after {
+      height: 50%;
+    }
+  }
+
+  &__activity-icon {
+    width: 13px;
+    height: 13px;
+    margin-right: 6px;
+    border-radius: 50%;
+    background: $scorpion;
+    flex: 0 0 auto;
+  }
+
+  &__activity-text {
+    color: $scorpion;
+    font-size: .75rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__value {
+    display: inline;
+    font-weight: 500;
+  }
+
+  b {
+    font-weight: 500;
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
new file mode 100644
index 000000000..8687dbbc7
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.component.test.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionActivityLog from '../transaction-activity-log.component'
+import Card from '../../card'
+
+describe('TransactionActivityLog Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionActivityLog
+        transaction={transaction}
+        className="test-class"
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-activity-log'))
+    assert.ok(wrapper.hasClass('test-class'))
+    assert.equal(wrapper.find(Card).length, 1)
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
new file mode 100644
index 000000000..85d56a6a2
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.container.test.js
@@ -0,0 +1,27 @@
+import assert from 'assert'
+import proxyquire from 'proxyquire'
+
+let mapStateToProps
+
+proxyquire('../transaction-activity-log.container.js', {
+  'react-redux': {
+    connect: ms => {
+      mapStateToProps = ms
+      return () => ({})
+    },
+  },
+})
+
+describe('TransactionActivityLog container', () => {
+  describe('mapStateToProps()', () => {
+    it('should return the correct props', () => {
+      const mockState = {
+        metamask: {
+          conversionRate: 280.45,
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45 })
+    })
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
new file mode 100644
index 000000000..586500408
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/tests/transaction-activity-log.util.test.js
@@ -0,0 +1,208 @@
+import assert from 'assert'
+import { getActivities } from '../transaction-activity-log.util'
+
+describe('getActivities', () => {
+  it('should return no activities for an empty history', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    assert.deepEqual(getActivities(transaction), [])
+  })
+
+  it('should return activities for a transaction\'s history', () => {
+    const transaction = {
+      history: [
+        {
+          id: 5559712943815343,
+          loadingDefaults: true,
+          metamaskNetworkId: '3',
+          status: 'unapproved',
+          time: 1535507561452,
+          txParams: {
+            from: '0x1',
+            gas: '0x5208',
+            gasPrice: '0x3b9aca00',
+            nonce: '0xa4',
+            to: '0x2',
+            value: '0x2386f26fc10000',
+          },
+        },
+        [
+          {
+            op: 'replace',
+            path: '/loadingDefaults',
+            timestamp: 1535507561515,
+            value: false,
+          },
+          {
+            op: 'add',
+            path: '/gasPriceSpecified',
+            value: true,
+          },
+          {
+            op: 'add',
+            path: '/gasLimitSpecified',
+            value: true,
+          },
+          {
+            op: 'add',
+            path: '/estimatedGas',
+            value: '0x5208',
+          },
+        ],
+        [
+          {
+            note: '#newUnapprovedTransaction - adding the origin',
+            op: 'add',
+            path: '/origin',
+            timestamp: 1535507561516,
+            value: 'MetaMask',
+          },
+          [],
+        ],
+        [
+          {
+            note: 'confTx: user approved transaction',
+            op: 'replace',
+            path: '/txParams/gasPrice',
+            timestamp: 1535664571504,
+            value: '0x77359400',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to approved',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564302,
+            value: 'approved',
+          },
+        ],
+        [
+          {
+            note: 'transactions#approveTransaction',
+            op: 'add',
+            path: '/txParams/nonce',
+            timestamp: 1535507564439,
+            value: '0xa4',
+          },
+          {
+            op: 'add',
+            path: '/nonceDetails',
+            value: {
+              local: {},
+              network: {},
+              params: {},
+            },
+          },
+        ],
+        [
+          {
+            note: 'transactions#publishTransaction',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564518,
+            value: 'signed',
+          },
+          {
+            op: 'add',
+            path: '/rawTx',
+            value: '0xf86b81a4843b9aca008252089450a9d56c2b8ba9a5c7f2c08c3d26e0499f23a706872386f26fc10000802aa007b30119fc4fc5954fad727895b7e3ba80a78d197e95703cc603bcf017879151a01c50beda40ffaee541da9c05b9616247074f25f392800e0ad6c7a835d5366edf',
+          },
+        ],
+        [],
+        [
+          {
+            note: 'transactions#setTxHash',
+            op: 'add',
+            path: '/hash',
+            timestamp: 1535507564658,
+            value: '0x7acc4987b5c0dfa8d423798a8c561138259de1f98a62e3d52e7e83c0e0dd9fb7',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager - add submitted time stamp',
+            op: 'add',
+            path: '/submittedTime',
+            timestamp: 1535507564660,
+            value: 1535507564660,
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to submitted',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507564665,
+            value: 'submitted',
+          },
+        ],
+        [
+          {
+            note: 'transactions/pending-tx-tracker#event: tx:block-update',
+            op: 'add',
+            path: '/firstRetryBlockNumber',
+            timestamp: 1535507575476,
+            value: '0x3bf624',
+          },
+        ],
+        [
+          {
+            note: 'txStateManager: setting status to confirmed',
+            op: 'replace',
+            path: '/status',
+            timestamp: 1535507615993,
+            value: 'confirmed',
+          },
+        ],
+      ],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const expectedResult = [
+      {
+        'eventKey': 'transactionCreated',
+        'timestamp': 1535507561452,
+        'value': '0x2386f26fc10000',
+      },
+      {
+        'eventKey': 'transactionUpdatedGas',
+        'timestamp': 1535664571504,
+        'value': '0x77359400',
+      },
+      {
+        'eventKey': 'transactionSubmitted',
+        'timestamp': 1535507564665,
+        'value': undefined,
+      },
+      {
+        'eventKey': 'transactionConfirmed',
+        'timestamp': 1535507615993,
+        'value': undefined,
+      },
+    ]
+
+    assert.deepEqual(getActivities(transaction), expectedResult)
+  })
+})
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.component.js b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
new file mode 100644
index 000000000..c4cf57d14
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.component.js
@@ -0,0 +1,91 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { getActivities } from './transaction-activity-log.util'
+import Card from '../card'
+import { getEthConversionFromWeiHex, getValueFromWeiHex } from '../../helpers/conversions.util'
+import { ETH } from '../../constants/common'
+import { formatDate } from '../../util'
+
+export default class TransactionActivityLog extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    className: PropTypes.string,
+    conversionRate: PropTypes.number,
+  }
+
+  state = {
+    activities: [],
+  }
+
+  componentDidMount () {
+    this.setActivites()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { transaction: { history: prevHistory = [] } = {} } = prevProps
+    const { transaction: { history = [] } = {} } = this.props
+
+    if (prevHistory.length !== history.length) {
+      this.setActivites()
+    }
+  }
+
+  setActivites () {
+    const activities = getActivities(this.props.transaction)
+    this.setState({ activities })
+  }
+
+  renderActivity (activity, index) {
+    const { conversionRate } = this.props
+    const { eventKey, value, timestamp } = activity
+    const ethValue = index === 0
+      ? `${getValueFromWeiHex({
+        value,
+        toCurrency: ETH,
+        conversionRate,
+        numberOfDecimals: 6,
+      })} ${ETH}`
+      : getEthConversionFromWeiHex({ value, toCurrency: ETH, conversionRate })
+    const formattedTimestamp = formatDate(timestamp)
+    const activityText = this.context.t(eventKey, [ethValue, formattedTimestamp])
+
+    return (
+      <div
+        key={index}
+        className="transaction-activity-log__activity"
+      >
+        <div className="transaction-activity-log__activity-icon" />
+        <div
+          className="transaction-activity-log__activity-text"
+          title={activityText}
+        >
+          { activityText }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+    const { className } = this.props
+    const { activities } = this.state
+
+    return (
+      <div className={classnames('transaction-activity-log', className)}>
+        <Card
+          title={t('activityLog')}
+          className="transaction-activity-log__card"
+        >
+          <div className="transaction-activity-log__activities-container">
+            { activities.map((activity, index) => this.renderActivity(activity, index)) }
+          </div>
+        </Card>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.container.js b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
new file mode 100644
index 000000000..4c8b6d971
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import TransactionActivityLog from './transaction-activity-log.component'
+import { conversionRateSelector } from '../../selectors'
+
+const mapStateToProps = state => {
+  return {
+    conversionRate: conversionRateSelector(state),
+  }
+}
+
+export default connect(mapStateToProps)(TransactionActivityLog)
diff --git a/ui/app/components/transaction-activity-log/transaction-activity-log.util.js b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
new file mode 100644
index 000000000..32834ff47
--- /dev/null
+++ b/ui/app/components/transaction-activity-log/transaction-activity-log.util.js
@@ -0,0 +1,82 @@
+// path constants
+const STATUS_PATH = '/status'
+const GAS_PRICE_PATH = '/txParams/gasPrice'
+
+// status constants
+const UNAPPROVED_STATUS = 'unapproved'
+const SUBMITTED_STATUS = 'submitted'
+const CONFIRMED_STATUS = 'confirmed'
+const DROPPED_STATUS = 'dropped'
+
+// op constants
+const REPLACE_OP = 'replace'
+
+// event constants
+const TRANSACTION_CREATED_EVENT = 'transactionCreated'
+const TRANSACTION_UPDATED_GAS_EVENT = 'transactionUpdatedGas'
+const TRANSACTION_SUBMITTED_EVENT = 'transactionSubmitted'
+const TRANSACTION_CONFIRMED_EVENT = 'transactionConfirmed'
+const TRANSACTION_DROPPED_EVENT = 'transactionDropped'
+const TRANSACTION_UPDATED_EVENT = 'transactionUpdated'
+
+const eventPathsHash = {
+  [STATUS_PATH]: true,
+  [GAS_PRICE_PATH]: true,
+}
+
+const statusHash = {
+  [SUBMITTED_STATUS]: TRANSACTION_SUBMITTED_EVENT,
+  [CONFIRMED_STATUS]: TRANSACTION_CONFIRMED_EVENT,
+  [DROPPED_STATUS]: TRANSACTION_DROPPED_EVENT,
+}
+
+function eventCreator (eventKey, timestamp, value) {
+  return {
+    eventKey,
+    timestamp,
+    value,
+  }
+}
+
+export function getActivities (transaction) {
+  const { history = [] } = transaction
+
+  return history.reduce((acc, base) => {
+    // First history item should be transaction creation
+    if (!Array.isArray(base) && base.status === UNAPPROVED_STATUS && base.txParams) {
+      const { time, txParams: { value } = {} } = base
+      return acc.concat(eventCreator(TRANSACTION_CREATED_EVENT, time, value))
+    } else if (Array.isArray(base)) {
+      const events = []
+
+      base.forEach(entry => {
+        const { op, path, value, timestamp } = entry
+
+        if (path in eventPathsHash && op === REPLACE_OP) {
+          switch (path) {
+            case STATUS_PATH: {
+              if (value in statusHash) {
+                events.push(eventCreator(statusHash[value], timestamp))
+              }
+
+              break
+            }
+
+            case GAS_PRICE_PATH: {
+              events.push(eventCreator(TRANSACTION_UPDATED_GAS_EVENT, timestamp, value))
+              break
+            }
+
+            default: {
+              events.push(eventCreator(TRANSACTION_UPDATED_EVENT, timestamp))
+            }
+          }
+        }
+      })
+
+      return acc.concat(events)
+    }
+
+    return acc
+  }, [])
+}
diff --git a/ui/app/components/transaction-breakdown/index.js b/ui/app/components/transaction-breakdown/index.js
new file mode 100644
index 000000000..c887f504f
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown.component'
diff --git a/ui/app/components/transaction-breakdown/index.scss b/ui/app/components/transaction-breakdown/index.scss
new file mode 100644
index 000000000..1bb108943
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/index.scss
@@ -0,0 +1,23 @@
+@import './transaction-breakdown-row/index';
+
+.transaction-breakdown {
+  &__card {
+    background: $white;
+    height: 100%;
+  }
+
+  &__row-title {
+    text-transform: capitalize;
+  }
+
+  &__value {
+    text-align: end;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &--eth-total {
+      font-weight: 500;
+    }
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
new file mode 100644
index 000000000..d18cd420c
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/tests/transaction-breakdown.component.test.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdown from '../transaction-breakdown.component'
+import TransactionBreakdownRow from '../transaction-breakdown-row'
+import Card from '../../card'
+
+describe('TransactionBreakdown Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionBreakdown
+        transaction={transaction}
+        className="test-class"
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown'))
+    assert.ok(wrapper.hasClass('test-class'))
+    assert.equal(wrapper.find(Card).length, 1)
+    assert.equal(wrapper.find(Card).find(TransactionBreakdownRow).length, 4)
+  })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
new file mode 100644
index 000000000..557bf75fb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-breakdown-row.component'
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
new file mode 100644
index 000000000..8c73be1a6
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss
@@ -0,0 +1,19 @@
+.transaction-breakdown-row {
+  font-size: .75rem;
+  color: $scorpion;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  &__title {
+    padding-right: 8px;
+  }
+
+  &__value {
+    min-width: 0;
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
new file mode 100644
index 000000000..c19399dbb
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionBreakdownRow from '../transaction-breakdown-row.component'
+import Button from '../../../button'
+
+describe('TransactionBreakdownRow Component', () => {
+  it('should render text properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        Test
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test')
+  })
+
+  it('should render components properly', () => {
+    const wrapper = shallow(
+      <TransactionBreakdownRow
+        title="test"
+        className="test-class"
+      >
+        <Button onClick={() => {}} >Button</Button>
+      </TransactionBreakdownRow>,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-breakdown-row'))
+    assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test')
+    assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button))
+  })
+})
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
new file mode 100644
index 000000000..c11ff8efa
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js
@@ -0,0 +1,26 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+export default class TransactionBreakdownRow extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+  }
+
+  render () {
+    const { title, children, className } = this.props
+
+    return (
+      <div className={classnames('transaction-breakdown-row', className)}>
+        <div className="transaction-breakdown-row__title">
+          { title }
+        </div>
+        <div className="transaction-breakdown-row__value">
+          { children }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
new file mode 100644
index 000000000..bb6075e9f
--- /dev/null
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -0,0 +1,82 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import TransactionBreakdownRow from './transaction-breakdown-row'
+import Card from '../card'
+import CurrencyDisplay from '../currency-display'
+import HexToDecimal from '../hex-to-decimal'
+import { ETH, GWEI } from '../../constants/common'
+import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
+import { sumHexes } from '../../helpers/transactions.util'
+
+export default class TransactionBreakdown extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    className: PropTypes.string,
+  }
+
+  static defaultProps = {
+    transaction: {},
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, className } = this.props
+    const { txParams: { gas, gasPrice, value } = {} } = transaction
+    const hexGasTotal = getHexGasTotal({ gasLimit: gas, gasPrice })
+    const totalInHex = sumHexes(hexGasTotal, value)
+
+    return (
+      <div className={classnames('transaction-breakdown', className)}>
+        <Card
+          title={t('transaction')}
+          className="transaction-breakdown__card"
+        >
+          <TransactionBreakdownRow title={t('amount')}>
+            <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={ETH}
+              value={value}
+            />
+          </TransactionBreakdownRow>
+          <TransactionBreakdownRow
+            title={`${t('gasLimit')} (${t('units')})`}
+            className="transaction-breakdown__row-title"
+          >
+            <HexToDecimal
+              className="transaction-breakdown__value"
+              value={gas}
+            />
+          </TransactionBreakdownRow>
+          <TransactionBreakdownRow title={t('gasPrice')}>
+            <CurrencyDisplay
+              className="transaction-breakdown__value"
+              currency={ETH}
+              denomination={GWEI}
+              value={gasPrice}
+              hideLabel
+            />
+          </TransactionBreakdownRow>
+          <TransactionBreakdownRow title={t('total')}>
+            <div>
+              <CurrencyDisplay
+                className="transaction-breakdown__value transaction-breakdown__value--eth-total"
+                currency={ETH}
+                value={totalInHex}
+                numberOfDecimals={6}
+              />
+              <CurrencyDisplay
+                className="transaction-breakdown__value"
+                value={totalInHex}
+              />
+            </div>
+          </TransactionBreakdownRow>
+        </Card>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list-item-details/index.js b/ui/app/components/transaction-list-item-details/index.js
new file mode 100644
index 000000000..0e878d032
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.js
@@ -0,0 +1 @@
+export { default } from './transaction-list-item-details.component'
diff --git a/ui/app/components/transaction-list-item-details/index.scss b/ui/app/components/transaction-list-item-details/index.scss
new file mode 100644
index 000000000..54cf834cc
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/index.scss
@@ -0,0 +1,49 @@
+.transaction-list-item-details {
+  &__header {
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__header-buttons {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &__header-button {
+    font-size: .625rem;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+
+  &__sender-to-recipient-container {
+    margin-bottom: 8px;
+  }
+
+  &__cards-container {
+    display: flex;
+    flex-direction: row;
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+    }
+  }
+
+  &__transaction-breakdown {
+    flex: 1;
+    margin-right: 8px;
+    min-width: 0;
+
+    @media screen and (max-width: $break-small) {
+      margin: 0 0 8px 0;
+    }
+  }
+
+  &__transaction-activity-log {
+    flex: 2;
+    min-width: 0;
+  }
+}
diff --git a/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
new file mode 100644
index 000000000..f2bbe8789
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/tests/transaction-list-item-details.component.test.js
@@ -0,0 +1,66 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import TransactionListItemDetails from '../transaction-list-item-details.component'
+import Button from '../../button'
+import SenderToRecipient from '../../sender-to-recipient'
+import TransactionBreakdown from '../../transaction-breakdown'
+import TransactionActivityLog from '../../transaction-activity-log'
+
+describe('TransactionListItemDetails Component', () => {
+  it('should render properly', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transaction={transaction}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 1)
+    assert.equal(wrapper.find(SenderToRecipient).length, 1)
+    assert.equal(wrapper.find(TransactionBreakdown).length, 1)
+    assert.equal(wrapper.find(TransactionActivityLog).length, 1)
+  })
+
+  it('should render a retry button', () => {
+    const transaction = {
+      history: [],
+      id: 1,
+      status: 'confirmed',
+      txParams: {
+        from: '0x1',
+        gas: '0x5208',
+        gasPrice: '0x3b9aca00',
+        nonce: '0xa4',
+        to: '0x2',
+        value: '0x2386f26fc10000',
+      },
+    }
+
+    const wrapper = shallow(
+      <TransactionListItemDetails
+        transaction={transaction}
+        showRetry={true}
+      />,
+      { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }
+    )
+
+    assert.ok(wrapper.hasClass('transaction-list-item-details'))
+    assert.equal(wrapper.find(Button).length, 2)
+  })
+})
diff --git a/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
new file mode 100644
index 000000000..d57ff130a
--- /dev/null
+++ b/ui/app/components/transaction-list-item-details/transaction-list-item-details.component.js
@@ -0,0 +1,80 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import SenderToRecipient from '../sender-to-recipient'
+import { CARDS_VARIANT } from '../sender-to-recipient/sender-to-recipient.constants'
+import TransactionActivityLog from '../transaction-activity-log'
+import TransactionBreakdown from '../transaction-breakdown'
+import Button from '../button'
+import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+
+export default class TransactionListItemDetails extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    transaction: PropTypes.object,
+    showRetry: PropTypes.bool,
+  }
+
+  handleEtherscanClick = () => {
+    const { hash, metamaskNetworkId } = this.props.transaction
+
+    const prefix = prefixForNetwork(metamaskNetworkId)
+    const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
+    global.platform.openWindow({ url: etherscanUrl })
+    this.setState({ showTransactionDetails: true })
+  }
+
+  render () {
+    const { t } = this.context
+    const { transaction, showRetry } = this.props
+    const { txParams: { to, from } = {} } = transaction
+
+    return (
+      <div className="transaction-list-item-details">
+        <div className="transaction-list-item-details__header">
+          <div>Details</div>
+          <div className="transaction-list-item-details__header-buttons">
+            {
+              showRetry && (
+                <Button
+                  type="raised"
+                  onClick={this.handleEtherscanClick}
+                  className="transaction-list-item-details__header-button"
+                >
+                  { t('speedUp') }
+                </Button>
+              )
+            }
+            <Button
+              type="raised"
+              onClick={this.handleEtherscanClick}
+              className="transaction-list-item-details__header-button"
+            >
+              <img src="/images/arrow-popout.svg" />
+            </Button>
+          </div>
+        </div>
+        <div className="transaction-list-item-details__sender-to-recipient-container">
+          <SenderToRecipient
+            variant={CARDS_VARIANT}
+            addressOnly
+            recipientAddress={to}
+            senderAddress={from}
+          />
+        </div>
+        <div className="transaction-list-item-details__cards-container">
+          <TransactionBreakdown
+            transaction={transaction}
+            className="transaction-list-item-details__transaction-breakdown"
+          />
+          <TransactionActivityLog
+            transaction={transaction}
+            className="transaction-list-item-details__transaction-activity-log"
+          />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 9c53c8960..427686c29 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -1,37 +1,34 @@
 .transaction-list-item {
   box-sizing: border-box;
   min-height: 74px;
-  padding: 8px 20px;
   border-bottom: 1px solid $geyser;
-  cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 
-  @media screen and (max-width: $break-small) {
-    padding: 8px 20px 12px;
-  }
-
-  &:hover {
-    background: rgba($alto, .2);
-  }
-
   &__grid {
+    cursor: pointer;
     width: 100%;
+    padding: 16px 20px;
     display: grid;
     grid-template-columns: 45px 1fr 1fr 1fr;
     grid-template-areas:
       "identicon action status primary-amount"
       "identicon nonce status secondary-amount";
 
-      @media screen and (max-width: $break-small) {
-        grid-template-columns: 45px 5fr 3fr;
-        grid-template-areas:
-          "nonce nonce nonce"
-          "identicon action primary-amount"
-          "identicon status secondary-amount";
-      }
+    @media screen and (max-width: $break-small) {
+      padding: 8px 20px 12px;
+      grid-template-columns: 45px 5fr 3fr;
+      grid-template-areas:
+        "nonce nonce nonce"
+        "identicon action primary-amount"
+        "identicon status secondary-amount";
+    }
+
+    &:hover {
+      background: rgba($alto, .2);
+    }
   }
 
   &__identicon {
@@ -114,4 +111,10 @@
       font-size: .5rem;
     }
   }
+
+  &__details-container {
+    padding: 8px 16px 16px;
+    background: #f3f4f7;
+    width: 100%;
+  }
 }
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 75b41a477..5564f0883 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -5,7 +5,7 @@ import TransactionStatus from '../transaction-status'
 import TransactionAction from '../transaction-action'
 import CurrencyDisplay from '../currency-display'
 import TokenCurrencyDisplay from '../token-currency-display'
-import prefixForNetwork from '../../../lib/etherscan-prefix-for-network'
+import TransactionListItemDetails from '../transaction-list-item-details'
 import { CONFIRM_TRANSACTION_ROUTE } from '../../routes'
 import { UNAPPROVED_STATUS, TOKEN_METHOD_TRANSFER } from '../../constants/transactions'
 import { ETH } from '../../constants/common'
@@ -22,19 +22,24 @@ export default class TransactionListItem extends PureComponent {
     nonceAndDate: PropTypes.string,
     token: PropTypes.object,
     assetImages: PropTypes.object,
+    tokenData: PropTypes.object,
+  }
+
+  state = {
+    showTransactionDetails: false,
   }
 
   handleClick = () => {
     const { transaction, history } = this.props
-    const { id, status, hash, metamaskNetworkId } = transaction
+    const { id, status } = transaction
+    const { showTransactionDetails } = this.state
 
     if (status === UNAPPROVED_STATUS) {
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`)
-    } else if (hash) {
-      const prefix = prefixForNetwork(metamaskNetworkId)
-      const etherscanUrl = `https://${prefix}etherscan.io/tx/${hash}`
-      global.platform.openWindow({ url: etherscanUrl })
+      return
     }
+
+    this.setState({ showTransactionDetails: !showTransactionDetails })
   }
 
   handleRetryClick = event => {
@@ -75,6 +80,8 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--primary"
           value={value}
           prefix="-"
+          numberOfDecimals={2}
+          currency={ETH}
         />
       )
   }
@@ -89,8 +96,6 @@ export default class TransactionListItem extends PureComponent {
           className="transaction-list-item__amount transaction-list-item__amount--secondary"
           prefix="-"
           value={value}
-          numberOfDecimals={2}
-          currency={ETH}
         />
       )
   }
@@ -102,20 +107,25 @@ export default class TransactionListItem extends PureComponent {
       showRetry,
       nonceAndDate,
       assetImages,
+      tokenData,
     } = this.props
     const { txParams = {} } = transaction
+    const { showTransactionDetails } = this.state
+    const toAddress = tokenData
+      ? tokenData.params && tokenData.params[0] && tokenData.params[0].value || txParams.to
+      : txParams.to
 
     return (
-      <div
-        className="transaction-list-item"
-        onClick={this.handleClick}
-      >
-        <div className="transaction-list-item__grid">
+      <div className="transaction-list-item">
+        <div
+          className="transaction-list-item__grid"
+          onClick={this.handleClick}
+        >
           <Identicon
             className="transaction-list-item__identicon"
-            address={txParams.to}
+            address={toAddress}
             diameter={34}
-            image={assetImages[txParams.to]}
+            image={assetImages[toAddress]}
           />
           <TransactionAction
             transaction={transaction}
@@ -141,12 +151,12 @@ export default class TransactionListItem extends PureComponent {
           { this.renderSecondaryCurrency() }
         </div>
         {
-          showRetry && methodData.done && (
-            <div
-              className="transaction-list-item__retry"
-              onClick={this.handleRetryClick}
-            >
-              <span>Taking too long? Increase the gas price on your transaction</span>
+          showTransactionDetails && (
+            <div className="transaction-list-item__details-container">
+              <TransactionListItemDetails
+                transaction={transaction}
+                showRetry={showRetry && methodData.done}
+              />
             </div>
           )
         }
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
index 47644241a..3db9d40ec 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -5,16 +5,19 @@ import withMethodData from '../../higher-order-components/with-method-data'
 import TransactionListItem from './transaction-list-item.component'
 import { setSelectedToken, retryTransaction } from '../../actions'
 import { hexToDecimal } from '../../helpers/conversions.util'
+import { getTokenData } from '../../helpers/transactions.util'
 import { formatDate } from '../../util'
 
 const mapStateToProps = (state, ownProps) => {
-  const { transaction: { txParams: { value, nonce } = {}, time } = {} } = ownProps
+  const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
 
+  const tokenData = data && getTokenData(data)
   const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
 
   return {
     value,
     nonceAndDate,
+    tokenData,
   }
 }
 
diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss
index 0e8db485c..d944ef20e 100644
--- a/ui/app/components/transaction-list/index.scss
+++ b/ui/app/components/transaction-list/index.scss
@@ -7,7 +7,7 @@
   &__completed-transactions {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
   }
 
   &__header {
@@ -35,6 +35,7 @@
     flex: 1;
     display: grid;
     grid-template-rows: 35% 1fr;
+    padding-top: 8px;
   }
 
   &__empty-text {
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 77c7f3a4b..064a6ab55 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -17,6 +17,8 @@ const TokenList = require('./token-list')
 const selectors = require('../selectors')
 const { ADD_TOKEN_ROUTE } = require('../routes')
 
+import Button from './button'
+
 module.exports = compose(
   withRouter,
   connect(mapStateToProps, mapDispatchToProps)
@@ -199,7 +201,9 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.btn-primary.wallet-view__add-token-button', {
+    h(Button, {
+      type: 'primary',
+      className: 'wallet-view__add-token-button',
       onClick: () => {
         history.push(ADD_TOKEN_ROUTE)
         sidebarOpen && hideSidebar()
diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js
index 28731ce33..a20f6cc02 100644
--- a/ui/app/constants/common.js
+++ b/ui/app/constants/common.js
@@ -1 +1,3 @@
 export const ETH = 'ETH'
+export const GWEI = 'GWEI'
+export const WEI = 'WEI'
diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js
index 38f5f1c50..f271b5683 100644
--- a/ui/app/conversion-util.js
+++ b/ui/app/conversion-util.js
@@ -35,6 +35,7 @@ BigNumber.config({
 // Big Number Constants
 const BIG_NUMBER_WEI_MULTIPLIER = new BigNumber('1000000000000000000')
 const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000')
+const BIG_NUMBER_ETH_MULTIPLIER = new BigNumber('1')
 
 // Individual Setters
 const convert = R.invoker(1, 'times')
@@ -52,10 +53,12 @@ const toBigNumber = {
 const toNormalizedDenomination = {
   WEI: bigNumber => bigNumber.div(BIG_NUMBER_WEI_MULTIPLIER),
   GWEI: bigNumber => bigNumber.div(BIG_NUMBER_GWEI_MULTIPLIER),
+  ETH: bigNumber => bigNumber.div(BIG_NUMBER_ETH_MULTIPLIER),
 }
 const toSpecifiedDenomination = {
   WEI: bigNumber => bigNumber.times(BIG_NUMBER_WEI_MULTIPLIER).round(),
   GWEI: bigNumber => bigNumber.times(BIG_NUMBER_GWEI_MULTIPLIER).round(9),
+  ETH: bigNumber => bigNumber.times(BIG_NUMBER_ETH_MULTIPLIER).round(9),
 }
 const baseChange = {
   hex: n => n.toString(16),
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 34565767f..655188a3e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,10 +2,7 @@
   Buttons
  */
 
-.btn-default,
-.btn-primary,
-.btn-secondary,
-.btn-confirm {
+.button {
   height: 44px;
   background: $white;
   display: flex;
@@ -79,6 +76,16 @@
   background-color: $curious-blue;
 }
 
+.btn-raised {
+  color: $curious-blue;
+  background-color: $white;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+  padding: 6px;
+  height: initial;
+  width: initial;
+  min-width: initial;
+}
+
 .btn--large {
   height: 54px;
 }
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 03c7e457c..4f97fc662 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -837,6 +837,10 @@
       line-height: 12px;
       color: $red;
     }
+
+    &__cancel {
+      margin-right: 10px;
+    }
   }
 
   &__gas-modal-card {
diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js
index d1a4994e4..bcac22500 100644
--- a/ui/app/helpers/confirm-transaction/util.js
+++ b/ui/app/helpers/confirm-transaction/util.js
@@ -58,6 +58,7 @@ export function getValueFromWeiHex ({
   toCurrency,
   conversionRate,
   numberOfDecimals,
+  toDenomination,
 }) {
   return conversionUtil(value, {
     fromNumericBase: 'hex',
@@ -66,6 +67,7 @@ export function getValueFromWeiHex ({
     toCurrency,
     numberOfDecimals,
     fromDenomination: 'WEI',
+    toDenomination,
     conversionRate,
   })
 }
diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js
index 1dec216fa..5204faa1f 100644
--- a/ui/app/helpers/conversions.util.js
+++ b/ui/app/helpers/conversions.util.js
@@ -1,4 +1,5 @@
 import { conversionUtil } from '../conversion-util'
+import { ETH, GWEI, WEI } from '../constants/common'
 
 export function hexToDecimal (hexValue) {
   return conversionUtil(hexValue, {
@@ -7,16 +8,27 @@ export function hexToDecimal (hexValue) {
   })
 }
 
-export function getEthFromWeiHex ({
-  value,
-  conversionRate,
-}) {
-  return getValueFromWeiHex({
-    value,
-    conversionRate,
-    toCurrency: 'ETH',
-    numberOfDecimals: 6,
-  })
+export function getEthConversionFromWeiHex ({ value, conversionRate, numberOfDecimals = 6 }) {
+  const denominations = [ETH, GWEI, WEI]
+
+  let nonZeroDenomination
+
+  for (let i = 0; i < denominations.length; i++) {
+    const convertedValue = getValueFromWeiHex({
+      value,
+      conversionRate,
+      toCurrency: ETH,
+      numberOfDecimals,
+      toDenomination: denominations[i],
+    })
+
+    if (convertedValue !== '0' || i === denominations.length - 1) {
+      nonZeroDenomination = `${convertedValue} ${denominations[i]}`
+      break
+    }
+  }
+
+  return nonZeroDenomination
 }
 
 export function getValueFromWeiHex ({
@@ -24,14 +36,16 @@ export function getValueFromWeiHex ({
   toCurrency,
   conversionRate,
   numberOfDecimals,
+  toDenomination,
 }) {
   return conversionUtil(value, {
     fromNumericBase: 'hex',
     toNumericBase: 'dec',
-    fromCurrency: 'ETH',
+    fromCurrency: ETH,
     toCurrency,
     numberOfDecimals,
-    fromDenomination: 'WEI',
+    fromDenomination: WEI,
+    toDenomination,
     conversionRate,
   })
 }
diff --git a/ui/app/helpers/transactions.util.js b/ui/app/helpers/transactions.util.js
index 54df54aa8..0e1a6ca37 100644
--- a/ui/app/helpers/transactions.util.js
+++ b/ui/app/helpers/transactions.util.js
@@ -16,6 +16,8 @@ import {
   UNKNOWN_FUNCTION_KEY,
 } from '../constants/transactions'
 
+import { addCurrencies } from '../conversion-util'
+
 abiDecoder.addABI(abi)
 
 export function getTokenData (data = {}) {
@@ -103,3 +105,13 @@ export async function isSmartContractAddress (address) {
   const code = await global.eth.getCode(address)
   return code && code !== '0x'
 }
+
+export function sumHexes (...args) {
+  const total = args.reduce((acc, base) => {
+    return addCurrencies(acc, base, {
+      toNumericBase: 'hex',
+    })
+  })
+
+  return ethUtil.addHexPrefix(total)
+}
diff --git a/ui/i18n-helper.js b/ui/i18n-helper.js
index bc927ee65..c6a7d0bf1 100644
--- a/ui/i18n-helper.js
+++ b/ui/i18n-helper.js
@@ -20,10 +20,10 @@ const getMessage = (locale, key, substitutions) => {
   let phrase = entry.message
   // perform substitutions
   if (substitutions && substitutions.length) {
-    phrase = phrase.replace(/\$1/g, substitutions[0])
-    if (substitutions.length > 1) {
-      phrase = phrase.replace(/\$2/g, substitutions[1])
-    }
+    substitutions.forEach((substitution, index) => {
+      const regex = new RegExp(`\\$${index + 1}`, 'g')
+      phrase = phrase.replace(regex, substitution)
+    })
   }
   return phrase
 }