Differentiate user being offline and API being offline

.changelog/579.bugfix.md

@@ -0,0 +1 @@
+Differentiate user being offline and API being offline

src/app/components/OfflineBanner/hook.ts

@@ -5,9 +5,13 @@ import { AppError, AppErrors } from '../../../types/errors'
 import { useFormattedTimestampString } from '../../hooks/useFormattedTimestamp'
 import { paraTimesConfig } from '../../../config'
 
-export const useIsApiOffline = (network: Network): boolean => {
+export const useIsApiReachable = (
+  network: Network,
+): { reachable: true } | { reachable: false; reason: 'userOffline' | 'apiOffline' } => {
   const query = useGetStatus(network)
-  return query.isFetched && !query.isSuccess
+  if (query.isPaused) return { reachable: false, reason: 'userOffline' }
+  if (query.isFetched && !query.isSuccess) return { reachable: false, reason: 'apiOffline' }
+  return { reachable: true }
 }
 
 export type FreshnessInfo = {
@@ -16,7 +20,7 @@ export type FreshnessInfo = {
 }
 
 export const useRuntimeFreshness = (scope: SearchScope): FreshnessInfo => {
-  const isApiOffline = useIsApiOffline(scope.network)
+  const isApiReachable = useIsApiReachable(scope.network).reachable
   if (scope.layer === Layer.consensus) {
     throw new AppError(AppErrors.UnsupportedLayer)
   }
@@ -28,7 +32,7 @@ export const useRuntimeFreshness = (scope: SearchScope): FreshnessInfo => {
     }
   }
 
-  if (isApiOffline) {
+  if (isApiReachable) {
     // The error state will be handled by NetworkOfflineBanner,
     // no need to display another banner whining about obsolete data.
     return {

src/app/components/OfflineBanner/index.tsx

@@ -4,8 +4,9 @@ import Alert from '@mui/material/Alert'
 import { styled } from '@mui/material/styles'
 import { useRequiredScopeParam, useScopeParam } from '../../hooks/useScopeParam'
 import { getNetworkNames, Network } from '../../../types/network'
-import { useIsApiOffline, useRuntimeFreshness } from './hook'
+import { useIsApiReachable, useRuntimeFreshness } from './hook'
 import { getNameForScope } from '../../../types/searchScope'
+import { exhaustedTypeWarning } from '../../../types/errors'
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
   position: 'sticky',
@@ -26,12 +27,19 @@ export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNe
   const scope = useScopeParam()
   const { t } = useTranslation()
   const targetNetwork = wantedNetwork || scope?.network || Network.mainnet
-  const isNetworkOffline = useIsApiOffline(targetNetwork)
+  const isNetworkReachable = useIsApiReachable(targetNetwork)
   const networkNames = getNetworkNames(t)
   const target = networkNames[targetNetwork]
-  return isNetworkOffline ? (
-    <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
-  ) : null
+  if (!isNetworkReachable.reachable) {
+    if (isNetworkReachable.reason === 'userOffline') {
+      return <StyledAlert severity="warning">{t('home.userOffline', { target })}</StyledAlert>
+    }
+    if (isNetworkReachable.reason === 'apiOffline') {
+      return <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
+    }
+    exhaustedTypeWarning('Unexpected isNetworkReachable reason', isNetworkReachable.reason)
+  }
+  return null
 }
 
 export const RuntimeOfflineBanner: FC = () => {

src/app/components/PageLayout/index.tsx

@@ -8,7 +8,7 @@ import { BuildBanner } from '../BuildBanner'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
-import { useIsApiOffline } from '../OfflineBanner/hook'
+import { useIsApiReachable } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
 import useResizeObserver from 'use-resize-observer'
 
@@ -24,7 +24,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const theme = useTheme()
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
-  const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet)
+  const isApiReachable = useIsApiReachable(scope?.network || Network.mainnet).reachable
   const bannersRef = useRef<HTMLDivElement | null>(null)
 
   const { height: bannersHeight } = useResizeObserver<Element>({
@@ -80,7 +80,7 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
                 mb: 6,
               }}
             >
-              <Search scope={scope} variant={isTablet ? 'icon' : 'button'} disabled={isApiOffline} />
+              <Search scope={scope} variant={isTablet ? 'icon' : 'button'} disabled={!isApiReachable} />
             </Box>
           )}
           <StyledMain>{children}</StyledMain>

src/app/pages/HomePage/index.tsx

@@ -16,7 +16,7 @@ import { BuildBanner } from '../../components/BuildBanner'
 import { useSearchQueryNetworkParam } from '../../hooks/useSearchQueryNetworkParam'
 import { ThemeByNetwork } from '../../components/ThemeByNetwork'
 import { NetworkOfflineBanner } from '../../components/OfflineBanner'
-import { useIsApiOffline } from '../../components/OfflineBanner/hook'
+import { useIsApiReachable } from '../../components/OfflineBanner/hook'
 
 export const zIndexHomePage = {
   paraTimeSelector: 1,
@@ -112,7 +112,7 @@ export const HomePage: FC = () => {
   const infoAriaLabel = t('home.helpScreen.infoIconAria')
   const { isMobile } = useScreenSize()
   const { network } = useSearchQueryNetworkParam()
-  const isApiOffline = useIsApiOffline(network)
+  const isApiReachable = useIsApiReachable(network)
 
   const [searchHasFocus, setSearchHasFocus] = useState(false)
   const [step, setStep] = useState<ParaTimeSelectorStep>(ParaTimeSelectorStep.EnableExplore)
@@ -139,7 +139,7 @@ export const HomePage: FC = () => {
           </LogotypeBox>
           <SearchInputContainer>
             <SearchInputBox>
-              <Search disabled={isApiOffline} variant={searchVariant} onFocusChange={onFocusChange} />
+              <Search disabled={!isApiReachable} variant={searchVariant} onFocusChange={onFocusChange} />
             </SearchInputBox>
           </SearchInputContainer>
           <ThemeByNetwork network={network}>

src/app/utils/renderWithProviders.tsx

@@ -2,13 +2,13 @@ import { MemoryRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import { withDefaultTheme } from '../components/ThemeByNetwork'
 import React from 'react'
-import { useIsApiOffline, useRuntimeFreshness } from '../components/OfflineBanner/hook'
+import { useIsApiReachable, useRuntimeFreshness } from '../components/OfflineBanner/hook'
 
 jest.mock('../components/OfflineBanner/hook')
 
 export function renderWithProviders(component: React.ReactElement) {
   // We need to disable API offline checks
-  jest.mocked(useIsApiOffline).mockReturnValue(false)
+  jest.mocked(useIsApiReachable).mockReturnValue({ reachable: true })
   jest.mocked(useRuntimeFreshness).mockReturnValue({ outOfDate: false })
 
   // And then we can run code

src/locales/en/translation.json

@@ -277,6 +277,7 @@
   },
   "home": {
     "apiOffline": "Our {{ target }} API is offline. We’re trying to reconnect",
+    "userOffline": "You are offline. We’re trying to reconnect",
     "runtimeOutOfDate": "We don't have fully up-to-date data about our {{ target }}. The data displayed here might be out of date.",
     "runtimeOutOfDateSince": "The last update we have about our {{ target }} is from {{ lastUpdate }}. The data displayed here might be out of date.",
     "blocks": "Blocks",