Differentiate user being offline and API being offline

oasisprotocol · Jun 22, 2023 · b964070 · b964070
1 parent 87f2e73
commit b964070
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/.changelog/579.bugfix.md b/.changelog/579.bugfix.md
@@ -0,0 +1 @@
+Differentiate user being offline and API being offline
diff --git a/src/app/components/OfflineBanner/hook.ts b/src/app/components/OfflineBanner/hook.ts
@@ -5,9 +5,11 @@ import { AppError, AppErrors } from '../../../types/errors'
 import { useFormattedTimestampString } from '../../hooks/useFormattedTimestamp'
 import { paraTimesConfig } from '../../../config'
 
-export const useIsApiOffline = (network: Network): boolean => {
+export const useIsApiOffline = (network: Network): false | 'userOffline' | 'apiOffline' => {
   const query = useGetStatus(network)
-  return query.isFetched && !query.isSuccess
+  if (query.isPaused) return 'userOffline'
+  if (query.isFetched && !query.isSuccess) return 'apiOffline'
+  return false
 }
 
 export type FreshnessInfo = {

diff --git a/src/app/components/OfflineBanner/index.tsx b/src/app/components/OfflineBanner/index.tsx
@@ -29,9 +29,13 @@ export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNe
   const isNetworkOffline = useIsApiOffline(targetNetwork)
   const networkNames = getNetworkNames(t)
   const target = networkNames[targetNetwork]
-  return isNetworkOffline ? (
-    <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
-  ) : null
+  if (isNetworkOffline === 'userOffline') {
+    return <StyledAlert severity="warning">{t('home.userOffline', { target })}</StyledAlert>
+  }
+  if (isNetworkOffline === 'apiOffline') {
+    return <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
+  }
+  return null
 }
 
 export const RuntimeOfflineBanner: FC = () => {

diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
@@ -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={!!isApiOffline} />
             </Box>
           )}
           <StyledMain>{children}</StyledMain>

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -139,7 +139,7 @@ export const HomePage: FC = () => {
           </LogotypeBox>
           <SearchInputContainer>
             <SearchInputBox>
-              <Search disabled={isApiOffline} variant={searchVariant} onFocusChange={onFocusChange} />
+              <Search disabled={!!isApiOffline} variant={searchVariant} onFocusChange={onFocusChange} />
             </SearchInputBox>
           </SearchInputContainer>
           <ThemeByNetwork network={network}>

diff --git a/src/locales/en/translation.json b/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",