feat: implement squid height context

src/App.tsx

@@ -9,6 +9,7 @@ import { WagmiProvider } from 'wagmi';
 
 import { queryClient } from '@api/client';
 import { Alert } from '@components/Alert';
+import { SquidHeightProvider } from '@hooks/useSquidNetworkHeightHooks';
 import { wagmiConfig } from '@network/config';
 
 import { AppRoutes } from './AppRoutes';
@@ -33,10 +34,12 @@ function App() {
               }}
               anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
             >
-              <CssBaseline />
-              <BrowserRouter>
-                <AppRoutes />
-              </BrowserRouter>
+              <SquidHeightProvider>
+                <CssBaseline />
+                <BrowserRouter>
+                  <AppRoutes />
+                </BrowserRouter>
+              </SquidHeightProvider>
             </SnackbarProvider>
           </RainbowKitProvider>
         </ThemeProvider>

src/api/contracts/claim.ts

@@ -7,7 +7,7 @@ import { useWriteContract, useClient } from 'wagmi';
 import { REWARD_TREASURY_CONTRACT_ABI } from '@api/contracts/reaward-treasury.abi';
 import { VESTING_CONTRACT_ABI } from '@api/contracts/vesting.abi';
 import { AccountType, SourceWallet } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount.ts';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -67,7 +67,7 @@ function useClaimFromVestingContract() {
 
 export function useClaim() {
   const client = useClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 

src/api/contracts/gateway-registration/useRegisterGateway.ts

@@ -6,7 +6,7 @@ import { encodeFunctionData } from 'viem';
 import { usePublicClient, useWriteContract } from 'wagmi';
 
 import { AccountType } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -82,7 +82,7 @@ export function useRegisterGateway() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setLoading] = useState(false);
 
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const registerGatewayFromWallet = useRegisterGatewayFromWallet();
   const registerGatewayFromVestingContract = useRegisterGatewayFromVestingContract();
 

src/api/contracts/gateway-registration/useStakeGateway.ts

