feat: Use txService and parallel requests (#220)

Author: yagopv

.github/workflows/node.yml

@@ -53,13 +53,11 @@ jobs:
         run: yarn build
         env:
           VITE_CONFIG_SERVICE_URL: "https://safe-config.staging.5afe.dev"
-          VITE_CLIENT_GATEWAY_URL: "https://safe-client.staging.5afe.dev"
       - name: Build Production React App
         if: (github.event_name == 'release' && github.event.action == 'released')
         run: yarn build
         env:
           VITE_CONFIG_SERVICE_URL: "https://safe-config.safe.global"
-          VITE_CLIENT_GATEWAY_URL: "https://safe-client.safe.global"
       - name: Deploy to Staging S3 bucket
         if: github.ref == 'refs/heads/main'
         run: aws s3 sync ./build/ "s3://$BUCKET_NAME/current" --delete

example.env

@@ -1,6 +1,3 @@
 
 # Config service url
-VITE_CONFIG_SERVICE_URL=https://safe-config.safe.global
-
-# Client Gateway url
-VITE_CLIENT_GATEWAY_URL=https://safe-client.safe.global
+VITE_CONFIG_SERVICE_URL=https://safe-config.safe.global

src/App.tsx

@@ -7,7 +7,6 @@ import Header from "src/components/header/Header";
 import ChainStatusTable from "src/components/chain-status-table/ChainStatusTable";
 
 const VITE_CONFIG_SERVICE_URL = import.meta.env.VITE_CONFIG_SERVICE_URL;
-const VITE_CLIENT_GATEWAY_URL = import.meta.env.VITE_CLIENT_GATEWAY_URL;
 
 function App() {
   const { theme, switchThemeMode, isDarkTheme } = useTheme();
@@ -25,10 +24,7 @@ function App() {
         sx={{ marginBottom: "36px", marginTop: "42px" }}
       >
         {/* Chain status table */}
-        <ChainStatusTable
-          configServiceUrl={VITE_CONFIG_SERVICE_URL}
-          clientGatewayUrl={VITE_CLIENT_GATEWAY_URL}
-        />
+        <ChainStatusTable configServiceUrl={VITE_CONFIG_SERVICE_URL} />
       </Container>
     </ThemeProvider>
   );

src/api/getChainStatus.tsx

@@ -4,11 +4,10 @@ import chainStatus from "src/models/chainStatus";
 import { API_TIMEOUT } from "src/config/api";
 
 async function getChainStatus(
-  clientGatewayUrl: string,
   chain: chain,
   options?: RawAxiosRequestConfig,
 ): Promise<chainStatus> {
-  const endpoint = `${clientGatewayUrl}/v1/chains/${chain.chainId}/about/indexing`;
+  const endpoint = `${chain.transactionService}/api/v1/about/indexing`;
 
   const { data } = await axios.get(endpoint, {
     ...options,

src/components/chain-status-table/ChainStatusRow.tsx

@@ -14,21 +14,15 @@ import SyncedLabel from "src/components/synced-label/SyncedLabel";
 import memoizedGetBlock from "src/utils/memoizedGetBlock";
 import { CHAIN_STATUS_POLLING_INTERVAL } from "src/config/api";
 
-function ChainStatusRow({
-  chain,
-  clientGatewayUrl,
-}: {
-  chain: chain;
-  clientGatewayUrl: string;
-}) {
+function ChainStatusRow({ chain }: { chain: chain }) {
   // endpoint to the chain status from the transaction service
   const fetchChainStatus = useCallback(
     async (signal: AbortSignal) => {
-      return getChainStatus(clientGatewayUrl, chain, {
+      return getChainStatus(chain, {
         signal,
       });
     },
-    [clientGatewayUrl, chain],
+    [chain],
   );
 
   // fetch chain status with a polling

src/components/chain-status-table/ChainStatusTable.tsx

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

src/hooks/useApi.tsx

@@ -8,8 +8,6 @@ type useApiHookReturnValue<T> = {
   data?: T;
 };
 
-const pollingManager = new PollingManager();
-
 function useApi<T>(
   apiCall: apiCallParam<T>,
   pollingTime?: number,
@@ -37,7 +35,7 @@ function useApi<T>(
 
     if (pollingTime) {
       // Use polling manager for rate-limited polling
-      pollingManager.addTask(
+      PollingManager.addTask(
         taskId,
         stableApiCall,
         onSuccess,
@@ -58,7 +56,7 @@ function useApi<T>(
 
     return () => {
       if (taskIdRef.current) {
-        pollingManager.removeTask(taskIdRef.current);
+        PollingManager.removeTask(taskIdRef.current);
       }
     };
   }, [stableApiCall, pollingTime]);

src/utils/pollingManager.ts

@@ -1,5 +1,3 @@
-import { MAX_REQUESTS_PER_SECOND } from "src/config/api";
-
 type PollingTask<T = unknown> = {
   id: string;
   apiCall: (signal: AbortSignal) => Promise<T>;
@@ -14,9 +12,6 @@ class PollingManager {
   private tasks: Map<string, PollingTask<unknown>> = new Map();
   private isRunning = false;
   private isPaused = false;
-  private maxRequestsPerSecond = MAX_REQUESTS_PER_SECOND;
-  private minInterval = 1000 / this.maxRequestsPerSecond;
-  private lastRequestTime = 0;
   private visibilityChangeListener: (() => void) | null = null;
 
   constructor() {
@@ -57,59 +52,45 @@ class PollingManager {
     }
   }
 
-  private async executeNextTask(): Promise<void> {
+  private async executeDueTasks(): Promise<void> {
     if (this.isPaused) {
       return;
     }
 
     const now = Date.now();
 
-    // Find the next task that should be executed
-    let nextTask: PollingTask<unknown> | null = null;
-    let earliestDue = Infinity;
+    // Find all tasks that are due for execution
+    const dueTasks: PollingTask<unknown>[] = [];
 
     for (const task of this.tasks.values()) {
       const timeSinceLastExecution = now - task.lastExecuted;
       if (timeSinceLastExecution >= task.pollingInterval) {
-        const dueTime = task.lastExecuted + task.pollingInterval;
-        if (dueTime < earliestDue) {
-          earliestDue = dueTime;
-          nextTask = task;
-        }
+        dueTasks.push(task);
       }
     }
 
-    if (!nextTask) return;
-
-    // Respect rate limiting
-    const timeSinceLastRequest = now - this.lastRequestTime;
-    if (timeSinceLastRequest < this.minInterval) {
-      const delay = this.minInterval - timeSinceLastRequest;
-      await new Promise((resolve) => setTimeout(resolve, delay));
-    }
-
-    if (this.isPaused) {
-      return;
-    }
+    if (dueTasks.length === 0) return;
 
-    // Execute the task
-    try {
-      this.lastRequestTime = Date.now();
-      nextTask.lastExecuted = this.lastRequestTime;
+    // Execute all due tasks in parallel
+    const promises = dueTasks.map(async (task) => {
+      try {
+        task.lastExecuted = Date.now();
+        const result = await task.apiCall(task.abortController.signal);
+        task.onSuccess(result);
+      } catch (error) {
+        task.onError(error);
+      }
+    });
 
-      const result = await nextTask.apiCall(nextTask.abortController.signal);
-      nextTask.onSuccess(result);
-    } catch (error) {
-      nextTask.onError(error);
-    }
+    await Promise.all(promises);
   }
 
   private async runPollingLoop(): Promise<void> {
     while (this.isRunning && this.tasks.size > 0) {
-      await this.executeNextTask();
+      await this.executeDueTasks();
 
       // Delay to prevent tight loop
-      const delay = this.isPaused ? 1000 : 50;
+      const delay = this.isPaused ? 1000 : 100;
       await new Promise((resolve) => setTimeout(resolve, delay));
     }
     this.isRunning = false;
@@ -183,4 +164,4 @@ class PollingManager {
   }
 }
 
-export default PollingManager;
+export default new PollingManager();