fix: if the node has error, disable pages that can never load (#502)

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 />

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 />
   }