feat(web): fix courtcard hardcode values

web/src/graphql/gql.ts

@@ -31,6 +31,8 @@ const documents = {
     types.EvidencesDocument,
   "\n  query HomePage($timeframe: ID) {\n    disputes(first: 3) {\n      id\n    }\n    counters(where: { id_gt: $timeframe }) {\n      id\n      stakedPNK\n      paidETH\n      redistributedPNK\n      activeJurors\n      cases\n    }\n  }\n":
     types.HomePageDocument,
+  "\n  query JurorStakedCourts($id: ID!) {\n    user(id: $id) {\n      tokens {\n        court {\n          id\n          name\n        }\n      }\n    }\n  }\n":
+    types.JurorStakedCourtsDocument,
   "\n  query VotingHistory($disputeID: ID!) {\n    dispute(id: $disputeID) {\n      id\n      rounds {\n        nbVotes\n      }\n      disputeKitDispute {\n        localRounds {\n          ... on ClassicRound {\n            totalVoted\n            votes {\n              id\n              juror {\n                id\n              }\n              ... on ClassicVote {\n                choice\n                justification\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n":
     types.VotingHistoryDocument,
 };
@@ -103,6 +105,12 @@ export function graphql(
 export function graphql(
   source: "\n  query HomePage($timeframe: ID) {\n    disputes(first: 3) {\n      id\n    }\n    counters(where: { id_gt: $timeframe }) {\n      id\n      stakedPNK\n      paidETH\n      redistributedPNK\n      activeJurors\n      cases\n    }\n  }\n"
 ): (typeof documents)["\n  query HomePage($timeframe: ID) {\n    disputes(first: 3) {\n      id\n    }\n    counters(where: { id_gt: $timeframe }) {\n      id\n      stakedPNK\n      paidETH\n      redistributedPNK\n      activeJurors\n      cases\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query JurorStakedCourts($id: ID!) {\n    user(id: $id) {\n      tokens {\n        court {\n          id\n          name\n        }\n      }\n    }\n  }\n"
+): (typeof documents)["\n  query JurorStakedCourts($id: ID!) {\n    user(id: $id) {\n      tokens {\n        court {\n          id\n          name\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/src/graphql/graphql.ts

@@ -3708,6 +3708,21 @@ export type HomePageQuery = {
   }>;
 };
 
+export type JurorStakedCourtsQueryVariables = Exact<{
+  id: Scalars["ID"]["input"];
+}>;
+
+export type JurorStakedCourtsQuery = {
+  __typename?: "Query";
+  user?: {
+    __typename?: "User";
+    tokens: Array<{
+      __typename?: "JurorTokensPerCourt";
+      court: { __typename?: "Court"; id: string; name?: string | null };
+    }>;
+  } | null;
+};
+
 export type VotingHistoryQueryVariables = Exact<{
   disputeID: Scalars["ID"]["input"];
 }>;
@@ -4355,6 +4370,64 @@ export const HomePageDocument = {
     },
   ],
 } as unknown as DocumentNode<HomePageQuery, HomePageQueryVariables>;
+export const JurorStakedCourtsDocument = {
+  kind: "Document",
+  definitions: [
+    {
+      kind: "OperationDefinition",
+      operation: "query",
+      name: { kind: "Name", value: "JurorStakedCourts" },
+      variableDefinitions: [
+        {
+          kind: "VariableDefinition",
+          variable: { kind: "Variable", name: { kind: "Name", value: "id" } },
+          type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "ID" } } },
+        },
+      ],
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          {
+            kind: "Field",
+            name: { kind: "Name", value: "user" },
+            arguments: [
+              {
+                kind: "Argument",
+                name: { kind: "Name", value: "id" },
+                value: { kind: "Variable", name: { kind: "Name", value: "id" } },
+              },
+            ],
+            selectionSet: {
+              kind: "SelectionSet",
+              selections: [
+                {
+                  kind: "Field",
+                  name: { kind: "Name", value: "tokens" },
+                  selectionSet: {
+                    kind: "SelectionSet",
+                    selections: [
+                      {
+                        kind: "Field",
+                        name: { kind: "Name", value: "court" },
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            { kind: "Field", name: { kind: "Name", value: "id" } },
+                            { kind: "Field", name: { kind: "Name", value: "name" } },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<JurorStakedCourtsQuery, JurorStakedCourtsQueryVariables>;
 export const VotingHistoryDocument = {
   kind: "Document",
   definitions: [

web/src/hooks/queries/useJurorStakedCourts.ts

@@ -0,0 +1,28 @@
+import useSWR from "swr";
+import { graphql } from "src/graphql";
+import { JurorStakedCourtsQuery } from "src/graphql/graphql";
+export type { JurorStakedCourtsQuery };
+
+const jurorStakedCourtsQuery = graphql(`
+  query JurorStakedCourts($id: ID!) {
+    user(id: $id) {
+      tokens {
+        court {
+          id
+          name
+        }
+      }
+    }
+  }
+`);
+
+export const useJurorStakedCourts = (id?: string) => {
+  return useSWR<JurorStakedCourtsQuery>(
+    id
+      ? {
+          query: jurorStakedCourtsQuery,
+          variables: { id },
+        }
+      : null
+  );
+};

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

@@ -1,7 +1,11 @@
 import React from "react";
 import styled from "styled-components";
+import { useAccount } from "wagmi";
+import { formatEther } from "viem";
 import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
 import WithHelpTooltip from "../WithHelpTooltip";
+import { isUndefined } from "utils/index";
+import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
 
 const Card = styled(_Card)`
   height: auto;
@@ -29,25 +33,36 @@ const tooltipMsg =
   "The locked stake of incoherent jurors is redistributed as incentives for " +
   "the coherent jurors.";
 
-const CourtCard: React.FC = () => (
-  <Card>
-    <StyledBreadcrumb
-      items={[
-        { text: "General Court", value: 0 },
-        { text: "Blockchain", value: 1 },
-      ]}
-    />
-    <ValueContainer>
-      <label> Stake: </label>
-      <small>10,000 PNK</small>
-    </ValueContainer>
-    <ValueContainer>
-      <WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
-        <label> Locked Stake: </label>
-      </WithHelpTooltip>
-      <small> 1,000 PNK </small>
-    </ValueContainer>
-  </Card>
-);
+const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
+
+interface ICourtCard {
+  id: string;
+  name: string;
+}
+
+const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
+  const { address } = useAccount();
+  const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
+    enabled: !isUndefined(address),
+    args: [address, id],
+    watch: true,
+  });
+
+  return (
+    <Card>
+      <StyledBreadcrumb items={[{ text: name, value: 0 }]} />
+      <ValueContainer>
+        <label> Stake: </label>
+        <small>{`${format(jurorBalance?.[0])} PNK`}</small>
+      </ValueContainer>
+      <ValueContainer>
+        <WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
+          <label> Locked Stake: </label>
+        </WithHelpTooltip>
+        <small>{`${format(jurorBalance?.[1])} PNK`}</small>
+      </ValueContainer>
+    </Card>
+  );
+};
 
 export default CourtCard;

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

@@ -1,6 +1,8 @@
 import React from "react";
 import styled from "styled-components";
+import { useAccount } from "wagmi";
 import CourtCard from "./CourtCard";
+import { useJurorStakedCourts } from "hooks/queries/useJurorStakedCourts";
 
 const Container = styled.div`
   margin-top: 64px;
@@ -13,15 +15,21 @@ const CourtsContainer = styled.div`
 `;
 
 const Courts: React.FC = () => {
+  const { address } = useAccount();
+  const { data: jurorStakedCourtsData } = useJurorStakedCourts(address?.toLowerCase());
+
   return (
-    <Container>
-      <h1> My Courts </h1>
-      <hr />
-      <CourtsContainer>
-        <CourtCard />
-        <CourtCard />
-      </CourtsContainer>
-    </Container>
+    address && (
+      <Container>
+        <h1> My Courts </h1>
+        <hr />
+        <CourtsContainer>
+          {jurorStakedCourtsData?.user?.tokens?.map(({ court: { id, name } }) => {
+            return <CourtCard key={id} id={id} name={name} />;
+          })}
+        </CourtsContainer>
+      </Container>
+    )
   );
 };