From 8c4d58aa4508e3d54c3f69847347e78d09c63b97 Mon Sep 17 00:00:00 2001
From: Bruno <brunobar79@gmail.com>
Date: Sun, 10 Jun 2018 03:52:32 -0400
Subject: initial trezor support

---
 .../pages/create-account/connect-hardware.js       | 234 +++++++++++++++++++++
 ui/app/components/pages/create-account/index.js    |  25 ++-
 .../components/pages/create-account/new-account.js |   2 +
 3 files changed, 260 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/components/pages/create-account/connect-hardware.js

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
new file mode 100644
index 000000000..37b7414b3
--- /dev/null
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -0,0 +1,234 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const genAccountLink = require('../../../../lib/account-link.js')
+const log = require('loglevel')
+const { DEFAULT_ROUTE } = require('../../../routes')
+
+class ConnectHardwareForm extends Component {
+  constructor (props, context) {
+    super(props)
+    this.state = {
+      error: null,
+      response: null,
+      btnText: 'Connect to Trezor', // Test
+      selectedAccount: '',
+      accounts: [],
+    }
+  }
+
+  connectToTrezor () {
+    if (this.state.accounts.length) {
+      return null
+    }
+    this.setState({ btnText: 'Connecting...' })
+    this.getPage()
+  }
+
+  getPage (page = 1) {
+    this.props
+      .connectHardware('trezor', page)
+      .then(accounts => {
+        if (accounts.length) {
+          this.setState({ accounts: accounts })
+        }
+      })
+      .catch(e => {
+        this.setState({ btnText: 'Connect to Trezor' })
+      })
+  }
+
+  unlockAccount () {
+    if (this.state.selectedAccount === '') {
+      return Promise.reject({ error: 'You need to select an account!' })
+    }
+    log.debug('should unlock account ', this.state.selectedAccount)
+    return this.props.unlockTrezorAccount(this.state.selectedAccount)
+  }
+
+  handleRadioChange = e => {
+    log.debug('Selected account with index ', e.target.value)
+
+    this.setState({
+      selectedAccount: e.target.value,
+      error: null,
+    })
+  }
+
+  renderAccounts () {
+    if (!this.state.accounts.length) {
+      return null
+    }
+    log.debug('ACCOUNTS : ', this.state.accounts)
+    log.debug('SELECTED?', this.state.selectedAccount)
+
+    return h('div.hw-account-list', [
+      h('div.hw-account-list__title_wrapper', [
+        h('div.hw-account-list__title', {}, ['Select an Address']),
+        h('div.hw-account-list__device', {}, ['Trezor - ETH']),
+      ]),
+      this.state.accounts.map((a, i) => {
+        return h('div.hw-account-list__item', { key: a.address }, [
+          h('span.hw-account-list__item__index', a.index + 1),
+          h('div.hw-account-list__item__radio', [
+            h('input', {
+              type: 'radio',
+              name: 'selectedAccount',
+              id: `address-${i}`,
+              value: a.index,
+              onChange: this.handleRadioChange,
+            }),
+            h(
+              'label.hw-account-list__item__label',
+              {
+                htmlFor: `address-${i}`,
+              },
+              `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
+            ),
+          ]),
+          h('span.hw-account-list__item__balance', `${a.balance} ETH`),
+          h(
+            'a.hw-account-list__item__link',
+            {
+              href: genAccountLink(a.address, this.props.network),
+              target: '_blank',
+              title: this.context.t('etherscanView'),
+            },
+            h('img', { src: 'images/popout.svg' })
+          ),
+        ])
+      }),
+    ])
+  }
+
+  renderPagination () {
+    if (!this.state.accounts.length) {
+      return null
+    }
+    return h('div.hw-list-pagination', [
+      h(
+        'button.btn-primary.hw-list-pagination__button',
+        {
+          onClick: () => this.getPage(-1),
+        },
+        '< Prev'
+      ),
+
+      h(
+        'button.btn-primary.hw-list-pagination__button',
+        {
+          onClick: () => this.getPage(),
+        },
+        'Next >'
+      ),
+    ])
+  }
+
+  renderButtons () {
+    if (!this.state.accounts.length) {
+      return null
+    }
+    const { history } = this.props
+
+    return h('div.new-account-create-form__buttons', {}, [
+      h(
+        'button.btn-default.btn--large.new-account-create-form__button',
+        {
+          onClick: () => history.push(DEFAULT_ROUTE),
+        },
+        [this.context.t('cancel')]
+      ),
+
+      h(
+        'button.btn-primary.btn--large.new-account-create-form__button',
+        {
+          onClick: () => {
+            this.unlockAccount(this.state.selectedAccount)
+              .then(() => history.push(DEFAULT_ROUTE))
+              .catch(e => {
+                this.setState({ error: e.error })
+              })
+          },
+        },
+        [this.context.t('unlock')]
+      ),
+    ])
+  }
+
+  renderError () {
+    return this.state.error
+      ? h('span.error', { style: { marginBottom: 40 } }, this.state.error)
+      : null
+  }
+
+  renderConnectButton () {
+    return !this.state.accounts.length
+      ? h(
+          'button.btn-primary.btn--large',
+          { onClick: () => this.connectToTrezor(), style: { margin: 12 } },
+          this.state.btnText
+        )
+      : null
+  }
+
+  render () {
+    return h('div.new-account-create-form', [
+      this.renderError(),
+      this.renderConnectButton(),
+      this.renderAccounts(),
+      this.renderPagination(),
+      this.renderButtons(),
+    ])
+  }
+}
+
+ConnectHardwareForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  connectHardware: PropTypes.func,
+  unlockTrezorAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+  network: PropTypes.string,
+}
+
+const mapStateToProps = state => {
+  const {
+    metamask: { network, selectedAddress, identities = {} },
+  } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    toCoinbase: address =>
+      dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
+    hideModal: () => dispatch(actions.hideModal()),
+    connectHardware: (deviceName, page) => {
+      return dispatch(actions.connectHardware(deviceName, page))
+    },
+    unlockTrezorAccount: index => {
+      return dispatch(actions.unlockTrezorAccount(index))
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+  }
+}
+
+ConnectHardwareForm.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(
+  ConnectHardwareForm
+)
diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
index 6e3b93742..69a4db80a 100644
--- a/ui/app/components/pages/create-account/index.js
+++ b/ui/app/components/pages/create-account/index.js
@@ -8,7 +8,12 @@ const { getCurrentViewContext } = require('../../../selectors')
 const classnames = require('classnames')
 const NewAccountCreateForm = require('./new-account')
 const NewAccountImportForm = require('./import-account')
-const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')
+const ConnectHardwareForm = require('./connect-hardware')
+const {
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  CONNECT_HARDWARE_ROUTE, 
+} = require('../../../routes')
 
 class CreateAccountPage extends Component {
   renderTabs () {
@@ -36,6 +41,19 @@ class CreateAccountPage extends Component {
       }, [
         this.context.t('import'),
       ]),
+      h(
+        'div.new-account__tabs__tab',
+        {
+          className: classnames('new-account__tabs__tab', {
+            'new-account__tabs__selected': matchPath(location.pathname, {
+              path: CONNECT_HARDWARE_ROUTE,
+              exact: true,
+            }),
+          }),
+          onClick: () => history.push(CONNECT_HARDWARE_ROUTE),
+        },
+        this.context.t('connect')
+      ),
     ])
   }
 
@@ -57,6 +75,11 @@ class CreateAccountPage extends Component {
             path: IMPORT_ACCOUNT_ROUTE,
             component: NewAccountImportForm,
           }),
+          h(Route, {
+            exact: true,
+            path: CONNECT_HARDWARE_ROUTE,
+            component: ConnectHardwareForm,
+          }),
         ]),
       ]),
     ])
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 9c94990e0..402b8f03b 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -62,6 +62,7 @@ class NewAccountCreateForm extends Component {
 NewAccountCreateForm.propTypes = {
   hideModal: PropTypes.func,
   showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
   createAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
@@ -92,6 +93,7 @@ const mapDispatchToProps = dispatch => {
         })
     },
     showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
   }
 }
 
-- 
cgit 


From d1880073f678dbdc52e07e62ec66c39eea5062a6 Mon Sep 17 00:00:00 2001
From: Bruno <brunobar79@gmail.com>
Date: Sun, 10 Jun 2018 21:10:22 -0400
Subject: balances working

---
 .../pages/create-account/connect-hardware.js         | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index 37b7414b3..6f1e03550 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -6,6 +6,7 @@ const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
 const log = require('loglevel')
 const { DEFAULT_ROUTE } = require('../../../routes')
+const { formatBalance } = require('../../../util')
 
 class ConnectHardwareForm extends Component {
   constructor (props, context) {
@@ -57,10 +58,22 @@ class ConnectHardwareForm extends Component {
     })
   }
 
+  getBalance (address) {
+    // Get the balance
+    log.debug('getBalance : ', address)
+    const { accounts } = this.props
+    const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
+    log.debug('balanceValue : ', balanceValue)
+    const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+    log.debug('formattedBalance : ', formattedBalance)
+    return formattedBalance
+  }
+
   renderAccounts () {
     if (!this.state.accounts.length) {
       return null
     }
+
     log.debug('ACCOUNTS : ', this.state.accounts)
     log.debug('SELECTED?', this.state.selectedAccount)
 
@@ -70,6 +83,7 @@ class ConnectHardwareForm extends Component {
         h('div.hw-account-list__device', {}, ['Trezor - ETH']),
       ]),
       this.state.accounts.map((a, i) => {
+
         return h('div.hw-account-list__item', { key: a.address }, [
           h('span.hw-account-list__item__index', a.index + 1),
           h('div.hw-account-list__item__radio', [
@@ -88,7 +102,7 @@ class ConnectHardwareForm extends Component {
               `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
             ),
           ]),
-          h('span.hw-account-list__item__balance', `${a.balance} ETH`),
+          h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
           h(
             'a.hw-account-list__item__link',
             {
@@ -194,16 +208,18 @@ ConnectHardwareForm.propTypes = {
   history: PropTypes.object,
   t: PropTypes.func,
   network: PropTypes.string,
+  accounts: PropTypes.object,
 }
 
 const mapStateToProps = state => {
   const {
-    metamask: { network, selectedAddress, identities = {} },
+    metamask: { network, selectedAddress, identities = {}, accounts = [] },
   } = state
   const numberOfExistingAccounts = Object.keys(identities).length
 
   return {
     network,
+    accounts,
     address: selectedAddress,
     numberOfExistingAccounts,
   }
-- 
cgit 


From 8763ea898e7838d08315063b0e2181405a2ae3d5 Mon Sep 17 00:00:00 2001
From: Bruno <brunobar79@gmail.com>
Date: Wed, 13 Jun 2018 01:32:13 -0400
Subject: move TrezorKeyring to its own package

---
 ui/app/components/pages/create-account/connect-hardware.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index 6f1e03550..152a4f275 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -25,10 +25,10 @@ class ConnectHardwareForm extends Component {
       return null
     }
     this.setState({ btnText: 'Connecting...' })
-    this.getPage()
+    this.getPage(1)
   }
 
-  getPage (page = 1) {
+  getPage (page) {
     this.props
       .connectHardware('trezor', page)
       .then(accounts => {
@@ -133,7 +133,7 @@ class ConnectHardwareForm extends Component {
       h(
         'button.btn-primary.hw-list-pagination__button',
         {
-          onClick: () => this.getPage(),
+          onClick: () => this.getPage(1),
         },
         'Next >'
       ),
-- 
cgit 


From 75581ceebe719e102b177dc20f3b9e232c48e8a4 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 21 Jun 2018 14:57:45 -0230
Subject: Show all errors on account creation screen.

---
 ui/app/components/pages/create-account/import-account/json.js        | 2 +-
 ui/app/components/pages/create-account/import-account/private-key.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(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 1dc2ba534..955b45d74 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -114,7 +114,7 @@ class JsonImportSubview extends Component {
           setSelectedAddress(firstAddress)
         }
       })
-      .catch(err => displayWarning(err))
+      .catch(err => displayWarning(err.message || err))
   }
 }
 
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 5df3777da..0d8ff0db6 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
@@ -104,5 +104,5 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
         setSelectedAddress(firstAddress)
       }
     })
-    .catch(err => displayWarning(err))
+    .catch(err => displayWarning(err.message || err))
 }
-- 
cgit 


From 03f17d910a17abe3fe8c8dae2ef38a66bb86f222 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 21 Jun 2018 15:53:26 -0230
Subject: Check that error is defined in import-account error catch.

---
 ui/app/components/pages/create-account/import-account/json.js        | 2 +-
 ui/app/components/pages/create-account/import-account/private-key.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(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 955b45d74..c9d14be5f 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -114,7 +114,7 @@ class JsonImportSubview extends Component {
           setSelectedAddress(firstAddress)
         }
       })
-      .catch(err => displayWarning(err.message || err))
+      .catch(err => err && displayWarning(err.message || err))
   }
 }
 
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 0d8ff0db6..c38c39206 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
@@ -104,5 +104,5 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
         setSelectedAddress(firstAddress)
       }
     })
-    .catch(err => displayWarning(err.message || err))
+    .catch(err => err && displayWarning(err.message || err))
 }
-- 
cgit 


From f19ffaf08d49f33c395a25faf3eeb6b08d5285a4 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Mon, 2 Jul 2018 15:16:05 -0400
Subject: move hardcoded strings to localization file

---
 .../pages/create-account/connect-hardware.js       | 24 +++++++---------------
 1 file changed, 7 insertions(+), 17 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index 152a4f275..d022d7487 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -4,7 +4,6 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const genAccountLink = require('../../../../lib/account-link.js')
-const log = require('loglevel')
 const { DEFAULT_ROUTE } = require('../../../routes')
 const { formatBalance } = require('../../../util')
 
@@ -14,7 +13,7 @@ class ConnectHardwareForm extends Component {
     this.state = {
       error: null,
       response: null,
-      btnText: 'Connect to Trezor', // Test
+      btnText: context.t('connectToTrezor'),
       selectedAccount: '',
       accounts: [],
     }
@@ -24,7 +23,7 @@ class ConnectHardwareForm extends Component {
     if (this.state.accounts.length) {
       return null
     }
-    this.setState({ btnText: 'Connecting...' })
+    this.setState({ btnText: this.context.t('connecting')})
     this.getPage(1)
   }
 
@@ -37,21 +36,18 @@ class ConnectHardwareForm extends Component {
         }
       })
       .catch(e => {
-        this.setState({ btnText: 'Connect to Trezor' })
+        this.setState({ btnText: this.context.t('connectToTrezor') })
       })
   }
 
   unlockAccount () {
     if (this.state.selectedAccount === '') {
-      return Promise.reject({ error: 'You need to select an account!' })
+      return Promise.reject({ error: this.context.t('accountSelectionRequired') })
     }
-    log.debug('should unlock account ', this.state.selectedAccount)
     return this.props.unlockTrezorAccount(this.state.selectedAccount)
   }
 
   handleRadioChange = e => {
-    log.debug('Selected account with index ', e.target.value)
-
     this.setState({
       selectedAccount: e.target.value,
       error: null,
@@ -60,12 +56,9 @@ class ConnectHardwareForm extends Component {
 
   getBalance (address) {
     // Get the balance
-    log.debug('getBalance : ', address)
     const { accounts } = this.props
     const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
-    log.debug('balanceValue : ', balanceValue)
     const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
-    log.debug('formattedBalance : ', formattedBalance)
     return formattedBalance
   }
 
@@ -74,12 +67,9 @@ class ConnectHardwareForm extends Component {
       return null
     }
 
-    log.debug('ACCOUNTS : ', this.state.accounts)
-    log.debug('SELECTED?', this.state.selectedAccount)
-
     return h('div.hw-account-list', [
       h('div.hw-account-list__title_wrapper', [
-        h('div.hw-account-list__title', {}, ['Select an Address']),
+        h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
         h('div.hw-account-list__device', {}, ['Trezor - ETH']),
       ]),
       this.state.accounts.map((a, i) => {
@@ -127,7 +117,7 @@ class ConnectHardwareForm extends Component {
         {
           onClick: () => this.getPage(-1),
         },
-        '< Prev'
+        `< ${this.context.t('prev')}`
       ),
 
       h(
@@ -135,7 +125,7 @@ class ConnectHardwareForm extends Component {
         {
           onClick: () => this.getPage(1),
         },
-        'Next >'
+        `${this.context.t('next')} >`
       ),
     ])
   }
-- 
cgit 


From a8f745f9fe74751b87f500af3857b66d4c80f45e Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Mon, 2 Jul 2018 18:49:33 -0400
Subject: eslint --fix .

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

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

diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
index 6e3b93742..5681e43a9 100644
--- a/ui/app/components/pages/create-account/index.js
+++ b/ui/app/components/pages/create-account/index.js
@@ -42,7 +42,7 @@ class CreateAccountPage extends Component {
   render () {
     return h('div.new-account', {}, [
       h('div.new-account__header', [
-        h('div.new-account__title', this.context.t('newAccount') ),
+        h('div.new-account__title', this.context.t('newAccount')),
         this.renderTabs(),
       ]),
       h('div.new-account__form', [
-- 
cgit 


From d126887bc3a795d27f54a4ca5178503e522d41d9 Mon Sep 17 00:00:00 2001
From: Sara Reynolds <sarareynolds@Saras-MacBook-Pro-2.local>
Date: Tue, 3 Jul 2018 09:47:30 -0700
Subject: fixes 4663

---
 ui/app/components/pages/create-account/import-account/json.js        | 1 +
 ui/app/components/pages/create-account/import-account/private-key.js | 1 +
 2 files changed, 2 insertions(+)

(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 1dc2ba534..453fceb83 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -109,6 +109,7 @@ class JsonImportSubview extends Component {
       .then(({ selectedAddress }) => {
         if (selectedAddress) {
           history.push(DEFAULT_ROUTE)
+          displayWarning(null)
         } else {
           displayWarning('Error importing account.')
           setSelectedAddress(firstAddress)
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 5df3777da..7a470c2ad 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
@@ -99,6 +99,7 @@ PrivateKeyImportView.prototype.createNewKeychain = function () {
     .then(({ selectedAddress }) => {
       if (selectedAddress) {
         history.push(DEFAULT_ROUTE)
+        displayWarning(null)
       } else {
         displayWarning('Error importing account.')
         setSelectedAddress(firstAddress)
-- 
cgit 


From 9d3f2435e58e2454506ea1a5f7b85452a10edffa Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Tue, 3 Jul 2018 15:46:15 -0400
Subject: lint fix

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

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

diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js
index ad2081315..d3de1ea01 100644
--- a/ui/app/components/pages/create-account/index.js
+++ b/ui/app/components/pages/create-account/index.js
@@ -12,7 +12,7 @@ const ConnectHardwareForm = require('./connect-hardware')
 const {
   NEW_ACCOUNT_ROUTE,
   IMPORT_ACCOUNT_ROUTE,
-  CONNECT_HARDWARE_ROUTE, 
+  CONNECT_HARDWARE_ROUTE,
 } = require('../../../routes')
 
 class CreateAccountPage extends Component {
-- 
cgit 


From f262f0ea64e1e803d8dcd9a31f92cffe81d27b3d Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Fri, 22 Jun 2018 14:41:18 -0230
Subject: Update import from seed screen on new ui.

---
 .../pages/keychains/restore-vault-new.js           | 189 +++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 ui/app/components/pages/keychains/restore-vault-new.js

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

diff --git a/ui/app/components/pages/keychains/restore-vault-new.js b/ui/app/components/pages/keychains/restore-vault-new.js
new file mode 100644
index 000000000..ef38faf1e
--- /dev/null
+++ b/ui/app/components/pages/keychains/restore-vault-new.js
@@ -0,0 +1,189 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {
+  createNewVaultAndRestore,
+  unMarkPasswordForgotten,
+} from '../../../actions'
+import { DEFAULT_ROUTE } from '../../../routes'
+import TextField from '../../text-field'
+
+class RestoreVaultPageNew extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    warning: PropTypes.string,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: null,
+    passwordError: null,
+    confirmPasswordError: null,
+  }
+
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
+
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = null
+
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      seedPhraseError = this.context.t('seedPhraseReq')
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
+
+  handlePasswordChange (password) {
+    const { confirmPassword } = this.state
+    let confirmPasswordError = null
+    let passwordError = null
+
+    if (password && password.length < 8) {
+      passwordError = this.context.t('passwordNotLongEnough')
+    }
+
+    if (confirmPassword && password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ password, passwordError, confirmPasswordError })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { password } = this.state
+    let confirmPasswordError = null
+
+    if (password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
+    }
+
+    this.setState({ confirmPassword, confirmPasswordError })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      leaveImportSeedScreenState,
+      history,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(() => history.push(DEFAULT_ROUTE))
+  }
+
+  hasError () {
+    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
+    return passwordError || confirmPasswordError || seedPhraseError
+  }
+
+  render () {
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      seedPhraseError,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+    const { t } = this.context
+    const { isLoading } = this.props
+    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
+
+    return (
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.history.goBack()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              { this.context.t('restoreAccountWithSeed') }
+            </div>
+            <div className="import-account__selector-label">
+              { this.context.t('secretPhrase') }
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.handleSeedPhraseChange(e.target.value)}
+                value={this.state.seedPhrase}
+                placeholder={this.context.t('separateEachWord')}
+              />
+            </div>
+            <span className="error">
+              { seedPhraseError }
+            </span>
+            <TextField
+              id="password"
+              label={t('newPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.password}
+              onChange={event => this.handlePasswordChange(event.target.value)}
+              error={passwordError}
+              autoComplete="new-password"
+              margin="normal"
+              largeLabel
+            />
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.confirmPassword}
+              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+              error={confirmPasswordError}
+              autoComplete="confirm-password"
+              margin="normal"
+              largeLabel
+            />
+            <button
+              className="first-time-flow__button"
+              onClick={() => !disabled && this.onClick()}
+              disabled={disabled}
+            >
+              {this.context.t('restore')}
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+RestoreVaultPageNew.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default connect(
+  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+  })
+)(RestoreVaultPageNew)
-- 
cgit 


From f006cbf2ceb8f9519b58656e893e55762c877b8a Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 5 Jul 2018 14:39:55 -0230
Subject: Delete old restore vault file.

---
 .../pages/keychains/restore-vault-new.js           | 189 -------------
 ui/app/components/pages/keychains/restore-vault.js | 313 +++++++++++----------
 2 files changed, 162 insertions(+), 340 deletions(-)
 delete mode 100644 ui/app/components/pages/keychains/restore-vault-new.js

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

diff --git a/ui/app/components/pages/keychains/restore-vault-new.js b/ui/app/components/pages/keychains/restore-vault-new.js
deleted file mode 100644
index ef38faf1e..000000000
--- a/ui/app/components/pages/keychains/restore-vault-new.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import {
-  createNewVaultAndRestore,
-  unMarkPasswordForgotten,
-} from '../../../actions'
-import { DEFAULT_ROUTE } from '../../../routes'
-import TextField from '../../text-field'
-
-class RestoreVaultPageNew extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    warning: PropTypes.string,
-    createNewVaultAndRestore: PropTypes.func.isRequired,
-    leaveImportSeedScreenState: PropTypes.func,
-    history: PropTypes.object,
-    isLoading: PropTypes.bool,
-  };
-
-  state = {
-    seedPhrase: '',
-    password: '',
-    confirmPassword: '',
-    seedPhraseError: null,
-    passwordError: null,
-    confirmPasswordError: null,
-  }
-
-  parseSeedPhrase = (seedPhrase) => {
-    return seedPhrase
-      .match(/\w+/g)
-      .join(' ')
-  }
-
-  handleSeedPhraseChange (seedPhrase) {
-    let seedPhraseError = null
-
-    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
-      seedPhraseError = this.context.t('seedPhraseReq')
-    }
-
-    this.setState({ seedPhrase, seedPhraseError })
-  }
-
-  handlePasswordChange (password) {
-    const { confirmPassword } = this.state
-    let confirmPasswordError = null
-    let passwordError = null
-
-    if (password && password.length < 8) {
-      passwordError = this.context.t('passwordNotLongEnough')
-    }
-
-    if (confirmPassword && password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ password, passwordError, confirmPasswordError })
-  }
-
-  handleConfirmPasswordChange (confirmPassword) {
-    const { password } = this.state
-    let confirmPasswordError = null
-
-    if (password !== confirmPassword) {
-      confirmPasswordError = this.context.t('passwordsDontMatch')
-    }
-
-    this.setState({ confirmPassword, confirmPasswordError })
-  }
-
-  onClick = () => {
-    const { password, seedPhrase } = this.state
-    const {
-      createNewVaultAndRestore,
-      leaveImportSeedScreenState,
-      history,
-    } = this.props
-
-    leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
-      .then(() => history.push(DEFAULT_ROUTE))
-  }
-
-  hasError () {
-    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
-    return passwordError || confirmPasswordError || seedPhraseError
-  }
-
-  render () {
-    const {
-      seedPhrase,
-      password,
-      confirmPassword,
-      seedPhraseError,
-      passwordError,
-      confirmPasswordError,
-    } = this.state
-    const { t } = this.context
-    const { isLoading } = this.props
-    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
-
-    return (
-      <div className="first-view-main-wrapper">
-        <div className="first-view-main">
-          <div className="import-account">
-            <a
-              className="import-account__back-button"
-              onClick={e => {
-                e.preventDefault()
-                this.props.history.goBack()
-              }}
-              href="#"
-            >
-              {`< Back`}
-            </a>
-            <div className="import-account__title">
-              { this.context.t('restoreAccountWithSeed') }
-            </div>
-            <div className="import-account__selector-label">
-              { this.context.t('secretPhrase') }
-            </div>
-            <div className="import-account__input-wrapper">
-              <label className="import-account__input-label">Wallet Seed</label>
-              <textarea
-                className="import-account__secret-phrase"
-                onChange={e => this.handleSeedPhraseChange(e.target.value)}
-                value={this.state.seedPhrase}
-                placeholder={this.context.t('separateEachWord')}
-              />
-            </div>
-            <span className="error">
-              { seedPhraseError }
-            </span>
-            <TextField
-              id="password"
-              label={t('newPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.password}
-              onChange={event => this.handlePasswordChange(event.target.value)}
-              error={passwordError}
-              autoComplete="new-password"
-              margin="normal"
-              largeLabel
-            />
-            <TextField
-              id="confirm-password"
-              label={t('confirmPassword')}
-              type="password"
-              className="first-time-flow__input"
-              value={this.state.confirmPassword}
-              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
-              error={confirmPasswordError}
-              autoComplete="confirm-password"
-              margin="normal"
-              largeLabel
-            />
-            <button
-              className="first-time-flow__button"
-              onClick={() => !disabled && this.onClick()}
-              disabled={disabled}
-            >
-              {this.context.t('restore')}
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-RestoreVaultPageNew.contextTypes = {
-  t: PropTypes.func,
-}
-
-export default connect(
-  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
-  dispatch => ({
-    leaveImportSeedScreenState: () => {
-      dispatch(unMarkPasswordForgotten())
-    },
-    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
-  })
-)(RestoreVaultPageNew)
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
index 33575bfbb..d90a33e49 100644
--- a/ui/app/components/pages/keychains/restore-vault.js
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -1,178 +1,189 @@
-const { withRouter } = require('react-router-dom')
-const PropTypes = require('prop-types')
-const { compose } = require('recompose')
-const PersistentForm = require('../../../../lib/persistent-form')
-const connect = require('../../../metamask-connect')
-const h = require('react-hyperscript')
-const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const log = require('loglevel')
-
-class RestoreVaultPage extends PersistentForm {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      error: null,
-    }
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import {
+  createNewVaultAndRestore,
+  unMarkPasswordForgotten,
+} from '../../../actions'
+import { DEFAULT_ROUTE } from '../../../routes'
+import TextField from '../../text-field'
+
+class RestoreVaultPage extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
   }
 
-  createOnEnter (event) {
-    if (event.key === 'Enter') {
-      this.createNewVaultAndRestore()
-    }
+  static propTypes = {
+    warning: PropTypes.string,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    leaveImportSeedScreenState: PropTypes.func,
+    history: PropTypes.object,
+    isLoading: PropTypes.bool,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+    seedPhraseError: null,
+    passwordError: null,
+    confirmPasswordError: null,
   }
 
-  cancel () {
-    this.props.unMarkPasswordForgotten()
-      .then(this.props.history.push(DEFAULT_ROUTE))
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
   }
 
-  createNewVaultAndRestore () {
-    this.setState({ error: null })
+  handleSeedPhraseChange (seedPhrase) {
+    let seedPhraseError = null
+
+    if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+      seedPhraseError = this.context.t('seedPhraseReq')
+    }
+
+    this.setState({ seedPhrase, seedPhraseError })
+  }
 
-    // check password
-    var passwordBox = document.getElementById('password-box')
-    var password = passwordBox.value
-    var passwordConfirmBox = document.getElementById('password-box-confirm')
-    var passwordConfirm = passwordConfirmBox.value
+  handlePasswordChange (password) {
+    const { confirmPassword } = this.state
+    let confirmPasswordError = null
+    let passwordError = null
 
-    if (password.length < 8) {
-      this.setState({ error: 'Password not long enough' })
-      return
+    if (password && password.length < 8) {
+      passwordError = this.context.t('passwordNotLongEnough')
     }
 
-    if (password !== passwordConfirm) {
-      this.setState({ error: 'Passwords don\'t match' })
-      return
+    if (confirmPassword && password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
     }
 
-    // check seed
-    var seedBox = document.querySelector('textarea.twelve-word-phrase')
-    var seed = seedBox.value.trim()
-    if (seed.split(' ').length !== 12) {
-      this.setState({ error: 'Seed phrases are 12 words long' })
-      return
+    this.setState({ password, passwordError, confirmPasswordError })
+  }
+
+  handleConfirmPasswordChange (confirmPassword) {
+    const { password } = this.state
+    let confirmPasswordError = null
+
+    if (password !== confirmPassword) {
+      confirmPasswordError = this.context.t('passwordsDontMatch')
     }
 
-    // submit
-    this.props.createNewVaultAndRestore(password, seed)
-      .then(() => this.props.history.push(DEFAULT_ROUTE))
-      .catch(({ message }) => {
-        this.setState({ error: message })
-        log.error(message)
-      })
+    this.setState({ confirmPassword, confirmPasswordError })
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      leaveImportSeedScreenState,
+      history,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(() => history.push(DEFAULT_ROUTE))
+  }
+
+  hasError () {
+    const { passwordError, confirmPasswordError, seedPhraseError } = this.state
+    return passwordError || confirmPasswordError || seedPhraseError
   }
 
   render () {
-    const { error } = this.state
-    this.persistentFormParentId = 'restore-vault-form'
+    const {
+      seedPhrase,
+      password,
+      confirmPassword,
+      seedPhraseError,
+      passwordError,
+      confirmPasswordError,
+    } = this.state
+    const { t } = this.context
+    const { isLoading } = this.props
+    const disabled = !seedPhrase || !password || !confirmPassword || isLoading || this.hasError()
 
     return (
-      h('.initialize-screen.flex-column.flex-center.flex-grow', [
-
-        h('h3.flex-center.text-transform-uppercase', {
-          style: {
-            background: '#EBEBEB',
-            color: '#AEAEAE',
-            marginBottom: 24,
-            width: '100%',
-            fontSize: '20px',
-            padding: 6,
-          },
-        }, [
-          this.props.t('restoreVault'),
-        ]),
-
-        // wallet seed entry
-        h('h3', 'Wallet Seed'),
-        h('textarea.twelve-word-phrase.letter-spacey', {
-          dataset: {
-            persistentFormId: 'wallet-seed',
-          },
-          placeholder: this.props.t('secretPhrase'),
-        }),
-
-        // password
-        h('input.large-input.letter-spacey', {
-          type: 'password',
-          id: 'password-box',
-          placeholder: this.props.t('newPassword8Chars'),
-          dataset: {
-            persistentFormId: 'password',
-          },
-          style: {
-            width: 260,
-            marginTop: 12,
-          },
-        }),
-
-        // confirm password
-        h('input.large-input.letter-spacey', {
-          type: 'password',
-          id: 'password-box-confirm',
-          placeholder: this.props.t('confirmPassword'),
-          onKeyPress: this.createOnEnter.bind(this),
-          dataset: {
-            persistentFormId: 'password-confirmation',
-          },
-          style: {
-            width: 260,
-            marginTop: 16,
-          },
-        }),
-
-        error && (
-          h('span.error.in-progress-notification', error)
-        ),
-
-        // submit
-        h('.flex-row.flex-space-between', {
-          style: {
-            marginTop: 30,
-            width: '50%',
-          },
-        }, [
-
-          // cancel
-          h('button.primary', {
-            onClick: () => this.cancel(),
-          }, this.props.t('cancel')),
-
-          // submit
-          h('button.primary', {
-            onClick: this.createNewVaultAndRestore.bind(this),
-          }, this.props.t('ok')),
-
-        ]),
-      ])
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.history.goBack()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              { this.context.t('restoreAccountWithSeed') }
+            </div>
+            <div className="import-account__selector-label">
+              { this.context.t('secretPhrase') }
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.handleSeedPhraseChange(e.target.value)}
+                value={this.state.seedPhrase}
+                placeholder={this.context.t('separateEachWord')}
+              />
+            </div>
+            <span className="error">
+              { seedPhraseError }
+            </span>
+            <TextField
+              id="password"
+              label={t('newPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.password}
+              onChange={event => this.handlePasswordChange(event.target.value)}
+              error={passwordError}
+              autoComplete="new-password"
+              margin="normal"
+              largeLabel
+            />
+            <TextField
+              id="confirm-password"
+              label={t('confirmPassword')}
+              type="password"
+              className="first-time-flow__input"
+              value={this.state.confirmPassword}
+              onChange={event => this.handleConfirmPasswordChange(event.target.value)}
+              error={confirmPasswordError}
+              autoComplete="confirm-password"
+              margin="normal"
+              largeLabel
+            />
+            <button
+              className="first-time-flow__button"
+              onClick={() => !disabled && this.onClick()}
+              disabled={disabled}
+            >
+              {this.context.t('restore')}
+            </button>
+          </div>
+        </div>
+      </div>
     )
   }
 }
 
-RestoreVaultPage.propTypes = {
-  history: PropTypes.object,
-}
-
-const mapStateToProps = state => {
-  const { appState: { warning, forgottenPassword } } = state
-
-  return {
-    warning,
-    forgottenPassword,
-  }
+RestoreVaultPage.contextTypes = {
+  t: PropTypes.func,
 }
 
-const mapDispatchToProps = dispatch => {
-  return {
-    createNewVaultAndRestore: (password, seed) => {
-      return dispatch(createNewVaultAndRestore(password, seed))
+export default connect(
+  ({ appState: { warning, isLoading } }) => ({ warning, isLoading }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
     },
-    unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
-  }
-}
-
-module.exports = compose(
-  withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+  })
 )(RestoreVaultPage)
-- 
cgit 


From 313090efcc5200c56373cf312052217f1a1340ef Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 5 Jul 2018 16:11:41 -0400
Subject: added message for non-chrome browsers

---
 .../pages/create-account/connect-hardware.js       | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index d022d7487..c51b4c773 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -177,10 +177,35 @@ class ConnectHardwareForm extends Component {
       : null
   }
 
+  renderUnsupportedBrowser () {
+    return (
+      [h('div.hw-unsupported-browser', [
+        h('h3.hw-unsupported-browser__title', {}, 'Bummer! Your Browser is not supported...'),
+        h('p.hw-unsupported-browser__msg', {}, 'You need to use Metamask on Google Chrome in order to connect to your TREZOR device.'),
+      ]),
+      h(
+        'button.btn-primary.btn--large',
+        { onClick: () => global.platform.openWindow({
+          url: 'https://google.com/chrome',
+        }), style: { margin: 12 } },
+        'Download Google Chrome'
+      )]
+    )
+  }
+
+  renderConnectScreen () {
+    const isChrome = window.navigator.userAgent.search('Chrome') !== -1
+    if (isChrome) {
+      return this.renderConnectButton()
+    } else {
+      return this.renderUnsupportedBrowser()
+    }
+  }
+
   render () {
     return h('div.new-account-create-form', [
       this.renderError(),
-      this.renderConnectButton(),
+      this.renderConnectScreen(),
       this.renderAccounts(),
       this.renderPagination(),
       this.renderButtons(),
-- 
cgit 


From ba5cde0995f956fb22825d604fe7d664677abaaa Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 5 Jul 2018 17:04:36 -0400
Subject: move strings to localization file

---
 .../pages/create-account/connect-hardware.js       | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
index c51b4c773..1e4ee38e3 100644
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ b/ui/app/components/pages/create-account/connect-hardware.js
@@ -179,17 +179,18 @@ class ConnectHardwareForm extends Component {
 
   renderUnsupportedBrowser () {
     return (
-      [h('div.hw-unsupported-browser', [
-        h('h3.hw-unsupported-browser__title', {}, 'Bummer! Your Browser is not supported...'),
-        h('p.hw-unsupported-browser__msg', {}, 'You need to use Metamask on Google Chrome in order to connect to your TREZOR device.'),
-      ]),
-      h(
-        'button.btn-primary.btn--large',
-        { onClick: () => global.platform.openWindow({
-          url: 'https://google.com/chrome',
-        }), style: { margin: 12 } },
-        'Download Google Chrome'
-      )]
+      [
+        h('div.hw-unsupported-browser', [
+          h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
+          h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
+        ]),
+        h(
+          'button.btn-primary.btn--large',
+          { onClick: () => global.platform.openWindow({
+            url: 'https://google.com/chrome',
+          }), style: { margin: 12 } },
+          this.context.t('downloadGoogleChrome')
+        )]
     )
   }
 
-- 
cgit 


From 6c2730f24300449010bd3552d4d746bcb5dd176a Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 5 Jul 2018 17:45:28 -0400
Subject: Refactor UI

---
 .../pages/create-account/connect-hardware.js       | 266 ---------------------
 .../connect-hardware/account-list.js               | 137 +++++++++++
 .../connect-hardware/connect-screen.js             |  60 +++++
 .../pages/create-account/connect-hardware/index.js | 131 ++++++++++
 4 files changed, 328 insertions(+), 266 deletions(-)
 delete mode 100644 ui/app/components/pages/create-account/connect-hardware.js
 create mode 100644 ui/app/components/pages/create-account/connect-hardware/account-list.js
 create mode 100644 ui/app/components/pages/create-account/connect-hardware/connect-screen.js
 create mode 100644 ui/app/components/pages/create-account/connect-hardware/index.js

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

diff --git a/ui/app/components/pages/create-account/connect-hardware.js b/ui/app/components/pages/create-account/connect-hardware.js
deleted file mode 100644
index 1e4ee38e3..000000000
--- a/ui/app/components/pages/create-account/connect-hardware.js
+++ /dev/null
@@ -1,266 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const genAccountLink = require('../../../../lib/account-link.js')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const { formatBalance } = require('../../../util')
-
-class ConnectHardwareForm extends Component {
-  constructor (props, context) {
-    super(props)
-    this.state = {
-      error: null,
-      response: null,
-      btnText: context.t('connectToTrezor'),
-      selectedAccount: '',
-      accounts: [],
-    }
-  }
-
-  connectToTrezor () {
-    if (this.state.accounts.length) {
-      return null
-    }
-    this.setState({ btnText: this.context.t('connecting')})
-    this.getPage(1)
-  }
-
-  getPage (page) {
-    this.props
-      .connectHardware('trezor', page)
-      .then(accounts => {
-        if (accounts.length) {
-          this.setState({ accounts: accounts })
-        }
-      })
-      .catch(e => {
-        this.setState({ btnText: this.context.t('connectToTrezor') })
-      })
-  }
-
-  unlockAccount () {
-    if (this.state.selectedAccount === '') {
-      return Promise.reject({ error: this.context.t('accountSelectionRequired') })
-    }
-    return this.props.unlockTrezorAccount(this.state.selectedAccount)
-  }
-
-  handleRadioChange = e => {
-    this.setState({
-      selectedAccount: e.target.value,
-      error: null,
-    })
-  }
-
-  getBalance (address) {
-    // Get the balance
-    const { accounts } = this.props
-    const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
-    const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
-    return formattedBalance
-  }
-
-  renderAccounts () {
-    if (!this.state.accounts.length) {
-      return null
-    }
-
-    return h('div.hw-account-list', [
-      h('div.hw-account-list__title_wrapper', [
-        h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
-        h('div.hw-account-list__device', {}, ['Trezor - ETH']),
-      ]),
-      this.state.accounts.map((a, i) => {
-
-        return h('div.hw-account-list__item', { key: a.address }, [
-          h('span.hw-account-list__item__index', a.index + 1),
-          h('div.hw-account-list__item__radio', [
-            h('input', {
-              type: 'radio',
-              name: 'selectedAccount',
-              id: `address-${i}`,
-              value: a.index,
-              onChange: this.handleRadioChange,
-            }),
-            h(
-              'label.hw-account-list__item__label',
-              {
-                htmlFor: `address-${i}`,
-              },
-              `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
-            ),
-          ]),
-          h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
-          h(
-            'a.hw-account-list__item__link',
-            {
-              href: genAccountLink(a.address, this.props.network),
-              target: '_blank',
-              title: this.context.t('etherscanView'),
-            },
-            h('img', { src: 'images/popout.svg' })
-          ),
-        ])
-      }),
-    ])
-  }
-
-  renderPagination () {
-    if (!this.state.accounts.length) {
-      return null
-    }
-    return h('div.hw-list-pagination', [
-      h(
-        'button.btn-primary.hw-list-pagination__button',
-        {
-          onClick: () => this.getPage(-1),
-        },
-        `< ${this.context.t('prev')}`
-      ),
-
-      h(
-        'button.btn-primary.hw-list-pagination__button',
-        {
-          onClick: () => this.getPage(1),
-        },
-        `${this.context.t('next')} >`
-      ),
-    ])
-  }
-
-  renderButtons () {
-    if (!this.state.accounts.length) {
-      return null
-    }
-    const { history } = this.props
-
-    return h('div.new-account-create-form__buttons', {}, [
-      h(
-        'button.btn-default.btn--large.new-account-create-form__button',
-        {
-          onClick: () => history.push(DEFAULT_ROUTE),
-        },
-        [this.context.t('cancel')]
-      ),
-
-      h(
-        'button.btn-primary.btn--large.new-account-create-form__button',
-        {
-          onClick: () => {
-            this.unlockAccount(this.state.selectedAccount)
-              .then(() => history.push(DEFAULT_ROUTE))
-              .catch(e => {
-                this.setState({ error: e.error })
-              })
-          },
-        },
-        [this.context.t('unlock')]
-      ),
-    ])
-  }
-
-  renderError () {
-    return this.state.error
-      ? h('span.error', { style: { marginBottom: 40 } }, this.state.error)
-      : null
-  }
-
-  renderConnectButton () {
-    return !this.state.accounts.length
-      ? h(
-          'button.btn-primary.btn--large',
-          { onClick: () => this.connectToTrezor(), style: { margin: 12 } },
-          this.state.btnText
-        )
-      : null
-  }
-
-  renderUnsupportedBrowser () {
-    return (
-      [
-        h('div.hw-unsupported-browser', [
-          h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
-          h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
-        ]),
-        h(
-          'button.btn-primary.btn--large',
-          { onClick: () => global.platform.openWindow({
-            url: 'https://google.com/chrome',
-          }), style: { margin: 12 } },
-          this.context.t('downloadGoogleChrome')
-        )]
-    )
-  }
-
-  renderConnectScreen () {
-    const isChrome = window.navigator.userAgent.search('Chrome') !== -1
-    if (isChrome) {
-      return this.renderConnectButton()
-    } else {
-      return this.renderUnsupportedBrowser()
-    }
-  }
-
-  render () {
-    return h('div.new-account-create-form', [
-      this.renderError(),
-      this.renderConnectScreen(),
-      this.renderAccounts(),
-      this.renderPagination(),
-      this.renderButtons(),
-    ])
-  }
-}
-
-ConnectHardwareForm.propTypes = {
-  hideModal: PropTypes.func,
-  showImportPage: PropTypes.func,
-  showConnectPage: PropTypes.func,
-  connectHardware: PropTypes.func,
-  unlockTrezorAccount: PropTypes.func,
-  numberOfExistingAccounts: PropTypes.number,
-  history: PropTypes.object,
-  t: PropTypes.func,
-  network: PropTypes.string,
-  accounts: PropTypes.object,
-}
-
-const mapStateToProps = state => {
-  const {
-    metamask: { network, selectedAddress, identities = {}, accounts = [] },
-  } = state
-  const numberOfExistingAccounts = Object.keys(identities).length
-
-  return {
-    network,
-    accounts,
-    address: selectedAddress,
-    numberOfExistingAccounts,
-  }
-}
-
-const mapDispatchToProps = dispatch => {
-  return {
-    toCoinbase: address =>
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
-    hideModal: () => dispatch(actions.hideModal()),
-    connectHardware: (deviceName, page) => {
-      return dispatch(actions.connectHardware(deviceName, page))
-    },
-    unlockTrezorAccount: index => {
-      return dispatch(actions.unlockTrezorAccount(index))
-    },
-    showImportPage: () => dispatch(actions.showImportPage()),
-    showConnectPage: () => dispatch(actions.showConnectPage()),
-  }
-}
-
-ConnectHardwareForm.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(
-  ConnectHardwareForm
-)
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
new file mode 100644
index 000000000..598865ad8
--- /dev/null
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -0,0 +1,137 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const genAccountLink = require('../../../../lib/account-link.js')
+const { DEFAULT_ROUTE } = require('../../../routes')
+const { formatBalance } = require('../../../util')
+
+export default class AccountList extends Component {
+    constructor (props, context) {
+        super(props)
+    }
+
+    getBalance (address) {
+        // Get the balance
+        const { accounts } = this.props
+        const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
+        const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+        return formattedBalance
+    }
+
+    renderAccounts () {
+        if (!this.props.accounts.length) {
+        return null
+        }
+
+        return h('div.hw-account-list', [
+        h('div.hw-account-list__title_wrapper', [
+            h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
+            h('div.hw-account-list__device', {}, ['Trezor - ETH']),
+        ]),
+        this.props.accounts.map((a, i) => {
+
+            return h('div.hw-account-list__item', { key: a.address }, [
+            h('span.hw-account-list__item__index', a.index + 1),
+            h('div.hw-account-list__item__radio', [
+                h('input', {
+                    type: 'radio',
+                    name: 'selectedAccount',
+                    id: `address-${i}`,
+                    value: a.index,
+                    onChange: (e) => this.props.onAccountChange(e.target.value),
+                }),
+                h(
+                'label.hw-account-list__item__label',
+                {
+                    htmlFor: `address-${i}`,
+                },
+                `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
+                ),
+            ]),
+            h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
+            h(
+                'a.hw-account-list__item__link',
+                {
+                href: genAccountLink(a.address, this.props.network),
+                target: '_blank',
+                title: this.context.t('etherscanView'),
+                },
+                h('img', { src: 'images/popout.svg' })
+            ),
+            ])
+        }),
+        ])
+    }
+
+  renderPagination () {
+    if (!this.state.accounts.length) {
+      return null
+    }
+    return h('div.hw-list-pagination', [
+      h(
+        'button.btn-primary.hw-list-pagination__button',
+        {
+          onClick: () => this.props.getPage(-1),
+        },
+        `< ${this.context.t('prev')}`
+      ),
+
+      h(
+        'button.btn-primary.hw-list-pagination__button',
+        {
+          onClick: () => this.props.getPage(1),
+        },
+        `${this.context.t('next')} >`
+      ),
+    ])
+  }
+
+  renderButtons () {
+    if (!this.state.accounts.length) {
+      return null
+    }
+    const { history } = this.props
+
+    return h('div.new-account-create-form__buttons', {}, [
+      h(
+        'button.btn-default.btn--large.new-account-create-form__button',
+        {
+          onClick: () => history.push(DEFAULT_ROUTE),
+        },
+        [this.context.t('cancel')]
+      ),
+
+      h(
+        'button.btn-primary.btn--large.new-account-create-form__button',
+        {
+          onClick: () => {
+            this.unlockAccount(this.state.selectedAccount)
+              .then(() => history.push(DEFAULT_ROUTE))
+              .catch(e => {
+                this.setState({ error: e.error })
+              })
+          },
+        },
+        [this.context.t('unlock')]
+      ),
+    ])
+  }
+
+  render () {
+      return null
+  }
+
+}
+
+
+AccountList.propTypes = {
+    accounts: PropTypes.object.isRequired,
+    onAccountChange: PropTypes.func.isRequired,
+    getPage: PropTypes.func.isRequired,
+    network: PropTypes.string,
+    history: PropTypes.object,
+}
+
+AccountList.contextTypes = {
+    t: PropTypes.func,
+}
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
new file mode 100644
index 000000000..1b064a15c
--- /dev/null
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -0,0 +1,60 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+
+export default class ConnectScreen extends Component {
+    constructor (props, context) {
+        super(props)
+    }
+
+    connectToTrezor = () => {
+        if (this.props.connectToTrezor) {
+            this.props.connectToTrezor()
+        }
+    }
+
+    renderUnsupportedBrowser () {
+        return (
+            [
+            h('div.hw-unsupported-browser', [
+                h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
+                h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
+            ]),
+            h(
+                'button.btn-primary.btn--large',
+                { onClick: () => global.platform.openWindow({
+                url: 'https://google.com/chrome',
+                }), style: { margin: 12 } },
+                this.context.t('downloadGoogleChrome')
+            )]
+        )
+    }
+
+    renderConnectButton () {
+        return !this.state.accounts.length
+          ? h(
+              'button.btn-primary.btn--large',
+              { onClick: this.connectToTrezor, style: { margin: 12 } },
+              this.props.btnText
+            )
+          : null
+      }
+
+    render () {
+        const isChrome = window.navigator.userAgent.search('Chrome') !== -1
+        if (isChrome) {
+            return this.renderConnectButton()
+        } else {
+            return this.renderUnsupportedBrowser()
+        }
+    }
+}
+
+ConnectScreen.propTypes = {
+    connectToTrezor: PropTypes.func.isRequired,
+    btnText: PropTypes.string,
+}
+
+ConnectScreen.contextTypes = {
+    t: PropTypes.func,
+}
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
new file mode 100644
index 000000000..04e69162f
--- /dev/null
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -0,0 +1,131 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const ConnectScreen = require('./connect-screen')
+const AccountList = require('./account-list')
+
+class ConnectHardwareForm extends Component {
+  constructor (props, context) {
+    super(props)
+    this.state = {
+      error: null,
+      response: null,
+      btnText: context.t('connectToTrezor'),
+      selectedAccount: '',
+      accounts: [],
+    }
+  }
+
+  connectToTrezor = () => {
+    if (this.state.accounts.length) {
+      return null
+    }
+    this.setState({ btnText: this.context.t('connecting')})
+    this.getPage(1)
+  }
+
+  onAccountChange = (account) => {
+    this.setState({selectedAccount: account, error: null})
+  }
+
+  getPage = (page) => {
+    this.props
+      .connectHardware('trezor', page)
+      .then(accounts => {
+        if (accounts.length) {
+          this.setState({ accounts: accounts })
+        }
+      })
+      .catch(e => {
+        this.setState({ btnText: this.context.t('connectToTrezor') })
+      })
+  }
+
+  unlockAccount () {
+    if (this.state.selectedAccount === '') {
+      return Promise.reject({ error: this.context.t('accountSelectionRequired') })
+    }
+    return this.props.unlockTrezorAccount(this.state.selectedAccount)
+  }
+
+
+  renderError () {
+    return this.state.error
+      ? h('span.error', { style: { marginBottom: 40 } }, this.state.error)
+      : null
+  }
+
+  renderContent () {
+    if (!this.state.accounts.length) {
+      return h(ConnectScreen, {
+        connectToTrezor: this.connectToTrezor,
+        btnText: this.state.btnText,
+      })
+    }
+
+    return h(AccountList, {
+      accounts: this.state.accounts,
+      onAccountChange: this.onAccountChange,
+      network: this.props.network,
+      getPage: this.getPage,
+      history: this.props.history,
+    })
+  }
+
+  render () {
+    return h('div.new-account-create-form', [
+      this.renderError(),
+      this.renderContent(),
+    ])
+  }
+}
+
+ConnectHardwareForm.propTypes = {
+  hideModal: PropTypes.func,
+  showImportPage: PropTypes.func,
+  showConnectPage: PropTypes.func,
+  connectHardware: PropTypes.func,
+  unlockTrezorAccount: PropTypes.func,
+  numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
+  t: PropTypes.func,
+  network: PropTypes.string,
+  accounts: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const {
+    metamask: { network, selectedAddress, identities = {}, accounts = [] },
+  } = state
+  const numberOfExistingAccounts = Object.keys(identities).length
+
+  return {
+    network,
+    accounts,
+    address: selectedAddress,
+    numberOfExistingAccounts,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    connectHardware: (deviceName, page) => {
+      return dispatch(actions.connectHardware(deviceName, page))
+    },
+    unlockTrezorAccount: index => {
+      return dispatch(actions.unlockTrezorAccount(index))
+    },
+    showImportPage: () => dispatch(actions.showImportPage()),
+    showConnectPage: () => dispatch(actions.showConnectPage()),
+  }
+}
+
+ConnectHardwareForm.contextTypes = {
+  t: PropTypes.func,
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(
+  ConnectHardwareForm
+)
-- 
cgit 


From 6b2511f94f436a30c6c683f9da2c3142d9a6461c Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 5 Jul 2018 20:59:31 -0400
Subject: UI refactor

---
 .../connect-hardware/account-list.js               | 111 ++++++++++-----------
 .../connect-hardware/connect-screen.js             |  51 +++++-----
 .../pages/create-account/connect-hardware/index.js |  41 ++++++--
 3 files changed, 106 insertions(+), 97 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 598865ad8..77e0af3ac 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
@@ -1,11 +1,10 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
-const genAccountLink = require('../../../../lib/account-link.js')
-const { DEFAULT_ROUTE } = require('../../../routes')
-const { formatBalance } = require('../../../util')
+const genAccountLink = require('../../../../../lib/account-link.js')
+const { formatBalance } = require('../../../../util')
 
-export default class AccountList extends Component {
+class AccountList extends Component {
     constructor (props, context) {
         super(props)
     }
@@ -19,54 +18,48 @@ export default class AccountList extends Component {
     }
 
     renderAccounts () {
-        if (!this.props.accounts.length) {
-        return null
-        }
-
         return h('div.hw-account-list', [
-        h('div.hw-account-list__title_wrapper', [
-            h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
-            h('div.hw-account-list__device', {}, ['Trezor - ETH']),
-        ]),
-        this.props.accounts.map((a, i) => {
+            h('div.hw-account-list__title_wrapper', [
+                h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
+                h('div.hw-account-list__device', {}, ['Trezor - ETH']),
+            ]),
+            this.props.accounts.map((a, i) => {
 
-            return h('div.hw-account-list__item', { key: a.address }, [
-            h('span.hw-account-list__item__index', a.index + 1),
-            h('div.hw-account-list__item__radio', [
-                h('input', {
-                    type: 'radio',
-                    name: 'selectedAccount',
-                    id: `address-${i}`,
-                    value: a.index,
-                    onChange: (e) => this.props.onAccountChange(e.target.value),
-                }),
+                return h('div.hw-account-list__item', { key: a.address }, [
+                h('span.hw-account-list__item__index', a.index + 1),
+                h('div.hw-account-list__item__radio', [
+                    h('input', {
+                        type: 'radio',
+                        name: 'selectedAccount',
+                        id: `address-${i}`,
+                        value: a.index,
+                        onChange: (e) => this.props.onAccountChange(e.target.value),
+                        checked: this.props.selectedAccount === a.index.toString(),
+                    }),
+                    h(
+                    'label.hw-account-list__item__label',
+                    {
+                        htmlFor: `address-${i}`,
+                    },
+                    `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
+                    ),
+                ]),
+                h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
                 h(
-                'label.hw-account-list__item__label',
-                {
-                    htmlFor: `address-${i}`,
-                },
-                `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
+                    'a.hw-account-list__item__link',
+                    {
+                    href: genAccountLink(a.address, this.props.network),
+                    target: '_blank',
+                    title: this.context.t('etherscanView'),
+                    },
+                    h('img', { src: 'images/popout.svg' })
                 ),
-            ]),
-            h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
-            h(
-                'a.hw-account-list__item__link',
-                {
-                href: genAccountLink(a.address, this.props.network),
-                target: '_blank',
-                title: this.context.t('etherscanView'),
-                },
-                h('img', { src: 'images/popout.svg' })
-            ),
-            ])
-        }),
+                ])
+            }),
         ])
     }
 
   renderPagination () {
-    if (!this.state.accounts.length) {
-      return null
-    }
     return h('div.hw-list-pagination', [
       h(
         'button.btn-primary.hw-list-pagination__button',
@@ -87,30 +80,19 @@ export default class AccountList extends Component {
   }
 
   renderButtons () {
-    if (!this.state.accounts.length) {
-      return null
-    }
-    const { history } = this.props
-
     return h('div.new-account-create-form__buttons', {}, [
       h(
         'button.btn-default.btn--large.new-account-create-form__button',
         {
-          onClick: () => history.push(DEFAULT_ROUTE),
+          onClick: this.props.onCancel.bind(this),
         },
         [this.context.t('cancel')]
       ),
 
       h(
-        'button.btn-primary.btn--large.new-account-create-form__button',
+        `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
         {
-          onClick: () => {
-            this.unlockAccount(this.state.selectedAccount)
-              .then(() => history.push(DEFAULT_ROUTE))
-              .catch(e => {
-                this.setState({ error: e.error })
-              })
-          },
+          onClick: this.props.onUnlockAccount.bind(this),
         },
         [this.context.t('unlock')]
       ),
@@ -118,20 +100,29 @@ export default class AccountList extends Component {
   }
 
   render () {
-      return null
+    return h('div', {}, [
+        this.renderAccounts(),
+        this.renderPagination(),
+        this.renderButtons(),
+    ])
   }
 
 }
 
 
 AccountList.propTypes = {
-    accounts: PropTypes.object.isRequired,
+    accounts: PropTypes.array.isRequired,
     onAccountChange: PropTypes.func.isRequired,
     getPage: PropTypes.func.isRequired,
     network: PropTypes.string,
+    selectedAccount: PropTypes.string,
     history: PropTypes.object,
+    onUnlockAccount: PropTypes.func,
+    onCancel: PropTypes.func,
 }
 
 AccountList.contextTypes = {
     t: PropTypes.func,
 }
+
+module.exports = AccountList
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 1b064a15c..ec6a11b40 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
@@ -2,51 +2,43 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 
-export default class ConnectScreen extends Component {
+class ConnectScreen extends Component {
     constructor (props, context) {
         super(props)
     }
 
-    connectToTrezor = () => {
-        if (this.props.connectToTrezor) {
-            this.props.connectToTrezor()
-        }
-    }
-
     renderUnsupportedBrowser () {
         return (
-            [
-            h('div.hw-unsupported-browser', [
-                h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
-                h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
-            ]),
-            h(
-                'button.btn-primary.btn--large',
-                { onClick: () => global.platform.openWindow({
-                url: 'https://google.com/chrome',
-                }), style: { margin: 12 } },
-                this.context.t('downloadGoogleChrome')
-            )]
+            h('div', {}, [
+                h('div.hw-unsupported-browser', [
+                    h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
+                    h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
+                ]),
+                h(
+                    'button.btn-primary.btn--large',
+                    { onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                    }), style: { margin: 12 } },
+                    this.context.t('downloadGoogleChrome')
+                ),
+            ])
         )
     }
 
     renderConnectButton () {
-        return !this.state.accounts.length
-          ? h(
-              'button.btn-primary.btn--large',
-              { onClick: this.connectToTrezor, style: { margin: 12 } },
-              this.props.btnText
-            )
-          : null
+        return h(
+                    'button.btn-primary.btn--large',
+                    { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } },
+                    this.props.btnText
+                )
       }
 
     render () {
         const isChrome = window.navigator.userAgent.search('Chrome') !== -1
         if (isChrome) {
             return this.renderConnectButton()
-        } else {
-            return this.renderUnsupportedBrowser()
         }
+        return this.renderUnsupportedBrowser()
     }
 }
 
@@ -58,3 +50,6 @@ ConnectScreen.propTypes = {
 ConnectScreen.contextTypes = {
     t: PropTypes.func,
 }
+
+module.exports = ConnectScreen
+
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 04e69162f..22c54d28c 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -2,9 +2,10 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
-const actions = require('../../../actions')
+const actions = require('../../../../actions')
 const ConnectScreen = require('./connect-screen')
 const AccountList = require('./account-list')
+const { DEFAULT_ROUTE } = require('../../../../routes')
 
 class ConnectHardwareForm extends Component {
   constructor (props, context) {
@@ -13,7 +14,7 @@ class ConnectHardwareForm extends Component {
       error: null,
       response: null,
       btnText: context.t('connectToTrezor'),
-      selectedAccount: '',
+      selectedAccount: null,
       accounts: [],
     }
   }
@@ -23,11 +24,11 @@ class ConnectHardwareForm extends Component {
       return null
     }
     this.setState({ btnText: this.context.t('connecting')})
-    this.getPage(1)
+    this.getPage(0)
   }
 
   onAccountChange = (account) => {
-    this.setState({selectedAccount: account, error: null})
+    this.setState({selectedAccount: account.toString(), error: null})
   }
 
   getPage = (page) => {
@@ -35,7 +36,16 @@ class ConnectHardwareForm extends Component {
       .connectHardware('trezor', page)
       .then(accounts => {
         if (accounts.length) {
-          this.setState({ accounts: accounts })
+          const newState = { accounts: accounts }
+          // Default to the first account
+          if (this.state.selectedAccount === null) {
+            const firstAccount = accounts[0]
+            newState.selectedAccount = firstAccount.index.toString()
+          // If the page doesn't contain the selected account, let's deselect it
+          } else if (!accounts.filter(a => a.index.toString() === '').lenght) {
+            newState.selectedAccount = null
+          }
+          this.setState(newState)
         }
       })
       .catch(e => {
@@ -43,13 +53,23 @@ class ConnectHardwareForm extends Component {
       })
   }
 
-  unlockAccount () {
-    if (this.state.selectedAccount === '') {
-      return Promise.reject({ error: this.context.t('accountSelectionRequired') })
+  onUnlockAccount = () => {
+
+    if (this.state.selectedAccount === null) {
+      this.setState({ error: this.context.t('accountSelectionRequired') })
     }
-    return this.props.unlockTrezorAccount(this.state.selectedAccount)
+
+    this.props.unlockTrezorAccount(this.state.selectedAccount)
+    .then(_ => {
+      this.props.history.push(DEFAULT_ROUTE)
+    }).catch(e => {
+      this.setState({ error: e.toString() })
+    })
   }
 
+  onCancel = () => {
+    this.props.history.push(DEFAULT_ROUTE)
+  }
 
   renderError () {
     return this.state.error
@@ -67,10 +87,13 @@ class ConnectHardwareForm extends Component {
 
     return h(AccountList, {
       accounts: this.state.accounts,
+      selectedAccount: this.state.selectedAccount,
       onAccountChange: this.onAccountChange,
       network: this.props.network,
       getPage: this.getPage,
       history: this.props.history,
+      onUnlockAccount: this.onUnlockAccount,
+      onCancel: this.onCancel,
     })
   }
 
-- 
cgit 


From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 22 Jun 2018 23:52:45 -0700
Subject: Refactor and redesign confirm transaction views

---
 .../confirm-approve/confirm-approve.component.js   |  30 ++
 .../confirm-approve/confirm-approve.container.js   |  28 ++
 ui/app/components/pages/confirm-approve/index.js   |   1 +
 .../confirm-deploy-contract.component.js           |  64 ++++
 .../confirm-deploy-contract.container.js           |  12 +
 .../pages/confirm-deploy-contract/index.js         |   1 +
 .../confirm-send-ether.component.js                |  31 ++
 .../confirm-send-ether.container.js                |  37 ++
 .../components/pages/confirm-send-ether/index.js   |   1 +
 .../confirm-send-token.component.js                |  39 +++
 .../confirm-send-token.container.js                |  72 ++++
 .../components/pages/confirm-send-token/index.js   |   1 +
 .../components/pages/confirm-send-token/index.scss |  19 +
 .../confirm-transaction-base.component.js          | 382 +++++++++++++++++++++
 .../confirm-transaction-base.container.js          |  95 +++++
 .../pages/confirm-transaction-base/index.js        |   1 +
 .../confirm-transaction-switch.component.js        |  71 ++++
 .../confirm-transaction-switch.constants.js        |   2 +
 .../confirm-transaction-switch.container.js        |  11 +
 .../confirm-transaction-switch.util.js             |  12 +
 .../pages/confirm-transaction-switch/index.js      |   2 +
 .../confirm-transaction.component.js               |  59 ++++
 .../confirm-transaction.container.js               |  19 +
 .../components/pages/confirm-transaction/index.js  |   2 +
 ui/app/components/pages/home.js                    |  94 -----
 ui/app/components/pages/index.scss                 |   2 +
 26 files changed, 994 insertions(+), 94 deletions(-)
 create mode 100644 ui/app/components/pages/confirm-approve/confirm-approve.component.js
 create mode 100644 ui/app/components/pages/confirm-approve/confirm-approve.container.js
 create mode 100644 ui/app/components/pages/confirm-approve/index.js
 create mode 100644 ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
 create mode 100644 ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
 create mode 100644 ui/app/components/pages/confirm-deploy-contract/index.js
 create mode 100644 ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
 create mode 100644 ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
 create mode 100644 ui/app/components/pages/confirm-send-ether/index.js
 create mode 100644 ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
 create mode 100644 ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
 create mode 100644 ui/app/components/pages/confirm-send-token/index.js
 create mode 100644 ui/app/components/pages/confirm-send-token/index.scss
 create mode 100644 ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
 create mode 100644 ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
 create mode 100644 ui/app/components/pages/confirm-transaction-base/index.js
 create mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
 create mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
 create mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
 create mode 100644 ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
 create mode 100644 ui/app/components/pages/confirm-transaction-switch/index.js
 create mode 100644 ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
 create mode 100644 ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
 create mode 100644 ui/app/components/pages/confirm-transaction/index.js

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

diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.component.js b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
new file mode 100644
index 000000000..d775b0362
--- /dev/null
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+
+export default class ConfirmApprove extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    tokenAddress: PropTypes.string,
+    toAddress: PropTypes.string,
+    tokenAmount: PropTypes.string,
+    tokenSymbol: PropTypes.string,
+  }
+
+  render () {
+    const { toAddress, tokenAddress, tokenAmount, tokenSymbol } = this.props
+
+    return (
+      <ConfirmTransactionBase
+        toAddress={toAddress}
+        identiconAddress={tokenAddress}
+        title={`${tokenAmount} ${tokenSymbol}`}
+        warning={`By approving this action, you grant permission for this contract to spend up to ${tokenAmount} of your ${tokenSymbol}.`}
+        hideSubtitle
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.container.js b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
new file mode 100644
index 000000000..040e499ae
--- /dev/null
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
@@ -0,0 +1,28 @@
+import { connect } from 'react-redux'
+import ConfirmApprove from './confirm-approve.component'
+
+const mapStateToProps = state => {
+  const { confirmTransaction } = state
+  const {
+    tokenData = {},
+    txData: { txParams: { to: tokenAddress } = {} } = {},
+    tokenProps: { tokenSymbol } = {},
+  } = confirmTransaction
+  const { params = [] } = tokenData
+
+  let toAddress = ''
+  let tokenAmount = ''
+
+  if (params && params.length === 2) {
+    [{ value: toAddress }, { value: tokenAmount }] = params
+  }
+
+  return {
+    toAddress,
+    tokenAddress,
+    tokenAmount,
+    tokenSymbol,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmApprove)
diff --git a/ui/app/components/pages/confirm-approve/index.js b/ui/app/components/pages/confirm-approve/index.js
new file mode 100644
index 000000000..791297be7
--- /dev/null
+++ b/ui/app/components/pages/confirm-approve/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-approve.container'
diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
new file mode 100644
index 000000000..9bc0daab9
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.component.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ethUtil from 'ethereumjs-util'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+
+export default class ConfirmDeployContract extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    txData: PropTypes.object,
+  }
+
+  renderData () {
+    const { t } = this.context
+    const {
+      txData: {
+        origin,
+        txParams: {
+          data,
+        } = {},
+      } = {},
+    } = this.props
+
+    return (
+      <div className="confirm-page-container-content__data">
+        <div className="confirm-page-container-content__data-box">
+          <div className="confirm-page-container-content__data-field">
+            <div className="confirm-page-container-content__data-field-label">
+              { `${t('origin')}:` }
+            </div>
+            <div>
+              { origin }
+            </div>
+          </div>
+          <div className="confirm-page-container-content__data-field">
+            <div className="confirm-page-container-content__data-field-label">
+              { `${t('bytes')}:` }
+            </div>
+            <div>
+              { ethUtil.toBuffer(data).length }
+            </div>
+          </div>
+        </div>
+        <div className="confirm-page-container-content__data-box-label">
+          { `${t('hexData')}:` }
+        </div>
+        <div className="confirm-page-container-content__data-box">
+          { data }
+        </div>
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <ConfirmTransactionBase
+        action={this.context.t('contractDeployment')}
+        dataComponent={this.renderData()}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
new file mode 100644
index 000000000..336ee83ea
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/confirm-deploy-contract.container.js
@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import ConfirmDeployContract from './confirm-deploy-contract.component'
+
+const mapStateToProps = state => {
+  const { confirmTransaction: { txData } = {} } = state
+
+  return {
+    txData,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmDeployContract)
diff --git a/ui/app/components/pages/confirm-deploy-contract/index.js b/ui/app/components/pages/confirm-deploy-contract/index.js
new file mode 100644
index 000000000..c4fb01b52
--- /dev/null
+++ b/ui/app/components/pages/confirm-deploy-contract/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-deploy-contract.container'
diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
new file mode 100644
index 000000000..c590bacf3
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import { SEND_ROUTE } from '../../../routes'
+
+export default class ConfirmSendEther extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    editTransaction: PropTypes.func,
+    history: PropTypes.object,
+  }
+
+  handleEdit ({ txData }) {
+    const { editTransaction, history } = this.props
+    editTransaction(txData)
+    history.push(SEND_ROUTE)
+  }
+
+  render () {
+    return (
+      <ConfirmTransactionBase
+        action={this.context.t('confirm')}
+        hideData
+        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
new file mode 100644
index 000000000..898735d1a
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
@@ -0,0 +1,37 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import { updateSend } from '../../../actions'
+import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
+import ConfirmSendEther from './confirm-send-ether.component'
+
+const mapDispatchToProps = dispatch => {
+  return {
+    editTransaction: txData => {
+      const { id, txParams } = txData
+      const {
+        gas: gasLimit,
+        gasPrice,
+        to,
+        value: amount,
+      } = txParams
+
+      dispatch(updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount,
+        errors: { to: null, amount: null },
+        editingTransactionId: id && id.toString(),
+      }))
+
+      dispatch(clearConfirmTransaction())
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(null, mapDispatchToProps)
+)(ConfirmSendEther)
diff --git a/ui/app/components/pages/confirm-send-ether/index.js b/ui/app/components/pages/confirm-send-ether/index.js
new file mode 100644
index 000000000..2d5767c39
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-ether/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-send-ether.container'
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
new file mode 100644
index 000000000..46ad9ccab
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import { SEND_ROUTE } from '../../../routes'
+
+export default class ConfirmSendToken extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    history: PropTypes.object,
+    tokenAddress: PropTypes.string,
+    toAddress: PropTypes.string,
+    numberOfTokens: PropTypes.number,
+    tokenSymbol: PropTypes.string,
+    editTransaction: PropTypes.func,
+  }
+
+  handleEdit (confirmTransactionData) {
+    const { editTransaction, history } = this.props
+    editTransaction(confirmTransactionData)
+    history.push(SEND_ROUTE)
+  }
+
+  render () {
+    const { toAddress, tokenAddress, tokenSymbol, numberOfTokens } = this.props
+
+    return (
+      <ConfirmTransactionBase
+        toAddress={toAddress}
+        identiconAddress={tokenAddress}
+        title={`${numberOfTokens} ${tokenSymbol}`}
+        onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
+        hideSubtitle
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
new file mode 100644
index 000000000..2d7efeed6
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
@@ -0,0 +1,72 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import ConfirmSendToken from './confirm-send-token.component'
+import { calcTokenAmount } from '../../../token-util'
+import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
+import { setSelectedToken, updateSend, showSendTokenPage } from '../../../actions'
+import { conversionUtil } from '../../../conversion-util'
+
+const mapStateToProps = state => {
+  const { confirmTransaction } = state
+  const {
+    tokenData = {},
+    tokenProps: { tokenSymbol, tokenDecimals } = {},
+    txData: { txParams: { to: tokenAddress } = {} } = {},
+  } = confirmTransaction
+  const { params = [] } = tokenData
+
+  let toAddress = ''
+  let tokenAmount = ''
+
+  if (params && params.length === 2) {
+    [{ value: toAddress }, { value: tokenAmount }] = params
+  }
+
+  const numberOfTokens = tokenAmount && tokenDecimals
+    ? calcTokenAmount(tokenAmount, tokenDecimals)
+    : 0
+
+  return {
+    toAddress,
+    tokenAddress,
+    tokenSymbol,
+    numberOfTokens,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    editTransaction: ({ txData, tokenData, tokenProps }) => {
+      const { txParams: { to: tokenAddress, gas: gasLimit, gasPrice } = {}, id } = txData
+      const { params = [] } = tokenData
+      const { value: to } = params[0] || {}
+      const { value: tokenAmountInDec } = params[1] || {}
+      const tokenAmountInHex = conversionUtil(tokenAmountInDec, {
+        fromNumericBase: 'dec',
+        toNumericBase: 'hex',
+      })
+      dispatch(setSelectedToken(tokenAddress))
+      dispatch(updateSend({
+        gasLimit,
+        gasPrice,
+        gasTotal: null,
+        to,
+        amount: tokenAmountInHex,
+        errors: { to: null, amount: null },
+        editingTransactionId: id && id.toString(),
+        token: {
+          ...tokenProps,
+          address: tokenAddress,
+        },
+      }))
+      dispatch(clearConfirmTransaction())
+      dispatch(showSendTokenPage())
+    },
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmSendToken)
diff --git a/ui/app/components/pages/confirm-send-token/index.js b/ui/app/components/pages/confirm-send-token/index.js
new file mode 100644
index 000000000..409b6ef3d
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-token/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-send-token.container'
diff --git a/ui/app/components/pages/confirm-send-token/index.scss b/ui/app/components/pages/confirm-send-token/index.scss
new file mode 100644
index 000000000..0476749f6
--- /dev/null
+++ b/ui/app/components/pages/confirm-send-token/index.scss
@@ -0,0 +1,19 @@
+.confirm-send-token {
+  &__title {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__identicon {
+    flex: 0 0 auto;
+  }
+
+  &__title-text {
+    font-size: 2.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-left: 8px;
+  }
+}
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
new file mode 100644
index 000000000..3b60a5d5d
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -0,0 +1,382 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmPageContainer, { ConfirmDetailRow } from '../../confirm-page-container'
+import { formatCurrency, getHexGasTotal } from '../../../helpers/confirm-transaction/util'
+import { isBalanceSufficient } from '../../send_/send.utils'
+import { DEFAULT_ROUTE } from '../../../routes'
+import { conversionGreaterThan } from '../../../conversion-util'
+import { MIN_GAS_LIMIT_DEC } from '../../send_/send.constants'
+
+export default class ConfirmTransactionBase extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    match: PropTypes.object,
+    history: PropTypes.object,
+    // Redux props
+    txData: PropTypes.object,
+    tokenData: PropTypes.object,
+    tokenProps: PropTypes.object,
+    isTxReprice: PropTypes.bool,
+    nonce: PropTypes.string,
+    fromName: PropTypes.string,
+    fromAddress: PropTypes.string,
+    toName: PropTypes.string,
+    toAddress: PropTypes.string,
+    transactionStatus: PropTypes.string,
+    ethTransactionAmount: PropTypes.string,
+    ethTransactionFee: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    fiatTransactionAmount: PropTypes.string,
+    fiatTransactionFee: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    hexGasTotal: PropTypes.string,
+    balance: PropTypes.string,
+    currentCurrency: PropTypes.string,
+    conversionRate: PropTypes.number,
+    setTransactionToConfirm: PropTypes.func,
+    clearConfirmTransaction: PropTypes.func,
+    cancelTransaction: PropTypes.func,
+    clearSend: PropTypes.func,
+    sendTransaction: PropTypes.func,
+    editTransaction: PropTypes.func,
+    showCustomizeGasModal: PropTypes.func,
+    updateGasAndCalculate: PropTypes.func,
+    showTransactionConfirmedModal: PropTypes.func,
+    // Component props
+    action: PropTypes.string,
+    hideDetails: PropTypes.bool,
+    hideData: PropTypes.bool,
+    detailsComponent: PropTypes.node,
+    dataComponent: PropTypes.node,
+    summaryComponent: PropTypes.node,
+    contentComponent: PropTypes.node,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    hideSubtitle: PropTypes.bool,
+    valid: PropTypes.bool,
+    errorMessage: PropTypes.string,
+    warning: PropTypes.string,
+    identiconAddress: PropTypes.string,
+    onEdit: PropTypes.func,
+    onEditGas: PropTypes.func,
+    onCancel: PropTypes.func,
+    onSubmit: PropTypes.func,
+  }
+
+  componentDidMount () {
+    const { match: { params: { id } = {} }, setTransactionToConfirm } = this.props
+    setTransactionToConfirm(id)
+  }
+
+  componentDidUpdate (prevProps) {
+    const {
+      transactionStatus,
+      showTransactionConfirmedModal,
+      history,
+      clearConfirmTransaction,
+      match: { params: { id } = {} },
+      setTransactionToConfirm,
+      txData,
+    } = this.props
+
+    if (transactionStatus === 'dropped') {
+      showTransactionConfirmedModal({
+        onHide: () => {
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
+        },
+      })
+
+      return
+    }
+
+    if (id && id !== txData.id + '') {
+      setTransactionToConfirm(id)
+    }
+  }
+
+  getError () {
+    const INSUFFICIENT_FUNDS_ERROR = this.context.t('insufficientFunds')
+    const TRANSACTION_ERROR = this.context.t('transactionError')
+    const {
+      balance,
+      conversionRate,
+      hexGasTotal,
+      txData: {
+        simulationFails,
+        txParams: {
+          value: amount,
+        } = {},
+      } = {},
+    } = this.props
+
+    const insufficientBalance = balance && !isBalanceSufficient({
+      amount,
+      gasTotal: hexGasTotal || '0x0',
+      balance,
+      conversionRate,
+    })
+
+    if (insufficientBalance) {
+      return {
+        valid: false,
+        errorMessage: INSUFFICIENT_FUNDS_ERROR,
+      }
+    }
+
+    if (simulationFails) {
+      return {
+        valid: false,
+        errorMessage: TRANSACTION_ERROR,
+      }
+    }
+
+    return {
+      valid: true,
+    }
+  }
+
+  validateEditGas ({ gasLimit, gasPrice }) {
+    const { t } = this.context
+    const {
+      balance,
+      conversionRate,
+      txData: {
+        txParams: {
+          value: amount,
+        } = {},
+      } = {},
+    } = this.props
+
+    const INSUFFICIENT_FUNDS_ERROR = t('insufficientFunds')
+    const GAS_LIMIT_TOO_LOW_ERROR = t('gasLimitTooLow')
+
+    const gasTotal = getHexGasTotal({ gasLimit, gasPrice })
+    const hasSufficientBalance = isBalanceSufficient({
+      amount,
+      gasTotal,
+      balance,
+      conversionRate,
+    })
+
+    if (!hasSufficientBalance) {
+      return {
+        valid: false,
+        errorMessage: INSUFFICIENT_FUNDS_ERROR,
+      }
+    }
+
+    const gasLimitTooLow = gasLimit && conversionGreaterThan(
+      {
+        value: MIN_GAS_LIMIT_DEC,
+        fromNumericBase: 'dec',
+        conversionRate,
+      },
+      {
+        value: gasLimit,
+        fromNumericBase: 'hex',
+      },
+    )
+
+    if (gasLimitTooLow) {
+      return {
+        valid: false,
+        errorMessage: GAS_LIMIT_TOO_LOW_ERROR,
+      }
+    }
+
+    return {
+      valid: true,
+    }
+  }
+
+  handleEditGas () {
+    const { onEditGas, showCustomizeGasModal, txData, updateGasAndCalculate } = this.props
+
+    if (onEditGas) {
+      onEditGas()
+    } else {
+      showCustomizeGasModal({
+        txData,
+        onSubmit: txData => updateGasAndCalculate(txData),
+        validate: ({ gasLimit, gasPrice }) => this.validateEditGas({ gasLimit, gasPrice }),
+      })
+    }
+  }
+
+  renderDetails () {
+    const {
+      detailsComponent,
+      fiatTransactionFee,
+      ethTransactionFee,
+      currentCurrency,
+      fiatTransactionTotal,
+      ethTransactionTotal,
+      hideDetails,
+    } = this.props
+
+    if (hideDetails) {
+      return null
+    }
+
+    return (
+      detailsComponent || (
+        <div className="confirm-page-container-content__details">
+          <div className="confirm-page-container-content__gas-fee">
+            <ConfirmDetailRow
+              label="Gas Fee"
+              fiatFee={formatCurrency(fiatTransactionFee, currentCurrency)}
+              ethFee={ethTransactionFee}
+              headerText="Edit"
+              headerTextClassName="confirm-detail-row__header-text--edit"
+              onHeaderClick={() => this.handleEditGas()}
+            />
+          </div>
+          <div>
+            <ConfirmDetailRow
+              label="Total"
+              fiatFee={formatCurrency(fiatTransactionTotal, currentCurrency)}
+              ethFee={ethTransactionTotal}
+              headerText="Amount + Gas Fee"
+              headerTextClassName="confirm-detail-row__header-text--total"
+              fiatFeeColor="#2f9ae0"
+            />
+          </div>
+        </div>
+      )
+    )
+  }
+
+  renderData () {
+    const { t } = this.context
+    const {
+      txData: {
+        txParams: {
+          data,
+        } = {},
+      } = {},
+      tokenData: {
+        name,
+        params,
+      } = {},
+      hideData,
+      dataComponent,
+    } = this.props
+
+    if (hideData) {
+      return null
+    }
+
+    return dataComponent || (
+      <div className="confirm-page-container-content__data">
+        <div className="confirm-page-container-content__data-box-label">
+          {`${t('functionType')}:`}
+          <span className="confirm-page-container-content__function-type">
+            { name }
+          </span>
+        </div>
+        <div className="confirm-page-container-content__data-box">
+          { JSON.stringify(params, null, 2) }
+        </div>
+        <div className="confirm-page-container-content__data-box-label">
+          {`${t('hexData')}:`}
+        </div>
+        <div className="confirm-page-container-content__data-box">
+          { data }
+        </div>
+      </div>
+    )
+  }
+
+  handleEdit () {
+    const { txData, tokenData, tokenProps, onEdit } = this.props
+    onEdit({ txData, tokenData, tokenProps })
+  }
+
+  handleCancel () {
+    const { onCancel, txData, cancelTransaction, history, clearConfirmTransaction } = this.props
+
+    if (onCancel) {
+      onCancel(txData)
+    } else {
+      cancelTransaction(txData)
+        .then(() => {
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
+        })
+    }
+  }
+
+  handleSubmit () {
+    const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props
+
+    if (onSubmit) {
+      onSubmit(txData)
+    } else {
+      sendTransaction(txData)
+        .then(() => {
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
+        })
+    }
+  }
+
+  render () {
+    const {
+      isTxReprice,
+      fromName,
+      fromAddress,
+      toName,
+      toAddress,
+      tokenData,
+      ethTransactionAmount,
+      fiatTransactionAmount,
+      valid: propsValid,
+      errorMessage: propsErrorMessage,
+      currentCurrency,
+      action,
+      title,
+      subtitle,
+      hideSubtitle,
+      identiconAddress,
+      summaryComponent,
+      contentComponent,
+      onEdit,
+      nonce,
+      warning,
+    } = this.props
+
+    const { name } = tokenData
+    const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
+    const { valid, errorMessage } = this.getError()
+
+    return (
+      <ConfirmPageContainer
+        fromName={fromName}
+        fromAddress={fromAddress}
+        toName={toName}
+        toAddress={toAddress}
+        showEdit={onEdit && !isTxReprice}
+        action={action || name}
+        title={title || `${fiatConvertedAmount} ${currentCurrency.toUpperCase()}`}
+        subtitle={subtitle || `\u2666 ${ethTransactionAmount}`}
+        hideSubtitle={hideSubtitle}
+        summaryComponent={summaryComponent}
+        detailsComponent={this.renderDetails()}
+        dataComponent={this.renderData()}
+        contentComponent={contentComponent}
+        nonce={nonce}
+        identiconAddress={identiconAddress}
+        errorMessage={propsErrorMessage || errorMessage}
+        warning={warning}
+        valid={propsValid || valid}
+        onEdit={() => this.handleEdit()}
+        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
new file mode 100644
index 000000000..ea1a1d296
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -0,0 +1,95 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import R from 'ramda'
+import ConfirmTransactionBase from './confirm-transaction-base.component'
+import {
+  setTransactionToConfirm,
+  clearConfirmTransaction,
+  updateGasAndCalculate,
+} from '../../../ducks/confirm-transaction.duck'
+import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
+
+const mapStateToProps = (state, props) => {
+  const { toAddress: propsToAddress } = props
+  const { confirmTransaction, metamask } = state
+  const {
+    ethTransactionAmount,
+    ethTransactionFee,
+    ethTransactionTotal,
+    fiatTransactionAmount,
+    fiatTransactionFee,
+    fiatTransactionTotal,
+    hexGasTotal,
+    tokenData,
+    txData,
+    tokenProps,
+    nonce,
+  } = confirmTransaction
+  const { txParams = {}, lastGasPrice, id: transactionId } = txData
+  const { from: fromAddress, to: txParamsToAddress } = txParams
+  const {
+    conversionRate,
+    identities,
+    currentCurrency,
+    accounts,
+    selectedAddress,
+    selectedAddressTxList,
+  } = metamask
+
+  const { balance } = accounts[selectedAddress]
+  const { name: fromName } = identities[selectedAddress]
+  const toAddress = propsToAddress || txParamsToAddress
+  const toName = identities[toAddress] && identities[toAddress].name
+  const isTxReprice = Boolean(lastGasPrice)
+
+  const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
+  const transactionStatus = transaction ? transaction.status : ''
+
+  return {
+    balance,
+    fromAddress,
+    fromName,
+    toAddress,
+    toName,
+    ethTransactionAmount,
+    ethTransactionFee,
+    ethTransactionTotal,
+    fiatTransactionAmount,
+    fiatTransactionFee,
+    fiatTransactionTotal,
+    hexGasTotal,
+    txData,
+    tokenData,
+    tokenProps,
+    isTxReprice,
+    currentCurrency,
+    conversionRate,
+    transactionStatus,
+    nonce,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+    clearSend: () => dispatch(clearSend()),
+    showTransactionConfirmedModal: ({ onHide }) => {
+      return dispatch(showModal({ name: 'TRANSACTION_CONFIRMED', onHide }))
+    },
+    showCustomizeGasModal: ({ txData, onSubmit, validate }) => {
+      return dispatch(showModal({ name: 'CONFIRM_CUSTOMIZE_GAS', txData, onSubmit, validate }))
+    },
+    updateGasAndCalculate: ({ gasLimit, gasPrice }) => {
+      return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
+    },
+    cancelTransaction: ({ id }) => dispatch(cancelTx({ id })),
+    sendTransaction: txData => dispatch(updateAndApproveTx(txData)),
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(ConfirmTransactionBase)
diff --git a/ui/app/components/pages/confirm-transaction-base/index.js b/ui/app/components/pages/confirm-transaction-base/index.js
new file mode 100644
index 000000000..9996e9aeb
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-base/index.js
@@ -0,0 +1 @@
+export { default } from './confirm-transaction-base.container'
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
new file mode 100644
index 000000000..5f337ab61
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.component.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Redirect } from 'react-router-dom'
+import R from 'ramda'
+import Loading from '../../loading-screen'
+import {
+  CONFIRM_DEPLOY_CONTRACT_ROUTE,
+  CONFIRM_SEND_ETHER_ROUTE,
+  CONFIRM_SEND_TOKEN_ROUTE,
+  CONFIRM_APPROVE_ROUTE,
+  CONFIRM_TOKEN_METHOD_ROUTE,
+  SIGNATURE_REQUEST_ROUTE,
+} from '../../../routes'
+import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
+import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
+
+export default class ConfirmTransactionSwitch extends Component {
+  static propTypes = {
+    unconfirmedTransactions: PropTypes.array,
+    match: PropTypes.object,
+  }
+
+  getTransaction () {
+    const { unconfirmedTransactions, match } = this.props
+    const { params: { id: paramsTransactionId } = {} } = match
+
+    return paramsTransactionId
+      ? R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
+      : unconfirmedTransactions[0]
+  }
+
+  redirectToTransaction (txData) {
+    const { id, txParams: { data } } = txData
+
+    if (isConfirmDeployContract(txData)) {
+      return <Redirect to={{ pathname: `${CONFIRM_DEPLOY_CONTRACT_ROUTE}/${id}` }} />
+    }
+
+    if (data) {
+      const tokenData = getTokenData(data)
+      const { name: tokenMethodName } = tokenData || {}
+
+      switch (tokenMethodName) {
+        case TOKEN_METHOD_TRANSFER:
+          return <Redirect to={{ pathname: `${CONFIRM_SEND_TOKEN_ROUTE}/${id}` }} />
+        case TOKEN_METHOD_APPROVE:
+          return <Redirect to={{ pathname: `${CONFIRM_APPROVE_ROUTE}/${id}` }} />
+        default:
+          return <Redirect to={{ pathname: `${CONFIRM_TOKEN_METHOD_ROUTE}/${id}` }} />
+      }
+    }
+
+    return <Redirect to={{ pathname: `${CONFIRM_SEND_ETHER_ROUTE}/${id}` }} />
+  }
+
+  render () {
+    const txData = this.getTransaction()
+
+    if (!txData) {
+      return <Loading />
+    }
+
+    if (txData.txParams) {
+      return this.redirectToTransaction(txData)
+    } else if (txData.msgParams) {
+      return <Redirect to={{ pathname: SIGNATURE_REQUEST_ROUTE }} />
+    }
+
+    return <Loading />
+  }
+}
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
new file mode 100644
index 000000000..622d2a37a
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.constants.js
@@ -0,0 +1,2 @@
+export const TOKEN_METHOD_TRANSFER = 'transfer'
+export const TOKEN_METHOD_APPROVE = 'approve'
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
new file mode 100644
index 000000000..cb6008acb
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import ConfirmTransactionSwitch from './confirm-transaction-switch.component'
+import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = state => {
+  return {
+    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmTransactionSwitch)
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
new file mode 100644
index 000000000..dd1dec6ae
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
@@ -0,0 +1,12 @@
+import abi from 'human-standard-token-abi'
+import abiDecoder from 'abi-decoder'
+abiDecoder.addABI(abi)
+
+export function isConfirmDeployContract (txData = {}) {
+  const { txParams = {} } = txData
+  return !txParams.to
+}
+
+export function getTokenData (data = {}) {
+  return abiDecoder.decodeMethod(data)
+}
diff --git a/ui/app/components/pages/confirm-transaction-switch/index.js b/ui/app/components/pages/confirm-transaction-switch/index.js
new file mode 100644
index 000000000..c288acb1a
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction-switch/index.js
@@ -0,0 +1,2 @@
+import ConfirmTransactionSwitch from './confirm-transaction-switch.container'
+module.exports = ConfirmTransactionSwitch
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
new file mode 100644
index 000000000..cc0b019e0
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Switch, Route } from 'react-router-dom'
+import ConfirmTransactionSwitch from '../confirm-transaction-switch'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import ConfirmSendEther from '../confirm-send-ether'
+import ConfirmSendToken from '../confirm-send-token'
+import ConfirmDeployContract from '../confirm-deploy-contract'
+import ConfirmApprove from '../confirm-approve'
+import ConfTx from '../../../conf-tx'
+import {
+  DEFAULT_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_ROUTE,
+  CONFIRM_SEND_ETHER_ROUTE,
+  CONFIRM_SEND_TOKEN_ROUTE,
+  CONFIRM_APPROVE_ROUTE,
+  CONFIRM_TOKEN_METHOD_ROUTE,
+  SIGNATURE_REQUEST_ROUTE,
+} from '../../../routes'
+
+export default class ConfirmTransaction extends Component {
+  static propTypes = {
+    history: PropTypes.object.isRequired,
+    totalUnapprovedCount: PropTypes.number.isRequired,
+    match: PropTypes.object,
+    send: PropTypes.object,
+  }
+
+  componentDidMount () {
+    const { totalUnapprovedCount = 0, send = {}, history } = this.props
+
+    if (!totalUnapprovedCount && !send.to) {
+      history.replace(DEFAULT_ROUTE)
+    }
+  }
+
+  render () {
+    return (
+      <Switch>
+        <Route
+          exact
+          path={`${CONFIRM_DEPLOY_CONTRACT_ROUTE}/:id?`}
+          component={ConfirmDeployContract}
+        />
+        <Route
+          exact
+          path={`${CONFIRM_TOKEN_METHOD_ROUTE}/:id?`}
+          component={ConfirmTransactionBase}
+        />
+        <Route exact path={`${CONFIRM_SEND_ETHER_ROUTE}/:id?`} component={ConfirmSendEther} />
+        <Route exact path={`${CONFIRM_SEND_TOKEN_ROUTE}/:id?`} component={ConfirmSendToken} />
+        <Route exact path={`${CONFIRM_APPROVE_ROUTE}/:id?`} component={ConfirmApprove} />
+        <Route exact path={SIGNATURE_REQUEST_ROUTE} component={ConfTx} />
+        <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
+      </Switch>
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
new file mode 100644
index 000000000..6779e69b7
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import { withRouter } from 'react-router-dom'
+import ConfirmTransaction from './confirm-transaction.component'
+import { getTotalUnapprovedCount } from '../../../selectors'
+
+const mapStateToProps = (state, props) => {
+  const { metamask: { send } } = state
+
+  return {
+    totalUnapprovedCount: getTotalUnapprovedCount(state),
+    send,
+  }
+}
+
+export default compose(
+  withRouter,
+  connect(mapStateToProps),
+)(ConfirmTransaction)
diff --git a/ui/app/components/pages/confirm-transaction/index.js b/ui/app/components/pages/confirm-transaction/index.js
new file mode 100644
index 000000000..4bf42d85c
--- /dev/null
+++ b/ui/app/components/pages/confirm-transaction/index.js
@@ -0,0 +1,2 @@
+import ConfirmTransaction from './confirm-transaction.container'
+module.exports = ConfirmTransaction
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index c53413d3b..86bd32c8a 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -83,51 +83,6 @@ class Home extends Component {
       })
     }
 
-    // if (!props.noActiveNotices) {
-    //   log.debug('rendering notice screen for unread notices.')
-    //   return h(NoticeScreen, {
-    //     notice: props.nextUnreadNotice,
-    //     key: 'NoticeScreen',
-    //     onConfirm: () => props.dispatch(actions.markNoticeRead(props.nextUnreadNotice)),
-    //   })
-    // } else if (props.lostAccounts && props.lostAccounts.length > 0) {
-    //   log.debug('rendering notice screen for lost accounts view.')
-    //   return h(NoticeScreen, {
-    //     notice: generateLostAccountsNotice(props.lostAccounts),
-    //     key: 'LostAccountsNotice',
-    //     onConfirm: () => props.dispatch(actions.markAccountsFound()),
-    //   })
-    // }
-
-    // if (props.seedWords) {
-    //   log.debug('rendering seed words')
-    //   return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'})
-    // }
-
-    // show initialize screen
-    // if (!isInitialized || forgottenPassword) {
-    //   // show current view
-    //   log.debug('rendering an initialize screen')
-    //   // switch (props.currentView.name) {
-
-    //     // case 'restoreVault':
-    //     //   log.debug('rendering restore vault screen')
-    //     //   return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'})
-
-    //   //   default:
-    //   //     log.debug('rendering menu screen')
-    //   //     return h(InitializeScreen, {key: 'menuScreenInit'})
-    //   // }
-    // }
-
-    // // show unlock screen
-    // if (!props.isUnlocked) {
-    //   return h(MainContainer, {
-    //     currentViewName: props.currentView.name,
-    //     isUnlocked: props.isUnlocked,
-    //   })
-    // }
-
     // show current view
     switch (currentView.name) {
 
@@ -135,59 +90,10 @@ class Home extends Component {
         log.debug('rendering main container')
         return h(MainContainer, {key: 'account-detail'})
 
-      // case 'sendTransaction':
-      //   log.debug('rendering send tx screen')
-
-      //   // Going to leave this here until we are ready to delete SendTransactionScreen v1
-      //   // const SendComponentToRender = checkFeatureToggle('send-v2')
-      //   //   ? SendTransactionScreen2
-      //   //   : SendTransactionScreen
-
-      //   return h(SendTransactionScreen2, {key: 'send-transaction'})
-
-      // case 'sendToken':
-      //   log.debug('rendering send token screen')
-
-      //   // Going to leave this here until we are ready to delete SendTransactionScreen v1
-      //   // const SendTokenComponentToRender = checkFeatureToggle('send-v2')
-      //   //   ? SendTransactionScreen2
-      //   //   : SendTokenScreen
-
-      //   return h(SendTransactionScreen2, {key: 'sendToken'})
-
       case 'newKeychain':
         log.debug('rendering new keychain screen')
         return h(NewKeyChainScreen, {key: 'new-keychain'})
 
-      // case 'confTx':
-      //   log.debug('rendering confirm tx screen')
-      //   return h(Redirect, {
-      //     to: {
-      //       pathname: CONFIRM_TRANSACTION_ROUTE,
-      //     },
-      //   })
-        // return h(ConfirmTxScreen, {key: 'confirm-tx'})
-
-      // case 'add-token':
-      //   log.debug('rendering add-token screen from unlock screen.')
-      //   return h(AddTokenScreen, {key: 'add-token'})
-
-      // case 'config':
-      //   log.debug('rendering config screen')
-      //   return h(Settings, {key: 'config'})
-
-      // case 'import-menu':
-      //   log.debug('rendering import screen')
-      //   return h(Import, {key: 'import-menu'})
-
-      // case 'reveal-seed-conf':
-      //   log.debug('rendering reveal seed confirmation screen')
-      //   return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'})
-
-      // case 'info':
-      //   log.debug('rendering info screen')
-      //   return h(Settings, {key: 'info', tab: 'info'})
-
       case 'buyEth':
         log.debug('rendering buy ether screen')
         return h(BuyView, {key: 'buyEthView'})
diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
index b15c59863..8b333b6a8 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 './confirm-send-token/index';
-- 
cgit 


From e89549846fd3bd520b99740c7845f48f368c3afa Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 25 Jun 2018 12:06:57 -0700
Subject: Refactor data flow, signature request routing

---
 .../confirm-transaction-base.component.js          |  15 +--
 .../confirm-transaction-base.container.js          |   2 -
 .../confirm-transaction-switch.component.js        |  59 +++++-----
 .../confirm-transaction-switch.container.js        |   5 +-
 .../confirm-transaction.component.js               | 126 ++++++++++++++++-----
 .../confirm-transaction.container.js               |  17 ++-
 6 files changed, 145 insertions(+), 79 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 3b60a5d5d..dfbbd0177 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
@@ -36,7 +36,6 @@ export default class ConfirmTransactionBase extends Component {
     balance: PropTypes.string,
     currentCurrency: PropTypes.string,
     conversionRate: PropTypes.number,
-    setTransactionToConfirm: PropTypes.func,
     clearConfirmTransaction: PropTypes.func,
     cancelTransaction: PropTypes.func,
     clearSend: PropTypes.func,
@@ -66,20 +65,12 @@ export default class ConfirmTransactionBase extends Component {
     onSubmit: PropTypes.func,
   }
 
-  componentDidMount () {
-    const { match: { params: { id } = {} }, setTransactionToConfirm } = this.props
-    setTransactionToConfirm(id)
-  }
-
-  componentDidUpdate (prevProps) {
+  componentDidUpdate () {
     const {
       transactionStatus,
       showTransactionConfirmedModal,
       history,
       clearConfirmTransaction,
-      match: { params: { id } = {} },
-      setTransactionToConfirm,
-      txData,
     } = this.props
 
     if (transactionStatus === 'dropped') {
@@ -92,10 +83,6 @@ export default class ConfirmTransactionBase extends Component {
 
       return
     }
-
-    if (id && id !== txData.id + '') {
-      setTransactionToConfirm(id)
-    }
   }
 
   getError () {
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 ea1a1d296..19c39aed9 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
@@ -4,7 +4,6 @@ import { withRouter } from 'react-router-dom'
 import R from 'ramda'
 import ConfirmTransactionBase from './confirm-transaction-base.component'
 import {
-  setTransactionToConfirm,
   clearConfirmTransaction,
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
@@ -72,7 +71,6 @@ const mapStateToProps = (state, props) => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
     clearSend: () => dispatch(clearSend()),
     showTransactionConfirmedModal: ({ onHide }) => {
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 5f337ab61..9ec0fc623 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
@@ -1,39 +1,30 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Redirect } from 'react-router-dom'
-import R from 'ramda'
 import Loading from '../../loading-screen'
 import {
-  CONFIRM_DEPLOY_CONTRACT_ROUTE,
-  CONFIRM_SEND_ETHER_ROUTE,
-  CONFIRM_SEND_TOKEN_ROUTE,
-  CONFIRM_APPROVE_ROUTE,
-  CONFIRM_TOKEN_METHOD_ROUTE,
-  SIGNATURE_REQUEST_ROUTE,
+  CONFIRM_TRANSACTION_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
 import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
 import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
-    unconfirmedTransactions: PropTypes.array,
-    match: PropTypes.object,
-  }
-
-  getTransaction () {
-    const { unconfirmedTransactions, match } = this.props
-    const { params: { id: paramsTransactionId } = {} } = match
-
-    return paramsTransactionId
-      ? R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
-      : unconfirmedTransactions[0]
+    confirmTransaction: PropTypes.object,
   }
 
   redirectToTransaction (txData) {
     const { id, txParams: { data } } = txData
 
     if (isConfirmDeployContract(txData)) {
-      return <Redirect to={{ pathname: `${CONFIRM_DEPLOY_CONTRACT_ROUTE}/${id}` }} />
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
+      return <Redirect to={{ pathname }} />
     }
 
     if (data) {
@@ -41,29 +32,33 @@ export default class ConfirmTransactionSwitch extends Component {
       const { name: tokenMethodName } = tokenData || {}
 
       switch (tokenMethodName) {
-        case TOKEN_METHOD_TRANSFER:
-          return <Redirect to={{ pathname: `${CONFIRM_SEND_TOKEN_ROUTE}/${id}` }} />
-        case TOKEN_METHOD_APPROVE:
-          return <Redirect to={{ pathname: `${CONFIRM_APPROVE_ROUTE}/${id}` }} />
-        default:
-          return <Redirect to={{ pathname: `${CONFIRM_TOKEN_METHOD_ROUTE}/${id}` }} />
+        case TOKEN_METHOD_TRANSFER: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        case TOKEN_METHOD_APPROVE: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
+        default: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
       }
     }
 
-    return <Redirect to={{ pathname: `${CONFIRM_SEND_ETHER_ROUTE}/${id}` }} />
+    const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_ETHER_PATH}`
+    return <Redirect to={{ pathname }} />
   }
 
   render () {
-    const txData = this.getTransaction()
-
-    if (!txData) {
-      return <Loading />
-    }
+    const { confirmTransaction: { txData } } = this.props
 
     if (txData.txParams) {
       return this.redirectToTransaction(txData)
     } else if (txData.msgParams) {
-      return <Redirect to={{ pathname: SIGNATURE_REQUEST_ROUTE }} />
+      const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
+      return <Redirect to={{ pathname }} />
     }
 
     return <Loading />
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 cb6008acb..c04d388a9 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
@@ -1,10 +1,11 @@
 import { connect } from 'react-redux'
 import ConfirmTransactionSwitch from './confirm-transaction-switch.component'
-import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
+  const { confirmTransaction } = state
+
   return {
-    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+    confirmTransaction,
   }
 }
 
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index cc0b019e0..29ee5eedc 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
+import R from 'ramda'
+import Loading from '../../loading-screen'
 import ConfirmTransactionSwitch from '../confirm-transaction-switch'
 import ConfirmTransactionBase from '../confirm-transaction-base'
 import ConfirmSendEther from '../confirm-send-ether'
@@ -11,12 +13,12 @@ import ConfTx from '../../../conf-tx'
 import {
   DEFAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
-  CONFIRM_DEPLOY_CONTRACT_ROUTE,
-  CONFIRM_SEND_ETHER_ROUTE,
-  CONFIRM_SEND_TOKEN_ROUTE,
-  CONFIRM_APPROVE_ROUTE,
-  CONFIRM_TOKEN_METHOD_ROUTE,
-  SIGNATURE_REQUEST_ROUTE,
+  CONFIRM_DEPLOY_CONTRACT_PATH,
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_SEND_TOKEN_PATH,
+  CONFIRM_APPROVE_PATH,
+  CONFIRM_TOKEN_METHOD_PATH,
+  SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
 
 export default class ConfirmTransaction extends Component {
@@ -25,35 +27,107 @@ export default class ConfirmTransaction extends Component {
     totalUnapprovedCount: PropTypes.number.isRequired,
     match: PropTypes.object,
     send: PropTypes.object,
+    unconfirmedTransactions: PropTypes.array,
+    setTransactionToConfirm: PropTypes.func,
+    confirmTransaction: PropTypes.object,
   }
 
   componentDidMount () {
-    const { totalUnapprovedCount = 0, send = {}, history } = this.props
+    const {
+      totalUnapprovedCount = 0,
+      send = {},
+      history,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+    } = this.props
 
     if (!totalUnapprovedCount && !send.to) {
       history.replace(DEFAULT_ROUTE)
+      return
+    }
+
+    if (!transactionId) {
+      this.setTransactionToConfirm()
+    }
+  }
+
+  componentDidUpdate () {
+    const {
+      match: { params: { id: paramsTransactionId } = {} },
+      setTransactionToConfirm,
+      confirmTransaction: { txData: { id: transactionId } = {} },
+    } = this.props
+
+    if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
+      setTransactionToConfirm(paramsTransactionId)
+    }
+
+    if (!paramsTransactionId) {
+      this.setTransactionToConfirm()
+    }
+  }
+
+  setTransactionToConfirm () {
+    const {
+      history,
+      unconfirmedTransactions,
+      match: { params: { id: paramsTransactionId } = {} },
+      setTransactionToConfirm,
+    } = this.props
+
+    if (paramsTransactionId) {
+      // Check to make sure params ID is valid
+      const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
+
+      if (!tx) {
+        history.replace(DEFAULT_ROUTE)
+      } else {
+        setTransactionToConfirm(paramsTransactionId)
+      }
+    } else if (unconfirmedTransactions.length) {
+      const transactionId = unconfirmedTransactions[0].id
+      setTransactionToConfirm(transactionId)
     }
   }
 
   render () {
-    return (
-      <Switch>
-        <Route
-          exact
-          path={`${CONFIRM_DEPLOY_CONTRACT_ROUTE}/:id?`}
-          component={ConfirmDeployContract}
-        />
-        <Route
-          exact
-          path={`${CONFIRM_TOKEN_METHOD_ROUTE}/:id?`}
-          component={ConfirmTransactionBase}
-        />
-        <Route exact path={`${CONFIRM_SEND_ETHER_ROUTE}/:id?`} component={ConfirmSendEther} />
-        <Route exact path={`${CONFIRM_SEND_TOKEN_ROUTE}/:id?`} component={ConfirmSendToken} />
-        <Route exact path={`${CONFIRM_APPROVE_ROUTE}/:id?`} component={ConfirmApprove} />
-        <Route exact path={SIGNATURE_REQUEST_ROUTE} component={ConfTx} />
-        <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
-      </Switch>
-    )
+    const { confirmTransaction: { txData: { id } } = {} } = this.props
+
+    return id
+      ? (
+        <Switch>
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_DEPLOY_CONTRACT_PATH}`}
+            component={ConfirmDeployContract}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TOKEN_METHOD_PATH}`}
+            component={ConfirmTransactionBase}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_ETHER_PATH}`}
+            component={ConfirmSendEther}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_SEND_TOKEN_PATH}`}
+            component={ConfirmSendToken}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
+            component={ConfirmApprove}
+          />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
+            component={ConfTx}
+          />
+          <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
+        </Switch>
+      )
+      : <Loading />
   }
 }
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
index 6779e69b7..1ad5aa355 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
@@ -1,19 +1,30 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
+import { setTransactionToConfirm } from '../../../ducks/confirm-transaction.duck'
 import ConfirmTransaction from './confirm-transaction.component'
 import { getTotalUnapprovedCount } from '../../../selectors'
+import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
 
-const mapStateToProps = (state, props) => {
-  const { metamask: { send } } = state
+const mapStateToProps = state => {
+  const { metamask: { send }, confirmTransaction } = state
 
   return {
     totalUnapprovedCount: getTotalUnapprovedCount(state),
     send,
+    confirmTransaction,
+    unconfirmedTransactions: unconfirmedTransactionsListSelector(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
+
   }
 }
 
 export default compose(
   withRouter,
-  connect(mapStateToProps),
+  connect(mapStateToProps, mapDispatchToProps),
 )(ConfirmTransaction)
-- 
cgit 


From 7732cd4100f3c40f35eeaec669094f63292cbe3d Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 25 Jun 2018 21:29:16 -0700
Subject: Display newest transaction

---
 .../pages/confirm-transaction/confirm-transaction.component.js       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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

diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index 29ee5eedc..d4581e8ed 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -61,7 +61,7 @@ export default class ConfirmTransaction extends Component {
       setTransactionToConfirm(paramsTransactionId)
     }
 
-    if (!paramsTransactionId) {
+    if (!transactionId) {
       this.setTransactionToConfirm()
     }
   }
@@ -84,7 +84,8 @@ export default class ConfirmTransaction extends Component {
         setTransactionToConfirm(paramsTransactionId)
       }
     } else if (unconfirmedTransactions.length) {
-      const transactionId = unconfirmedTransactions[0].id
+      const totalUnconfirmed = unconfirmedTransactions.length
+      const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id
       setTransactionToConfirm(transactionId)
     }
   }
-- 
cgit 


From 9cde5ab11b0670eed7baeb2f31486cb3e253bdcb Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 28 Jun 2018 11:23:31 -0700
Subject: Use eth-method-registry to get method data

---
 .../confirm-transaction-base.component.js          | 14 ++++++++----
 .../confirm-transaction-base.container.js          |  2 ++
 .../confirm-transaction-switch.component.js        | 26 +++++++++++++++-------
 .../confirm-transaction-switch.util.js             |  8 -------
 .../confirm-transaction.component.js               |  8 +++++--
 5 files changed, 36 insertions(+), 22 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 dfbbd0177..1a399a464 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
@@ -18,6 +18,7 @@ export default class ConfirmTransactionBase extends Component {
     // Redux props
     txData: PropTypes.object,
     tokenData: PropTypes.object,
+    methodData: PropTypes.object,
     tokenProps: PropTypes.object,
     isTxReprice: PropTypes.bool,
     nonce: PropTypes.string,
@@ -245,7 +246,7 @@ export default class ConfirmTransactionBase extends Component {
           data,
         } = {},
       } = {},
-      tokenData: {
+      methodData: {
         name,
         params,
       } = {},
@@ -266,7 +267,12 @@ export default class ConfirmTransactionBase extends Component {
           </span>
         </div>
         <div className="confirm-page-container-content__data-box">
-          { JSON.stringify(params, null, 2) }
+          <div className="confirm-page-container-content__data-field-label">
+            { `${t('parameters')}:` }
+          </div>
+          <div>
+            <pre>{ JSON.stringify(params, null, 2) }</pre>
+          </div>
         </div>
         <div className="confirm-page-container-content__data-box-label">
           {`${t('hexData')}:`}
@@ -318,7 +324,7 @@ export default class ConfirmTransactionBase extends Component {
       fromAddress,
       toName,
       toAddress,
-      tokenData,
+      methodData,
       ethTransactionAmount,
       fiatTransactionAmount,
       valid: propsValid,
@@ -336,7 +342,7 @@ export default class ConfirmTransactionBase extends Component {
       warning,
     } = this.props
 
-    const { name } = tokenData
+    const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
     const { valid, errorMessage } = this.getError()
 
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 19c39aed9..4f1fb86c1 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
@@ -21,6 +21,7 @@ const mapStateToProps = (state, props) => {
     fiatTransactionTotal,
     hexGasTotal,
     tokenData,
+    methodData,
     txData,
     tokenProps,
     nonce,
@@ -60,6 +61,7 @@ const mapStateToProps = (state, props) => {
     hexGasTotal,
     txData,
     tokenData,
+    methodData,
     tokenProps,
     isTxReprice,
     currentCurrency,
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 9ec0fc623..db28d0bad 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
@@ -11,7 +11,7 @@ import {
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
-import { isConfirmDeployContract, getTokenData } from './confirm-transaction-switch.util'
+import { isConfirmDeployContract } from './confirm-transaction-switch.util'
 import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
 
 export default class ConfirmTransactionSwitch extends Component {
@@ -19,19 +19,29 @@ export default class ConfirmTransactionSwitch extends Component {
     confirmTransaction: PropTypes.object,
   }
 
-  redirectToTransaction (txData) {
-    const { id, txParams: { data } } = txData
+  redirectToTransaction () {
+    const {
+      confirmTransaction: {
+        txData,
+        methodData: { name },
+        fetchingMethodData,
+      },
+    } = this.props
+    const { id } = txData
 
     if (isConfirmDeployContract(txData)) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
       return <Redirect to={{ pathname }} />
     }
 
-    if (data) {
-      const tokenData = getTokenData(data)
-      const { name: tokenMethodName } = tokenData || {}
+    if (fetchingMethodData) {
+      return <Loading />
+    }
+
+    if (name) {
+      const methodName = name.toLowerCase()
 
-      switch (tokenMethodName) {
+      switch (methodName.toLowerCase()) {
         case TOKEN_METHOD_TRANSFER: {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
           return <Redirect to={{ pathname }} />
@@ -55,7 +65,7 @@ export default class ConfirmTransactionSwitch extends Component {
     const { confirmTransaction: { txData } } = this.props
 
     if (txData.txParams) {
-      return this.redirectToTransaction(txData)
+      return this.redirectToTransaction()
     } else if (txData.msgParams) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${txData.id}${SIGNATURE_REQUEST_PATH}`
       return <Redirect to={{ pathname }} />
diff --git a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
index dd1dec6ae..536aa5212 100644
--- a/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
+++ b/ui/app/components/pages/confirm-transaction-switch/confirm-transaction-switch.util.js
@@ -1,12 +1,4 @@
-import abi from 'human-standard-token-abi'
-import abiDecoder from 'abi-decoder'
-abiDecoder.addABI(abi)
-
 export function isConfirmDeployContract (txData = {}) {
   const { txParams = {} } = txData
   return !txParams.to
 }
-
-export function getTokenData (data = {}) {
-  return abiDecoder.decodeMethod(data)
-}
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index d4581e8ed..219f5b49a 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -85,8 +85,12 @@ export default class ConfirmTransaction extends Component {
       }
     } else if (unconfirmedTransactions.length) {
       const totalUnconfirmed = unconfirmedTransactions.length
-      const transactionId = unconfirmedTransactions[totalUnconfirmed - 1].id
-      setTransactionToConfirm(transactionId)
+      const transaction = unconfirmedTransactions[totalUnconfirmed - 1]
+      const { id: transactionId, loadingDefaults } = transaction
+
+      if (!loadingDefaults) {
+        setTransactionToConfirm(transactionId)
+      }
     }
   }
 
-- 
cgit 


From a2d9c43fba49680d7553409a4f5013d3febd80e9 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 6 Jul 2018 11:58:41 -0700
Subject: Various fixes from PR comments

---
 .../confirm-transaction-base.component.js          | 147 +++++++--------------
 .../confirm-transaction-base.container.js          |  76 ++++++++++-
 .../confirm-transaction-switch.component.js        |  15 ++-
 .../confirm-transaction-switch.container.js        |  12 +-
 .../confirm-transaction.component.js               |  24 +++-
 .../confirm-transaction.container.js               |   7 +-
 6 files changed, 162 insertions(+), 119 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 1a399a464..842b34d2e 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
@@ -1,11 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../confirm-page-container'
-import { formatCurrency, getHexGasTotal } from '../../../helpers/confirm-transaction/util'
+import { formatCurrency } from '../../../helpers/confirm-transaction/util'
 import { isBalanceSufficient } from '../../send_/send.utils'
 import { DEFAULT_ROUTE } from '../../../routes'
-import { conversionGreaterThan } from '../../../conversion-util'
-import { MIN_GAS_LIMIT_DEC } from '../../send_/send.constants'
+import {
+  INSUFFICIENT_FUNDS_ERROR_KEY,
+  TRANSACTION_ERROR_KEY,
+} from '../../../constants/error-keys'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -13,57 +15,58 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   static propTypes = {
+    // react-router props
     match: PropTypes.object,
     history: PropTypes.object,
     // Redux props
-    txData: PropTypes.object,
-    tokenData: PropTypes.object,
-    methodData: PropTypes.object,
-    tokenProps: PropTypes.object,
-    isTxReprice: PropTypes.bool,
-    nonce: PropTypes.string,
-    fromName: PropTypes.string,
-    fromAddress: PropTypes.string,
-    toName: PropTypes.string,
-    toAddress: PropTypes.string,
-    transactionStatus: PropTypes.string,
+    balance: PropTypes.string,
+    cancelTransaction: PropTypes.func,
+    clearConfirmTransaction: PropTypes.func,
+    clearSend: PropTypes.func,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+    editTransaction: PropTypes.func,
     ethTransactionAmount: PropTypes.string,
     ethTransactionFee: PropTypes.string,
     ethTransactionTotal: PropTypes.string,
     fiatTransactionAmount: PropTypes.string,
     fiatTransactionFee: PropTypes.string,
     fiatTransactionTotal: PropTypes.string,
+    fromAddress: PropTypes.string,
+    fromName: PropTypes.string,
     hexGasTotal: PropTypes.string,
-    balance: PropTypes.string,
-    currentCurrency: PropTypes.string,
-    conversionRate: PropTypes.number,
-    clearConfirmTransaction: PropTypes.func,
-    cancelTransaction: PropTypes.func,
-    clearSend: PropTypes.func,
+    isTxReprice: PropTypes.bool,
+    methodData: PropTypes.object,
+    nonce: PropTypes.string,
     sendTransaction: PropTypes.func,
-    editTransaction: PropTypes.func,
     showCustomizeGasModal: PropTypes.func,
-    updateGasAndCalculate: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
+    toAddress: PropTypes.string,
+    tokenData: PropTypes.object,
+    tokenProps: PropTypes.object,
+    toName: PropTypes.string,
+    transactionStatus: PropTypes.string,
+    txData: PropTypes.object,
     // Component props
     action: PropTypes.string,
-    hideDetails: PropTypes.bool,
-    hideData: PropTypes.bool,
-    detailsComponent: PropTypes.node,
-    dataComponent: PropTypes.node,
-    summaryComponent: PropTypes.node,
     contentComponent: PropTypes.node,
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    hideSubtitle: PropTypes.bool,
-    valid: PropTypes.bool,
+    dataComponent: PropTypes.node,
+    detailsComponent: PropTypes.node,
+    errorKey: PropTypes.string,
     errorMessage: PropTypes.string,
-    warning: PropTypes.string,
+    hideData: PropTypes.bool,
+    hideDetails: PropTypes.bool,
+    hideSubtitle: PropTypes.bool,
     identiconAddress: PropTypes.string,
+    onCancel: PropTypes.func,
     onEdit: PropTypes.func,
     onEditGas: PropTypes.func,
-    onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
+    subtitle: PropTypes.string,
+    summaryComponent: PropTypes.node,
+    title: PropTypes.string,
+    valid: PropTypes.bool,
+    warning: PropTypes.string,
   }
 
   componentDidUpdate () {
@@ -86,9 +89,7 @@ export default class ConfirmTransactionBase extends Component {
     }
   }
 
-  getError () {
-    const INSUFFICIENT_FUNDS_ERROR = this.context.t('insufficientFunds')
-    const TRANSACTION_ERROR = this.context.t('transactionError')
+  getErrorKey () {
     const {
       balance,
       conversionRate,
@@ -111,68 +112,14 @@ export default class ConfirmTransactionBase extends Component {
     if (insufficientBalance) {
       return {
         valid: false,
-        errorMessage: INSUFFICIENT_FUNDS_ERROR,
+        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
       }
     }
 
     if (simulationFails) {
       return {
         valid: false,
-        errorMessage: TRANSACTION_ERROR,
-      }
-    }
-
-    return {
-      valid: true,
-    }
-  }
-
-  validateEditGas ({ gasLimit, gasPrice }) {
-    const { t } = this.context
-    const {
-      balance,
-      conversionRate,
-      txData: {
-        txParams: {
-          value: amount,
-        } = {},
-      } = {},
-    } = this.props
-
-    const INSUFFICIENT_FUNDS_ERROR = t('insufficientFunds')
-    const GAS_LIMIT_TOO_LOW_ERROR = t('gasLimitTooLow')
-
-    const gasTotal = getHexGasTotal({ gasLimit, gasPrice })
-    const hasSufficientBalance = isBalanceSufficient({
-      amount,
-      gasTotal,
-      balance,
-      conversionRate,
-    })
-
-    if (!hasSufficientBalance) {
-      return {
-        valid: false,
-        errorMessage: INSUFFICIENT_FUNDS_ERROR,
-      }
-    }
-
-    const gasLimitTooLow = gasLimit && conversionGreaterThan(
-      {
-        value: MIN_GAS_LIMIT_DEC,
-        fromNumericBase: 'dec',
-        conversionRate,
-      },
-      {
-        value: gasLimit,
-        fromNumericBase: 'hex',
-      },
-    )
-
-    if (gasLimitTooLow) {
-      return {
-        valid: false,
-        errorMessage: GAS_LIMIT_TOO_LOW_ERROR,
+        errorKey: TRANSACTION_ERROR_KEY,
       }
     }
 
@@ -182,16 +129,12 @@ export default class ConfirmTransactionBase extends Component {
   }
 
   handleEditGas () {
-    const { onEditGas, showCustomizeGasModal, txData, updateGasAndCalculate } = this.props
+    const { onEditGas, showCustomizeGasModal } = this.props
 
     if (onEditGas) {
       onEditGas()
     } else {
-      showCustomizeGasModal({
-        txData,
-        onSubmit: txData => updateGasAndCalculate(txData),
-        validate: ({ gasLimit, gasPrice }) => this.validateEditGas({ gasLimit, gasPrice }),
-      })
+      showCustomizeGasModal()
     }
   }
 
@@ -328,7 +271,8 @@ export default class ConfirmTransactionBase extends Component {
       ethTransactionAmount,
       fiatTransactionAmount,
       valid: propsValid,
-      errorMessage: propsErrorMessage,
+      errorMessage,
+      errorKey: propsErrorKey,
       currentCurrency,
       action,
       title,
@@ -344,7 +288,7 @@ export default class ConfirmTransactionBase extends Component {
 
     const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
-    const { valid, errorMessage } = this.getError()
+    const { valid, errorKey } = this.getErrorKey()
 
     return (
       <ConfirmPageContainer
@@ -363,7 +307,8 @@ export default class ConfirmTransactionBase extends Component {
         contentComponent={contentComponent}
         nonce={nonce}
         identiconAddress={identiconAddress}
-        errorMessage={propsErrorMessage || errorMessage}
+        errorMessage={errorMessage}
+        errorKey={propsErrorKey || errorKey}
         warning={warning}
         valid={propsValid || valid}
         onEdit={() => this.handleEdit()}
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 4f1fb86c1..31108bbd0 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,6 +8,14 @@ import {
   updateGasAndCalculate,
 } from '../../../ducks/confirm-transaction.duck'
 import { clearSend, cancelTx, updateAndApproveTx, showModal } from '../../../actions'
+import {
+  INSUFFICIENT_FUNDS_ERROR_KEY,
+  GAS_LIMIT_TOO_LOW_ERROR_KEY,
+} from '../../../constants/error-keys'
+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'
 
 const mapStateToProps = (state, props) => {
   const { toAddress: propsToAddress } = props
@@ -89,7 +97,73 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+const getValidateEditGas = ({ balance, conversionRate, txData }) => {
+  const { txParams: { value: amount } = {} } = txData
+
+  return ({ gasLimit, gasPrice }) => {
+    const gasTotal = getHexGasTotal({ gasLimit, gasPrice })
+    const hasSufficientBalance = isBalanceSufficient({
+      amount,
+      gasTotal,
+      balance,
+      conversionRate,
+    })
+
+    if (!hasSufficientBalance) {
+      return {
+        valid: false,
+        errorKey: INSUFFICIENT_FUNDS_ERROR_KEY,
+      }
+    }
+
+    const gasLimitTooLow = gasLimit && conversionGreaterThan(
+      {
+        value: MIN_GAS_LIMIT_DEC,
+        fromNumericBase: 'dec',
+        conversionRate,
+      },
+      {
+        value: gasLimit,
+        fromNumericBase: 'hex',
+      },
+    )
+
+    if (gasLimitTooLow) {
+      return {
+        valid: false,
+        errorKey: GAS_LIMIT_TOO_LOW_ERROR_KEY,
+      }
+    }
+
+    return {
+      valid: true,
+    }
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { balance, conversionRate, txData } = stateProps
+  const {
+    showCustomizeGasModal: dispatchShowCustomizeGasModal,
+    updateGasAndCalculate: dispatchUpdateGasAndCalculate,
+    ...otherDispatchProps
+  } = dispatchProps
+
+  const validateEditGas = getValidateEditGas({ balance, conversionRate, txData })
+
+  return {
+    ...stateProps,
+    ...otherDispatchProps,
+    ...ownProps,
+    showCustomizeGasModal: () => dispatchShowCustomizeGasModal({
+      txData,
+      onSubmit: txData => dispatchUpdateGasAndCalculate(txData),
+      validate: validateEditGas,
+    }),
+  }
+}
+
 export default compose(
   withRouter,
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(ConfirmTransactionBase)
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 db28d0bad..25259b98c 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
@@ -16,19 +16,20 @@ import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transacti
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
-    confirmTransaction: PropTypes.object,
+    txData: PropTypes.object,
+    methodData: PropTypes.object,
+    fetchingMethodData: PropTypes.bool,
   }
 
   redirectToTransaction () {
     const {
-      confirmTransaction: {
-        txData,
-        methodData: { name },
-        fetchingMethodData,
-      },
+      txData,
+      methodData: { name },
+      fetchingMethodData,
     } = this.props
     const { id } = txData
 
+
     if (isConfirmDeployContract(txData)) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
       return <Redirect to={{ pathname }} />
@@ -62,7 +63,7 @@ export default class ConfirmTransactionSwitch extends Component {
   }
 
   render () {
-    const { confirmTransaction: { txData } } = this.props
+    const { txData } = this.props
 
     if (txData.txParams) {
       return this.redirectToTransaction()
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 c04d388a9..3d7fc78cc 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
@@ -2,10 +2,18 @@ import { connect } from 'react-redux'
 import ConfirmTransactionSwitch from './confirm-transaction-switch.component'
 
 const mapStateToProps = state => {
-  const { confirmTransaction } = state
+  const {
+    confirmTransaction: {
+      txData,
+      methodData,
+      fetchingMethodData,
+    },
+  } = state
 
   return {
-    confirmTransaction,
+    txData,
+    methodData,
+    fetchingMethodData,
   }
 }
 
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index 219f5b49a..874a89fd2 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Switch, Route } from 'react-router-dom'
-import R from 'ramda'
 import Loading from '../../loading-screen'
 import ConfirmTransactionSwitch from '../confirm-transaction-switch'
 import ConfirmTransactionBase from '../confirm-transaction-base'
@@ -30,6 +29,12 @@ export default class ConfirmTransaction extends Component {
     unconfirmedTransactions: PropTypes.array,
     setTransactionToConfirm: PropTypes.func,
     confirmTransaction: PropTypes.object,
+    clearConfirmTransaction: PropTypes.func,
+  }
+
+  getParamsTransactionId () {
+    const { match: { params: { id } = {} } } = this.props
+    return id || null
   }
 
   componentDidMount () {
@@ -52,13 +57,16 @@ export default class ConfirmTransaction extends Component {
 
   componentDidUpdate () {
     const {
-      match: { params: { id: paramsTransactionId } = {} },
       setTransactionToConfirm,
       confirmTransaction: { txData: { id: transactionId } = {} },
+      clearConfirmTransaction,
     } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
 
     if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') {
+      clearConfirmTransaction()
       setTransactionToConfirm(paramsTransactionId)
+      return
     }
 
     if (!transactionId) {
@@ -70,13 +78,13 @@ export default class ConfirmTransaction extends Component {
     const {
       history,
       unconfirmedTransactions,
-      match: { params: { id: paramsTransactionId } = {} },
       setTransactionToConfirm,
     } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
 
     if (paramsTransactionId) {
       // Check to make sure params ID is valid
-      const tx = R.find(({ id }) => id + '' === paramsTransactionId)(unconfirmedTransactions)
+      const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId)
 
       if (!tx) {
         history.replace(DEFAULT_ROUTE)
@@ -96,8 +104,12 @@ export default class ConfirmTransaction extends Component {
 
   render () {
     const { confirmTransaction: { txData: { id } } = {} } = this.props
+    const paramsTransactionId = this.getParamsTransactionId()
 
-    return id
+    // Show routes when state.confirmTransaction has been set and when either the ID in the params
+    // isn't specified or is specified and matches the ID in state.confirmTransaction in order to
+    // support URLs of /confirm-transaction or /confirm-transaction/<transactionId>
+    return id && (!paramsTransactionId || paramsTransactionId === id + '')
       ? (
         <Switch>
           <Route
@@ -130,7 +142,7 @@ export default class ConfirmTransaction extends Component {
             path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
             component={ConfTx}
           />
-          <Route path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`} component={ConfirmTransactionSwitch} />
+          <Route path="*" component={ConfirmTransactionSwitch} />
         </Switch>
       )
       : <Loading />
diff --git a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
index 1ad5aa355..1bc2f1efb 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.container.js
@@ -1,7 +1,10 @@
 import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
-import { setTransactionToConfirm } from '../../../ducks/confirm-transaction.duck'
+import {
+  setTransactionToConfirm,
+  clearConfirmTransaction,
+} from '../../../ducks/confirm-transaction.duck'
 import ConfirmTransaction from './confirm-transaction.component'
 import { getTotalUnapprovedCount } from '../../../selectors'
 import { unconfirmedTransactionsListSelector } from '../../../selectors/confirm-transaction'
@@ -20,7 +23,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
   return {
     setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)),
-
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
   }
 }
 
-- 
cgit 


From dddbb4250b30b7263eb97ddc2e23791166bcc98e Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 6 Jul 2018 20:04:20 -0400
Subject: update connect harwdware screen

---
 .../connect-hardware/connect-screen.js             | 28 +++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

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

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 ec6a11b40..cf6353bf8 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
@@ -10,9 +10,9 @@ class ConnectScreen extends Component {
     renderUnsupportedBrowser () {
         return (
             h('div', {}, [
-                h('div.hw-unsupported-browser', [
-                    h('h3.hw-unsupported-browser__title', {}, this.context.t('browserNotSupported')),
-                    h('p.hw-unsupported-browser__msg', {}, this.context.t('chromeRequiredForTrezor')),
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
+                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
                 ]),
                 h(
                     'button.btn-primary.btn--large',
@@ -25,18 +25,30 @@ class ConnectScreen extends Component {
         )
     }
 
-    renderConnectButton () {
-        return h(
+    renderConnectScreen () {
+        return (
+            h('div', {}, [
+                h('div.hw-connect', [
+                    h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
+                    h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
+                    h('p.hw-connect__msg', {}, [
+                        this.context.t('connectToTrezorTrouble'),
+                        h('a.___info-link', { url: 'https://support.metamask.io/', target: '_blank'}, this.context.t('learnMore')),
+                    ]),
+                ]),
+                h(
                     'button.btn-primary.btn--large',
-                    { onClick: this.props.connectToTrezor.bind(this), style: { margin: 12 } },
+                    { onClick: this.props.connectToTrezor.bind(this) },
                     this.props.btnText
-                )
+                ),
+            ])
+        )
       }
 
     render () {
         const isChrome = window.navigator.userAgent.search('Chrome') !== -1
         if (isChrome) {
-            return this.renderConnectButton()
+            return this.renderConnectScreen()
         }
         return this.renderUnsupportedBrowser()
     }
-- 
cgit 


From 512760154528c47213cc8ff75475c21e3e674a23 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 6 Jul 2018 20:37:08 -0400
Subject: copy updated

---
 .../pages/create-account/connect-hardware/connect-screen.js          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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

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 cf6353bf8..dd9fdfba2 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
@@ -33,7 +33,10 @@ class ConnectScreen extends Component {
                     h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
                     h('p.hw-connect__msg', {}, [
                         this.context.t('connectToTrezorTrouble'),
-                        h('a.___info-link', { url: 'https://support.metamask.io/', target: '_blank'}, this.context.t('learnMore')),
+                        h('a.hw-connect__link', {
+                            href: 'https://support.metamask.io/',
+                            target: '_blank',
+                        }, ` ${this.context.t('learnMore')}`),
                     ]),
                 ]),
                 h(
-- 
cgit 


From 7cca7ace2ea4cd4b9d3a242067c9a7c344406aba Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Mon, 9 Jul 2018 17:24:52 -0400
Subject: fix all the account related bugs

---
 .../connect-hardware/account-list.js               | 11 +-------
 .../pages/create-account/connect-hardware/index.js | 29 +++++++++++++++++++---
 2 files changed, 27 insertions(+), 13 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 77e0af3ac..170d8f0b3 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
@@ -2,21 +2,12 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
-const { formatBalance } = require('../../../../util')
 
 class AccountList extends Component {
     constructor (props, context) {
         super(props)
     }
 
-    getBalance (address) {
-        // Get the balance
-        const { accounts } = this.props
-        const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
-        const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
-        return formattedBalance
-    }
-
     renderAccounts () {
         return h('div.hw-account-list', [
             h('div.hw-account-list__title_wrapper', [
@@ -44,7 +35,7 @@ class AccountList extends Component {
                     `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
                     ),
                 ]),
-                h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
+                h('span.hw-account-list__item__balance', `${a.balance}`),
                 h(
                     'a.hw-account-list__item__link',
                     {
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 22c54d28c..1aaa0be64 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -6,6 +6,7 @@ const actions = require('../../../../actions')
 const ConnectScreen = require('./connect-screen')
 const AccountList = require('./account-list')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+const { formatBalance } = require('../../../../util')
 
 class ConnectHardwareForm extends Component {
   constructor (props, context) {
@@ -31,20 +32,42 @@ class ConnectHardwareForm extends Component {
     this.setState({selectedAccount: account.toString(), error: null})
   }
 
+  getBalance (address) {
+    // Get the balance
+    const { accounts } = this.props
+    const balanceValue = accounts && accounts[address.toLowerCase()] ? accounts[address.toLowerCase()].balance : ''
+    const formattedBalance = balanceValue !== null ? formatBalance(balanceValue, 6) : '...'
+    console.log('[TREZOR]: got balance', address, accounts, balanceValue, formattedBalance)
+    return formattedBalance
+  }
+
   getPage = (page) => {
     this.props
       .connectHardware('trezor', page)
       .then(accounts => {
+        console.log('[TREZOR]: GOT PAGE!', accounts)
         if (accounts.length) {
-          const newState = { accounts: accounts }
+          const newState = {}
           // Default to the first account
           if (this.state.selectedAccount === null) {
             const firstAccount = accounts[0]
-            newState.selectedAccount = firstAccount.index.toString()
+            newState.selectedAccount = firstAccount.index.toString() === '0' ? firstAccount.index.toString() : null
+            console.log('[TREZOR]: just defaulted to account', newState.selectedAccount)
           // If the page doesn't contain the selected account, let's deselect it
-          } else if (!accounts.filter(a => a.index.toString() === '').lenght) {
+          } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
             newState.selectedAccount = null
+            console.log('[TREZOR]: just removed default account', newState.selectedAccount)
           }
+
+          console.log('[TREZOR]: mapping balances')
+
+          // Map accounts with balances
+          newState.accounts = accounts.map(account => {
+            account.balance = this.getBalance(account.address)
+            return account
+          })
+
+          console.log('[TREZOR]: ABOUT TO RENDER ACCOUNTS: ', page, newState.accounts)
           this.setState(newState)
         }
       })
-- 
cgit 


From 2de3039b6b21ca05ef185c078b67815448864c72 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Mon, 9 Jul 2018 17:55:37 -0400
Subject: fix account duplication

---
 ui/app/components/pages/create-account/connect-hardware/index.js | 6 ------
 1 file changed, 6 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 1aaa0be64..126102235 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -37,7 +37,6 @@ class ConnectHardwareForm extends Component {
     const { accounts } = this.props
     const balanceValue = accounts && accounts[address.toLowerCase()] ? accounts[address.toLowerCase()].balance : ''
     const formattedBalance = balanceValue !== null ? formatBalance(balanceValue, 6) : '...'
-    console.log('[TREZOR]: got balance', address, accounts, balanceValue, formattedBalance)
     return formattedBalance
   }
 
@@ -45,21 +44,17 @@ class ConnectHardwareForm extends Component {
     this.props
       .connectHardware('trezor', page)
       .then(accounts => {
-        console.log('[TREZOR]: GOT PAGE!', accounts)
         if (accounts.length) {
           const newState = {}
           // Default to the first account
           if (this.state.selectedAccount === null) {
             const firstAccount = accounts[0]
             newState.selectedAccount = firstAccount.index.toString() === '0' ? firstAccount.index.toString() : null
-            console.log('[TREZOR]: just defaulted to account', newState.selectedAccount)
           // If the page doesn't contain the selected account, let's deselect it
           } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
             newState.selectedAccount = null
-            console.log('[TREZOR]: just removed default account', newState.selectedAccount)
           }
 
-          console.log('[TREZOR]: mapping balances')
 
           // Map accounts with balances
           newState.accounts = accounts.map(account => {
@@ -67,7 +62,6 @@ class ConnectHardwareForm extends Component {
             return account
           })
 
-          console.log('[TREZOR]: ABOUT TO RENDER ACCOUNTS: ', page, newState.accounts)
           this.setState(newState)
         }
       })
-- 
cgit 


From 2175d03ccac7ff16e241308160247fbedda284d0 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 10 Jul 2018 14:56:12 -0700
Subject: Prevent users from submitting password multiple times on the unlock
 screen

---
 .../pages/unlock-page/unlock-page.component.js     | 72 +++++++++++-----------
 1 file changed, 36 insertions(+), 36 deletions(-)

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

diff --git a/ui/app/components/pages/unlock-page/unlock-page.component.js b/ui/app/components/pages/unlock-page/unlock-page.component.js
index a1d3f9181..94915df76 100644
--- a/ui/app/components/pages/unlock-page/unlock-page.component.js
+++ b/ui/app/components/pages/unlock-page/unlock-page.component.js
@@ -2,19 +2,27 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
 import TextField from '../../text-field'
-
-const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums')
-const { getEnvironmentType } = require('../../../../../app/scripts/lib/util')
-const getCaretCoordinates = require('textarea-caret')
-const EventEmitter = require('events').EventEmitter
-const Mascot = require('../../mascot')
-const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes')
-
-class UnlockPage extends Component {
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
+import getCaretCoordinates from 'textarea-caret'
+import { EventEmitter } from 'events'
+import Mascot from '../../mascot'
+import { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } from '../../../routes'
+
+export default class UnlockPage extends Component {
   static contextTypes = {
     t: PropTypes.func,
   }
 
+  static propTypes = {
+    forgotPassword: PropTypes.func,
+    tryUnlockMetamask: PropTypes.func,
+    markPasswordForgotten: PropTypes.func,
+    history: PropTypes.object,
+    isUnlocked: PropTypes.bool,
+    useOldInterface: PropTypes.func,
+  }
+
   constructor (props) {
     super(props)
 
@@ -23,6 +31,7 @@ class UnlockPage extends Component {
       error: null,
     }
 
+    this.submitting = false
     this.animationEventEmitter = new EventEmitter()
   }
 
@@ -41,20 +50,21 @@ class UnlockPage extends Component {
     const { password } = this.state
     const { tryUnlockMetamask, history } = this.props
 
-    if (password === '') {
+    if (password === '' || this.submitting) {
       return
     }
 
     this.setState({ error: null })
+    this.submitting = true
 
     try {
       await tryUnlockMetamask(password)
+      this.submitting = false
+      history.push(DEFAULT_ROUTE)
     } catch ({ message }) {
       this.setState({ error: message })
-      return
+      this.submitting = false
     }
-
-    history.push(DEFAULT_ROUTE)
   }
 
   handleInputChange ({ target }) {
@@ -98,7 +108,9 @@ class UnlockPage extends Component {
   }
 
   render () {
-    const { error } = this.state
+    const { password, error } = this.state
+    const { t } = this.context
+    const { markPasswordForgotten, history } = this.props
 
     return (
       <div className="unlock-page__container">
@@ -111,18 +123,18 @@ class UnlockPage extends Component {
             />
           </div>
           <h1 className="unlock-page__title">
-            { this.context.t('welcomeBack') }
+            { t('welcomeBack') }
           </h1>
-          <div>{ this.context.t('unlockMessage') }</div>
+          <div>{ t('unlockMessage') }</div>
           <form
             className="unlock-page__form"
             onSubmit={event => this.handleSubmit(event)}
           >
             <TextField
               id="password"
-              label={this.context.t('password')}
+              label={t('password')}
               type="password"
-              value={this.state.password}
+              value={password}
               onChange={event => this.handleInputChange(event)}
               error={error}
               autoFocus
@@ -136,28 +148,28 @@ class UnlockPage extends Component {
             <div
               className="unlock-page__link"
               onClick={() => {
-                this.props.markPasswordForgotten()
-                this.props.history.push(RESTORE_VAULT_ROUTE)
+                markPasswordForgotten()
+                history.push(RESTORE_VAULT_ROUTE)
 
                 if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
                   global.platform.openExtensionInBrowser()
                 }
               }}
             >
-              { this.context.t('restoreFromSeed') }
+              { t('restoreFromSeed') }
             </div>
             <div
               className="unlock-page__link unlock-page__link--import"
               onClick={() => {
-                this.props.markPasswordForgotten()
-                this.props.history.push(RESTORE_VAULT_ROUTE)
+                markPasswordForgotten()
+                history.push(RESTORE_VAULT_ROUTE)
 
                 if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) {
                   global.platform.openExtensionInBrowser()
                 }
               }}
             >
-              { this.context.t('importUsingSeed') }
+              { t('importUsingSeed') }
             </div>
           </div>
         </div>
@@ -165,15 +177,3 @@ class UnlockPage extends Component {
     )
   }
 }
-
-UnlockPage.propTypes = {
-  forgotPassword: PropTypes.func,
-  tryUnlockMetamask: PropTypes.func,
-  markPasswordForgotten: PropTypes.func,
-  history: PropTypes.object,
-  isUnlocked: PropTypes.bool,
-  t: PropTypes.func,
-  useOldInterface: PropTypes.func,
-}
-
-export default UnlockPage
-- 
cgit 


From 9bfcb9c505595cb2e539700433835f30c8bcf049 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 9 Jul 2018 17:51:55 -0230
Subject: Remove unneeded MetaMaskConnect connect wrapper

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

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

diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index c53413d3b..d24d5cc55 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -1,6 +1,6 @@
 const { Component } = require('react')
+const { connect } = require('react-redux')
 const PropTypes = require('prop-types')
-const connect = require('../../metamask-connect')
 const { Redirect, withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const h = require('react-hyperscript')
-- 
cgit 


From 67017711df521e4d9f92cfc756b5468f7704a79c Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 11 Jul 2018 17:34:41 -0700
Subject: Fix font sizes, colors. Include data tab for send-eth transaction
 confirmations that have data

---
 .../pages/confirm-send-ether/confirm-send-ether.component.js   | 10 +++++++++-
 .../pages/confirm-send-ether/confirm-send-ether.container.js   | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

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

diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
index c590bacf3..442a478b8 100644
--- a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
+++ b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.component.js
@@ -11,6 +11,7 @@ export default class ConfirmSendEther extends Component {
   static propTypes = {
     editTransaction: PropTypes.func,
     history: PropTypes.object,
+    txParams: PropTypes.object,
   }
 
   handleEdit ({ txData }) {
@@ -19,11 +20,18 @@ export default class ConfirmSendEther extends Component {
     history.push(SEND_ROUTE)
   }
 
+  shouldHideData () {
+    const { txParams = {} } = this.props
+    return !txParams.data
+  }
+
   render () {
+    const hideData = this.shouldHideData()
+
     return (
       <ConfirmTransactionBase
         action={this.context.t('confirm')}
-        hideData
+        hideData={hideData}
         onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
       />
     )
diff --git a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
index 898735d1a..e48ef54a8 100644
--- a/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
+++ b/ui/app/components/pages/confirm-send-ether/confirm-send-ether.container.js
@@ -5,6 +5,14 @@ import { updateSend } from '../../../actions'
 import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
 import ConfirmSendEther from './confirm-send-ether.component'
 
+const mapStateToProps = state => {
+  const { confirmTransaction: { txData: { txParams } = {} } } = state
+
+  return {
+    txParams,
+  }
+}
+
 const mapDispatchToProps = dispatch => {
   return {
     editTransaction: txData => {
@@ -33,5 +41,5 @@ const mapDispatchToProps = dispatch => {
 
 export default compose(
   withRouter,
-  connect(null, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps)
 )(ConfirmSendEther)
-- 
cgit 


From 80e875308b4447ed38d7e0f677570d73956dd9de Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 11 Jul 2018 21:21:36 -0400
Subject: forget device and autiload account features added

---
 .../connect-hardware/account-list.js               | 10 +++++++
 .../pages/create-account/connect-hardware/index.js | 31 +++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

(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 170d8f0b3..3bd6a00a7 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
@@ -90,11 +90,20 @@ class AccountList extends Component {
     ])
   }
 
+  renderForgetDevice () {
+    return h('div.hw-forget-device-container', {}, [
+      h('a', {
+        onClick: this.props.onForgetDevice.bind(this),
+      }, this.context.t('forgetDevice')),
+    ])
+  }
+
   render () {
     return h('div', {}, [
         this.renderAccounts(),
         this.renderPagination(),
         this.renderButtons(),
+        this.renderForgetDevice(),
     ])
   }
 
@@ -104,6 +113,7 @@ class AccountList extends Component {
 AccountList.propTypes = {
     accounts: PropTypes.array.isRequired,
     onAccountChange: PropTypes.func.isRequired,
+    onForgetDevice: PropTypes.func.isRequired,
     getPage: PropTypes.func.isRequired,
     network: PropTypes.string,
     selectedAccount: PropTypes.string,
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 126102235..9aef36cfb 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -13,13 +13,19 @@ class ConnectHardwareForm extends Component {
     super(props)
     this.state = {
       error: null,
-      response: null,
       btnText: context.t('connectToTrezor'),
       selectedAccount: null,
       accounts: [],
     }
   }
 
+  async componentDidMount () {
+    const unlocked = await this.props.checkHardwareStatus('trezor')
+    if (unlocked) {
+      this.getPage(0)
+    }
+  }
+
   connectToTrezor = () => {
     if (this.state.accounts.length) {
       return null
@@ -70,6 +76,20 @@ class ConnectHardwareForm extends Component {
       })
   }
 
+  onForgetDevice = () => {
+    this.props.forgetDevice('trezor')
+    .then(_ => {
+      this.setState({
+        error: null,
+        btnText: this.context.t('connectToTrezor'),
+        selectedAccount: null,
+        accounts: [],
+      })
+    }).catch(e => {
+      this.setState({ error: e.toString() })
+    })
+  }
+
   onUnlockAccount = () => {
 
     if (this.state.selectedAccount === null) {
@@ -110,6 +130,7 @@ class ConnectHardwareForm extends Component {
       getPage: this.getPage,
       history: this.props.history,
       onUnlockAccount: this.onUnlockAccount,
+      onForgetDevice: this.onForgetDevice,
       onCancel: this.onCancel,
     })
   }
@@ -127,6 +148,8 @@ ConnectHardwareForm.propTypes = {
   showImportPage: PropTypes.func,
   showConnectPage: PropTypes.func,
   connectHardware: PropTypes.func,
+  checkHardwareStatus: PropTypes.func,
+  forgetDevice: PropTypes.func,
   unlockTrezorAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
@@ -154,6 +177,12 @@ const mapDispatchToProps = dispatch => {
     connectHardware: (deviceName, page) => {
       return dispatch(actions.connectHardware(deviceName, page))
     },
+    checkHardwareStatus: (deviceName) => {
+      return dispatch(actions.checkHardwareStatus(deviceName))
+    },
+    forgetDevice: (deviceName) => {
+      return dispatch(actions.forgetDevice(deviceName))
+    },
     unlockTrezorAccount: index => {
       return dispatch(actions.unlockTrezorAccount(index))
     },
-- 
cgit 


From 289795fb1251f3d6bc2206efb2d640fcedae5ee4 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 13 Jul 2018 00:09:42 -0400
Subject: fix account balance bug

---
 .../pages/create-account/connect-hardware/index.js | 24 ++++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 9aef36cfb..fa9cf4894 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -19,6 +19,18 @@ class ConnectHardwareForm extends Component {
     }
   }
 
+  componentWillReceiveProps (nextProps) {
+    const { accounts } = nextProps
+    const newAccounts = this.state.accounts.map(a => {
+      const normalizedAddress = a.address.toLowerCase()
+      const balanceValue = accounts[normalizedAddress] && accounts[normalizedAddress].balance || null
+      a.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
+      return a
+    })
+    this.setState({accounts: newAccounts})
+  }
+
+
   async componentDidMount () {
     const unlocked = await this.props.checkHardwareStatus('trezor')
     if (unlocked) {
@@ -38,14 +50,6 @@ class ConnectHardwareForm extends Component {
     this.setState({selectedAccount: account.toString(), error: null})
   }
 
-  getBalance (address) {
-    // Get the balance
-    const { accounts } = this.props
-    const balanceValue = accounts && accounts[address.toLowerCase()] ? accounts[address.toLowerCase()].balance : ''
-    const formattedBalance = balanceValue !== null ? formatBalance(balanceValue, 6) : '...'
-    return formattedBalance
-  }
-
   getPage = (page) => {
     this.props
       .connectHardware('trezor', page)
@@ -64,7 +68,9 @@ class ConnectHardwareForm extends Component {
 
           // Map accounts with balances
           newState.accounts = accounts.map(account => {
-            account.balance = this.getBalance(account.address)
+            const normalizedAddress = account.address.toLowerCase()
+            const balanceValue = this.props.accounts[normalizedAddress] && this.props.accounts[normalizedAddress].balance || null
+            account.balance = balanceValue ? formatBalance(balanceValue, 6) : '...'
             return account
           })
 
-- 
cgit 


From 82a93bb2872809df19744afdd95c68485c0dcd25 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 13 Jul 2018 02:03:54 -0400
Subject: detect ability to open popup instead of browser

---
 .../create-account/connect-hardware/connect-screen.js      | 14 ++++++++------
 .../pages/create-account/connect-hardware/index.js         |  5 +++++
 2 files changed, 13 insertions(+), 6 deletions(-)

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

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 dd9fdfba2..0dd8e285b 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
@@ -16,9 +16,11 @@ class ConnectScreen extends Component {
                 ]),
                 h(
                     'button.btn-primary.btn--large',
-                    { onClick: () => global.platform.openWindow({
-                    url: 'https://google.com/chrome',
-                    }), style: { margin: 12 } },
+                    {
+                      onClick: () => global.platform.openWindow({
+                        url: 'https://google.com/chrome',
+                      }),
+                    },
                     this.context.t('downloadGoogleChrome')
                 ),
             ])
@@ -49,8 +51,7 @@ class ConnectScreen extends Component {
       }
 
     render () {
-        const isChrome = window.navigator.userAgent.search('Chrome') !== -1
-        if (isChrome) {
+        if (this.props.browserSupported) {
             return this.renderConnectScreen()
         }
         return this.renderUnsupportedBrowser()
@@ -59,7 +60,8 @@ class ConnectScreen extends Component {
 
 ConnectScreen.propTypes = {
     connectToTrezor: PropTypes.func.isRequired,
-    btnText: PropTypes.string,
+    btnText: PropTypes.string.isRequired,
+    browserSupported: PropTypes.bool.isRequired,
 }
 
 ConnectScreen.contextTypes = {
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index fa9cf4894..689e88f2e 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -16,6 +16,7 @@ class ConnectHardwareForm extends Component {
       btnText: context.t('connectToTrezor'),
       selectedAccount: null,
       accounts: [],
+      browserSupported: true,
     }
   }
 
@@ -78,6 +79,9 @@ class ConnectHardwareForm extends Component {
         }
       })
       .catch(e => {
+        if (e === 'Window blocked') {
+          this.setState({ browserSupported: false })
+        }
         this.setState({ btnText: this.context.t('connectToTrezor') })
       })
   }
@@ -125,6 +129,7 @@ class ConnectHardwareForm extends Component {
       return h(ConnectScreen, {
         connectToTrezor: this.connectToTrezor,
         btnText: this.state.btnText,
+        browserSupported: this.state.browserSupported,
       })
     }
 
-- 
cgit 


From 53995463883c062157a3d725e7cb8fe54486badb Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 13 Jul 2018 13:49:20 -0400
Subject: added affiliate link to trezor

---
 .../pages/create-account/connect-hardware/connect-screen.js         | 6 ++++++
 1 file changed, 6 insertions(+)

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

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 0dd8e285b..8d9980b10 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
@@ -46,6 +46,12 @@ class ConnectScreen extends Component {
                     { onClick: this.props.connectToTrezor.bind(this) },
                     this.props.btnText
                 ),
+                h('div.hw-connect__get-trezor', {}, [
+                  h('a', {
+                    href: 'https://shop.trezor.io/?a=metamask',
+                    target: '_blank',
+                  }, this.context.t('getYourTrezor')),
+                ]),
             ])
         )
       }
-- 
cgit 


From 55382e9842c4f4136c88e441298193cc7abd8ba9 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 13 Jul 2018 15:19:21 -0400
Subject: fix account selection

---
 ui/app/components/pages/create-account/connect-hardware/index.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 689e88f2e..dc9907f31 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -59,8 +59,11 @@ class ConnectHardwareForm extends Component {
           const newState = {}
           // Default to the first account
           if (this.state.selectedAccount === null) {
-            const firstAccount = accounts[0]
-            newState.selectedAccount = firstAccount.index.toString() === '0' ? firstAccount.index.toString() : null
+            accounts.forEach((a, i) => {
+              if (a.address.toLowerCase() === this.props.address) {
+                newState.selectedAccount = a.index.toString()
+              }
+            })
           // If the page doesn't contain the selected account, let's deselect it
           } else if (!accounts.filter(a => a.index.toString() === this.state.selectedAccount).length) {
             newState.selectedAccount = null
@@ -167,6 +170,7 @@ ConnectHardwareForm.propTypes = {
   t: PropTypes.func,
   network: PropTypes.string,
   accounts: PropTypes.object,
+  address: PropTypes.string,
 }
 
 const mapStateToProps = state => {
-- 
cgit 


From 5c3efe8bc47a9f8e7a7e0952589c1a2f42ec4eca Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Mon, 16 Jul 2018 13:06:46 -0230
Subject: Fix send import paths in confirm tx components

---
 .../confirm-transaction-base/confirm-transaction-base.component.js    | 2 +-
 .../confirm-transaction-base/confirm-transaction-base.container.js    | 4 ++--
 2 files changed, 3 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 842b34d2e..5327b116f 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
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import ConfirmPageContainer, { ConfirmDetailRow } from '../../confirm-page-container'
 import { formatCurrency } from '../../../helpers/confirm-transaction/util'
-import { isBalanceSufficient } from '../../send_/send.utils'
+import { isBalanceSufficient } from '../../send/send.utils'
 import { DEFAULT_ROUTE } from '../../../routes'
 import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
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 31108bbd0..7db39adec 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
@@ -13,9 +13,9 @@ import {
   GAS_LIMIT_TOO_LOW_ERROR_KEY,
 } from '../../../constants/error-keys'
 import { getHexGasTotal } from '../../../helpers/confirm-transaction/util'
-import { isBalanceSufficient } from '../../send_/send.utils'
+import { isBalanceSufficient } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
-import { MIN_GAS_LIMIT_DEC } from '../../send_/send.constants'
+import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
 
 const mapStateToProps = (state, props) => {
   const { toAddress: propsToAddress } = props
-- 
cgit 


From e9a8c24cc4d26e33380a33e87e80952918339ad7 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 14 Jul 2018 13:43:55 -0700
Subject: Remove unused confirm transaction files

---
 ui/app/components/pages/confirm-send-token/index.scss | 19 -------------------
 ui/app/components/pages/index.scss                    |  2 --
 2 files changed, 21 deletions(-)
 delete mode 100644 ui/app/components/pages/confirm-send-token/index.scss

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

diff --git a/ui/app/components/pages/confirm-send-token/index.scss b/ui/app/components/pages/confirm-send-token/index.scss
deleted file mode 100644
index 0476749f6..000000000
--- a/ui/app/components/pages/confirm-send-token/index.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.confirm-send-token {
-  &__title {
-    padding: 4px 0;
-    display: flex;
-    align-items: center;
-  }
-
-  &__identicon {
-    flex: 0 0 auto;
-  }
-
-  &__title-text {
-    font-size: 2.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-left: 8px;
-  }
-}
diff --git a/ui/app/components/pages/index.scss b/ui/app/components/pages/index.scss
index 8b333b6a8..b15c59863 100644
--- a/ui/app/components/pages/index.scss
+++ b/ui/app/components/pages/index.scss
@@ -3,5 +3,3 @@
 @import './add-token/index';
 
 @import './confirm-add-token/index';
-
-@import './confirm-send-token/index';
-- 
cgit 


From d19c42fcaeea933793ed459ab5248b42811a0498 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 14 Jul 2018 13:47:07 -0700
Subject: Add fallback when no function found, fix network colors, add fiat
 values for tokens with contract exchange rates

---
 .../confirm-approve/confirm-approve.component.js   | 21 ++----
 .../confirm-approve/confirm-approve.container.js   | 19 +----
 .../confirm-send-token.component.js                | 20 ++---
 .../confirm-send-token.container.js                | 26 +------
 .../confirm-token-transaction-base.component.js    | 85 ++++++++++++++++++++++
 .../confirm-token-transaction-base.container.js    | 34 +++++++++
 .../pages/confirm-token-transaction-base/index.js  |  2 +
 .../confirm-transaction-base.component.js          | 40 ++++++----
 .../confirm-transaction-switch.component.js        | 20 +++--
 .../confirm-transaction-switch.constants.js        |  1 +
 .../confirm-transaction.component.js               |  7 ++
 11 files changed, 183 insertions(+), 92 deletions(-)
 create mode 100644 ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
 create mode 100644 ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
 create mode 100644 ui/app/components/pages/confirm-token-transaction-base/index.js

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

diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.component.js b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
index d775b0362..10f06e565 100644
--- a/ui/app/components/pages/confirm-approve/confirm-approve.component.js
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
@@ -1,29 +1,18 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import ConfirmTransactionBase from '../confirm-transaction-base'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
 
 export default class ConfirmApprove extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
   static propTypes = {
-    tokenAddress: PropTypes.string,
-    toAddress: PropTypes.string,
-    tokenAmount: PropTypes.string,
-    tokenSymbol: PropTypes.string,
+    tokenAmount: PropTypes.number,
   }
 
   render () {
-    const { toAddress, tokenAddress, tokenAmount, tokenSymbol } = this.props
+    const { tokenAmount } = this.props
 
     return (
-      <ConfirmTransactionBase
-        toAddress={toAddress}
-        identiconAddress={tokenAddress}
-        title={`${tokenAmount} ${tokenSymbol}`}
-        warning={`By approving this action, you grant permission for this contract to spend up to ${tokenAmount} of your ${tokenSymbol}.`}
-        hideSubtitle
+      <ConfirmTokenTransactionBase
+        tokenAmount={tokenAmount}
       />
     )
   }
diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.container.js b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
index 040e499ae..249175e17 100644
--- a/ui/app/components/pages/confirm-approve/confirm-approve.container.js
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
@@ -1,27 +1,12 @@
 import { connect } from 'react-redux'
 import ConfirmApprove from './confirm-approve.component'
+import { approveTokenAmountAndToAddressSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
-  const { confirmTransaction } = state
-  const {
-    tokenData = {},
-    txData: { txParams: { to: tokenAddress } = {} } = {},
-    tokenProps: { tokenSymbol } = {},
-  } = confirmTransaction
-  const { params = [] } = tokenData
-
-  let toAddress = ''
-  let tokenAmount = ''
-
-  if (params && params.length === 2) {
-    [{ value: toAddress }, { value: tokenAmount }] = params
-  }
+  const { tokenAmount } = approveTokenAmountAndToAddressSelector(state)
 
   return {
-    toAddress,
-    tokenAddress,
     tokenAmount,
-    tokenSymbol,
   }
 }
 
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
index 46ad9ccab..cb39e3d7b 100644
--- a/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
+++ b/ui/app/components/pages/confirm-send-token/confirm-send-token.component.js
@@ -1,20 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import ConfirmTransactionBase from '../confirm-transaction-base'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
 import { SEND_ROUTE } from '../../../routes'
 
 export default class ConfirmSendToken extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
   static propTypes = {
     history: PropTypes.object,
-    tokenAddress: PropTypes.string,
-    toAddress: PropTypes.string,
-    numberOfTokens: PropTypes.number,
-    tokenSymbol: PropTypes.string,
     editTransaction: PropTypes.func,
+    tokenAmount: PropTypes.number,
   }
 
   handleEdit (confirmTransactionData) {
@@ -24,15 +17,12 @@ export default class ConfirmSendToken extends Component {
   }
 
   render () {
-    const { toAddress, tokenAddress, tokenSymbol, numberOfTokens } = this.props
+    const { tokenAmount } = this.props
 
     return (
-      <ConfirmTransactionBase
-        toAddress={toAddress}
-        identiconAddress={tokenAddress}
-        title={`${numberOfTokens} ${tokenSymbol}`}
+      <ConfirmTokenTransactionBase
         onEdit={confirmTransactionData => this.handleEdit(confirmTransactionData)}
-        hideSubtitle
+        tokenAmount={tokenAmount}
       />
     )
   }
diff --git a/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js b/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
index 2d7efeed6..d60911e59 100644
--- a/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
+++ b/ui/app/components/pages/confirm-send-token/confirm-send-token.container.js
@@ -2,36 +2,16 @@ import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
 import ConfirmSendToken from './confirm-send-token.component'
-import { calcTokenAmount } from '../../../token-util'
 import { clearConfirmTransaction } from '../../../ducks/confirm-transaction.duck'
 import { setSelectedToken, updateSend, showSendTokenPage } from '../../../actions'
 import { conversionUtil } from '../../../conversion-util'
+import { sendTokenTokenAmountAndToAddressSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
-  const { confirmTransaction } = state
-  const {
-    tokenData = {},
-    tokenProps: { tokenSymbol, tokenDecimals } = {},
-    txData: { txParams: { to: tokenAddress } = {} } = {},
-  } = confirmTransaction
-  const { params = [] } = tokenData
-
-  let toAddress = ''
-  let tokenAmount = ''
-
-  if (params && params.length === 2) {
-    [{ value: toAddress }, { value: tokenAmount }] = params
-  }
-
-  const numberOfTokens = tokenAmount && tokenDecimals
-    ? calcTokenAmount(tokenAmount, tokenDecimals)
-    : 0
+  const { tokenAmount } = sendTokenTokenAmountAndToAddressSelector(state)
 
   return {
-    toAddress,
-    tokenAddress,
-    tokenSymbol,
-    numberOfTokens,
+    tokenAmount,
   }
 }
 
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
new file mode 100644
index 000000000..618ff123c
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import ConfirmTransactionBase from '../confirm-transaction-base'
+import {
+  formatCurrency,
+  convertTokenToFiat,
+  addFiat,
+} from '../../../helpers/confirm-transaction/util'
+
+export default class ConfirmTokenTransactionBase extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    tokenAddress: PropTypes.string,
+    toAddress: PropTypes.string,
+    tokenAmount: PropTypes.number,
+    tokenSymbol: PropTypes.string,
+    fiatTransactionTotal: PropTypes.string,
+    ethTransactionTotal: PropTypes.string,
+    contractExchangeRate: PropTypes.number,
+    conversionRate: PropTypes.number,
+    currentCurrency: PropTypes.string,
+  }
+
+  getFiatTransactionAmount () {
+    const { tokenAmount, currentCurrency, conversionRate, contractExchangeRate } = this.props
+
+    return convertTokenToFiat({
+      value: tokenAmount,
+      toCurrency: currentCurrency,
+      conversionRate,
+      contractExchangeRate,
+    })
+  }
+
+  getSubtitle () {
+    const { currentCurrency, contractExchangeRate } = this.props
+
+    if (typeof contractExchangeRate === 'undefined') {
+      return this.context.t('noConversionRate')
+    } else {
+      const fiatTransactionAmount = this.getFiatTransactionAmount()
+      return formatCurrency(fiatTransactionAmount, currentCurrency)
+    }
+  }
+
+  getFiatTotalTextOverride () {
+    const { fiatTransactionTotal, currentCurrency, contractExchangeRate } = this.props
+
+    if (typeof contractExchangeRate === 'undefined') {
+      return formatCurrency(fiatTransactionTotal, currentCurrency)
+    } else {
+      const fiatTransactionAmount = this.getFiatTransactionAmount()
+      const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
+      return formatCurrency(fiatTotal, currentCurrency)
+    }
+  }
+
+  render () {
+    const {
+      toAddress,
+      tokenAddress,
+      tokenSymbol,
+      tokenAmount,
+      ethTransactionTotal,
+      ...restProps
+    } = this.props
+
+    const tokensText = `${tokenAmount} ${tokenSymbol}`
+
+    return (
+      <ConfirmTransactionBase
+        toAddress={toAddress}
+        identiconAddress={tokenAddress}
+        title={tokensText}
+        subtitle={this.getSubtitle()}
+        ethTotalTextOverride={`${tokensText} + \u2666 ${ethTransactionTotal}`}
+        fiatTotalTextOverride={this.getFiatTotalTextOverride()}
+        {...restProps}
+      />
+    )
+  }
+}
diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
new file mode 100644
index 000000000..be38acdb0
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.container.js
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux'
+import ConfirmTokenTransactionBase from './confirm-token-transaction-base.component'
+import {
+  tokenAmountAndToAddressSelector,
+  contractExchangeRateSelector,
+} from '../../../selectors/confirm-transaction'
+
+const mapStateToProps = (state, ownProps) => {
+  const { tokenAmount: ownTokenAmount } = ownProps
+  const { confirmTransaction, metamask: { currentCurrency, conversionRate } } = state
+  const {
+    txData: { txParams: { to: tokenAddress } = {} } = {},
+    tokenProps: { tokenSymbol } = {},
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  } = confirmTransaction
+
+  const { tokenAmount, toAddress } = tokenAmountAndToAddressSelector(state)
+  const contractExchangeRate = contractExchangeRateSelector(state)
+
+  return {
+    toAddress,
+    tokenAddress,
+    tokenAmount: typeof ownTokenAmount !== 'undefined' ? ownTokenAmount : tokenAmount,
+    tokenSymbol,
+    currentCurrency,
+    conversionRate,
+    contractExchangeRate,
+    fiatTransactionTotal,
+    ethTransactionTotal,
+  }
+}
+
+export default connect(mapStateToProps)(ConfirmTokenTransactionBase)
diff --git a/ui/app/components/pages/confirm-token-transaction-base/index.js b/ui/app/components/pages/confirm-token-transaction-base/index.js
new file mode 100644
index 000000000..e15c5d56b
--- /dev/null
+++ b/ui/app/components/pages/confirm-token-transaction-base/index.js
@@ -0,0 +1,2 @@
+export { default } from './confirm-token-transaction-base.container'
+export { default as ConfirmTokenTransactionBase } from './confirm-token-transaction-base.component'
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 5327b116f..e1bf2210f 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
@@ -54,6 +54,8 @@ export default class ConfirmTransactionBase extends Component {
     detailsComponent: PropTypes.node,
     errorKey: PropTypes.string,
     errorMessage: PropTypes.string,
+    ethTotalTextOverride: PropTypes.string,
+    fiatTotalTextOverride: PropTypes.string,
     hideData: PropTypes.bool,
     hideDetails: PropTypes.bool,
     hideSubtitle: PropTypes.bool,
@@ -146,6 +148,8 @@ export default class ConfirmTransactionBase extends Component {
       currentCurrency,
       fiatTransactionTotal,
       ethTransactionTotal,
+      fiatTotalTextOverride,
+      ethTotalTextOverride,
       hideDetails,
     } = this.props
 
@@ -153,14 +157,16 @@ export default class ConfirmTransactionBase extends Component {
       return null
     }
 
+    const formattedCurrency = formatCurrency(fiatTransactionTotal, currentCurrency)
+
     return (
       detailsComponent || (
         <div className="confirm-page-container-content__details">
           <div className="confirm-page-container-content__gas-fee">
             <ConfirmDetailRow
               label="Gas Fee"
-              fiatFee={formatCurrency(fiatTransactionFee, currentCurrency)}
-              ethFee={ethTransactionFee}
+              fiatText={formatCurrency(fiatTransactionFee, currentCurrency)}
+              ethText={`\u2666 ${ethTransactionFee}`}
               headerText="Edit"
               headerTextClassName="confirm-detail-row__header-text--edit"
               onHeaderClick={() => this.handleEditGas()}
@@ -169,11 +175,11 @@ export default class ConfirmTransactionBase extends Component {
           <div>
             <ConfirmDetailRow
               label="Total"
-              fiatFee={formatCurrency(fiatTransactionTotal, currentCurrency)}
-              ethFee={ethTransactionTotal}
+              fiatText={fiatTotalTextOverride || formattedCurrency}
+              ethText={ethTotalTextOverride || `\u2666 ${ethTransactionTotal}`}
               headerText="Amount + Gas Fee"
               headerTextClassName="confirm-detail-row__header-text--total"
-              fiatFeeColor="#2f9ae0"
+              fiatTextColor="#2f9ae0"
             />
           </div>
         </div>
@@ -206,17 +212,21 @@ export default class ConfirmTransactionBase extends Component {
         <div className="confirm-page-container-content__data-box-label">
           {`${t('functionType')}:`}
           <span className="confirm-page-container-content__function-type">
-            { name }
+            { name || t('notFound') }
           </span>
         </div>
-        <div className="confirm-page-container-content__data-box">
-          <div className="confirm-page-container-content__data-field-label">
-            { `${t('parameters')}:` }
-          </div>
-          <div>
-            <pre>{ JSON.stringify(params, null, 2) }</pre>
-          </div>
-        </div>
+        {
+          params && (
+            <div className="confirm-page-container-content__data-box">
+              <div className="confirm-page-container-content__data-field-label">
+                { `${t('parameters')}:` }
+              </div>
+              <div>
+                <pre>{ JSON.stringify(params, null, 2) }</pre>
+              </div>
+            </div>
+          )
+        }
         <div className="confirm-page-container-content__data-box-label">
           {`${t('hexData')}:`}
         </div>
@@ -297,7 +307,7 @@ export default class ConfirmTransactionBase extends Component {
         toName={toName}
         toAddress={toAddress}
         showEdit={onEdit && !isTxReprice}
-        action={action || name}
+        action={action || name || this.context.t('unknownFunction')}
         title={title || `${fiatConvertedAmount} ${currentCurrency.toUpperCase()}`}
         subtitle={subtitle || `\u2666 ${ethTransactionAmount}`}
         hideSubtitle={hideSubtitle}
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 25259b98c..0280f73c6 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
@@ -8,11 +8,16 @@ import {
   CONFIRM_SEND_ETHER_PATH,
   CONFIRM_SEND_TOKEN_PATH,
   CONFIRM_APPROVE_PATH,
+  CONFIRM_TRANSFER_FROM_PATH,
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
 import { isConfirmDeployContract } from './confirm-transaction-switch.util'
-import { TOKEN_METHOD_TRANSFER, TOKEN_METHOD_APPROVE } from './confirm-transaction-switch.constants'
+import {
+  TOKEN_METHOD_TRANSFER,
+  TOKEN_METHOD_APPROVE,
+  TOKEN_METHOD_TRANSFER_FROM,
+} from './confirm-transaction-switch.constants'
 
 export default class ConfirmTransactionSwitch extends Component {
   static propTypes = {
@@ -27,8 +32,7 @@ export default class ConfirmTransactionSwitch extends Component {
       methodData: { name },
       fetchingMethodData,
     } = this.props
-    const { id } = txData
-
+    const { id, txParams: { data } = {} } = txData
 
     if (isConfirmDeployContract(txData)) {
       const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_DEPLOY_CONTRACT_PATH}`
@@ -39,10 +43,10 @@ export default class ConfirmTransactionSwitch extends Component {
       return <Loading />
     }
 
-    if (name) {
-      const methodName = name.toLowerCase()
+    if (data) {
+      const methodName = name && name.toLowerCase()
 
-      switch (methodName.toLowerCase()) {
+      switch (methodName) {
         case TOKEN_METHOD_TRANSFER: {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_SEND_TOKEN_PATH}`
           return <Redirect to={{ pathname }} />
@@ -51,6 +55,10 @@ export default class ConfirmTransactionSwitch extends Component {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_APPROVE_PATH}`
           return <Redirect to={{ pathname }} />
         }
+        case TOKEN_METHOD_TRANSFER_FROM: {
+          const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TRANSFER_FROM_PATH}`
+          return <Redirect to={{ pathname }} />
+        }
         default: {
           const pathname = `${CONFIRM_TRANSACTION_ROUTE}/${id}${CONFIRM_TOKEN_METHOD_PATH}`
           return <Redirect to={{ pathname }} />
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
index 622d2a37a..9db4a2f96 100644
--- 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
@@ -1,2 +1,3 @@
 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/confirm-transaction/confirm-transaction.component.js b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
index 874a89fd2..3ac656d73 100644
--- a/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
+++ b/ui/app/components/pages/confirm-transaction/confirm-transaction.component.js
@@ -8,6 +8,7 @@ import ConfirmSendEther from '../confirm-send-ether'
 import ConfirmSendToken from '../confirm-send-token'
 import ConfirmDeployContract from '../confirm-deploy-contract'
 import ConfirmApprove from '../confirm-approve'
+import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
 import ConfTx from '../../../conf-tx'
 import {
   DEFAULT_ROUTE,
@@ -16,6 +17,7 @@ import {
   CONFIRM_SEND_ETHER_PATH,
   CONFIRM_SEND_TOKEN_PATH,
   CONFIRM_APPROVE_PATH,
+  CONFIRM_TRANSFER_FROM_PATH,
   CONFIRM_TOKEN_METHOD_PATH,
   SIGNATURE_REQUEST_PATH,
 } from '../../../routes'
@@ -137,6 +139,11 @@ export default class ConfirmTransaction extends Component {
             path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_APPROVE_PATH}`}
             component={ConfirmApprove}
           />
+          <Route
+            exact
+            path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${CONFIRM_TRANSFER_FROM_PATH}`}
+            component={ConfirmTokenTransactionBase}
+          />
           <Route
             exact
             path={`${CONFIRM_TRANSACTION_ROUTE}/:id?${SIGNATURE_REQUEST_PATH}`}
-- 
cgit 


From e16f5ab54d1e69e59fe4689fde3fa34e61c88974 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sat, 14 Jul 2018 23:36:42 -0700
Subject: Fix tests

---
 ui/app/components/pages/confirm-approve/confirm-approve.component.js | 4 +++-
 ui/app/components/pages/confirm-approve/confirm-approve.container.js | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

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

diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.component.js b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
index 10f06e565..b71eaa1d4 100644
--- a/ui/app/components/pages/confirm-approve/confirm-approve.component.js
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.component.js
@@ -5,14 +5,16 @@ import ConfirmTokenTransactionBase from '../confirm-token-transaction-base'
 export default class ConfirmApprove extends Component {
   static propTypes = {
     tokenAmount: PropTypes.number,
+    tokenSymbol: PropTypes.string,
   }
 
   render () {
-    const { tokenAmount } = this.props
+    const { tokenAmount, tokenSymbol } = this.props
 
     return (
       <ConfirmTokenTransactionBase
         tokenAmount={tokenAmount}
+        warning={`By approving this action, you grant permission for this contract to spend up to ${tokenAmount} of your ${tokenSymbol}.`}
       />
     )
   }
diff --git a/ui/app/components/pages/confirm-approve/confirm-approve.container.js b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
index 249175e17..4ef9f4ced 100644
--- a/ui/app/components/pages/confirm-approve/confirm-approve.container.js
+++ b/ui/app/components/pages/confirm-approve/confirm-approve.container.js
@@ -3,10 +3,12 @@ import ConfirmApprove from './confirm-approve.component'
 import { approveTokenAmountAndToAddressSelector } from '../../../selectors/confirm-transaction'
 
 const mapStateToProps = state => {
+  const { confirmTransaction: { tokenProps: { tokenSymbol } = {} } } = state
   const { tokenAmount } = approveTokenAmountAndToAddressSelector(state)
 
   return {
     tokenAmount,
+    tokenSymbol,
   }
 }
 
-- 
cgit 


From 301ae305b88d0a7e3a3cbca9a500f4b39753dc52 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 17 Jul 2018 13:43:15 -0700
Subject: Use Number constructor for number conversion. Use existing
 noConversionRateAvailable message

---
 .../confirm-token-transaction-base.component.js                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
index 618ff123c..365ae216e 100644
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -39,7 +39,7 @@ export default class ConfirmTokenTransactionBase extends Component {
     const { currentCurrency, contractExchangeRate } = this.props
 
     if (typeof contractExchangeRate === 'undefined') {
-      return this.context.t('noConversionRate')
+      return this.context.t('noConversionRateAvailable')
     } else {
       const fiatTransactionAmount = this.getFiatTransactionAmount()
       return formatCurrency(fiatTransactionAmount, currentCurrency)
-- 
cgit 


From cb97517b26a7732cbb7c4a9f30f85b5fa596e608 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Tue, 17 Jul 2018 18:53:37 -0400
Subject: updated account list based on new designs

---
 .../connect-hardware/account-list.js               | 38 +++++++++++++++-------
 .../connect-hardware/connect-screen.js             |  2 +-
 .../pages/create-account/connect-hardware/index.js |  2 +-
 3 files changed, 28 insertions(+), 14 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 3bd6a00a7..06102e16f 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
@@ -8,16 +8,20 @@ class AccountList extends Component {
         super(props)
     }
 
+    renderHeader () {
+      return (
+        h('div.hw-connect', [
+          h('h3.hw-connect__title', {}, this.context.t('selectAnAccount')),
+          h('p.hw-connect__msg', {}, this.context.t('selectAnAccountHelp')),
+        ])
+      )
+    }
+
     renderAccounts () {
         return h('div.hw-account-list', [
-            h('div.hw-account-list__title_wrapper', [
-                h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
-                h('div.hw-account-list__device', {}, ['Trezor - ETH']),
-            ]),
             this.props.accounts.map((a, i) => {
 
                 return h('div.hw-account-list__item', { key: a.address }, [
-                h('span.hw-account-list__item__index', a.index + 1),
                 h('div.hw-account-list__item__radio', [
                     h('input', {
                         type: 'radio',
@@ -32,10 +36,12 @@ class AccountList extends Component {
                     {
                         htmlFor: `address-${i}`,
                     },
-                    `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
-                    ),
+                    [
+                      h('span.hw-account-list__item__index', a.index + 1),
+                      `${a.address.slice(0, 4)}...${a.address.slice(-4)}`,
+                      h('span.hw-account-list__item__balance', `${a.balance}`),
+                    ]),
                 ]),
-                h('span.hw-account-list__item__balance', `${a.balance}`),
                 h(
                     'a.hw-account-list__item__link',
                     {
@@ -71,9 +77,15 @@ class AccountList extends Component {
   }
 
   renderButtons () {
-    return h('div.new-account-create-form__buttons', {}, [
+    const disabled = this.props.selectedAccount === null
+    const buttonProps = {}
+    if (disabled) {
+      buttonProps.disabled = true
+    }
+
+    return h('div.new-account-connect-form__buttons', {}, [
       h(
-        'button.btn-default.btn--large.new-account-create-form__button',
+        'button.btn-default.btn--large.new-account-connect-form__button',
         {
           onClick: this.props.onCancel.bind(this),
         },
@@ -81,9 +93,10 @@ class AccountList extends Component {
       ),
 
       h(
-        `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
+        `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
         {
           onClick: this.props.onUnlockAccount.bind(this),
+          ...buttonProps,
         },
         [this.context.t('unlock')]
       ),
@@ -99,7 +112,8 @@ class AccountList extends Component {
   }
 
   render () {
-    return h('div', {}, [
+    return h('div.new-account-connect-form', {}, [
+        this.renderHeader(),
         this.renderAccounts(),
         this.renderPagination(),
         this.renderButtons(),
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 8d9980b10..7fb36b511 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
@@ -29,7 +29,7 @@ class ConnectScreen extends Component {
 
     renderConnectScreen () {
         return (
-            h('div', {}, [
+            h('div.new-account-connect-form', {}, [
                 h('div.hw-connect', [
                     h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
                     h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index dc9907f31..da42ddead 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -150,7 +150,7 @@ class ConnectHardwareForm extends Component {
   }
 
   render () {
-    return h('div.new-account-create-form', [
+    return h('div', [
       this.renderError(),
       this.renderContent(),
     ])
-- 
cgit 


From cbb14f1d5e50c10865838a98452ecfb4b6cb8d6a Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Tue, 17 Jul 2018 21:57:19 -0400
Subject: fix browser not supported screen

---
 .../components/pages/create-account/connect-hardware/connect-screen.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 7fb36b511..d4c479a58 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
@@ -9,7 +9,7 @@ class ConnectScreen extends Component {
 
     renderUnsupportedBrowser () {
         return (
-            h('div', {}, [
+            h('div.new-account-connect-form', {}, [
                 h('div.hw-connect', [
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                     h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
-- 
cgit 


From 49d1bdea8a47139cc814d3c49aa97bf2d542d3d5 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 18 Jul 2018 22:57:47 -0400
Subject: design done

---
 .../connect-hardware/connect-screen.js             | 109 ++++++++++++++++-----
 1 file changed, 86 insertions(+), 23 deletions(-)

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

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 d4c479a58..47288c73f 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
@@ -27,34 +27,97 @@ class ConnectScreen extends Component {
         )
     }
 
+    renderHeader () {
+        return (
+            h('div.hw-connect__header', {}, [
+                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
+                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
+            ])
+        )
+    }
+
+    renderTrezorAffiliateLink () {
+        return h('div.hw-connect__get-trezor', {}, [
+            h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
+            h('a.hw-connect__get-trezor__link', {
+              href: 'https://shop.trezor.io/?a=metamask',
+              target: '_blank',
+            }, this.context.t('orderOneHere')),
+          ])
+    }
+
+    renderConnectToTrezorButton () {
+        return h(
+            'button.btn-primary.btn--large',
+            { onClick: this.props.connectToTrezor.bind(this) },
+            this.props.btnText
+        )
+    }
+
+    renderLearnMore () {
+        return (
+            h('p.hw-connect__learn-more', {}, [
+                this.context.t('learnMore'),
+                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
+            ])
+        )
+    }
+
+    renderTutorialSteps () {
+        const steps = [
+            {
+                asset: 'hardware-wallet-step-1',
+                dimensions: {width: '225px', height: '75px'},
+             },
+             {
+                asset: 'hardware-wallet-step-2',
+                dimensions: {width: '300px', height: '100px'},
+             },
+             {
+                asset: 'hardware-wallet-step-3',
+                dimensions: {width: '120px', height: '90px'},
+             },
+        ]
+
+        return h('.hw-tutorial', {},
+            steps.map((step, i) => (
+            h('div.hw-connect', [
+                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
+                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
+                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
+            ])
+            ))
+        )
+    }
+
+    renderFooter () {
+        return (
+            h('div.hw-connect__footer', {}, [
+                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
+                this.renderConnectToTrezorButton(),
+                h('p.hw-connect__footer__msg', {}, [
+                    this.context.t(`havingTroubleConnecting`),
+                    h('a.hw-connect__footer__link', {
+                        href: '#',
+                        target: '_blank',
+                      }, this.context.t('getHelp')),
+                ]),
+            ])
+        )
+    }
+
     renderConnectScreen () {
         return (
             h('div.new-account-connect-form', {}, [
-                h('div.hw-connect', [
-                    h('h3.hw-connect__title', {}, this.context.t('trezorHardwareWallet')),
-                    h('p.hw-connect__msg', {}, this.context.t('connectToTrezorHelp')),
-                    h('p.hw-connect__msg', {}, [
-                        this.context.t('connectToTrezorTrouble'),
-                        h('a.hw-connect__link', {
-                            href: 'https://support.metamask.io/',
-                            target: '_blank',
-                        }, ` ${this.context.t('learnMore')}`),
-                    ]),
-                ]),
-                h(
-                    'button.btn-primary.btn--large',
-                    { onClick: this.props.connectToTrezor.bind(this) },
-                    this.props.btnText
-                ),
-                h('div.hw-connect__get-trezor', {}, [
-                  h('a', {
-                    href: 'https://shop.trezor.io/?a=metamask',
-                    target: '_blank',
-                  }, this.context.t('getYourTrezor')),
-                ]),
+                this.renderHeader(),
+                this.renderTrezorAffiliateLink(),
+                this.renderConnectToTrezorButton(),
+                this.renderLearnMore(),
+                this.renderTutorialSteps(),
+                this.renderFooter(),
             ])
         )
-      }
+    }
 
     render () {
         if (this.props.browserSupported) {
-- 
cgit 


From 2bfddc288e64f130d1677afca4448202181523ea Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 18 Jul 2018 23:12:49 -0400
Subject: scroll smooth

---
 .../create-account/connect-hardware/connect-screen.js      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

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

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 47288c73f..5c6c54acf 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
@@ -54,9 +54,15 @@ class ConnectScreen extends Component {
         )
     }
 
+    scrollToTutorial = (e) => {
+      if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'})
+    }
+
     renderLearnMore () {
         return (
-            h('p.hw-connect__learn-more', {}, [
+            h('p.hw-connect__learn-more', {
+                onClick: this.scrollToTutorial,
+            }, [
                 this.context.t('learnMore'),
                 h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
             ])
@@ -79,9 +85,11 @@ class ConnectScreen extends Component {
              },
         ]
 
-        return h('.hw-tutorial', {},
+        return h('.hw-tutorial',  {
+          ref: node => { this.referenceNode = node },
+        },
             steps.map((step, i) => (
-            h('div.hw-connect', [
+            h('div.hw-connect', {}, [
                 h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
                 h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
                 h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
-- 
cgit 


From 086ab6e1e1aa715b7a7918d10b8c1afcaeda38c7 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 18 Jul 2018 23:57:09 -0400
Subject: lint

---
 .../components/pages/create-account/connect-hardware/connect-screen.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 5c6c54acf..55d2eadce 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
@@ -85,7 +85,7 @@ class ConnectScreen extends Component {
              },
         ]
 
-        return h('.hw-tutorial',  {
+        return h('.hw-tutorial', {
           ref: node => { this.referenceNode = node },
         },
             steps.map((step, i) => (
-- 
cgit 


From a6e0eef8f4280041380a7c462069b2c205999130 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 19 Jul 2018 00:14:13 -0400
Subject: fix unsupported browser view

---
 .../components/pages/create-account/connect-hardware/connect-screen.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 55d2eadce..bf4cf08f9 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
@@ -9,7 +9,7 @@ class ConnectScreen extends Component {
 
     renderUnsupportedBrowser () {
         return (
-            h('div.new-account-connect-form', {}, [
+            h('div.new-account-connect-form.unsupported-browser', {}, [
                 h('div.hw-connect', [
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                     h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
-- 
cgit 


From 514148ffa1652b4e23ffe04fbe23bb0eadbdecb7 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 19 Jul 2018 00:16:10 -0400
Subject: fix support link

---
 .../components/pages/create-account/connect-hardware/connect-screen.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

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 bf4cf08f9..cb2b86595 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
@@ -106,7 +106,7 @@ class ConnectScreen extends Component {
                 h('p.hw-connect__footer__msg', {}, [
                     this.context.t(`havingTroubleConnecting`),
                     h('a.hw-connect__footer__link', {
-                        href: '#',
+                        href: 'https://support.metamask.io/',
                         target: '_blank',
                       }, this.context.t('getHelp')),
                 ]),
-- 
cgit 


From df19163bf9611d75aaf8ea6da52651dbba9a5e00 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 19 Jul 2018 02:31:13 -0400
Subject: last css fixes

---
 .../create-account/connect-hardware/account-list.js   |  8 ++++----
 .../pages/create-account/connect-hardware/index.js    | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 4 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 06102e16f..c722d1f55 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
@@ -59,7 +59,7 @@ class AccountList extends Component {
   renderPagination () {
     return h('div.hw-list-pagination', [
       h(
-        'button.btn-primary.hw-list-pagination__button',
+        'button.hw-list-pagination__button',
         {
           onClick: () => this.props.getPage(-1),
         },
@@ -67,7 +67,7 @@ class AccountList extends Component {
       ),
 
       h(
-        'button.btn-primary.hw-list-pagination__button',
+        'button.hw-list-pagination__button',
         {
           onClick: () => this.props.getPage(1),
         },
@@ -93,7 +93,7 @@ class AccountList extends Component {
       ),
 
       h(
-        `button.btn-primary.btn--large.new-account-connect-form__button ${disabled ? '.btn-primary--disabled' : ''}`,
+        `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
         {
           onClick: this.props.onUnlockAccount.bind(this),
           ...buttonProps,
@@ -112,7 +112,7 @@ class AccountList extends Component {
   }
 
   render () {
-    return h('div.new-account-connect-form', {}, [
+    return h('div.new-account-connect-form.account-list', {}, [
         this.renderHeader(),
         this.renderAccounts(),
         this.renderPagination(),
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index da42ddead..cc3761c04 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -51,11 +51,26 @@ class ConnectHardwareForm extends Component {
     this.setState({selectedAccount: account.toString(), error: null})
   }
 
+  showTemporaryAlert () {
+    this.props.showAlert(this.context.t('hardwareWalletConnected'))
+    // Autohide the alert after 5 seconds
+    setTimeout(_ => {
+      this.props.hideAlert()
+    }, 5000)
+  }
+
   getPage = (page) => {
     this.props
       .connectHardware('trezor', page)
       .then(accounts => {
         if (accounts.length) {
+
+          // If we just loaded the accounts for the first time
+          // show the global alert
+          if (this.state.accounts.length === 0) {
+            this.showTemporaryAlert()
+          }
+
           const newState = {}
           // Default to the first account
           if (this.state.selectedAccount === null) {
@@ -164,6 +179,8 @@ ConnectHardwareForm.propTypes = {
   connectHardware: PropTypes.func,
   checkHardwareStatus: PropTypes.func,
   forgetDevice: PropTypes.func,
+  showAlert: PropTypes.func,
+  hideAlert: PropTypes.func,
   unlockTrezorAccount: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
   history: PropTypes.object,
@@ -203,6 +220,8 @@ const mapDispatchToProps = dispatch => {
     },
     showImportPage: () => dispatch(actions.showImportPage()),
     showConnectPage: () => dispatch(actions.showConnectPage()),
+    showAlert: (msg) => dispatch(actions.showAlert(msg)),
+    hideAlert: () => dispatch(actions.hideAlert()),
   }
 }
 
-- 
cgit 


From 469a79f97ff887eae5ec99cf6be7b19c20972d02 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 20 Jul 2018 14:18:50 -0700
Subject: Add fallback options for displaying recipient name in the Confirm
 screen

---
 .../confirm-transaction-base.container.js                  | 14 +++++++++++++-
 1 file changed, 13 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 7db39adec..0c0deff18 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
@@ -2,6 +2,7 @@ import { connect } from 'react-redux'
 import { compose } from 'recompose'
 import { withRouter } from 'react-router-dom'
 import R from 'ramda'
+import contractMap from 'eth-contract-metadata'
 import ConfirmTransactionBase from './confirm-transaction-base.component'
 import {
   clearConfirmTransaction,
@@ -16,6 +17,14 @@ 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'
+
+const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
+  return {
+    ...acc,
+    [base.toLowerCase()]: contractMap[base],
+  }
+}, {})
 
 const mapStateToProps = (state, props) => {
   const { toAddress: propsToAddress } = props
@@ -48,7 +57,10 @@ const mapStateToProps = (state, props) => {
   const { balance } = accounts[selectedAddress]
   const { name: fromName } = identities[selectedAddress]
   const toAddress = propsToAddress || txParamsToAddress
-  const toName = identities[toAddress] && identities[toAddress].name
+  const toName = identities[toAddress]
+    ? identities[toAddress].name
+    : casedContractMap[toAddress] ? casedContractMap[toAddress].name : addressSlicer(toAddress)
+
   const isTxReprice = Boolean(lastGasPrice)
 
   const transaction = R.find(({ id }) => id === transactionId)(selectedAddressTxList)
-- 
cgit 


From bcbe7fef2e30d97465fb3f94d92293e1ea11e56f Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Mon, 23 Jul 2018 01:18:39 -0400
Subject: show alert ONLY when device is connected

---
 .../pages/create-account/connect-hardware/index.js        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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

diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index cc3761c04..3f66e7098 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -17,6 +17,7 @@ class ConnectHardwareForm extends Component {
       selectedAccount: null,
       accounts: [],
       browserSupported: true,
+      unlocked: false,
     }
   }
 
@@ -32,9 +33,14 @@ class ConnectHardwareForm extends Component {
   }
 
 
-  async componentDidMount () {
+  componentDidMount () {
+    this.checkIfUnlocked()
+  }
+
+  async checkIfUnlocked () {
     const unlocked = await this.props.checkHardwareStatus('trezor')
     if (unlocked) {
+      this.setState({unlocked: true})
       this.getPage(0)
     }
   }
@@ -66,12 +72,12 @@ class ConnectHardwareForm extends Component {
         if (accounts.length) {
 
           // If we just loaded the accounts for the first time
-          // show the global alert
-          if (this.state.accounts.length === 0) {
+          // (device previously locked) show the global alert
+          if (this.state.accounts.length === 0 && !this.state.unlocked) {
             this.showTemporaryAlert()
           }
 
-          const newState = {}
+          const newState = { unlocked: true }
           // Default to the first account
           if (this.state.selectedAccount === null) {
             accounts.forEach((a, i) => {
@@ -112,6 +118,7 @@ class ConnectHardwareForm extends Component {
         btnText: this.context.t('connectToTrezor'),
         selectedAccount: null,
         accounts: [],
+        unlocked: false,
       })
     }).catch(e => {
       this.setState({ error: e.toString() })
-- 
cgit 


From 2359062b62cf65f38b36ccb6bb33fa7d15ada1ae Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Mon, 23 Jul 2018 22:20:06 -0230
Subject: UI confirm screen closes confirmation window on submit or cancel of a
 tx

---
 .../confirm-transaction-base.component.js             | 19 +++++++++++++++----
 1 file changed, 15 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 e1bf2210f..2811e6157 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,9 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../constants/error-keys'
+import {
+  ENVIRONMENT_TYPE_NOTIFICATION,
+} from '../../../../../app/scripts/lib/enums'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -250,8 +253,12 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       cancelTransaction(txData)
         .then(() => {
-          clearConfirmTransaction()
-          history.push(DEFAULT_ROUTE)
+          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+            return global.platform.closeCurrentWindow()
+          } else {
+            clearConfirmTransaction()
+            history.push(DEFAULT_ROUTE)
+          }
         })
     }
   }
@@ -264,8 +271,12 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       sendTransaction(txData)
         .then(() => {
-          clearConfirmTransaction()
-          history.push(DEFAULT_ROUTE)
+          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+            return global.platform.closeCurrentWindow()
+          } else {
+            clearConfirmTransaction()
+            history.push(DEFAULT_ROUTE)
+          }
         })
     }
   }
-- 
cgit 


From 152246f3b0862c8c5a8b42872852d236400c0e9d Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 23 Jul 2018 20:25:04 -0700
Subject: Add close window support to signature requests. Move logic to actions

---
 .../confirm-transaction-base.component.js             | 19 ++++---------------
 ui/app/components/pages/home.js                       | 12 ++++++------
 2 files changed, 10 insertions(+), 21 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 2811e6157..e1bf2210f 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,9 +8,6 @@ import {
   INSUFFICIENT_FUNDS_ERROR_KEY,
   TRANSACTION_ERROR_KEY,
 } from '../../../constants/error-keys'
-import {
-  ENVIRONMENT_TYPE_NOTIFICATION,
-} from '../../../../../app/scripts/lib/enums'
 
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
@@ -253,12 +250,8 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       cancelTransaction(txData)
         .then(() => {
-          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-            return global.platform.closeCurrentWindow()
-          } else {
-            clearConfirmTransaction()
-            history.push(DEFAULT_ROUTE)
-          }
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
         })
     }
   }
@@ -271,12 +264,8 @@ export default class ConfirmTransactionBase extends Component {
     } else {
       sendTransaction(txData)
         .then(() => {
-          if (global.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
-            return global.platform.closeCurrentWindow()
-          } else {
-            clearConfirmTransaction()
-            history.push(DEFAULT_ROUTE)
-          }
+          clearConfirmTransaction()
+          history.push(DEFAULT_ROUTE)
         })
     }
   }
diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js
index 38aa02dae..5e3fdc9af 100644
--- a/ui/app/components/pages/home.js
+++ b/ui/app/components/pages/home.js
@@ -27,19 +27,17 @@ const {
   NOTICE_ROUTE,
 } = require('../../routes')
 
+const { unconfirmedTransactionsCountSelector } = require('../../selectors/confirm-transaction')
+
 class Home extends Component {
   componentDidMount () {
     const {
       history,
-      unapprovedTxs = {},
-      unapprovedMsgCount = 0,
-      unapprovedPersonalMsgCount = 0,
-      unapprovedTypedMessagesCount = 0,
+      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)
     }
   }
@@ -167,6 +165,7 @@ Home.propTypes = {
   isPopup: PropTypes.bool,
   isMouseUser: PropTypes.bool,
   t: PropTypes.func,
+  unconfirmedTransactionsCount: PropTypes.number,
 }
 
 function mapStateToProps (state) {
@@ -230,6 +229,7 @@ function mapStateToProps (state) {
 
     // state needed to get account dropdown temporarily rendering from app bar
     selected,
+    unconfirmedTransactionsCount: unconfirmedTransactionsCountSelector(state),
   }
 }
 
-- 
cgit 


From d0c901d081e3b40a191dcb826fda7925d16df92c Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 26 Jul 2018 12:15:34 -0700
Subject: Round large exponential numbers

---
 .../confirm-token-transaction-base.component.js                    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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

diff --git a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
index 365ae216e..acaed383a 100644
--- a/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@@ -5,6 +5,7 @@ import {
   formatCurrency,
   convertTokenToFiat,
   addFiat,
+  roundExponential,
 } from '../../../helpers/confirm-transaction/util'
 
 export default class ConfirmTokenTransactionBase extends Component {
@@ -42,7 +43,8 @@ export default class ConfirmTokenTransactionBase extends Component {
       return this.context.t('noConversionRateAvailable')
     } else {
       const fiatTransactionAmount = this.getFiatTransactionAmount()
-      return formatCurrency(fiatTransactionAmount, currentCurrency)
+      const roundedFiatTransactionAmount = roundExponential(fiatTransactionAmount)
+      return formatCurrency(roundedFiatTransactionAmount, currentCurrency)
     }
   }
 
@@ -54,7 +56,8 @@ export default class ConfirmTokenTransactionBase extends Component {
     } else {
       const fiatTransactionAmount = this.getFiatTransactionAmount()
       const fiatTotal = addFiat(fiatTransactionAmount, fiatTransactionTotal)
-      return formatCurrency(fiatTotal, currentCurrency)
+      const roundedFiatTotal = roundExponential(fiatTotal)
+      return formatCurrency(roundedFiatTotal, currentCurrency)
     }
   }
 
-- 
cgit 


From 6d76d4e228512e44e881cc91673de75e5e86798f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Fri, 3 Aug 2018 14:44:57 -0700
Subject: Disable Confirm button on subsequent clicks to prevent confirming
 multiple times

---
 .../confirm-transaction-base.component.js           | 21 ++++++++++++++++++---
 1 file changed, 18 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 e1bf2210f..b170880b4 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
@@ -71,6 +71,10 @@ export default class ConfirmTransactionBase extends Component {
     warning: PropTypes.string,
   }
 
+  state = {
+    submitting: false,
+  }
+
   componentDidUpdate () {
     const {
       transactionStatus,
@@ -258,15 +262,25 @@ export default class ConfirmTransactionBase extends Component {
 
   handleSubmit () {
     const { sendTransaction, clearConfirmTransaction, txData, history, onSubmit } = this.props
+    const { submitting } = this.state
+
+    if (submitting) {
+      return
+    }
+
+    this.setState({ submitting: true })
 
     if (onSubmit) {
-      onSubmit(txData)
+      Promise.resolve(onSubmit(txData))
+        .then(this.setState({ submitting: false }))
     } else {
       sendTransaction(txData)
         .then(() => {
           clearConfirmTransaction()
+          this.setState({ submitting: false })
           history.push(DEFAULT_ROUTE)
         })
+        .catch(() => this.setState({ submitting: false }))
     }
   }
 
@@ -280,7 +294,7 @@ export default class ConfirmTransactionBase extends Component {
       methodData,
       ethTransactionAmount,
       fiatTransactionAmount,
-      valid: propsValid,
+      valid: propsValid = true,
       errorMessage,
       errorKey: propsErrorKey,
       currentCurrency,
@@ -295,6 +309,7 @@ export default class ConfirmTransactionBase extends Component {
       nonce,
       warning,
     } = this.props
+    const { submitting } = this.state
 
     const { name } = methodData
     const fiatConvertedAmount = formatCurrency(fiatTransactionAmount, currentCurrency)
@@ -320,7 +335,7 @@ export default class ConfirmTransactionBase extends Component {
         errorMessage={errorMessage}
         errorKey={propsErrorKey || errorKey}
         warning={warning}
-        valid={propsValid || valid}
+        disabled={!propsValid || !valid || submitting}
         onEdit={() => this.handleEdit()}
         onCancel={() => this.handleCancel()}
         onSubmit={() => this.handleSubmit()}
-- 
cgit