From 896f6e48d988bbc0fe82a63a44bc82b035f30073 Mon Sep 17 00:00:00 2001
From: Vojtech Simetka <vojtech@simetka.cz>
Date: Fri, 29 Jul 2022 10:42:14 +0200
Subject: [PATCH] fix: if the node has error, disable pages that can never load
 (#502)

---
 src/pages/account/wallet/AccountWallet.tsx | 7 +++++--
 src/pages/top-up/index.tsx                 | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx
index ffe79c0b..b6c2a0d8 100644
--- a/src/pages/account/wallet/AccountWallet.tsx
+++ b/src/pages/account/wallet/AccountWallet.tsx
@@ -10,14 +10,15 @@ import ExpandableListItemActions from '../../../components/ExpandableListItemAct
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
+import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import config from '../../../config'
-import { Context } from '../../../providers/Bee'
+import { CheckState, Context } from '../../../providers/Bee'
 import { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
-  const { balance, nodeAddresses, nodeInfo } = useContext(Context)
+  const { balance, nodeAddresses, nodeInfo, status } = useContext(Context)
 
   const navigate = useNavigate()
 
@@ -33,6 +34,8 @@ export function AccountWallet(): ReactElement {
     navigate(ROUTES.TOP_UP)
   }
 
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
   return (
     <>
       <Header />
diff --git a/src/pages/top-up/index.tsx b/src/pages/top-up/index.tsx
index 905d22b9..01de99e1 100644
--- a/src/pages/top-up/index.tsx
+++ b/src/pages/top-up/index.tsx
@@ -10,13 +10,14 @@ import ExpandableListItemActions from '../../components/ExpandableListItemAction
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { ROUTES } from '../../routes'
-import { Context as BeeContext } from '../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../providers/Bee'
 import { Context as SettingsContext } from '../../providers/Settings'
 import config from '../../config'
 import { BeeModes } from '@ethersphere/bee-js'
 import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop'
 import { Loading } from '../../components/Loading'
 import { useSnackbar } from 'notistack'
+import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -39,7 +40,7 @@ export default function TopUp(): ReactElement {
   const navigate = useNavigate()
   const styles = useStyles()
   const isBeeDesktop = config.BEE_DESKTOP_ENABLED
-  const { balance, nodeInfo } = useContext(BeeContext)
+  const { balance, nodeInfo, status } = useContext(BeeContext)
   const { providerUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
@@ -64,6 +65,8 @@ export default function TopUp(): ReactElement {
     setLoading(false)
   }
 
+  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
+
   if (!balance) {
     return <Loading />
   }