Hardcoded values: "10,000 PNK" and "1,000 PNK" on CourtCards.tsx

[kemuru]

we may need to create one more query file (in the queries folder) for solving this,

So this new query file useJurorStakedCourts.ts would be:

import useSWR from "swr";
import { graphql } from "src/graphql";

const jurorStakedCourtsQuery = graphql(`
  query JurorStakedCourtsQuery($id: ID!) {
    user(id: $id) {
      tokens {
        court {
          id
          name
        }
      }
    }
  }
`);

export const useJurorStakedCourts = (id?: string) => {
  return useSWR(
    id
      ? {
          query: jurorStakedCourtsQuery,
          variables: { id },
        }
      : null
  );
};

Dashboard/Courts/index.tsx is the component that generates the CourtCard.tsx component. We need to do a map with all the courts the user is staked on.

so

1. modify the Dashboard/Courts/index.tsx component to use the query. then do a mapping and generate CourtCards dinamically. This is where the problem arises, useJurorStakedCourts(address?.toLowerCase()) returns undefined, and for reference, I also called the graphql query useCourtDetails next to it, which works correctly and returns the court data.

const Courts: React.FC = () => {
  const { address } = useAccount();
  const { data: jurorStakedCourtsData } = useJurorStakedCourts(address?.toLowerCase());
  const { data: courtDetailsData } = useCourtDetails("1");
  console.log("jurorStakedCourtsData", jurorStakedCourtsData);
  console.log("courtdetailsdata", courtDetailsData);
  return (
    address && (
      <Container>
        <h1> My Courts </h1>
        <hr />
        <CourtsContainer>
          <CourtCard />
        </CourtsContainer>
      </Container>
    )
  );
};

export default Courts;

I have also tried the same query on TheGraph's playground and it works just fine:

2. modify CourtCard.tsx for something like this:

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;
  width: 100%;
  padding: 12px 24px;
  border-left: 5px solid ${({ theme }) => theme.secondaryPurple};
`;

const ValueContainer = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const StyledBreadcrumb = styled(Breadcrumb)`
  margin-bottom: 12px;
`;

const tooltipMsg =
  "When a juror is selected to arbitrate a case, part of their stake (PNK) is " +
  "locked until the case is resolved. Jurors whose vote is coherent with the " +
  "final jury decision have their locked stake released. Jurors whose vote " +
  "is not coherent with the final jury decision, lose their locked stake. " +
  "The locked stake of incoherent jurors is redistributed as incentives for " +
  "the coherent jurors.";

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;