@@ -5,7 +5,7 @@ import { encodeFunctionData } from 'viem';
 import { usePublicClient, useWriteContract } from 'wagmi';
 
 import { AccountType, SourceWallet } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -105,7 +105,7 @@ function useStakeFromVestingContract() {
 
 export function useStakeGateway() {
   const client = usePublicClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 

src/api/contracts/gateway-registration/useUnregisterGateway.ts

@@ -7,7 +7,7 @@ import { useWriteContract, usePublicClient } from 'wagmi';
 
 import { AccountType } from '@api/subsquid-network-squid';
 import { BlockchainGateway } from '@api/subsquid-network-squid/gateways-graphql';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -78,7 +78,7 @@ export function useUnregisterGateway() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setLoading] = useState(false);
 
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const unregisterGatewayFromWallet = useUnregisterGatewayFromWallet();
   const unregisterGatewayFromVestingContract = useUnregisterGatewayFromVestingContract();
 

src/api/contracts/gateway-registration/useUnstakeGateway.ts

@@ -4,7 +4,7 @@ import { encodeFunctionData } from 'viem';
 import { useWriteContract, usePublicClient } from 'wagmi';
 
 import { AccountType, GatewayStakeFragmentFragment } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -65,7 +65,7 @@ function useUnstakeFromVestingContract() {
 
 export function useUnstakeGateway() {
   const client = usePublicClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 

src/api/contracts/staking.ts

@@ -16,7 +16,7 @@ import {
 import { useApproveSqd } from '@api/contracts/sqd';
 import { VESTING_CONTRACT_ABI } from '@api/contracts/vesting.abi';
 import { AccountType, Worker, SourceWallet } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -104,7 +104,7 @@ function useDepositFromVestingContract() {
 
 export function useWorkerDelegate() {
   const client = useClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -195,7 +195,7 @@ function useUndelegateFromVestingContract() {
 
 export function useWorkerUndelegate() {
   const client = usePublicClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -238,7 +238,7 @@ export function useWorkerUndelegate() {
 
 export function useCapedStake({ workerId }: { workerId?: string }) {
   const contracts = useContracts();
-  const { currentHeight, isLoading: isHeightLoading } = useSquidNetworkHeightHooks();
+  const { currentHeight, isLoading: isHeightLoading } = useSquidNetworkHeight();
 
   const { data, isLoading } = useReadContract({
     address: contracts.SOFT_CAP,

src/api/contracts/vesting.ts

@@ -5,15 +5,15 @@ import { erc20Abi, MulticallResponse } from 'viem';
 import { waitForTransactionReceipt } from 'viem/actions';
 import { useReadContracts, useWriteContract, useClient } from 'wagmi';
 
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useContracts } from '@network/useContracts';
 
 import { errorMessage, WriteContractRes } from './utils';
 import { VESTING_CONTRACT_ABI } from './vesting.abi';
 
 export function useVestingContracts({ addresses }: { addresses: `0x${string}`[] }) {
   const contracts = useContracts();
-  const { currentHeight, isLoading: isSquidHeightLoading } = useSquidNetworkHeightHooks();
+  const { currentHeight, isLoading: isSquidHeightLoading } = useSquidNetworkHeight();
 
   const { data, isLoading } = useReadContracts({
     contracts: addresses.flatMap(address => {
@@ -119,7 +119,7 @@ function unwrapResult<T>(result?: MulticallResponse<T>): T | undefined {
 
 export function useVestingContractRelease() {
   const client = useClient();
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { SQD } = useContracts();

src/api/contracts/worker-registration/useRegisterWorker.ts

@@ -9,7 +9,7 @@ import { useWriteContract, usePublicClient, useClient } from 'wagmi';
 import { useApproveSqd } from '@api/contracts/sqd';
 import { VESTING_CONTRACT_ABI } from '@api/contracts/vesting.abi';
 import { AccountType, SourceWallet } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -120,7 +120,7 @@ export function useRegisterWorker() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setLoading] = useState(false);
 
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const registerWorkerContract = useRegisterFromWallet();
   const registerVestingContract = useRegisterWorkerFromVestingContract();
 

src/api/contracts/worker-registration/useUnregisterWorker.ts

@@ -8,7 +8,7 @@ import { useWriteContract, useClient } from 'wagmi';
 
 import { VESTING_CONTRACT_ABI } from '@api/contracts/vesting.abi';
 import { AccountType } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -76,7 +76,7 @@ export function useUnregisterWorker() {
   const client = useClient();
   const { address } = useAccount();
   const [isLoading, setLoading] = useState(false);
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [error, setError] = useState<string | null>(null);
 
   const unregisterWorkerFromWallet = useUnregisterWorkerFromWallet();

src/api/contracts/worker-registration/useUpdateWorker.ts

@@ -7,7 +7,7 @@ import { waitForTransactionReceipt } from 'viem/actions';
 import { useWriteContract, useClient } from 'wagmi';
 
 import { AccountType } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -79,7 +79,7 @@ export function useUpdateWorker() {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setLoading] = useState(false);
 
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const updateWorkerFromWallet = useUpdateWorkerFromWallet();
   const updateWorkerFromVestingContract = useUpdateWorkerFromVestingContract();
 

src/api/contracts/worker-registration/useWithdrawWorker.ts

@@ -9,7 +9,7 @@ import { useWriteContract, useClient } from 'wagmi';
 import { VESTING_CONTRACT_ABI } from '@api/contracts/vesting.abi';
 import { UnregisterWorkerRequest } from '@api/contracts/worker-registration/useUnregisterWorker';
 import { AccountType } from '@api/subsquid-network-squid';
-import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
+import { useSquidNetworkHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useAccount } from '@network/useAccount';
 import { useContracts } from '@network/useContracts.ts';
 
@@ -69,7 +69,7 @@ export function useWithdrawWorker() {
   const client = useClient();
   const { address } = useAccount();
   const [isLoading, setLoading] = useState(false);
-  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const { setWaitHeight } = useSquidNetworkHeight();
   const [error, setError] = useState<string | null>(null);
 
   const withdrawWorkerFromWallet = useWithdrawWorkerFromWallet();

src/hooks/useSquidNetworkHeightHooks.ts → src/hooks/useSquidNetworkHeightHooks.tsx

@@ -1,15 +1,49 @@
-import { useEffect, useMemo } from 'react';
+import {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react';
 
 import { logger } from '@logger';
 import { useQueryClient } from '@tanstack/react-query';
 import { max, partition } from 'lodash-es';
+import { useBlockNumber } from 'wagmi';
 
 import { useSquidDataSource, useSquidNetworkHeightQuery } from '@api/subsquid-network-squid';
 import { localStorageStringSerializer, useLocalStorageState } from '@hooks/useLocalStorageState';
 
 type HeightHook = { height: number; invalidateQueries: unknown[] };
 
-export function useSquidNetworkHeightHooks() {
+const SquidHeightContext = createContext<{
+  currentHeight: number;
+  waitHeight: number;
+  heightHooks: HeightHook[];
+  isLoading: boolean;
+  setWaitHeight: (height: bigint | string, invalidateQueries?: unknown[]) => void;
+}>({
+  currentHeight: 0,
+  waitHeight: 0,
+  isLoading: false,
+  heightHooks: [],
+  setWaitHeight: () => {},
+});
+
+export function useSquidNetworkHeight() {
+  const { isLoading, currentHeight, waitHeight, setWaitHeight } = useContext(SquidHeightContext);
+
+  return {
+    isLoading,
+    isWaiting: currentHeight < waitHeight,
+    currentHeight,
+    waitHeight,
+    setWaitHeight,
+  };
+}
+
+export function SquidHeightProvider({ children }: PropsWithChildren) {
   const queryClient = useQueryClient();
   const dataSource = useSquidDataSource();
   const [heightHooksRaw, setHeightHooksRaw] = useLocalStorageState<string>('squid_height_hooks', {
@@ -30,28 +64,14 @@ export function useSquidNetworkHeightHooks() {
   const heightHooks: HeightHook[] = useMemo(() => {
     try {
       return JSON.parse(heightHooksRaw);
-    } catch (e: any) {
-      logger.error(`Cant parse json form squid_height_hooks: ${e.message}`);
+    } catch (e: unknown) {
+      logger.error(
+        `Cant parse json form squid_height_hooks: ${e instanceof Error ? e.message : e}`,
+      );
       return [];
     }
   }, [heightHooksRaw]);
 
-  const maxWaitedHook = useMemo(() => {
-    return max(heightHooks.map(h => h.height)) || 0;
-  }, [heightHooks]);
-
-  const setWaitHeight = useMemo(() => {
-    return (height: bigint | string, invalidateQueries: unknown[] = []) => {
-      heightHooks.push({
-        height: Number(height),
-        invalidateQueries: invalidateQueries,
-      });
-      heightHooks.splice(0, heightHooks.length - 10);
-
-      setHeightHooksRaw(JSON.stringify(heightHooks));
-    };
-  }, [heightHooks, setHeightHooksRaw]);
-
   useEffect(() => {
     const [notReady, ready] = partition(heightHooks, hook => hook.height > currentHeight);
     if (!ready.length) return;
@@ -69,11 +89,43 @@ export function useSquidNetworkHeightHooks() {
     });
   }, [currentHeight, heightHooks, queryClient, setHeightHooksRaw]);
 
-  return {
-    isLoading,
-    isWaiting: heightHooks.length > 0,
-    waitHeight: maxWaitedHook,
-    currentHeight: currentHeight ? String(currentHeight) : '0',
-    setWaitHeight,
-  };
+  const setWaitHeight = useCallback(
+    (height: bigint | string, invalidateQueries: unknown[] = []) => {
+      heightHooks.push({
+        height: Number(height),
+        invalidateQueries: invalidateQueries,
+      });
+      heightHooks.splice(0, heightHooks.length - 10);
+
+      setHeightHooksRaw(JSON.stringify(heightHooks));
+    },
+    [heightHooks, setHeightHooksRaw],
+  );
+
+  const maxWaitHeight = useMemo(() => {
+    return max(heightHooks.map(h => h.height)) || 0;
+  }, [heightHooks]);
+
+  const { data: chainHeight } = useBlockNumber();
+  useEffect(() => {
+    if (isLoading) return;
+
+    if (chainHeight && BigInt(currentHeight) < chainHeight && maxWaitHeight < chainHeight) {
+      setWaitHeight(chainHeight);
+    }
+  }, [chainHeight, currentHeight, heightHooks, isLoading, maxWaitHeight, setWaitHeight]);
+
+  return (
+    <SquidHeightContext.Provider
+      value={{
+        isLoading,
+        heightHooks,
+        currentHeight,
+        waitHeight: maxWaitHeight,
+        setWaitHeight,
+      }}
+    >
+      {children}
+    </SquidHeightContext.Provider>
+  );
 }