feat(web): create new query for juror stakes, change whole structure of courts index and courtcard

Author: kemuru

web/src/hooks/queries/useJurorStakeDetailsQuery.ts

@@ -0,0 +1,28 @@
+import { graphql } from "src/graphql";
+import { JurorStakeDetailsQuery } from "src/graphql/graphql";
+import { useQuery } from "@tanstack/react-query";
+import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper";
+export type { JurorStakeDetailsQuery };
+
+const jurorStakeDetailsQuery = graphql(`
+  query JurorStakeDetails($userId: String) {
+    jurorTokensPerCourts(where: { juror: $userId }) {
+      court {
+        id
+        name
+      }
+      staked
+      locked
+    }
+  }
+`);
+
+export const useJurorStakeDetailsQuery = (userId?: string) => {
+  const isEnabled = userId !== undefined;
+
+  return useQuery<JurorStakeDetailsQuery>({
+    queryKey: ["refetchOnBlock", `jurorStakeDetails${userId}`],
+    enabled: isEnabled,
+    queryFn: async () => await graphqlQueryFnHelper(jurorStakeDetailsQuery, { userId }),
+  });
+};

web/src/pages/Dashboard/Courts/CourtCard.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
-import { useAccount } from "wagmi";
 import { formatUnits } from "viem";
 import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
-import { isUndefined } from "utils/index";
-import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
 
 const Card = styled(_Card)`
   display: flex;
@@ -71,38 +68,30 @@ const LockedStake = styled.div`
 `;
 
 interface ICourtCard {
-  id: string;
   name: string;
+  stake: bigint;
+  lockedStake: bigint;
 }
 
-const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
-  const { address } = useAccount();
-  const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
-    enabled: !isUndefined(address),
-    args: [address!, BigInt(id)],
-    watch: true,
-  });
+const CourtCard: React.FC<ICourtCard> = ({ name, stake, lockedStake }) => {
+  const formattedStake = formatUnits(stake, 18);
+  const formattedLockedStake = formatUnits(lockedStake, 18);
 
-  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 ? (
+  return (
     <Card>
       <CourtName>
         <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
       </CourtName>
       <StakesContainer>
         <Stake>
-          <label>{`${formatedStake} PNK`}</label>
+          <label>{`${formattedStake} PNK`}</label>
         </Stake>
         <LockedStake>
-          <label>{`${formatedLockedStake} PNK`}</label>
+          <label>{`${formattedLockedStake} PNK`}</label>
         </LockedStake>
       </StakesContainer>
     </Card>
-  ) : null;
+  );
 };
 
 export default CourtCard;

web/src/pages/Dashboard/Courts/index.tsx

@@ -1,9 +1,8 @@
 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 { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
+import Skeleton from "react-loading-skeleton";
 import CourtCard from "./CourtCard";
 import Header from "./Header";
 
@@ -30,22 +29,33 @@ const CourtCardsContainer = styled.div`
   z-index: 0;
 `;
 
+const StyledLabel = styled.label`
+  display: flex;
+  font-size: 16px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
 const Courts: React.FC = () => {
   const { address } = useAccount();
-  const { data } = useUserQuery(address?.toLowerCase() as `0x${string}`);
-  const user = getFragment(userFragment, data?.user);
+  const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(address?.toLowerCase() as `0x${string}`);
+  const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked, locked }) => staked > 0 || locked > 0);
+  const isStaked = stakedCourts && stakedCourts.length > 0;
 
   return (
     <Container>
       <h1> My Courts </h1>
-      <Divider />
-      {!isUndefined(data) ? (
+      {isLoading ? <Skeleton /> : null}
+      {!isStaked && !isLoading ? <StyledLabel>You are not staked in any court</StyledLabel> : null}
+      {isStaked && !isLoading ? (
         <>
+          <Divider />
           <Header />
           <CourtCardsContainer>
-            {user?.tokens?.map(({ court: { id, name } }) => {
-              return <CourtCard key={id} id={id} name={name ?? ""} />;
-            })}
+            {stakeData?.jurorTokensPerCourts
+              ?.filter(({ staked, locked }) => staked > 0 || locked > 0)
+              .map(({ court: { id, name }, staked, locked }) => (
+                <CourtCard key={id} name={name ?? ""} stake={staked} lockedStake={locked} />
+              ))}
           </CourtCardsContainer>
         </>
       ) : null}