From 5fbbc3117d266e4a485323b518f68e8ee69f13c7 Mon Sep 17 00:00:00 2001
From: Aleix <80388279+alcercu@users.noreply.github.com>
Date: Tue, 23 Jan 2024 18:04:26 +0100
Subject: [PATCH 1/5] chore(subgraph): update package version

---
 subgraph/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/subgraph/package.json b/subgraph/package.json
index 642ee3c4a..4d49282f9 100644
--- a/subgraph/package.json
+++ b/subgraph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

From ea7db9878deb6f66bf9e706ee754262f4a999e63 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Mon, 22 Jan 2024 18:11:20 +0530
Subject: [PATCH 2/5] feat(web): add-enhanced-number-display-component

---
 web/src/components/NumberDisplay.tsx          | 19 +++++++++++++++++++
 .../Dashboard/Courts/CourtCard/Stake.tsx      |  8 ++++++--
 web/src/pages/Dashboard/Courts/Header.tsx     |  7 +++++--
 .../Dashboard/JurorInfo/TokenRewards.tsx      |  5 +++--
 .../Home/TopJurors/JurorCard/Rewards.tsx      |  9 +++++++--
 5 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/NumberDisplay.tsx

diff --git a/web/src/components/NumberDisplay.tsx b/web/src/components/NumberDisplay.tsx
new file mode 100644
index 000000000..200839ef3
--- /dev/null
+++ b/web/src/components/NumberDisplay.tsx
@@ -0,0 +1,19 @@
+import { Tooltip } from "@kleros/ui-components-library";
+import React from "react";
+interface INumberDisplay {
+  value: string | number;
+  decimals?: number;
+  place?: "bottom" | "top" | "left" | "right";
+}
+
+const NumberDisplay: React.FC<INumberDisplay> = ({ value, place, decimals = 2 }) => {
+  const parsedValue = Number(value);
+  const formattedValue = parsedValue % 1 !== 0 ? parsedValue.toFixed(decimals) : parsedValue.toFixed(0);
+  return (
+    <Tooltip small text={value.toString()} place={place}>
+      {formattedValue}
+    </Tooltip>
+  );
+};
+
+export default NumberDisplay;
diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
index 71b20e0ac..f0cb6d85a 100644
--- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
+++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { formatUnits } from "viem";
+import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`
   display: flex;
@@ -24,7 +25,7 @@ const StyledLabel = styled.label`
   color: ${({ theme }) => theme.primaryText};
   font-size: 16px;
   align-items: center;
-  gap: 32px;
+  gap: 4px;
 `;
 
 interface IStake {
@@ -37,7 +38,10 @@ const Stake: React.FC<IStake> = ({ stake }) => {
   return (
     <Container>
       <label>Stake</label>
-      <StyledLabel>{`${formattedStake} PNK`}</StyledLabel>
+      <StyledLabel>
+        <NumberDisplay value={formattedStake} />
+        PNK
+      </StyledLabel>
     </Container>
   );
 };
diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx
index a30e5bee2..f3dcfc4a7 100644
--- a/web/src/pages/Dashboard/Courts/Header.tsx
+++ b/web/src/pages/Dashboard/Courts/Header.tsx
@@ -5,6 +5,7 @@ import { formatUnits } from "viem";
 import { isUndefined } from "utils/index";
 import LockerIcon from "svgs/icons/locker.svg";
 import { responsiveSize } from "styles/responsiveSize";
+import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`
   display: flex;
