Merge pull request #1592 from kleros/refactor(web)/wagmi-v2-refetch-i…

…nterval

Refactor(web)/wagmi v2 refetch interval

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"],
   });

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<IAmountStakedOrWithdrawn> = ({ pnkStaked
 const StakeWithdraw: React.FC<IStakeWithdraw> = ({ 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)],
   });

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<IFinalDecision> = ({ 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(() => {

web/src/consts/index.ts

@@ -6,6 +6,8 @@ export { ArbitratorTypes };
 
 export const ONE_BASIS_POINT = 10000n;
 
+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 =
   import.meta.env.REACT_APP_HERMES_TELEGRAM_BOT_URL || "https://t.me/HermesTheKlerosV2MessengerBot";

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],
   });

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<IFund> = ({ 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();

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,20 @@ const InputDisplay: React.FC<IInputDisplay> = ({
 
   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]);

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,12 @@ 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;

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,26 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   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();
 

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,12 @@ 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);