kleros · kemuru · May 24, 2024 · May 21, 2024 · May 21, 2024 · May 22, 2024
diff --git a/subgraph/schema.graphql b/subgraph/schema.graphql
@@ -149,6 +149,7 @@ type ItemProp @entity {
 
 type FieldProp @entity {
   id: ID!
+  position: BigInt!
   type: String!
   label: String!
   description: String!

diff --git a/subgraph/src/Curate.ts b/subgraph/src/Curate.ts
@@ -1,5 +1,5 @@
 /* eslint-disable prefer-const */
-import { json, log } from "@graphprotocol/graph-ts";
+import { BigInt, json, log } from "@graphprotocol/graph-ts";
 import { Item, Request, Registry, FieldProp } from "../generated/schema";
 
 import {
@@ -219,6 +219,7 @@ export function handleListMetadataSet(event: ListMetadataSet): void {
     let fieldPropId = registry.id + "@" + checkedLabel;
     let fieldProp = new FieldProp(fieldPropId);
 
+    fieldProp.position = BigInt.fromI32(i);
     fieldProp.type = JSONValueToMaybeString(_type);
     fieldProp.label = JSONValueToMaybeString(label);
     fieldProp.description = JSONValueToMaybeString(description);

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -1,11 +1,8 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, 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,
@@ -19,8 +16,9 @@ import { wrapWithToast } from "utils/wrapWithToast";
 import { IBaseModal } from ".";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+import Modal from "components/Modal";
 
-const ReStyledModal = styled(StyledModal)`
+const ReStyledModal = styled(Modal)`
   gap: 32px;
 `;
 
@@ -46,8 +44,6 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
   challengeType,
   refetch,
 }) => {
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleModal());
   const { address } = useAccount();
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
@@ -111,52 +107,50 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
   }, [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) => {
+    <ReStyledModal {...{ toggleModal }}>
+      <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>
-    </>
+                  })
+                  .finally(() => setIsChallengingItem(false));
+              }
+            })
+            .catch((err) => console.log(err));
+        }}
+      />
+    </ReStyledModal>
   );
 };
 

diff --git a/web/src/components/ActionButton/Modal/EvidenceUpload.tsx b/web/src/components/ActionButton/Modal/EvidenceUpload.tsx
@@ -6,6 +6,7 @@ import LabeledInput from "components/LabeledInput";
 import { responsiveSize } from "styles/responsiveSize";
 import { OPTIONS as toastOptions } from "utils/wrapWithToast";
 import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+import { SUPPORTED_FILE_TYPES } from "src/consts";
 
 const Container = styled.div`
   width: 100%;
@@ -69,7 +70,7 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
   }, [title, description, fileURI]);
 
   const handleFileUpload = (file: File) => {
-    if (file?.type !== "application/pdf") {
+    if (!SUPPORTED_FILE_TYPES.includes(file?.type)) {
       toast.error("File type not supported", toastOptions);
       return;
     }

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -1,11 +1,8 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, 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 { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient, useWalletClient } from "wagmi";
@@ -18,8 +15,9 @@ import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { wrapWithToast } from "utils/wrapWithToast";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
+import Modal from "components/Modal";
 
-const ReStyledModal = styled(StyledModal)`
+const ReStyledModal = styled(Modal)`
   gap: 32px;
 `;
 
@@ -32,8 +30,6 @@ const alertMessage = (isItem: boolean) =>
   ` Make sure you read and understand the Policy before proceeding.`;
 
 const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddress, itemId, refetch }) => {
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleModal());
   const { address } = useAccount();
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
@@ -87,52 +83,50 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
   }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
 
   return (
-    <>
-      <Overlay />
-      <ReStyledModal ref={containerRef}>
-        <Header text={`Remove ${isItem ? "Item" : "List"}`} />
-        <DepositRequired value={depositRequired ?? 0} />
-        <EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
-        <Info alertMessage={alertMessage(isItem)} />
-        <Buttons
-          buttonText="Remove"
-          toggleModal={toggleModal}
-          isDisabled={isDisabled || isRemovingItem}
-          isLoading={isLoading}
-          callback={() => {
-            setIsRemovingItem(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: "removeItem",
-                    args: [itemId as `0x${string}`, fileURI],
-                    value: depositRequired,
-                  });
-
-                  wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((res) => {
+    <ReStyledModal {...{ toggleModal }}>
+      <Header text={`Remove ${isItem ? "Item" : "List"}`} />
+      <DepositRequired value={depositRequired ?? 0} />
+      <EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
+      <Info alertMessage={alertMessage(isItem)} />
+      <Buttons
+        buttonText="Remove"
+        toggleModal={toggleModal}
+        isDisabled={isDisabled || isRemovingItem}
+        isLoading={isLoading}
+        callback={() => {
+          setIsRemovingItem(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: "removeItem",
+                  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(() => setIsRemovingItem(false));
-          }}
-        />
-      </ReStyledModal>
-    </>
+                  })
+                  .finally(() => setIsRemovingItem(false));
+              }
+            })
+            .catch((err) => console.log(err));
+        }}
+      />
+    </ReStyledModal>
   );
 };
 

diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -1,11 +1,8 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, 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 { IBaseModal } from ".";
 import { useAccount, useBalance, usePublicClient } from "wagmi";
@@ -18,8 +15,9 @@ import {
 import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useItemDetailsQuery } from "hooks/queries/useItemDetailsQuery";
+import Modal from "components/Modal";
 
-const ReStyledModal = styled(StyledModal)`
+const ReStyledModal = styled(Modal)`
   gap: 32px;
 `;
 
@@ -32,8 +30,6 @@ const alertMessage = (isItem: boolean) =>
   ` Make sure you read and understand the Policy before proceeding.`;
 
 const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAddress, itemId, refetch }) => {
-  const containerRef = useRef(null);
-  useClickAway(containerRef, () => toggleModal());
   const { address } = useAccount();
   const publicClient = usePublicClient();
   const [isResubmittingItem, setIsResubmittingItem] = useState(false);
@@ -79,38 +75,35 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
   const { writeAsync: resubmitItem } = useCurateV2AddItem(config);
 
   return (
-    <>
-      <Overlay />
-      <ReStyledModal ref={containerRef}>
-        <Header text={`Resubmit ${isItem ? "Item" : "List"}`} />
-        <DepositRequired value={depositRequired ?? 0} />
-        <Info alertMessage={alertMessage(isItem)} />
-        <Buttons
-          buttonText="Resubmit"
-          toggleModal={toggleModal}
-          isDisabled={isDisabled || isError || isResubmittingItem}
-          isLoading={isLoading}
-          callback={() => {
-            if (!resubmitItem) return;
-            setIsResubmittingItem(true);
-            wrapWithToast(
-              async () =>
-                await resubmitItem().then((response) => {
-                  return response.hash;
-                }),
-              publicClient
-            )
-              .then((res) => {
-                console.log({ res });
-                refetch();
-                toggleModal();
-              })
-              .catch(() => {})
-              .finally(() => setIsResubmittingItem(false));
-          }}
-        />
-      </ReStyledModal>
-    </>
+    <ReStyledModal {...{ toggleModal }}>
+      <Header text={`Resubmit ${isItem ? "Item" : "List"}`} />
+      <DepositRequired value={depositRequired ?? 0} />
+      <Info alertMessage={alertMessage(isItem)} />
+      <Buttons
+        buttonText="Resubmit"
+        toggleModal={toggleModal}
+        isDisabled={isDisabled || isError || isResubmittingItem}
+        isLoading={isLoading}
+        callback={() => {
+          if (!resubmitItem) return;
+          setIsResubmittingItem(true);
+          wrapWithToast(
+            async () =>
+              await resubmitItem().then((response) => {
+                return response.hash;
+              }),
+            publicClient
+          )
+            .then((res) => {
+              console.log({ res });
+              refetch();
+              toggleModal();
+            })
+            .catch(() => {})
+            .finally(() => setIsResubmittingItem(false));
+        }}
+      />
+    </ReStyledModal>
   );
 };