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>

4 files changed, 9 insertions, 4 deletions

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],
   }
 }