Refactor UI

1 files changed, 137 insertions, 0 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
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,
+}