Merge pull request #1299 from kleros/fix(web)/courts-not-appearing-dashboard

Fix(web): courts section not working on dashboard

Author: alcercu

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>
   );

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;

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,21 @@ 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);
 
   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>
   );
 };