@@ -49,7 +50,7 @@ interface IHeader {
 }
 
 const Header: React.FC<IHeader> = ({ lockedStake }) => {
-  const formattedLockedStake = !isUndefined(lockedStake) && parseFloat(formatUnits(lockedStake, 18)).toFixed(2);
+  const formattedLockedStake = !isUndefined(lockedStake) && formatUnits(lockedStake, 18);
 
   return (
     <Container>
@@ -58,7 +59,9 @@ const Header: React.FC<IHeader> = ({ lockedStake }) => {
         <LockedPnk>
           <StyledLockerIcon />
           <label> Locked Stake: </label>
-          <small>{`${formattedLockedStake} PNK`}</small>
+          <small>
+            <NumberDisplay value={formattedLockedStake.toString()} /> PNK
+          </small>
         </LockedPnk>
       ) : null}
     </Container>
diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
index af6138893..9cf56e924 100644
--- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
+++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import GradientTokenIcons from "components/GradientTokenIcons";
 import { StyledSkeleton } from "components/StyledSkeleton";
+import NumberDisplay from "components/NumberDisplay";
 
 const RewardContainer = styled.div`
   display: flex;
@@ -24,10 +25,10 @@ const TokenRewards: React.FC<ITokenRewards> = ({ token, amount, value }) => {
   return (
     <RewardContainer>
       {token && <GradientTokenIcons icon={token} />}
-      <StyledH1>{amount || <StyledSkeleton width={76} />}</StyledH1>
+      <StyledH1>{amount ? <NumberDisplay value={amount} place="left" /> : <StyledSkeleton width={76} />}</StyledH1>
       <StyledH1>{token}</StyledH1>
       <label>$ </label>
-      <label>{value || <StyledSkeleton width={32} />}</label>
+      <label>{value ? <NumberDisplay value={value} place="right" /> : <StyledSkeleton width={32} />}</label>
     </RewardContainer>
   );
 };
diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
index 71228f581..47d0d789a 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
@@ -5,6 +5,7 @@ import EthIcon from "assets/svgs/icons/eth.svg";
 import PnkIcon from "assets/svgs/icons/kleros.svg";
 import { useUserQuery } from "hooks/queries/useUser";
 import { landscapeStyle } from "styles/landscapeStyle";
+import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`
   display: flex;
@@ -46,10 +47,14 @@ const Rewards: React.FC<IRewards> = ({ address }) => {
 
   return (
     <Container>
-      <StyledLabel>{ethReward}</StyledLabel>
+      <StyledLabel>
+        <NumberDisplay value={ethReward ?? ""} />
+      </StyledLabel>
       <StyledIcon as={EthIcon} />
       <StyledLabel>+</StyledLabel>
-      <StyledLabel>{pnkReward}</StyledLabel>
+      <StyledLabel>
+        <NumberDisplay value={pnkReward ?? ""} />
+      </StyledLabel>
       <StyledIcon as={PnkIcon} />
     </Container>
   );

From b6b9d3a1db306848bb206825b6ac915c328c7064 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 23 Jan 2024 11:41:52 +0530
Subject: [PATCH 3/5] fix(web): remove-decimal-formatting-of-reward-amounts

---
 web/src/utils/jurorRewardConfig.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/utils/jurorRewardConfig.ts b/web/src/utils/jurorRewardConfig.ts
index dcce97751..1a3498fef 100644
--- a/web/src/utils/jurorRewardConfig.ts
+++ b/web/src/utils/jurorRewardConfig.ts
@@ -13,14 +13,14 @@ export 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(),
+    getAmount: (amount) => formatEther(amount),
+    getValue: (amount, coinPrice) => (Number(formatEther(amount)) * (coinPrice ?? 0)).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(),
+    getAmount: (amount) => formatUnits(amount, 18),
+    getValue: (amount, coinPrice) => (Number(formatUnits(amount, 18)) * (coinPrice ?? 0)).toString(),
   },
 ];
 

From f289d79c10b2c4339d90ec130fd446ddef4a96b4 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 23 Jan 2024 12:39:42 +0530
Subject: [PATCH 4/5] feat(web): show-unit-in-Number-dislpay-tooltip

---
 web/src/components/NumberDisplay.tsx          | 20 ++++++++++++++++---
 .../Dashboard/Courts/CourtCard/Stake.tsx      |  3 +--
 web/src/pages/Dashboard/Courts/Header.tsx     |  2 +-
 .../Dashboard/JurorInfo/TokenRewards.tsx      | 10 ++++++----
 .../Home/TopJurors/JurorCard/Rewards.tsx      |  4 ++--
 5 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/web/src/components/NumberDisplay.tsx b/web/src/components/NumberDisplay.tsx
index 200839ef3..cc5d65611 100644
--- a/web/src/components/NumberDisplay.tsx
+++ b/web/src/components/NumberDisplay.tsx
@@ -2,16 +2,30 @@ import { Tooltip } from "@kleros/ui-components-library";
 import React from "react";
 interface INumberDisplay {
   value: string | number;
+  unit?: string;
+  showUnitInDisplay?: boolean;
   decimals?: number;
   place?: "bottom" | "top" | "left" | "right";
+  isCurrency?: boolean; //currency units are shown in front
 }
 
-const NumberDisplay: React.FC<INumberDisplay> = ({ value, place, decimals = 2 }) => {
+const NumberDisplay: React.FC<INumberDisplay> = ({
+  value,
+  unit,
+  place,
+  decimals = 2,
+  showUnitInDisplay = true,
+  isCurrency = false,
+}) => {
   const parsedValue = Number(value);
   const formattedValue = parsedValue % 1 !== 0 ? parsedValue.toFixed(decimals) : parsedValue.toFixed(0);
+  const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
+  const displayValue = isCurrency
+    ? `${showUnitInDisplay ? unit : ""} ${formattedValue}`
+    : `${formattedValue} ${showUnitInDisplay ? unit : ""}`;
   return (
-    <Tooltip small text={value.toString()} place={place}>
-      {formattedValue}
+    <Tooltip small text={tooltipValue} place={place}>
+      {displayValue}
     </Tooltip>
   );
 };
diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
index f0cb6d85a..4ac7e2929 100644
--- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
+++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx
@@ -39,8 +39,7 @@ const Stake: React.FC<IStake> = ({ stake }) => {
     <Container>
       <label>Stake</label>
       <StyledLabel>
-        <NumberDisplay value={formattedStake} />
-        PNK
+        <NumberDisplay value={formattedStake} unit="PNK" />
       </StyledLabel>
     </Container>
   );
diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx
index f3dcfc4a7..ad1ce97bf 100644
--- a/web/src/pages/Dashboard/Courts/Header.tsx
+++ b/web/src/pages/Dashboard/Courts/Header.tsx
@@ -60,7 +60,7 @@ const Header: React.FC<IHeader> = ({ lockedStake }) => {
           <StyledLockerIcon />
           <label> Locked Stake: </label>
           <small>
-            <NumberDisplay value={formattedLockedStake.toString()} /> PNK
+            <NumberDisplay value={formattedLockedStake.toString()} unit="PNK" />
           </small>
         </LockedPnk>
       ) : null}
diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
index 9cf56e924..d91e3f091 100644
--- a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
+++ b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
@@ -25,10 +25,12 @@ const TokenRewards: React.FC<ITokenRewards> = ({ token, amount, value }) => {
   return (
     <RewardContainer>
       {token && <GradientTokenIcons icon={token} />}
-      <StyledH1>{amount ? <NumberDisplay value={amount} place="left" /> : <StyledSkeleton width={76} />}</StyledH1>
-      <StyledH1>{token}</StyledH1>
-      <label>$ </label>
-      <label>{value ? <NumberDisplay value={value} place="right" /> : <StyledSkeleton width={32} />}</label>
+      <StyledH1>
+        {amount ? <NumberDisplay value={amount} unit={token} place="left" /> : <StyledSkeleton width={76} />}
+      </StyledH1>
+      <label>
+        {value ? <NumberDisplay value={value} place="right" unit="$" isCurrency /> : <StyledSkeleton width={32} />}
+      </label>
     </RewardContainer>
   );
 };
diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
index 47d0d789a..7339436fb 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx
@@ -48,12 +48,12 @@ const Rewards: React.FC<IRewards> = ({ address }) => {
   return (
     <Container>
       <StyledLabel>
-        <NumberDisplay value={ethReward ?? ""} />
+        <NumberDisplay value={ethReward ?? ""} unit="ETH" showUnitInDisplay={false} />
       </StyledLabel>
       <StyledIcon as={EthIcon} />
       <StyledLabel>+</StyledLabel>
       <StyledLabel>
-        <NumberDisplay value={pnkReward ?? ""} />
+        <NumberDisplay value={pnkReward ?? ""} unit="PNK" showUnitInDisplay={false} />
       </StyledLabel>
       <StyledIcon as={PnkIcon} />
     </Container>

From ba02db42c7fcec4fe4423eab94544a8bfa4ed945 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 23 Jan 2024 13:25:12 +0530
Subject: [PATCH 5/5] fix(web):
 fix-price-calculation-in-dashboard-juror-rewards

---
 web/src/components/NumberDisplay.tsx | 5 ++---
 web/src/utils/jurorRewardConfig.ts   | 4 +++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/components/NumberDisplay.tsx b/web/src/components/NumberDisplay.tsx
index cc5d65611..825c008a9 100644
--- a/web/src/components/NumberDisplay.tsx
+++ b/web/src/components/NumberDisplay.tsx
@@ -20,9 +20,8 @@ const NumberDisplay: React.FC<INumberDisplay> = ({
   const parsedValue = Number(value);
   const formattedValue = parsedValue % 1 !== 0 ? parsedValue.toFixed(decimals) : parsedValue.toFixed(0);
   const tooltipValue = isCurrency ? `${unit} ${value}` : `${value} ${unit}`;
-  const displayValue = isCurrency
-    ? `${showUnitInDisplay ? unit : ""} ${formattedValue}`
-    : `${formattedValue} ${showUnitInDisplay ? unit : ""}`;
+  const displayUnit = showUnitInDisplay ? unit : "";
+  const displayValue = isCurrency ? `${displayUnit} ${formattedValue}` : `${formattedValue} ${displayUnit}`;
   return (
     <Tooltip small text={tooltipValue} place={place}>
       {displayValue}
diff --git a/web/src/utils/jurorRewardConfig.ts b/web/src/utils/jurorRewardConfig.ts
index 1a3498fef..1f2d8dca5 100644
--- a/web/src/utils/jurorRewardConfig.ts
+++ b/web/src/utils/jurorRewardConfig.ts
@@ -1,6 +1,7 @@
 import { formatUnits, formatEther } from "viem";
 import { isUndefined } from "utils/index";
 import { UserQuery } from "queries/useUser";
+import { CoinIds } from "consts/coingecko";
 
 export interface IReward {
   token: "ETH" | "PNK";
@@ -34,7 +35,8 @@ export const calculateTotalJurorReward = (coinId: number, data: UserQuery): bigi
 
 export const getFormattedRewards = (data: any, pricesData: any) => {
   return rewards.map(({ token, coinId, getValue, getAmount }) => {
-    const coinPrice = !isUndefined(pricesData) ? pricesData[coinId]?.price : undefined;
+    const coinPrice = !isUndefined(pricesData) ? pricesData[CoinIds[token]]?.price : undefined;
+
     const totalReward = data && calculateTotalJurorReward(coinId, data);
     return {
       token,