Feat(web)/dynamic history

subgraph/src/Curate.ts

@@ -84,17 +84,17 @@ export function handleRequestSubmitted(event: RequestSubmitted): void {
   item.latestRequester = ensureUser(event.transaction.from.toHexString()).id;
   item.latestRequestResolutionTime = ZERO;
   item.latestRequestSubmissionTime = event.block.timestamp;
+  item.save();
 
   let newStatus = getExtendedStatus(item.status, item.disputed);
 
   if (itemInfo.value1.equals(ONE)) {
     registry.numberOfPending = registry.numberOfPending.plus(ONE);
+    registry.save();
   } else {
     updateCounters(prevStatus, newStatus, event.address);
   }
 
-  registry.save();
-  item.save();
   createRequestFromEvent(event);
 }
 

subgraph/src/entities/Request.ts

@@ -14,11 +14,7 @@ export function createRequestFromEvent(event: RequestSubmitted): void {
     log.error(`Item for graphItemID {} not found.`, [graphItemID]);
     return;
   }
-  let registry = Registry.load(event.address.toHexString());
-  if (!registry) {
-    log.error(`Registry at address {} not found`, [event.address.toHexString()]);
-    return;
-  }
+
   const requestIndex = item.numberOfRequests.minus(ONE);
   const requestID = graphItemID + "-" + requestIndex.toString();
   const request = new Request(requestID);
@@ -27,7 +23,7 @@ export function createRequestFromEvent(event: RequestSubmitted): void {
   request.arbitratorExtraData = curate.getArbitratorExtraData();
   request.requester = ensureUser(event.transaction.from.toHexString()).id;
   request.item = item.id;
-  request.registry = registry.id;
+  request.registry = event.address.toHexString();
   request.registryAddress = event.address;
   request.resolutionTime = ZERO;
   request.disputeOutcome = NONE;

subgraph/subgraph.yaml

@@ -59,4 +59,6 @@ templates:
           handler: handleConnectedListSet
         - event: ListMetadataSet(string)
           handler: handleListMetadataSet
+        - event: DisputeRequest(indexed address,indexed uint256,uint256,uint256,string)
+          handler: handleRequestChallenged
       file: ./src/Curate.ts

web/src/app.tsx

@@ -16,6 +16,7 @@ import { SubmitItemProvider } from "context/SubmitItemContext";
 import SubmitItem from "./pages/SubmitItem";
 import SubmitList from "./pages/SubmitList";
 import { RegistryDetailsProvider } from "context/RegistryDetailsContext";
+import { SubmitListProvider } from "./context/SubmitListContext";
 
 const App: React.FC = () => {
   return (
@@ -25,24 +26,26 @@ const App: React.FC = () => {
         <GraphqlBatcherProvider>
           <Web3Provider>
             <IsListViewProvider>
-              <SubmitItemProvider>
-                <SentryRoutes>
-                  <Route path="/" element={<Layout />}>
-                    <Route index element={<Home />} />
-                    <Route path="lists/*" element={<AllLists />} />
-                    <Route
-                      path="submit-item/:id/*"
-                      element={
-                        <RegistryDetailsProvider>
-                          <SubmitItem />
-                        </RegistryDetailsProvider>
-                      }
-                    />
-                    <Route path="submit-list/*" element={<SubmitList />} />
-                    <Route path="*" element={<h1>404 not found</h1>} />
-                  </Route>
-                </SentryRoutes>
-              </SubmitItemProvider>
+              <SubmitListProvider>
+                <SubmitItemProvider>
+                  <SentryRoutes>
+                    <Route path="/" element={<Layout />}>
+                      <Route index element={<Home />} />
+                      <Route path="lists/*" element={<AllLists />} />
+                      <Route
+                        path="submit-item/:id/*"
+                        element={
+                          <RegistryDetailsProvider>
+                            <SubmitItem />
+                          </RegistryDetailsProvider>
+                        }
+                      />
+                      <Route path="submit-list/*" element={<SubmitList />} />
+                      <Route path="*" element={<h1>404 not found</h1>} />
+                    </Route>
+                  </SentryRoutes>
+                </SubmitItemProvider>
+              </SubmitListProvider>
             </IsListViewProvider>
           </Web3Provider>
         </GraphqlBatcherProvider>

web/src/components/ActionButton/ExecuteButton.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@kleros/ui-components-library";
+import React, { useState } from "react";
+import { Address } from "viem";
+import { usePublicClient } from "wagmi";
+import { useCurateV2ExecuteRequest, usePrepareCurateV2ExecuteRequest } from "hooks/contracts/generated";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { EnsureChain } from "../EnsureChain";
+
+interface IExecuteButton {
+  registryAddress: Address;
+  itemId: string;
+  refetch: () => void;
+}
+const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch }) => {
+  const publicClient = usePublicClient();
+  const [isExecuting, setIsExecuting] = useState(false);
+
+  const {
+    config,
+    isError,
+    isLoading: isPreparingConfig,
+    //@ts-ignore
+  } = usePrepareCurateV2ExecuteRequest({ address: registryAddress, args: [itemId as `0x${string}`] });
+  const { writeAsync: executeRequest, isLoading } = useCurateV2ExecuteRequest(config);
+  return (
+    <EnsureChain>
+      <Button
+        text="Execute"
+        disabled={isLoading || isError || isExecuting || isPreparingConfig}
+        isLoading={isLoading || isExecuting}
+        onClick={() => {
+          if (!executeRequest) return;
+          setIsExecuting(true);
+          wrapWithToast(
+            async () =>
+              await executeRequest().then((response) => {
+                return response.hash;
+              }),
+            publicClient
+          )
+            .then(() => refetch())
+            .catch(() => {})
+            .finally(() => setIsExecuting(false));
+        }}
+      />
+    </EnsureChain>
+  );
+};
+
+export default ExecuteButton;

web/src/components/Modal/Buttons/index.tsx → web/src/components/ActionButton/Modal/Buttons/index.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
-// import ChallengeButton from "components/ChallengeButton";
-// import RemoveButton from "components/RemoveButton";
+import { EnsureChain } from "components/EnsureChain";
 
 const Container = styled.div`
   display: flex;
@@ -14,16 +13,26 @@ const Container = styled.div`
 
 interface IButtons {
   toggleModal: () => void;
+  callback: () => void;
   buttonText: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
 }
 
-const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText }) => {
+const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoading, isDisabled }) => {
   return (
     <Container>
       <Button variant="secondary" text="Return" onClick={toggleModal} />
-      <Button text={buttonText} toggleModal={toggleModal} />
-      {/* <ChallengeButton buttonText={buttonText} toggleModal={toggleModal} /> */}
-      {/* <RemoveButton buttonText={buttonText} toggleModal={toggleModal} /> */}
+      <EnsureChain>
+        <Button
+          text={buttonText}
+          onClick={() => {
+            callback();
+          }}
+          isLoading={isLoading}
+          disabled={isDisabled}
+        />
+      </EnsureChain>
     </Container>
   );
 };

