From aa7390ea171c0160ffad2366e4aabe16605d2544 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 25 Oct 2023 12:33:51 +0200
Subject: [PATCH 1/3] fix(web): my courts section not working on dashboard

---
 web/src/pages/Dashboard/Courts/CourtCard.tsx | 45 +++++++++-----------
 web/src/pages/Dashboard/Courts/index.tsx     | 28 ++++++------
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx
index 500cfb0a4..c199929e7 100644
--- a/web/src/pages/Dashboard/Courts/CourtCard.tsx
+++ b/web/src/pages/Dashboard/Courts/CourtCard.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
-import { formatEther } from "viem";
+import { formatUnits } from "viem";
 import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
 import WithHelpTooltip from "../WithHelpTooltip";
 import { isUndefined } from "utils/index";
@@ -33,8 +33,6 @@ const tooltipMsg =
   "The locked stake of incoherent jurors is redistributed as incentives for " +
   "the coherent jurors.";
 
-export const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
-
 interface ICourtCard {
   id: string;
   name: string;
@@ -44,31 +42,30 @@ const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
   const { address } = useAccount();
   const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
     enabled: !isUndefined(address),
-    args: [address, id],
+    args: [address!, BigInt(id)],
     watch: true,
   });
 
-  const stake = format(jurorBalance?.[0]);
-  const lockedStake = format(jurorBalance?.[1]);
+  const stake = jurorBalance?.[0] ?? BigInt(0);
+  const lockedStake = jurorBalance?.[1] ?? BigInt(0);
+  const formatedStake = formatUnits(stake, 18);
+  const formatedLockedStake = formatUnits(lockedStake, 18);
 
-  return (
-    stake !== "0" ||
-    (lockedStake !== "0" && (
-      <Card>
-        <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
-        <ValueContainer>
-          <label> Stake: </label>
-          <small>{`${stake} PNK`}</small>
-        </ValueContainer>
-        <ValueContainer>
-          <WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
-            <label> Locked Stake: </label>
-          </WithHelpTooltip>
-          <small>{`${lockedStake} PNK`}</small>
-        </ValueContainer>
-      </Card>
-    ))
-  );
+  return stake > 0 || lockedStake > 0 ? (
+    <Card>
+      <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
+      <ValueContainer>
+        <label> Stake: </label>
+        <small>{`${formatedStake} PNK`}</small>
+      </ValueContainer>
+      <ValueContainer>
+        <WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
+          <label> Locked Stake: </label>
+        </WithHelpTooltip>
+        <small>{`${formatedLockedStake} PNK`}</small>
+      </ValueContainer>
+    </Card>
+  ) : null;
 };
 
 export default CourtCard;
diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx
index 2c222b483..827ae9c4c 100644
--- a/web/src/pages/Dashboard/Courts/index.tsx
+++ b/web/src/pages/Dashboard/Courts/index.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
+import { useFragment as getFragment } from "src/graphql";
+import { useUserQuery, userFragment } from "queries/useUser";
 import { isUndefined } from "utils/index";
 import CourtCard from "./CourtCard";
-import { useUserQuery } from "queries/useUser";
 
 const Container = styled.div`
   margin-top: 64px;
@@ -22,21 +23,22 @@ const CourtsContainer = styled.div`
 
 const Courts: React.FC = () => {
   const { address } = useAccount();
-  const { data } = useUserQuery(address?.toLowerCase());
+  const { data } = useUserQuery(address?.toLowerCase() as `0x${string}`);
+  const user = getFragment(userFragment, data?.user);
+  console.log(user);
 
   return (
-    <>
-      <Container>
-        <h1> My Courts </h1>
-        {!isUndefined(data) && <hr />}
-        <CourtsContainer>
-          {!isUndefined(data) &&
-            data.user?.tokens?.map(({ court: { id, name } }) => {
+    <Container>
+      <h1> My Courts </h1>
+      {!isUndefined(data) ? <hr /> : null}
+      <CourtsContainer>
+        {!isUndefined(data)
+          ? user?.tokens?.map(({ court: { id, name } }) => {
               return <CourtCard key={id} id={id} name={name ?? ""} />;
-            })}
-        </CourtsContainer>
-      </Container>
-    </>
+            })
+          : null}
+      </CourtsContainer>
+    </Container>
   );
 };
 

From c1857cf94ddc933c37b1cd478285590fbbf08f3d Mon Sep 17 00:00:00 2001
From: Aleix <80388279+alcercu@users.noreply.github.com>
Date: Wed, 25 Oct 2023 12:48:48 +0200
Subject: [PATCH 2/3] chore(web): remove console.log

---
 web/src/pages/Dashboard/Courts/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx
index 827ae9c4c..f82427133 100644
--- a/web/src/pages/Dashboard/Courts/index.tsx
+++ b/web/src/pages/Dashboard/Courts/index.tsx
@@ -25,7 +25,6 @@ const Courts: React.FC = () => {
   const { address } = useAccount();
   const { data } = useUserQuery(address?.toLowerCase() as `0x${string}`);
   const user = getFragment(userFragment, data?.user);
-  console.log(user);
 
   return (
     <Container>

From 4cf47e65f9d1c7c185d5a1b365e57f2d5b9eac44 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Wed, 25 Oct 2023 13:06:07 +0200
Subject: [PATCH 3/3] fix(web): broken import

---
 web/src/components/Popup/Description/StakeWithdraw.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Popup/Description/StakeWithdraw.tsx b/web/src/components/Popup/Description/StakeWithdraw.tsx
index af639ad84..31693d18a 100644
--- a/web/src/components/Popup/Description/StakeWithdraw.tsx
+++ b/web/src/components/Popup/Description/StakeWithdraw.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
-import { isUndefined } from "utils/index";
+import { formatUnits } from "viem";
 import { useAccount } from "wagmi";
+import { isUndefined } from "utils/index";
 import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
-import { format } from "src/pages/Dashboard/Courts/CourtCard";
 import KlerosLogo from "tsx:svgs/icons/kleros.svg";
 
 const Container = styled.div`
@@ -88,7 +88,7 @@ const StakeWithdraw: React.FC<IStakeWithdraw> = ({ pnkStaked, courtName, isStake
 
       <TotalStakeContainer>
         <StyledKlerosLogo /> <MyStakeContainer>My Stake:</MyStakeContainer>{" "}
-        <AmountContainer>{`${format(jurorBalance?.[0])} PNK`} </AmountContainer>
+        <AmountContainer>{`${formatUnits(jurorBalance?.[0] ?? BigInt(0), 18)} PNK`} </AmountContainer>
       </TotalStakeContainer>
     </Container>
   );