Skip to content

Commit fe7419c

Browse files
tractorsstractorss
committed
feat(web): support-vote-commit-fund-calls-for-gated-dispute-kit
1 parent 4d0c513 commit fe7419c

File tree

13 files changed

+174
-60
lines changed

13 files changed

+174
-60
lines changed

‎web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@ import { useAccount, useBalance, usePublicClient } from "wagmi";
88
import { Field, Button } from "@kleros/ui-components-library";
99

1010
import { REFETCH_INTERVAL } from "consts/index";
11-
import { useSimulateDisputeKitClassicFundAppeal, useWriteDisputeKitClassicFundAppeal } from "hooks/contracts/generated";
11+
import {
12+
useSimulateDisputeKitClassicFundAppeal,
13+
useSimulateDisputeKitGatedFundAppeal,
14+
useWriteDisputeKitClassicFundAppeal,
15+
useWriteDisputeKitGatedFundAppeal,
16+
} from "hooks/contracts/generated";
1217
import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext";
1318
import { useParsedAmount } from "hooks/useParsedAmount";
1419
import { isUndefined } from "utils/index";
@@ -62,7 +67,7 @@ const useNeedFund = () => {
6267
return needFund;
6368
};
6469

65-
const useFundAppeal = (parsedAmount, insufficientBalance) => {
70+
const useFundAppeal = (parsedAmount: bigint, isGated: boolean, insufficientBalance?: boolean) => {
6671
const { id } = useParams();
6772
const { selectedOption } = useSelectedOptionContext();
6873
const {
@@ -71,24 +76,44 @@ const useFundAppeal = (parsedAmount, insufficientBalance) => {
7176
isError,
7277
} = useSimulateDisputeKitClassicFundAppeal({
7378
query: {
74-
enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance,
79+
enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance && !isGated,
7580
},
7681
args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
7782
value: parsedAmount,
7883
});
79-
8084
const { writeContractAsync: fundAppeal } = useWriteDisputeKitClassicFundAppeal();
8185

82-
return { fundAppeal, fundAppealConfig, isLoading, isError };
86+
const {
87+
data: fundAppealGatedConfig,
88+
isLoading: isLoadingGated,
89+
isError: isErrorGated,
90+
} = useSimulateDisputeKitGatedFundAppeal({
91+
query: {
92+
enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance && isGated,
93+
},
94+
args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
95+
value: parsedAmount,
96+
});
97+
const { writeContractAsync: fundAppealGated } = useWriteDisputeKitGatedFundAppeal();
98+
99+
return isGated
100+
? {
101+
fundAppeal: fundAppealGated,
102+
fundAppealConfig: fundAppealGatedConfig,
103+
isLoading: isLoadingGated,
104+
isError: isErrorGated,
105+
}
106+
: { fundAppeal, fundAppealConfig, isLoading, isError };
83107
};
84108

85109
interface IFund {
86110
amount: `${number}`;
87111
setAmount: (val: string) => void;
88112
setIsOpen: (val: boolean) => void;
113+
isGated: boolean;
89114
}
90115

91-
const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
116+
const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen, isGated }) => {
92117
const needFund = useNeedFund();
93118
const { address, isDisconnected } = useAccount();
94119
const { data: balance } = useBalance({
@@ -109,7 +134,11 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
109134
return balance && balance.value < parsedAmount;
110135
}, [balance, parsedAmount]);
111136

112-
const { fundAppealConfig, fundAppeal, isLoading, isError } = useFundAppeal(parsedAmount, insufficientBalance);
137+
const { fundAppealConfig, fundAppeal, isLoading, isError } = useFundAppeal(
138+
parsedAmount,
139+
isGated,
140+
insufficientBalance
141+
);
113142

114143
const isFundDisabled = useMemo(
115144
() =>

‎web/src/pages/Cases/CaseDetails/Appeal/Classic/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ import Options from "./Options";
1717
interface IClassic {
1818
isAppealMiniGuideOpen: boolean;
1919
toggleAppealMiniGuide: () => void;
20+
isGated: boolean;
2021
}
2122

22-
const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide }) => {
23+
const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide, isGated }) => {
2324
const [isPopupOpen, setIsPopupOpen] = useState(false);
2425
const [amount, setAmount] = useState("");
2526
const { selectedOption } = useSelectedOptionContext();
@@ -47,7 +48,7 @@ const Classic: React.FC<IClassic> = ({ isAppealMiniGuideOpen, toggleAppealMiniGu
4748
</AppealHeader>
4849
<label> The jury decision is appealed when two options are fully funded. </label>
4950
<Options setAmount={setAmount} />
50-
<Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
51+
<Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} {...{ isGated }} />
5152
</>
5253
);
5354
};

