refactor: useContractAddress() is not concerned with the network anymore

Author: jaybuidl

web/src/consts/coingecko.ts

@@ -0,0 +1,5 @@
+// https://apiguide.coingecko.com/getting-started/10-min-tutorial-guide/1-get-data-by-id-or-address
+export const CoinIds = {
+  ETH: "coingecko:ethereum",
+  PNK: "coingecko:kleros",
+};

web/src/hooks/useCoinPrice.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 
 const fetchCoinPrices = async (...coinIds) => {
-  const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}`);
+  const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`);
   const data = await response.json();
   return data.coins;
 };

web/src/hooks/useContractAddress.tsx

@@ -15,21 +15,13 @@ export const useContractAddress = <TAbi extends Abi>(
 };
 
 export const usePNKAddress = () => {
-  return `ethereum:${useContractAddress<typeof pinakionV2ABI>(getPinakionV2)?.address}`;
+  return useContractAddress<typeof pinakionV2ABI>(getPinakionV2)?.address;
 };
 
 export const useWETHAddress = () => {
-  return `ethereum:${useContractAddress<typeof wethABI>(getWeth)?.address}`;
+  return useContractAddress<typeof wethABI>(getWeth)?.address;
 };
 
 export const usePNKFaucetAddress = () => {
   return useContractAddress<typeof pnkFaucetABI>(getPnkFaucet)?.address;
 };
-
-export const useWETHMainnetAddress = () => {
-  return "ethereum:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
-};
-
-export const usePNKMainnetAddress = () => {
-  return "ethereum:0x93ed3fbe21207ec2e8f2d3c3de6e058cb73bc04d";
-};

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -3,9 +3,9 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKMainnetAddress, useWETHMainnetAddress } from "hooks/useContractAddress";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
+import { CoinIds } from "consts/coingecko";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import { StyledSkeleton } from "components/StyledSkeleton";
 import BalanceIcon from "svgs/icons/law-balance.svg";
@@ -96,14 +96,13 @@ const stats: IStat[] = [
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
-  const coinIdToAddress = [usePNKMainnetAddress(), useWETHMainnetAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
 
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined;
-
+        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
         return (
           <StatDisplay
             key={i}

web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx

@@ -5,9 +5,9 @@ import { useAccount } from "wagmi";
 import TokenRewards from "./TokenRewards";
 import WithHelpTooltip from "../WithHelpTooltip";
 import { isUndefined } from "utils/index";
+import { CoinIds } from "consts/coingecko";
 import { useUserQuery, UserQuery } from "queries/useUser";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKMainnetAddress, useWETHMainnetAddress } from "hooks/useContractAddress";
 
 interface IReward {
   token: "ETH" | "PNK";
@@ -54,8 +54,8 @@ const calculateTotalReward = (coinId: number, data: UserQuery): bigint => {
 const Coherency: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase());
-  const coinIdToAddress = [usePNKMainnetAddress(), useWETHMainnetAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
 
   return (
     <>
@@ -64,7 +64,7 @@ const Coherency: React.FC = () => {
           <label> Juror Rewards </label>
         </WithHelpTooltip>
         {rewards.map(({ token, coinId, getValue, getAmount }) => {
-          const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined;
+          const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId]]?.price : undefined;
           const totalReward = data && calculateTotalReward(coinId, data);
           return (
             <TokenRewards

web/src/pages/Home/CourtOverview/Stats.tsx

@@ -10,9 +10,9 @@ import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
 import { calculateSubtextRender } from "utils/calculateSubtextRender";
+import { CoinIds } from "consts/coingecko";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
 import { useCoinPrice } from "hooks/useCoinPrice";
-import { usePNKMainnetAddress, useWETHMainnetAddress } from "hooks/useContractAddress";
 
 const StyledCard = styled(Card)`
   width: auto;
@@ -79,12 +79,12 @@ const stats: IStat[] = [
 
 const Stats = () => {
   const { data } = useHomePageContext();
-  const coinIdToAddress = [usePNKMainnetAddress(), useWETHMainnetAddress()];
-  const { prices: pricesData } = useCoinPrice(coinIdToAddress);
+  const coinIds = [CoinIds.PNK, CoinIds.ETH];
+  const { prices: pricesData } = useCoinPrice(coinIds);
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined;
+        const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
 
         return (
           <StatDisplay