Fix(web): refetch graph data onblock

web/src/app.tsx

@@ -3,14 +3,14 @@ import { SWRConfig } from "swr";
 import { request } from "graphql-request";
 import { Routes, Route } from "react-router-dom";
 import "react-loading-skeleton/dist/skeleton.css";
+import "react-toastify/dist/ReactToastify.css";
 import Web3Provider from "context/Web3Provider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
-import "react-toastify/dist/ReactToastify.css";
 
 const fetcherBuilder =
   (url: string) =>

web/src/context/Web3Provider.tsx

@@ -11,7 +11,7 @@ import { useTheme } from "styled-components";
 const chains = [arbitrumGoerli, gnosisChiado];
 const projectId = process.env.WALLETCONNECT_PROJECT_ID ?? "6efaa26765fa742153baf9281e218217";
 
-const { publicClient } = configureChains(chains, [
+const { publicClient, webSocketPublicClient } = configureChains(chains, [
   alchemyProvider({ apiKey: process.env.ALCHEMY_API_KEY ?? "" }),
   jsonRpcProvider({
     rpc: () => ({
@@ -25,6 +25,7 @@ const wagmiConfig = createConfig({
   autoConnect: false,
   connectors: w3mConnectors({ projectId, version: 1, chains }),
   publicClient,
+  webSocketPublicClient,
 });
 
 const ethereumClient = new EthereumClient(wagmiConfig, chains);
@@ -42,7 +43,8 @@ const Web3Provider: React.FC<{ children: React.ReactNode }> = ({ children }) =>
           "--w3m-background-color": theme.primaryPurple,
           "--w3m-overlay-background-color": "rgba(0, 0, 0, 0.6)",
           "--w3m-overlay-backdrop-filter": "blur(3px)",
-          "--w3m-logo-image-url": "https://github.com/kleros/kleros-v2/blob/feat(web)/wallet-connect-themes/docs/kleros-logo-white.png?raw=true",
+          "--w3m-logo-image-url":
+            "https://github.com/kleros/kleros-v2/blob/feat(web)/wallet-connect-themes/docs/kleros-logo-white.png?raw=true",
           "--w3m-color-bg-1": theme.lightBackground,
         }}
         {...{ projectId, ethereumClient }}

web/src/hooks/queries/useClassicAppealQuery.ts

@@ -1,5 +1,5 @@
-import useSWR from "swr";
 import { graphql } from "src/graphql";
+import { useSWRBlock } from "hooks/useSWRBlock";
 import { ClassicAppealQuery } from "src/graphql/graphql";
 export type { ClassicAppealQuery };
 
@@ -30,7 +30,7 @@ const classicAppealQuery = graphql(`
 `);
 
 export const useClassicAppealQuery = (id?: string | number) => {
-  return useSWR<ClassicAppealQuery>(() =>
+  return useSWRBlock<ClassicAppealQuery>(() =>
     typeof id !== "undefined"
       ? {
           query: classicAppealQuery,

web/src/hooks/queries/useCourtDetails.ts

@@ -1,5 +1,5 @@
-import useSWR from "swr";
 import { graphql } from "src/graphql";
+import { useSWRBlock } from "hooks/useSWRBlock";
 import { CourtDetailsQuery } from "src/graphql/graphql";
 export type { CourtDetailsQuery };
 
@@ -19,7 +19,7 @@ const courtDetailsQuery = graphql(`
 `);
 
 export const useCourtDetails = (id?: string) => {
-  return useSWR<CourtDetailsQuery>(
+  return useSWRBlock<CourtDetailsQuery>(
     id
       ? {
           query: courtDetailsQuery,

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -1,5 +1,5 @@
-import useSWR from "swr";
 import { graphql } from "src/graphql";
+import { useSWRBlock } from "hooks/useSWRBlock";
 import { DisputeDetailsQuery } from "src/graphql/graphql";
 export type { DisputeDetailsQuery };
 
@@ -27,7 +27,7 @@ const disputeDetailsQuery = graphql(`
 `);
 
 export const useDisputeDetailsQuery = (id?: string | number) => {
-  return useSWR<DisputeDetailsQuery>(() =>
+  return useSWRBlock<DisputeDetailsQuery>(() =>
     typeof id !== "undefined"
       ? {
           query: disputeDetailsQuery,

web/src/hooks/queries/useEvidences.ts

@@ -1,6 +1,6 @@
-import useSWR from "swr";
 import { graphql } from "src/graphql";
 import { EvidencesQuery } from "src/graphql/graphql";
+import { useSWRBlock } from "hooks/useSWRBlock";
 import { isUndefined } from "utils/index";
 export type { EvidencesQuery };
 
@@ -17,7 +17,7 @@ const evidencesQuery = graphql(`
 `);
 
 export const useEvidences = (evidenceGroup?: string) => {
-  return useSWR<EvidencesQuery>(() =>
+  return useSWRBlock<EvidencesQuery>(() =>
     !isUndefined(evidenceGroup)
       ? {
           query: evidencesQuery,

web/src/hooks/useSWRBlock.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import useSWR, { Key } from "swr";
+import { useWebSocketPublicClient } from "wagmi";
+
+export const useSWRBlock = <T>(key: Key) => {
+  const publicClient = useWebSocketPublicClient();
+  const swrResult = useSWR<T>(key);
+  useEffect(() => {
+    const unwatch = publicClient?.watchBlocks({
+      onBlock: () => swrResult.mutate(),
+    });
+    return () => unwatch?.();
+  }, [publicClient, swrResult]);
+  return swrResult;
+};