From 59f19b358e5954fcf71df2a7d2aea44dd7f6b7af Mon Sep 17 00:00:00 2001 From: nhestrompia Date: Mon, 3 Jul 2023 23:04:35 +0300 Subject: [PATCH 1/2] fix(web): dashboard-juror-rewards --- web/src/hooks/queries/useJurorRewardsQuery.ts | 23 ++++++ .../Dashboard/JurorInfo/JurorRewards.tsx | 74 +++++++++++++++++-- web/src/pages/Home/index.tsx | 6 +- web/src/utils/date.ts | 5 ++ 4 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 web/src/hooks/queries/useJurorRewardsQuery.ts diff --git a/web/src/hooks/queries/useJurorRewardsQuery.ts b/web/src/hooks/queries/useJurorRewardsQuery.ts new file mode 100644 index 000000000..38b6eb079 --- /dev/null +++ b/web/src/hooks/queries/useJurorRewardsQuery.ts @@ -0,0 +1,23 @@ +import useSWR from "swr"; +import { gql } from "graphql-request"; + +const jurorRewardsQuery = gql` + query JurorStakedCourtsQuery($address: ID!) { + user(id: $address) { + shifts { + tokenAmount + ethAmount + } + } + } +`; + +export const useJurorRewardsQuery = (address: string): { data: typeof result; error: any; isValidating: boolean } => { + const { data, error, isValidating } = useSWR({ + query: jurorRewardsQuery, + variables: { address }, + }); + + const result = data ? data : undefined; + return { data: result, error, isValidating }; +}; diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx index 8f1f6e7ce..e8e1e92a7 100644 --- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx @@ -1,8 +1,20 @@ 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 { useJurorRewardsQuery } from "hooks/queries/useJurorRewardsQuery"; +import { useCoinPrice } from "hooks/useCoinPrice"; +interface IReward { + token: "ETH" | "PNK"; + coinId: number; + getAmount: (amount: bigint) => string; + getValue: (amount: bigint, coinPrice?: number) => string; +} const Container = styled.div` display: flex; flex-direction: column; @@ -16,15 +28,63 @@ 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", + coinId: 1, + getAmount: (amount) => Number(formatEther(amount)).toFixed(3).toString(), + getValue: (amount, coinPrice) => (Number(formatEther(amount)) * (coinPrice ?? 0)).toFixed(2).toString(), + }, + { + token: "PNK", + coinId: 0, + getAmount: (amount) => Number(formatUnits(amount, 18)).toFixed(3).toString(), + getValue: (amount, coinPrice) => (Number(formatUnits(amount, 18)) * (coinPrice ?? 0)).toFixed(2).toString(), + }, +]; + +const calculateTotalReward = (coinId: number, data: any) => { + const total = + data && + data.user.shifts + .map((shift) => parseInt(coinId === 0 ? shift.tokenAmount : shift.ethAmount)) + .reduce((acc, curr) => acc + curr, 0); + return total; +}; + const Coherency: React.FC = () => { + const { address } = useAccount(); + const { data } = useJurorRewardsQuery((address ?? "").toLowerCase()); + const { prices: pricesData } = useCoinPrice([KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS]); + return ( - - - - - - - + <> + {address && ( + + + + + + {rewards.map(({ token, coinId, getValue, getAmount }, i) => { + const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined; + const totalReward = calculateTotalReward(coinId, data); + return ( + + ); + })} + + )} + ); }; diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index ab61728c1..04a215007 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -4,6 +4,7 @@ import CourtOverview from "./CourtOverview"; import LatestCases from "./LatestCases"; import Community from "./Community"; import { HomePageProvider } from "hooks/useHomePageContext"; +import { getOneYearAgoTimestamp } from "utils/date"; const Container = styled.div` width: 100%; @@ -12,11 +13,6 @@ const Container = styled.div` padding: 32px; `; -const getOneYearAgoTimestamp: () => number = () => { - const currentTime = new Date().getTime() / 1000; - return currentTime - 31556926; // One year in seconds -}; - const Home: React.FC = () => ( diff --git a/web/src/utils/date.ts b/web/src/utils/date.ts index 9a879127d..c0d586ac4 100644 --- a/web/src/utils/date.ts +++ b/web/src/utils/date.ts @@ -14,3 +14,8 @@ export function secondsToDayHourMinute(seconds: number): string { const s = seconds % 60; return d > 0 ? `${d}d ${h}h ${m}m` : `${h}h ${m}m ${s}s`; } + +export function getOneYearAgoTimestamp(): number { + const currentTime = new Date().getTime() / 1000; + return currentTime - 31536000; // One year in seconds +} From 79e0124b626c619a02ac514d26c326c754fffa73 Mon Sep 17 00:00:00 2001 From: nhestrompia Date: Mon, 3 Jul 2023 23:12:48 +0300 Subject: [PATCH 2/2] fix: code smells --- .../pages/Dashboard/JurorInfo/JurorRewards.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx index e8e1e92a7..87bd0be95 100644 --- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx @@ -49,11 +49,10 @@ const rewards: IReward[] = [ ]; const calculateTotalReward = (coinId: number, data: any) => { - const total = - data && - data.user.shifts - .map((shift) => parseInt(coinId === 0 ? shift.tokenAmount : shift.ethAmount)) - .reduce((acc, curr) => acc + curr, 0); + const total = data?.user.shifts + .map((shift) => parseInt(coinId === 0 ? shift.tokenAmount : shift.ethAmount)) + .reduce((acc, curr) => acc + curr, 0); + return total; }; @@ -70,12 +69,12 @@ const Coherency: React.FC = () => { - {rewards.map(({ token, coinId, getValue, getAmount }, i) => { - const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined; + {rewards.map(({ token, coinId, getValue, getAmount }) => { + const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined; const totalReward = calculateTotalReward(coinId, data); return (