UI refactor

3 files changed, 106 insertions, 97 deletions

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,
     })
   }