From 6fa169399a2b3cf4c94c1565edd5d83add35b359 Mon Sep 17 00:00:00 2001
From: nhestrompia <nhestrompia@gmail.com>
Date: Thu, 29 Jun 2023 19:47:10 +0300
Subject: [PATCH] feat(web): migrate price api

---
 web/src/consts/index.ts                     |  3 +++
 web/src/hooks/useCoinPrice.tsx              | 15 +++++----------
 web/src/pages/Courts/CourtDetails/Stats.tsx | 15 ++++++++++++---
 web/src/pages/Home/CourtOverview/Stats.tsx  | 12 ++++++++++--
 4 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/web/src/consts/index.ts b/web/src/consts/index.ts
index 0731a7ce1..8e23a4fcd 100644
--- a/web/src/consts/index.ts
+++ b/web/src/consts/index.ts
@@ -1 +1,4 @@
 export const ONE_BASIS_POINT = 10000n;
+
+export const KLEROS_CONTRACT_ADDRESS = "ethereum:0x93ed3fbe21207ec2e8f2d3c3de6e058cb73bc04d";
+export const WETH_CONTRACT_ADDRESS = "ethereum:0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
diff --git a/web/src/hooks/useCoinPrice.tsx b/web/src/hooks/useCoinPrice.tsx
index 33a132d98..41289ec7d 100644
--- a/web/src/hooks/useCoinPrice.tsx
+++ b/web/src/hooks/useCoinPrice.tsx
@@ -1,18 +1,13 @@
 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;
+const fetchCoinPrices = async (...coinIds) => {
+  const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`);
+  const data = await response.json();
+  return data.coins;
 };
 
 export const useCoinPrice = (coinIds: string[]) => {
-  const { data: prices, error } = useSWR<number[]>(coinIds, fetchCoinPrice);
+  const { data: prices, error } = useSWR(coinIds, fetchCoinPrices);
   return {
     prices,
     error,
diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx
index b5bdc5337..dd250788e 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 { formatUnits, formatEther } from "viem";
 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 "src/consts/index";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import MinStake from "svgs/icons/min-stake.svg";
@@ -12,6 +12,7 @@ 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 { useCoinPrice } from "hooks/useCoinPrice";
 import { isUndefined } from "~src/utils";
 
 const StyledCard = styled.div`
@@ -105,11 +106,19 @@ const stats: IStat[] = [
 const Stats = () => {
   const { id } = useParams();
   const { data } = useCourtDetails(id);
-  const { prices } = useCoinPrice(["kleros", "ethereum"]);
+  const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]);
+
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
+        let coinPrice;
+        if (!isUndefined(pricesData)) {
+          if (coinId === 0) {
+            coinPrice = pricesData[KLEROS_CONTRACT_ADDRESS].price;
+          } else if (coinId === 1) {
+            coinPrice = pricesData[WETH_CONTRACT_ADDRESS].price;
+          }
+        }
         return (
           <StatDisplay
             key={i}
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
index d2c49fd6f..6fdfe9213 100644
--- a/web/src/pages/Home/CourtOverview/Stats.tsx
+++ b/web/src/pages/Home/CourtOverview/Stats.tsx
@@ -8,6 +8,7 @@ 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 "src/consts/index";
 import { commify } from "utils/commify";
 import { isUndefined } from "utils/index";
 import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
@@ -82,11 +83,18 @@ const stats: IStat[] = [
 ];
 const Stats = () => {
   const { data } = useHomePageContext();
-  const { prices } = useCoinPrice(["kleros", "ethereum"]);
+  const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]);
   return (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
-        const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
+        let coinPrice;
+        if (!isUndefined(pricesData)) {
+          if (coinId === 0) {
+            coinPrice = pricesData[KLEROS_CONTRACT_ADDRESS].price;
+          } else if (coinId === 1) {
+            coinPrice = pricesData[WETH_CONTRACT_ADDRESS].price;
+          }
+        }
         return (
           <StatDisplay
             key={i}