From e4d4b0a3a59bce2ea3c5bf86ab44d6a6bce10dd8 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 5 Jul 2023 11:51:44 +0200 Subject: [PATCH 1/3] chore(web): make websocket client available --- web/src/context/Web3Provider.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/src/context/Web3Provider.tsx b/web/src/context/Web3Provider.tsx index c8d84508b..dafb15eaf 100644 --- a/web/src/context/Web3Provider.tsx +++ b/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 }} From 4b8b6a0ac04f76189e427a2c084a580843e4bbf5 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 5 Jul 2023 11:52:19 +0200 Subject: [PATCH 2/3] feat(web): add useSWRBlock hook --- web/src/hooks/useSWRBlock.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 web/src/hooks/useSWRBlock.ts diff --git a/web/src/hooks/useSWRBlock.ts b/web/src/hooks/useSWRBlock.ts new file mode 100644 index 000000000..c9f809bd1 --- /dev/null +++ b/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 = (key: Key) => { + const publicClient = useWebSocketPublicClient(); + const swrResult = useSWR(key); + useEffect(() => { + const unwatch = publicClient?.watchBlocks({ + onBlock: () => swrResult.mutate(), + }); + return () => unwatch?.(); + }, [publicClient, swrResult]); + return swrResult; +}; From 2a9a6a83497d8ac725d190e2bc868a5acf799833 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 5 Jul 2023 11:52:53 +0200 Subject: [PATCH 3/3] feat(web): use useSWRBlock to fetch from the subgraph --- web/src/app.tsx | 2 +- web/src/hooks/queries/useClassicAppealQuery.ts | 4 ++-- web/src/hooks/queries/useCourtDetails.ts | 4 ++-- web/src/hooks/queries/useDisputeDetailsQuery.ts | 4 ++-- web/src/hooks/queries/useEvidences.ts | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/web/src/app.tsx b/web/src/app.tsx index 74fe94c03..57494275f 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -3,6 +3,7 @@ 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"; @@ -10,7 +11,6 @@ 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) => diff --git a/web/src/hooks/queries/useClassicAppealQuery.ts b/web/src/hooks/queries/useClassicAppealQuery.ts index fec083e0e..9c7d297cb 100644 --- a/web/src/hooks/queries/useClassicAppealQuery.ts +++ b/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(() => + return useSWRBlock(() => typeof id !== "undefined" ? { query: classicAppealQuery, diff --git a/web/src/hooks/queries/useCourtDetails.ts b/web/src/hooks/queries/useCourtDetails.ts index 152bcc7b9..78701e609 100644 --- a/web/src/hooks/queries/useCourtDetails.ts +++ b/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( + return useSWRBlock( id ? { query: courtDetailsQuery, diff --git a/web/src/hooks/queries/useDisputeDetailsQuery.ts b/web/src/hooks/queries/useDisputeDetailsQuery.ts index 729caddd7..eeb1560b0 100644 --- a/web/src/hooks/queries/useDisputeDetailsQuery.ts +++ b/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(() => + return useSWRBlock(() => typeof id !== "undefined" ? { query: disputeDetailsQuery, diff --git a/web/src/hooks/queries/useEvidences.ts b/web/src/hooks/queries/useEvidences.ts index d65626da0..2c9225e90 100644 --- a/web/src/hooks/queries/useEvidences.ts +++ b/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(() => + return useSWRBlock(() => !isUndefined(evidenceGroup) ? { query: evidencesQuery,