Merge branch 'master' into i18n

24 files changed, 277 insertions, 117 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index e92da8947..1612d7b6a 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../actions')
 const genAccountLink = require('etherscan-link').createAccountLink
@@ -174,7 +174,7 @@ class AccountDropdowns extends Component {
           minWidth: '180px',
         },
         isOpen: optionsMenuActive,
-        onClickOutside: () => {
+        onClickOutside: (event) => {
           const { classList } = event.target
           const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
           if (optionsMenuActive && isNotToggleElement) {
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index d9cf8cdce..043e3d8d1 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -81,12 +81,12 @@ AccountMenu.prototype.render = function () {
     h(Divider),
     h(Item, {
       onClick: () => showNewAccountPage('CREATE'),
-      icon: h('img', { src: 'images/plus-btn-white.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/plus-btn-white.svg' }),
       text: t('createAccount'),
     }),
     h(Item, {
       onClick: () => showNewAccountPage('IMPORT'),
-      icon: h('img', { src: 'images/import-account.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/import-account.svg' }),
       text: t('importAccount'),
     }),
     h(Divider),
@@ -99,6 +99,13 @@ AccountMenu.prototype.render = function () {
       onClick: showConfigPage,
       icon: h('img', { src: 'images/settings.svg' }),
       text: t('settings'),
+      icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }),
+      text: t('infoHelp'),
+    }),
+    h(Item, {
+      onClick: showConfigPage,
+      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
+      text: t('settings'),
     }),
   ])
 }
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 620ac8483..af29a4792 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
@@ -282,7 +282,7 @@ class AccountDropdowns extends Component {
           dropdownWrapperStyle,
         ),
         isOpen: optionsMenuActive,
-        onClickOutside: () => {
+        onClickOutside: (event) => {
           const { classList } = event.target
           const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
           if (optionsMenuActive && isNotToggleElement) {
diff --git a/ui/app/components/dropdowns/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js
index 15d064be8..0336dbb8b 100644
--- a/ui/app/components/dropdowns/components/dropdown.js
+++ b/ui/app/components/dropdowns/components/dropdown.js
@@ -1,5 +1,5 @@
 const Component = require('react').Component
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const MenuDroppo = require('../../menu-droppo')
 const extend = require('xtend')
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0e16048d5..67daaa5fd 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -85,7 +85,7 @@ NetworkDropdown.prototype.render = function () {
     style: {
       position: 'absolute',
       top: '58px',
-      minWidth: '309px',
+      width: '309px',
       zIndex: '55px',
     },
     innerStyle: {
@@ -277,11 +277,21 @@ NetworkDropdown.prototype.renderCommonRpc = function (rpcList, provider) {
           key: `common${rpc}`,
           closeMenu: () => this.props.hideNetworkDropdown(),
           onClick: () => props.setRpcTarget(rpc),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          rpc,
-          rpcTarget === rpc ? h('.check', '✓') : null,
+          rpcTarget === rpc ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: rpcTarget === rpc ? '#ffffff' : '#9b9b9b',
+            },
+          }, rpc),
         ]
       )
     }
@@ -294,12 +304,6 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
 
   if (type !== 'rpc') return null
 
-  // Concatenate long URLs
-  let label = rpcTarget
-  if (rpcTarget.length > 31) {
-    label = label.substr(0, 34) + '...'
-  }
-
   switch (rpcTarget) {
 
     case 'http://localhost:8545':
@@ -312,11 +316,21 @@ NetworkDropdown.prototype.renderCustomOption = function (provider) {
           key: rpcTarget,
           onClick: () => props.setRpcTarget(rpcTarget),
           closeMenu: () => this.props.hideNetworkDropdown(),
+          style: {
+            fontFamily: 'DIN OT',
+            fontSize: '16px',
+            lineHeight: '20px',
+            padding: '12px 0',
+          },
         },
         [
-          h('i.fa.fa-question-circle.fa-lg.menu-icon'),
-          label,
-          h('.check', '✓'),
+          h('i.fa.fa-check'),
+          h('i.fa.fa-question-circle.fa-med.menu-icon-circle'),
+          h('span.network-name-item', {
+            style: {
+              color: '#ffffff',
+            },
+          }, rpcTarget),
         ]
       )
   }
diff --git a/ui/app/components/dropdowns/simple-dropdown.js b/ui/app/components/dropdowns/simple-dropdown.js
index 7bb48e57b..bba088ed1 100644
--- a/ui/app/components/dropdowns/simple-dropdown.js
+++ b/ui/app/components/dropdowns/simple-dropdown.js
@@ -1,5 +1,5 @@
 const { Component } = require('react')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const classnames = require('classnames')
 const R = require('ramda')