‎web/src/pages/Cases/CaseDetails/Appeal/Shutter/Fund.tsx

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@ import styled from "styled-components";
44
import { useParams } from "react-router-dom";
55
import { useDebounce } from "react-use";
66
import { useAccount, useBalance, usePublicClient } from "wagmi";
7+
78
import { Field, Button } from "@kleros/ui-components-library";
89

910
import { REFETCH_INTERVAL } from "consts/index";
10-
import { useSimulateDisputeKitShutterFundAppeal, useWriteDisputeKitShutterFundAppeal } from "hooks/contracts/generated";
11+
import {
12+
useSimulateDisputeKitGatedShutterFundAppeal,
13+
useSimulateDisputeKitShutterFundAppeal,
14+
useWriteDisputeKitShutterFundAppeal,
15+
} from "hooks/contracts/generated";
1116
import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext";
1217
import { useParsedAmount } from "hooks/useParsedAmount";
13-
1418
import { isUndefined } from "utils/index";
1519
import { wrapWithToast } from "utils/wrapWithToast";
1620

@@ -61,29 +65,49 @@ const useNeedFund = () => {
6165
);
6266
};
6367

64-
const useFundAppeal = (parsedAmount: bigint, insufficientBalance: boolean) => {
68+
const useFundAppeal = (parsedAmount: bigint, isGated: boolean, insufficientBalance?: boolean) => {
6569
const { id } = useParams();
6670
const { selectedOption } = useSelectedOptionContext();
6771
const {
6872
data: fundAppealConfig,
6973
isLoading,
7074
isError,
7175
} = useSimulateDisputeKitShutterFundAppeal({
72-
query: { enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance },
76+
query: { enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance && !isGated },
7377
args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
7478
value: parsedAmount,
7579
});
7680
const { writeContractAsync: fundAppeal } = useWriteDisputeKitShutterFundAppeal();
77-
return { fundAppeal, fundAppealConfig, isLoading, isError };
81+
82+
const {
83+
data: fundAppealGatedConfig,
84+
isLoading: isLoadingGated,
85+
isError: isErrorGated,
86+
} = useSimulateDisputeKitGatedShutterFundAppeal({
87+
query: { enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance && isGated },
88+
args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
89+
value: parsedAmount,
90+
});
91+
const { writeContractAsync: fundAppealGated } = useWriteDisputeKitShutterFundAppeal();
92+
93+
return isGated
94+
? {
95+
fundAppeal: fundAppealGated,
96+
fundAppealConfig: fundAppealGatedConfig,
97+
isLoading: isLoadingGated,
98+
isError: isErrorGated,
99+
}
100+
: { fundAppeal, fundAppealConfig, isLoading, isError };
78101
};
79102

80103
interface IFund {
81104
amount: `${number}`;
82105
setAmount: (val: string) => void;
83106
setIsOpen: (val: boolean) => void;
107+
isGated: boolean;
84108
}
85109

86-
const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
110+
const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen, isGated }) => {
87111
const needFund = useNeedFund();
88112
const { address, isDisconnected } = useAccount();
89113
const { data: balance } = useBalance({
@@ -96,7 +120,11 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
96120
useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
97121
const parsedAmount = useParsedAmount(debouncedAmount as `${number}`);
98122
const insufficientBalance = useMemo(() => balance && balance.value < parsedAmount, [balance, parsedAmount]);
99-
const { fundAppealConfig, fundAppeal, isLoading, isError } = useFundAppeal(parsedAmount, insufficientBalance);
123+
const { fundAppealConfig, fundAppeal, isLoading, isError } = useFundAppeal(
124+
parsedAmount,
125+
isGated,
126+
insufficientBalance
127+
);
100128
const isFundDisabled = useMemo(
101129
() =>
102130
isDisconnected ||

‎web/src/pages/Cases/CaseDetails/Appeal/Shutter/index.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
import React, { useState } from "react";
2-
import { useSelectedOptionContext } from "hooks/useClassicAppealContext";
3-
import Popup, { PopupType } from "components/Popup";
2+
43
import AppealIcon from "svgs/icons/appeal.svg";
4+
5+
import { useSelectedOptionContext } from "hooks/useClassicAppealContext";
6+
57
import HowItWorks from "components/HowItWorks";
8+
import Popup, { PopupType } from "components/Popup";
69
import Appeal from "components/Popup/MiniGuides/Appeal";
10+
711
import { AppealHeader, StyledTitle } from "..";
812
import Options from "../Classic/Options";
13+
914
import Fund from "./Fund";
1015

1116
interface IShutter {
1217
isAppealMiniGuideOpen: boolean;
1318
toggleAppealMiniGuide: () => void;
19+
isGated: boolean;
1420
}
1521

16-
const Shutter: React.FC<IShutter> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide }) => {
22+
const Shutter: React.FC<IShutter> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide, isGated }) => {
1723
const [isPopupOpen, setIsPopupOpen] = useState(false);
1824
const [amount, setAmount] = useState("");
1925
const { selectedOption } = useSelectedOptionContext();
@@ -41,7 +47,7 @@ const Shutter: React.FC<IShutter> = ({ isAppealMiniGuideOpen, toggleAppealMiniGu
4147
</AppealHeader>
4248
<label>The jury decision is appealed when two options are fully funded.</label>
4349
<Options setAmount={setAmount} />
44-
<Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
50+
<Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} {...{ isGated }} />
4551
</>
4652
);
4753
};

‎web/src/pages/Cases/CaseDetails/Appeal/index.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,26 @@ const Appeal: React.FC<{ currentPeriodIndex: number }> = ({ currentPeriodIndex }
5353
const { data: disputeData } = useDisputeDetailsQuery(id);
5454
const disputeKitAddress = disputeData?.dispute?.currentRound?.disputeKit?.address;
5555
const { disputeKitName } = useDisputeKitAddresses({ disputeKitAddress });
56-
const isClassicDisputeKit = disputeKitName === DisputeKits.Classic;
57-
const isShutterDisputeKit = disputeKitName === DisputeKits.Shutter;
56+
const isClassicDisputeKit = disputeKitName === DisputeKits.Classic || disputeKitName === DisputeKits.Gated;
57+
const isShutterDisputeKit = disputeKitName === DisputeKits.Shutter || disputeKitName === DisputeKits.GatedShutter;
58+
const isGated = Boolean(disputeKitName?.includes("Gated"));
5859
return (
5960
<Container>
6061
{Periods.appeal === currentPeriodIndex ? (
6162
<>
6263
{isClassicDisputeKit && (
63-
<Classic isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
64+
<Classic
65+
isAppealMiniGuideOpen={isAppealMiniGuideOpen}
66+
toggleAppealMiniGuide={toggleAppealMiniGuide}
67+
{...{ isGated }}
68+
/>
6469
)}
6570
{isShutterDisputeKit && (
66-
<Shutter isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
71+
<Shutter
72+
isAppealMiniGuideOpen={isAppealMiniGuideOpen}
73+
toggleAppealMiniGuide={toggleAppealMiniGuide}
74+
{...{ isGated }}
75+
/>
6776
)}
6877
</>
6978
) : (

‎web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useLocalStorage } from "react-use";
66
import { keccak256, encodePacked } from "viem";
77
import { useWalletClient, usePublicClient, useConfig } from "wagmi";
88

9-
import { simulateDisputeKitClassicCastCommit } from "hooks/contracts/generated";
9+
import { simulateDisputeKitClassicCastCommit, simulateDisputeKitGatedCastCommit } from "hooks/contracts/generated";
1010
import useSigningAccount from "hooks/useSigningAccount";
1111
import { isUndefined } from "utils/index";
1212
import { wrapWithToast } from "utils/wrapWithToast";
@@ -25,9 +25,10 @@ interface ICommit {
2525
voteIDs: string[];
2626
setIsOpen: (val: boolean) => void;
2727
refetch: () => void;
28+
isGated: boolean;
2829
}
2930

30-
const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch }) => {
31+
const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch, isGated }) => {
3132
const { id } = useParams();
3233
const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
3334
const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
@@ -58,7 +59,10 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
5859
const salt = keccak256(rawSalt);
5960
setSalt(JSON.stringify({ salt, choice: choice.toString() }));
6061
const commit = keccak256(encodePacked(["uint256", "uint256"], [BigInt(choice), BigInt(salt)]));
61-
const { request } = await simulateDisputeKitClassicCastCommit(wagmiConfig, {
62+
63+
const simulate = isGated ? simulateDisputeKitGatedCastCommit : simulateDisputeKitClassicCastCommit;
64+
65+
const { request } = await simulate(wagmiConfig, {
6266
args: [parsedDisputeID, parsedVoteIDs, commit],
6367
});
6468
if (walletClient && publicClient) {
@@ -80,6 +84,7 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
8084
generateSigningAccount,
8185
signingAccount,
8286
refetch,
87+
isGated,
8388
]
8489
);
8590

‎web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@ import { useLocalStorage } from "react-use";
77
import { encodePacked, keccak256, PrivateKeyAccount } from "viem";
88
import { useWalletClient, usePublicClient, useConfig } from "wagmi";
99

10+
import { Answer } from "@kleros/kleros-sdk";
1011
import { Button } from "@kleros/ui-components-library";
1112

12-
import { simulateDisputeKitClassicCastVote } from "hooks/contracts/generated";
13+
import { simulateDisputeKitClassicCastVote, simulateDisputeKitGatedCastVote } from "hooks/contracts/generated";
1314
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
1415
import useSigningAccount from "hooks/useSigningAccount";
1516
import { isUndefined } from "utils/index";
1617
import { wrapWithToast, catchShortMessage } from "utils/wrapWithToast";
1718

1819
import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
1920

21+
import { EnsureChain } from "components/EnsureChain";
2022
import InfoCard from "components/InfoCard";
2123

2224
import JustificationArea from "../JustificationArea";
23-
import { Answer } from "@kleros/kleros-sdk";
24-
import { EnsureChain } from "components/EnsureChain";
2525

2626
const Container = styled.div`
2727
width: 100%;
@@ -42,14 +42,15 @@ const StyledEnsureChain = styled(EnsureChain)`
4242

4343
const ReactMarkdownWrapper = styled.div``;
4444
interface IReveal {
45-
arbitrable: `0x${string}`;
45+
arbitrable?: `0x${string}`;
4646
voteIDs: string[];
4747
setIsOpen: (val: boolean) => void;
4848
commit: string;
4949
isRevealPeriod: boolean;
50+
isGated: boolean;
5051
}
5152

52-
const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isRevealPeriod }) => {
53+
const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isRevealPeriod, isGated }) => {
5354
const { id } = useParams();
5455
const [isSending, setIsSending] = useState(false);
5556
const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
@@ -71,11 +72,13 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isR
7172
const handleReveal = useCallback(async () => {
7273
setIsSending(true);
7374
const { salt, choice } = isUndefined(storedSaltAndChoice)
74-
? await getSaltAndChoice(signingAccount, generateSigningAccount, saltKey, disputeDetails?.answers, commit)
75+
? await getSaltAndChoice(signingAccount, generateSigningAccount, saltKey, disputeDetails?.answers ?? [], commit)
7576
: JSON.parse(storedSaltAndChoice);
7677
if (isUndefined(choice)) return;
78+
79+
const simulate = isGated ? simulateDisputeKitGatedCastVote : simulateDisputeKitClassicCastVote;
7780
const { request } = await catchShortMessage(
78-
simulateDisputeKitClassicCastVote(wagmiConfig, {
81+
simulate(wagmiConfig, {
7982
args: [parsedDisputeID, parsedVoteIDs, BigInt(choice), BigInt(salt), justification],
8083
})
8184
);
@@ -99,6 +102,7 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isR
99102
publicClient,
100103
setIsOpen,
101104
walletClient,
105+
isGated,
102106
]);
103107

104108
return (

‎web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ import Vote from "./Vote";
1515
interface IClassic {
1616
arbitrable: `0x${string}`;
1717
setIsOpen: (val: boolean) => void;
18+
isGated: boolean;
1819
}
1920

20-
const Classic: React.FC<IClassic> = ({ arbitrable, setIsOpen }) => {
21+
const Classic: React.FC<IClassic> = ({ arbitrable, setIsOpen, isGated }) => {
2122
const { id } = useParams();
2223
const { address } = useAccount();
2324
const { data: disputeData } = useDisputeDetailsQuery(id);
@@ -27,9 +28,9 @@ const Classic: React.FC<IClassic> = ({ arbitrable, setIsOpen }) => {
2728

2829
return id && isHiddenVotes ? (
2930
isCommitPeriod && !commited ? (
30-
<Commit {...{ arbitrable, setIsOpen, voteIDs, refetch }} />
31+
<Commit {...{ arbitrable, setIsOpen, voteIDs, refetch, isGated }} />
3132
) : (
32-
<Reveal {...{ arbitrable, setIsOpen, voteIDs, commit, isRevealPeriod: !isCommitPeriod }} />
33+
<Reveal {...{ arbitrable, setIsOpen, voteIDs, commit, isRevealPeriod: !isCommitPeriod, isGated }} />
3334
)
3435
) : (
3536
<Vote {...{ arbitrable, setIsOpen, voteIDs }} />

0 commit comments

Comments
 (0)