fix account balance bug

ui/app/components/modals/index.scss

@@ -53,7 +53,7 @@
     }
 
     &__link {
-      margin-top: 16px;
+      margin-top: 14px;
 
       img {
         width: 15px;

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