Persist redux state

package.json

@@ -26,6 +26,7 @@
     "reduce-reducers": "^1.0.4",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.5",
     "semantic-ui-css": "^2.4.1",

src/components/send/SendContainer.js

@@ -19,6 +19,7 @@ import TransferMoneyIcon from '../svg/TransferMoneyIcon'
 import { onKeyDown } from '../../hooks/eventListeners'
 import classNames from '../../utils/classNames'
 import { Mixpanel } from '../../mixpanel/index'
+import { actionsPending } from '../../utils/alerts'
 
 const {
     parseNearAmount, formatNearAmount
@@ -57,7 +58,13 @@ export function SendContainer({ match, location }) {
     const sufficientBalance = balance?.available
         ? !new BN(parseNearAmount(amount)).isZero() && (new BN(parseNearAmount(amount)).lte(amountAvailableToSend) || useMax) && isDecimalString(amount)
         : undefined
-    const sendAllowed = ((localAlert && localAlert.success !== false) || id.length === 64) && sufficientBalance && amount && !mainLoader && !success
+
+    const sendAllowed = ((localAlert && localAlert.success !== false) || id.length === 64)
+        && sufficientBalance
+        && amount
+        && !mainLoader
+        && !success
+        && !actionsPending('GET_BALANCE')
 
     useEffect(() => {
         if (success) {

src/index.js

@@ -3,29 +3,50 @@ import "regenerator-runtime/runtime";
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-import { initSentry } from './utils/sentry'
-
 import { createStore } from 'redux'
+import storage from 'redux-persist/lib/storage'
+import { createBrowserHistory } from 'history'
 import { Provider } from 'react-redux'
 import { LocalizeProvider } from 'react-localize-redux';
-import { createBrowserHistory } from 'history'
+
+import { persistStore, persistReducer } from 'redux-persist'
+import { PersistGate } from 'redux-persist/integration/react'
 
 import createRootReducer from './reducers'
 import createMiddleware from './middleware'
-
+import { initSentry } from './utils/sentry'
 import Routing from './components/Routing'
 
+import { ACCOUNT_ID_SUFFIX } from './utils/wallet'
+
 initSentry();
 
-const history = createBrowserHistory()
+const persistConfig = {
+    key: `wallet.near.org:${ACCOUNT_ID_SUFFIX}`,
+    storage,
+    blacklist: ['status', 'staking'],
+    writeFailHandler: (error) => {
+        if (error.name === 'QuotaExceededError') {
+            persistor.pause()
+        }
+    }
+}
+
+export const history = createBrowserHistory()
+
+const persistedReducer = persistReducer(persistConfig, createRootReducer(history))
+
+export const store = createStore(persistedReducer, createMiddleware(history))
 
-export const store = createStore(createRootReducer(history), createMiddleware(history))
+let persistor = persistStore(store)
 
 ReactDOM.render(
     <Provider store={store}>
-        <LocalizeProvider store={store}>
-            <Routing history={history} />
-        </LocalizeProvider>
+        <PersistGate loading={null} persistor={persistor}>
+            <LocalizeProvider store={store}>
+                <Routing history={history} />
+            </LocalizeProvider>
+        </PersistGate>
     </Provider>,
     document.getElementById('root')
 )

src/reducers/selectors/balance.js

@@ -23,10 +23,10 @@ export const selectProfileBalance = (balance) => {
     const lockupIdExists = !!lockedAmount
 
     const walletBalance = {
-        walletBalance: stakedBalanceMainAccount.add(new BN(balanceAvailable)).add(new BN(stateStaked)).toString(),
-        reservedForStorage: stateStaked.toString(),
+        walletBalance: new BN(stakedBalanceMainAccount).add(new BN(balanceAvailable)).add(new BN(stateStaked)).toString(),
+        reservedForStorage: stateStaked,
         inStakingPools: {
-            sum: stakedBalanceMainAccount.toString(),
+            sum: stakedBalanceMainAccount,
             staked: account?.totalStaked,
             pendingRelease: account?.totalPending,
             availableForWithdraw: account?.totalAvailable
@@ -41,18 +41,18 @@ export const selectProfileBalance = (balance) => {
         } = balance
 
         lockupBalance = {
-            lockupBalance: totalBalance.toString(),
+            lockupBalance: totalBalance,
             reservedForStorage: LOCKUP_MIN_BALANCE.toString(),
             inStakingPools: {
-                sum: stakedBalanceLockup.toString(),
+                sum: stakedBalanceLockup,
                 staked: lockupAccount?.totalStaked,
                 pendingRelease: lockupAccount?.totalPending && new BN(lockupAccount.totalPending).toString(),
                 availableForWithdraw: lockupAccount?.totalAvailable && new BN(lockupAccount.totalAvailable).toString()
             },
-            locked: lockedAmount.toString(),
+            locked: lockedAmount,
             unlocked: {
-                sum: ownersBalance.toString(),
-                availableToTransfer: liquidOwnersBalance.toString()
+                sum: ownersBalance,
+                availableToTransfer: liquidOwnersBalance
             }
         }
     }

src/utils/account-with-lockup.js

@@ -197,23 +197,23 @@ async function getAccountBalance(limitedAccountData = false) {
         return {
             ...balance,
             balanceAvailable: balance.available,
-            available,
-            ownersBalance,
-            liquidOwnersBalance,
-            lockedAmount,
-            total: new BN(balance.total).add(new BN(lockedAmount)).add(new BN(ownersBalance)).add(stakedBalanceMainAccount).toString(),
-            totalBalance,
-            stakedBalanceLockup: stakedBalanceLockup,
+            available: available.toString(),
+            ownersBalance: ownersBalance.toString(),
+            liquidOwnersBalance: liquidOwnersBalance.toString(),
+            lockedAmount: lockedAmount.toString(),
+            total: new BN(balance.total).add(lockedAmount).add(ownersBalance).add(stakedBalanceMainAccount).toString(),
+            totalBalance: totalBalance.toString(),
+            stakedBalanceLockup: stakedBalanceLockup.toString(),
             lockupAccountId,
-            stakedBalanceMainAccount
+            stakedBalanceMainAccount: stakedBalanceMainAccount.toString()
         }
     } catch (error) {
         if (error.message.match(/ccount ".+" doesn't exist/) || error.message.includes('does not exist while viewing') || error.message.includes('cannot find contract code for account')) {
             return {
                 ...balance,
                 balanceAvailable: balance.available,
                 total: new BN(balance.total).add(stakedBalanceMainAccount).toString(),
-                stakedBalanceMainAccount,
+                stakedBalanceMainAccount: stakedBalanceMainAccount.toString(),
 
             }
         }

yarn.lock

@@ -11907,6 +11907,11 @@ redux-actions@^2.6.5:
     reduce-reducers "^0.4.3"
     to-camel-case "^1.0.0"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"