From 3510cf43db2db7009dd7a89912ea4948e17bae53 Mon Sep 17 00:00:00 2001
From: jaybuidl <jb@kleros.io>
Date: Fri, 25 Aug 2023 14:55:06 +0800
Subject: [PATCH] refactor: no more hardcoded contract address nor network
 config, rely on wagmi and viem

---
 cspell.json                                   |  2 ++
 web/src/components/ConnectWallet/index.tsx    |  2 +-
 web/src/consts/chains.ts                      | 28 ++++++-------------
 web/src/consts/index.ts                       |  4 ---
 web/src/hooks/useContractAddress.tsx          | 27 ++++++++++++++++++
 web/src/pages/Courts/CourtDetails/Stats.tsx   | 10 ++-----
 web/src/pages/Courts/CourtDetails/index.tsx   |  5 ++--
 .../Dashboard/JurorInfo/JurorRewards.tsx      | 10 ++-----
 web/src/pages/Home/CourtOverview/Stats.tsx    | 10 ++-----
 9 files changed, 51 insertions(+), 47 deletions(-)
 create mode 100644 web/src/hooks/useContractAddress.tsx

diff --git a/cspell.json b/cspell.json
index a1f4e8bf3..395e0e01e 100644
--- a/cspell.json
+++ b/cspell.json
@@ -14,6 +14,7 @@
     "codegen",
     "commify",
     "commitlint",
+    "consts",
     "COOLDOWN",
     "datetime",
     "devnet",
@@ -33,6 +34,7 @@
     "solhint",
     "typechain",
     "Unslashed",
+    "viem",
     "wagmi"
   ],
   "ignoreWords": [],
