Feat: indexing status (SWS-134)

package.json

@@ -58,7 +58,7 @@
     "@safe-global/protocol-kit": "^4.1.0",
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@safe-global/safe-deployments": "^1.37.8",
-    "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.13",
+    "@safe-global/safe-gateway-typescript-sdk": "3.22.3-beta.14",
     "@safe-global/safe-modules-deployments": "^2.2.1",
     "@sentry/react": "^7.91.0",
     "@spindl-xyz/attribution-lite": "^1.4.0",

src/components/sidebar/IndexingStatus/index.tsx

@@ -0,0 +1,59 @@
+import { Stack, Box, Typography } from '@mui/material'
+import { getIndexingStatus } from '@safe-global/safe-gateway-typescript-sdk'
+import useAsync from '@/hooks/useAsync'
+import useChainId from '@/hooks/useChainId'
+import ExternalLink from '@/components/common/ExternalLink'
+
+const STATUS_PAGE = 'https://status.safe.global'
+const MAX_SYNC_DELAY = 1000 * 60 * 5 // 5 minutes
+
+const useIndexingStatus = () => {
+  const chainId = useChainId()
+
+  return useAsync(() => {
+    return getIndexingStatus(chainId)
+  }, [chainId])
+}
+
+const STATUSES = {
+  synced: {
+    color: 'success',
+    text: 'Synced',
+  },
+  slow: {
+    color: 'warning',
+    text: 'Slow network',
+  },
+  outOfSync: {
+    color: 'error',
+    text: 'Out of sync',
+  },
+}
+
+const IndexingStatus = () => {
+  const [data] = useIndexingStatus()
+
+  if (!data) {
+    return null
+  }
+
+  const status = data.synced
+    ? STATUSES.synced
+    : Date.now() - data.lastSync > MAX_SYNC_DELAY
+    ? STATUSES.slow
+    : STATUSES.outOfSync
+
+  return (
+    <Stack direction="row" spacing={2} alignItems="center" px={3} py={1.5}>
+      <Box width={10} height={10} borderRadius="50%" border={`2px solid var(--color-${status.color}-main)`} />
+
+      <ExternalLink href={STATUS_PAGE} noIcon flex={1}>
+        <Typography variant="body2">{status.text}</Typography>
+      </ExternalLink>
+
+      <ExternalLink href={STATUS_PAGE} sx={{ color: 'text.secondary', transform: 'translateY(2px)' }} />
+    </Stack>
+  )
+}
+
+export default IndexingStatus

src/components/sidebar/Sidebar/index.tsx

@@ -6,6 +6,7 @@ import ChainIndicator from '@/components/common/ChainIndicator'
 import SidebarHeader from '@/components/sidebar/SidebarHeader'
 import SidebarNavigation from '@/components/sidebar/SidebarNavigation'
 import SidebarFooter from '@/components/sidebar/SidebarFooter'
+import IndexingStatus from '@/components/sidebar/IndexingStatus'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
@@ -48,6 +49,10 @@ const Sidebar = (): ReactElement => {
 
         {/* What's new + Need help? */}
         <SidebarFooter />
+
+        <Divider flexItem />
+
+        <IndexingStatus />
       </div>
 
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>

yarn.lock

@@ -4286,10 +4286,10 @@
   dependencies:
     semver "^7.6.2"
 
-"@safe-global/[email protected].13":
-  version "3.22.3-beta.13"
-  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.13.tgz#e6feaf93b16788ec6237c7f73f0d57f8514dde0c"
-  integrity sha512-VAoil8BbAsG14cDFG/sSFmCBIGQpJbyQeI7O7LFkPGwCVOFhHhE7SiurDiSkw13QLLxnIqB/Hq6jse+wa7Ny9g==
+"@safe-global/[email protected].14":
+  version "3.22.3-beta.14"
+  resolved "https://registry.yarnpkg.com/@safe-global/safe-gateway-typescript-sdk/-/safe-gateway-typescript-sdk-3.22.3-beta.14.tgz#8e8346b5e994910ff1d580f607aa3f0d859ea229"
+  integrity sha512-D1/z5wIwdm6bNCPvd1MyReYjJsflOiqdO3hKGBORGXKmvUexbKqhknl69r3hIeApLwDOq9cQNMxK6IRF3Wp5VQ==
 
 "@safe-global/safe-gateway-typescript-sdk@^3.5.3":
   version "3.21.2"