From f14ed329801ab65c31e84f8e9d8d93700ed56670 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 18 Jun 2018 15:33:50 -0700
Subject: Begin letting UI show suggested tokens

---
 .../pages/confirm-add-token/confirm-add-token.container.js        | 8 ++++++--
 ui/app/components/pages/home.js                                   | 7 +++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
index 0190024d9..500b406bb 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
@@ -1,12 +1,16 @@
 import { connect } from 'react-redux'
 import ConfirmAddToken from './confirm-add-token.component'
 
+const extend = require('xtend')
+
 const { addTokens, clearPendingTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
-  const { pendingTokens } = metamask
+  const { pendingTokens, suggestedTokens } = metamask
+  const params = extend(pendingTokens, suggestedTokens)
+
   return {
-    pendingTokens,
+    pendingTokens: params,
   }
 }
 
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index c53413d3b..f37366396 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -25,6 +25,7 @@ const {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   NOTICE_ROUTE,
+  CONFIRM_ADD_TOKEN_ROUTE,
 } = require('../../routes')
 
 class Home extends Component {
@@ -35,8 +36,14 @@ class Home extends Component {
       unapprovedMsgCount = 0,
       unapprovedPersonalMsgCount = 0,
       unapprovedTypedMessagesCount = 0,
+      suggestedTokens = {},
     } = this.props
 
+    // suggested new tokens
+    if (suggestedTokens.length > 0) {
+      history.push(CONFIRM_ADD_TOKEN_ROUTE)
+    }
+
     // unapprovedTxs and unapproved messages
     if (Object.keys(unapprovedTxs).length ||
       unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
-- 
cgit 


From d26ce807fb9d21c29122d912d8dc1afc805c72ad Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 18 Jun 2018 15:44:43 -0700
Subject: Linted

---
 ui/app/components/pages/home.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index f37366396..3dcf63c44 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -268,6 +268,7 @@ Home.propTypes = {
   isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   t: PropTypes.func,
+  suggestedTokens: PropTypes.object,
 }
 
 function mapStateToProps (state) {
-- 
cgit 


From 081884bd8095b2027e88fabdfe297f6d2fc8c38e Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Fri, 3 Aug 2018 16:42:13 -0400
Subject: rpc-engine not crashing when eth_watchToken

---
 ui/app/components/pages/home.js | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index cd4bf9033..97aaedd37 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -40,7 +40,6 @@ class Home extends Component {
       unapprovedTypedMessagesCount = 0,
       suggestedTokens = {},
       unconfirmedTransactionsCount = 0,
-
     } = this.props
 
     // suggested new tokens
@@ -177,11 +176,8 @@ Home.propTypes = {
   isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   t: PropTypes.func,
-<<<<<<< HEAD
   suggestedTokens: PropTypes.object,
-=======
   unconfirmedTransactionsCount: PropTypes.number,
->>>>>>> develop
 }
 
 function mapStateToProps (state) {
-- 
cgit 


From 12dd7a72323bf82d60e99502104e375864c0fbab Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Fri, 3 Aug 2018 18:01:40 -0400
Subject: popup initializing with suggested tokens

---
 ui/app/components/pages/home.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 97aaedd37..3b0a34f97 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -34,16 +34,12 @@ class Home extends Component {
   componentDidMount () {
     const {
       history,
-      unapprovedTxs = {},
-      unapprovedMsgCount = 0,
-      unapprovedPersonalMsgCount = 0,
-      unapprovedTypedMessagesCount = 0,
       suggestedTokens = {},
       unconfirmedTransactionsCount = 0,
     } = this.props
 
     // suggested new tokens
-    if (suggestedTokens.length > 0) {
+    if (Object.keys(suggestedTokens).length > 0) {
       history.push(CONFIRM_ADD_TOKEN_ROUTE)
     }
 
@@ -238,7 +234,7 @@ function mapStateToProps (state) {
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
     Qr: state.appState.Qr,
     welcomeScreenSeen: state.metamask.welcomeScreenSeen,
-
+    suggestedTokens: state.metamask.suggestedTokens,
     // state needed to get account dropdown temporarily rendering from app bar
     selected,
     unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
-- 
cgit 


From 9ac9f53a73357238ed2ee0ce57c65de592cfd968 Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Fri, 3 Aug 2018 19:24:12 -0400
Subject: eth_watchToken working

---
 .../pages/confirm-add-token/confirm-add-token.component.js       | 9 +++++++--
 .../pages/confirm-add-token/confirm-add-token.container.js       | 3 ++-
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 65d654b92..ad5264b30 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -15,6 +15,7 @@ export default class ConfirmAddToken extends Component {
     clearPendingTokens: PropTypes.func,
     addTokens: PropTypes.func,
     pendingTokens: PropTypes.object,
+    removeSuggestedTokens: PropTypes.func,
   }
 
   componentDidMount () {
@@ -32,7 +33,7 @@ export default class ConfirmAddToken extends Component {
   }
 
   render () {
-    const { history, addTokens, clearPendingTokens, pendingTokens } = this.props
+    const { history, addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
 
     return (
       <div className="page-container">
@@ -90,7 +91,11 @@ export default class ConfirmAddToken extends Component {
             type="default"
             large
             className="page-container__footer-button"
-            onClick={() => history.push(ADD_TOKEN_ROUTE)}
+            onClick={() => {
+              // TODO find the right pace to removeSuggestedTokens
+              removeSuggestedTokens()
+              history.push(ADD_TOKEN_ROUTE)
+            }}
           >
             { this.context.t('back') }
           </Button>
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
index 500b406bb..47d7a105b 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
@@ -3,7 +3,7 @@ import ConfirmAddToken from './confirm-add-token.component'
 
 const extend = require('xtend')
 
-const { addTokens, clearPendingTokens } = require('../../../actions')
+const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
   const { pendingTokens, suggestedTokens } = metamask
@@ -18,6 +18,7 @@ const mapDispatchToProps = dispatch => {
   return {
     addTokens: tokens => dispatch(addTokens(tokens)),
     clearPendingTokens: () => dispatch(clearPendingTokens()),
+    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
 }
 
-- 
cgit 


From af35b415ab0b1a48e77bb253c851afa070933c08 Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Mon, 6 Aug 2018 20:03:49 -0400
Subject: new confirm add suggested token component

---
 .../confirm-add-suggested-token.component.js       | 118 +++++++++++++++++++++
 .../confirm-add-suggested-token.container.js       |  25 +++++
 .../pages/confirm-add-suggested-token/index.js     |   2 +
 ui/app/components/pages/home.js                    |   4 +-
 4 files changed, 147 insertions(+), 2 deletions(-)
 create mode 100644 ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
 create mode 100644 ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
 create mode 100644 ui/app/components/pages/confirm-add-suggested-token/index.js

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
new file mode 100644
index 000000000..2220ae685
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -0,0 +1,118 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { DEFAULT_ROUTE } from '../../../routes'
+import Button from '../../button'
+import Identicon from '../../../components/identicon'
+import TokenBalance from '../confirm-add-token/token-balance'
+
+export default class ConfirmAddSuggestedToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    clearPendingTokens: PropTypes.func,
+    addTokens: PropTypes.func,
+    pendingTokens: PropTypes.object,
+    removeSuggestedTokens: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { pendingTokens = {}, history } = this.props
+
+    if (Object.keys(pendingTokens).length === 0) {
+      history.push(DEFAULT_ROUTE)
+    }
+  }
+
+  getTokenName (name, symbol) {
+    return typeof name === 'undefined'
+      ? symbol
+      : `${name} (${symbol})`
+  }
+
+  render () {
+    const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+
+    return (
+      <div className="page-container">
+        <div className="page-container__header">
+          <div className="page-container__title">
+            { this.context.t('addSuggestedTokens') }
+          </div>
+          <div className="page-container__subtitle">
+            { this.context.t('likeToAddTokens') }
+          </div>
+        </div>
+        <div className="page-container__content">
+          <div className="confirm-add-token">
+            <div className="confirm-add-token__header">
+              <div className="confirm-add-token__token">
+                { this.context.t('token') }
+              </div>
+              <div className="confirm-add-token__balance">
+                { this.context.t('balance') }
+              </div>
+            </div>
+            <div className="confirm-add-token__token-list">
+              {
+                Object.entries(pendingTokens)
+                  .map(([ address, token ]) => {
+                    const { name, symbol } = token
+
+                    return (
+                      <div
+                        className="confirm-add-token__token-list-item"
+                        key={address}
+                      >
+                        <div className="confirm-add-token__token confirm-add-token__data">
+                          <Identicon
+                            className="confirm-add-token__token-icon"
+                            diameter={48}
+                            address={address}
+                          />
+                          <div className="confirm-add-token__name">
+                            { this.getTokenName(name, symbol) }
+                          </div>
+                        </div>
+                        <div className="confirm-add-token__balance">
+                          <TokenBalance token={token} />
+                        </div>
+                      </div>
+                    )
+                })
+              }
+            </div>
+          </div>
+        </div>
+        <div className="page-container__footer">
+          <Button
+            type="default"
+            large
+            className="page-container__footer-button"
+            onClick={() => {
+              removeSuggestedTokens()
+            }}
+          >
+            { this.context.t('cancel') }
+          </Button>
+          <Button
+            type="primary"
+            large
+            className="page-container__footer-button"
+            onClick={() => {
+              addTokens(pendingTokens)
+                .then(() => {
+                  clearPendingTokens()
+                  removeSuggestedTokens()
+                })
+            }}
+          >
+            { this.context.t('addTokens') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
new file mode 100644
index 000000000..938c363b4
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
+
+const extend = require('xtend')
+
+const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
+
+const mapStateToProps = ({ metamask }) => {
+  const { pendingTokens, suggestedTokens } = metamask
+  const params = extend(pendingTokens, suggestedTokens)
+
+  return {
+    pendingTokens: params,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    addTokens: tokens => dispatch(addTokens(tokens)),
+    clearPendingTokens: () => dispatch(clearPendingTokens()),
+    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/confirm-add-suggested-token/index.js b/ui/app/components/pages/confirm-add-suggested-token/index.js
new file mode 100644
index 000000000..2ca56b43c
--- /dev/null
+++ b/ui/app/components/pages/confirm-add-suggested-token/index.js
@@ -0,0 +1,2 @@
+import ConfirmAddSuggestedToken from './confirm-add-suggested-token.container'
+module.exports = ConfirmAddSuggestedToken
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 3b0a34f97..6ee083579 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -25,7 +25,7 @@ const {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   NOTICE_ROUTE,
-  CONFIRM_ADD_TOKEN_ROUTE,
+  CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
 } = require('../../routes')
 
 const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
@@ -40,7 +40,7 @@ class Home extends Component {
 
     // suggested new tokens
     if (Object.keys(suggestedTokens).length > 0) {
-      history.push(CONFIRM_ADD_TOKEN_ROUTE)
+      history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
 
     // unapprovedTxs and unapproved messages
-- 
cgit 


From a57f56fdca3414fdee3b6d7fd8d7b6e8b3f919dc Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Mon, 6 Aug 2018 20:06:13 -0400
Subject: clean confirm add token component

---
 .../pages/confirm-add-token/confirm-add-token.component.js           | 5 +----
 .../pages/confirm-add-token/confirm-add-token.container.js           | 3 +--
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index ad5264b30..0f27ceb53 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -15,7 +15,6 @@ export default class ConfirmAddToken extends Component {
     clearPendingTokens: PropTypes.func,
     addTokens: PropTypes.func,
     pendingTokens: PropTypes.object,
-    removeSuggestedTokens: PropTypes.func,
   }
 
   componentDidMount () {
@@ -33,7 +32,7 @@ export default class ConfirmAddToken extends Component {
   }
 
   render () {
-    const { history, addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const { history, addTokens, clearPendingTokens, pendingTokens } = this.props
 
     return (
       <div className="page-container">
@@ -92,8 +91,6 @@ export default class ConfirmAddToken extends Component {
             large
             className="page-container__footer-button"
             onClick={() => {
-              // TODO find the right pace to removeSuggestedTokens
-              removeSuggestedTokens()
               history.push(ADD_TOKEN_ROUTE)
             }}
           >
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
index 47d7a105b..500b406bb 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
@@ -3,7 +3,7 @@ import ConfirmAddToken from './confirm-add-token.component'
 
 const extend = require('xtend')
 
-const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
+const { addTokens, clearPendingTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
   const { pendingTokens, suggestedTokens } = metamask
@@ -18,7 +18,6 @@ const mapDispatchToProps = dispatch => {
   return {
     addTokens: tokens => dispatch(addTokens(tokens)),
     clearPendingTokens: () => dispatch(clearPendingTokens()),
-    removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
 }
 
-- 
cgit 


From 33357e3538b5157a852323d5f1e2db7f19b3303e Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Tue, 7 Aug 2018 19:12:16 -0400
Subject: refactor unused code

---
 .../pages/confirm-add-token/confirm-add-token.component.js        | 4 +---
 .../pages/confirm-add-token/confirm-add-token.container.js        | 8 ++------
 2 files changed, 3 insertions(+), 9 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 0f27ceb53..65d654b92 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -90,9 +90,7 @@ export default class ConfirmAddToken extends Component {
             type="default"
             large
             className="page-container__footer-button"
-            onClick={() => {
-              history.push(ADD_TOKEN_ROUTE)
-            }}
+            onClick={() => history.push(ADD_TOKEN_ROUTE)}
           >
             { this.context.t('back') }
           </Button>
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
index 500b406bb..0190024d9 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.container.js
@@ -1,16 +1,12 @@
 import { connect } from 'react-redux'
 import ConfirmAddToken from './confirm-add-token.component'
 
-const extend = require('xtend')
-
 const { addTokens, clearPendingTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
-  const { pendingTokens, suggestedTokens } = metamask
-  const params = extend(pendingTokens, suggestedTokens)
-
+  const { pendingTokens } = metamask
   return {
-    pendingTokens: params,
+    pendingTokens,
   }
 }
 
-- 
cgit 


From a4c3f6b65c9a25da0319b9077d830c23f729b32f Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Tue, 14 Aug 2018 20:08:12 -0300
Subject: add support for images base64 and urls on new ui

---
 .../confirm-add-suggested-token.component.js                | 13 ++++++++-----
 .../confirm-add-suggested-token.container.js                |  4 ++--
 2 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 2220ae685..5de0859cd 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -13,7 +13,7 @@ export default class ConfirmAddSuggestedToken extends Component {
   static propTypes = {
     history: PropTypes.object,
     clearPendingTokens: PropTypes.func,
-    addTokens: PropTypes.func,
+    addToken: PropTypes.func,
     pendingTokens: PropTypes.object,
     removeSuggestedTokens: PropTypes.func,
   }
@@ -33,7 +33,9 @@ export default class ConfirmAddSuggestedToken extends Component {
   }
 
   render () {
-    const { addTokens, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const pendingTokenKey = Object.keys(pendingTokens)[0]
+    const pendingToken = pendingTokens[pendingTokenKey]
 
     return (
       <div className="page-container">
@@ -59,7 +61,7 @@ export default class ConfirmAddSuggestedToken extends Component {
               {
                 Object.entries(pendingTokens)
                   .map(([ address, token ]) => {
-                    const { name, symbol } = token
+                    const { name, symbol, imageUrl } = token
 
                     return (
                       <div
@@ -71,6 +73,7 @@ export default class ConfirmAddSuggestedToken extends Component {
                             className="confirm-add-token__token-icon"
                             diameter={48}
                             address={address}
+                            imageUrl={imageUrl}
                           />
                           <div className="confirm-add-token__name">
                             { this.getTokenName(name, symbol) }
@@ -102,14 +105,14 @@ export default class ConfirmAddSuggestedToken extends Component {
             large
             className="page-container__footer-button"
             onClick={() => {
-              addTokens(pendingTokens)
+              addToken(pendingToken)
                 .then(() => {
                   clearPendingTokens()
                   removeSuggestedTokens()
                 })
             }}
           >
-            { this.context.t('addTokens') }
+            { this.context.t('addToken') }
           </Button>
         </div>
       </div>
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
index 938c363b4..fba33222e 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -3,7 +3,7 @@ import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
 
 const extend = require('xtend')
 
-const { addTokens, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
+const { addToken, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
   const { pendingTokens, suggestedTokens } = metamask
@@ -16,7 +16,7 @@ const mapStateToProps = ({ metamask }) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    addTokens: tokens => dispatch(addTokens(tokens)),
+    addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
     clearPendingTokens: () => dispatch(clearPendingTokens()),
     removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
-- 
cgit 


From 2ace30bcd1d8280b440a4ce2a7156f94cf4f78f2 Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Thu, 16 Aug 2018 18:28:07 -0300
Subject: WIP

---
 .../confirm-add-suggested-token.component.js                       | 5 +++--
 .../confirm-add-suggested-token.container.js                       | 7 ++++++-
 ui/app/components/pages/home.js                                    | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 5de0859cd..e8155b5f0 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -33,7 +33,7 @@ export default class ConfirmAddSuggestedToken extends Component {
   }
 
   render () {
-    const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens } = this.props
+    const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens, history } = this.props
     const pendingTokenKey = Object.keys(pendingTokens)[0]
     const pendingToken = pendingTokens[pendingTokenKey]
 
@@ -96,6 +96,7 @@ export default class ConfirmAddSuggestedToken extends Component {
             className="page-container__footer-button"
             onClick={() => {
               removeSuggestedTokens()
+              history.push(DEFAULT_ROUTE)
             }}
           >
             { this.context.t('cancel') }
@@ -107,8 +108,8 @@ export default class ConfirmAddSuggestedToken extends Component {
             onClick={() => {
               addToken(pendingToken)
                 .then(() => {
-                  clearPendingTokens()
                   removeSuggestedTokens()
+                  history.push(DEFAULT_ROUTE)
                 })
             }}
           >
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
index fba33222e..97e07afda 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -1,5 +1,7 @@
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
 import ConfirmAddSuggestedToken from './confirm-add-suggested-token.component'
+import { withRouter } from 'react-router-dom'
 
 const extend = require('xtend')
 
@@ -22,4 +24,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAddSuggestedToken)
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmAddSuggestedToken)
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 6ee083579..629dc11fc 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -40,6 +40,7 @@ class Home extends Component {
 
     // suggested new tokens
     if (Object.keys(suggestedTokens).length > 0) {
+      console.log('CALLING CONFIRM ADD SUGGESTED')
       history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
 
-- 
cgit 


From bb868f58348962d4a85415380d11f72892a2e28c Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Thu, 16 Aug 2018 20:19:19 -0300
Subject: correct behavior when notification is closed when popup

---
 .../confirm-add-suggested-token.component.js                 | 12 ++++++++----
 .../confirm-add-suggested-token.container.js                 |  3 +--
 ui/app/components/pages/home.js                              |  1 -
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index e8155b5f0..37d9aca02 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -33,7 +33,7 @@ export default class ConfirmAddSuggestedToken extends Component {
   }
 
   render () {
-    const { addToken, clearPendingTokens, pendingTokens, removeSuggestedTokens, history } = this.props
+    const { addToken, pendingTokens, removeSuggestedTokens, history } = this.props
     const pendingTokenKey = Object.keys(pendingTokens)[0]
     const pendingToken = pendingTokens[pendingTokenKey]
 
@@ -96,8 +96,10 @@ export default class ConfirmAddSuggestedToken extends Component {
             className="page-container__footer-button"
             onClick={() => {
               removeSuggestedTokens()
-              history.push(DEFAULT_ROUTE)
-            }}
+              .then(() => {
+                history.push(DEFAULT_ROUTE)
+              })
+          }}
           >
             { this.context.t('cancel') }
           </Button>
@@ -109,7 +111,9 @@ export default class ConfirmAddSuggestedToken extends Component {
               addToken(pendingToken)
                 .then(() => {
                   removeSuggestedTokens()
-                  history.push(DEFAULT_ROUTE)
+                  .then(() => {
+                    history.push(DEFAULT_ROUTE)
+                  })
                 })
             }}
           >
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
index 97e07afda..89291ff4f 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom'
 
 const extend = require('xtend')
 
-const { addToken, clearPendingTokens, removeSuggestedTokens } = require('../../../actions')
+const { addToken, removeSuggestedTokens } = require('../../../actions')
 
 const mapStateToProps = ({ metamask }) => {
   const { pendingTokens, suggestedTokens } = metamask
@@ -19,7 +19,6 @@ const mapStateToProps = ({ metamask }) => {
 const mapDispatchToProps = dispatch => {
   return {
     addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
-    clearPendingTokens: () => dispatch(clearPendingTokens()),
     removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
 }
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 629dc11fc..6ee083579 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -40,7 +40,6 @@ class Home extends Component {
 
     // suggested new tokens
     if (Object.keys(suggestedTokens).length > 0) {
-      console.log('CALLING CONFIRM ADD SUGGESTED')
       history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
 
-- 
cgit 


From 01c0c98501c02623b0cd650483d14c99566ce0af Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 18 Jul 2018 17:47:01 -0700
Subject: Add tabs support for PageContainer

---
 .../pages/add-token/add-token.component.js         | 82 +++++++---------------
 1 file changed, 25 insertions(+), 57 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index bcb93d401..59748ff46 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react'
-import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import ethUtil from 'ethereumjs-util'
 import { checkExistingAddresses } from './util'
 import { tokenInfoGetter } from '../../../token-util'
 import { DEFAULT_ROUTE, CONFIRM_ADD_TOKEN_ROUTE } from '../../../routes'
-import Button from '../../button'
 import TextField from '../../text-field'
 import TokenList from './token-list'
 import TokenSearch from './token-search'
+import PageContainer from '../../page-container'
+import { Tabs, Tab } from '../../tabs'
 
 const emptyAddr = '0x0000000000000000000000000000000000000000'
 const SEARCH_TAB = 'SEARCH'
@@ -285,65 +285,33 @@ class AddToken extends Component {
     )
   }
 
+  renderTabs () {
+    return (
+      <Tabs>
+        <Tab name={this.context.t('search')}>
+          { this.renderSearchToken() }
+        </Tab>
+        <Tab name={this.context.t('customToken')}>
+          { this.renderCustomTokenForm() }
+        </Tab>
+      </Tabs>
+    )
+  }
+
   render () {
-    const { displayedTab } = this.state
     const { history, clearPendingTokens } = this.props
 
     return (
-      <div className="page-container">
-        <div className="page-container__header page-container__header--no-padding-bottom">
-          <div className="page-container__title">
-            { this.context.t('addTokens') }
-          </div>
-          <div className="page-container__tabs">
-            <div
-              className={classnames('page-container__tab', {
-                'page-container__tab--selected': displayedTab === SEARCH_TAB,
-              })}
-              onClick={() => this.setState({ displayedTab: SEARCH_TAB })}
-            >
-              { this.context.t('search') }
-            </div>
-            <div
-              className={classnames('page-container__tab', {
-                'page-container__tab--selected': displayedTab === CUSTOM_TOKEN_TAB,
-              })}
-              onClick={() => this.setState({ displayedTab: CUSTOM_TOKEN_TAB })}
-            >
-              { this.context.t('customToken') }
-            </div>
-          </div>
-        </div>
-        <div className="page-container__content">
-          {
-            displayedTab === CUSTOM_TOKEN_TAB
-              ? this.renderCustomTokenForm()
-              : this.renderSearchToken()
-          }
-        </div>
-        <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              clearPendingTokens()
-              history.push(DEFAULT_ROUTE)
-            }}
-          >
-            { this.context.t('cancel') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => this.handleNext()}
-            disabled={this.hasError() || !this.hasSelected()}
-          >
-            { this.context.t('next') }
-          </Button>
-        </div>
-      </div>
+      <PageContainer
+        title={this.context.t('addTokens')}
+        tabsComponent={this.renderTabs()}
+        onSubmit={() => this.handleNext()}
+        disabled={this.hasError() || !this.hasSelected()}
+        onCancel={() => {
+          clearPendingTokens()
+          history.push(DEFAULT_ROUTE)
+        }}
+      />
     )
   }
 }
-- 
cgit 


From 865a0d8173e27c073f00d0d156b95e8d92208a94 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 17 Aug 2018 14:34:14 -0700
Subject: Use eth_getCode to sort transaction action type

---
 .../confirm-transaction-switch.component.js                 | 13 ++++++++++---
 .../confirm-transaction-switch.container.js                 |  6 ++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index 0280f73c6..d494977cd 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -23,14 +23,16 @@ export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
     txData: PropTypes.object,
     methodData: PropTypes.object,
-    fetchingMethodData: PropTypes.bool,
+    fetchingData: PropTypes.bool,
+    isEtherTransaction: PropTypes.bool,
   }
 
   redirectToTransaction () {
     const {
       txData,
       methodData: { name },
-      fetchingMethodData,
+      fetchingData,
+      isEtherTransaction,
     } = this.props
     const { id, txParams: { data } = {} } = txData
 
@@ -39,10 +41,15 @@ export default class ConfirmTransactionSwitch extends Component {
       return <Redirect to={{ pathname }} />
     }
 
-    if (fetchingMethodData) {
+    if (fetchingData) {
       return <Loading />
     }
 
+    if (isEtherTransaction) {
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+      return <Redirect to={{ pathname }} />
+    }
+
     if (data) {
       const methodName = name && name.toLowerCase()
 
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
index 3d7fc78cc..7f2c36af2 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -6,14 +6,16 @@ const mapStateToProps = state => {
     confirmTransaction: {
       txData,
       methodData,
-      fetchingMethodData,
+      fetchingData,
+      toSmartContract,
     },
   } = state
 
   return {
     txData,
     methodData,
-    fetchingMethodData,
+    fetchingData,
+    isEtherTransaction: !toSmartContract,
   }
 }
 
-- 
cgit 


From b59a1e91b8f4b595500a0785f325e833fa35407d Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Thu, 23 Aug 2018 15:54:40 -0300
Subject: typo watchAsset imageUrl to image

---
 .../confirm-add-suggested-token.component.js                          | 4 ++--
 .../confirm-add-suggested-token.container.js                          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index 37d9aca02..025435a3b 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -61,7 +61,7 @@ export default class ConfirmAddSuggestedToken extends Component {
               {
                 Object.entries(pendingTokens)
                   .map(([ address, token ]) => {
-                    const { name, symbol, imageUrl } = token
+                    const { name, symbol, image } = token
 
                     return (
                       <div
@@ -73,7 +73,7 @@ export default class ConfirmAddSuggestedToken extends Component {
                             className="confirm-add-token__token-icon"
                             diameter={48}
                             address={address}
-                            imageUrl={imageUrl}
+                            image={image}
                           />
                           <div className="confirm-add-token__name">
                             { this.getTokenName(name, symbol) }
diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
index 89291ff4f..1f2737e52 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js
@@ -18,7 +18,7 @@ const mapStateToProps = ({ metamask }) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    addToken: ({address, symbol, decimals, imageUrl}) => dispatch(addToken(address, symbol, decimals, imageUrl)),
+    addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)),
     removeSuggestedTokens: () => dispatch(removeSuggestedTokens()),
   }
 }
-- 
cgit 


From 3b408715c745030aed6e720e6f19dc8f2aa511d1 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 24 Jul 2018 11:40:05 -0700
Subject: Refactor home screen and remove unused files

---
 ui/app/components/pages/home.js                | 239 -------------------------
 ui/app/components/pages/home/home.component.js |  73 ++++++++
 ui/app/components/pages/home/home.container.js |  34 ++++
 ui/app/components/pages/home/index.js          |   1 +
 4 files changed, 108 insertions(+), 239 deletions(-)
 delete mode 100644 ui/app/components/pages/home.js
 create mode 100644 ui/app/components/pages/home/home.component.js
 create mode 100644 ui/app/components/pages/home/home.container.js
 create mode 100644 ui/app/components/pages/home/index.js

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
deleted file mode 100644
index 5e3fdc9af..000000000
--- a/ui/app/components/pages/home.js
+++ /dev/null
@@ -1,239 +0,0 @@
-const { Component } = require('react')
-const { connect } = require('react-redux')
-const PropTypes = require('prop-types')
-const { Redirect, withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const h = require('react-hyperscript')
-const actions = require('../../actions')
-const log = require('loglevel')
-
-// init
-const NewKeyChainScreen = require('../../new-keychain')
-// mascara
-const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default
-
-// accounts
-const MainContainer = require('../../main-container')
-
-// other views
-const BuyView = require('../../components/buy-button-subview')
-const QrView = require('../../components/qr-code')
-
-// Routes
-const {
-  INITIALIZE_BACKUP_PHRASE_ROUTE,
-  RESTORE_VAULT_ROUTE,
-  CONFIRM_TRANSACTION_ROUTE,
-  NOTICE_ROUTE,
-} = require('../../routes')
-
-const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
-
-class Home extends Component {
-  componentDidMount () {
-    const {
-      history,
-      unconfirmedTransactionsCount = 0,
-    } = this.props
-
-    // unapprovedTxs and unapproved messages
-    if (unconfirmedTransactionsCount > 0) {
-      history.push(CONFIRM_TRANSACTION_ROUTE)
-    }
-  }
-
-  render () {
-    log.debug('rendering primary')
-    const {
-      noActiveNotices,
-      lostAccounts,
-      forgottenPassword,
-      currentView,
-      activeAddress,
-      seedWords,
-    } = this.props
-
-    // notices
-    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
-      return h(Redirect, {
-        to: {
-          pathname: NOTICE_ROUTE,
-        },
-      })
-    }
-
-    // seed words
-    if (seedWords) {
-      log.debug('rendering seed words')
-      return h(Redirect, {
-        to: {
-          pathname: INITIALIZE_BACKUP_PHRASE_ROUTE,
-        },
-      })
-    }
-
-    if (forgottenPassword) {
-      log.debug('rendering restore vault screen')
-      return h(Redirect, {
-        to: {
-          pathname: RESTORE_VAULT_ROUTE,
-        },
-      })
-    }
-
-    // show current view
-    switch (currentView.name) {
-
-      case 'accountDetail':
-        log.debug('rendering main container')
-        return h(MainContainer, {key: 'account-detail'})
-
-      case 'newKeychain':
-        log.debug('rendering new keychain screen')
-        return h(NewKeyChainScreen, {key: 'new-keychain'})
-
-      case 'buyEth':
-        log.debug('rendering buy ether screen')
-        return h(BuyView, {key: 'buyEthView'})
-
-      case 'onboardingBuyEth':
-        log.debug('rendering onboarding buy ether screen')
-        return h(MascaraBuyEtherScreen, {key: 'buyEthView'})
-
-      case 'qr':
-        log.debug('rendering show qr screen')
-        return h('div', {
-          style: {
-            position: 'absolute',
-            height: '100%',
-            top: '0px',
-            left: '0px',
-          },
-        }, [
-          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
-            onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)),
-            style: {
-              marginLeft: '10px',
-              marginTop: '50px',
-            },
-          }),
-          h('div', {
-            style: {
-              position: 'absolute',
-              left: '44px',
-              width: '285px',
-            },
-          }, [
-            h(QrView, {key: 'qr'}),
-          ]),
-        ])
-
-      default:
-        log.debug('rendering default, account detail screen')
-        return h(MainContainer, {key: 'account-detail'})
-    }
-  }
-}
-
-Home.propTypes = {
-  currentCurrency: PropTypes.string,
-  isLoading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  network: PropTypes.string,
-  provider: PropTypes.object,
-  frequentRpcList: PropTypes.array,
-  currentView: PropTypes.object,
-  sidebarOpen: PropTypes.bool,
-  isMascara: PropTypes.bool,
-  isOnboarding: PropTypes.bool,
-  isUnlocked: PropTypes.bool,
-  networkDropdownOpen: PropTypes.bool,
-  history: PropTypes.object,
-  dispatch: PropTypes.func,
-  selectedAddress: PropTypes.string,
-  noActiveNotices: PropTypes.bool,
-  lostAccounts: PropTypes.array,
-  isInitialized: PropTypes.bool,
-  forgottenPassword: PropTypes.bool,
-  activeAddress: PropTypes.string,
-  unapprovedTxs: PropTypes.object,
-  seedWords: PropTypes.string,
-  unapprovedMsgCount: PropTypes.number,
-  unapprovedPersonalMsgCount: PropTypes.number,
-  unapprovedTypedMessagesCount: PropTypes.number,
-  welcomeScreenSeen: PropTypes.bool,
-  isPopup: PropTypes.bool,
-  isMouseUser: PropTypes.bool,
-  t: PropTypes.func,
-  unconfirmedTransactionsCount: PropTypes.number,
-}
-
-function mapStateToProps (state) {
-  const { appState, metamask } = state
-  const {
-    networkDropdownOpen,
-    sidebarOpen,
-    isLoading,
-    loadingMessage,
-  } = appState
-
-  const {
-    accounts,
-    address,
-    isInitialized,
-    noActiveNotices,
-    seedWords,
-    unapprovedTxs,
-    nextUnreadNotice,
-    lostAccounts,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-  } = metamask
-  const selected = address || Object.keys(accounts)[0]
-
-  return {
-    // state from plugin
-    networkDropdownOpen,
-    sidebarOpen,
-    isLoading,
-    loadingMessage,
-    noActiveNotices,
-    isInitialized,
-    isUnlocked: state.metamask.isUnlocked,
-    selectedAddress: state.metamask.selectedAddress,
-    currentView: state.appState.currentView,
-    activeAddress: state.appState.activeAddress,
-    transForward: state.appState.transForward,
-    isMascara: state.metamask.isMascara,
-    isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized),
-    isPopup: state.metamask.isPopup,
-    seedWords: state.metamask.seedWords,
-    unapprovedTxs,
-    unapprovedMsgs: state.metamask.unapprovedMsgs,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
-    menuOpen: state.appState.menuOpen,
-    network: state.metamask.network,
-    provider: state.metamask.provider,
-    forgottenPassword: state.appState.forgottenPassword,
-    nextUnreadNotice,
-    lostAccounts,
-    frequentRpcList: state.metamask.frequentRpcList || [],
-    currentCurrency: state.metamask.currentCurrency,
-    isMouseUser: state.appState.isMouseUser,
-    isRevealingSeedWords: state.metamask.isRevealingSeedWords,
-    Qr: state.appState.Qr,
-    welcomeScreenSeen: state.metamask.welcomeScreenSeen,
-
-    // state needed to get account dropdown temporarily rendering from app bar
-    selected,
-    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps)
-)(Home)
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
new file mode 100644
index 000000000..0ab6f77f8
--- /dev/null
+++ b/ui/app/components/pages/home/home.component.js
@@ -0,0 +1,73 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Redirect } from 'react-router-dom'
+import WalletView from '../../wallet-view'
+import TxView from '../../tx-view'
+import {
+  INITIALIZE_BACKUP_PHRASE_ROUTE,
+  RESTORE_VAULT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  NOTICE_ROUTE,
+} from '../../../routes'
+
+export default class Home extends PureComponent {
+  static propTypes = {
+    history: PropTypes.object,
+    unapprovedTxs: PropTypes.object,
+    unapprovedMsgCount: PropTypes.number,
+    unapprovedPersonalMsgCount: PropTypes.number,
+    unapprovedTypedMessagesCount: PropTypes.number,
+    noActiveNotices: PropTypes.bool,
+    lostAccounts: PropTypes.array,
+    forgottenPassword: PropTypes.bool,
+    seedWords: PropTypes.string,
+  }
+
+  componentDidMount () {
+    const {
+      history,
+      unapprovedTxs = {},
+      unapprovedMsgCount = 0,
+      unapprovedPersonalMsgCount = 0,
+      unapprovedTypedMessagesCount = 0,
+    } = this.props
+
+    // unapprovedTxs and unapproved messages
+    if (Object.keys(unapprovedTxs).length ||
+      unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
+  }
+
+  render () {
+    const {
+      noActiveNotices,
+      lostAccounts,
+      forgottenPassword,
+      seedWords,
+    } = this.props
+
+    // notices
+    if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) {
+      return <Redirect to={{ pathname: NOTICE_ROUTE }} />
+    }
+
+    // seed words
+    if (seedWords) {
+      return <Redirect to={{ pathname: INITIALIZE_BACKUP_PHRASE_ROUTE }}/>
+    }
+
+    if (forgottenPassword) {
+      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
+    }
+
+    return (
+      <div className="main-container">
+        <div className="account-and-transaction-details">
+          <WalletView responsiveDisplayClassname="lap-visible" />
+          <TxView />
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
new file mode 100644
index 000000000..96a45a69b
--- /dev/null
+++ b/ui/app/components/pages/home/home.container.js
@@ -0,0 +1,34 @@
+import Home from './home.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+
+const mapStateToProps = state => {
+  const { metamask, appState } = state
+  const {
+    unapprovedTxs = {},
+    unapprovedMsgCount = 0,
+    unapprovedPersonalMsgCount = 0,
+    unapprovedTypedMessagesCount = 0,
+    noActiveNotices,
+    lostAccounts,
+    seedWords,
+  } = metamask
+  const { forgottenPassword } = appState
+
+  return {
+    unapprovedTxs,
+    unapprovedMsgCount,
+    unapprovedPersonalMsgCount,
+    unapprovedTypedMessagesCount,
+    noActiveNotices,
+    lostAccounts,
+    forgottenPassword,
+    seedWords,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps)
+)(Home)
diff --git a/ui/app/components/pages/home/index.js b/ui/app/components/pages/home/index.js
new file mode 100644
index 000000000..4474ba5b8
--- /dev/null
+++ b/ui/app/components/pages/home/index.js
@@ -0,0 +1 @@
+export { default } from './home.container'
-- 
cgit 


From d1de5ae94f1662f35a7b031ac59b4bb9bd719695 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 24 Jul 2018 11:40:22 -0700
Subject: Add react-media package to prevent rendering wallet-view twice in the
 popup view

---
 ui/app/components/pages/home/home.component.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 0ab6f77f8..20ba44484 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
 import TxView from '../../tx-view'
@@ -64,7 +65,10 @@ export default class Home extends PureComponent {
     return (
       <div className="main-container">
         <div className="account-and-transaction-details">
-          <WalletView responsiveDisplayClassname="lap-visible" />
+          <Media
+            query="(min-width: 576px)"
+            render={() => <WalletView />}
+          />
           <TxView />
         </div>
       </div>
-- 
cgit 


From 4e0693eaff0107d11bf93042db50cbb022cfeed8 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 30 Jul 2018 12:02:55 -0700
Subject: Add withMethodData HOC, add higher-order-component folder

---
 .../confirm-add-token/confirm-add-token.component.js     |  4 ++--
 .../pages/confirm-add-token/token-balance/index.js       |  2 --
 .../token-balance/token-balance.component.js             | 16 ----------------
 .../token-balance/token-balance.container.js             | 16 ----------------
 4 files changed, 2 insertions(+), 36 deletions(-)
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/index.js
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
 delete mode 100644 ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 65d654b92..3dcc8cda9 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { DEFAULT_ROUTE, ADD_TOKEN_ROUTE } from '../../../routes'
 import Button from '../../button'
-import Identicon from '../../../components/identicon'
-import TokenBalance from './token-balance'
+import Identicon from '../../identicon'
+import TokenBalance from '../../token-balance'
 
 export default class ConfirmAddToken extends Component {
   static contextTypes = {
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/index.js b/ui/app/components/pages/confirm-add-token/token-balance/index.js
deleted file mode 100644
index 6fb5c8223..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import TokenBalance from './token-balance.container'
-module.exports = TokenBalance
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
deleted file mode 100644
index 976788d4c..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.component.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-export default class TokenBalance extends Component {
-  static propTypes = {
-    string: PropTypes.string,
-    symbol: PropTypes.string,
-    error: PropTypes.string,
-  }
-
-  render () {
-    return (
-      <div className="hide-text-overflow">{ this.props.string }</div>
-    )
-  }
-}
diff --git a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js b/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
deleted file mode 100644
index bc1289ce1..000000000
--- a/ui/app/components/pages/confirm-add-token/token-balance/token-balance.container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux'
-import { compose } from 'recompose'
-import withTokenTracker from '../../../../helpers/with-token-tracker'
-import TokenBalance from './token-balance.component'
-import selectors from '../../../../selectors'
-
-const mapStateToProps = state => {
-  return {
-    userAddress: selectors.getSelectedAddress(state),
-  }
-}
-
-export default compose(
-  connect(mapStateToProps),
-  withTokenTracker
-)(TokenBalance)
-- 
cgit 


From 5ee40675b9f986a9ff2e5d15a271d7de2145d0e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 30 Jul 2018 22:03:20 -0700
Subject: Refactor transactions list views. Add redesign components

---
 .../confirm-transaction-switch.component.js         |  4 ++--
 .../confirm-transaction-switch.constants.js         |  3 ---
 ui/app/components/pages/home/home.component.js      | 21 ++++++---------------
 ui/app/components/pages/home/home.container.js      | 10 ++--------
 4 files changed, 10 insertions(+), 28 deletions(-)
 delete mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
index d494977cd..2c44b6094 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -12,12 +12,12 @@ import {
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
-import { isConfirmDeployContract } from './confirm-transaction-switch.util'
+import { isConfirmDeployContract } from '../../../helpers/transactions.util'
 import {
   TOKEN_METHOD_TRANSFER,
   TOKEN_METHOD_APPROVE,
   TOKEN_METHOD_TRANSFER_FROM,
-} from './confirm-transaction-switch.constants'
+} from '../../../constants/transactions'
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
deleted file mode 100644
index 9db4a2f96..000000000
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const TOKEN_METHOD_TRANSFER = 'transfer'
-export const TOKEN_METHOD_APPROVE = 'approve'
-export const TOKEN_METHOD_TRANSFER_FROM = 'transferfrom'
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 20ba44484..dae9790de 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -4,6 +4,7 @@ import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
 import TxView from '../../tx-view'
+import TokenView from '../../token-view'
 import {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
@@ -14,28 +15,17 @@ import {
 export default class Home extends PureComponent {
   static propTypes = {
     history: PropTypes.object,
-    unapprovedTxs: PropTypes.object,
-    unapprovedMsgCount: PropTypes.number,
-    unapprovedPersonalMsgCount: PropTypes.number,
-    unapprovedTypedMessagesCount: PropTypes.number,
     noActiveNotices: PropTypes.bool,
     lostAccounts: PropTypes.array,
     forgottenPassword: PropTypes.bool,
     seedWords: PropTypes.string,
+    unconfirmedTransactionsCount: PropTypes.number,
   }
 
   componentDidMount () {
-    const {
-      history,
-      unapprovedTxs = {},
-      unapprovedMsgCount = 0,
-      unapprovedPersonalMsgCount = 0,
-      unapprovedTypedMessagesCount = 0,
-    } = this.props
+    const { history, unconfirmedTransactionsCount = 0 } = this.props
 
-    // unapprovedTxs and unapproved messages
-    if (Object.keys(unapprovedTxs).length ||
-      unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) {
+    if (unconfirmedTransactionsCount > 0) {
       history.push(CONFIRM_TRANSACTION_ROUTE)
     }
   }
@@ -69,7 +59,8 @@ export default class Home extends PureComponent {
             query="(min-width: 576px)"
             render={() => <WalletView />}
           />
-          <TxView />
+          <TokenView />
+          {/* <TxView /> */}
         </div>
       </div>
     )
diff --git a/ui/app/components/pages/home/home.container.js b/ui/app/components/pages/home/home.container.js
index 96a45a69b..b0e34f832 100644
--- a/ui/app/components/pages/home/home.container.js
+++ b/ui/app/components/pages/home/home.container.js
@@ -2,14 +2,11 @@ import Home from './home.component'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
+import { unconfirmedTransactionsCountSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
   const { metamask, appState } = state
   const {
-    unapprovedTxs = {},
-    unapprovedMsgCount = 0,
-    unapprovedPersonalMsgCount = 0,
-    unapprovedTypedMessagesCount = 0,
     noActiveNotices,
     lostAccounts,
     seedWords,
@@ -17,14 +14,11 @@ const mapStateToProps = state => {
   const { forgottenPassword } = appState
 
   return {
-    unapprovedTxs,
-    unapprovedMsgCount,
-    unapprovedPersonalMsgCount,
-    unapprovedTypedMessagesCount,
     noActiveNotices,
     lostAccounts,
     forgottenPassword,
     seedWords,
+    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
   }
 }
 
-- 
cgit 


From e104744d3b29af518bc60c45339d4d4458baaa68 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 6 Aug 2018 13:45:56 -0700
Subject: Fix shapeshift transactions. Delete unused files

---
 ui/app/components/pages/home/home.component.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index dae9790de..65273ec8e 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
-import TxView from '../../tx-view'
 import TokenView from '../../token-view'
 import {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
@@ -60,7 +59,6 @@ export default class Home extends PureComponent {
             render={() => <WalletView />}
           />
           <TokenView />
-          {/* <TxView /> */}
         </div>
       </div>
     )
-- 
cgit 


From 342522c6cf23670f931e69ba822eedfd2d6ee252 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 23 Aug 2018 16:44:38 -0700
Subject: Fix naming, add eth.getCode check for actions, fix translations for
 statuses

---
 ui/app/components/pages/home/home.component.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 65273ec8e..404f42361 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
-import TokenView from '../../token-view'
+import TransactionView from '../../transaction-view'
 import {
   INITIALIZE_BACKUP_PHRASE_ROUTE,
   RESTORE_VAULT_ROUTE,
@@ -58,7 +58,7 @@ export default class Home extends PureComponent {
             query="(min-width: 576px)"
             render={() => <WalletView />}
           />
-          <TokenView />
+          <TransactionView />
         </div>
       </div>
     )
-- 
cgit 


From 65873e33e407b5af2c4134ddcbc48f4e81bdfa4f Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 16 Aug 2018 05:13:13 -0230
Subject: Adds feature flag toggle for the hex data row on the send screen.

---
 ui/app/components/pages/settings/settings.js | 29 ++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index ff42a13de..a5ea1b89c 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -66,6 +66,30 @@ class Settings extends Component {
     ])
   }
 
+  renderHexDataOptIn () {
+    const { metamask: { featureFlags: { sendHexData } }, setHexDataFeatureFlag } = this.props
+
+    return h('div.settings__content-row', [
+      h('div.settings__content-item', [
+        h('span', this.context.t('showHexData')),
+        h(
+          'div.settings__content-description',
+          this.context.t('showHexDataDescription')
+        ),
+      ]),
+      h('div.settings__content-item', [
+        h('div.settings__content-item-col', [
+          h(ToggleButton, {
+            value: sendHexData,
+            onToggle: (value) => setHexDataFeatureFlag(!value),
+            activeLabel: '',
+            inactiveLabel: '',
+          }),
+        ]),
+      ]),
+    ])
+  }
+
   renderCurrentConversion () {
     const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
 
@@ -307,6 +331,7 @@ class Settings extends Component {
         !isMascara && this.renderOldUI(),
         this.renderResetAccount(),
         this.renderBlockieOptIn(),
+        this.renderHexDataOptIn(),
       ])
     )
   }
@@ -315,6 +340,7 @@ class Settings extends Component {
 Settings.propTypes = {
   metamask: PropTypes.object,
   setUseBlockie: PropTypes.func,
+  setHexDataFeatureFlag: PropTypes.func,
   setCurrentCurrency: PropTypes.func,
   setRpcTarget: PropTypes.func,
   displayWarning: PropTypes.func,
@@ -349,6 +375,9 @@ const mapDispatchToProps = dispatch => {
     setFeatureFlagToBeta: () => {
       return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
     },
+    setHexDataFeatureFlag: (featureFlagShowState) => {
+      return dispatch(actions.setFeatureFlag('sendHexData', featureFlagShowState))
+    },
     showResetAccountConfirmationModal: () => {
       return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
     },
-- 
cgit 


From f78dc96a2c39aa8254317d57691ebd4294e7ad2d Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 28 Aug 2018 12:18:57 -0700
Subject: Fix infinite spinner on failed transactions

---
 .../confirm-transaction-base.component.js                     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 961aa304e..3216d01c3 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -73,6 +73,7 @@ export default class ConfirmTransactionBase extends Component {
 
   state = {
     submitting: false,
+    submitError: null,
   }
 
   componentDidUpdate () {
@@ -268,7 +269,7 @@ export default class ConfirmTransactionBase extends Component {
       return
     }
 
-    this.setState({ submitting: true })
+    this.setState({ submitting: true, submitError: null })
 
     if (onSubmit) {
       Promise.resolve(onSubmit(txData))
@@ -280,7 +281,9 @@ export default class ConfirmTransactionBase extends Component {
           this.setState({ submitting: false })
           history.push(DEFAULT_ROUTE)
         })
-        .catch(() => this.setState({ submitting: false }))
+        .catch(error => {
+          this.setState({ submitting: false, submitError: error.message })
+        })
     }
   }
 
@@ -309,7 +312,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       warning,
     } = this.props
-    const { submitting } = this.state
+    const { submitting, submitError } = this.state
 
     const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@@ -332,7 +335,7 @@ export default class ConfirmTransactionBase extends Component {
         contentComponent={contentComponent}
         nonce={nonce}
         identiconAddress={identiconAddress}
-        errorMessage={errorMessage}
+        errorMessage={errorMessage || submitError}
         errorKey={propsErrorKey || errorKey}
         warning={warning}
         disabled={!propsValid || !valid || submitting}
-- 
cgit 


From 07cb6adc314e645cc0429c696afab9738673a729 Mon Sep 17 00:00:00 2001
From: Esteban MIno <efmino@uc.cl>
Date: Wed, 29 Aug 2018 23:13:25 -0300
Subject: fix images for watched tokens

---
 .../confirm-transaction-base/confirm-transaction-base.component.js    | 3 +++
 .../confirm-transaction-base/confirm-transaction-base.container.js    | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 3216d01c3..56cfbccc8 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -38,6 +38,7 @@ export default class ConfirmTransactionBase extends Component {
     isTxReprice: PropTypes.bool,
     methodData: PropTypes.object,
     nonce: PropTypes.string,
+    assetImage: PropTypes.string,
     sendTransaction: PropTypes.func,
     showCustomizeGasModal: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
@@ -310,6 +311,7 @@ export default class ConfirmTransactionBase extends Component {
       contentComponent,
       onEdit,
       nonce,
+      assetImage,
       warning,
     } = this.props
     const { submitting, submitError } = this.state
@@ -334,6 +336,7 @@ export default class ConfirmTransactionBase extends Component {
         dataComponent={this.renderData()}
         contentComponent={contentComponent}
         nonce={nonce}
+        assetImage={assetImage}
         identiconAddress={identiconAddress}
         errorMessage={errorMessage || submitError}
         errorKey={propsErrorKey || errorKey}
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 0c0deff18..8f54c8040 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -52,8 +52,9 @@ const mapStateToProps = (state, props) => {
     accounts,
     selectedAddress,
     selectedAddressTxList,
+    assetImages,
   } = metamask
-
+  const assetImage = assetImages[txParamsToAddress]
   const { balance } = accounts[selectedAddress]
   const { name: fromName } = identities[selectedAddress]
   const toAddress = propsToAddress || txParamsToAddress
@@ -88,6 +89,7 @@ const mapStateToProps = (state, props) => {
     conversionRate,
     transactionStatus,
     nonce,
+    assetImage,
   }
 }
 
-- 
cgit 


From f412b192440fe1db9132c703a138082f489ca548 Mon Sep 17 00:00:00 2001
From: bunoi <taobunoi@gmail.com>
Date: Tue, 4 Sep 2018 23:40:02 +0700
Subject: fix check valid decimals code in new ui

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

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index 59748ff46..3612e676c 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -206,7 +206,7 @@ class AddToken extends Component {
     const validDecimals = customDecimals !== null &&
       customDecimals !== '' &&
       customDecimals >= 0 &&
-      customDecimals < 36
+      customDecimals <= 36
     let customDecimalsError = null
 
     if (!validDecimals) {
-- 
cgit 


From 31089778ba3c97443e25bd3a7a901f45757894d9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 27 Aug 2018 20:58:40 -0700
Subject: Add raised type buttons to Button component. Refactor all buttons
 within app to Button components

---
 .../connect-hardware/account-list.js               | 31 +++++++++++-----------
 .../connect-hardware/connect-screen.js             | 15 ++++++-----
 .../pages/create-account/import-account/json.js    | 19 +++++++------
 .../create-account/import-account/private-key.js   | 19 +++++++------
 .../components/pages/create-account/new-account.js | 19 +++++++------
 ui/app/components/pages/keychains/reveal-seed.js   | 17 +++++++++---
 ui/app/components/pages/settings/settings.js       | 22 ++++++++++++---
 7 files changed, 88 insertions(+), 54 deletions(-)

(limited to 'ui/app/components/pages')

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


From c5b94097017cb27e556d002c2ddea90e1950f72b Mon Sep 17 00:00:00 2001
From: Sean Rabaut <rabautse@gmail.com>
Date: Thu, 13 Sep 2018 20:18:58 -0400
Subject: Bug Fix: #5183 history not defined

---
 ui/app/components/pages/create-account/import-account/json.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

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 32b1065aa..90279bbbd 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -85,7 +85,7 @@ class JsonImportSubview extends Component {
   }
 
   createNewKeychain () {
-    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress } = this.props
+    const { firstAddress, displayWarning, importNewJsonAccount, setSelectedAddress, history } = this.props
     const state = this.state
 
     if (!state) {
-- 
cgit 


From 3987f9860f9a1892c12237b726db30a8d5a3c41d Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 19 Sep 2018 16:43:58 -0230
Subject: Move main-container wrapper div into its own class

---
 ui/app/components/pages/unlock-page/index.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/unlock-page/index.scss b/ui/app/components/pages/unlock-page/index.scss
index 3d44bd037..6bd52282d 100644
--- a/ui/app/components/pages/unlock-page/index.scss
+++ b/ui/app/components/pages/unlock-page/index.scss
@@ -14,6 +14,7 @@
     align-self: stretch;
     justify-content: center;
     flex: 1 0 auto;
+    height: 100vh;
   }
 
   &__mascot-container {
-- 
cgit 


From 5a6c333506e4000602c1a1106cee6d06fe83afa8 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 17 Sep 2018 10:34:29 -0700
Subject: Switch existing modals from using Notification to Modal. Remove
 Notification component. Add CancelTransaction modal

---
 .../confirm-transaction-base/confirm-transaction-base.component.js   | 5 +++--
 .../confirm-transaction-base/confirm-transaction-base.container.js   | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 56cfbccc8..40d8faf50 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -8,6 +8,7 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../constants/error-keys'
+import { CONFIRMED_STATUS, DROPPED_STATUS } from '../../../constants/transactions'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -85,9 +86,9 @@ export default class ConfirmTransactionBase extends Component {
       clearConfirmTransaction,
     } = this.props
 
-    if (transactionStatus === 'dropped') {
+    if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
       showTransactionConfirmedModal({
-        onHide: () => {
+        onSubmit: () => {
           clearConfirmTransaction()
           history.push(DEFAULT_ROUTE)
         },
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 8f54c8040..ae31eba17 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -97,8 +97,8 @@ const mapDispatchToProps = dispatch => {
   return {
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     clearSend: () => dispatch(clearSend()),
-    showTransactionConfirmedModal: ({ onHide }) => {
-      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onHide }))
+    showTransactionConfirmedModal: ({ onSubmit }) => {
+      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onSubmit }))
     },
     showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
       return dispatch(showModal({ name: 'CONFIRM_CUSTOMIZE_GAS', txData, onSubmit, validate }))
-- 
cgit 


From b579ee9619d5d775484f382b800c3426311da19d Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 11 Sep 2018 17:32:37 -0700
Subject: Refactor settings page to use JSX and follow component file folder
 structure

---
 ui/app/components/pages/index.scss                 |   2 +
 ui/app/components/pages/settings/index.js          |  65 +---
 ui/app/components/pages/settings/index.scss        |  80 ++++
 ui/app/components/pages/settings/info-tab/index.js |   1 +
 .../components/pages/settings/info-tab/index.scss  |  60 +++
 .../pages/settings/info-tab/info-tab.component.js  | 136 +++++++
 ui/app/components/pages/settings/info.js           | 120 ------
 .../pages/settings/settings-tab/index.js           |   1 +
 .../pages/settings/settings-tab/index.scss         |  51 +++
 .../settings-tab/settings-tab.component.js         | 359 ++++++++++++++++++
 .../settings-tab/settings-tab.container.js         |  59 +++
 .../pages/settings/settings.component.js           |  54 +++
 ui/app/components/pages/settings/settings.js       | 408 ---------------------
 13 files changed, 804 insertions(+), 592 deletions(-)
 create mode 100644 ui/app/components/pages/settings/index.scss
 create mode 100644 ui/app/components/pages/settings/info-tab/index.js
 create mode 100644 ui/app/components/pages/settings/info-tab/index.scss
 create mode 100644 ui/app/components/pages/settings/info-tab/info-tab.component.js
 delete mode 100644 ui/app/components/pages/settings/info.js
 create mode 100644 ui/app/components/pages/settings/settings-tab/index.js
 create mode 100644 ui/app/components/pages/settings/settings-tab/index.scss
 create mode 100644 ui/app/components/pages/settings/settings-tab/settings-tab.component.js
 create mode 100644 ui/app/components/pages/settings/settings-tab/settings-tab.container.js
 create mode 100644 ui/app/components/pages/settings/settings.component.js
 delete mode 100644 ui/app/components/pages/settings/settings.js

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
index b15c59863..6551278f5 100644
--- a/ui/app/components/pages/index.scss
+++ b/ui/app/components/pages/index.scss
@@ -3,3 +3,5 @@
 @import './add-token/index';
 
 @import './confirm-add-token/index';
+
+@import './settings/index';
diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js
index aee17e0e8..44a9ffa63 100644
--- a/ui/app/components/pages/settings/index.js
+++ b/ui/app/components/pages/settings/index.js
@@ -1,64 +1 @@
-const { Component } = require('react')
-const { Switch, Route, matchPath } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const TabBar = require('../../tab-bar')
-const Settings = require('./settings')
-const Info = require('./info')
-const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
-
-class Config extends Component {
-  renderTabs () {
-    const { history, location } = this.props
-
-    return h('div.settings__tabs', [
-      h(TabBar, {
-        tabs: [
-          { content: this.context.t('settings'), key: SETTINGS_ROUTE },
-          { content: this.context.t('info'), key: INFO_ROUTE },
-        ],
-        isActive: key => matchPath(location.pathname, { path: key, exact: true }),
-        onSelect: key => history.push(key),
-      }),
-    ])
-  }
-
-  render () {
-    const { history } = this.props
-
-    return (
-      h('.main-container.settings', {}, [
-        h('.settings__header', [
-          h('div.settings__close-button', {
-            onClick: () => history.push(DEFAULT_ROUTE),
-          }),
-          this.renderTabs(),
-        ]),
-        h(Switch, [
-          h(Route, {
-            exact: true,
-            path: INFO_ROUTE,
-            component: Info,
-          }),
-          h(Route, {
-            exact: true,
-            path: SETTINGS_ROUTE,
-            component: Settings,
-          }),
-        ]),
-      ])
-    )
-  }
-}
-
-Config.propTypes = {
-  location: PropTypes.object,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-Config.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = Config
+export { default } from './settings.component'
diff --git a/ui/app/components/pages/settings/index.scss b/ui/app/components/pages/settings/index.scss
new file mode 100644
index 000000000..138ebcfc5
--- /dev/null
+++ b/ui/app/components/pages/settings/index.scss
@@ -0,0 +1,80 @@
+@import './info-tab/index';
+
+@import './settings-tab/index';
+
+.settings-page {
+  position: relative;
+  background: $white;
+  display: flex;
+  flex-flow: column nowrap;
+
+  &__header {
+    padding: 25px 25px 0;
+  }
+
+  &__close-button::after {
+    content: '\00D7';
+    font-size: 40px;
+    color: $dusty-gray;
+    position: absolute;
+    top: 25px;
+    right: 30px;
+    cursor: pointer;
+  }
+
+  &__content {
+    padding: 25px;
+    height: auto;
+    overflow: auto;
+  }
+
+  &__content-row {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0 20px;
+
+    @media screen and (max-width: 575px) {
+      flex-direction: column;
+      padding: 10px 0;
+    }
+  }
+
+  &__content-item {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    padding: 0 5px;
+    min-height: 71px;
+
+    @media screen and (max-width: 575px) {
+      height: initial;
+      padding: 5px 0;
+    }
+
+    &--without-height {
+      height: initial;
+    }
+  }
+
+  &__content-label {
+    text-transform: capitalize;
+  }
+
+  &__content-description {
+    font-size: 14px;
+    color: $dusty-gray;
+    padding-top: 5px;
+  }
+
+  &__content-item-col {
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (max-width: 575px) {
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/ui/app/components/pages/settings/info-tab/index.js b/ui/app/components/pages/settings/info-tab/index.js
new file mode 100644
index 000000000..7556a258d
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.js
@@ -0,0 +1 @@
+export { default } from './info-tab.component'
diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/components/pages/settings/info-tab/index.scss
new file mode 100644
index 000000000..00342dc5f
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/index.scss
@@ -0,0 +1,60 @@
+.info-tab {
+  &__logo-wrapper {
+    height: 80px;
+    margin-bottom: 20px;
+  }
+
+  &__logo {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  &__item {
+    padding: 10px 0;
+  }
+
+  &__link-header {
+    padding-bottom: 15px;
+
+    @media screen and (max-width: 575px) {
+      padding-bottom: 5px;
+    }
+  }
+
+  &__link-item {
+    padding: 15px 0;
+
+    @media screen and (max-width: 575px) {
+      padding: 5px 0;
+    }
+  }
+
+  &__link-text {
+    color: $curious-blue;
+  }
+
+  &__version-header {
+    text-transform: capitalize;
+  }
+
+  &__version-number {
+    padding-top: 5px;
+    font-size: 13px;
+    color: $dusty-gray;
+  }
+
+  &__separator {
+    margin: 15px 0;
+    width: 80px;
+    border-color: $alto;
+    border: none;
+    height: 1px;
+    background-color: $alto;
+    color: $alto;
+  }
+
+  &__about {
+    color: $dusty-gray;
+    margin-bottom: 15px;
+  }
+}
diff --git a/ui/app/components/pages/settings/info-tab/info-tab.component.js b/ui/app/components/pages/settings/info-tab/info-tab.component.js
new file mode 100644
index 000000000..72f7d835e
--- /dev/null
+++ b/ui/app/components/pages/settings/info-tab/info-tab.component.js
@@ -0,0 +1,136 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class InfoTab extends PureComponent {
+  state = {
+    version: global.platform.getVersion(),
+  }
+
+  static propTypes = {
+    tab: PropTypes.string,
+    metamask: PropTypes.object,
+    setCurrentCurrency: PropTypes.func,
+    setRpcTarget: PropTypes.func,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    warning: PropTypes.string,
+    location: PropTypes.object,
+    history: PropTypes.object,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  renderInfoLinks () {
+    const { t } = this.context
+
+    return (
+      <div className="settings-page__content-item settings-page__content-item--without-height">
+        <div className="info-tab__link-header">
+          { t('links') }
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/privacy.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('privacyMsg') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/terms.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('terms') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/attributions.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('attributions') }
+            </span>
+          </a>
+        </div>
+        <hr className="info-tab__separator" />
+        <div className="info-tab__link-item">
+          <a
+            href="https://support.metamask.io"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('supportCenter') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="https://metamask.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('visitWebSite') }
+            </span>
+          </a>
+        </div>
+        <div className="info-tab__link-item">
+          <a
+            href="mailto:help@metamask.io?subject=Feedback"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="info-tab__link-text">
+              { t('emailUs') }
+            </span>
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="settings-page__content">
+        <div className="settings-page__content-row">
+          <div className="settings-page__content-item settings-page__content-item--without-height">
+            <div className="info-tab__logo-wrapper">
+              <img
+                src="images/info-logo.png"
+                className="info-tab__logo"
+              />
+            </div>
+            <div className="info-tab__item">
+              <div className="info-tab__version-header">
+                { t('metamaskVersion') }
+              </div>
+              <div className="info-tab__version-number">
+                { this.state.version }
+              </div>
+            </div>
+            <div className="info-tab__item">
+              <div className="info-tab__about">
+                { t('builtInCalifornia') }
+              </div>
+            </div>
+          </div>
+          { this.renderInfoLinks() }
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js
deleted file mode 100644
index bd9040499..000000000
--- a/ui/app/components/pages/settings/info.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-
-class Info extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      version: global.platform.getVersion(),
-    }
-  }
-
-  renderLogo () {
-    return (
-      h('div.settings__info-logo-wrapper', [
-        h('img.settings__info-logo', { src: 'images/info-logo.png' }),
-      ])
-    )
-  }
-
-  renderInfoLinks () {
-    return (
-      h('div.settings__content-item.settings__content-item--without-height', [
-        h('div.settings__info-link-header', this.context.t('links')),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/privacy.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('privacyMsg')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/terms.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('terms')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/attributions.html',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('attributions')),
-          ]),
-        ]),
-        h('hr.settings__info-separator'),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://support.metamask.io',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('supportCenter')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            href: 'https://metamask.io/',
-            target: '_blank',
-          }, [
-            h('span.settings__info-link', this.context.t('visitWebSite')),
-          ]),
-        ]),
-        h('div.settings__info-link-item', [
-          h('a', {
-            target: '_blank',
-            href: 'mailto:help@metamask.io?subject=Feedback',
-          }, [
-            h('span.settings__info-link', this.context.t('emailUs')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  render () {
-    return (
-      h('div.settings__content', [
-        h('div.settings__content-row', [
-          h('div.settings__content-item.settings__content-item--without-height', [
-            this.renderLogo(),
-            h('div.settings__info-item', [
-              h('div.settings__info-version-header', 'MetaMask Version'),
-              h('div.settings__info-version-number', this.state.version),
-            ]),
-            h('div.settings__info-item', [
-              h(
-                'div.settings__info-about',
-                this.context.t('builtInCalifornia')
-              ),
-            ]),
-          ]),
-          this.renderInfoLinks(),
-        ]),
-      ])
-    )
-  }
-}
-
-Info.propTypes = {
-  tab: PropTypes.string,
-  metamask: PropTypes.object,
-  setCurrentCurrency: PropTypes.func,
-  setRpcTarget: PropTypes.func,
-  displayWarning: PropTypes.func,
-  revealSeedConfirmation: PropTypes.func,
-  warning: PropTypes.string,
-  location: PropTypes.object,
-  history: PropTypes.object,
-  t: PropTypes.func,
-}
-
-Info.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = Info
diff --git a/ui/app/components/pages/settings/settings-tab/index.js b/ui/app/components/pages/settings/settings-tab/index.js
new file mode 100644
index 000000000..9fdaafd3f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.js
@@ -0,0 +1 @@
+export { default } from './settings-tab.container'
diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
new file mode 100644
index 000000000..76a0cec6f
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -0,0 +1,51 @@
+.settings-tab {
+  &__error {
+    padding-bottom: 20px;
+    text-align: center;
+    color: $crimson;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__rpc-save-button {
+    align-self: flex-end;
+    padding: 5px;
+    text-transform: uppercase;
+    color: $dusty-gray;
+    cursor: pointer;
+  }
+
+  &__button--red {
+    border-color: lighten($monzo, 10%);
+    color: $monzo;
+
+    &:active {
+      background: lighten($monzo, 55%);
+      border-color: $monzo;
+    }
+
+    &:hover {
+      border-color: $monzo;
+    }
+  }
+
+  &__button--orange {
+    border-color: lighten($ecstasy, 20%);
+    color: $ecstasy;
+
+    &:active {
+      background: lighten($ecstasy, 40%);
+      border-color: $ecstasy;
+    }
+
+    &:hover {
+      border-color: $ecstasy;
+    }
+  }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
new file mode 100644
index 000000000..543bd0bcc
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -0,0 +1,359 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import infuraCurrencies from '../../../../infura-conversion.json'
+import validUrl from 'valid-url'
+import { exportAsFile } from '../../../../util'
+import SimpleDropdown from '../../../dropdowns/simple-dropdown'
+import ToggleButton from 'react-toggle-button'
+import { REVEAL_SEED_ROUTE } from '../../../../routes'
+import locales from '../../../../../../app/_locales/index.json'
+import TextField from '../../../text-field'
+import Button from '../../../button'
+
+const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
+  return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
+})
+
+const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => {
+  return {
+    displayValue: `${code.toUpperCase()} - ${name}`,
+    key: code,
+    value: code,
+  }
+})
+
+const localeOptions = locales.map(locale => {
+  return {
+    displayValue: `${locale.name}`,
+    key: locale.code,
+    value: locale.code,
+  }
+})
+
+export default class SettingsTab extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    metamask: PropTypes.object,
+    setUseBlockie: PropTypes.func,
+    setHexDataFeatureFlag: PropTypes.func,
+    setCurrentCurrency: PropTypes.func,
+    setRpcTarget: PropTypes.func,
+    displayWarning: PropTypes.func,
+    revealSeedConfirmation: PropTypes.func,
+    setFeatureFlagToBeta: PropTypes.func,
+    showResetAccountConfirmationModal: PropTypes.func,
+    warning: PropTypes.string,
+    history: PropTypes.object,
+    isMascara: PropTypes.bool,
+    updateCurrentLocale: PropTypes.func,
+    currentLocale: PropTypes.string,
+    useBlockie: PropTypes.bool,
+    sendHexData: PropTypes.bool,
+    currentCurrency: PropTypes.string,
+    conversionDate: PropTypes.number,
+  }
+
+  state = {
+    newRpc: '',
+  }
+
+  renderCurrentConversion () {
+    const { t } = this.context
+    const { currentCurrency, conversionDate, setCurrentCurrency } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('currentConversion') }</span>
+          <span className="settings-page__content-description">
+            { `Updated ${Date(conversionDate)}` }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectCurrency')}
+              options={infuraCurrencyOptions}
+              selectedOption={currentCurrency}
+              onSelect={newCurrency => setCurrentCurrency(newCurrency)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderCurrentLocale () {
+    const { t } = this.context
+    const { updateCurrentLocale, currentLocale } = this.props
+    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
+    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span className="settings-page__content-label">
+            { t('currentLanguage') }
+          </span>
+          <span className="settings-page__content-description">
+            { currentLocaleName }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <SimpleDropdown
+              placeholder={t('selectLocale')}
+              options={localeOptions}
+              selectedOption={currentLocale}
+              onSelect={async newLocale => updateCurrentLocale(newLocale)}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderNewRpcUrl () {
+    const { t } = this.context
+    const { newRpc } = this.state
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('newRPC') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <TextField
+              type="text"
+              id="new-rpc"
+              placeholder={t('newRPC')}
+              value={newRpc}
+              onChange={e => this.setState({ newRpc: e.target.value })}
+              onKeyPress={e => {
+                if (e.key === 'Enter') {
+                  this.validateRpc(newRpc)
+                }
+              }}
+              fullWidth
+              margin="none"
+            />
+            <div
+              className="settings-tab__rpc-save-button"
+              onClick={e => {
+                e.preventDefault()
+                this.validateRpc(newRpc)
+              }}
+            >
+              { t('save') }
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  validateRpc (newRpc) {
+    const { setRpcTarget, displayWarning } = this.props
+
+    if (validUrl.isWebUri(newRpc)) {
+      setRpcTarget(newRpc)
+    } else {
+      const appendedRpc = `http://${newRpc}`
+
+      if (validUrl.isWebUri(appendedRpc)) {
+        displayWarning(this.context.t('uriErrorMsg'))
+      } else {
+        displayWarning(this.context.t('invalidRPC'))
+      }
+    }
+  }
+
+  renderStateLogs () {
+    const { t } = this.context
+    const { displayWarning } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('stateLogs') }</span>
+          <span className="settings-page__content-description">
+            { t('stateLogsDescription') }
+          </span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="primary"
+              large
+              onClick={() => {
+                window.logStateString((err, result) => {
+                  if (err) {
+                    displayWarning(t('stateLogError'))
+                  } else {
+                    exportAsFile('MetaMask State Logs.json', result)
+                  }
+                })
+              }}
+            >
+              { t('downloadStateLogs') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderSeedWords () {
+    const { t } = this.context
+    const { history } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('revealSeedWords') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              onClick={event => {
+                event.preventDefault()
+                history.push(REVEAL_SEED_ROUTE)
+              }}
+            >
+              { t('revealSeedWords') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderOldUI () {
+    const { t } = this.context
+    const { setFeatureFlagToBeta } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('useOldUI') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                setFeatureFlagToBeta()
+              }}
+            >
+              { t('useOldUI') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderResetAccount () {
+    const { t } = this.context
+    const { showResetAccountConfirmationModal } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('resetAccount') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <Button
+              type="secondary"
+              large
+              className="settings-tab__button--orange"
+              onClick={event => {
+                event.preventDefault()
+                showResetAccountConfirmationModal()
+              }}
+            >
+              { t('resetAccount') }
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderBlockieOptIn () {
+    const { useBlockie, setUseBlockie } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ this.context.t('blockiesIdenticon') }</span>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={useBlockie}
+              onToggle={value => setUseBlockie(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderHexDataOptIn () {
+    const { t } = this.context
+    const { sendHexData, setHexDataFeatureFlag } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showHexData') }</span>
+          <div className="settings-page__content-description">
+            { t('showHexDataDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={sendHexData}
+              onToggle={value => setHexDataFeatureFlag(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    const { warning, isMascara } = this.props
+
+    return (
+      <div className="settings-page__content">
+        { warning && <div className="settings-tab__error">{ warning }</div> }
+        { this.renderCurrentConversion() }
+        { this.renderCurrentLocale() }
+        { this.renderNewRpcUrl() }
+        { this.renderStateLogs() }
+        { this.renderSeedWords() }
+        { !isMascara && this.renderOldUI() }
+        { this.renderResetAccount() }
+        { this.renderBlockieOptIn() }
+        { this.renderHexDataOptIn() }
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
new file mode 100644
index 000000000..665b56f5c
--- /dev/null
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -0,0 +1,59 @@
+import SettingsTab from './settings-tab.component'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import {
+  setCurrentCurrency,
+  setRpcTarget,
+  displayWarning,
+  revealSeedConfirmation,
+  setUseBlockie,
+  updateCurrentLocale,
+  setFeatureFlag,
+  showModal,
+} from '../../../../actions'
+
+const mapStateToProps = state => {
+  const { appState: { warning }, metamask } = state
+  const {
+    currentCurrency,
+    conversionDate,
+    useBlockie,
+    featureFlags: { sendHexData } = {},
+    provider = {},
+    isMascara,
+    currentLocale,
+  } = metamask
+
+  return {
+    warning,
+    isMascara,
+    currentLocale,
+    currentCurrency,
+    conversionDate,
+    useBlockie,
+    sendHexData,
+    provider,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setCurrentCurrency: currency => dispatch(setCurrentCurrency(currency)),
+    setRpcTarget: newRpc => dispatch(setRpcTarget(newRpc)),
+    displayWarning: warning => dispatch(displayWarning(warning)),
+    revealSeedConfirmation: () => dispatch(revealSeedConfirmation()),
+    setUseBlockie: value => dispatch(setUseBlockie(value)),
+    updateCurrentLocale: key => dispatch(updateCurrentLocale(key)),
+    setFeatureFlagToBeta: () => {
+      return dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+    },
+    setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
+    showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(SettingsTab)
diff --git a/ui/app/components/pages/settings/settings.component.js b/ui/app/components/pages/settings/settings.component.js
new file mode 100644
index 000000000..94a97bba1
--- /dev/null
+++ b/ui/app/components/pages/settings/settings.component.js
@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route, matchPath } from 'react-router-dom'
+import TabBar from '../../tab-bar'
+import SettingsTab from './settings-tab'
+import InfoTab from './info-tab'
+import { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } from '../../../routes'
+
+export default class SettingsPage extends PureComponent {
+  static propTypes = {
+    location: PropTypes.object,
+    history: PropTypes.object,
+    t: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  render () {
+    const { history, location } = this.props
+
+    return (
+      <div className="main-container settings-page">
+        <div className="settings-page__header">
+          <div
+            className="settings-page__close-button"
+            onClick={() => history.push(DEFAULT_ROUTE)}
+          />
+          <TabBar
+            tabs={[
+              { content: this.context.t('settings'), key: SETTINGS_ROUTE },
+              { content: this.context.t('info'), key: INFO_ROUTE },
+            ]}
+            isActive={key => matchPath(location.pathname, { path: key, exact: true })}
+            onSelect={key => history.push(key)}
+          />
+        </div>
+        <Switch>
+          <Route
+            exact
+            path={INFO_ROUTE}
+            component={InfoTab}
+          />
+          <Route
+            exact
+            path={SETTINGS_ROUTE}
+            component={SettingsTab}
+          />
+        </Switch>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
deleted file mode 100644
index 423276cf3..000000000
--- a/ui/app/components/pages/settings/settings.js
+++ /dev/null
@@ -1,408 +0,0 @@
-const { Component } = require('react')
-const { withRouter } = require('react-router-dom')
-const { compose } = require('recompose')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const infuraCurrencies = require('../../../infura-conversion.json')
-const validUrl = require('valid-url')
-const { exportAsFile } = require('../../../util')
-const SimpleDropdown = require('../../dropdowns/simple-dropdown')
-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())
-  })
-
-  return sortedCurrencies.map(({ quote: { code, name } }) => {
-    return {
-      displayValue: `${code.toUpperCase()} - ${name}`,
-      key: code,
-      value: code,
-    }
-  })
-}
-
-const getLocaleOptions = () => {
-  return locales.map((locale) => {
-    return {
-      displayValue: `${locale.name}`,
-      key: locale.code,
-      value: locale.code,
-    }
-  })
-}
-
-class Settings extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      newRpc: '',
-    }
-  }
-
-  renderBlockieOptIn () {
-    const { metamask: { useBlockie }, setUseBlockie } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('blockiesIdenticon')),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(ToggleButton, {
-            value: useBlockie,
-            onToggle: (value) => setUseBlockie(!value),
-            activeLabel: '',
-            inactiveLabel: '',
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderHexDataOptIn () {
-    const { metamask: { featureFlags: { sendHexData } }, setHexDataFeatureFlag } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('showHexData')),
-        h(
-          'div.settings__content-description',
-          this.context.t('showHexDataDescription')
-        ),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(ToggleButton, {
-            value: sendHexData,
-            onToggle: (value) => setHexDataFeatureFlag(!value),
-            activeLabel: '',
-            inactiveLabel: '',
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentConversion () {
-    const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', this.context.t('currentConversion')),
-        h('span.settings__content-description', `Updated ${Date(conversionDate)}`),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(SimpleDropdown, {
-            placeholder: this.context.t('selectCurrency'),
-            options: getInfuraCurrencyOptions(),
-            selectedOption: currentCurrency,
-            onSelect: newCurrency => setCurrentCurrency(newCurrency),
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentLocale () {
-    const { updateCurrentLocale, currentLocale } = this.props
-    const currentLocaleMeta = locales.find(locale => locale.code === currentLocale)
-    const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : ''
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', [
-        h('span', 'Current Language'),
-        h('span.settings__content-description', `${currentLocaleName}`),
-      ]),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(SimpleDropdown, {
-            placeholder: 'Select Locale',
-            options: getLocaleOptions(),
-            selectedOption: currentLocale,
-            onSelect: async (newLocale) => {
-              updateCurrentLocale(newLocale)
-            },
-          }),
-        ]),
-      ]),
-    ])
-  }
-
-  renderCurrentProvider () {
-    const { metamask: { provider = {} } } = this.props
-    let title, value, color
-
-    switch (provider.type) {
-
-      case 'mainnet':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('mainnet')
-        color = '#038789'
-        break
-
-      case 'ropsten':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('ropsten')
-        color = '#e91550'
-        break
-
-      case 'kovan':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('kovan')
-        color = '#690496'
-        break
-
-      case 'rinkeby':
-        title = this.context.t('currentNetwork')
-        value = this.context.t('rinkeby')
-        color = '#ebb33f'
-        break
-
-      default:
-        title = this.context.t('currentRpc')
-        value = provider.rpcTarget
-    }
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', title),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h('div.settings__provider-wrapper', [
-            h('div.settings__provider-icon', { style: { background: color } }),
-            h('div', value),
-          ]),
-        ]),
-      ]),
-    ])
-  }
-
-  renderNewRpcUrl () {
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', [
-          h('span', this.context.t('newRPC')),
-        ]),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h('input.settings__input', {
-              placeholder: this.context.t('newRPC'),
-              onChange: event => this.setState({ newRpc: event.target.value }),
-              onKeyPress: event => {
-                if (event.key === 'Enter') {
-                  this.validateRpc(this.state.newRpc)
-                }
-              },
-            }),
-            h('div.settings__rpc-save-button', {
-              onClick: event => {
-                event.preventDefault()
-                this.validateRpc(this.state.newRpc)
-              },
-            }, this.context.t('save')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  validateRpc (newRpc) {
-    const { setRpcTarget, displayWarning } = this.props
-
-    if (validUrl.isWebUri(newRpc)) {
-      setRpcTarget(newRpc)
-    } else {
-      const appendedRpc = `http://${newRpc}`
-
-      if (validUrl.isWebUri(appendedRpc)) {
-        displayWarning(this.context.t('uriErrorMsg'))
-      } else {
-        displayWarning(this.context.t('invalidRPC'))
-      }
-    }
-  }
-
-  renderStateLogs () {
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', [
-          h('div', this.context.t('stateLogs')),
-          h(
-            'div.settings__content-description',
-            this.context.t('stateLogsDescription')
-          ),
-        ]),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h(Button, {
-              type: 'primary',
-              large: true,
-              className: 'settings__button',
-              onClick (event) {
-                window.logStateString((err, result) => {
-                  if (err) {
-                    this.state.dispatch(actions.displayWarning(this.context.t('stateLogError')))
-                  } else {
-                    exportAsFile('MetaMask State Logs.json', result)
-                  }
-                })
-              },
-            }, this.context.t('downloadStateLogs')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderSeedWords () {
-    const { history } = this.props
-
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', this.context.t('revealSeedWords')),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h(Button, {
-              type: 'primary',
-              large: true,
-              className: 'settings__button--red',
-              onClick: event => {
-                event.preventDefault()
-                history.push(REVEAL_SEED_ROUTE)
-              },
-            }, this.context.t('revealSeedWords')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderOldUI () {
-    const { setFeatureFlagToBeta } = this.props
-
-    return (
-      h('div.settings__content-row', [
-        h('div.settings__content-item', this.context.t('useOldUI')),
-        h('div.settings__content-item', [
-          h('div.settings__content-item-col', [
-            h(Button, {
-              type: 'primary',
-              large: true,
-              className: 'settings__button--orange',
-              onClick (event) {
-                event.preventDefault()
-                setFeatureFlagToBeta()
-              },
-            }, this.context.t('useOldUI')),
-          ]),
-        ]),
-      ])
-    )
-  }
-
-  renderResetAccount () {
-    const { showResetAccountConfirmationModal } = this.props
-
-    return h('div.settings__content-row', [
-      h('div.settings__content-item', this.context.t('resetAccount')),
-      h('div.settings__content-item', [
-        h('div.settings__content-item-col', [
-          h(Button, {
-            type: 'primary',
-            large: true,
-            className: 'settings__button--orange',
-            onClick (event) {
-              event.preventDefault()
-              showResetAccountConfirmationModal()
-            },
-          }, this.context.t('resetAccount')),
-        ]),
-      ]),
-    ])
-  }
-
-  render () {
-    const { warning, isMascara } = this.props
-
-    return (
-      h('div.settings__content', [
-        warning && h('div.settings__error', warning),
-        this.renderCurrentConversion(),
-        this.renderCurrentLocale(),
-        // this.renderCurrentProvider(),
-        this.renderNewRpcUrl(),
-        this.renderStateLogs(),
-        this.renderSeedWords(),
-        !isMascara && this.renderOldUI(),
-        this.renderResetAccount(),
-        this.renderBlockieOptIn(),
-        this.renderHexDataOptIn(),
-      ])
-    )
-  }
-}
-
-Settings.propTypes = {
-  metamask: PropTypes.object,
-  setUseBlockie: PropTypes.func,
-  setHexDataFeatureFlag: PropTypes.func,
-  setCurrentCurrency: PropTypes.func,
-  setRpcTarget: PropTypes.func,
-  displayWarning: PropTypes.func,
-  revealSeedConfirmation: PropTypes.func,
-  setFeatureFlagToBeta: PropTypes.func,
-  showResetAccountConfirmationModal: PropTypes.func,
-  warning: PropTypes.string,
-  history: PropTypes.object,
-  isMascara: PropTypes.bool,
-  updateCurrentLocale: PropTypes.func,
-  currentLocale: PropTypes.string,
-  t: PropTypes.func,
-}
-
-const mapStateToProps = state => {
-  return {
-    metamask: state.metamask,
-    warning: state.appState.warning,
-    isMascara: state.metamask.isMascara,
-    currentLocale: state.metamask.currentLocale,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)),
-    setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)),
-    displayWarning: warning => dispatch(actions.displayWarning(warning)),
-    revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
-    setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
-    updateCurrentLocale: key => dispatch(actions.updateCurrentLocale(key)),
-    setFeatureFlagToBeta: () => {
-      return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
-    },
-    setHexDataFeatureFlag: (featureFlagShowState) => {
-      return dispatch(actions.setFeatureFlag('sendHexData', featureFlagShowState))
-    },
-    showResetAccountConfirmationModal: () => {
-      return dispatch(actions.showModal({ name: 'CONFIRM_RESET_ACCOUNT' }))
-    },
-  }
-}
-
-Settings.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
-)(Settings)
-- 
cgit 


From 9088fd1de49197d0e436f989c6698f2d4c36d456 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 19 Sep 2018 16:55:58 -0700
Subject: Add Current Conversion Updated string to translations

---
 ui/app/components/pages/settings/settings-tab/settings-tab.component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index 543bd0bcc..53c4f16e0 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -69,7 +69,7 @@ export default class SettingsTab extends PureComponent {
         <div className="settings-page__content-item">
           <span>{ t('currentConversion') }</span>
           <span className="settings-page__content-description">
-            { `Updated ${Date(conversionDate)}` }
+            { t('updatedWithDate', [Date(conversionDate)]) }
           </span>
         </div>
         <div className="settings-page__content-item">
-- 
cgit 


From 01166b26edc5b979e5cbc7fe76df6fbfc272bea7 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 20 Sep 2018 15:53:53 -0700
Subject: Fix translation casing

---
 ui/app/components/pages/settings/info-tab/index.scss | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/settings/info-tab/index.scss b/ui/app/components/pages/settings/info-tab/index.scss
index 00342dc5f..43ad6f652 100644
--- a/ui/app/components/pages/settings/info-tab/index.scss
+++ b/ui/app/components/pages/settings/info-tab/index.scss
@@ -33,10 +33,6 @@
     color: $curious-blue;
   }
 
-  &__version-header {
-    text-transform: capitalize;
-  }
-
   &__version-number {
     padding-top: 5px;
     font-size: 13px;
-- 
cgit 


From 13a1d4672045371f6366bf1fc48b77cb880eb4f8 Mon Sep 17 00:00:00 2001
From: HackyMiner <hackyminer@gmail.com>
Date: Sat, 29 Sep 2018 04:53:58 +0900
Subject: support editable customRPC (#5267)

* support editable customRPC #5246

* remove rpcList size restriction
---
 ui/app/components/pages/settings/settings-tab/settings-tab.component.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index 53c4f16e0..9da624f56 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -41,6 +41,7 @@ export default class SettingsTab extends PureComponent {
     setHexDataFeatureFlag: PropTypes.func,
     setCurrentCurrency: PropTypes.func,
     setRpcTarget: PropTypes.func,
+    delRpcTarget: PropTypes.func,
     displayWarning: PropTypes.func,
     revealSeedConfirmation: PropTypes.func,
     setFeatureFlagToBeta: PropTypes.func,
-- 
cgit 


From 0fa9299cd150ff81095da76352a55da4909bf812 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 19 Sep 2018 22:18:28 -0230
Subject: Add "Cancel All" button to confirm footer

---
 .../confirm-transaction-base.component.js                 | 15 +++++++++++++++
 .../confirm-transaction-base.container.js                 | 14 +++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 40d8faf50..7de147d79 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -22,6 +22,7 @@ export default class ConfirmTransactionBase extends Component {
     // Redux props
     balance: PropTypes.string,
     cancelTransaction: PropTypes.func,
+    cancelAllTransactions: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
     clearSend: PropTypes.func,
     conversionRate: PropTypes.number,
@@ -49,6 +50,7 @@ export default class ConfirmTransactionBase extends Component {
     toName: PropTypes.string,
     transactionStatus: PropTypes.string,
     txData: PropTypes.object,
+    unapprovedTxCount: PropTypes.number,
     // Component props
     action: PropTypes.string,
     contentComponent: PropTypes.node,
@@ -249,6 +251,16 @@ export default class ConfirmTransactionBase extends Component {
     onEdit({ txData, tokenData, tokenProps })
   }
 
+  handleCancelAll () {
+    const { cancelAllTransactions, history, clearConfirmTransaction } = this.props
+
+    cancelAllTransactions()
+      .then(() => {
+        clearConfirmTransaction()
+        history.push(DEFAULT_ROUTE)
+      })
+  }
+
   handleCancel () {
     const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
 
@@ -314,6 +326,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       assetImage,
       warning,
+      unapprovedTxCount,
     } = this.props
     const { submitting, submitError } = this.state
 
@@ -337,6 +350,7 @@ export default class ConfirmTransactionBase extends Component {
         dataComponent={this.renderData()}
         contentComponent={contentComponent}
         nonce={nonce}
+        unapprovedTxCount={unapprovedTxCount}
         assetImage={assetImage}
         identiconAddress={identiconAddress}
         errorMessage={errorMessage || submitError}
@@ -344,6 +358,7 @@ export default class ConfirmTransactionBase extends Component {
         warning={warning}
         disabled={!propsValid || !valid || submitting}
         onEdit={() => this.handleEdit()}
+        onCancelAll={() => this.handleCancelAll()}
         onCancel={() => this.handleCancel()}
         onSubmit={() => this.handleSubmit()}
       />
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index ae31eba17..5fbd127c3 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -8,7 +8,7 @@ import {
   clearConfirmTransaction,
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
-import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
+import { clearSend, cancelTx, cancelTxs, updateAndApproveTx, showModal } from '../../../actions'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
@@ -17,7 +17,7 @@ import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
 import { isBalanceSufficient } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
-import { addressSlicer } from '../../../util'
+import { addressSlicer, valuesFor } from '../../../util'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -53,6 +53,7 @@ const mapStateToProps = (state, props) => {
     selectedAddress,
     selectedAddressTxList,
     assetImages,
+    unapprovedTxs,
   } = metamask
   const assetImage = assetImages[txParamsToAddress]
   const { balance } = accounts[selectedAddress]
@@ -67,6 +68,8 @@ const mapStateToProps = (state, props) => {
   const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
   const transactionStatus = transaction ? transaction.status : ''
 
+  const unapprovedTxCount = valuesFor(unapprovedTxs).length
+
   return {
     balance,
     fromAddress,
@@ -90,6 +93,8 @@ const mapStateToProps = (state, props) => {
     transactionStatus,
     nonce,
     assetImage,
+    unapprovedTxs,
+    unapprovedTxCount,
   }
 }
 
@@ -107,6 +112,7 @@ const mapDispatchToProps = dispatch => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
     cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
+    cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
     sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
   }
 }
@@ -156,8 +162,9 @@ const getValidateEditGas = ({ balance, conversionRate, txData }) => {
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { balance, conversionRate, txData } = stateProps
+  const { balance, conversionRate, txData, unapprovedTxs } = stateProps
   const {
+    cancelAllTransactions: dispatchCancelAllTransactions,
     showCustomizeGasModal: dispatchShowCustomizeGasModal,
     updateGasAndCalculate: dispatchUpdateGasAndCalculate,
     ...otherDispatchProps
@@ -174,6 +181,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
       onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
       validate: validateEditGas,
     }),
+    cancelAllTransactions: () => dispatchCancelAllTransactions(valuesFor(unapprovedTxs)),
   }
 }
 
-- 
cgit 


From 2e35c05f148a823d04b5a0009afd45b3fcd1d3fa Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 24 Sep 2018 02:37:19 -0230
Subject: Confirm rejecting multiple transactions with modal

---
 .../confirm-transaction-base.component.js              | 18 ++++++++++++++----
 .../confirm-transaction-base.container.js              |  3 +++
 2 files changed, 17 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 7de147d79..707dad62d 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -44,6 +44,7 @@ export default class ConfirmTransactionBase extends Component {
     sendTransaction: PropTypes.func,
     showCustomizeGasModal: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
+    showRejectTransactionsConfirmationModal: PropTypes.func,
     toAddress: PropTypes.string,
     tokenData: PropTypes.object,
     tokenProps: PropTypes.object,
@@ -252,13 +253,22 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleCancelAll () {
-    const { cancelAllTransactions, history, clearConfirmTransaction } = this.props
+    const {
+      cancelAllTransactions,
+      clearConfirmTransaction,
+      history,
+      showRejectTransactionsConfirmationModal,
+      unapprovedTxCount,
+    } = this.props
 
-    cancelAllTransactions()
-      .then(() => {
+    showRejectTransactionsConfirmationModal({
+      unapprovedTxCount,
+      async onSubmit () {
+        await cancelAllTransactions()
         clearConfirmTransaction()
         history.push(DEFAULT_ROUTE)
-      })
+      },
+    })
   }
 
   handleCancel () {
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 5fbd127c3..2e7677a45 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -111,6 +111,9 @@ const mapDispatchToProps = dispatch => {
     updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
+    showRejectTransactionsConfirmationModal: ({ onSubmit, unapprovedTxCount }) => {
+      return dispatch(showModal({ name: 'REJECT_TRANSACTIONS', onSubmit, unapprovedTxCount }))
+    },
     cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
     cancelAllTransactions: (txList) => dispatch(cancelTxs(txList)),
     sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
-- 
cgit 


From 65ba018aad5c09cf5f5b96df559cb543e4a9e980 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 1 Oct 2018 14:04:50 -0230
Subject: Only use current network txs when calculating "Reject All"

---
 .../confirm-transaction-base/confirm-transaction-base.container.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 2e7677a45..b34067686 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -53,6 +53,7 @@ const mapStateToProps = (state, props) => {
     selectedAddress,
     selectedAddressTxList,
     assetImages,
+    network,
     unapprovedTxs,
   } = metamask
   const assetImage = assetImages[txParamsToAddress]
@@ -68,7 +69,11 @@ const mapStateToProps = (state, props) => {
   const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
   const transactionStatus = transaction ? transaction.status : ''
 
-  const unapprovedTxCount = valuesFor(unapprovedTxs).length
+  const currentNetworkUnapprovedTxs = R.filter(
+    ({ metamaskNetworkId }) => metamaskNetworkId === network,
+    valuesFor(unapprovedTxs),
+  )
+  const unapprovedTxCount = currentNetworkUnapprovedTxs.length
 
   return {
     balance,
-- 
cgit 


From 7dd1254424180e58c07a2dcbd2449415ea2bdb40 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Fri, 5 Oct 2018 18:13:27 -0230
Subject: Fix markup for inline instances of `PageContainer`s

---
 .../confirm-add-suggested-token.component.js       | 54 ++++++++++------------
 .../confirm-add-token.component.js                 | 46 +++++++++---------
 ui/app/components/pages/keychains/reveal-seed.js   | 28 +++++------
 3 files changed, 64 insertions(+), 64 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
index c24e1e0ea..ee5d6fa64 100644
--- a/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
+++ b/ui/app/components/pages/confirm-add-suggested-token/confirm-add-suggested-token.component.js
@@ -90,35 +90,31 @@ export default class ConfirmAddSuggestedToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              removeSuggestedTokens()
-              .then(() => {
-                history.push(DEFAULT_ROUTE)
-              })
-          }}
-          >
-            { this.context.t('cancel') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              addToken(pendingToken)
-                .then(() => {
-                  removeSuggestedTokens()
-                  .then(() => {
-                    history.push(DEFAULT_ROUTE)
-                  })
-                })
-            }}
-          >
-            { this.context.t('addToken') }
-          </Button>
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                removeSuggestedTokens()
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('cancel') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addToken(pendingToken)
+                  .then(() => removeSuggestedTokens())
+                  .then(() => history.push(DEFAULT_ROUTE))
+              }}
+            >
+              { this.context.t('addToken') }
+            </Button>
+          </header>
         </div>
       </div>
     )
diff --git a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
index 3dcc8cda9..d3fec79d7 100644
--- a/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
+++ b/ui/app/components/pages/confirm-add-token/confirm-add-token.component.js
@@ -86,28 +86,30 @@ export default class ConfirmAddToken extends Component {
           </div>
         </div>
         <div className="page-container__footer">
-          <Button
-            type="default"
-            large
-            className="page-container__footer-button"
-            onClick={() => history.push(ADD_TOKEN_ROUTE)}
-          >
-            { this.context.t('back') }
-          </Button>
-          <Button
-            type="primary"
-            large
-            className="page-container__footer-button"
-            onClick={() => {
-              addTokens(pendingTokens)
-                .then(() => {
-                  clearPendingTokens()
-                  history.push(DEFAULT_ROUTE)
-                })
-            }}
-          >
-            { this.context.t('addTokens') }
-          </Button>
+          <header>
+            <Button
+              type="default"
+              large
+              className="page-container__footer-button"
+              onClick={() => history.push(ADD_TOKEN_ROUTE)}
+            >
+              { this.context.t('back') }
+            </Button>
+            <Button
+              type="primary"
+              large
+              className="page-container__footer-button"
+              onClick={() => {
+                addTokens(pendingTokens)
+                  .then(() => {
+                    clearPendingTokens()
+                    history.push(DEFAULT_ROUTE)
+                  })
+              }}
+            >
+              { this.context.t('addTokens') }
+            </Button>
+          </header>
         </div>
       </div>
     )
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7782b541c..32557066f 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -108,19 +108,21 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       h('.page-container__footer', [
-        h(Button, {
-          type: 'default',
-          large: true,
-          className: 'page-container__footer-button',
-          onClick: () => this.props.history.push(DEFAULT_ROUTE),
-        }, this.context.t('cancel')),
-        h(Button, {
-          type: 'primary',
-          large: true,
-          className: 'page-container__footer-button',
-          onClick: event => this.handleSubmit(event),
-          disabled: this.state.password === '',
-        }, this.context.t('next')),
+        h('header', [
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: () => this.props.history.push(DEFAULT_ROUTE),
+          }, this.context.t('cancel')),
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'page-container__footer-button',
+            onClick: event => this.handleSubmit(event),
+            disabled: this.state.password === '',
+          }, this.context.t('next')),
+        ]),
       ])
     )
   }
-- 
cgit 


From ccab4ee1a408d93f38765e9b6ef3dc33a18befa9 Mon Sep 17 00:00:00 2001
From: Bruno Barbieri <bruno.barbieri@consensys.net>
Date: Wed, 10 Oct 2018 01:12:43 -0400
Subject: tests - integration - Add Drizzle tests (#5467)

* added drizzle app for testing

* working

* clean up

* clean up script

* make build step required

* add drizzle-tests to .eslintignore

* clean up drizzle run script

* lint

* use truffle unbox

* undo eslintignore changes

* revert change

* dont use global

* dont need this steps

* use the new account flow

* restore package-lock.json
---
 ui/app/components/pages/create-account/new-account.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index c9e4b113c..94a5fa487 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -49,7 +49,7 @@ class NewAccountCreateForm extends Component {
         h(Button, {
           type: 'primary',
           large: true,
-          className:'new-account-create-form__button',
+          className: 'new-account-create-form__button',
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
-- 
cgit 


From 5cde74fe88cd473b6a6979686687c1b1d967d6ca Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Thu, 11 Oct 2018 13:36:24 -0230
Subject: Update Zendesk links for new subdomain

---
 .../token-list-placeholder/token-list-placeholder.component.js          | 2 +-
 ui/app/components/pages/create-account/import-account/index.js          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/app/components/pages')

diff --git a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
index 1611f817b..20f550927 100644
--- a/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/components/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@@ -15,7 +15,7 @@ export default class TokenListPlaceholder extends Component {
         </div>
         <a
           className="token-list-placeholder__link"
-          href="https://consensys.zendesk.com/hc/en-us/articles/360004135092"
+          href="https://metamask.zendesk.com/hc/en-us/articles/360015489031"
           target="_blank"
           rel="noopener noreferrer"
         >
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index e2e973af9..48d8f8838 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -46,7 +46,7 @@ AccountImportSubview.prototype.render = function () {
           },
           onClick: () => {
             global.platform.openWindow({
-              url: 'https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI',
+              url: 'https://metamask.zendesk.com/hc/en-us/articles/360015289932',
             })
           },
         }, this.context.t('here')),
-- 
cgit