Refactor package.json and pnpm-lock.yaml

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "type-check": "tsc --b",
     "lint": "eslint .",
     "preview": "vite preview"
   },

src/components/collator/_hooks/collator.ts

@@ -10,17 +10,16 @@ type CreateAndCollatorProps = {
   commission: bigint;
 };
 export const useCreateAndCollator = ({ enabled }: { enabled: boolean }) => {
+  const { address, isEnabled } = useWalletStatus();
   const { writeContractAsync, ...rest } = useWriteContract();
-  const { currentChainId, address } = useWalletStatus();
   const oldKey = genKey({ address: address as `0x${string}`, votes: 0n });
   const {
     data: collatorSetPrev,
     isLoading: isLoadingPrev,
     isRefetching: isRefetchingPrev
   } = useCollatorSetPrev({
     key: oldKey,
-    currentChainId,
-    enabled: !!oldKey && enabled
+    enabled: isEnabled && !!oldKey && enabled
   });
 
   const prev = (
@@ -46,16 +45,14 @@ export const useCreateAndCollator = ({ enabled }: { enabled: boolean }) => {
   };
 };
 
-export default useCreateAndCollator;
-
 export const useCreateCollator = ({
   commission,
   enabled
 }: {
   commission: bigint;
   enabled: boolean;
 }) => {
-  const { address, currentChainId } = useWalletStatus();
+  const { address, isEnabled } = useWalletStatus();
   const {
     data: stakedOf,
     isLoading: isLoadingStakedOf,
@@ -66,7 +63,7 @@ export const useCreateCollator = ({
     functionName: 'stakedOf',
     args: [address as `0x${string}`],
     query: {
-      enabled: !!address && enabled
+      enabled: isEnabled && enabled
     }
   });
 
@@ -80,7 +77,7 @@ export const useCreateCollator = ({
     functionName: 'assetsToVotes',
     args: [stakedOf ?? 0n, commission],
     query: {
-      enabled: !!commission && !!stakedOf && enabled
+      enabled: isEnabled && !!commission && !!stakedOf && enabled
     }
   });
 
@@ -94,8 +91,7 @@ export const useCreateCollator = ({
     isRefetching: isRefetchingPrev
   } = useCollatorSetPrev({
     key: oldKey,
-    currentChainId,
-    enabled: !!oldKey && enabled
+    enabled: isEnabled && !!oldKey && enabled
   });
 
   const prev = (

src/components/collator/_hooks/commissionLockInfo.ts

@@ -1,12 +1,8 @@
 import { useMemo } from 'react';
 import { useCommissionLocks } from './commissionLocks';
 
-export function useCommissionLockInfo(address?: `0x${string}`) {
-  const {
-    isLockPeriod,
-    isLoading: isLockPeriodLoading,
-    lockEndTime
-  } = useCommissionLocks(address as `0x${string}`);
+export function useCommissionLockInfo() {
+  const { isLockPeriod, isLoading: isLockPeriodLoading, lockEndTime } = useCommissionLocks();
 
   const remainingLockTime = useMemo(() => {
     if (!lockEndTime) return '';

src/components/collator/_hooks/commissionLocks.ts

@@ -1,15 +1,17 @@
+import { useMemo } from 'react';
 import { useReadContract } from 'wagmi';
 import { address as hubAddress, abi as hubAbi } from '@/config/abi/hub';
-import { useMemo } from 'react';
+import useWalletStatus from '@/hooks/useWalletStatus';
 
-export const useCommissionLocks = (address: `0x${string}`) => {
+export const useCommissionLocks = () => {
+  const { isEnabled, address } = useWalletStatus();
   const result = useReadContract({
     address: hubAddress,
     abi: hubAbi,
     functionName: 'commissionLocks',
     args: [address as `0x${string}`],
     query: {
-      enabled: !!address
+      enabled: isEnabled
     }
   });
 

src/components/collator/_hooks/update-commission.ts

@@ -4,7 +4,6 @@ import { isNil } from 'lodash-es';
 import { useCallback } from 'react';
 import { DEFAULT_PREV } from '@/utils/getPrevNew';
 import { useCollatorSetNewPrev } from '@/hooks/useService';
-import useWalletStatus from '@/hooks/useWalletStatus';
 import { genKey } from '@/utils';
 
 type UpdateCommissionProps = {
@@ -22,8 +21,6 @@ const useUpdateCommission = ({
   collatorAddress,
   totalAssets
 }: UpdateCommissionProps) => {
-  const { currentChainId } = useWalletStatus();
-
   const { data: votes, isLoading: isLoadingVotes } = useReadContract({
     abi: hubAbi,
     address: hubAddress,
@@ -43,7 +40,6 @@ const useUpdateCommission = ({
   } = useCollatorSetNewPrev({
     key: newKey,
     newKey,
-    currentChainId,
     enabled: !!collatorAddress && !!newKey && !!oldKey
   });
 

src/components/collator/join.tsx

@@ -6,7 +6,6 @@ import TransactionStatus from '../transaction-status';
 import { useSetSessionKey } from './_hooks/set-session-key';
 import { useCreateCollator, useCreateAndCollator } from './_hooks/collator';
 import { validSessionKey } from '@/utils';
-import useWalletStatus from '@/hooks/useWalletStatus';
 import { useCommissionLockInfo } from './_hooks/commissionLockInfo';
 import { error } from '../toast';
 
@@ -18,7 +17,6 @@ interface CollatorJoinProps {
 }
 
 const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJoinProps) => {
-  const { address } = useWalletStatus();
   const [isValidSessionKey, setIsValidSessionKey] = useState(true);
   const [sessionKeyHash, setSessionKeyHash] = useState('');
   const [commissionHash, setCommissionHash] = useState('');
@@ -31,9 +29,7 @@ const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJ
     return commissionValue ? BigInt(commissionValue) : 0n;
   }, [commissionValue]);
 
-  const { isLockPeriod, isLockPeriodLoading, remainingLockTime } = useCommissionLockInfo(
-    address as `0x${string}`
-  );
+  const { isLockPeriod, isLockPeriodLoading, remainingLockTime } = useCommissionLockInfo();
 
   const {
     createCollator,

src/components/collator/manage.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Tooltip } from '@nextui-org/react';
 import { CircleHelp } from 'lucide-react';
+import { validSessionKey } from '@/utils';
+import { useCollatorByAddress, useCollatorSetPrev } from '@/hooks/useService';
 import useWalletStatus from '@/hooks/useWalletStatus';
+import { DEFAULT_PREV } from '@/utils/getPrevNew';
 import TransactionStatus from '../transaction-status';
 import StopCollation from './stop-collation';
 import useStop from './_hooks/stop';
 import { useSetSessionKey } from './_hooks/set-session-key';
 import useUpdateCommission from './_hooks/update-commission';
-import { validSessionKey } from '@/utils';
-import { useCollatorByAddress, useCollatorSetPrev } from '@/hooks/useService';
-import { DEFAULT_PREV } from '@/utils/getPrevNew';
 import { useCommissionLockInfo } from './_hooks/commissionLockInfo';
 import { error } from '../toast';
 interface CollatorManagementProps {
@@ -24,7 +24,7 @@ const CollatorManagement = ({
   refetch,
   onStopSuccess
 }: CollatorManagementProps) => {
-  const { address, currentChainId } = useWalletStatus();
+  const { address } = useWalletStatus();
   const [open, setOpen] = useState(false);
   const [isValidSessionKey, setIsValidSessionKey] = useState(true);
   const [sessionKeyHash, setSessionKeyHash] = useState('');
@@ -34,9 +34,8 @@ const CollatorManagement = ({
   const [commissionValue, setCommissionValue] = useState('');
 
   const { data: collatorByAddress, isLoading: isLoadingCollatorByAddress } = useCollatorByAddress({
-    currentChainId,
     address: address as `0x${string}`,
-    enabled: !!address
+    enabled: true
   });
   const currentCollator = collatorByAddress?.[0];
   const oldKey = currentCollator?.key || '';
@@ -52,17 +51,14 @@ const CollatorManagement = ({
     isRefetching: isRefetchingPrev
   } = useCollatorSetPrev({
     key: oldKey,
-    currentChainId,
     enabled: !!oldKey
   });
 
   const oldPrev = (
     collatorSetPrev?.[0] ? collatorSetPrev?.[0]?.address : DEFAULT_PREV
   ) as `0x${string}`;
 
-  const { isLockPeriod, isLockPeriodLoading, remainingLockTime } = useCommissionLockInfo(
-    address as `0x${string}`
-  );
+  const { isLockPeriod, isLockPeriodLoading, remainingLockTime } = useCommissionLockInfo();
 
   const { setSessionKey, isPending: isPendingSetSessionKey } = useSetSessionKey();
 

src/components/reserved-staking-panel.tsx

@@ -1,14 +1,11 @@
 import { useStakingAccount } from '@/hooks/useService';
 import TooltipFormattedNumber from './tooltip-formatter-number';
-import useWalletStatus from '@/hooks/useWalletStatus';
 import { formatEther } from 'viem';
 import { Skeleton } from '@nextui-org/react';
 
 const ReservedStakingPanel = () => {
-  const { address, currentChainId } = useWalletStatus();
   const { data, isLoading } = useStakingAccount({
-    address,
-    currentChainId
+    enabled: true
   });
   const totalAmount =
     data?.reduce((acc, item) => acc + (item.assets ? BigInt(item.assets) : 0n), 0n) ?? 0n;

src/hooks/useActiveCollators.ts

@@ -1,16 +1,16 @@
 import { useReadContract } from 'wagmi';
 import { address, abi } from '@/config/abi/collator';
+import useWalletStatus from './useWalletStatus';
 
 const useActiveCollators = ({ enabled }: { enabled: boolean }) => {
+  const { isEnabled } = useWalletStatus();
   const result = useReadContract({
     address: address,
     abi: abi,
     functionName: 'getActiveCollators',
     args: [],
     query: {
-      enabled,
-      refetchOnMount: true,
-      staleTime: 0
+      enabled: isEnabled && enabled
     }
   });
 

src/hooks/useAssetsToVotes.ts

@@ -1,6 +1,7 @@
 import { useReadContract } from 'wagmi';
 import { abi, address } from '@/config/abi/hub';
 import { isNil } from 'lodash-es';
+import useWalletStatus from './useWalletStatus';
 
 export type Operation = 'add' | 'subtract';
 
@@ -12,14 +13,14 @@ interface AssetsToVotesProps {
 }
 
 function useAssetsToVotes({ commission, totalAmount, inputAmount, operation }: AssetsToVotesProps) {
+  const { isEnabled } = useWalletStatus();
   const result = useReadContract({
     abi,
     address,
     functionName: 'assetsToVotes',
     args: [commission, calculateAssets(totalAmount, inputAmount, operation)],
     query: {
-      enabled: !isNil(totalAmount) && !isNil(inputAmount) && !!commission,
-      staleTime: 0
+      enabled: isEnabled && !isNil(totalAmount) && !isNil(inputAmount) && !!commission
     }
   });
 

src/hooks/useCollatorList.ts

@@ -1,28 +1,25 @@
 import { useCallback } from 'react';
 import useActiveCollators from './useActiveCollators';
 import { useCollatorSet } from './useService';
-import useWalletStatus from './useWalletStatus';
 
 export const useActiveCollatorList = ({ enabled }: { enabled: boolean }) => {
-  const { currentChainId } = useWalletStatus();
   const {
     data: activeCollators,
     isLoading: isActiveCollatorsLoading,
     isRefetching: isActiveCollatorsRefetching,
     refetch: refetchActiveCollators
   } = useActiveCollators({
-    enabled: !!currentChainId && !!enabled
+    enabled
   });
   const {
     data: list,
     isLoading: isListLoading,
     isRefetching: isListRefetching,
     refetch: refetchList
   } = useCollatorSet({
-    currentChainId: currentChainId,
     offset: 0,
     limit: activeCollators?.length || 0,
-    enabled: !!currentChainId && !!activeCollators && !!enabled
+    enabled: !!activeCollators && enabled
   });
 
   const refetch = useCallback(() => {
@@ -49,14 +46,13 @@ export const useWaitingCollatorList = ({
   pageSize: number;
   searchedAddress?: string;
 }) => {
-  const { currentChainId } = useWalletStatus();
   const {
     data: activeCollators,
     isLoading: isActiveCollatorsLoading,
     isRefetching: isActiveCollatorsRefetching,
     refetch: refetchActiveCollators
   } = useActiveCollators({
-    enabled: !!currentChainId && enabled
+    enabled
   });
 
   const activeCollatorsCount = activeCollators?.length || 0;
@@ -68,11 +64,10 @@ export const useWaitingCollatorList = ({
     isRefetching: isWaitingCollatorsRefetching,
     refetch: refetchWaitingCollators
   } = useCollatorSet({
-    currentChainId,
     searchedAddress,
     offset,
     limit: pageSize,
-    enabled: !!currentChainId && !!activeCollators && enabled
+    enabled: !!activeCollators && enabled
   });
 
   const refetch = useCallback(() => {

src/hooks/useDebouncedState.ts

@@ -3,19 +3,20 @@ import { useDebounce } from 'react-use';
 
 interface UseDebouncedStateProps<T> {
   initialValue: T;
-  delay: number;
+  delay?: number;
 }
 
 interface UseDebouncedStateReturn<T> {
   value: T;
   debouncedValue: T;
+  setValue: (value: T) => void;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   reset: () => void;
 }
 
 export function useDebouncedState<T>({
   initialValue,
-  delay
+  delay = 500
 }: UseDebouncedStateProps<T>): UseDebouncedStateReturn<T> {
   const [value, setValue] = useState<T>(initialValue);
   const [debouncedValue, setDebouncedValue] = useState<T>(initialValue);
@@ -40,5 +41,5 @@ export function useDebouncedState<T>({
     setValue(initialValue);
     setDebouncedValue(initialValue);
   }, [initialValue]);
-  return { value, debouncedValue, handleChange, reset };
+  return { value, debouncedValue, setValue, handleChange, reset };
 }