safe-global · yagopv · Nov 6, 2025 · Oct 28, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/example.env b/example.env
@@ -2,5 +2,5 @@
 # Config service url
 REACT_APP_CONFIG_SERVICE_URL=https://safe-config.safe.global
 
-# Shows the Config service url selector if true
-REACT_APP_SHOW_CONFIG_SERVICE_SELECTOR=true
+# Client Gateway url
+VITE_CLIENT_GATEWAY_URL=https://safe-client.safe.global
diff --git a/index.html b/index.html
@@ -1,9 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
+      rel="stylesheet"
+    />
     <title>Safe Tx Status</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "safe-transaction-service-status-page",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,15 @@
-import { useState } from "react";
 import Container from "@mui/material/Container";
 import { ThemeProvider } from "@mui/material/styles";
 import { CssBaseline } from "@mui/material";
 
 import useTheme from "src/hooks/useTheme";
 import Header from "src/components/header/Header";
-import ConfigServiceUrlSelector from "src/components/config-service-url-selector/ConfigServiceUrlSelector";
 import ChainStatusTable from "src/components/chain-status-table/ChainStatusTable";
 
 const VITE_CONFIG_SERVICE_URL = import.meta.env.VITE_CONFIG_SERVICE_URL;
-const VITE_SHOW_CONFIG_SERVICE_SELECTOR = import.meta.env
-  .VITE_SHOW_CONFIG_SERVICE_SELECTOR;
+const VITE_CLIENT_GATEWAY_URL = import.meta.env.VITE_CLIENT_GATEWAY_URL;
 
 function App() {
-  const [configServiceUrl, setConfigServiceUrl] = useState<string>(
-    VITE_CONFIG_SERVICE_URL || "",
-  );
-
   const { theme, switchThemeMode, isDarkTheme } = useTheme();
 
   return (
@@ -31,21 +24,14 @@ function App() {
         component="main"
         sx={{ marginBottom: "36px", marginTop: "42px" }}
       >
-        {/* Config service selector */}
-        {showConfigServiceSelector && (
-          <ConfigServiceUrlSelector
-            configServiceUrl={configServiceUrl}
-            setConfigServiceUrl={setConfigServiceUrl}
-          />
-        )}
-
         {/* Chain status table */}
-        <ChainStatusTable configServiceUrl={configServiceUrl} />
+        <ChainStatusTable
+          configServiceUrl={VITE_CONFIG_SERVICE_URL}
+          clientGatewayUrl={VITE_CLIENT_GATEWAY_URL}
+        />
       </Container>
     </ThemeProvider>
   );
 }
 
 export default App;
-
-const showConfigServiceSelector = VITE_SHOW_CONFIG_SERVICE_SELECTOR === "true";
diff --git a/src/api/getChainStatus.tsx b/src/api/getChainStatus.tsx
@@ -1,14 +1,14 @@
 import axios, { RawAxiosRequestConfig } from "axios";
+import chain from "src/models/chain";
 
 import chainStatus from "src/models/chainStatus";
 
-const CHAIN_STATUS_PATHNAME = "/api/v1/about/indexing/";
-
 async function getChainStatus(
-  transactionServiceBaseUrl: string,
+  clientGatewayUrl: string,
+  chain: chain,
   options?: RawAxiosRequestConfig,
 ): Promise<chainStatus> {
-  const endpoint = `${transactionServiceBaseUrl}${CHAIN_STATUS_PATHNAME}`;
+  const endpoint = `${clientGatewayUrl}/v1/chains/${chain.chainId}/about/indexing`;
 
   const { data } = await axios.get(endpoint, options);
 

diff --git a/src/assets/safe-logo.svg b/src/assets/safe-logo.svg
diff --git a/src/components/chain-status-table/ChainStatusRow.tsx b/src/components/chain-status-table/ChainStatusRow.tsx
@@ -13,19 +13,23 @@ import BlockLabel from "src/components/block-label/BlockLabel";
 import SyncedLabel from "src/components/synced-label/SyncedLabel";
 import memoizedGetBlock from "src/utils/memoizedGetBlock";
 
-const POLLING_TIME = 5_000; // 5 secs
-
-function ChainStatusRow({ chain }: { chain: chain }) {
+const POLLING_TIME = 30_000; // 30 secs
+
+function ChainStatusRow({
+  chain,
+  clientGatewayUrl,
+}: {
+  chain: chain;
+  clientGatewayUrl: string;
+}) {
   // endpoint to the chain status from the transaction service
   const fetchChainStatus = useCallback(
     async (signal: AbortSignal) => {
-      const transactionServiceUrl = chain.transactionService;
-
-      return getChainStatus(transactionServiceUrl, {
+      return getChainStatus(clientGatewayUrl, chain, {
         signal,
       });
     },
-    [chain],
+    [clientGatewayUrl, chain],
   );
 
   // fetch chain status with a polling (5 secs)

diff --git a/src/components/chain-status-table/ChainStatusTable.tsx b/src/components/chain-status-table/ChainStatusTable.tsx
@@ -18,9 +18,13 @@ import ChainStatusRow from "src/components/chain-status-table/ChainStatusRow";
 
 type StatusTableProps = {
   configServiceUrl: string;
+  clientGatewayUrl: string;
 };
 
-function ChainStatusTable({ configServiceUrl }: StatusTableProps) {
+function ChainStatusTable({
+  configServiceUrl,
+  clientGatewayUrl,
+}: StatusTableProps) {
   // endpoint to fetch all chains from the config service
   const fetchChains = useCallback(
     (signal: AbortSignal) => {
@@ -76,7 +80,11 @@ function ChainStatusTable({ configServiceUrl }: StatusTableProps) {
         <TableBody>
           {!isLoading &&
             chains?.map((chain) => (
-              <ChainStatusRow key={chain.chainId} chain={chain} />
+              <ChainStatusRow
+                key={chain.chainId}
+                chain={chain}
+                clientGatewayUrl={clientGatewayUrl}
+              />
             ))}
         </TableBody>
       </Table>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -25,11 +25,6 @@ function Header({ switchThemeMode, isDarkTheme }: HeaderProps) {
           {/* App Logo */}
           <AppLogoHeader id="app-logo-header" src={safeLogo} alt="app logo" />
 
-          {/* App Title */}
-          <StyledAppTitle variant="h6" component="h1">
-            Safe Tx Service Status
-          </StyledAppTitle>
-
           {/* Navigation links */}
           <Box
             flexGrow={1}
@@ -109,32 +104,9 @@ function Header({ switchThemeMode, isDarkTheme }: HeaderProps) {
 export default Header;
 
 const AppLogoHeader = styled("img")`
-  height: 40px;
+  height: 25px;
   pointer-events: none;
-
-  animation: app-logo-spin infinite 20s linear;
-
-  @keyframes app-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const StyledAppTitle = styled(Typography)<{
-  variant: string;
-  component: string;
-}>`
-  font-family: monospace;
-  margin: 0 12px;
-  letter-spacing: 0.3rem;
-  font-weight: 700;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  filter: invert(1) brightness(1);
 `;
 
 const NavList = styled("ul")`

diff --git a/src/hooks/useApi.tsx b/src/hooks/useApi.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
+import PollingManager from "src/utils/pollingManager";
 
 type apiCallParam<T> = (signal: AbortSignal) => Promise<T>;
 
@@ -7,43 +8,60 @@ type useApiHookReturnValue<T> = {
   data?: T;
 };
 
+const pollingManager = new PollingManager();
+
 function useApi<T>(
   apiCall: apiCallParam<T>,
   pollingTime?: number,
 ): useApiHookReturnValue<T> {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [data, setData] = useState<T>();
+  const taskIdRef = useRef<string | undefined>(undefined);
+
+  const stableApiCall = useCallback(apiCall, [apiCall]);
 
   useEffect(() => {
-    const abortController = new AbortController();
-
-    async function performApiCall() {
-      try {
-        setIsLoading(true);
-        const data = await apiCall(abortController.signal);
-        setData(data);
-      } catch {
-        setData(undefined);
-      } finally {
-        setIsLoading(false);
-      }
-    }
+    const taskId = `api-task-${Date.now()}-${Math.random()}`;
+    taskIdRef.current = taskId;
 
-    let intervalId: NodeJS.Timeout;
+    const onSuccess = (result: T) => {
+      setData(result);
+      setIsLoading(false);
+    };
+
+    const onError = (error: unknown) => {
+      console.warn("API call failed:", error);
+      setData(undefined);
+      setIsLoading(false);
+    };
 
     if (pollingTime) {
-      intervalId = setInterval(() => {
-        performApiCall();
-      }, pollingTime);
-    }
+      // Use polling manager for rate-limited polling
+      pollingManager.addTask(
+        taskId,
+        stableApiCall,
+        onSuccess,
+        onError,
+        pollingTime,
+      );
+    } else {
+      // For non-polling requests, execute immediately
+      setIsLoading(true);
+      const abortController = new AbortController();
 
-    performApiCall();
+      stableApiCall(abortController.signal).then(onSuccess).catch(onError);
+
+      return () => {
+        abortController.abort();
+      };
+    }
 
     return () => {
-      abortController.abort();
-      clearInterval(intervalId);
+      if (taskIdRef.current) {
+        pollingManager.removeTask(taskIdRef.current);
+      }
     };
-  }, [apiCall, pollingTime]);
+  }, [stableApiCall, pollingTime]);
 
   return {
     isLoading,

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -12,10 +12,13 @@ export const LIGHT_THEME: PaletteMode = "light";
 const themeOptions: ThemeOptions = {
   palette: {
     primary: {
-      main: "#2E3B55",
+      main: "#121212",
     },
     mode: DARK_THEME,
   },
+  typography: {
+    fontFamily: '"DM Sans", sans-serif',
+  },
 };
 
 const getTheme = (themeMode: PaletteMode): Theme => {