Merge pull request #34 from subsquid/develop

release

src/api/contracts/vesting.ts

@@ -3,20 +3,20 @@ import { useEffect, useRef, useState } from 'react';
 import { chunk } from 'lodash-es';
 import { erc20Abi, MulticallResponse } from 'viem';
 import { waitForTransactionReceipt } from 'viem/actions';
-import { useReadContracts, useWriteContract, useClient } from 'wagmi';
+import { useReadContracts, useWriteContract, useClient, useBlockNumber } from 'wagmi';
 
 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}`[] }) {
+export function useVestingContracts({ addresses }: { addresses?: `0x${string}`[] }) {
   const contracts = useContracts();
   const { currentHeight, isLoading: isSquidHeightLoading } = useSquidNetworkHeight();
 
   const { data, isLoading } = useReadContracts({
-    contracts: addresses.flatMap(address => {
+    contracts: addresses?.flatMap(address => {
       const vestingContract = { abi: VESTING_CONTRACT_ABI, address } as const;
       return [
         {
@@ -60,29 +60,11 @@ export function useVestingContracts({ addresses }: { addresses: `0x${string}`[]
     allowFailure: true,
     blockNumber: BigInt(currentHeight),
     query: {
-      enabled: !isSquidHeightLoading,
-      select: r => {
-        if (r?.some(r => r.status === 'success')) {
-          return chunk(r, 8).map(ch => ({
-            start: Number(unwrapResult(ch[0])) * 1000,
-            end: Number(unwrapResult(ch[1])) * 1000,
-            deposited: unwrapResult(ch[2])?.toString(),
-            releasable: unwrapResult(ch[3])?.toString(),
-            released: unwrapResult(ch[4])?.toString(),
-            balance: unwrapResult(ch[5])?.toString(),
-            initialRelease: Number(unwrapResult(ch[6]) || 0) / 100,
-            expectedTotal: unwrapResult(ch[7])?.toString(),
-          }));
-        } else if (!addresses.length) {
-          return [];
-        }
-
-        return res.current;
-      },
+      enabled: !isSquidHeightLoading && !!addresses?.length,
     },
   });
 
-  const res = useRef<
+  const [vestings, setVestings] = useState<
     | {
         start?: number;
         end?: number;
@@ -95,14 +77,31 @@ export function useVestingContracts({ addresses }: { addresses: `0x${string}`[]
       }[]
     | undefined
   >(undefined);
+
   useEffect(() => {
-    if (isLoading) return;
-    res.current = data;
-  }, [addresses, data, isLoading]);
+    if (isLoading || !addresses) return;
+
+    if (data?.some(r => r.status === 'success')) {
+      setVestings(
+        chunk(data, 8).map(ch => ({
+          start: Number(unwrapResult(ch[0])) * 1000,
+          end: Number(unwrapResult(ch[1])) * 1000,
+          deposited: unwrapResult(ch[2])?.toString(),
+          releasable: unwrapResult(ch[3])?.toString(),
+          released: unwrapResult(ch[4])?.toString(),
+          balance: unwrapResult(ch[5])?.toString(),
+          initialRelease: Number(unwrapResult(ch[6]) || 0) / 100,
+          expectedTotal: unwrapResult(ch[7])?.toString(),
+        })),
+      );
+    } else if (data?.length === 0) {
+      setVestings([]);
+    }
+  }, [addresses, data, isLoading, setVestings]);
 
   return {
-    data: res.current,
-    isLoading: !res.current,
+    data: vestings,
+    isLoading: isLoading && !vestings,
   };
 }
 

src/api/subsquid-network-squid/api.graphql

@@ -322,3 +322,33 @@ query vestingByAddress($address: String!) {
     ...VestingFragment
   }
 }
+
+query networkSummary {
+  networkStats {
+    onlineWorkersCount
+    queries90Days
+    queries24Hours
+    servedData90Days
+    servedData24Hours
+    stakerApr
+    totalBond
+    totalDelegation
+    storedData
+    workerApr
+    workersCount
+  }
+}
+
+query currentEpoch {
+  networkStats {
+    blockTimeL1
+    lastBlockL1
+    lastBlockTimestampL1
+  }
+
+  epoches(limit: 1, orderBy: id_DESC) {
+    number
+    start
+    end
+  }
+}

src/api/subsquid-network-squid/graphql.tsx

@@ -2561,6 +2561,27 @@ export type GatewaysConnection = {
   totalCount: Scalars['Int']['output'];
 };
 
+export type NetworkStats = {
+  __typename?: 'NetworkStats';
+  blockTime: Scalars['Float']['output'];
+  blockTimeL1: Scalars['Float']['output'];
+  lastBlock: Scalars['Float']['output'];
+  lastBlockL1: Scalars['Float']['output'];
+  lastBlockTimestamp: Scalars['DateTime']['output'];
+  lastBlockTimestampL1: Scalars['DateTime']['output'];
+  onlineWorkersCount: Scalars['Float']['output'];
+  queries24Hours: Scalars['BigInt']['output'];
+  queries90Days: Scalars['BigInt']['output'];
+  servedData24Hours: Scalars['BigInt']['output'];
+  servedData90Days: Scalars['BigInt']['output'];
+  stakerApr: Scalars['Float']['output'];
+  storedData: Scalars['BigInt']['output'];
+  totalBond: Scalars['BigInt']['output'];
+  totalDelegation: Scalars['BigInt']['output'];
+  workerApr: Scalars['Float']['output'];
+  workersCount: Scalars['Float']['output'];
+};
+
 export type PageInfo = {
   __typename?: 'PageInfo';
   endCursor: Scalars['String']['output'];
@@ -2631,6 +2652,7 @@ export type Query = {
   gatewayStatusChangesConnection: GatewayStatusChangesConnection;
   gateways: Array<Gateway>;
   gatewaysConnection: GatewaysConnection;
+  networkStats: NetworkStats;
   settings: Array<Settings>;
   settingsById?: Maybe<Settings>;
   /** @deprecated Use settingsById */
@@ -4684,7 +4706,7 @@ export enum WorkerStatus {
   Deregistered = 'DEREGISTERED',
   Deregistering = 'DEREGISTERING',
   Registering = 'REGISTERING',
-  Unknow = 'UNKNOW',
+  Unknown = 'UNKNOWN',
   Withdrawn = 'WITHDRAWN',
 }
 
@@ -5929,6 +5951,39 @@ export type VestingByAddressQuery = {
   };
 };
 
+export type NetworkSummaryQueryVariables = Exact<{ [key: string]: never }>;
+
+export type NetworkSummaryQuery = {
+  __typename?: 'Query';
+  networkStats: {
+    __typename?: 'NetworkStats';
+    onlineWorkersCount: number;
+    queries90Days: string;
+    queries24Hours: string;
+    servedData90Days: string;
+    servedData24Hours: string;
+    stakerApr: number;
+    totalBond: string;
+    totalDelegation: string;
+    storedData: string;
+    workerApr: number;
+    workersCount: number;
+  };
+};
+
+export type CurrentEpochQueryVariables = Exact<{ [key: string]: never }>;
+
+export type CurrentEpochQuery = {
+  __typename?: 'Query';
+  networkStats: {
+    __typename?: 'NetworkStats';
+    blockTimeL1: number;
+    lastBlockL1: number;
+    lastBlockTimestampL1: string;
+  };
+  epoches: Array<{ __typename?: 'Epoch'; number: number; start: number; end: number }>;
+};
+
 export const WorkerBaseFragmentFragmentDoc = `
     fragment WorkerBaseFragment on Worker {
   id
@@ -6633,3 +6688,74 @@ export const useVestingByAddressQuery = <TData = VestingByAddressQuery, TError =
     ...options,
   });
 };
