Disable Actions when data is not synced

pages/test2.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useQueries } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
 import {
 	PublicKey,
@@ -14,28 +14,28 @@
 } from '@/components/modals/FailedDonation';
 import { getTotalGIVpower } from '@/helpers/givpower';
 import { formatWeiHelper } from '@/helpers/number';
-import config from '@/configuration';
-import { fetchSubgraphData } from '@/services/subgraph.service';
+import { useFetchSubgraphDataForAllChains } from '@/hooks/useFetchSubgraphDataForAllChains';
 
 const YourApp = () => {
 	const [failedModalType, setFailedModalType] =
 		useState<EDonationFailedType>();
-	const { address } = useAccount();
-	const subgraphValues = useQueries({
-		queries: config.CHAINS_WITH_SUBGRAPH.map(chain => ({
-			queryKey: ['subgraph', chain.id, address],
-			queryFn: async () => {
-				return await fetchSubgraphData(chain.id, address);
-			},
-			staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-		})),
+	const queryClient = useQueryClient();
+	const { address, chain } = useAccount();
+	const subgraphValues = useFetchSubgraphDataForAllChains();
+
+	const { data } = useQuery({
+		queryKey: ['interactedBlockNumber', chain?.id],
+		queryFn: () => 0,
+		staleTime: Infinity,
 	});
 
+	console.log('data', data);
+
 	// Solana wallet hooks
 	const {
 		publicKey,
 		disconnect: solanaWalletDisconnect,
 		signMessage: solanaSignMessage,
 		sendTransaction: solanaSendTransaction,
 		connecting: solanaIsConnecting,
 		connected: solanaIsConnected,
@@ -126,6 +126,22 @@
 					Test Button
 				</button>
 			</div>
+			<div>
+				{data}
+
+				{chain?.id && (
+					<button
+						onClick={() => {
+							queryClient.setQueryData(
+								['interactedBlockNumber', chain.id!],
+								12,
+							);
+						}}
+					>
+						update query data
+					</button>
+				)}
+			</div>
 			{failedModalType && (
 				<FailedDonation
 					txUrl={'0x01121212'}

src/components/GIVeconomyPages/GIVbacks.tsx

@@ -12,7 +12,6 @@ import {
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
-import { useQuery } from '@tanstack/react-query';
 import {
 	GIVbacksTopContainer,
 	GIVbacksBottomContainer,
@@ -43,27 +42,22 @@ import { NoWrap, TopInnerContainer } from './commons';
 import links from '@/lib/constants/links';
 import Routes from '@/lib/constants/Routes';
 import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
-import { fetchSubgraphData } from '@/services/subgraph.service';
 import { FETCH_ALLOCATED_GIVBACKS } from '@/apollo/gql/gqlGivbacks';
 import { client } from '@/apollo/apolloClient';
+import { useSubgraphInfo } from '@/hooks/useSubgraphInfo';
 
 export const TabGIVbacksTop = () => {
 	const { formatMessage } = useIntl();
 	const [showHarvestModal, setShowHarvestModal] = useState(false);
 	const [showGivBackExplain, setShowGivBackExplain] = useState(false);
 	const [givBackStream, setGivBackStream] = useState(0n);
 	const { givTokenDistroHelper } = useGIVTokenDistroHelper(showHarvestModal);
-	const { chain, address } = useAccount();
+	const { chainId } = useAccount();
 	const dataChainId =
-		chain?.id === config.OPTIMISM_NETWORK_NUMBER
+		chainId === config.OPTIMISM_NETWORK_NUMBER
 			? config.OPTIMISM_NETWORK_NUMBER
 			: config.GNOSIS_NETWORK_NUMBER;
-	const values = useQuery({
-		queryKey: ['subgraph', dataChainId, address],
-		queryFn: async () => await fetchSubgraphData(dataChainId, address),
-		enabled: !!chain,
-		staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-	});
+	const values = useSubgraphInfo(dataChainId);
 	const givTokenDistroBalance = useMemo(() => {
 		const sdh = new SubgraphDataHelper(values.data);
 		return sdh.getGIVTokenDistroBalance();
@@ -107,7 +101,7 @@ export const TabGIVbacksTop = () => {
 								actionCb={() => {
 									setShowHarvestModal(true);
 								}}
-								network={chain?.id}
+								network={chainId}
 								targetNetworks={[
 									{
 										networkId: config.GNOSIS_NETWORK_NUMBER,

src/components/GIVeconomyPages/GIVpower.tsx

@@ -16,7 +16,6 @@ import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
 import { useAccount } from 'wagmi';
-import { useQueries } from '@tanstack/react-query';
 import {
 	GIVpowerTopContainer,
 	Title,
@@ -61,21 +60,13 @@ import { formatWeiHelper } from '@/helpers/number';
 import { getTotalGIVpower } from '@/helpers/givpower';
 import { useGeneralWallet } from '@/providers/generalWalletProvider';
 import { ChainType } from '@/types/config';
-import { fetchSubgraphData } from '@/services/subgraph.service';
+import { useFetchSubgraphDataForAllChains } from '@/hooks/useFetchSubgraphDataForAllChains';
 
 export function TabPowerTop() {
 	const { formatMessage } = useIntl();
 	const { open: openConnectModal } = useWeb3Modal();
 	const { address } = useAccount();
-	const subgraphValues = useQueries({
-		queries: config.CHAINS_WITH_SUBGRAPH.map(chain => ({
-			queryKey: ['subgraph', chain.id, address],
-			queryFn: async () => {
-				return await fetchSubgraphData(chain.id, address);
-			},
-			staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-		})),
-	});
+	const subgraphValues = useFetchSubgraphDataForAllChains();
 	const givPower = getTotalGIVpower(subgraphValues, address);
 	const givPowerFormatted = formatWeiHelper(givPower.total);
 	const hasZeroGivPower = givPowerFormatted === '0';

src/components/GIVeconomyPages/GIVstream.tsx

@@ -19,7 +19,6 @@ import {
 } from '@giveth/ui-design-system';
 import { useIntl } from 'react-intl';
 import { useAccount } from 'wagmi';
-import { useQuery } from '@tanstack/react-query';
 import {
 	Bar,
 	FlowRateRow,
@@ -52,7 +51,7 @@ import {
 	GridWrapper,
 } from './GIVstream.sc';
 import { IconWithTooltip } from '../IconWithToolTip';
-import { getHistory, fetchSubgraphData } from '@/services/subgraph.service';
+import { getHistory } from '@/services/subgraph.service';
 import { formatWeiHelper } from '@/helpers/number';
 import config from '@/configuration';
 import { durationToString, shortenAddress } from '@/lib/helpers';
@@ -64,22 +63,16 @@ import { IconGIV } from '../Icons/GIV';
 import { givEconomySupportedNetworks } from '@/lib/constants/constants';
 import Pagination from '../Pagination';
 import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
+import { useSubgraphInfo } from '@/hooks/useSubgraphInfo';
 
 export const TabGIVstreamTop = () => {
 	const { formatMessage } = useIntl();
 	const [showModal, setShowModal] = useState(false);
 	const [rewardLiquidPart, setRewardLiquidPart] = useState(0n);
 	const [rewardStream, setRewardStream] = useState(0n);
 	const { givTokenDistroHelper } = useGIVTokenDistroHelper(showModal);
-	const { chain, address } = useAccount();
-	const currentValues = useQuery({
-		queryKey: ['subgraph', chain?.id, address],
-		queryFn: async () => await fetchSubgraphData(chain?.id, address),
-		enabled: !!chain,
-		staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-	});
-
-	const chainId = chain?.id;
+	const { chainId } = useAccount();
+	const currentValues = useSubgraphInfo();
 	const sdh = new SubgraphDataHelper(currentValues.data);
 	const { allocatedTokens, claimed, givback } =
 		sdh.getGIVTokenDistroBalance();
@@ -169,22 +162,16 @@ export const TabGIVstreamTop = () => {
 };
 
 export const TabGIVstreamBottom = () => {
-	const { chain, address } = useAccount();
+	const { chainId } = useAccount();
 	const { givTokenDistroHelper } = useGIVTokenDistroHelper();
 	const { formatMessage } = useIntl();
 
 	const [percent, setPercent] = useState(0);
 	const [remain, setRemain] = useState('');
 	useState(0n);
 	const [streamAmount, setStreamAmount] = useState(0n);
-	const currentValues = useQuery({
-		queryKey: ['subgraph', chain?.id, address],
-		queryFn: async () => await fetchSubgraphData(chain?.id, address),
-		enabled: !!chain,
-		staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-	});
+	const currentValues = useSubgraphInfo();
 
-	const chainId = chain?.id;
 	const sdh = new SubgraphDataHelper(currentValues.data);
 	const givTokenDistroBalance = sdh.getGIVTokenDistroBalance();
 	const increaseSecRef = useRef<HTMLDivElement>(null);
@@ -388,12 +375,7 @@ export const GIVstreamHistory: FC = () => {
 	const [loading, setLoading] = useState(true);
 	const [page, setPage] = useState(0);
 
-	const currentValue = useQuery({
-		queryKey: ['subgraph', chain?.id, address],
-		queryFn: async () => await fetchSubgraphData(chain?.id, address),
-		enabled: !!chain,
-		staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-	});
+	const currentValue = useSubgraphInfo();
 
 	const chainId = chain?.id;
 	const sdh = new SubgraphDataHelper(currentValue.data);

src/components/RewardCard.tsx

@@ -25,6 +25,7 @@ import { INetworkIdWithChain } from './views/donate/common/common.types';
 import { ChainType } from '@/types/config';
 import { EVMWrongNetworkSwitchModal } from './modals/WrongNetworkInnerModal';
 import { useFetchGIVPrice } from '@/hooks/useGivPrice';
+import { useSubgraphSyncInfo } from '@/hooks/useSubgraphSyncInfo';
 
 interface IRewardCardProps {
 	cardName: string;
@@ -63,6 +64,7 @@ export const RewardCard: FC<IRewardCardProps> = ({
 		useState(false);
 	const { data: givPrice } = useFetchGIVPrice();
 	const { givTokenDistroHelper } = useGIVTokenDistroHelper();
+	const subgraphSyncedInfo = useSubgraphSyncInfo(network);
 
 	useEffect(() => {
 		const price =
@@ -132,7 +134,10 @@ export const RewardCard: FC<IRewardCardProps> = ({
 								label={actionLabel}
 								onClick={actionCb}
 								buttonType='primary'
-								disabled={liquidAmount === 0n}
+								disabled={
+									liquidAmount === 0n ||
+									!subgraphSyncedInfo.isSynced
+								}
 							/>
 						) : (
 							<PlaceHolderButton />

src/components/cards/StakingCards/BaseStakingCard/StakingPoolInfoAndActions.tsx

@@ -54,6 +54,7 @@ import LockModal from '@/components/modals/StakeLock/Lock';
 import { WhatIsStreamModal } from '@/components/modals/WhatIsStream';
 import { LockupDetailsModal } from '@/components/modals/LockupDetailsModal';
 import ExternalLink from '@/components/ExternalLink';
+import { useSubgraphSyncInfo } from '@/hooks/useSubgraphSyncInfo';
 
 interface IStakingPoolInfoAndActionsProps {
 	poolStakingConfig: PoolStakingConfig | RegenPoolStakingConfig;
@@ -84,15 +85,16 @@ export const StakingPoolInfoAndActions: FC<IStakingPoolInfoAndActionsProps> = ({
 	const [showWhatIsGIVstreamModal, setShowWhatIsGIVstreamModal] =
 		useState(false);
 
+	const { formatMessage } = useIntl();
+	const { setChainInfo } = useFarms();
+	const router = useRouter();
+	const subgraphSyncedInfo = useSubgraphSyncInfo(poolStakingConfig.network);
 	const hold =
 		showAPRModal ||
 		showStakeModal ||
 		showUnStakeModal ||
 		showHarvestModal ||
 		showLockModal;
-	const { formatMessage } = useIntl();
-	const { setChainInfo } = useFarms();
-	const router = useRouter();
 	const {
 		apr,
 		notStakedAmount: userNotStakedAmount,
@@ -354,7 +356,12 @@ export const StakingPoolInfoAndActions: FC<IStakingPoolInfoAndActionsProps> = ({
 			)}
 			<HarvestButtonsWrapper>
 				<ClaimButton
-					disabled={exploited || earned === 0n || !started}
+					disabled={
+						exploited ||
+						earned === 0n ||
+						!started ||
+						!subgraphSyncedInfo.isSynced
+					}
 					onClick={() => setShowHarvestModal(true)}
 					label={formatMessage({
 						id: 'label.harvest_rewards',
@@ -363,7 +370,10 @@ export const StakingPoolInfoAndActions: FC<IStakingPoolInfoAndActionsProps> = ({
 				/>
 				{isGIVpower && (
 					<ClaimButton
-						disabled={availableStakedToken <= 0n}
+						disabled={
+							availableStakedToken <= 0n ||
+							!subgraphSyncedInfo.isSynced
+						}
 						onClick={() => setShowLockModal(true)}
 						label={
 							started
@@ -386,7 +396,8 @@ export const StakingPoolInfoAndActions: FC<IStakingPoolInfoAndActionsProps> = ({
 						disabled={
 							isDiscontinued ||
 							exploited ||
-							userNotStakedAmount === 0n
+							userNotStakedAmount === 0n ||
+							!subgraphSyncedInfo.isSynced
 						}
 						onClick={() => setShowStakeModal(true)}
 					/>
@@ -404,7 +415,10 @@ export const StakingPoolInfoAndActions: FC<IStakingPoolInfoAndActionsProps> = ({
 							id: 'label.unstake',
 						})}
 						size='small'
-						disabled={availableStakedToken === 0n}
+						disabled={
+							availableStakedToken === 0n ||
+							!subgraphSyncedInfo.isSynced
+						}
 						onClick={() => setShowUnStakeModal(true)}
 					/>
 					<FlexCenter gap='5px'>

src/components/cards/StakingCards/GIVpowerCard/GIVpowerCardIntro.tsx

@@ -14,8 +14,6 @@ import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import Link from 'next/link';
-import { useQuery } from '@tanstack/react-query';
-import { useAccount } from 'wagmi';
 import links from '@/lib/constants/links';
 import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
 import Routes from '@/lib/constants/Routes';
@@ -24,7 +22,7 @@ import TotalGIVpowerBox from '@/components/modals/StakeLock/TotalGIVpowerBox';
 import { StakeCardState } from '../BaseStakingCard/BaseStakingCard';
 import { useStakingPool } from '@/hooks/useStakingPool';
 import config from '@/configuration';
-import { fetchSubgraphData } from '@/services/subgraph.service';
+import { useSubgraphInfo } from '@/hooks/useSubgraphInfo';
 import type { Dispatch, FC, SetStateAction } from 'react';
 
 interface IGIVpowerCardIntro {
@@ -42,13 +40,7 @@ const GIVpowerCardIntro: FC<IGIVpowerCardIntro> = ({
 		config.EVM_NETWORKS_CONFIG[poolNetwork].GIVPOWER ||
 			config.GNOSIS_CONFIG.GIVPOWER,
 	);
-	const { chain, address } = useAccount();
-	const currentValues = useQuery({
-		queryKey: ['subgraph', chain?.id, address],
-		queryFn: async () => await fetchSubgraphData(chain?.id, address),
-		enabled: !!chain,
-		staleTime: config.SUBGRAPH_POLLING_INTERVAL,
-	});
+	const currentValues = useSubgraphInfo();
 	const sdh = new SubgraphDataHelper(currentValues.data);
 	const userGIVLocked = sdh.getUserGIVLockedBalance();