Merge pull request #1994 from kleros/feat(web)/shutter-frontend-rendering

feat: shutter support in dispute commiting & appeal

Author: alcercu

web/package.json

@@ -75,6 +75,7 @@
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
     "vite-plugin-node-polyfills": "^0.23.0",
+    "vite-plugin-static-copy": "^3.0.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^4.3.2"
   },
@@ -94,6 +95,7 @@
     "@reown/appkit-adapter-wagmi": "^1.7.1",
     "@sentry/react": "^7.120.0",
     "@sentry/tracing": "^7.120.0",
+    "@shutter-network/shutter-sdk": "^0.0.1",
     "@solana/wallet-adapter-react": "^0.15.36",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.69.0",

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -28,6 +28,9 @@ const disputeDetailsQuery = graphql(`
       currentRound {
         id
         nbVotes
+        disputeKit {
+          id
+        }
       }
       currentRoundIndex
       isCrossChain

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

@@ -0,0 +1,147 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { useParams } from "react-router-dom";
+import { useDebounce } from "react-use";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
+import { Field, Button } from "@kleros/ui-components-library";
+
+import { REFETCH_INTERVAL } from "consts/index";
+import { useSimulateDisputeKitShutterFundAppeal, useWriteDisputeKitShutterFundAppeal } from "hooks/contracts/generated";
+import { useSelectedOptionContext, useFundingContext, useCountdownContext } from "hooks/useClassicAppealContext";
+import { useParsedAmount } from "hooks/useParsedAmount";
+
+import { isUndefined } from "utils/index";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { EnsureChain } from "components/EnsureChain";
+import { ErrorButtonMessage } from "components/ErrorButtonMessage";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+
+const StyledField = styled(Field)`
+  width: 100%;
+  & > input {
+    text-align: center;
+  }
+  &:before {
+    position: absolute;
+    content: "ETH";
+    right: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: ${({ theme }) => theme.primaryText};
+  }
+`;
+
+const StyledButton = styled(Button)`
+  margin: auto;
+  margin-top: 4px;
+`;
+
+const StyledLabel = styled.label`
+  align-self: flex-start;
+`;
+
+const useNeedFund = () => {
+  const { loserSideCountdown } = useCountdownContext();
+  const { fundedChoices, winningChoice } = useFundingContext();
+  return (
+    (loserSideCountdown ?? 0) > 0 ||
+    (!isUndefined(fundedChoices) &&
+      !isUndefined(winningChoice) &&
+      fundedChoices.length > 0 &&
+      !fundedChoices.includes(winningChoice))
+  );
+};
+
+const useFundAppeal = (parsedAmount: bigint, insufficientBalance: boolean) => {
+  const { id } = useParams();
+  const { selectedOption } = useSelectedOptionContext();
+  const {
+    data: fundAppealConfig,
+    isLoading,
+    isError,
+  } = useSimulateDisputeKitShutterFundAppeal({
+    query: { enabled: !isUndefined(id) && !isUndefined(selectedOption) && !insufficientBalance },
+    args: [BigInt(id ?? 0), BigInt(selectedOption?.id ?? 0)],
+    value: parsedAmount,
+  });
+  const { writeContractAsync: fundAppeal } = useWriteDisputeKitShutterFundAppeal();
+  return { fundAppeal, fundAppealConfig, isLoading, isError };
+};
+
+interface IFund {
+  amount: `${number}`;
+  setAmount: (val: string) => void;
+  setIsOpen: (val: boolean) => void;
+}
+
+const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
+  const needFund = useNeedFund();
+  const { address, isDisconnected } = useAccount();
+  const { data: balance } = useBalance({
+    query: { refetchInterval: REFETCH_INTERVAL },
+    address,
+  });
+  const publicClient = usePublicClient();
+  const [isSending, setIsSending] = useState(false);
+  const [debouncedAmount, setDebouncedAmount] = useState<`${number}` | "">("");
+  useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
+  const parsedAmount = useParsedAmount(debouncedAmount as `${number}`);
+  const insufficientBalance = useMemo(() => balance && balance.value < parsedAmount, [balance, parsedAmount]);
+  const { fundAppealConfig, fundAppeal, isLoading, isError } = useFundAppeal(parsedAmount, insufficientBalance);
+  const isFundDisabled = useMemo(
+    () =>
+      isDisconnected ||
+      isSending ||
+      !balance ||
+      insufficientBalance ||
+      Number(parsedAmount) <= 0 ||
+      isError ||
+      isLoading,
+    [isDisconnected, isSending, balance, insufficientBalance, parsedAmount, isError, isLoading]
+  );
+
+  return needFund ? (
+    <Container>
+      <StyledLabel>How much ETH do you want to contribute?</StyledLabel>
+      <StyledField
+        type="number"
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        placeholder="Amount to fund"
+      />
+      <EnsureChain>
+        <div>
+          <StyledButton
+            disabled={isFundDisabled}
+            isLoading={(isSending || isLoading) && !insufficientBalance}
+            text={isDisconnected ? "Connect to Fund" : "Fund"}
+            onClick={() => {
+              if (fundAppeal && fundAppealConfig && publicClient) {
+                setIsSending(true);
+                wrapWithToast(async () => await fundAppeal(fundAppealConfig.request), publicClient)
+                  .then((res) => setIsOpen(res.status))
+                  .finally(() => setIsSending(false));
+              }
+            }}
+          />
+          {insufficientBalance && (
+            <ErrorButtonMessage>
+              <ClosedCircleIcon /> Insufficient balance
+            </ErrorButtonMessage>
+          )}
+        </div>
+      </EnsureChain>
+    </Container>
+  ) : null;
+};
+
+export default Fund;

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

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { useSelectedOptionContext } from "hooks/useClassicAppealContext";
+import Popup, { PopupType } from "components/Popup";
+import AppealIcon from "svgs/icons/appeal.svg";
+import HowItWorks from "components/HowItWorks";
+import Appeal from "components/Popup/MiniGuides/Appeal";
+import { AppealHeader, StyledTitle } from "..";
+import Options from "../Classic/Options";
+import Fund from "./Fund";
+
+interface IShutter {
+  isAppealMiniGuideOpen: boolean;
+  toggleAppealMiniGuide: () => void;
+}
+
+const Shutter: React.FC<IShutter> = ({ isAppealMiniGuideOpen, toggleAppealMiniGuide }) => {
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const [amount, setAmount] = useState("");
+  const { selectedOption } = useSelectedOptionContext();
+
+  return (
+    <>
+      {isPopupOpen && (
+        <Popup
+          title="Thanks for Funding the Appeal"
+          icon={AppealIcon}
+          popupType={PopupType.APPEAL}
+          setIsOpen={setIsPopupOpen}
+          setAmount={setAmount}
+          option={selectedOption?.title ?? ""}
+          amount={amount}
+        />
+      )}
+      <AppealHeader>
+        <StyledTitle>Appeal crowdfunding</StyledTitle>
+        <HowItWorks
+          isMiniGuideOpen={isAppealMiniGuideOpen}
+          toggleMiniGuide={toggleAppealMiniGuide}
+          MiniGuideComponent={Appeal}
+        />
+      </AppealHeader>
+      <label>The jury decision is appealed when two options are fully funded.</label>
+      <Options setAmount={setAmount} />
+      <Fund amount={amount as `${number}`} setAmount={setAmount} setIsOpen={setIsPopupOpen} />
+    </>
+  );
+};
+
+export default Shutter;

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

@@ -2,15 +2,18 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { useToggle } from "react-use";
+import { useParams } from "react-router-dom";
 
 import { Periods } from "consts/periods";
-import { ClassicAppealProvider } from "hooks/useClassicAppealContext";
+import { getDisputeKitName } from "consts/index";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import AppealHistory from "./AppealHistory";
 import Classic from "./Classic";
+import Shutter from "./Shutter";
 
 const Container = styled.div`
   padding: 16px;
@@ -44,11 +47,24 @@ export const StyledTitle = styled.h1`
 
 const Appeal: React.FC<{ currentPeriodIndex: number }> = ({ currentPeriodIndex }) => {
   const [isAppealMiniGuideOpen, toggleAppealMiniGuide] = useToggle(false);
+  const { id } = useParams();
+  const { data: disputeData } = useDisputeDetailsQuery(id);
+  const disputeKitId = disputeData?.dispute?.currentRound?.disputeKit?.id;
+  const disputeKitName = disputeKitId ? getDisputeKitName(Number(disputeKitId))?.toLowerCase() : "";
+  const isClassicDisputeKit = disputeKitName?.includes("classic") ?? false;
+  const isShutterDisputeKit = disputeKitName?.includes("shutter") ?? false;
 
   return (
     <Container>
       {Periods.appeal === currentPeriodIndex ? (
-        <Classic isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
+        <>
+          {isClassicDisputeKit && (
+            <Classic isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
+          )}
+          {isShutterDisputeKit && (
+            <Shutter isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
+          )}
+        </>
       ) : (
         <AppealHistory isAppealMiniGuideOpen={isAppealMiniGuideOpen} toggleAppealMiniGuide={toggleAppealMiniGuide} />
       )}

web/src/pages/Cases/CaseDetails/Timeline.tsx

@@ -140,7 +140,7 @@ const useTimeline = (dispute: DisputeDetailsQuery["dispute"], currentItemIndex:
   }));
 };
 
-const getDeadline = (
+export const getDeadline = (
   currentPeriodIndex: number,
   lastPeriodChange?: string,
   timesPerPeriod?: string[]

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

@@ -13,7 +13,7 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import OptionsContainer from "./OptionsContainer";
+import OptionsContainer from "../OptionsContainer";
 
 const Container = styled.div`
   width: 100%;

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

@@ -19,7 +19,7 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import InfoCard from "components/InfoCard";
 
-import JustificationArea from "./JustificationArea";
+import JustificationArea from "../JustificationArea";
 import { Answer } from "@kleros/kleros-sdk";
 import { EnsureChain } from "components/EnsureChain";
 

web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx

@@ -9,7 +9,7 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import OptionsContainer from "./OptionsContainer";
+import OptionsContainer from "../OptionsContainer";
 
 const Container = styled.div`
   width: 100%;

web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx renamed to web/src/pages/Cases/CaseDetails/Voting/JustificationArea.tsx

@@ -46,6 +46,7 @@ const RefuseToArbitrateContainer = styled.div`
 const StyledEnsureChain = styled(EnsureChain)`
   align-self: center;
 `;
+
 interface IOptions {
   arbitrable: `0x${string}`;
   handleSelection: (arg0: bigint) => Promise<void>;
@@ -69,11 +70,16 @@ const Options: React.FC<IOptions> = ({ arbitrable, handleSelection, justificatio
     async (id: bigint) => {
       setIsSending(true);
       setChosenOption(id);
-      await handleSelection(id);
-      setChosenOption(BigInt(-1));
-      setIsSending(false);
+      try {
+        await handleSelection(id);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setChosenOption(BigInt(-1));
+        setIsSending(false);
+      }
     },
-    [handleSelection, setChosenOption, setIsSending]
+    [handleSelection]
   );
 
   return id ? (