web/src/components/ActionButton/Modal/ChallengeItemModal.tsx

@@ -0,0 +1,163 @@
+import React, { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useClickAway } from "react-use";
+import { Overlay } from "components/Overlay";
+import Header from "./Header";
+import Buttons from "./Buttons";
+import DepositRequired from "./DepositRequired";
+import { StyledModal } from "./StyledModal";
+import Info from "./Info";
+import {
+  prepareWriteCurateV2,
+  useCurateV2GetArbitratorExtraData,
+  useCurateV2RemovalChallengeBaseDeposit,
+  useCurateV2SubmissionChallengeBaseDeposit,
+} from "hooks/contracts/generated";
+import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
+import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { IBaseModal } from ".";
+import EvidenceUpload, { Evidence } from "./EvidenceUpload";
+import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+
+const ReStyledModal = styled(StyledModal)`
+  gap: 32px;
+`;
+
+export enum ChallengeType {
+  Submission,
+  Removal,
+}
+interface IChallengeItemModal extends IBaseModal {
+  challengeType: ChallengeType;
+}
+
+const alertMessage =
+  "When you challenge an item a dispute starts. Random jurors are selected to decide if" +
+  " the item should be removed or included. In case the challenger wins the deposit is" +
+  " reimbursed, in case the challenger loses the deposit is lost. Make sure you read" +
+  " and understand the Policy before proceeding.";
+
+const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
+  toggleModal,
+  itemId,
+  registryAddress,
+  isItem,
+  challengeType,
+  refetch,
+}) => {
+  const containerRef = useRef(null);
+  useClickAway(containerRef, () => toggleModal());
+  const { address } = useAccount();
+  const publicClient = usePublicClient();
+  const { data: walletClient } = useWalletClient();
+
+  const [isChallengingItem, setIsChallengingItem] = useState(false);
+  const [isEvidenceUploading, setIsEvidenceUploading] = useState(false);
+  const [evidence, setEvidence] = useState<Evidence>();
+
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useCurateV2GetArbitratorExtraData({
+    // @ts-ignore
+    address: registryAddress,
+  });
+
+  const { data: submissionChallengeDeposit, isLoading: isSubmissionChallengeDepositLoading } =
+    //@ts-ignore
+    useCurateV2SubmissionChallengeBaseDeposit({ address: registryAddress });
+
+  const { data: removalChallengeDeposit, isLoading: isRemovalChallengeDepositLoading } =
+    useCurateV2RemovalChallengeBaseDeposit({
+      //@ts-ignore
+      address: registryAddress,
+    });
+
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const depositRequired = useMemo(() => {
+    if (!arbitrationCost || !submissionChallengeDeposit || !removalChallengeDeposit) return 0n;
+    return (
+      (arbitrationCost as bigint) +
+      (challengeType === ChallengeType.Submission ? submissionChallengeDeposit : removalChallengeDeposit)
+    );
+  }, [arbitrationCost, removalChallengeDeposit, submissionChallengeDeposit]);
+
+  const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
+
+  const isLoading = useMemo(
+    () =>
+      isBalanceLoading ||
+      isLoadingArbCost ||
+      isSubmissionChallengeDepositLoading ||
+      isRemovalChallengeDepositLoading ||
+      isLoadingExtradata ||
+      isChallengingItem ||
+      isEvidenceUploading,
+    [
+      isBalanceLoading,
+      isLoadingArbCost,
+      isSubmissionChallengeDepositLoading,
+      isRemovalChallengeDepositLoading,
+      isLoadingArbCost,
+      isChallengingItem,
+      isEvidenceUploading,
+    ]
+  );
+
+  const isDisabled = useMemo(() => {
+    if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
+    return userBalance?.value < depositRequired;
+  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
+
+  return (
+    <>
+      <Overlay />
+      <ReStyledModal ref={containerRef}>
+        <Header text={`Challenge ${isItem ? "Item" : "List"}`} />
+        <DepositRequired value={depositRequired} />
+        <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
+        <Info alertMessage={alertMessage} />
+        <Buttons
+          buttonText="Challenge"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isChallengingItem}
+          isLoading={isLoading}
+          callback={async () => {
+            setIsChallengingItem(true);
+
+            const evidenceFile = new File([JSON.stringify(evidence)], "evidence.json", {
+              type: "application/json",
+            });
+
+            uploadFileToIPFS(evidenceFile)
+              .then(async (res) => {
+                if (res.status === 200 && walletClient) {
+                  const response = await res.json();
+                  const fileURI = response["cids"][0];
+
+                  const { request } = await prepareWriteCurateV2({
+                    //@ts-ignore
+                    address: registryAddress,
+                    functionName: "challengeRequest",
+                    args: [itemId as `0x${string}`, fileURI],
+                    value: depositRequired,
+                  });
+
+                  wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
+                    console.log({ res });
+                    refetch();
+                    toggleModal();
+                  });
+                }
+              })
+              .catch((err) => console.log(err))
+              .finally(() => setIsChallengingItem(false));
+          }}
+        />
+      </ReStyledModal>
+    </>
+  );
+};
+
+export default ChallengeItemModal;

web/src/components/Modal/DepositRequired.tsx → web/src/components/ActionButton/Modal/DepositRequired.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Card } from "@kleros/ui-components-library";
 import styled from "styled-components";
+import { formatETH } from "utils/format";
 
 const StyledCard = styled(Card)`
   display: flex;
@@ -28,11 +29,11 @@ const StyledQuantity = styled.p`
   font-weight: 600;
 `;
 
-const FeeRequired: React.FC = () => {
+const FeeRequired: React.FC<{ value: bigint }> = ({ value }) => {
   return (
     <StyledCard>
       <StyledHeader>Deposit required</StyledHeader>
-      <StyledQuantity>0.00003 ETH</StyledQuantity>
+      <StyledQuantity>{formatETH(value ?? 1, 5)} ETH</StyledQuantity>
     </StyledCard>
   );
 };