Skip to content

Commit a2b2753

Browse files
alcercualcercu
authored
Merge pull request #1007 from kleros/fix(web)/courtcard-hardcodes
feat(web): fix courtcard hardcode values
2 parents 0a6d420 + 80ef0ef commit a2b2753

File tree

5 files changed

+160
-28
lines changed

5 files changed

+160
-28
lines changed

‎web/src/graphql/gql.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const documents = {
3131
types.EvidencesDocument,
3232
"\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":
3333
types.HomePageDocument,
34+
"\n query JurorStakedCourts($id: ID!) {\n user(id: $id) {\n tokens {\n court {\n id\n name\n }\n }\n }\n }\n":
35+
types.JurorStakedCourtsDocument,
3436
"\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":
3537
types.VotingHistoryDocument,
3638
};
@@ -103,6 +105,12 @@ export function graphql(
103105
export function graphql(
104106
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"
105107
): (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"];
108+
/**
109+
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
110+
*/
111+
export function graphql(
112+
source: "\n query JurorStakedCourts($id: ID!) {\n user(id: $id) {\n tokens {\n court {\n id\n name\n }\n }\n }\n }\n"
113+
): (typeof documents)["\n query JurorStakedCourts($id: ID!) {\n user(id: $id) {\n tokens {\n court {\n id\n name\n }\n }\n }\n }\n"];
106114
/**
107115
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
108116
*/

‎web/src/graphql/graphql.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3708,6 +3708,21 @@ export type HomePageQuery = {
37083708
}>;
37093709
};
37103710

3711+
export type JurorStakedCourtsQueryVariables = Exact<{
3712+
id: Scalars["ID"]["input"];
3713+
}>;
3714+
3715+
export type JurorStakedCourtsQuery = {
3716+
__typename?: "Query";
3717+
user?: {
3718+
__typename?: "User";
3719+
tokens: Array<{
3720+
__typename?: "JurorTokensPerCourt";
3721+
court: { __typename?: "Court"; id: string; name?: string | null };
3722+
}>;
3723+
} | null;
3724+
};
3725+
37113726
export type VotingHistoryQueryVariables = Exact<{
37123727
disputeID: Scalars["ID"]["input"];
37133728
}>;
@@ -4355,6 +4370,64 @@ export const HomePageDocument = {
43554370
},
43564371
],
43574372
} as unknown as DocumentNode<HomePageQuery, HomePageQueryVariables>;
4373+
export const JurorStakedCourtsDocument = {
4374+
kind: "Document",
4375+
definitions: [
4376+
{
4377+
kind: "OperationDefinition",
4378+
operation: "query",
4379+
name: { kind: "Name", value: "JurorStakedCourts" },
4380+
variableDefinitions: [
4381+
{
4382+
kind: "VariableDefinition",
4383+
variable: { kind: "Variable", name: { kind: "Name", value: "id" } },
4384+
type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "ID" } } },
4385+
},
4386+
],
4387+
selectionSet: {
4388+
kind: "SelectionSet",
4389+
selections: [
4390+
{
4391+
kind: "Field",
4392+
name: { kind: "Name", value: "user" },
4393+
arguments: [
4394+
{
4395+
kind: "Argument",
4396+
name: { kind: "Name", value: "id" },
4397+
value: { kind: "Variable", name: { kind: "Name", value: "id" } },
4398+
},
4399+
],
4400+
selectionSet: {
4401+
kind: "SelectionSet",
4402+
selections: [
4403+
{
4404+
kind: "Field",
4405+
name: { kind: "Name", value: "tokens" },
4406+
selectionSet: {
4407+
kind: "SelectionSet",
4408+
selections: [
4409+
{
4410+
kind: "Field",
4411+
name: { kind: "Name", value: "court" },
4412+
selectionSet: {
4413+
kind: "SelectionSet",
4414+
selections: [
4415+
{ kind: "Field", name: { kind: "Name", value: "id" } },
4416+
{ kind: "Field", name: { kind: "Name", value: "name" } },
4417+
],
4418+
},
4419+
},
4420+
],
4421+
},
4422+
},
4423+
],
4424+
},
4425+
},
4426+
],
4427+
},
4428+
},
4429+
],
4430+
} as unknown as DocumentNode<JurorStakedCourtsQuery, JurorStakedCourtsQueryVariables>;
43584431
export const VotingHistoryDocument = {
43594432
kind: "Document",
43604433
definitions: [

‎web/src/hooks/queries/useJurorStakedCourts.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import useSWR from "swr";
2+
import { graphql } from "src/graphql";
3+
import { JurorStakedCourtsQuery } from "src/graphql/graphql";
4+
export type { JurorStakedCourtsQuery };
5+
6+
const jurorStakedCourtsQuery = graphql(`
7+
query JurorStakedCourts($id: ID!) {
8+
user(id: $id) {
9+
tokens {
10+
court {
11+
id
12+
name
13+
}
14+
}
15+
}
16+
}
17+
`);
18+
19+
export const useJurorStakedCourts = (id?: string) => {
20+
return useSWR<JurorStakedCourtsQuery>(
21+
id
22+
? {
23+
query: jurorStakedCourtsQuery,
24+
variables: { id },
25+
}
26+
: null
27+
);
28+
};

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

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { useAccount } from "wagmi";
4+
import { formatEther } from "viem";
35
import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
46
import WithHelpTooltip from "../WithHelpTooltip";
7+
import { isUndefined } from "utils/index";
8+
import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
59

610
const Card = styled(_Card)`
711
height: auto;
@@ -29,25 +33,36 @@ const tooltipMsg =
2933
"The locked stake of incoherent jurors is redistributed as incentives for " +
3034
"the coherent jurors.";
3135

32-
const CourtCard: React.FC = () => (
33-
<Card>
34-
<StyledBreadcrumb
35-
items={[
36-
{ text: "General Court", value: 0 },
37-
{ text: "Blockchain", value: 1 },
38-
]}
39-
/>
40-
<ValueContainer>
41-
<label> Stake: </label>
42-
<small>10,000 PNK</small>
43-
</ValueContainer>
44-
<ValueContainer>
45-
<WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
46-
<label> Locked Stake: </label>
47-
</WithHelpTooltip>
48-
<small> 1,000 PNK </small>
49-
</ValueContainer>
50-
</Card>
51-
);
36+
const format = (value: bigint | undefined): string => (value !== undefined ? formatEther(value) : "0");
37+
38+
interface ICourtCard {
39+
id: string;
40+
name: string;
41+
}
42+
43+
const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
44+
const { address } = useAccount();
45+
const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
46+
enabled: !isUndefined(address),
47+
args: [address, id],
48+
watch: true,
49+
});
50+
51+
return (
52+
<Card>
53+
<StyledBreadcrumb items={[{ text: name, value: 0 }]} />
54+
<ValueContainer>
55+
<label> Stake: </label>
56+
<small>{`${format(jurorBalance?.[0])} PNK`}</small>
57+
</ValueContainer>
58+
<ValueContainer>
59+
<WithHelpTooltip {...{ place: "bottom", tooltipMsg }}>
60+
<label> Locked Stake: </label>
61+
</WithHelpTooltip>
62+
<small>{`${format(jurorBalance?.[1])} PNK`}</small>
63+
</ValueContainer>
64+
</Card>
65+
);
66+
};
5267

5368
export default CourtCard;

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

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react";
22
import styled from "styled-components";
3+
import { useAccount } from "wagmi";
34
import CourtCard from "./CourtCard";
5+
import { useJurorStakedCourts } from "hooks/queries/useJurorStakedCourts";
46

57
const Container = styled.div`
68
margin-top: 64px;
@@ -13,15 +15,21 @@ const CourtsContainer = styled.div`
1315
`;
1416

1517
const Courts: React.FC = () => {
18+
const { address } = useAccount();
19+
const { data: jurorStakedCourtsData } = useJurorStakedCourts(address?.toLowerCase());
20+
1621
return (
17-
<Container>
18-
<h1> My Courts </h1>
19-
<hr />
20-
<CourtsContainer>
21-
<CourtCard />
22-
<CourtCard />
23-
</CourtsContainer>
24-
</Container>
22+
address && (
23+
<Container>
24+
<h1> My Courts </h1>
25+
<hr />
26+
<CourtsContainer>
27+
{jurorStakedCourtsData?.user?.tokens?.map(({ court: { id, name } }) => {
28+
return <CourtCard key={id} id={id} name={name} />;
29+
})}
30+
</CourtsContainer>
31+
</Container>
32+
)
2533
);
2634
};
2735

0 commit comments

Comments
 (0)