UI refactor

1 files changed, 51 insertions, 60 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