Skip to content

Commit 20e66dc

Browse files
nhestrompianhestrompia
committed
fix: multiple coin price fetching
1 parent f1a9698 commit 20e66dc

File tree

4 files changed

+107
-98
lines changed

4 files changed

+107
-98
lines changed

‎web/src/hooks/useCoinPrice.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import useSWR from "swr";
22

3-
const fetchCoinPrice = async (coinId) => {
4-
console.log("jey", coinId);
5-
const response = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}`);
6-
const data = await response.json();
7-
console.log("🚀 ~ file: useCoinPrice.tsx:7 ~ fetchCoinPrice ~ data:", data);
8-
console.log("🚀 ~ file: useCoinPrice.tsx:8 ~ fetchCoinPrice ~ data:", data.market_data);
9-
return data.market_data.current_price.usd;
3+
const fetchCoinPrice = async (...coinIds) => {
4+
const fetchData = async (coinId) => {
5+
const response = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}`);
6+
const data = await response.json();
7+
return data.market_data.current_price.usd;
8+
};
9+
10+
const prices = await Promise.all(coinIds.map(fetchData));
11+
return prices;
1012
};
1113

1214
export const useCoinPrice = (coinIds: string[]) => {
13-
console.log("2ey");
14-
15-
const { data: prices, error } = useSWR<string[]>(coinIds, fetchCoinPrice);
16-
console.log("wat");
15+
const { data: prices, error } = useSWR<number[]>(coinIds, fetchCoinPrice);
1716
return {
1817
prices,
1918
error,

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ const Container = styled.div<{ isOpen: boolean }>`
3636

3737
const NavBar: React.FC = () => {
3838
const [isSolutionsOpen, toggleSolution] = useToggle(false);
39-
const { prices } = useCoinPrice(["kleros", "ethereum"]);
40-
console.log("🚀 ~ file: index.tsx:40 ~ prices:", prices!);
4139
const { isOpen } = useOpenContext();
4240
useLockBodyScroll(isOpen);
4341

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

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -33,83 +33,83 @@ interface IStat {
3333
icon: React.FC<React.SVGAttributes<SVGElement>>;
3434
}
3535

36-
const Stats = () => {
37-
const stats: IStat[] = [
38-
{
39-
title: "Min Stake",
40-
coinId: 0,
41-
getText: (data) => commify(formatUnits(data?.minStake, 18)),
42-
getSubtext: (data, coinPrice) =>
43-
(parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
44-
color: "purple",
45-
icon: MinStake,
46-
},
47-
{
48-
title: "Vote Stake",
49-
coinId: 0,
50-
getText: (data) => commify(formatUnits(data?.minStake, 18)),
51-
getSubtext: (data, coinPrice) =>
52-
(parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
53-
color: "purple",
54-
icon: VoteStake,
55-
},
56-
{
57-
title: "Active Jurors",
58-
getText: (data) => data?.numberStakedJurors,
59-
getSubtext: () => "",
60-
color: "purple",
61-
icon: PNKRedistributedIcon,
62-
},
63-
{
64-
title: "PNK Staked",
65-
coinId: 0,
66-
getText: (data) => commify(formatUnits(data?.stake, 18)),
67-
getSubtext: (data, coinPrice) =>
68-
(parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
69-
color: "purple",
70-
icon: PNKIcon,
71-
},
72-
{
73-
title: "Cases",
74-
getText: (data) => data?.numberDisputes,
75-
getSubtext: () => "",
76-
color: "orange",
77-
icon: BalanceIcon,
78-
},
79-
{
80-
title: "In Progress",
81-
getText: (data) => data?.numberDisputes,
82-
getSubtext: () => "",
83-
color: "orange",
84-
icon: BalanceIcon,
85-
},
86-
{
87-
title: "ETH paid to Jurors",
88-
coinId: 1,
89-
getText: (data) => commify(formatEther(data?.paidETH)),
90-
getSubtext: (data, coinPrice) =>
91-
(parseInt(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
92-
color: "blue",
93-
icon: EthereumIcon,
94-
},
95-
{
96-
title: "PNK redistributed",
97-
coinId: 0,
98-
getText: (data) => commify(formatUnits(data?.paidPNK, 18)),
99-
getSubtext: (data, coinPrice) =>
100-
(parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
101-
color: "purple",
102-
icon: PNKRedistributedIcon,
103-
},
104-
];
36+
const stats: IStat[] = [
37+
{
38+
title: "Min Stake",
39+
coinId: 0,
40+
getText: (data) => commify(formatUnits(data?.minStake, 18)),
41+
getSubtext: (data, coinPrice) =>
42+
(parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
43+
color: "purple",
44+
icon: MinStake,
45+
},
46+
{
47+
title: "Vote Stake",
48+
coinId: 0,
49+
getText: (data) => commify(formatUnits(data?.minStake, 18)),
50+
getSubtext: (data, coinPrice) =>
51+
(parseInt(formatUnits(data?.minStake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
52+
color: "purple",
53+
icon: VoteStake,
54+
},
55+
{
56+
title: "Active Jurors",
57+
getText: (data) => data?.numberStakedJurors,
58+
getSubtext: () => "",
59+
color: "purple",
60+
icon: PNKRedistributedIcon,
61+
},
62+
{
63+
title: "PNK Staked",
64+
coinId: 0,
65+
getText: (data) => commify(formatUnits(data?.stake, 18)),
66+
getSubtext: (data, coinPrice) =>
67+
(parseInt(formatUnits(data?.stake, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
68+
color: "purple",
69+
icon: PNKIcon,
70+
},
71+
{
72+
title: "Cases",
73+
getText: (data) => data?.numberDisputes,
74+
getSubtext: () => "",
75+
color: "orange",
76+
icon: BalanceIcon,
77+
},
78+
{
79+
title: "In Progress",
80+
getText: (data) => data?.numberDisputes,
81+
getSubtext: () => "",
82+
color: "orange",
83+
icon: BalanceIcon,
84+
},
85+
{
86+
title: "ETH paid to Jurors",
87+
coinId: 1,
88+
getText: (data) => commify(formatEther(data?.paidETH)),
89+
getSubtext: (data, coinPrice) =>
90+
(parseInt(formatUnits(data?.paidETH, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
91+
color: "blue",
92+
icon: EthereumIcon,
93+
},
94+
{
95+
title: "PNK redistributed",
96+
coinId: 0,
97+
getText: (data) => commify(formatUnits(data?.paidPNK, 18)),
98+
getSubtext: (data, coinPrice) =>
99+
(parseInt(formatUnits(data?.paidPNK, 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
100+
color: "purple",
101+
icon: PNKRedistributedIcon,
102+
},
103+
];
105104

105+
const Stats = () => {
106106
const { id } = useParams();
107107
const { data } = useCourtDetails(id);
108108
const { prices } = useCoinPrice(["kleros", "ethereum"]);
109109
return (
110110
<StyledCard>
111111
{stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
112-
const coinPrice = prices && !isUndefined(coinId) ? prices[coinId].usd : undefined;
112+
const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
113113
return (
114114
<StatDisplay
115115
key={i}

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

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
99
import JurorIcon from "svgs/icons/user.svg";
1010
import BalanceIcon from "svgs/icons/law-balance.svg";
1111
import { commify } from "utils/commify";
12+
import { isUndefined } from "utils/index";
1213
import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext";
14+
import { useCoinPrice } from "hooks/useCoinPrice";
1315

1416
const StyledCard = styled(Card)`
1517
width: auto;
@@ -26,34 +28,40 @@ const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPo
2628

2729
interface IStat {
2830
title: string;
31+
coinId?: number;
2932
getText: (data: HomePageQuery["counters"]) => string;
30-
getSubtext: (data: HomePageQuery["counters"]) => string;
33+
getSubtext: (data: HomePageQuery["counters"], coinPrice?: number) => string;
3134
color: IStatDisplay["color"];
3235
icon: React.FC<React.SVGAttributes<SVGElement>>;
3336
}
3437

3538
const stats: IStat[] = [
3639
{
3740
title: "PNK staked",
41+
coinId: 0,
3842
getText: (counters) => commify(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)),
39-
getSubtext: (counters) =>
40-
(parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * 0.029).toFixed(2).toString() + "$",
43+
getSubtext: (counters, coinPrice) =>
44+
(parseInt(formatUnits(getLastOrZero(counters, "stakedPNK"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
4145
color: "purple",
4246
icon: PNKIcon,
4347
},
4448
{
4549
title: "ETH Paid to jurors",
50+
coinId: 1,
4651
getText: (counters) => commify(formatEther(getLastOrZero(counters, "paidETH"))),
47-
getSubtext: (counters) =>
48-
(parseInt(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * 1650).toFixed(2).toString() + "$",
52+
getSubtext: (counters, coinPrice) =>
53+
(parseInt(formatUnits(getLastOrZero(counters, "paidETH"), 18)) * (coinPrice ?? 0)).toFixed(2).toString() + "$",
4954
color: "blue",
5055
icon: EthereumIcon,
5156
},
5257
{
5358
title: "PNK redistributed",
59+
coinId: 0,
5460
getText: (counters) => commify(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)),
55-
getSubtext: (counters) =>
56-
(parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * 0.029).toFixed(2).toString() + "$",
61+
getSubtext: (counters, coinPrice) =>
62+
(parseInt(formatUnits(getLastOrZero(counters, "redistributedPNK"), 18)) * (coinPrice ?? 0))
63+
.toFixed(2)
64+
.toString() + "$",
5765
color: "purple",
5866
icon: PNKRedistributedIcon,
5967
},
@@ -74,16 +82,20 @@ const stats: IStat[] = [
7482
];
7583
const Stats = () => {
7684
const { data } = useHomePageContext();
85+
const { prices } = useCoinPrice(["kleros", "ethereum"]);
7786
return (
7887
<StyledCard>
79-
{stats.map(({ title, getText, getSubtext, color, icon }, i) => (
80-
<StatDisplay
81-
key={i}
82-
{...{ title, color, icon }}
83-
text={data ? getText(data["counters"]) : "Fetching..."}
84-
subtext={data ? getSubtext(data["counters"]) : "Fetching..."}
85-
/>
86-
))}
88+
{stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
89+
const coinPrice = prices && !isUndefined(coinId) ? prices[coinId] : undefined;
90+
return (
91+
<StatDisplay
92+
key={i}
93+
{...{ title, color, icon }}
94+
text={data ? getText(data["counters"]) : "Fetching..."}
95+
subtext={data ? getSubtext(data["counters"], coinPrice) : "Fetching..."}
96+
/>
97+
);
98+
})}
8799
</StyledCard>
88100
);
89101
};

0 commit comments

Comments
 (0)