+
+export const NetworkSummaryDocument = `
+    query networkSummary {
+  networkStats {
+    onlineWorkersCount
+    queries90Days
+    queries24Hours
+    servedData90Days
+    servedData24Hours
+    stakerApr
+    totalBond
+    totalDelegation
+    storedData
+    workerApr
+    workersCount
+  }
+}
+    `;
+
+export const useNetworkSummaryQuery = <TData = NetworkSummaryQuery, TError = unknown>(
+  dataSource: { endpoint: string; fetchParams?: RequestInit },
+  variables?: NetworkSummaryQueryVariables,
+  options?: Omit<UseQueryOptions<NetworkSummaryQuery, TError, TData>, 'queryKey'> & {
+    queryKey?: UseQueryOptions<NetworkSummaryQuery, TError, TData>['queryKey'];
+  },
+) => {
+  return useQuery<NetworkSummaryQuery, TError, TData>({
+    queryKey: variables === undefined ? ['networkSummary'] : ['networkSummary', variables],
+    queryFn: fetcher<NetworkSummaryQuery, NetworkSummaryQueryVariables>(
+      dataSource.endpoint,
+      dataSource.fetchParams || {},
+      NetworkSummaryDocument,
+      variables,
+    ),
+    ...options,
+  });
+};
+
+export const CurrentEpochDocument = `
+    query currentEpoch {
+  networkStats {
+    blockTimeL1
+    lastBlockL1
+    lastBlockTimestampL1
+  }
+  epoches(limit: 1, orderBy: id_DESC) {
+    number
+    start
+    end
+  }
+}
+    `;
+
+export const useCurrentEpochQuery = <TData = CurrentEpochQuery, TError = unknown>(
+  dataSource: { endpoint: string; fetchParams?: RequestInit },
+  variables?: CurrentEpochQueryVariables,
+  options?: Omit<UseQueryOptions<CurrentEpochQuery, TError, TData>, 'queryKey'> & {
+    queryKey?: UseQueryOptions<CurrentEpochQuery, TError, TData>['queryKey'];
+  },
+) => {
+  return useQuery<CurrentEpochQuery, TError, TData>({
+    queryKey: variables === undefined ? ['currentEpoch'] : ['currentEpoch', variables],
+    queryFn: fetcher<CurrentEpochQuery, CurrentEpochQueryVariables>(
+      dataSource.endpoint,
+      dataSource.fetchParams || {},
+      CurrentEpochDocument,
+      variables,
+    ),
+    ...options,
+  });
+};