diff --git a/ui/app/components/eth-balance.js b/ui/app/components/eth-balance.js
index 1be8c9731..c3d084bdc 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -46,7 +46,7 @@ EthBalanceComponent.prototype.renderBalance = function (value) {
     incoming,
     currentCurrency,
     hideTooltip,
-    styleOveride,
+    styleOveride = {},
     showFiat = true,
   } = this.props
   const { fontSize, color, fontFamily, lineHeight } = styleOveride
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 9442121fe..cb6fa51fb 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 
 class LoadingIndicator extends Component {
   renderMessage () {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 7172d05a5..6c593e4e5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
       h('div.deposit-ether-modal__header__close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
           this.props.hideModal()
         },
       }),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
 }
 
 DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
   this.props.hideModal()
   this.props.showAccountDetailModal()
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index ea6ac5135..7d4089ab3 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -19,6 +19,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -79,6 +80,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -201,6 +203,18 @@ const MODALS = {
     },
   },
 
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
@@ -272,6 +286,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -294,7 +312,12 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => { this.onHide() },
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide()
+      },
       ref: (ref) => {
         this.modalRef = ref
       },
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 239144b0c..621a974d0 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -9,26 +9,47 @@ class NotificationModal extends Component {
     const {
       header,
       message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
     } = this.props
 
+    const showButtons = showCancelButton || showConfirmButton
+
     return h('div', [
-      h('div.notification-modal-wrapper', {
+      h('div.notification-modal__wrapper', {
       }, [
 
-        h('div.notification-modal-header', {}, [
+        h('div.notification-modal__header', {}, [
           header,
         ]),
 
-        h('div.notification-modal-message-wrapper', {}, [
-          h('div.notification-modal-message', {}, [
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
             message,
           ]),
         ]),
 
         h('div.modal-close-x', {
-          onClick: this.props.hideModal,
+          onClick: hideModal,
         }),
 
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
       ]),
     ])
   }
@@ -37,7 +58,10 @@ class NotificationModal extends Component {
 NotificationModal.propTypes = {
   hideModal: PropTypes.func,
   header: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
new file mode 100644
index 000000000..e1bc91b24
--- /dev/null
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 390639297..8b0ce1e8b 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -106,8 +106,7 @@ Notice.prototype.render = function () {
       h('button.primary', {
         disabled,
         onClick: () => {
-          this.setState({disclaimerDisabled: true})
-          onConfirm()
+          this.setState({disclaimerDisabled: true}, () => onConfirm())
         },
         style: {
           marginTop: '18px',
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 21b9b548b..4d4732bdb 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -214,17 +214,15 @@ ConfirmSendEther.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-ether', {
-      style: { minWidth: '355px' },
-    }, [
+    h('div.confirm-screen-container.confirm-send-ether', [
       // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.btn-clear.confirm-screen-back-button', {
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
-          }, 'EDIT'),
-          h('div.confirm-screen-title', 'Confirm Transaction'),
-          h('div.confirm-screen-header-tip'),
+          }, 'Edit'),
+          h('div.page-container__title', 'Confirm'),
+          h('div.page-container__subtitle', `Please review your transaction.`),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index b1bec946a..606aca3c2 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -309,17 +309,15 @@ ConfirmSendToken.prototype.render = function () {
   this.inputs = []
 
   return (
-    h('div.confirm-screen-container.confirm-send-token', {
-      style: { minWidth: '355px' },
-    }, [
+    h('div.confirm-screen-container.confirm-send-token', [
       // Main Send token Card
-      h('div.confirm-screen-wrapper.flex-column.flex-grow', [
-        h('h3.flex-center.confirm-screen-header', [
-          h('button.btn-clear.confirm-screen-back-button.allcaps', {
+      h('div.page-container', [
+        h('div.page-container__header', [
+          h('button.confirm-screen-back-button', {
             onClick: () => editTransaction(txMeta),
           }, t('edit')),
-          h('div.confirm-screen-title', t('confirmTransaction')),
-          h('div.confirm-screen-header-tip'),
+          h('div.page-container__title', t('confirm')),
+          h('div.page-container__subtitle', t('pleaseReviewTransaction')),
         ]),
         h('div.flex-row.flex-center.confirm-screen-identicons', [
           h('div.confirm-screen-account-wrapper', [
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 104f82224..f75d6176e 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -15,11 +15,13 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
+  const { warning } = state.appState
 
   return {
     coinOptions,
     tokenExchangeRates,
     selectedAddress,
+    warning,
   }
 }
 
@@ -52,8 +54,7 @@ ShapeshiftForm.prototype.componentWillMount = function () {
   this.props.shapeShiftSubview()
 }
 
-ShapeshiftForm.prototype.onCoinChange = function (e) {
-  const coin = e.target.value
+ShapeshiftForm.prototype.onCoinChange = function (coin) {
   this.setState({
     depositCoin: coin,
     errorMessage: '',
@@ -134,7 +135,7 @@ ShapeshiftForm.prototype.renderMarketInfo = function () {
 }
 
 ShapeshiftForm.prototype.renderQrCode = function () {
-  const { depositAddress, isLoading } = this.state
+  const { depositAddress, isLoading, depositCoin } = this.state
   const qrImage = qrcode(4, 'M')
   qrImage.addData(depositAddress)
   qrImage.make()
@@ -142,7 +143,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      t('depositBTC'),
+      t('depositCoin', depositCoin.toUpperCase()),
     ]),
 
     h('div', depositAddress),
@@ -165,7 +166,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
 
 
 ShapeshiftForm.prototype.render = function () {
-  const { coinOptions, btnClass } = this.props
+  const { coinOptions, btnClass, warning } = this.props
   const { depositCoin, errorMessage, showQrCode, depositAddress } = this.state
   const coinPair = `${depositCoin}_eth`
   const { tokenExchangeRates } = this.props
@@ -183,7 +184,7 @@ ShapeshiftForm.prototype.render = function () {
 
               h(SimpleDropdown, {
                 selectedOption: this.state.depositCoin,
-                onSelect: this.onCoinChange,
+                onSelect: (coin) => this.onCoinChange(coin),
                 options: Object.entries(coinOptions).map(([coin]) => ({
                   value: coin.toLowerCase(),
                   displayValue: coin,
@@ -208,7 +209,9 @@ ShapeshiftForm.prototype.render = function () {
 
           ]),
 
-          h('div', {
+          warning && h('div.shapeshift-form__address-input-label', warning),
+
+          !warning && h('div', {
             className: classnames('shapeshift-form__address-input-wrapper', {
               'shapeshift-form__address-input-wrapper--error': errorMessage,
             }),
@@ -229,7 +232,7 @@ ShapeshiftForm.prototype.render = function () {
             h('divshapeshift-form__address-input-error-message', [errorMessage]),
           ]),
 
-          this.renderMarketInfo(),
+          !warning && this.renderMarketInfo(),
 
       ]),
 
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 0d8681fb7..fddbc6821 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -30,40 +30,35 @@ function ShiftListItem () {
 }
 
 ShiftListItem.prototype.render = function () {
-  const { selectedAddress, receivingAddress } = this.props
-  return (
-    selectedAddress === receivingAddress
-      ? h('div.tx-list-item.tx-list-clickable', {
+  return h('div.tx-list-item.tx-list-clickable', {
+    style: {
+      paddingTop: '20px',
+      paddingBottom: '20px',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+    },
+  }, [
+    h('div', {
+      style: {
+        width: '0px',
+        position: 'relative',
+        bottom: '19px',
+      },
+    }, [
+      h('img', {
+        src: 'https://info.shapeshift.io/sites/default/files/logo.png',
         style: {
-          paddingTop: '20px',
-          paddingBottom: '20px',
-          justifyContent: 'space-around',
-          alignItems: 'center',
+          height: '35px',
+          width: '132px',
+          position: 'absolute',
+          clip: 'rect(0px,23px,34px,0px)',
         },
-      }, [
-        h('div', {
-          style: {
-            width: '0px',
-            position: 'relative',
-            bottom: '19px',
-          },
-        }, [
-          h('img', {
-            src: 'https://info.shapeshift.io/sites/default/files/logo.png',
-            style: {
-              height: '35px',
-              width: '132px',
-              position: 'absolute',
-              clip: 'rect(0px,23px,34px,0px)',
-            },
-          }),
-        ]),
+      }),
+    ]),
 
-        this.renderInfo(),
-        this.renderUtilComponents(),
-      ])
-      : null
-  )
+    this.renderInfo(),
+    this.renderUtilComponents(),
+  ])
 }
 
 function formatDate (date) {
diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js
index 0edced119..a80640116 100644
--- a/ui/app/components/tab-bar.js
+++ b/ui/app/components/tab-bar.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
 const h = require('react-hyperscript')
-const PropTypes = require('react').PropTypes
+const PropTypes = require('prop-types')
 const classnames = require('classnames')
 
 class TabBar extends Component {
diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 59552f4a0..0332fde88 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,20 +111,24 @@ TokenCell.prototype.render = function () {
         network,
       }),
 
-      h('h.token-list-item__balance-wrapper', null, [
-        h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+      h('div.token-list-item__balance-ellipsis', null, [
+        h('div.token-list-item__balance-wrapper', null, [
+          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
+
+          showFiat && h('div.token-list-item__fiat-amount', {
+            style: {},
+          }, formattedFiat),
+        ]),
+
+        h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
+          onClick: (e) => {
+            e.stopPropagation()
+            this.setState({ tokenMenuOpen: true })
+          },
+        }),
 
-        showFiat && h('div.token-list-item__fiat-amount', {
-          style: {},
-        }, formattedFiat),
       ]),
 
-      h('i.fa.fa-ellipsis-h.fa-lg.token-list-item__ellipsis.cursor-pointer', {
-        onClick: (e) => {
-          e.stopPropagation()
-          this.setState({ tokenMenuOpen: true })
-        },
-      }),
 
       tokenMenuOpen && h(TokenMenuDropdown, {
         onClose: () => this.setState({ tokenMenuOpen: false }),
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
new file mode 100644
index 000000000..133a0f16a
--- /dev/null
+++ b/ui/app/components/tooltip-v2.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTippy = require('react-tippy').Tooltip
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+  const { position, title, children, wrapperClassName } = props
+
+  return h('div', {
+      className: wrapperClassName,
+    }, [
+
+    h(ReactTippy, {
+      title,
+      position: position || 'left',
+      trigger: 'mouseenter',
+      hideOnClick: false,
+      size: 'small',
+      arrow: true,
+    }, children),
+
+  ])
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 6baf60141..6d6e79bd5 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -181,7 +181,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
   } else if (txParams.to) {
     message = addressSummary(txParams.to)
   } else {
-    message = t('contractPublished')
+    message = t('contractDeployment')
   }
 
   return h('div', {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 7a38096b6..849d70489 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -64,7 +64,7 @@ TxListItem.prototype.getAddressText = function () {
     default:
       return address
         ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : t('contractPublished')
+        : t('contractDeployment')
   }
 }
 
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 8343ec46b..34dc837ae 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -51,6 +51,7 @@ TxList.prototype.render = function () {
 
 TxList.prototype.renderTransaction = function () {
   const { txsToRender, conversionRate } = this.props
+
   return txsToRender.length
     ? txsToRender.map((transaction, i) => this.renderTransactionListItem(transaction, conversionRate, i))
     : [h(
@@ -66,11 +67,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa
   // refer to transaction-list.js:line 58
 
   if (transaction.key === 'shapeshift') {
-    return h('div', {
-      key: `shapeshift${index}`,
-    }, [
-      h(ShiftListItem, transaction),
-    ])
+    return h(ShiftListItem, { ...transaction, key: `shapeshift${index}` })
   }
 
   const props = {
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 6bd2d0963..18452205c 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -2,8 +2,10 @@ const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
+const classnames = require('classnames')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('./tooltip-v2.js')
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
@@ -46,6 +48,7 @@ function WalletView () {
   Component.call(this)
   this.state = {
     hasCopied: false,
+    copyToClipboardPressed: false,
   }
 }
 
@@ -135,17 +138,30 @@ WalletView.prototype.render = function () {
       ]),
     ]),
 
-
-    h('div.wallet-view__address', {
-      onClick: () => {
-        copyToClipboard(selectedAddress)
-        this.setState({ hasCopied: true })
-        setTimeout(() => this.setState({ hasCopied: false }), 3000)
-      },
+    h(Tooltip, {
+      position: 'bottom',
+      title: this.state.hasCopied ? t('copiedExclamation') : t('copyToClipboard'),
+      wrapperClassName: 'wallet-view__tooltip',
     }, [
-      this.state.hasCopied && t('copiedClipboard'),
-      !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
-      h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      h('button.wallet-view__address', {
+        className: classnames({
+          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+        }),
+        onClick: () => {
+          copyToClipboard(selectedAddress)
+          this.setState({ hasCopied: true })
+          setTimeout(() => this.setState({ hasCopied: false }), 3000)
+        },
+        onMouseDown: () => {
+          this.setState({ copyToClipboardPressed: true })
+        },
+        onMouseUp: () => {
+          this.setState({ copyToClipboardPressed: false })
+        },
+      }, [
+        `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      ]),
     ]),
 
     this.renderWalletBalance(),