Fix(web)/hardcoded price values

web/src/hooks/useCoinPrice.tsx

@@ -0,0 +1,20 @@
+import useSWR from "swr";
+
+const fetchCoinPrice = async (...coinIds) => {
+  const fetchData = async (coinId) => {
+    const response = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}`);
+    const data = await response.json();
+    return data.market_data.current_price.usd;
+  };
+
+  const prices = await Promise.all(coinIds.map(fetchData));
+  return prices;
+};
+
+export const useCoinPrice = (coinIds: string[]) => {
+  const { data: prices, error } = useSWR<number[]>(coinIds, fetchCoinPrice);
+  return {
+    prices,
+    error,
+  };
+};

web/src/layout/Header/navbar/index.tsx

@@ -35,7 +35,6 @@ const Container = styled.div<{ isOpen: boolean }>`
 
 const NavBar: React.FC = () => {
   const [isSolutionsOpen, toggleSolution] = useToggle(false);
-
   const { isOpen } = useOpenContext();
   useLockBodyScroll(isOpen);
 

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

@@ -3,15 +3,16 @@ import styled from "styled-components";
 import { formatUnits, formatEther } from "viem";
 import { useParams } from "react-router-dom";
 import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
+import { useCoinPrice } from "hooks/useCoinPrice";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
-import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import MinStake from "svgs/icons/min-stake.svg";
 import { commify } from "utils/commify";
 import VoteStake from "svgs/icons/vote-stake.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import EthereumIcon from "svgs/icons/ethereum.svg";
+import { isUndefined } from "~src/utils";
 
 const StyledCard = styled.div`
   width: auto;
@@ -25,24 +26,29 @@ const StyledCard = styled.div`
 
 interface IStat {
   title: string;
+  coinId?: number;
   getText: (data: CourtDetailsQuery["court"]) => string;
-  getSubtext: (data: CourtDetailsQuery["court"]) => string;
+  getSubtext: (data: CourtDetailsQuery["court"], coinPrice?: number) => string;
   color: IStatDisplay["color"];
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
 
 const stats: IStat[] = [
   {
     title: "Min Stake",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.minStake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: MinStake,
   },
   {
     title: "Vote Stake",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.minStake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.minStake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: VoteStake,
   },
@@ -55,8 +61,10 @@ const stats: IStat[] = [
   },
   {
     title: "PNK Staked",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.stake, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.stake, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: PNKIcon,
   },
@@ -76,15 +84,19 @@ const stats: IStat[] = [
   },
   {
     title: "ETH paid to Jurors",
-    getText: (data) => commify(formatEther(data?.paidETH)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.paidETH, 18)) * 1600).toFixed(2).toString() + "$",
+    coinId: 1,
+    getText: (data) => commify(formatEther(BigInt(data?.paidETH))),
+    getSubtext: (data, coinPrice) =>
+      (Number(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "blue",
     icon: EthereumIcon,
   },
   {
     title: "PNK redistributed",
+    coinId: 0,
     getText: (data) => commify(formatUnits(data?.paidPNK, 18)),
-    getSubtext: (data) => (parseInt(formatUnits(data?.paidPNK, 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (data, coinPrice) =>
+      (parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: PNKRedistributedIcon,
   },
@@ -93,16 +105,20 @@ const stats: IStat[] = [
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
+  const { prices } = useCoinPrice(["kleros", "ethereum"]);
   return (
     <StyledCard>
-      {stats.map(({ title, getText, getSubtext, color, icon }, i) => (
-        <StatDisplay
-          key={i}
-          {...{ title, color, icon }}
-          text={data ? getText(data.court) : "Fetching..."}
-          subtext={data ? getSubtext(data.court) : "Fetching..."}
-        />
-      ))}
+      {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
+        const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
+        return (
+          <StatDisplay
+            key={i}
+            {...{ title, color, icon }}
+            text={data ? getText(data.court) : "Fetching..."}
+            subtext={data ? getSubtext(data.court, coinPrice) : "Fetching..."}
+          />
+        );
+      })}
     </StyledCard>
   );
 };

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

@@ -9,7 +9,9 @@ import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
 import JurorIcon from "svgs/icons/user.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import { commify } from "utils/commify";
+import { isUndefined } from "utils/index";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
+import { useCoinPrice } from "hooks/useCoinPrice";
 
 const StyledCard = styled(Card)`
   width: auto;
@@ -26,34 +28,40 @@ const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPo
 
 interface IStat {
   title: string;
+  coinId?: number;
   getText: (data: HomePageQuery["counters"]) => string;
-  getSubtext: (data: HomePageQuery["counters"]) => string;
+  getSubtext: (data: HomePageQuery["counters"], coinPrice?: number) => string;
   color: IStatDisplay["color"];
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
 
 const stats: IStat[] = [
   {
     title: "PNK staked",
+    coinId: 0,
     getText: (counters) => commify(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)),
-    getSubtext: (counters) =>
-      (parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (counters, coinPrice) =>
+      (parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "purple",
     icon: PNKIcon,
   },
   {
     title: "ETH Paid to jurors",
+    coinId: 1,
     getText: (counters) => commify(formatEther(getLastOrZero(counters, "paidETH"))),
-    getSubtext: (counters) =>
-      (parseInt(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * 1650).toFixed(2).toString() + "$",
+    getSubtext: (counters, coinPrice) =>
+      (Number(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
     color: "blue",
     icon: EthereumIcon,
   },
   {
     title: "PNK redistributed",
+    coinId: 0,
     getText: (counters) => commify(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)),
-    getSubtext: (counters) =>
-      (parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * 0.029).toFixed(2).toString() + "$",
+    getSubtext: (counters, coinPrice) =>
+      (parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * (coinPrice ?? 0))
+        .toFixed(2)
+        .toString() + "$",
     color: "purple",
     icon: PNKRedistributedIcon,
   },
@@ -74,16 +82,20 @@ const stats: IStat[] = [
 ];
 const Stats = () => {
   const { data } = useHomePageContext();
+  const { prices } = useCoinPrice(["kleros", "ethereum"]);
   return (
     <StyledCard>
-      {stats.map(({ title, getText, getSubtext, color, icon }, i) => (
-        <StatDisplay
-          key={i}
-          {...{ title, color, icon }}
-          text={data ? getText(data["counters"]) : "Fetching..."}
-          subtext={data ? getSubtext(data["counters"]) : "Fetching..."}
-        />
-      ))}
+      {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
+        const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
+        return (
+          <StatDisplay
+            key={i}
+            {...{ title, color, icon }}
+            text={data ? getText(data["counters"]) : "Fetching..."}
+            subtext={data ? getSubtext(data["counters"], coinPrice) : "Fetching..."}
+          />
+        );
+      })}
     </StyledCard>
   );
 };