Differentiate if node is stuck too, not just Nexus

Author: lukaw3d

.changelog/1876.bugfix.md

@@ -0,0 +1 @@
+Improve detecting if API is out-of-date

src/app/components/OfflineBanner/hook.ts

@@ -24,7 +24,7 @@ export const useIsApiReachable = (
 export type FreshnessInfo = {
   unavailable?: boolean
   outOfDate?: boolean
-  outOfDateReason?: false | 'indexer' | 'blocks'
+  outOfDateReason?: false | 'indexer' | 'blocks' | 'node'
   lastUpdate?: string
   latestBlock?: number
 }
@@ -96,7 +96,12 @@ export const useConsensusFreshness = (
 
   const blockInterval = 6 * 1000
   const blocksAreBehindNode = data.latest_node_block > data.latest_block + outOfDateThreshold / blockInterval
-  const outOfDateReason = blocksAreBehindNode ? 'blocks' : freshness.outOfDateReason
+  const nodeIsOutOfDate = freshness.outOfDate && data.latest_node_block === data.latest_block
+  const outOfDateReason = blocksAreBehindNode
+    ? 'blocks'
+    : nodeIsOutOfDate
+      ? 'node'
+      : freshness.outOfDateReason
   return {
     ...freshness,
     outOfDate: outOfDateReason === undefined ? undefined : !!outOfDateReason,

src/app/components/OfflineBanner/index.tsx

@@ -55,6 +55,9 @@ export const OfflineBanner: FC<OfflineBannerProps> = props => {
     // Don't display lastUpdate. It's updating, but still many blocks behind.
     return <StickyAlert severity="warning">{t('home.indexerOutOfDate', { scope })}</StickyAlert>
   }
+  if (outOfDateReason === 'node') {
+    return <StickyAlert severity="warning">{t('home.nodeOutOfDateSince', { scope, lastUpdate })}</StickyAlert>
+  }
   exhaustedTypeWarning('Unexpected outOfDateReason', outOfDateReason)
   return <StickyAlert severity="warning">{t('home.indexerOutOfDate', { scope })}</StickyAlert>
 }

src/locales/en/translation.json

@@ -624,6 +624,7 @@
     "userOffline": "You are offline. We’re trying to reconnect",
     "indexerOutOfDate": "We don't have fully up-to-date data about our {{ scope }}. The data displayed here might be out of date.",
     "indexerOutOfDateSince": "The last update we have about our {{ scope }} is from {{ lastUpdate }}. The data displayed here might be out of date.",
+    "nodeOutOfDateSince": "The explorer's gRPC node has not observed new blocks since {{ lastUpdate }}. Check status.oasis.io.",
     "indexerUnavailable": "Data about {{ scope }} is currently not available. Please check back later.",
     "blocks": "Blocks",
     "exploreBtnText": "Explore Oasis",