Merge pull request #562 from hermeznetwork/fix-coordinator-state-loading

Fix coordinator state loading

src/constants.js

@@ -35,9 +35,11 @@ export const PRIVACY_POLICY_URL = 'https://hermez.io/privacy-policy'
 
 export const TERMS_OF_SERVICE_URL = 'https://hermez.io/terms-of-service'
 
-export const AUTO_REFRESH_RATE = 60000 // 1min
+export const AUTO_REFRESH_RATE = 60_000 // 1min
 
-export const RETRY_POOL_TXS_RATE = 60000 // 10min
+export const RETRY_POOL_TXS_RATE = 6000_000 // 10min
+
+export const COORDINATOR_STATE_REFRESH_RATE = 30_000 // 30s
 
 export const STORAGE_VERSION_KEY = 'hermezWalletStorageVersion'
 
@@ -49,7 +51,7 @@ export const HERMEZ_HELP_CENTER_URL = 'https://docs.hermez.io/#/faq/end-users'
 
 export const HERMEZ_WEB_URL = 'https://hermez.io'
 
-export const DEPOSIT_TX_TIMEOUT = 86400000 // 24h
+export const DEPOSIT_TX_TIMEOUT = 8_640_0000 // 24h
 
 export const AIRDROP_MORE_INFO_URL = 'https://blog.hermez.io/hermez-community-rewards'
 

src/routing/routes.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { TxType } from '@hermeznetwork/hermezjs/src/enums'
 
 import Home from '../views/home/home.view'
+import Login from '../views/login/login.view'
 import Transaction from '../views/transaction/transaction.view'
 import MyAccount from '../views/my-account/my-account.view'
 import AccountDetails from '../views/account-details/account-details.view'
 import TransactionDetails from '../views/transaction-details/transaction-details.view'
