From c8c1026c9e16bb4a9f0d7a5938b340819914db2e Mon Sep 17 00:00:00 2001 From: Nikhil <32412967+nikhilverma360@users.noreply.github.com> Date: Tue, 28 May 2024 10:57:57 +0530 Subject: [PATCH 1/4] refactor(web): implemented refetch interval --- web/src/components/Popup/Description/StakeWithdraw.tsx | 3 ++- web/src/consts/index.ts | 2 ++ web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx | 5 ++++- .../Courts/CourtDetails/StakePanel/InputDisplay.tsx | 7 ++++--- .../Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx | 5 +++-- .../CourtDetails/StakePanel/StakeWithdrawButton.tsx | 9 +++++---- 6 files changed, 20 insertions(+), 11 deletions(-) diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx index ac3a38f1e..ca6029501 100644 --- a/web/src/components/Popup/Description/StakeWithdraw.tsx +++ b/web/src/components/Popup/Description/StakeWithdraw.tsx @@ -6,6 +6,7 @@ import { useAccount } from "wagmi"; import KlerosLogo from "svgs/icons/kleros.svg"; +import { REFETCH_INTERVAL } from "consts/index"; import { useReadSortitionModuleGetJurorBalance } from "hooks/contracts/generated"; import { isUndefined } from "utils/index"; @@ -76,10 +77,10 @@ const AmountStakedOrWithdrawn: React.FC = ({ pnkStaked const StakeWithdraw: React.FC = ({ pnkStaked, courtName, isStake, courtId }) => { const { address } = useAccount(); - // TODO refetch const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({ query: { enabled: !isUndefined(address) && !isUndefined(courtId), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x", BigInt(courtId)], }); diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts index 19cb62537..db1fce13c 100644 --- a/web/src/consts/index.ts +++ b/web/src/consts/index.ts @@ -6,6 +6,8 @@ export { ArbitratorTypes }; export const ONE_BASIS_POINT = 10000n; +export const REFETCH_INTERVAL = 10000; + export const IPFS_GATEWAY = import.meta.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link"; export const HERMES_TELEGRAM_BOT_URL = import.meta.env.REACT_APP_HERMES_TELEGRAM_BOT_URL || "https://t.me/HermesTheKlerosV2MessengerBot"; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx index 9a40c6284..77d3329f4 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx @@ -7,6 +7,7 @@ import { useAccount, useBalance, usePublicClient } from "wagmi"; import { Field, Button } from "@kleros/ui-components-library"; +import { REFETCH_INTERVAL } from "consts/index"; import { useSimulateDisputeKitClassicFundAppeal, useWriteDisputeKitClassicFundAppeal } from "hooks/contracts/generated"; import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext"; import { useParsedAmount } from "hooks/useParsedAmount"; @@ -83,8 +84,10 @@ interface IFund { const Fund: React.FC = ({ amount, setAmount, setIsOpen }) => { const needFund = useNeedFund(); const { address, isDisconnected } = useAccount(); - // TODO refetch on block const { data: balance } = useBalance({ + query: { + refetchInterval: REFETCH_INTERVAL, + }, address, }); const publicClient = usePublicClient(); diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index b386ff1e0..46789e461 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -5,6 +5,7 @@ import { useParams } from "react-router-dom"; import { useDebounce } from "react-use"; import { useAccount } from "wagmi"; +import { REFETCH_INTERVAL } from "consts/index"; import { useReadSortitionModuleGetJurorBalance, useReadPnkBalanceOf } from "hooks/contracts/generated"; import { useParsedAmount } from "hooks/useParsedAmount"; import { commify, uncommify } from "utils/commify"; @@ -74,21 +75,21 @@ const InputDisplay: React.FC = ({ const { id } = useParams(); const { address } = useAccount(); - // TODO refetch on block + const { data: balance } = useReadPnkBalanceOf({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x"], - // watch: true, }); const parsedBalance = formatPNK(balance ?? 0n, 0, true); const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x", BigInt(id ?? "0")], - // watch: true, }); const parsedStake = formatPNK(jurorBalance?.[2] || 0n, 0, true); const isStaking = useMemo(() => action === ActionType.stake, [action]); diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx index e2070e841..a00e0e6a8 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx @@ -8,6 +8,7 @@ import { useAccount } from "wagmi"; import DiceIcon from "svgs/icons/dice.svg"; import PNKIcon from "svgs/icons/pnk.svg"; +import { REFETCH_INTERVAL } from "consts/index"; import { useReadSortitionModuleGetJurorBalance } from "hooks/contracts/generated"; import { isUndefined } from "utils/index"; @@ -70,13 +71,13 @@ const useCalculateJurorOdds = ( const JurorBalanceDisplay = () => { const { id } = useParams(); const { address } = useAccount(); - // TODO refetch on block + const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x", BigInt(id ?? 0)], - // watch: true, }); const { data: courtDetails } = useCourtDetails(id); const stakedByAllJurors = courtDetails?.court?.stake; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index ae096c2ea..7bca542b4 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -5,6 +5,7 @@ import { useAccount, usePublicClient } from "wagmi"; import { Button } from "@kleros/ui-components-library"; +import { REFETCH_INTERVAL } from "consts/index"; import { klerosCoreAddress, useSimulateKlerosCoreSetStake, @@ -48,27 +49,27 @@ const StakeWithdrawButton: React.FC = ({ const { id } = useParams(); const { address } = useAccount(); const { data: courtDetails } = useCourtDetails(id); - // TODO refetch on block + const { data: balance } = useReadPnkBalanceOf({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address!], - // watch: true, }); const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x", BigInt(id ?? 0)], - // watch: true, }); const { data: allowance } = useReadPnkAllowance({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x", klerosCoreAddress[421614]], - // watch: true, }); const publicClient = usePublicClient(); From fb71bf45a8c064642c41f58e961d790d7ca277d6 Mon Sep 17 00:00:00 2001 From: Nikhil <32412967+nikhilverma360@users.noreply.github.com> Date: Tue, 28 May 2024 11:00:00 +0530 Subject: [PATCH 2/4] refactor(web): implemented refetch interval --- web/src/pages/Resolver/Parameters/Jurors.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index 940261398..e2c1bc20a 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -5,6 +5,7 @@ import { DisplaySmall, Field } from "@kleros/ui-components-library"; import ETH from "svgs/icons/eth.svg"; +import { REFETCH_INTERVAL } from "consts/index"; import { useNewDisputeContext } from "context/NewDisputeContext"; import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated"; import { formatETH } from "utils/format"; @@ -39,13 +40,13 @@ const StyledDisplay = styled(DisplaySmall)` const Jurors: React.FC = () => { const { disputeData, setDisputeData } = useNewDisputeContext(); - // TODO refetch on block + const { data } = useReadKlerosCoreArbitrationCost({ query: { enabled: !isUndefined(disputeData.numberOfJurors) && !Number.isNaN(disputeData.numberOfJurors), + refetchInterval: REFETCH_INTERVAL, }, args: [prepareArbitratorExtradata(disputeData.courtId ?? "", disputeData.numberOfJurors ?? "")], - // watch: true, }); const arbitrationFee = formatETH(data ?? BigInt(0), 5); From a769bbb08c65012cf8d312a463178f5d8b7c7505 Mon Sep 17 00:00:00 2001 From: Nikhil <32412967+nikhilverma360@users.noreply.github.com> Date: Tue, 28 May 2024 11:03:58 +0530 Subject: [PATCH 3/4] refactor(web): remove extra line --- web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx | 1 - .../pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx | 1 - .../pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx | 1 - 3 files changed, 3 deletions(-) diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx index 46789e461..6613bc107 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx @@ -75,7 +75,6 @@ const InputDisplay: React.FC = ({ const { id } = useParams(); const { address } = useAccount(); - const { data: balance } = useReadPnkBalanceOf({ query: { enabled: !isUndefined(address), diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx index a00e0e6a8..c86499778 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/JurorStakeDisplay.tsx @@ -71,7 +71,6 @@ const useCalculateJurorOdds = ( const JurorBalanceDisplay = () => { const { id } = useParams(); const { address } = useAccount(); - const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({ query: { enabled: !isUndefined(address), diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 7bca542b4..d9b48d2bc 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -49,7 +49,6 @@ const StakeWithdrawButton: React.FC = ({ const { id } = useParams(); const { address } = useAccount(); const { data: courtDetails } = useCourtDetails(id); - const { data: balance } = useReadPnkBalanceOf({ query: { enabled: !isUndefined(address), From f2540d80ca66e852f13faf12606c5dc684912f77 Mon Sep 17 00:00:00 2001 From: Nikhil <32412967+nikhilverma360@users.noreply.github.com> Date: Tue, 28 May 2024 19:09:59 +0530 Subject: [PATCH 4/4] refactor(web): implemented refetch interval --- web/src/components/ClaimPnkButton.tsx | 3 ++- web/src/components/Verdict/FinalDecision.tsx | 7 +++++-- web/src/consts/index.ts | 2 +- web/src/hooks/useVotingContext.tsx | 3 ++- web/src/pages/Resolver/Parameters/Jurors.tsx | 1 - 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/web/src/components/ClaimPnkButton.tsx b/web/src/components/ClaimPnkButton.tsx index 84109065d..04f6a3698 100644 --- a/web/src/components/ClaimPnkButton.tsx +++ b/web/src/components/ClaimPnkButton.tsx @@ -8,6 +8,7 @@ import { Button } from "@kleros/ui-components-library"; import FaucetIcon from "svgs/icons/faucet.svg"; import { DEFAULT_CHAIN } from "consts/chains"; +import { REFETCH_INTERVAL } from "consts/index"; import { simulatePnkFaucet, useReadPnkBalanceOf, @@ -26,12 +27,12 @@ const ClaimPnkButton: React.FC = () => { const [isPopupOpen, setIsPopupOpen] = useState(false); const [hash, setHash] = useState<`0x${string}` | undefined>(); - // TODO watch const chainId = useChainId(); const { address } = useAccount(); const { data: claimed } = useReadPnkFaucetWithdrewAlready({ query: { enabled: !isUndefined(address), + refetchInterval: REFETCH_INTERVAL, }, args: [address ?? "0x00"], }); diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index e1d7bb00f..e077d1169 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -7,6 +7,7 @@ import { useAccount } from "wagmi"; import ArrowIcon from "assets/svgs/icons/arrow.svg"; +import { REFETCH_INTERVAL } from "consts/index"; import { Periods } from "consts/periods"; import { useReadKlerosCoreCurrentRuling } from "hooks/contracts/generated"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; @@ -76,8 +77,10 @@ const FinalDecision: React.FC = ({ arbitrable }) => { const ruled = disputeDetails?.dispute?.ruled ?? false; const periodIndex = Periods[disputeDetails?.dispute?.period ?? "evidence"]; const navigate = useNavigate(); - // TODO block - const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({ args: [BigInt(id ?? 0)] }); + const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({ + query: { refetchInterval: REFETCH_INTERVAL }, + args: [BigInt(id ?? 0)], + }); const currentRuling = Number(currentRulingArray?.[0]); const answer = populatedDisputeData?.answers?.[currentRuling! - 1]; const buttonText = useMemo(() => { diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts index db1fce13c..287a7b131 100644 --- a/web/src/consts/index.ts +++ b/web/src/consts/index.ts @@ -6,7 +6,7 @@ export { ArbitratorTypes }; export const ONE_BASIS_POINT = 10000n; -export const REFETCH_INTERVAL = 10000; +export const REFETCH_INTERVAL = 5000; export const IPFS_GATEWAY = import.meta.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link"; export const HERMES_TELEGRAM_BOT_URL = diff --git a/web/src/hooks/useVotingContext.tsx b/web/src/hooks/useVotingContext.tsx index 33bc5392c..fa92bf09c 100644 --- a/web/src/hooks/useVotingContext.tsx +++ b/web/src/hooks/useVotingContext.tsx @@ -3,6 +3,7 @@ import React, { useContext, createContext, useMemo } from "react"; import { useParams } from "react-router-dom"; import { useAccount } from "wagmi"; +import { REFETCH_INTERVAL } from "consts/index"; import { useReadDisputeKitClassicIsVoteActive } from "hooks/contracts/generated"; import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery"; import { useDrawQuery } from "hooks/queries/useDrawQuery"; @@ -34,10 +35,10 @@ export const VotingContextProvider: React.FC<{ children: React.ReactNode }> = ({ const { data: drawData, isLoading } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id); const roundId = disputeData?.dispute?.currentRoundIndex; const voteId = drawData?.draws?.[0]?.voteIDNum; - // TODO watch const { data: hasVoted } = useReadDisputeKitClassicIsVoteActive({ query: { enabled: !isUndefined(roundId) && !isUndefined(voteId), + refetchInterval: REFETCH_INTERVAL, }, args: [BigInt(id ?? 0), roundId, voteId], }); diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index e2c1bc20a..189a49611 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -40,7 +40,6 @@ const StyledDisplay = styled(DisplaySmall)` const Jurors: React.FC = () => { const { disputeData, setDisputeData } = useNewDisputeContext(); - const { data } = useReadKlerosCoreArbitrationCost({ query: { enabled: !isUndefined(disputeData.numberOfJurors) && !Number.isNaN(disputeData.numberOfJurors),