Save recent network balances in local storage (#5843)

* Use selector for state.metamask.accounts in all cases.

* Default to cached balance when selecting metamask accounts

* Adds the cached-balances controller

* Documentation and small codes fixes for #5843

Co-Authored-By: danjm <danjm.com@gmail.com>

12 files changed, 61 insertions, 28 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index b3aff1f39..5405f8495 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -7,6 +7,7 @@ const h = require('react-hyperscript')
 const actions = require('./actions')
 const classnames = require('classnames')
 const log = require('loglevel')
+const { getMetaMaskAccounts } = require('./selectors')
 
 // init
 const InitializeScreen = require('../../mascara/src/app/first-time').default
@@ -275,9 +276,10 @@ function mapStateToProps (state) {
     loadingMessage,
   } = appState
 
+  const accounts = getMetaMaskAccounts(state)
+
   const {
     identities,
-    accounts,
     address,
     keyrings,
     isInitialized,
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 94eae8d07..e88389096 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -13,6 +13,7 @@ const Tooltip = require('../tooltip')
 import Identicon from '../identicon'
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
 import { PRIMARY } from '../../constants/common'
+import { getMetaMaskAccounts } from '../../selectors'
 
 const {
   SETTINGS_ROUTE,
@@ -41,7 +42,7 @@ function mapStateToProps (state) {
     isAccountMenuOpen: state.metamask.isAccountMenuOpen,
     keyrings: state.metamask.keyrings,
     identities: state.metamask.identities,
-    accounts: state.metamask.accounts,
+    accounts: getMetaMaskAccounts(state),
   }
 }
 
diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js
index 4e2769ee8..78b51449e 100644
--- a/ui/app/components/balance-component.js
+++ b/ui/app/components/balance-component.js
@@ -6,14 +6,14 @@ import TokenBalance from './token-balance'
 import Identicon from './identicon'
 import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display'
 import { PRIMARY, SECONDARY } from '../constants/common'
-const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
+const { getNativeCurrency, getAssetImages, conversionRateSelector, getCurrentCurrency, getMetaMaskAccounts } = require('../selectors')
 
 const { formatBalance } = require('../util')
 
 module.exports = connect(mapStateToProps)(BalanceComponent)
 
 function mapStateToProps (state) {
-  const accounts = state.metamask.accounts
+  const accounts = getMetaMaskAccounts(state)
   const network = state.metamask.network
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
   const account = accounts[selectedAddress]
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index 45bf62fb9..626143ac7 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -18,6 +18,7 @@ import { isBalanceSufficient } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
 import { addressSlicer, valuesFor } from '../../../util'
+import { getMetaMaskAccounts } from '../../../selectors'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -47,11 +48,11 @@ const mapStateToProps = (state, props) => {
   } = confirmTransaction
   const { txParams = {}, lastGasPrice, id: transactionId } = txData
   const { from: fromAddress, to: txParamsToAddress } = txParams
+  const accounts = getMetaMaskAccounts(state)
   const {
     conversionRate,
     identities,
     currentCurrency,
-    accounts,
     selectedAddress,
     selectedAddressTxList,
     assetImages,
diff --git a/ui/app/components/pages/create-account/connect-hardware/index.js b/ui/app/components/pages/create-account/connect-hardware/index.js
index 4fe25f629..bd877fd4e 100644
--- a/ui/app/components/pages/create-account/connect-hardware/index.js
+++ b/ui/app/components/pages/create-account/connect-hardware/index.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../../actions')
+const { getMetaMaskAccounts } = require('../../../../selectors')
 const ConnectScreen = require('./connect-screen')
 const AccountList = require('./account-list')
 const { DEFAULT_ROUTE } = require('../../../../routes')
@@ -224,8 +225,9 @@ ConnectHardwareForm.propTypes = {
 
 const mapStateToProps = state => {
   const {
-    metamask: { network, selectedAddress, identities = {}, accounts = [] },
+    metamask: { network, selectedAddress, identities = {} },
   } = state
+  const accounts = getMetaMaskAccounts(state)
   const numberOfExistingAccounts = Object.keys(identities).length
   const {
     appState: { defaultHdPaths },
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index 90279bbbd..bb6771e4d 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -7,6 +7,7 @@ const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../../routes')
+const { getMetaMaskAccounts } = require('../../../../selectors')
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 import Button from '../../../button'
 
@@ -136,7 +137,7 @@ JsonImportSubview.propTypes = {
 const mapStateToProps = state => {
   return {
     error: state.appState.warning,
-    firstAddress: Object.keys(state.metamask.accounts)[0],
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
   }
 }
 
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 8db1bfbdd..45068b96e 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -7,6 +7,7 @@ const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+const { getMetaMaskAccounts } = require('../../../../selectors')
 import Button from '../../../button'
 
 PrivateKeyImportView.contextTypes = {
@@ -22,7 +23,7 @@ module.exports = compose(
 function mapStateToProps (state) {
   return {
     error: state.appState.warning,
-    firstAddress: Object.keys(state.metamask.accounts)[0],
+    firstAddress: Object.keys(getMetaMaskAccounts(state))[0],
   }
 }
 
diff --git a/ui/app/components/send/send.selectors.js b/ui/app/components/send/send.selectors.js
index eb22a08b7..c217d848e 100644
--- a/ui/app/components/send/send.selectors.js
+++ b/ui/app/components/send/send.selectors.js
@@ -4,6 +4,9 @@ const {
   multiplyCurrencies,
 } = require('../../conversion-util')
 const {
+  getMetaMaskAccounts,
+} = require('../../selectors')
+const {
   estimateGasPriceFromRecentBlocks,
 } = require('./send.utils')
 
@@ -54,10 +57,8 @@ const selectors = {
 module.exports = selectors
 
 function accountsWithSendEtherInfoSelector (state) {
-  const {
-    accounts,
-    identities,
-  } = state.metamask
+  const accounts = getMetaMaskAccounts(state)
+  const { identities } = state.metamask
 
   const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
     return Object.assign({}, account, identities[key])
@@ -72,7 +73,7 @@ function accountsWithSendEtherInfoSelector (state) {
 //   const autoAddTokensThreshold = 1
 
 //   const numberOfTransactions = state.metamask.selectedAddressTxList.length
-//   const numberOfAccounts = Object.keys(state.metamask.accounts).length
+//   const numberOfAccounts = Object.keys(getMetaMaskAccounts(state)).length
 //   const numberOfTokensAdded = state.metamask.tokens.length
 
 //   const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
@@ -155,14 +156,14 @@ function getRecentBlocks (state) {
 }
 
 function getSelectedAccount (state) {
-  const accounts = state.metamask.accounts
+  const accounts = getMetaMaskAccounts(state)
   const selectedAddress = getSelectedAddress(state)
 
   return accounts[selectedAddress]
 }
 
 function getSelectedAddress (state) {
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0]
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
 
   return selectedAddress
 }
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
index cb8078ec1..f9f05b0ae 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
@@ -2,12 +2,19 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import TransactionViewBalance from './transaction-view-balance.component'
-import { getSelectedToken, getSelectedAddress, getNativeCurrency, getSelectedTokenAssetImage } from '../../selectors'
+import {
+  getSelectedToken,
+  getSelectedAddress,
+  getNativeCurrency,
+  getSelectedTokenAssetImage,
+  getMetaMaskAccounts,
+} from '../../selectors'
 import { showModal } from '../../actions'
 
 const mapStateToProps = state => {
   const selectedAddress = getSelectedAddress(state)
-  const { metamask: { network, accounts } } = state
+  const { metamask: { network } } = state
+  const accounts = getMetaMaskAccounts(state)
   const account = accounts[selectedAddress]
   const { balance } = account
 
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index e050e0ee6..8ad6637ae 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -38,7 +38,7 @@ function mapStateToProps (state) {
     network: state.metamask.network,
     sidebarOpen: state.appState.sidebar.isOpen,
     identities: state.metamask.identities,
-    accounts: state.metamask.accounts,
+    accounts: selectors.getMetaMaskAccounts(state),
     tokens: state.metamask.tokens,
     keyrings: state.metamask.keyrings,
     selectedAddress: selectors.getSelectedAddress(state),
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 0784a872e..34f5466e2 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -12,6 +12,7 @@ const R = require('ramda')
 const SignatureRequest = require('./components/signature-request')
 const Loading = require('./components/loading-screen')
 const { DEFAULT_ROUTE } = require('./routes')
+const { getMetaMaskAccounts } = require('./selectors')
 
 module.exports = compose(
   withRouter,
@@ -28,7 +29,7 @@ function mapStateToProps (state) {
 
   return {
     identities: state.metamask.identities,
-    accounts: state.metamask.accounts,
+    accounts: getMetaMaskAccounts(state),
     selectedAddress: state.metamask.selectedAddress,
     unapprovedTxs: state.metamask.unapprovedTxs,
     unapprovedMsgs: state.metamask.unapprovedMsgs,
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index b518527c9..f99f14aa8 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -1,9 +1,7 @@
 const abi = require('human-standard-token-abi')
-
 import {
   transactionsSelector,
 } from './selectors/transactions'
-
 const {
   multiplyCurrencies,
 } = require('./conversion-util')
@@ -36,12 +34,13 @@ const selectors = {
   getCurrentViewContext,
   getTotalUnapprovedCount,
   preferencesSelector,
+  getMetaMaskAccounts,
 }
 
 module.exports = selectors
 
 function getSelectedAddress (state) {
-  const selectedAddress = state.metamask.selectedAddress || Object.keys(state.metamask.accounts)[0]
+  const selectedAddress = state.metamask.selectedAddress || Object.keys(getMetaMaskAccounts(state))[0]
 
   return selectedAddress
 }
@@ -53,8 +52,27 @@ function getSelectedIdentity (state) {
   return identities[selectedAddress]
 }
 
+function getMetaMaskAccounts (state) {
+  const currentAccounts = state.metamask.accounts
+  const cachedBalances = state.metamask.cachedBalances
+  const selectedAccounts = {}
+
+  Object.keys(currentAccounts).forEach(accountID => {
+    const account = currentAccounts[accountID]
+    if (account && account.balance === null || account.balance === undefined) {
+      selectedAccounts[accountID] = {
+        ...account,
+        balance: cachedBalances[accountID],
+      }
+    } else {
+      selectedAccounts[accountID] = account
+    }
+  })
+  return selectedAccounts
+}
+
 function getSelectedAccount (state) {
-  const accounts = state.metamask.accounts
+  const accounts = getMetaMaskAccounts(state)
   const selectedAddress = getSelectedAddress(state)
 
   return accounts[selectedAddress]
@@ -102,10 +120,8 @@ function getAddressBook (state) {
 }
 
 function accountsWithSendEtherInfoSelector (state) {
-  const {
-    accounts,
-    identities,
-  } = state.metamask
+  const accounts = getMetaMaskAccounts(state)
+  const { identities } = state.metamask
 
   const accountsWithSendEtherInfo = Object.entries(accounts).map(([key, account]) => {
     return Object.assign({}, account, identities[key])
@@ -175,7 +191,7 @@ function autoAddToBetaUI (state) {
   const autoAddTokensThreshold = 1
 
   const numberOfTransactions = state.metamask.selectedAddressTxList.length
-  const numberOfAccounts = Object.keys(state.metamask.accounts).length
+  const numberOfAccounts = Object.keys(getMetaMaskAccounts(state)).length
   const numberOfTokensAdded = state.metamask.tokens.length
 
   const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&