src/api/subsquid-network-squid/settings-graphql.ts

@@ -1,7 +1,7 @@
 import { toSqd } from '@lib/network';
 
 import { useSquidDataSource } from './datasource';
-import { useSettingsQuery } from './graphql';
+import { useCurrentEpochQuery, useNetworkSummaryQuery, useSettingsQuery } from './graphql';
 
 export function useNetworkSettings() {
   const dataSource = useSquidDataSource();
@@ -19,3 +19,43 @@ export function useNetworkSettings() {
     isPending,
   };
 }
+
+export function useNetworkSummary() {
+  const dataSource = useSquidDataSource();
+  const { data: networkStats, isLoading: isNetworkStatsLoading } = useNetworkSummaryQuery(
+    dataSource,
+    {},
+    {
+      select: res => {
+        return {
+          ...res.networkStats,
+        };
+      },
+    },
+  );
+
+  const { data: currentEpoch, isLoading: isCurrentEpochLoading } = useCurrentEpochQuery(
+    dataSource,
+    {},
+    {
+      select: res => {
+        return {
+          ...res.networkStats,
+          epoch: res.epoches[0],
+        };
+      },
+      refetchInterval: 6000, // a half of block time in l1
+    },
+  );
+
+  return {
+    data:
+      networkStats && currentEpoch
+        ? {
+            ...networkStats,
+            ...currentEpoch,
+          }
+        : undefined,
+    isLoading: isNetworkStatsLoading || isCurrentEpochLoading,
+  };
+}

src/api/subsquid-network-squid/workers-graphql.ts

@@ -21,6 +21,7 @@ import {
   useWorkerDelegationInfoQuery,
   useWorkerOwnerQuery,
   Worker,
+  WorkerFragmentFragment,
 } from './graphql';
 import { useNetworkSettings } from './settings-graphql';
 // inherit API interface for internal class

src/components/Search/Search.tsx

@@ -5,9 +5,8 @@ import { Box, styled } from '@mui/material';
 
 import { TextField } from '@components/Form';
 
-export const Field = styled(TextField)(() => ({
+export const Field = styled(TextField)(({ theme }) => ({
   // background: theme.palette.background.default,
-  borderWidth: 0,
   [`& .MuiInputBase-root`]: {
     paddingLeft: 10,
   },
@@ -20,6 +19,7 @@ export const Field = styled(TextField)(() => ({
     paddingLeft: 5,
     minHeight: 36,
   },
+  borderRadius: 6,
 }));
 
 export const Search = ({
@@ -45,7 +45,7 @@ export const Search = ({
   const handleChange = useCallback((value: string) => onChange?.(value), [onChange]);
 
   return (
-    <Box sx={{ flex: fullWidth ? '1' : '0 0 200px', position: 'relative' }}>
+    <Box sx={{ flex: fullWidth ? 1 : '0 0 250px', position: 'relative' }}>
       <Field
         placeholder={placeholder}
         variant="filled"

src/components/Table/BorderedTable.tsx

@@ -19,6 +19,7 @@ export const BorderedTable = styled(Table)(({ theme }) => ({
     background: theme.palette.background.paper,
     borderBottom: `1px solid ${theme.palette.background.content}`,
     padding: theme.spacing(2.5, 1.5),
+    fontVariantNumeric: 'tabular-nums',
   },
 
   '& td:first-of-type, & th:first-of-type': {

src/layouts/NetworkLayout/NetworkLayout.tsx

@@ -269,7 +269,7 @@ export const NetworkLayout = ({
   const network = getSubsquidNetwork();
 
   useEffect(() => {
-    if (!isConnected || walletClient.isLoading) return;
+    if (!isConnected) return;
     if (chain?.id === getChainId(network)) return;
 
     disconnect();