feat: Delay of UI loading across all agents

frontend/components/MainPage/sections/AlertSections/UpdateAvailableAlert.tsx

@@ -5,6 +5,7 @@ import semver from 'semver';
 
 import { CustomAlert } from '@/components/Alert';
 import { ArrowUpRightSvg } from '@/components/custom-icons/ArrowUpRight';
+import { FIVE_MINUTE_INTERVAL } from '@/constants/intervals';
 import { DOWNLOAD_URL, GITHUB_API_LATEST_RELEASE } from '@/constants/urls';
 import { useElectronApi } from '@/hooks/useElectronApi';
 
@@ -28,6 +29,7 @@ export const UpdateAvailableAlert = () => {
 
       const appVersion = await getAppVersion();
       if (!appVersion) return false;
+
       const response = await fetch(GITHUB_API_LATEST_RELEASE);
       if (!response.ok) return false;
 
@@ -47,7 +49,7 @@ export const UpdateAvailableAlert = () => {
 
       return comparison === SemverComparisonResult.OUTDATED;
     },
-    refetchInterval: 1000 * 60 * 5, // 5 minutes
+    refetchInterval: FIVE_MINUTE_INTERVAL,
   });
 
   if (!isFetched || !isPearlOutdated) {

frontend/constants/intervals.ts

@@ -1,3 +1,5 @@
-export const ONE_MINUTE_INTERVAL = 60 * 1_000; // 1 minute
-
 export const FIVE_SECONDS_INTERVAL = 5_000;
+
+export const ONE_MINUTE_INTERVAL = 60 * 1_000;
+
+export const FIVE_MINUTE_INTERVAL = 5 * ONE_MINUTE_INTERVAL;

frontend/context/BalanceProvider/BalanceProvider.tsx

@@ -29,7 +29,6 @@ import {
 
 export const BalanceContext = createContext<{
   isLoaded: boolean;
-  setIsLoaded: Dispatch<SetStateAction<boolean>>;
   updateBalances: () => Promise<void>;
   setIsPaused: Dispatch<SetStateAction<boolean>>;
   walletBalances?: WalletBalance[];
@@ -48,7 +47,6 @@ export const BalanceContext = createContext<{
   isPaused: boolean;
 }>({
   isLoaded: false,
-  setIsLoaded: () => {},
   updateBalances: async () => {},
   isPaused: false,
   setIsPaused: () => {},
@@ -155,7 +153,6 @@ export const BalanceProvider = ({ children }: PropsWithChildren) => {
     <BalanceContext.Provider
       value={{
         isLoaded,
-        setIsLoaded,
         walletBalances,
         stakedBalances,
         updateBalances,

frontend/context/BalancesAndRefillRequirementsProvider.tsx

@@ -54,8 +54,11 @@ export const BalancesAndRefillRequirementsProvider = ({
     queryKey: REACT_QUERY_KEYS.BALANCES_AND_REFILL_REQUIREMENTS_KEY(
       configId as string,
     ),
-    queryFn: () =>
-      BalanceService.getBalancesAndRefillRequirements(configId as string),
+    queryFn: ({ signal }) =>
+      BalanceService.getBalancesAndRefillRequirements({
+        serviceConfigId: configId!,
+        signal,
+      }),
     enabled: !!configId && isUserLoggedIn && isOnline,
     refetchInterval,
   });

frontend/context/MasterWalletProvider.tsx

@@ -71,7 +71,7 @@ export const MasterWalletProvider = ({ children }: PropsWithChildren) => {
     isFetched,
   } = useQuery({
     queryKey: REACT_QUERY_KEYS.WALLETS_KEY,
-    queryFn: WalletService.getWallets,
+    queryFn: ({ signal }) => WalletService.getWallets(signal),
     refetchInterval: isOnline && !paused ? FIVE_SECONDS_INTERVAL : false,
     select: (data) =>
       transformMiddlewareWalletResponse(data).filter(

frontend/context/ServicesProvider.tsx

@@ -100,7 +100,7 @@ export const ServicesProvider = ({ children }: PropsWithChildren) => {
     refetch,
   } = useQuery<MiddlewareServiceResponse[]>({
     queryKey: REACT_QUERY_KEYS.SERVICES_KEY,
-    queryFn: ServicesService.getServices,
+    queryFn: ({ signal }) => ServicesService.getServices(signal),
     enabled: isOnline && !paused,
     refetchInterval: FIVE_SECONDS_INTERVAL,
   });
@@ -112,8 +112,11 @@ export const ServicesProvider = ({ children }: PropsWithChildren) => {
     queryKey: REACT_QUERY_KEYS.SERVICE_DEPLOYMENT_STATUS_KEY(
       selectedServiceConfigId,
     ),
-    queryFn: () =>
-      ServicesService.getDeployment(selectedServiceConfigId as string),
+    queryFn: ({ signal }) =>
+      ServicesService.getDeployment({
+        serviceConfigId: selectedServiceConfigId!,
+        signal,
+      }),
     enabled: isOnline && !!selectedServiceConfigId,
     refetchInterval: FIVE_SECONDS_INTERVAL,
   });

frontend/hooks/useService.ts

@@ -35,8 +35,10 @@ export const useService = (serviceConfigId?: string) => {
   const { services, isFetched: isLoaded, selectedService } = useServices();
 
   const service = useMemo<Optional<Service>>(() => {
-    if (serviceConfigId === selectedService?.service_config_id)
+    if (serviceConfigId === selectedService?.service_config_id) {
       return selectedService;
+    }
+
     return services?.find(
       (service) => service.service_config_id === serviceConfigId,
     );
@@ -104,6 +106,10 @@ export const useService = (serviceConfigId?: string) => {
     return addressesByChainId;
   }, [service]);
 
+  /**
+   * Flat list of all addresses associated with the service.
+   * ie, all agentSafe and agentEoas
+   */
   const flatAddresses = useMemo(() => {
     if (!service) return [];
     if (!addresses) return [];
@@ -116,24 +122,22 @@ export const useService = (serviceConfigId?: string) => {
   }, [addresses, service]);
 
   const serviceSafes = useMemo(() => {
-    return (
-      serviceWallets?.filter(
-        (wallet): wallet is AgentSafe =>
-          flatAddresses.includes(wallet.address) &&
-          wallet.owner === WalletOwnerType.Agent &&
-          wallet.type === WalletType.Safe,
-      ) ?? []
+    if (!serviceWallets) return [];
+    return serviceWallets.filter(
+      (wallet): wallet is AgentSafe =>
+        flatAddresses.includes(wallet.address) &&
+        wallet.owner === WalletOwnerType.Agent &&
+        wallet.type === WalletType.Safe,
     );
   }, [flatAddresses, serviceWallets]);
 
   const serviceEoa = useMemo(() => {
-    return (
-      serviceWallets?.find(
-        (wallet): wallet is AgentEoa =>
-          flatAddresses.includes(wallet.address) &&
-          wallet.owner === WalletOwnerType.Agent &&
-          wallet.type === WalletType.EOA,
-      ) ?? null
+    if (!serviceWallets) return null;
+    return serviceWallets.find(
+      (wallet): wallet is AgentEoa =>
+        flatAddresses.includes(wallet.address) &&
+        wallet.owner === WalletOwnerType.Agent &&
+        wallet.type === WalletType.EOA,
     );
   }, [flatAddresses, serviceWallets]);
 

frontend/service/Account.ts

@@ -6,9 +6,7 @@ import { BACKEND_URL } from '@/constants/urls';
  */
 const getAccount = () =>
   fetch(`${BACKEND_URL}/account`, {
-    headers: {
-      ...CONTENT_TYPE_JSON_UTF8,
-    },
+    headers: { ...CONTENT_TYPE_JSON_UTF8 },
   }).then((res) => {
     if (res.ok) return res.json();
     throw new Error('Failed to get account');
@@ -20,9 +18,7 @@ const getAccount = () =>
 const createAccount = (password: string) =>
   fetch(`${BACKEND_URL}/account`, {
     method: 'POST',
-    headers: {
-      ...CONTENT_TYPE_JSON_UTF8,
-    },
+    headers: { ...CONTENT_TYPE_JSON_UTF8 },
     body: JSON.stringify({ password }),
   }).then((res) => {
     if (res.ok) return res.json();
@@ -52,9 +48,7 @@ const loginAccount = (password: string) =>
   fetch(`${BACKEND_URL}/account/login`, {
     method: 'POST',
     headers: { ...CONTENT_TYPE_JSON_UTF8 },
-    body: JSON.stringify({
-      password,
-    }),
+    body: JSON.stringify({ password }),
   }).then((res) => {
     if (res.ok) return res.json();
     throw new Error('Failed to login');

frontend/service/Services.ts

@@ -15,12 +15,17 @@ import { asEvmChainId } from '@/utils/middlewareHelpers';
 /**
  * Get a single service from the backend
  */
-const getService = async (
-  serviceConfigId: string,
-): Promise<MiddlewareServiceResponse> =>
+const getService = async ({
+  serviceConfigId,
+  signal,
+}: {
+  serviceConfigId: ServiceConfigId;
+  signal: AbortSignal;
+}): Promise<MiddlewareServiceResponse> =>
   fetch(`${BACKEND_URL_V2}/service/${serviceConfigId}`, {
     method: 'GET',
     headers: { ...CONTENT_TYPE_JSON_UTF8 },
+    signal,
   }).then((response) => {
     if (response.ok) {
       return response.json();
@@ -32,14 +37,15 @@ const getService = async (
  * Gets an array of services from the backend
  * @returns An array of services
  */
-const getServices = async (): Promise<MiddlewareServiceResponse[]> =>
+const getServices = async (
+  signal: AbortSignal,
+): Promise<MiddlewareServiceResponse[]> =>
   fetch(`${BACKEND_URL_V2}/services`, {
     method: 'GET',
     headers: { ...CONTENT_TYPE_JSON_UTF8 },
+    signal,
   }).then((response) => {
-    if (response.ok) {
-      return response.json();
-    }
+    if (response.ok) return response.json();
     throw new Error('Failed to fetch services');
   });
 
@@ -143,15 +149,23 @@ const stopDeployment = async (
     throw new Error('Failed to stop deployment');
   });
 
-const getDeployment = async (serviceConfigId: string): Promise<Deployment> =>
+/**
+ * To get the deployment of a service
+ */
+const getDeployment = async ({
+  serviceConfigId,
+  signal,
+}: {
+  serviceConfigId: ServiceConfigId;
+  signal: AbortSignal;
+}): Promise<Deployment> =>
   fetch(`${BACKEND_URL_V2}/service/${serviceConfigId}/deployment`, {
     method: 'GET',
     headers: { ...CONTENT_TYPE_JSON_UTF8 },
+    signal,
   }).then((response) => {
-    if (response.ok) {
-      return response.json();
-    }
-    throw new Error('Failed to get deployment');
+    if (response.ok) return response.json();
+    throw new Error('Failed to fetch deployment');
   });
 
 /**

frontend/service/Wallet.ts

@@ -5,18 +5,18 @@ import { BACKEND_URL } from '@/constants/urls';
 /**
  * Returns a list of available wallets
  */
-const getWallets = async () =>
-  fetch(`${BACKEND_URL}/wallet`).then((res) => {
+const getWallets = async (signal: AbortSignal) =>
+  fetch(`${BACKEND_URL}/wallet`, {
+    signal,
+  }).then((res) => {
     if (res.ok) return res.json();
-    throw new Error('Failed to get wallets');
+    throw new Error('Failed to fetch wallets');
   }) as Promise<MiddlewareWalletResponse[]>;
 
 const createEoa = async () =>
   fetch(`${BACKEND_URL}/wallet`, {
     method: 'POST',
-    headers: {
-      ...CONTENT_TYPE_JSON_UTF8,
-    },
+    headers: { ...CONTENT_TYPE_JSON_UTF8 },
     body: JSON.stringify({ ledger_type: 'ethereum' }),
   }).then((res) => {
     if (res.ok) return res.json();
@@ -26,9 +26,7 @@ const createEoa = async () =>
 const createSafe = async (chain: MiddlewareChain, backup_owner?: string) =>
   fetch(`${BACKEND_URL}/wallet/safe`, {
     method: 'POST',
-    headers: {
-      ...CONTENT_TYPE_JSON_UTF8,
-    },
+    headers: { ...CONTENT_TYPE_JSON_UTF8 },
     body: JSON.stringify({ chain, backup_owner, fund_amount: 0 }),
   }).then((res) => {
     if (res.ok) return res.json();
@@ -41,9 +39,7 @@ const updateSafeBackupOwner = async (
 ) =>
   fetch(`${BACKEND_URL}/wallet/safe`, {
     method: 'PUT',
-    headers: {
-      ...CONTENT_TYPE_JSON_UTF8,
-    },
+    headers: { ...CONTENT_TYPE_JSON_UTF8 },
     body: JSON.stringify({ chain, backup_owner }),
   }).then((res) => {
     if (res.ok) return res.json();

frontend/service/balances.ts

@@ -5,21 +5,26 @@ import { BACKEND_URL_V2 } from '@/constants/urls';
 /**
  * API call to get balances and refill requirements
  */
-const getBalancesAndRefillRequirements = async (
-  serviceConfigId: string,
-): Promise<BalancesAndFundingRequirements> => {
+const getBalancesAndRefillRequirements = async ({
+  serviceConfigId,
+  signal,
+}: {
+  serviceConfigId: string;
+  signal: AbortSignal;
+}): Promise<BalancesAndFundingRequirements> => {
   return fetch(
     `${BACKEND_URL_V2}/service/${serviceConfigId}/refill_requirements`,
     {
       method: 'GET',
       headers: { ...CONTENT_TYPE_JSON_UTF8 },
+      signal,
     },
   ).then((response) => {
     if (response.ok) {
       return response.json();
     }
     throw new Error(
-      `Failed to balances and refill requirements for ${serviceConfigId}`,
+      `Failed to fetch balances and refill requirements for ${serviceConfigId}`,
     );
   });
 };