diff --git a/web/src/components/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx
index 89e44bd03..f1c30a007 100644
--- a/web/src/components/ConnectWallet/index.tsx
+++ b/web/src/components/ConnectWallet/index.tsx
@@ -22,7 +22,7 @@ export const SwitchChainButton: React.FC = () => {
     <Button
       isLoading={isLoading}
       disabled={isLoading}
-      text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].chainName}`}
+      text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
       onClick={handleSwitch}
     />
   );
diff --git a/web/src/consts/chains.ts b/web/src/consts/chains.ts
index b9e4e4437..63c7ab82c 100644
--- a/web/src/consts/chains.ts
+++ b/web/src/consts/chains.ts
@@ -1,23 +1,13 @@
-export const SUPPORTED_CHAINS = {
-  421613: {
-    chainName: "Arbitrum Goerli",
-    nativeCurrency: { name: "ETH", symbol: "ETH", decimals: 18 },
-    rpcUrls: ["https://goerli-rollup.arbitrum.io/rpc"],
-    blockExplorerUrls: ["https://goerli.arbiscan.io/"],
-  },
-};
-
-export const DEFAULT_CHAIN = 421613;
+import { Chain, arbitrumGoerli, gnosisChiado } from "@wagmi/chains";
 
-export const SUPPORTED_CHAINIDS = Object.keys(SUPPORTED_CHAINS).map((x) => parseInt(x));
+export const DEFAULT_CHAIN = arbitrumGoerli.id;
 
-export const QUERY_CHAINS = {
-  10200: {
-    chainName: "Chiado Testnet",
-    nativeCurrency: { name: "xDAI", symbol: "xDAI", decimals: 18 },
-    rpcUrls: ["https://rpc.eu-central-2.gateway.fm/v3/gnosis/archival/chiado"],
-    blockExplorerUrls: ["https://blockscout.chiadochain.net"],
-  },
+export const SUPPORTED_CHAINS: Record<number, Chain> = {
+  [arbitrumGoerli.id]: arbitrumGoerli,
 };
+export const SUPPORTED_CHAIN_IDS = Object.keys(SUPPORTED_CHAINS);
 
-export const QUERY_CHAINIDS = Object.keys(QUERY_CHAINS).map((x) => parseInt(x));
+export const QUERY_CHAINS: Record<number, Chain> = {
+  [gnosisChiado.id]: gnosisChiado,
+};
+export const QUERY_CHAIN_IDS = Object.keys(QUERY_CHAINS);
diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts
index 551c10b0f..a6e7f4a90 100644
--- a/web/src/consts/index.ts
+++ b/web/src/consts/index.ts
@@ -2,10 +2,6 @@ import { version, gitCommitHash, gitCommitShortHash, gitBranch, gitTags, clean }
 
 export const ONE_BASIS_POINT = 10000n;
 
-export const KLEROS_CONTRACT_ADDRESS = "ethereum:0x93ed3fbe21207ec2e8f2d3c3de6e058cb73bc04d";
-export const WETH_CONTRACT_ADDRESS = "ethereum:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
-export const PNK_FAUCET_CONTRACT_ADDRESS = "0x05648Ee14941630a649082e0dA5cb80D29cC9002";
-
 export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY || "https://cdn.kleros.link";
 
 export const GIT_BRANCH = gitBranch;
diff --git a/web/src/hooks/useContractAddress.tsx b/web/src/hooks/useContractAddress.tsx
new file mode 100644
index 000000000..474ce3e78
--- /dev/null
+++ b/web/src/hooks/useContractAddress.tsx
@@ -0,0 +1,27 @@
+import { Abi, PublicClient } from "viem";
+import { usePublicClient } from "wagmi";
+import { GetContractArgs, GetContractResult } from "wagmi/actions";
+import { getPinakionV2, pinakionV2ABI, getWeth, getPnkFaucet, wethABI, pnkFaucetABI } from "./contracts/generated";
+
+type Config = Omit<GetContractArgs<Abi, unknown>, "abi" | "address"> & {
+  chainId?: any;
+};
+
+export const useContractAddress = <TAbi extends Abi>(
+  getter: (c: Config) => GetContractResult<TAbi, PublicClient>
+): GetContractResult<TAbi, PublicClient> => {
+  const publicClient = usePublicClient();
+  return getter({ walletClient: publicClient });
+};
+
+export const usePNKAddress = () => {
+  return useContractAddress<typeof pinakionV2ABI>(getPinakionV2)?.address;
+};
+
+export const useWETHAddress = () => {
+  return useContractAddress<typeof wethABI>(getWeth)?.address;
+};
+
+export const usePNKFaucetAddress = () => {
+  return useContractAddress<typeof pnkFaucetABI>(getPnkFaucet)?.address;
+};
diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx
index 365b68da8..72e73ac54 100644
--- a/web/src/pages/Courts/CourtDetails/Stats.tsx
+++ b/web/src/pages/Courts/CourtDetails/Stats.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "consts/index";
+import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
@@ -93,15 +93,11 @@ const stats: IStat[] = [
   },
 ];
 
-const coinIdToAddress = {
-  0: KLEROS_CONTRACT_ADDRESS,
-  1: WETH_CONTRACT_ADDRESS,
-};
-
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
-  const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]);
+  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
+  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
 
   return (
     <StyledCard>
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
index 5cd77dffd..783027728 100644
--- a/web/src/pages/Courts/CourtDetails/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -7,7 +7,7 @@ import { formatEther } from "viem";
 import { useCourtPolicy } from "queries/useCourtPolicy";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 import { DEFAULT_CHAIN } from "consts/chains";
-import { PNK_FAUCET_CONTRACT_ADDRESS } from "consts/index";
+import { usePNKFaucetAddress } from "hooks/useContractAddress";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
 import { StyledSkeleton } from "components/StyledSkeleton";
@@ -55,8 +55,9 @@ const CourtDetails: React.FC = () => {
     watch: true,
   });
 
+  const faucetAddress = usePNKFaucetAddress();
   const { data: balance } = usePnkBalanceOf({
-    args: [PNK_FAUCET_CONTRACT_ADDRESS],
+    args: [faucetAddress],
     watch: true,
   });
   const { data: walletClient } = useWalletClient();
diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx
index 7c1a35ff8..bcd3bbbc9 100644
--- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx
+++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import styled from "styled-components";
 import { formatUnits, formatEther } from "viem";
 import { useAccount } from "wagmi";
-import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "src/consts/index";
 import TokenRewards from "./TokenRewards";
 import WithHelpTooltip from "../WithHelpTooltip";
 import { isUndefined } from "utils/index";
 import { useUserQuery, UserQuery } from "queries/useUser";
 import { useCoinPrice } from "hooks/useCoinPrice";
+import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 
 interface IReward {
   token: "ETH" | "PNK";
@@ -28,11 +28,6 @@ const tooltipMsg =
   "is coherent with the final ruling receive the Juror Rewards composed of " +
   "arbitration fees (ETH) + PNK redistribution between jurors.";
 
-const coinIdToAddress = {
-  0: KLEROS_CONTRACT_ADDRESS,
-  1: WETH_CONTRACT_ADDRESS,
-};
-
 const rewards: IReward[] = [
   {
     token: "ETH",
@@ -59,7 +54,8 @@ const calculateTotalReward = (coinId: number, data: UserQuery): bigint => {
 const Coherency: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase());
-  const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]);
+  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
+  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
 
   return (
     <>
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
index 48d182948..34aa2d49b 100644
--- a/web/src/pages/Home/CourtOverview/Stats.tsx
+++ b/web/src/pages/Home/CourtOverview/Stats.tsx
@@ -8,11 +8,11 @@ import EthereumIcon from "svgs/icons/ethereum.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
-import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "consts/index";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
 import { useCoinPrice } from "hooks/useCoinPrice";
+import { usePNKAddress, useWETHAddress } from "hooks/useContractAddress";
 
 const StyledCard = styled(Card)`
   width: auto;
@@ -77,14 +77,10 @@ const stats: IStat[] = [
   },
 ];
 
-const coinIdToAddress = {
-  0: KLEROS_CONTRACT_ADDRESS,
-  1: WETH_CONTRACT_ADDRESS,
-};
-
 const Stats = () => {
   const { data } = useHomePageContext();
-  const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]);
+  const coinIdToAddress = [usePNKAddress(), useWETHAddress()];
+  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {