Skip to content

Commit 7a7eef6

Browse files
committed
feat(web): create new query for juror stakes, change whole structure of courts index and courtcard
1 parent 1751626 commit 7a7eef6

File tree

3 files changed

+57
-30
lines changed

3 files changed

+57
-30
lines changed
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { graphql } from "src/graphql";
2+
import { JurorStakeDetailsQuery } from "src/graphql/graphql";
3+
import { useQuery } from "@tanstack/react-query";
4+
import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper";
5+
export type { JurorStakeDetailsQuery };
6+
7+
const jurorStakeDetailsQuery = graphql(`
8+
query JurorStakeDetails($userId: String) {
9+
jurorTokensPerCourts(where: { juror: $userId }) {
10+
court {
11+
id
12+
name
13+
}
14+
staked
15+
locked
16+
}
17+
}
18+
`);
19+
20+
export const useJurorStakeDetailsQuery = (userId?: string) => {
21+
const isEnabled = userId !== undefined;
22+
23+
return useQuery<JurorStakeDetailsQuery>({
24+
queryKey: ["refetchOnBlock", `jurorStakeDetails${userId}`],
25+
enabled: isEnabled,
26+
queryFn: async () => await graphqlQueryFnHelper(jurorStakeDetailsQuery, { userId }),
27+
});
28+
};

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
4-
import { useAccount } from "wagmi";
54
import { formatUnits } from "viem";
65
import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library";
7-
import { isUndefined } from "utils/index";
8-
import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated";
96

107
const Card = styled(_Card)`
118
display: flex;
@@ -71,38 +68,30 @@ const LockedStake = styled.div`
7168
`;
7269

7370
interface ICourtCard {
74-
id: string;
7571
name: string;
72+
stake: bigint;
73+
lockedStake: bigint;
7674
}
7775

78-
const CourtCard: React.FC<ICourtCard> = ({ id, name }) => {
79-
const { address } = useAccount();
80-
const { data: jurorBalance } = useKlerosCoreGetJurorBalance({
81-
enabled: !isUndefined(address),
82-
args: [address!, BigInt(id)],
83-
watch: true,
84-
});
76+
const CourtCard: React.FC<ICourtCard> = ({ name, stake, lockedStake }) => {
77+
const formattedStake = formatUnits(stake, 18);
78+
const formattedLockedStake = formatUnits(lockedStake, 18);
8579

86-
const stake = jurorBalance?.[0] ?? BigInt(0);
87-
const lockedStake = jurorBalance?.[1] ?? BigInt(0);
88-
const formatedStake = formatUnits(stake, 18);
89-
const formatedLockedStake = formatUnits(lockedStake, 18);
90-
91-
return stake > 0 || lockedStake > 0 ? (
80+
return (
9281
<Card>
9382
<CourtName>
9483
<StyledBreadcrumb items={[{ text: name, value: 0 }]} />
9584
</CourtName>
9685
<StakesContainer>
9786
<Stake>
98-
<label>{`${formatedStake} PNK`}</label>
87+
<label>{`${formattedStake} PNK`}</label>
9988
</Stake>
10089
<LockedStake>
101-
<label>{`${formatedLockedStake} PNK`}</label>
90+
<label>{`${formattedLockedStake} PNK`}</label>
10291
</LockedStake>
10392
</StakesContainer>
10493
</Card>
105-
) : null;
94+
);
10695
};
10796

10897
export default CourtCard;

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from "react";
22
import styled from "styled-components";
33
import { useAccount } from "wagmi";
4-
import { useFragment as getFragment } from "src/graphql";
5-
import { useUserQuery, userFragment } from "queries/useUser";
6-
import { isUndefined } from "utils/index";
4+
import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
5+
import Skeleton from "react-loading-skeleton";
76
import CourtCard from "./CourtCard";
87
import Header from "./Header";
98

@@ -30,22 +29,33 @@ const CourtCardsContainer = styled.div`
3029
z-index: 0;
3130
`;
3231

32+
const StyledLabel = styled.label`
33+
display: flex;
34+
font-size: 16px;
35+
color: ${({ theme }) => theme.secondaryText};
36+
`;
37+
3338
const Courts: React.FC = () => {
3439
const { address } = useAccount();
35-
const { data } = useUserQuery(address?.toLowerCase() as `0x${string}`);
36-
const user = getFragment(userFragment, data?.user);
40+
const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(address?.toLowerCase() as `0x${string}`);
41+
const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked, locked }) => staked > 0 || locked > 0);
42+
const isStaked = stakedCourts && stakedCourts.length > 0;
3743

3844
return (
3945
<Container>
4046
<h1> My Courts </h1>
41-
<Divider />
42-
{!isUndefined(data) ? (
47+
{isLoading ? <Skeleton /> : null}
48+
{!isStaked && !isLoading ? <StyledLabel>You are not staked in any court</StyledLabel> : null}
49+
{isStaked && !isLoading ? (
4350
<>
51+
<Divider />
4452
<Header />
4553
<CourtCardsContainer>
46-
{user?.tokens?.map(({ court: { id, name } }) => {
47-
return <CourtCard key={id} id={id} name={name ?? ""} />;
48-
})}
54+
{stakeData?.jurorTokensPerCourts
55+
?.filter(({ staked, locked }) => staked > 0 || locked > 0)
56+
.map(({ court: { id, name }, staked, locked }) => (
57+
<CourtCard key={id} name={name ?? ""} stake={staked} lockedStake={locked} />
58+
))}
4959
</CourtCardsContainer>
5060
</>
5161
) : null}

0 commit comments

Comments
 (0)