Lazy load wallet balances

package.json

@@ -44,8 +44,8 @@
     "@erebos/keccak256": "^0.9.0",
     "@erebos/secp256k1": "^0.9.0",
     "@erebos/timeline": "^0.9.0",
-    "@ledgerhq/hw-app-eth": "^4.68.2",
-    "@ledgerhq/hw-transport-node-hid": "^4.68.2",
+    "@ledgerhq/hw-app-eth": "^4.69.1",
+    "@ledgerhq/hw-transport-node-hid": "^4.68.4",
     "@mainframe/eth": "^0.4.0",
     "@mainframe/rpc-electron": "^0.2.0",
     "@mainframe/rpc-handler": "^0.3.0",
@@ -59,11 +59,11 @@
     "electron-store": "^4.0.0",
     "electron-util": "^0.12.1",
     "env-paths": "^2.2.0",
-    "eth-sig-util": "^2.3.0",
-    "ethereumjs-tx": "^2.1.0",
+    "eth-sig-util": "^2.4.4",
+    "ethereumjs-tx": "^2.1.1",
     "ethereumjs-util": "^6.1.0",
     "ethereumjs-wallet": "^0.6.3",
-    "ethers": "^4.0.33",
+    "ethers": "^4.0.36",
     "file-url": "^3.0.0",
     "fs-extra": "^8.1.0",
     "get-stream": "^5.0.0",
@@ -73,21 +73,21 @@
     "keytar": "^4.9.0",
     "leveldown": "^5.1.1",
     "mime": "^2.4.4",
-    "nanoid": "^2.0.3",
+    "nanoid": "^2.1.0",
     "object-hash": "^1.3.1",
     "pouchdb-adapter-leveldb": "^7.1.1",
     "qrcode.react": "^0.9.3",
     "react": "^16.9.0",
     "react-art": "^16.9.0",
     "react-blockies": "^1.4.0",
     "react-dom": "^16.9.0",
-    "react-modal": "^3.9.1",
+    "react-modal": "^3.10.1",
     "react-native-web": "^0.10.0",
     "react-relay": "^1.7.0",
     "react-router": "^4.3.1",
     "react-transition-group": "^4.2.2",
     "relay-runtime": "^1.7.0",
-    "rxdb": "^8.3.0",
+    "rxdb": "^8.4.0",
     "rxjs": "^6.5.2",
     "semver": "^6.3.0",
     "source-map-support": "^0.5.13",
@@ -107,20 +107,20 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.5.5",
     "@svgr/cli": "^4.3.2",
-    "babel-eslint": "^10.0.2",
+    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-react-native-web": "^0.10.0",
     "babel-plugin-relay": "^1.7.0",
-    "cross-env": "^5.2.0",
+    "cross-env": "^5.2.1",
     "css-loader": "^3.2.0",
     "del-cli": "^2.0.0",
-    "electron": "^6.0.3",
+    "electron": "^6.0.7",
     "electron-builder": "^21.2.0",
     "electron-webpack": "^2.7.4",
-    "eslint": "^6.2.0",
+    "eslint": "^6.3.0",
     "eslint-config-mainframe": "^4.0.1",
     "file-loader": "^4.2.0",
-    "flow-bin": "^0.105.2",
+    "flow-bin": "^0.106.3",
     "flow-copy-source": "^2.0.7",
     "flow-typed": "^2.6.1",
     "lerna": "^3.16.4",
@@ -129,6 +129,6 @@
     "relay-compiler": "^1.7.0",
     "spectron": "^8.0.0",
     "url-loader": "^2.1.0",
-    "webpack": "^4.39.2"
+    "webpack": "^4.39.3"
   }
 }

src/renderer/launcher/wallets/WalletsScreen.js

@@ -9,7 +9,7 @@ import DownloadMdIcon from '@morpheus-ui/icons/DownloadMd'
 import EthCircledIcon from '@morpheus-ui/icons/EthCircled'
 import MftCircledIcon from '@morpheus-ui/icons/MftCircled'
 import { sortBy } from 'lodash'
-import React, { Component } from 'react'
+import React, { Component, useEffect, useState } from 'react'
 import {
   commitMutation,
   createFragmentContainer,
@@ -18,7 +18,10 @@ import {
 } from 'react-relay'
 import styled from 'styled-components/native'
 
+import { MFT_TOKEN_ADDRESSES } from '../../../constants'
+
 import RelayRenderer from '../RelayRenderer'
+import { getEthClient } from '../rpc'
 
 import WalletImportView from './WalletImportView'
 import WalletCreateModal from './WalletCreateModal'
@@ -27,9 +30,6 @@ import WallePreviewModal from './WalletPreviewModal'
 import WalletIcon from './WalletIcon'
 import type { WalletsScreen_user as User } from './__generated__/WalletsScreen_user.graphql'
 
-// TODO: getting the wallet balances involves external calls that can fail or take some time
-// these calls should be deferred or use their own query to avoid delaying the screen loading
-
 type Props = {
   relay: {
     environment: Environment,
@@ -51,10 +51,6 @@ type Wallet = {|
   +localID: string,
   +accounts: $ReadOnlyArray<{|
     +address: string,
-    +balances: {|
-      +eth: string,
-      +mft: string,
-    |},
   |}>,
 |}
 
@@ -165,9 +161,43 @@ const setProfileWalletMutation = graphql`
   }
 `
 
-const roundNum = (number, precision) => {
-  precision = Math.pow(10, precision)
-  return Math.ceil(Number(number) * precision) / precision
+const roundNum = (value: string, precision = 5): number => {
+  const p = Math.pow(10, precision)
+  return Math.ceil(Number(value) * p) / p
+}
+
+type AccountBalanceProps = { address: string, currency: 'ETH' | 'MFT' }
+
+function AccountBalance({ address, currency }: AccountBalanceProps) {
+  const [balance, setBalance] = useState<null | number>(null)
+
+  useEffect(() => {
+    const eth = getEthClient()
+    if (currency === 'ETH') {
+      eth.getETHBalance(address).then(b => setBalance(roundNum(b, 5)))
+    } else if (currency === 'MFT') {
+      eth
+        .fetchNetwork()
+        .then(() => {
+          return eth
+            .erc20Contract(MFT_TOKEN_ADDRESSES[eth.networkName])
+            .getBalance(address)
+        })
+        .then(b => {
+          setBalance(roundNum(b, 5))
+        })
+    } else {
+      setBalance(null)
+    }
+  }, [address, currency])
+
+  return balance ? (
+    <>
+      {balance} {currency}
+    </>
+  ) : (
+    <>...</>
+  )
 }
 
 class WalletsView extends Component<Props, State> {
@@ -319,7 +349,7 @@ class WalletsView extends Component<Props, State> {
                 minWidth: 80,
               }}
               color="#232323">
-              {roundNum(a.balances.eth, 5)} ETH
+              <AccountBalance address={a.address} currency="ETH" />
             </Text>
           </Ballance>
           <Ballance>
@@ -332,7 +362,7 @@ class WalletsView extends Component<Props, State> {
                 minWidth: 80,
               }}
               color="#232323">
-              {roundNum(a.balances.mft, 5)} MFT
+              <AccountBalance address={a.address} currency="MFT" />
             </Text>
           </Ballance>
         </AccountView>
@@ -498,21 +528,13 @@ const RelayContainer = createFragmentContainer(WalletsView, {
           localID
           accounts {
             address
-            balances {
-              eth
-              mft
-            }
           }
         }
         ledger {
           name
           localID
           accounts {
             address
-            balances {
-              eth
-              mft
-            }
           }
         }
       }