-import Login from '../views/login/login.view'
 import MyCode from '../views/my-code/my-code.view'
 
 const routes = [
@@ -16,6 +16,7 @@ const routes = [
   },
   {
     path: '/login',
+    isPublic: true,
     render: () => <Login />
   },
   {

src/store/global/global.thunks.js

@@ -14,6 +14,7 @@ import * as airdropApi from '../../apis/rewards'
 import * as storage from '../../utils/storage'
 import * as constants from '../../constants'
 import { isTxMined, hasTxBeenReverted, isTxCanceled, isTxExpectedToFail } from '../../utils/ethereum'
+import { CurrencySymbol } from '../../utils/currencies'
 
 /**
  * Sets the environment to use in hermezjs. If the chainId is supported will pick it up
@@ -84,8 +85,12 @@ function changeRedirectRoute (redirectRoute) {
  * @param {string[]} symbols - ISO 4217 currency codes
  * @returns {void}
  */
-function fetchFiatExchangeRates (symbols) {
+function fetchFiatExchangeRates () {
   return (dispatch) => {
+    const symbols = Object.values(CurrencySymbol)
+      .filter(currency => currency.code !== CurrencySymbol.USD.code)
+      .map((currency) => currency.code)
+
     dispatch(globalActions.loadFiatExchangeRates())
 
     return fiatExchangeRatesApi.getFiatExchangeRates(symbols)

src/store/transaction/transaction.thunks.js

@@ -196,7 +196,7 @@ function fetchAccountBalance () {
  * @returns {void}
  */
 function fetchFees () {
-  return function (dispatch) {
+  return function (dispatch, getState) {
     dispatch(transactionActions.loadFees())
 
     return CoordinatorAPI.getState()

src/views/account-details/account-details.view.jsx

@@ -11,7 +11,6 @@ import * as globalThunks from '../../store/global/global.thunks'
 import * as accountDetailsThunks from '../../store/account-details/account-details.thunks'
 import Spinner from '../shared/spinner/spinner.view'
 import TransactionList from './components/transaction-list/transaction-list.view'
-import withAuthGuard from '../shared/with-auth-guard/with-auth-guard.view'
 import { getFixedTokenAmount, getTokenAmountInPreferredCurrency } from '../../utils/currencies'
 import Container from '../shared/container/container.view'
 import { changeHeader } from '../../store/global/global.actions'
@@ -49,7 +48,6 @@ function AccountDetails ({
   onCheckPendingDeposits,
   onAddPendingDelayedWithdraw,
   onRemovePendingDelayedWithdraw,
-  onLoadCoordinatorState,
   onCheckPendingDelayedWithdrawals,
   onCheckPendingWithdrawals,
   onNavigateToTransactionDetails,
@@ -78,10 +76,6 @@ function AccountDetails ({
     onChangeHeader(accountTask.data?.token.name)
   }, [accountTask, onChangeHeader])
 
-  React.useEffect(() => {
-    onLoadCoordinatorState()
-  }, [])
-
   React.useEffect(() => {
     const loadInitialData = () => {
       onCheckPendingDeposits()
@@ -366,7 +360,6 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(globalThunks.addPendingDelayedWithdraw(pendingDelayedWithdraw)),
   onRemovePendingDelayedWithdraw: (pendingDelayedWithdrawId) =>
     dispatch(globalThunks.removePendingDelayedWithdraw(pendingDelayedWithdrawId)),
-  onLoadCoordinatorState: () => dispatch(globalThunks.fetchCoordinatorState()),
   onCheckPendingWithdrawals: () =>
     dispatch(globalThunks.checkPendingWithdrawals()),
   onCheckPendingDelayedWithdrawals: () =>
@@ -377,4 +370,4 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(resetState())
 })
 
-export default withAuthGuard(connect(mapStateToProps, mapDispatchToProps)(AccountDetails))
+export default connect(mapStateToProps, mapDispatchToProps)(AccountDetails)

src/views/app.view.jsx

@@ -9,14 +9,17 @@ import Layout from './shared/layout/layout.view'
 import routes from '../routing/routes'
 import * as globalThunks from '../store/global/global.thunks'
 import Spinner from './shared/spinner/spinner.view'
-import { CurrencySymbol } from '../utils/currencies'
-import { RETRY_POOL_TXS_RATE } from '../constants'
+import { COORDINATOR_STATE_REFRESH_RATE, RETRY_POOL_TXS_RATE } from '../constants'
+import PrivateRoute from './shared/private-route/private-route.view'
 
 function App ({
   wallet,
   hermezStatusTask,
   ethereumNetworkTask,
+  coordinatorStateTask,
   fiatExchangeRatesTask,
+  onChangeRedirectRoute,
+  onLoadCoordinatorState,
   onLoadFiatExchangeRates,
   onCheckHermezStatus,
   onLoadReward,
@@ -34,10 +37,16 @@ function App ({
   }, [onCheckHermezStatus])
 
   React.useEffect(() => {
-    if (process.env.REACT_APP_ENABLE_AIRDROP) {
-      onLoadReward()
+    let intervalId
+
+    if (ethereumNetworkTask.status === 'successful') {
+      intervalId = setInterval(onLoadCoordinatorState, COORDINATOR_STATE_REFRESH_RATE)
+
+      onLoadCoordinatorState()
     }
-  }, [])
+
+    return () => { clearInterval(intervalId) }
+  }, [ethereumNetworkTask])
 
   React.useEffect(() => {
     if (hermezStatusTask.status === 'successful' && !hermezStatusTask.data.isUnderMaintenance) {
@@ -46,6 +55,12 @@ function App ({
     }
   }, [hermezStatusTask, onSetHermezEnvironment, onLoadFiatExchangeRates])
 
+  React.useEffect(() => {
+    if (process.env.REACT_APP_ENABLE_AIRDROP) {
+      onLoadReward()
+    }
+  }, [])
+
   React.useEffect(() => {
     let intervalId
 
@@ -82,11 +97,14 @@ function App ({
       )
     ) &&
     (
+      hermezStatusTask.status === 'pending' ||
+      hermezStatusTask.status === 'loading' ||
       ethereumNetworkTask.status === 'pending' ||
       ethereumNetworkTask.status === 'loading' ||
       fiatExchangeRatesTask.status === 'pending' ||
       fiatExchangeRatesTask.status === 'loading' ||
-      fiatExchangeRatesTask.status === 'failure'
+      coordinatorStateTask.status === 'pending' ||
+      coordinatorStateTask.status === 'loading'
     )
   ) {
     return (
@@ -99,14 +117,27 @@ function App ({
   return (
     <Layout>
       <Switch>
-        {routes.map(route =>
-          <Route
-            exact
-            key={route.path}
-            path={route.path}
-            render={route.render}
-          />
-        )}
+        <>
+          {routes.map((route) => (
+            route.isPublic
+              ? (
+                <Route
+                  exact
+                  key={route.path}
+                  path={route.path}
+                  render={route.render}
+                />
+                )
+              : (
+                <PrivateRoute
+                  key={route.path}
+                  isUserLoggedIn={wallet !== undefined}
+                  route={route}
+                  onChangeRedirectRoute={onChangeRedirectRoute}
+                />
+                )
+          ))}
+        </>
         <Redirect to='/' />
       </Switch>
     </Layout>
@@ -120,23 +151,19 @@ App.propTypes = {
 const mapStateToProps = (state) => ({
   wallet: state.global.wallet,
   hermezStatusTask: state.global.hermezStatusTask,
-  fiatExchangeRatesTask: state.global.fiatExchangeRatesTask,
-  ethereumNetworkTask: state.global.ethereumNetworkTask
+  ethereumNetworkTask: state.global.ethereumNetworkTask,
+  coordinatorStateTask: state.global.coordinatorStateTask,
+  fiatExchangeRatesTask: state.global.fiatExchangeRatesTask
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  onChangeRedirectRoute: (redirectRoute) => dispatch(globalThunks.changeRedirectRoute(redirectRoute)),
   onSetHermezEnvironment: () => dispatch(globalThunks.setHermezEnvironment()),
   onCheckHermezStatus: () => dispatch(globalThunks.checkHermezStatus()),
+  onLoadCoordinatorState: () => dispatch(globalThunks.fetchCoordinatorState()),
+  onLoadFiatExchangeRates: () => dispatch(globalThunks.fetchFiatExchangeRates()),
   onLoadReward: () =>
     dispatch(globalThunks.fetchReward()),
-  onLoadFiatExchangeRates: () =>
-    dispatch(
-      globalThunks.fetchFiatExchangeRates(
-        Object.values(CurrencySymbol)
-          .filter(currency => currency.code !== CurrencySymbol.USD.code)
-          .map((currency) => currency.code)
-      )
-    ),
   onCheckPendingTransactions: () => dispatch(globalThunks.checkPendingTransactions()),
   onChangeNetworkStatus: (networkStatus, backgroundColor) =>
     dispatch(globalThunks.changeNetworkStatus(networkStatus, backgroundColor)),

src/views/home/home.view.jsx

@@ -10,7 +10,6 @@ import * as homeThunks from '../../store/home/home.thunks'
 import FiatAmount from '../shared/fiat-amount/fiat-amount.view'
 import AccountList from '../shared/account-list/account-list.view'
 import Spinner from '../shared/spinner/spinner.view'
-import withAuthGuard from '../shared/with-auth-guard/with-auth-guard.view.jsx'
 import Container from '../shared/container/container.view'
 import { copyToClipboard } from '../../utils/browser'
 import { changeHeader, openSnackbar } from '../../store/global/global.actions'
@@ -44,7 +43,6 @@ function Home ({
   coordinatorStateTask,
   rewards,
   onChangeHeader,
-  onLoadCoordinatorState,
   onCheckPendingDeposits,
   onLoadTotalBalance,
   onLoadAccounts,
@@ -87,10 +85,6 @@ function Home ({
     onChangeHeader(theme.palette.primary.main)
   }, [theme, onChangeHeader])
 
-  React.useEffect(() => {
-    onLoadCoordinatorState()
-  }, [])
-
   React.useEffect(() => {
     onCheckPendingDeposits()
     onLoadPoolTransactions()
@@ -330,7 +324,6 @@ const mapDispatchToProps = (dispatch) => ({
   onChangeHeader: () =>
     dispatch(changeHeader({ type: 'main' })),
   onCheckPendingDeposits: () => dispatch(globalThunks.checkPendingDeposits()),
-  onLoadCoordinatorState: () => dispatch(globalThunks.fetchCoordinatorState()),
   onLoadTotalBalance: (hermezEthereumAddress, poolTransactions, pendingDeposits, fiatExchangeRates, preferredCurrency) =>
     dispatch(homeThunks.fetchTotalBalance(hermezEthereumAddress, poolTransactions, pendingDeposits, fiatExchangeRates, preferredCurrency)),
   onLoadAccounts: (hermezEthereumAddress, fromItem, poolTransactions, pendingDeposits, fiatExchangeRates, preferredCurrency) =>
@@ -358,4 +351,4 @@ const mapDispatchToProps = (dispatch) => ({
   onCleanup: () => dispatch(resetState())
 })
 
-export default withAuthGuard(connect(mapStateToProps, mapDispatchToProps)(Home))
+export default connect(mapStateToProps, mapDispatchToProps)(Home)

src/views/my-account/my-account.view.jsx

@@ -10,7 +10,6 @@ import { changeHeader, openSnackbar } from '../../store/global/global.actions'
 import { changePreferredCurrency } from '../../store/my-account/my-account.thunks'
 import { disconnectWallet } from '../../store/global/global.thunks'
 import Container from '../shared/container/container.view'
-import withAuthGuard from '../shared/with-auth-guard/with-auth-guard.view'
 import { ReactComponent as ExchangeIcon } from '../../images/icons/exchange.svg'
 import { ReactComponent as ExitIcon } from '../../images/icons/exit.svg'
 import { ReactComponent as OpenInNewTabIcon } from '../../images/icons/open-in-new-tab.svg'
@@ -195,4 +194,4 @@ const mapDispatchToProps = (dispatch) => ({
   onOpenRewardsSidenav: () => dispatch(globalActions.openRewardsSidenav())
 })
 
-export default withAuthGuard(connect(mapStateToProps, mapDispatchToProps)(MyAccount))
+export default connect(mapStateToProps, mapDispatchToProps)(MyAccount)

src/views/my-code/my-code.view.jsx

@@ -6,7 +6,6 @@ import { push } from 'connected-react-router'
 import { useLocation } from 'react-router-dom'
 
 import useMyCodeStyles from './my-code.styles'
-import withAuthGuard from '../shared/with-auth-guard/with-auth-guard.view'
 import Container from '../shared/container/container.view'
 import { changeHeader } from '../../store/global/global.actions'
 import { MY_CODE } from '../../constants'
@@ -120,4 +119,4 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(push(`/transfer?receiver=${hermezEthereumAddress}`))
 })
 
-export default withAuthGuard(connect(mapStateToProps, mapDispatchToProps)(MyCode))
+export default connect(mapStateToProps, mapDispatchToProps)(MyCode)

src/views/shared/private-route/private-route.view.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Route, useLocation, Redirect } from 'react-router-dom'
+
+function PrivateRoute ({ isUserLoggedIn, route, onChangeRedirectRoute }) {
+  const { pathname, search } = useLocation()
+
+  return (
+    <Route
+      exact
+      key={route.path}
+      path={route.path}
+      render={() => {
+        if (isUserLoggedIn) {
+          return route.render()
+        } else {
+          const currentRoute = `${pathname}${search}`
+
+          onChangeRedirectRoute(currentRoute)
+
+          return <Redirect to='/login' />
+        }
+      }}
+    />
+  )
+}
+
+export default PrivateRoute