Merge pull request #37 from kleros/fix/disable-action-button-properly

fix: diable-action-button-properly
kleros · Jun 10, 2024 · 3ba2584 · 3ba2584
2 parents 91a0053 + a6fa163
commit 3ba2584
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 106 deletions.
diff --git a/web/src/components/ActionButton/ExecuteButton.tsx b/web/src/components/ActionButton/ExecuteButton.tsx
@@ -10,8 +10,9 @@ interface IExecuteButton {
   registryAddress: Address;
   itemId: string;
   refetch: () => void;
+  disabled?: boolean;
 }
-const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch }) => {
+const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refetch, disabled }) => {
   const publicClient = usePublicClient();
   const [isExecuting, setIsExecuting] = useState(false);
 
@@ -26,7 +27,7 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
     <EnsureChain>
       <Button
         text="Execute"
-        disabled={isLoading || isError || isExecuting || isPreparingConfig}
+        disabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
         isLoading={isLoading || isExecuting}
         onClick={() => {
           if (!executeRequest) return;

diff --git a/web/src/components/ActionButton/Modal/Buttons/index.tsx b/web/src/components/ActionButton/Modal/Buttons/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { EnsureChain } from "components/EnsureChain";
+import { EnsureAuth } from "components/EnsureAuth";
 
 const Container = styled.div`
   display: flex;
@@ -24,14 +25,16 @@ const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoad
     <Container>
       <Button variant="secondary" text="Return" onClick={toggleModal} />
       <EnsureChain>
-        <Button
-          text={buttonText}
-          onClick={() => {
-            callback();
-          }}
-          isLoading={isLoading}
-          disabled={isDisabled}
-        />
+        <EnsureAuth>
+          <Button
+            text={buttonText}
+            onClick={() => {
+              callback();
+            }}
+            isLoading={isLoading}
+            disabled={isDisabled}
+          />
+        </EnsureAuth>
       </EnsureChain>
     </Container>
   );

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -17,7 +17,6 @@ import { IBaseModal } from ".";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
 import Modal from "components/Modal";
-import { EnsureAuth } from "components/EnsureAuth";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -113,46 +112,44 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       <DepositRequired value={depositRequired} />
       <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
       <Info alertMessage={alertMessage} />
-      <EnsureAuth>
-        <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();
-                    })
-                    .finally(() => setIsChallengingItem(false));
-                }
-              })
-              .catch((err) => console.log(err));
-          }}
-        />
-      </EnsureAuth>
+      <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();
+                  })
+                  .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
@@ -58,7 +58,7 @@ interface IEvidenceUpload {
 const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceUploading }) => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [fileURI, setFileUri] = useState("");
+  const [fileURI, setFileURI] = useState("");
 
   useEffect(() => {
     setEvidence({
@@ -79,7 +79,7 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
       .then(async (res) => {
         const response = await res.json();
         const fileURI = response["cids"][0];
-        setFileUri(fileURI);
+        setFileURI(fileURI);
       })
       .catch((err) => console.log(err))
       .finally(() => setIsEvidenceUploading(false));

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -16,7 +16,6 @@ import { wrapWithToast } from "utils/wrapWithToast";
 import EvidenceUpload, { Evidence } from "./EvidenceUpload";
 import { uploadFileToIPFS } from "utils/uploadFileToIPFS";
 import Modal from "components/Modal";
-import { EnsureAuth } from "components/EnsureAuth";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -89,46 +88,44 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <DepositRequired value={depositRequired ?? 0} />
       <EvidenceUpload setEvidence={setEvidence} setIsEvidenceUploading={setIsEvidenceUploading} />
       <Info alertMessage={alertMessage(isItem)} />
-      <EnsureAuth>
-        <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();
-                    })
-                    .finally(() => setIsRemovingItem(false));
-                }
-              })
-              .catch((err) => console.log(err));
-          }}
-        />
-      </EnsureAuth>
+      <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();
+                  })
+                  .finally(() => setIsRemovingItem(false));
+              }
+            })
+            .catch((err) => console.log(err));
+        }}
+      />
     </ReStyledModal>
   );
 };

diff --git a/web/src/components/ActionButton/index.tsx b/web/src/components/ActionButton/index.tsx
@@ -11,6 +11,7 @@ import Modal, { getModalButtonText } from "./Modal";
 import ExecuteButton from "./ExecuteButton";
 import { useCurateV2ChallengePeriodDuration } from "hooks/contracts/generated";
 import { useQueryClient } from "@tanstack/react-query";
+import { isUndefined } from "src/utils";
 
 const StyledKlerosIcon = styled(KlerosIcon)`
   path {
@@ -48,17 +49,26 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
   }, [itemId, registryAddress, queryClient]);
 
   let ButtonComponent: JSX.Element | null = useMemo(() => {
+    const disabled = isUndefined(registryAddress) || isUndefined(itemId) || isLoading;
+
     if (status === Status.Disputed)
       return (
         <a href={`${COURT_SITE}/cases/${disputeId}/overview`} target="_blank" rel="noreferrer">
-          <Button disabled={isLoading} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
+          <Button disabled={disabled} Icon={StyledKlerosIcon} text={`View Case #${disputeId ?? 0}`} />
         </a>
       );
 
     if (isExecutable && ![Status.Included, Status.Removed].includes(status))
-      return <ExecuteButton {...{ registryAddress, itemId, refetch }} />;
+      return <ExecuteButton {...{ registryAddress, itemId, refetch, disabled }} />;
 
-    return <Button variant="secondary" text={getModalButtonText(status ?? 0, isItem)} onClick={toggleModal} />;
+    return (
+      <Button
+        variant="secondary"
+        disabled={disabled}
+        text={getModalButtonText(status ?? 0, isItem)}
+        onClick={toggleModal}
+      />
+    );
   }, [isExecutable, registryAddress, status, itemId, isLoading, disputeId, isItem, toggleModal, refetch]);
 
   return (

diff --git a/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx b/web/src/pages/SubmitList/ListParameters/LogoUpload.tsx
@@ -41,16 +41,31 @@ const LogoUpload: React.FC = () => {
       toast.error("File type not supported", toastOptions);
       return;
     }
-    setIsLogoUploading(true);
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const image = new Image();
+      image.onload = () => {
+        if (image.width !== image.height) {
+          toast.error("Image aspect ratio must be 1:1", toastOptions);
+          return;
+        }
 
-    uploadFileToIPFS(file)
-      .then(async (res) => {
-        const response = await res.json();
-        const logoURI = response["cids"][0];
-        setListMetadata({ ...listMetadata, logoURI });
-      })
-      .catch((err) => console.log(err))
-      .finally(() => setIsLogoUploading(false));
+        setIsLogoUploading(true);
+
+        uploadFileToIPFS(file)
+          .then(async (res) => {
+            const response = await res.json();
+            const logoURI = response.cids[0];
+            setListMetadata({ ...listMetadata, logoURI });
+          })
+          .catch((err) => console.log(err))
+          .finally(() => setIsLogoUploading(false));
+      };
+
+      image.src = event.target?.result as string;
+    };
+
+    reader.readAsDataURL(file);
   };
   return (
     <Container>