fix all the account related bugs

app/scripts/metamask-controller.js

@@ -529,17 +529,28 @@ module.exports = class MetamaskController extends EventEmitter {
     switch (deviceName) {
       case 'trezor':
         const keyringController = this.keyringController
+        const oldAccounts = await keyringController.getAccounts()
         let keyring = await keyringController.getKeyringsByType(
           'Trezor Hardware'
         )[0]
         if (!keyring) {
           keyring = await this.keyringController.addNewKeyring('Trezor Hardware')
         }
-        if (page === 0) {
-          keyring.page = 0
+        let accounts = []
+
+        switch (page) {
+            case -1:
+              accounts = await keyring.getPreviousPage()
+              break
+            case 1:
+              accounts = await keyring.getNextPage()
+              break
+            default:
+              accounts = await keyring.getFirstPage()
         }
-        const accounts = page === -1 ? await keyring.getPreviousPage() : await keyring.getNextPage()
-        this.accountTracker.syncWithAddresses(accounts.map(a => a.address))
+
+        // Merge with existing accounts
+        this.accountTracker.syncWithAddresses(oldAccounts.concat(accounts.map(a => a.address)))
         return accounts
 
       default:

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',
                     {

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