refactor: no more hardcoded contract address nor network config, rely on wagmi and viem

Author: jaybuidl

cspell.json

@@ -14,6 +14,7 @@
     "codegen",
     "commify",
     "commitlint",
+    "consts",
     "COOLDOWN",
     "datetime",
     "devnet",
@@ -33,6 +34,7 @@
     "solhint",
     "typechain",
     "Unslashed",
+    "viem",
     "wagmi"
   ],
   "ignoreWords": [],

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}
     />
   );

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);

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;

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;
+};

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>

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();

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 (
     <>

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