From 78bce55858916ba9d3189f76db440768e6ae95b1 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 31 Jan 2018 20:57:35 -0330
Subject: [NewUI] Use tooltip for copy to clipboard helper text on main screen.
 (#3120)

* Use tooltip for display of helper text in wallet views copy to clipboard feature.

* Use react-tippy in wallet-view.js; center arrow tooltip throughout tooltip text change.

* Remove unnecessary tabIndex attribute from wallet view address element.
---
 ui/app/components/tooltip-v2.js  | 31 +++++++++++++++++++++++++++++++
 ui/app/components/wallet-view.js | 36 ++++++++++++++++++++++++++----------
 2 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 ui/app/components/tooltip-v2.js

(limited to 'ui/app/components')

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/wallet-view.js b/ui/app/components/wallet-view.js
index b1ef83cee..34f27ca2a 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')
@@ -45,6 +47,7 @@ function WalletView () {
   Component.call(this)
   this.state = {
     hasCopied: false,
+    copyToClipboardPressed: false,
   }
 }
 
@@ -134,17 +137,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 ? 'Copied!' : 'Copy to clipboard',
+      wrapperClassName: 'wallet-view__tooltip',
     }, [
-      this.state.hasCopied && 'Copied to Clipboard',
-      !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(),
-- 
cgit 


From d4da419c5befdbee77cb30f6113ea50fc572625c Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 5 Feb 2018 23:01:21 -0330
Subject: Wallet view supports screen sizes between 576px and 667px (#3193)

---
 ui/app/components/token-cell.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 59552f4a0..a5d032a0d 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,20 +111,25 @@ 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', [
 
-        showFiat && h('div.token-list-item__fiat-amount', {
-          style: {},
-        }, formattedFiat),
-      ]),
+        h('h.token-list-item__balance-wrapper', null, [
+          h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-      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 }),
-- 
cgit 


From d452403322c517eee4fc6120de1ead68ed65ee6a Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Mon, 5 Feb 2018 18:47:46 -0800
Subject: Add functional integration testing to Add Token flow (#3189)

---
 ui/app/components/token-cell.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index a5d032a0d..5c1c36465 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,9 +111,10 @@ TokenCell.prototype.render = function () {
         network,
       }),
 
-      h('div.token-list-item__balance-ellipsis', [
+      h('div.token-list-item__balance-wrapper', null, [
+        h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-        h('h.token-list-item__balance-wrapper', 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', {
@@ -129,7 +130,7 @@ TokenCell.prototype.render = function () {
         }),
 
       ]),
-      
+
 
       tokenMenuOpen && h(TokenMenuDropdown, {
         onClose: () => this.setState({ tokenMenuOpen: false }),
-- 
cgit 


From d84dc5da4249cd6737d892b044534f7f83c91979 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 6 Feb 2018 14:51:21 -0330
Subject: Remove duplicate token balance on uat next. (#3195)

---
 ui/app/components/token-cell.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 5c1c36465..677f22a75 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -112,8 +112,6 @@ TokenCell.prototype.render = function () {
       }),
 
       h('div.token-list-item__balance-wrapper', null, [
-        h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
-
         h('div.token-list-item__balance-wrapper', null, [
           h('h3.token-list-item__token-balance', `${string || 0} ${symbol}`),
 
-- 
cgit 


From 9ed3a5512efed033efae1a5e3d414598f74b6bd7 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 6 Feb 2018 21:21:32 -0330
Subject: Fix alignment of ellipsis and address in wallet view. (#3198)

---
 ui/app/components/token-cell.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js
index 677f22a75..0332fde88 100644
--- a/ui/app/components/token-cell.js
+++ b/ui/app/components/token-cell.js
@@ -111,7 +111,7 @@ TokenCell.prototype.render = function () {
         network,
       }),
 
-      h('div.token-list-item__balance-wrapper', null, [
+      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}`),
 
-- 
cgit 


From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: Remove accessing PropTypes from main React package

---
 ui/app/components/account-dropdowns.js                      | 2 +-
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 +-
 ui/app/components/dropdowns/components/dropdown.js          | 2 +-
 ui/app/components/dropdowns/simple-dropdown.js              | 2 +-
 ui/app/components/loading.js                                | 2 +-
 ui/app/components/tab-bar.js                                | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index 0c34a5154..f69a6ca68 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
diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index f97ac0691..d3a549884 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')
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/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/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/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 {
-- 
cgit 


From e9c2c0eec19514468fd53087f974709d5df9c35b Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Wed, 7 Feb 2018 18:46:27 -0800
Subject: Make blockies icon round to match identicons (#3205)

---
 ui/app/components/account-menu/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index aeb8a0b38..1a0103d4f 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -80,23 +80,23 @@ 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: 'Create Account',
     }),
     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: 'Import Account',
     }),
     h(Divider),
     h(Item, {
       onClick: showInfoPage,
-      icon: h('img', { src: 'images/mm-info-icon.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/mm-info-icon.svg' }),
       text: 'Info & Help',
     }),
     h(Item, {
       onClick: showConfigPage,
-      icon: h('img', { src: 'images/settings.svg' }),
+      icon: h('img.account-menu__item-icon', { src: 'images/settings.svg' }),
       text: 'Settings',
     }),
   ])
-- 
cgit 


From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Feb 2018 13:48:25 -0330
Subject: Add reset account button to new UI.

---
 ui/app/components/modals/modal.js                  | 13 ++++++
 ui/app/components/modals/notification-modal.js     | 36 ++++++++++++++---
 .../notification-modals/confirm-reset-account.js   | 46 ++++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..97fe38292 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -18,6 +18,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: {
@@ -202,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, {}, []),
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)
-- 
cgit 


From c8c2dfdc0f5d3cf68b5bd3b3ebf8bf6799c640c2 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Thu, 8 Feb 2018 21:10:15 -0330
Subject: Fixes shapeshift txs so that they render in tx list. (#3208)

---
 ui/app/components/shift-list-item.js | 57 ++++++++++++++++--------------------
 ui/app/components/tx-list.js         |  7 ++---
 2 files changed, 28 insertions(+), 36 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 111a77df4..017bf9f0c 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -29,40 +29,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/tx-list.js b/ui/app/components/tx-list.js
index 84cd0f093..1729e6a6f 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -50,6 +50,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(
@@ -65,11 +66,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 = {
-- 
cgit 


From 35c762da47c4b604f44e903940245f87eb7a3d3a Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 13 Feb 2018 03:21:05 -0330
Subject: Updates the styling of confirm send ether and token screens. (#3235)

---
 ui/app/components/pending-tx/confirm-send-ether.js | 16 +++++++---------
 ui/app/components/pending-tx/confirm-send-token.js | 16 +++++++---------
 2 files changed, 14 insertions(+), 18 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 652300c94..3f8d9c28f 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/ui/app/components/pending-tx/confirm-send-ether.js
@@ -213,17 +213,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 ad489c3e9..e4b0c186a 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -308,17 +308,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', {
+      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', [
-- 
cgit 


From a1b72e5252e15113c98180194cfa7f1640bde08e Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Tue, 20 Feb 2018 13:51:06 -0800
Subject: Try fixing notice screen synchronous state call

---
 ui/app/components/notice.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js
index 941ac33e6..9d2e89cb0 100644
--- a/ui/app/components/notice.js
+++ b/ui/app/components/notice.js
@@ -105,8 +105,7 @@ Notice.prototype.render = function () {
       h('button.primary', {
         disabled,
         onClick: () => {
-          this.setState({disclaimerDisabled: true})
-          onConfirm()
+          this.setState({disclaimerDisabled: true}, () => onConfirm())
         },
         style: {
           marginTop: '18px',
-- 
cgit 


From 2b9af0734b6127349ed4f1ed535dee858633776b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 27 Feb 2018 20:05:54 -0330
Subject: Replace 'Contract Published' with 'Contract Deployment' for clearer
 indication of contract tx state.

---
 ui/app/components/transaction-list-item.js | 2 +-
 ui/app/components/tx-list-item.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 4e3d2cb93..a45cd441a 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -180,7 +180,7 @@ function recipientField (txParams, transaction, isTx, isMsg) {
   } else if (txParams.to) {
     message = addressSummary(txParams.to)
   } else {
-    message = 'Contract Published'
+    message = 'Contract Deployment'
   }
 
   return h('div', {
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 7ccc5c315..1a13070c8 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -63,7 +63,7 @@ TxListItem.prototype.getAddressText = function () {
     default:
       return address
         ? `${address.slice(0, 10)}...${address.slice(-4)}`
-        : 'Contract Published'
+        : 'Contract Deployment'
   }
 }
 
-- 
cgit 


From 78f6a4866425ca9fd7795d91ea5dacd47599c1ab Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 28 Feb 2018 13:12:06 -0330
Subject: Define event locally in onClickOutside method in account-dropdowns.js

---
 ui/app/components/account-dropdowns.js                      | 2 +-
 ui/app/components/dropdowns/components/account-dropdowns.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index f69a6ca68..1cd7a0847 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -173,7 +173,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/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index d3a549884..fa9ffc632 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -281,7 +281,7 @@ class AccountDropdowns extends Component {
           dropdownWrapperStyle,
         ),
         isOpen: optionsMenuActive,
-        onClickOutside: () => {
+        onClickOutside: (event) => {
           const { classList } = event.target
           const isNotToggleElement = !classList.contains(this.optionsMenuToggleClassName)
           if (optionsMenuActive && isNotToggleElement) {
-- 
cgit 


From ace4f0d998d75e9df8c31641a292abc4f703582f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 1 Mar 2018 13:11:35 -0800
Subject: Fix exception thrown when styleOverride is not present (#3364)

---
 ui/app/components/eth-balance.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components')

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
-- 
cgit 


From f22dfd4ae8031e3f7b4972a1cc8f119b99007717 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 1 Mar 2018 13:12:10 -0800
Subject: Fix network menu for custom URLs (#3366)

---
 ui/app/components/dropdowns/network-dropdown.js | 40 +++++++++++++++++--------
 1 file changed, 27 insertions(+), 13 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index dfaa6b22c..9be5cc5d1 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -84,7 +84,7 @@ NetworkDropdown.prototype.render = function () {
     style: {
       position: 'absolute',
       top: '58px',
-      minWidth: '309px',
+      width: '309px',
       zIndex: '55px',
     },
     innerStyle: {
@@ -276,11 +276,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),
         ]
       )
     }
@@ -293,12 +303,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':
@@ -311,11 +315,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),
         ]
       )
   }
-- 
cgit 


From 1bd18cebd7e08edbbcf35407b962e71dcd2c3399 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 5 Mar 2018 13:33:46 -0330
Subject: Fixes shapeshift coin selection dropdown. (#3416)

---
 ui/app/components/shapeshift-form.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 2270b8236..648b05049 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -51,8 +51,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: '',
@@ -133,7 +132,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()
@@ -141,7 +140,7 @@ ShapeshiftForm.prototype.renderQrCode = function () {
   return h('div.shapeshift-form', {}, [
 
     h('div.shapeshift-form__deposit-instruction', [
-      'Deposit your BTC to the address below:',
+      `Deposit your ${depositCoin.toUpperCase()} to the address below:`,
     ]),
 
     h('div', depositAddress),
@@ -182,7 +181,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,
-- 
cgit 


From 376ffb758fa6b6ea1fcfde1f2addf1c5a6070339 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 5 Mar 2018 14:23:00 -0330
Subject: Shapeshift form handles market info unavailable errors.

---
 ui/app/components/modals/deposit-ether-modal.js |  5 +++++
 ui/app/components/modals/modal.js               | 12 +++++++++++-
 ui/app/components/shapeshift-form.js            | 10 +++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

(limited to 'ui/app/components')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 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 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -308,7 +313,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/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 648b05049..87eb1588a 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -14,11 +14,13 @@ function mapStateToProps (state) {
     tokenExchangeRates,
     selectedAddress,
   } = state.metamask
+  const { warning } = state.appState
   
   return {
     coinOptions,
     tokenExchangeRates,
     selectedAddress,
+    warning,
   }
 }
 
@@ -163,7 +165,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
@@ -206,7 +208,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,
             }),
@@ -227,7 +231,7 @@ ShapeshiftForm.prototype.render = function () {
             h('divshapeshift-form__address-input-error-message', [errorMessage]),
           ]),
 
-          this.renderMarketInfo(),
+          !warning && this.renderMarketInfo(),
 
       ]),
 
-- 
cgit