Merge pull request #1009 from kleros/fix(web)/dashboard-juror-rewards

fix(web): dashboard-juror-rewards

Author: alcercu

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 };
+};

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,62 @@ 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?.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 (
-    <Container>
-      <WithHelpTooltip place="bottom" {...{ tooltipMsg }}>
-        <label> Juror Rewards </label>
-      </WithHelpTooltip>
-      <TokenRewards token="ETH" amount="3.66" value="208,783" />
-      <TokenRewards token="PNK" amount="56,000" value="20,783" />
-    </Container>
+    <>
+      {address && (
+        <Container>
+          <WithHelpTooltip place="bottom" {...{ tooltipMsg }}>
+            <label> Juror Rewards </label>
+          </WithHelpTooltip>
+
+          {rewards.map(({ token, coinId, getValue, getAmount }) => {
+            const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined;
+            const totalReward = calculateTotalReward(coinId, data);
+            return (
+              <TokenRewards
+                key={coinId}
+                {...{ token }}
+                amount={data ? getAmount(totalReward) : "Fetching..."}
+                value={data ? getValue(totalReward, coinPrice) : "Fetching..."}
+              />
+            );
+          })}
+        </Container>
+      )}
+    </>
   );
 };
 

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 = () => (
   <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
     <Container>

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
+}