Merge pull request #61 from ShubhamParkhi/master

fix(web): disable button if insufficient balance
kleros · Oct 16, 2024 · 847a9dc · 847a9dc
2 parents d98ef63 + cfdb2d9
commit 847a9dc
Show file tree

Hide file tree

Showing 7 changed files with 291 additions and 139 deletions.
diff --git a/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx b/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const ErrorButtonMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+  margin: 12px;
+  color: ${({ theme }) => theme.error};
+  font-size: 14px;
+`;
diff --git a/web/src/components/ActionButton/Modal/Buttons/index.tsx b/web/src/components/ActionButton/Modal/Buttons/index.tsx
@@ -3,6 +3,8 @@ import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { EnsureChain } from "components/EnsureChain";
 import { EnsureAuth } from "components/EnsureAuth";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "./ErrorButtonMessage";
 
 const Container = styled.div`
   display: flex;
@@ -12,28 +14,49 @@ const Container = styled.div`
   gap: 16px;
 `;
 
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 interface IButtons {
   toggleModal: () => void;
   callback: () => void;
   buttonText: string;
   isLoading?: boolean;
   isDisabled?: boolean;
+  insufficientBalance: boolean;
 }
 
-const Buttons: React.FC<IButtons> = ({ toggleModal, buttonText, callback, isLoading, isDisabled }) => {
+const Buttons: React.FC<IButtons> = ({
+  toggleModal,
+  buttonText,
+  callback,
+  isLoading,
+  isDisabled,
+  insufficientBalance,
+}) => {
   return (
     <Container>
       <Button variant="secondary" text="Return" onClick={toggleModal} />
       <EnsureChain>
         <EnsureAuth>
-          <Button
-            text={buttonText}
-            onClick={() => {
-              callback();
-            }}
-            isLoading={isLoading}
-            disabled={isDisabled}
-          />
+          <ButtonsContainer>
+            <Button
+              text={buttonText}
+              onClick={() => {
+                callback();
+              }}
+              isLoading={isLoading}
+              disabled={isDisabled}
+            />
+            {insufficientBalance ? (
+              <ErrorButtonMessage>
+                <ClosedCircleIcon /> Insufficient balance
+              </ErrorButtonMessage>
+            ) : null}
+          </ButtonsContainer>
         </EnsureAuth>
       </EnsureChain>
     </Container>

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -78,13 +78,22 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
 
-  const isDisabled = useMemo(() => {
-    if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
+  const insufficientBalance = useMemo(() => {
+    if (!userBalance || !depositRequired) return true;
     return userBalance?.value < depositRequired;
-  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
+  }, [userBalance, depositRequired]);
 
-  const { data: config } = useSimulateCurateV2ChallengeRequest({
-    query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled },
+  const isDisabled = useMemo(() => {
+    if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
+    return insufficientBalance;
+  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid, insufficientBalance]);
+
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateV2ChallengeRequest({
+    query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled && !insufficientBalance },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
@@ -95,20 +104,22 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
   const isLoading = useMemo(
     () =>
       isBalanceLoading ||
-      isLoadingArbCost ||
       isSubmissionChallengeDepositLoading ||
       isRemovalChallengeDepositLoading ||
       isLoadingExtradata ||
       isChallengingItem ||
-      isEvidenceUploading,
+      isEvidenceUploading ||
+      isConfigLoading ||
+      isLoadingArbCost,
     [
       isBalanceLoading,
       isLoadingArbCost,
       isSubmissionChallengeDepositLoading,
       isRemovalChallengeDepositLoading,
-      isLoadingArbCost,
+      isLoadingExtradata,
       isChallengingItem,
       isEvidenceUploading,
+      isConfigLoading,
     ]
   );
 
@@ -118,23 +129,25 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       <DepositRequired value={depositRequired} />
       <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
       <Info alertMessage={alertMessage} />
-      <Buttons
-        buttonText="Challenge"
-        toggleModal={toggleModal}
-        isDisabled={isDisabled || isChallengingItem}
-        isLoading={isLoading}
-        callback={() => {
-          if (challengeRequest && publicClient && config) {
-            setIsChallengingItem(true);
-            wrapWithToast(async () => await challengeRequest(config.request), publicClient)
-              .then(() => {
-                refetch();
-                toggleModal();
-              })
-              .finally(() => setIsChallengingItem(false));
-          }
-        }}
-      />
+      <div>
+        <Buttons
+          buttonText="Challenge"
+          isDisabled={isDisabled || isChallengingItem || isConfigError}
+          isLoading={isLoading && !insufficientBalance}
+          callback={() => {
+            if (challengeRequest && publicClient && config) {
+              setIsChallengingItem(true);
+              wrapWithToast(async () => await challengeRequest(config.request), publicClient)
+                .then(() => {
+                  refetch();
+                  toggleModal();
+                })
+                .finally(() => setIsChallengingItem(false));
+            }
+          }}
+          {...{ insufficientBalance, toggleModal }}
+        />
+      </div>
     </ReStyledModal>
   );
 };

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -57,60 +57,74 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
 
   const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
 
+  const insufficientBalance = useMemo(() => {
+    if (!userBalance || !depositRequired) return true;
+    return userBalance?.value < depositRequired;
+  }, [userBalance, depositRequired]);
+
   const isDisabled = useMemo(() => {
     if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
     return userBalance?.value < depositRequired;
   }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
 
-  const { data: config } = useSimulateCurateV2RemoveItem({
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateV2RemoveItem({
     query: { enabled: !isDisabled && !isUndefined(evidence) },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
   });
 
   const { writeContractAsync: removeItem } = useWriteCurateV2RemoveItem();
-  const isLoading = useMemo(
-    () =>
+
+  const isLoading = useMemo(() => {
+    return (
       isBalanceLoading ||
-      isLoadingArbCost ||
       isRemovalDepositLoading ||
-      isLoadingArbCost ||
+      isLoadingExtradata ||
       isRemovingItem ||
-      isEvidenceUploading,
-    [
-      isBalanceLoading,
-      isLoadingArbCost,
-      isRemovalDepositLoading,
-      isLoadingExtradata,
-      isRemovingItem,
-      isEvidenceUploading,
-    ]
-  );
+      isEvidenceUploading ||
+      isConfigLoading ||
+      isLoadingArbCost
+    );
+  }, [
+    isBalanceLoading,
+    isLoadingArbCost,
+    isRemovalDepositLoading,
+    isLoadingExtradata,
+    isRemovingItem,
+    isEvidenceUploading,
+    isConfigLoading,
+  ]);
 
   return (
     <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={() => {
-          if (removeItem && publicClient && config) {
-            setIsRemovingItem(true);
-            wrapWithToast(async () => await removeItem(config.request), publicClient)
-              .then((res) => {
-                refetch();
-                toggleModal();
-              })
-              .finally(() => setIsRemovingItem(false));
-          }
-        }}
-      />
+      <div>
+        <Buttons
+          buttonText="Remove"
+          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError}
+          isLoading={isLoading && !insufficientBalance}
+          callback={() => {
+            if (removeItem && publicClient && config) {
+              setIsRemovingItem(true);
+              wrapWithToast(async () => await removeItem(config.request), publicClient)
+                .then((res) => {
+                  refetch();
+                  toggleModal();
+                })
+                .finally(() => setIsRemovingItem(false));
+            }
+          }}
+          {...{ toggleModal, insufficientBalance }}
+        />
+      </div>
     </ReStyledModal>
   );
 };

diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -36,11 +36,19 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
   const { data: itemData, isLoading: isItemDataLoading } = useItemDetailsQuery(`${itemId}@${registryAddress}`);
 
-  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
+  const {
+    data: arbitratorExtraData,
+    isLoading: isLoadingExtradata,
+    isError: isErrorExtradata,
+  } = useReadCurateV2GetArbitratorExtraData({
     address: registryAddress,
   });
 
-  const { data: removalDeposit, isLoading: isSubmissionDepositLoading } = useReadCurateV2SubmissionBaseDeposit({
+  const {
+    data: removalDeposit,
+    isLoading: isSubmissionDepositLoading,
+    isError: isErrorSubmissionDeposit,
+  } = useReadCurateV2SubmissionBaseDeposit({
     address: registryAddress,
   });
 
@@ -51,20 +59,28 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
     return (arbitrationCost as bigint) + removalDeposit;
   }, [arbitrationCost, removalDeposit]);
 
+  const insufficientBalance = useMemo(() => {
+    if (!userBalance || !depositRequired) return true;
+    return userBalance?.value < depositRequired;
+  }, [userBalance, depositRequired]);
+
   const isLoading = useMemo(
     () =>
-      isBalanceLoading || isLoadingArbCost || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
-    [isBalanceLoading, isLoadingArbCost, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
+      isBalanceLoading || isItemDataLoading || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
+    [isBalanceLoading, isItemDataLoading, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
   );
 
   const isDisabled = useMemo(() => {
-    if (!userBalance || !depositRequired) return true;
-    return userBalance?.value < depositRequired;
-  }, [depositRequired, userBalance]);
+    return Boolean(insufficientBalance || isErrorExtradata || isErrorSubmissionDeposit);
+  }, [insufficientBalance, isErrorExtradata, isErrorSubmissionDeposit]);
 
-  const { data: config, isError } = useSimulateCurateV2AddItem({
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateV2AddItem({
     query: {
-      enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
+      enabled: address && registryAddress && !isLoading && !isDisabled,
     },
     address: registryAddress,
     args: [itemData?.item?.data ?? ""],
@@ -78,23 +94,25 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
       <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 || !config?.request || !publicClient) return;
-          setIsResubmittingItem(true);
-          wrapWithToast(async () => await resubmitItem(config.request), publicClient)
-            .then((res) => {
-              refetch();
-              toggleModal();
-            })
-            .catch(() => {})
-            .finally(() => setIsResubmittingItem(false));
-        }}
-      />
+      <div>
+        <Buttons
+          buttonText="Resubmit"
+          isLoading={(isConfigLoading && !insufficientBalance && isLoadingArbCost) || isLoading}
+          isDisabled={isDisabled || isConfigError || isLoading}
+          callback={() => {
+            if (!resubmitItem || !config?.request || !publicClient) return;
+            setIsResubmittingItem(true);
+            wrapWithToast(async () => await resubmitItem(config.request), publicClient)
+              .then((res) => {
+                refetch();
+                toggleModal();
+              })
+              .catch(() => {})
+              .finally(() => setIsResubmittingItem(false));
+          }}
+          {...{ toggleModal, insufficientBalance }}
+        />
+      </div>
     </ReStyledModal>
   );
 };