From bb5f95b81fca2105deb9aef6528e4b7e293403ec Mon Sep 17 00:00:00 2001
From: Shubham Parkhi <shubhamparkhi10@gmail.com>
Date: Wed, 9 Oct 2024 05:59:56 +0530
Subject: [PATCH 01/10] fix(web): disable button if insufficient balance

---
 .../ActionButton/Modal/ResubmitModal.tsx      | 16 +++++++---
 .../NavigationButtons/SubmitItemButton.tsx    | 26 +++++++++++++----
 .../NavigationButtons/SubmitListButton.tsx    | 29 ++++++++++++++++---
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index d3a758e..67ebbad 100644
--- 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,
   });
 
@@ -59,8 +67,8 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
 
   const isDisabled = useMemo(() => {
     if (!userBalance || !depositRequired) return true;
-    return userBalance?.value < depositRequired;
-  }, [depositRequired, userBalance]);
+    return userBalance?.value < depositRequired && isErrorExtradata && isErrorSubmissionDeposit;
+  }, [depositRequired, userBalance, isErrorExtradata, isErrorSubmissionDeposit]);
 
   const { data: config, isError } = useSimulateCurateV2AddItem({
     query: {
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index f142a1e..6b87f20 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
-import { usePublicClient } from "wagmi";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
 import { EnsureChain } from "components/EnsureChain";
 import { useSubmitItemContext } from "context/SubmitItemContext";
 import { wrapWithToast } from "utils/wrapWithToast";
@@ -16,14 +16,27 @@ const StyledButton = styled(Button)``;
 const SubmitItemButton: React.FC = () => {
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
   const publicClient = usePublicClient();
+  const { address } = useAccount();
   const navigate = useNavigate();
 
   const { fields, submissionDeposit, resetItemData } = useSubmitItemContext();
   const { id: registryAddress } = useRegistryDetailsContext();
 
-  const { data: config } = useSimulateCurateV2AddItem({
+  const { data: balanceData } = useBalance({
+    address: address as `0x${string}` | undefined,
+  });
+
+  const insufficientBalance = useMemo(() => {
+    return balanceData?.value === BigInt(0);
+  }, [balanceData]);
+
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateV2AddItem({
     query: {
-      enabled: Boolean(fields && submissionDeposit && registryAddress),
+      enabled: Boolean(fields && submissionDeposit && registryAddress && !insufficientBalance),
     },
     address: registryAddress as `0x${string}`,
     args: [JSON.stringify(fields)],
@@ -32,14 +45,17 @@ const SubmitItemButton: React.FC = () => {
 
   const { writeContractAsync: submitItem, isLoading } = useWriteCurateV2AddItem();
 
-  const isButtonDisabled = useMemo(() => isSubmittingItem, [isSubmittingItem]);
+  const isButtonDisabled = useMemo(
+    () => isSubmittingItem || isConfigLoading || isConfigError || insufficientBalance,
+    [isSubmittingItem, isConfigLoading, isConfigError, insufficientBalance]
+  );
 
   return (
     <EnsureChain>
       <StyledButton
         text="Submit Item"
         disabled={isButtonDisabled}
-        isLoading={isLoading}
+        isLoading={isLoading || isConfigLoading}
         onClick={() => {
           if (submitItem && publicClient && config) {
             setIsSubmittingItem(true);
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index ab86a45..87a8f06 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -52,7 +52,11 @@ const SubmitListButton: React.FC = () => {
 
   const listParams = useMemo(() => constructListParams(listData, listMetadata), [listData, listMetadata]);
 
-  const { data: config } = useSimulateCurateFactoryDeploy({
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateFactoryDeploy({
     query: {
       enabled: areListParamsValid(listParams),
     },
@@ -156,8 +160,19 @@ const SubmitListButton: React.FC = () => {
       isLoadingArbCost ||
       isEstimatingCost ||
       isLoadingExtradata ||
-      !totalCostToSubmit,
-    [isSubmittingList, listParams, isLoadingArbCost, isEstimatingCost, isLoadingExtradata, totalCostToSubmit]
+      !totalCostToSubmit ||
+      isConfigLoading ||
+      isConfigError,
+    [
+      isSubmittingList,
+      listParams,
+      isLoadingArbCost,
+      isEstimatingCost,
+      isLoadingExtradata,
+      totalCostToSubmit,
+      isConfigLoading,
+      isConfigError,
+    ]
   );
 
   const handleDeploy = () => {
@@ -185,7 +200,13 @@ const SubmitListButton: React.FC = () => {
     <Button text="View List" onClick={() => navigate(`/lists/${submittedListItemId}/list/1/desc/all`)} />
   ) : (
     <EnsureChain>
-      <Button text="Create List" Icon={StyledCheckCircle} disabled={isButtonDisabled} onClick={handleDeploy} />
+      <Button
+        text="Create List"
+        isLoading={isConfigLoading || isSubmittingList || isLoadingArbCost || isEstimatingCost || isLoadingExtradata}
+        Icon={StyledCheckCircle}
+        disabled={isButtonDisabled}
+        onClick={handleDeploy}
+      />
     </EnsureChain>
   );
 };

From f81f70126a3984a38d8a19887c2d9595da48cefd Mon Sep 17 00:00:00 2001
From: Shubham Parkhi <shubhamparkhi10@gmail.com>
Date: Fri, 11 Oct 2024 05:06:05 +0530
Subject: [PATCH 02/10] fix(web): feedback for insufficient balance

---
 .../ActionButton/Modal/ChallengeItemModal.tsx | 60 ++++++++++++-------
 .../ActionButton/Modal/RemoveModal.tsx        | 60 ++++++++++++-------
 .../ActionButton/Modal/ResubmitModal.tsx      | 53 +++++++++-------
 .../NavigationButtons/SubmitItemButton.tsx    | 60 ++++++++++++-------
 .../NavigationButtons/SubmitListButton.tsx    | 42 ++++++++++---
 5 files changed, 185 insertions(+), 90 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
index b84d3f6..98c73cc 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -18,6 +18,8 @@ import {
   useSimulateCurateV2ChallengeRequest,
   useWriteCurateV2ChallengeRequest,
 } from "hooks/useContract";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -78,12 +80,21 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const isEvidenceValid = useMemo(() => evidence?.name !== "" && evidence?.description !== "", [evidence]);
 
+  const insufficientBalance = useMemo(() => {
+    if (!userBalance || !depositRequired) return true;
+    return Boolean(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 } = useSimulateCurateV2ChallengeRequest({
+  const {
+    data: config,
+    isLoading: isConfigLoading,
+    isError: isConfigError,
+  } = useSimulateCurateV2ChallengeRequest({
     query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
@@ -100,15 +111,17 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       isRemovalChallengeDepositLoading ||
       isLoadingExtradata ||
       isChallengingItem ||
-      isEvidenceUploading,
+      isEvidenceUploading ||
+      isConfigLoading,
     [
       isBalanceLoading,
       isLoadingArbCost,
       isSubmissionChallengeDepositLoading,
       isRemovalChallengeDepositLoading,
-      isLoadingArbCost,
+      isLoadingExtradata,
       isChallengingItem,
       isEvidenceUploading,
+      isConfigLoading,
     ]
   );
 
@@ -118,23 +131,30 @@ 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"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isChallengingItem || isConfigError}
+          isLoading={isLoading}
+          callback={() => {
+            if (challengeRequest && publicClient && config) {
+              setIsChallengingItem(true);
+              wrapWithToast(async () => await challengeRequest(config.request), publicClient)
+                .then(() => {
+                  refetch();
+                  toggleModal();
+                })
+                .finally(() => setIsChallengingItem(false));
+            }
+          }}
+        />
+        {insufficientBalance && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> Insufficient balance
+          </ErrorButtonMessage>
+        )}
+      </div>
     </ReStyledModal>
   );
 };
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index a7238d2..1f262a3 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -17,6 +17,8 @@ import {
   useSimulateCurateV2RemoveItem,
   useWriteCurateV2RemoveItem,
 } from "hooks/useContract";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -57,12 +59,21 @@ 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 Boolean(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)],
@@ -75,9 +86,10 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       isBalanceLoading ||
       isLoadingArbCost ||
       isRemovalDepositLoading ||
-      isLoadingArbCost ||
+      isLoadingExtradata ||
       isRemovingItem ||
-      isEvidenceUploading,
+      isEvidenceUploading ||
+      isConfigLoading,
     [
       isBalanceLoading,
       isLoadingArbCost,
@@ -85,6 +97,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       isLoadingExtradata,
       isRemovingItem,
       isEvidenceUploading,
+      isConfigLoading,
     ]
   );
 
@@ -94,23 +107,30 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <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"
+          toggleModal={toggleModal}
+          isDisabled={isDisabled || isRemovingItem || isConfigError}
+          isLoading={isLoading}
+          callback={() => {
+            if (removeItem && publicClient && config) {
+              setIsRemovingItem(true);
+              wrapWithToast(async () => await removeItem(config.request), publicClient)
+                .then((res) => {
+                  refetch();
+                  toggleModal();
+                })
+                .finally(() => setIsRemovingItem(false));
+            }
+          }}
+        />
+        {insufficientBalance && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> Insufficient balance
+          </ErrorButtonMessage>
+        )}
+      </div>
     </ReStyledModal>
   );
 };
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index 67ebbad..0d3f540 100644
--- a/web/src/components/ActionButton/Modal/ResubmitModal.tsx
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -16,6 +16,8 @@ import {
   useSimulateCurateV2AddItem,
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -65,10 +67,14 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
     [isBalanceLoading, isLoadingArbCost, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
   );
 
-  const isDisabled = useMemo(() => {
+  const insufficientBalance = useMemo(() => {
     if (!userBalance || !depositRequired) return true;
-    return userBalance?.value < depositRequired && isErrorExtradata && isErrorSubmissionDeposit;
-  }, [depositRequired, userBalance, isErrorExtradata, isErrorSubmissionDeposit]);
+    return userBalance?.value < depositRequired;
+  }, [userBalance, depositRequired]);
+
+  const isDisabled = useMemo(() => {
+    return Boolean(insufficientBalance || isErrorExtradata || isErrorSubmissionDeposit);
+  }, [insufficientBalance, isErrorExtradata, isErrorSubmissionDeposit]);
 
   const { data: config, isError } = useSimulateCurateV2AddItem({
     query: {
@@ -86,23 +92,30 @@ 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"
+          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));
+          }}
+        />
+        {insufficientBalance && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> Insufficient balance
+          </ErrorButtonMessage>
+        )}
+      </div>
     </ReStyledModal>
   );
 };
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index 6b87f20..fac9221 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -10,9 +10,20 @@ import { Log, decodeEventLog, parseAbi } from "viem";
 import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 import { useNavigate } from "react-router-dom";
 import { useSimulateCurateV2AddItem, useWriteCurateV2AddItem } from "hooks/useContract";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 
 const StyledButton = styled(Button)``;
 
+export const ErrorButtonMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+  margin: 12px;
+  color: ${({ theme }) => theme.error};
+  font-size: 14px;
+`;
+
 const SubmitItemButton: React.FC = () => {
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
   const publicClient = usePublicClient();
@@ -52,27 +63,34 @@ const SubmitItemButton: React.FC = () => {
 
   return (
     <EnsureChain>
-      <StyledButton
-        text="Submit Item"
-        disabled={isButtonDisabled}
-        isLoading={isLoading || isConfigLoading}
-        onClick={() => {
-          if (submitItem && publicClient && config) {
-            setIsSubmittingItem(true);
-            wrapWithToast(async () => await submitItem(config?.request), publicClient)
-              .then((res) => {
-                if (res.status && !isUndefined(res.result)) {
-                  const itemId = retrieveItemId(res.result.logs[0]);
-                  resetItemData();
-                  navigate(`/lists/item/${itemId}@${registryAddress}`);
-                }
-              })
-              .finally(() => {
-                setIsSubmittingItem(false);
-              });
-          }
-        }}
-      />
+      <div>
+        <StyledButton
+          text="Submit Item"
+          disabled={isButtonDisabled}
+          isLoading={isLoading || isConfigLoading}
+          onClick={() => {
+            if (submitItem && publicClient && config) {
+              setIsSubmittingItem(true);
+              wrapWithToast(async () => await submitItem(config?.request), publicClient)
+                .then((res) => {
+                  if (res.status && !isUndefined(res.result)) {
+                    const itemId = retrieveItemId(res.result.logs[0]);
+                    resetItemData();
+                    navigate(`/lists/item/${itemId}@${registryAddress}`);
+                  }
+                })
+                .finally(() => {
+                  setIsSubmittingItem(false);
+                });
+            }
+          }}
+        />
+        {insufficientBalance && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> Insufficient balance
+          </ErrorButtonMessage>
+        )}
+      </div>
     </EnsureChain>
   );
 };
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index 87a8f06..3a6c5a0 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Button } from "@kleros/ui-components-library";
 import { Address } from "viem";
-import { useAccount, usePublicClient } from "wagmi";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 import CheckCircle from "svgs/icons/check-circle-outline.svg";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 import { ListProgress, useSubmitListContext } from "context/SubmitListContext";
 import { useArbitrationCost } from "hooks/useArbitrationCostFromKlerosCore";
 import { isUndefined } from "utils/index";
@@ -26,6 +27,7 @@ import {
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
 import { curateV2Abi, useSimulateCurateFactoryDeploy, useWriteCurateFactoryDeploy } from "hooks/contracts/generated";
+import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
 
 const StyledCheckCircle = styled(CheckCircle)`
   path {
@@ -50,6 +52,10 @@ const SubmitListButton: React.FC = () => {
   const [isEstimatingCost, setIsEstimatingCost] = useState(false);
   const [submittedListItemId, setSubmittedListItemId] = useState("");
 
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
+
+  const insufficientBalance = useMemo(() => Boolean(userBalance?.value === BigInt(0)), [userBalance]);
+
   const listParams = useMemo(() => constructListParams(listData, listMetadata), [listData, listMetadata]);
 
   const {
@@ -58,7 +64,7 @@ const SubmitListButton: React.FC = () => {
     isError: isConfigError,
   } = useSimulateCurateFactoryDeploy({
     query: {
-      enabled: areListParamsValid(listParams),
+      enabled: areListParamsValid(listParams) || !insufficientBalance,
     },
     args: [
       listParams.governor as `0x${string}`,
@@ -158,6 +164,8 @@ const SubmitListButton: React.FC = () => {
       isSubmittingList ||
       !areListParamsValid(listParams) ||
       isLoadingArbCost ||
+      isBalanceLoading ||
+      insufficientBalance ||
       isEstimatingCost ||
       isLoadingExtradata ||
       !totalCostToSubmit ||
@@ -167,6 +175,8 @@ const SubmitListButton: React.FC = () => {
       isSubmittingList,
       listParams,
       isLoadingArbCost,
+      isBalanceLoading,
+      insufficientBalance,
       isEstimatingCost,
       isLoadingExtradata,
       totalCostToSubmit,
@@ -200,13 +210,27 @@ const SubmitListButton: React.FC = () => {
     <Button text="View List" onClick={() => navigate(`/lists/${submittedListItemId}/list/1/desc/all`)} />
   ) : (
     <EnsureChain>
-      <Button
-        text="Create List"
-        isLoading={isConfigLoading || isSubmittingList || isLoadingArbCost || isEstimatingCost || isLoadingExtradata}
-        Icon={StyledCheckCircle}
-        disabled={isButtonDisabled}
-        onClick={handleDeploy}
-      />
+      <div>
+        <Button
+          text="Create List"
+          isLoading={
+            isBalanceLoading ||
+            isConfigLoading ||
+            isSubmittingList ||
+            isLoadingArbCost ||
+            isEstimatingCost ||
+            isLoadingExtradata
+          }
+          Icon={StyledCheckCircle}
+          disabled={isButtonDisabled}
+          onClick={handleDeploy}
+        />
+        {insufficientBalance && (
+          <ErrorButtonMessage>
+            <ClosedCircleIcon /> Insufficient balance
+          </ErrorButtonMessage>
+        )}
+      </div>
     </EnsureChain>
   );
 };

From 249f970f962a469c0d47a450ac9c00151ea74b6f Mon Sep 17 00:00:00 2001
From: Shubham Parkhi <shubhamparkhi10@gmail.com>
Date: Fri, 11 Oct 2024 06:14:37 +0530
Subject: [PATCH 03/10] fix(web): improve code quality

---
 .../ActionButton/Modal/ChallengeItemModal.tsx    |  8 ++++----
 .../ActionButton/Modal/RemoveModal.tsx           |  2 +-
 .../ActionButton/Modal/ResubmitModal.tsx         | 11 ++++++++++-
 .../NavigationButtons/SubmitItemButton.tsx       | 16 ++++------------
 .../NavigationButtons/SubmitListButton.tsx       |  2 +-
 5 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
index 98c73cc..87f0faf 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -19,7 +19,7 @@ import {
   useWriteCurateV2ChallengeRequest,
 } from "hooks/useContract";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -82,13 +82,13 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const insufficientBalance = useMemo(() => {
     if (!userBalance || !depositRequired) return true;
-    return Boolean(userBalance?.value < depositRequired);
+    return userBalance?.value < depositRequired;
   }, [userBalance, depositRequired]);
 
   const isDisabled = useMemo(() => {
     if (!userBalance || !depositRequired || isEvidenceUploading || !isEvidenceValid) return true;
-    return userBalance?.value < depositRequired;
-  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid]);
+    return insufficientBalance;
+  }, [depositRequired, userBalance, isEvidenceUploading, isEvidenceValid, insufficientBalance]);
 
   const {
     data: config,
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 1f262a3..371af9b 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -18,7 +18,7 @@ import {
   useWriteCurateV2RemoveItem,
 } from "hooks/useContract";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index 0d3f540..519e9b6 100644
--- a/web/src/components/ActionButton/Modal/ResubmitModal.tsx
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -17,12 +17,21 @@ import {
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
 `;
 
+export const ErrorButtonMessage = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+  margin: 12px;
+  color: ${({ theme }) => theme.error};
+  font-size: 14px;
+`;
+
 interface ISubmitModal extends IBaseModal {}
 
 const alertMessage = (isItem: boolean) =>
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index fac9221..1c43f59 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -11,19 +11,10 @@ import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 import { useNavigate } from "react-router-dom";
 import { useSimulateCurateV2AddItem, useWriteCurateV2AddItem } from "hooks/useContract";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const StyledButton = styled(Button)``;
 
-export const ErrorButtonMessage = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  justify-content: center;
-  margin: 12px;
-  color: ${({ theme }) => theme.error};
-  font-size: 14px;
-`;
-
 const SubmitItemButton: React.FC = () => {
   const [isSubmittingItem, setIsSubmittingItem] = useState(false);
   const publicClient = usePublicClient();
@@ -38,8 +29,9 @@ const SubmitItemButton: React.FC = () => {
   });
 
   const insufficientBalance = useMemo(() => {
-    return balanceData?.value === BigInt(0);
-  }, [balanceData]);
+    if (!balanceData || !submissionDeposit) return true;
+    return balanceData.value < BigInt(submissionDeposit);
+  }, [balanceData, submissionDeposit]);
 
   const {
     data: config,
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index 3a6c5a0..4b916dc 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -27,7 +27,7 @@ import {
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
 import { curateV2Abi, useSimulateCurateFactoryDeploy, useWriteCurateFactoryDeploy } from "hooks/contracts/generated";
-import { ErrorButtonMessage } from "pages/SubmitItem/NavigationButtons/SubmitItemButton";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const StyledCheckCircle = styled(CheckCircle)`
   path {

From ca2b5ad930a2364d4936f4d01648d411651bede7 Mon Sep 17 00:00:00 2001
From: Shubham Parkhi <shubhamparkhi10@gmail.com>
Date: Fri, 11 Oct 2024 06:26:26 +0530
Subject: [PATCH 04/10] fix(web): nitpick

---
 web/src/components/ActionButton/Modal/RemoveModal.tsx           | 2 +-
 web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 371af9b..2e48822 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -61,7 +61,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
 
   const insufficientBalance = useMemo(() => {
     if (!userBalance || !depositRequired) return true;
-    return Boolean(userBalance?.value < depositRequired);
+    return userBalance?.value < depositRequired;
   }, [userBalance, depositRequired]);
 
   const isDisabled = useMemo(() => {
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index 4b916dc..680106a 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -54,7 +54,7 @@ const SubmitListButton: React.FC = () => {
 
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
 
-  const insufficientBalance = useMemo(() => Boolean(userBalance?.value === BigInt(0)), [userBalance]);
+  const insufficientBalance = useMemo(() => userBalance?.value === BigInt(0), [userBalance]);
 
   const listParams = useMemo(() => constructListParams(listData, listMetadata), [listData, listMetadata]);
 

From e53b1cc9fcc16cb146a1d3a44f4ae463bd6f978b Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Fri, 11 Oct 2024 15:11:25 +0200
Subject: [PATCH 05/10] fix: submitlistbutton conditions fix

---
 .../NavigationButtons/SubmitListButton.tsx    | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index 680106a..db78f16 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -54,7 +54,25 @@ const SubmitListButton: React.FC = () => {
 
   const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
 
-  const insufficientBalance = useMemo(() => userBalance?.value === BigInt(0), [userBalance]);
+  // calculate total cost to submit the list to Curate
+  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
+    address: MAIN_CURATE_ADDRESS as `0x${string}`,
+  });
+  const { data: submissionBaseDeposit } = useReadCurateV2SubmissionBaseDeposit({
+    address: MAIN_CURATE_ADDRESS as `0x${string}`,
+  });
+  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
+
+  const totalCostToSubmit = useMemo(() => {
+    if (!arbitrationCost || !submissionBaseDeposit) return;
+
+    return (arbitrationCost as bigint) + submissionBaseDeposit;
+  }, [arbitrationCost, submissionBaseDeposit]);
+
+  const insufficientBalance = useMemo(
+    () => Boolean(totalCostToSubmit && userBalance && totalCostToSubmit > userBalance?.value),
+    [userBalance, totalCostToSubmit]
+  );
 
   const listParams = useMemo(() => constructListParams(listData, listMetadata), [listData, listMetadata]);
 
@@ -64,7 +82,7 @@ const SubmitListButton: React.FC = () => {
     isError: isConfigError,
   } = useSimulateCurateFactoryDeploy({
     query: {
-      enabled: areListParamsValid(listParams) || !insufficientBalance,
+      enabled: areListParamsValid(listParams) && !insufficientBalance,
     },
     args: [
       listParams.governor as `0x${string}`,
@@ -84,21 +102,6 @@ const SubmitListButton: React.FC = () => {
 
   const { writeContractAsync: submitListToCurate } = useWriteCurateV2AddItem();
 
-  // calculate total cost to submit the list to Curate
-  const { data: arbitratorExtraData, isLoading: isLoadingExtradata } = useReadCurateV2GetArbitratorExtraData({
-    address: MAIN_CURATE_ADDRESS as `0x${string}`,
-  });
-  const { data: submissionBaseDeposit } = useReadCurateV2SubmissionBaseDeposit({
-    address: MAIN_CURATE_ADDRESS as `0x${string}`,
-  });
-  const { arbitrationCost, isLoading: isLoadingArbCost } = useArbitrationCost(arbitratorExtraData);
-
-  const totalCostToSubmit = useMemo(() => {
-    if (!arbitrationCost || !submissionBaseDeposit) return;
-
-    return (arbitrationCost as bigint) + submissionBaseDeposit;
-  }, [arbitrationCost, submissionBaseDeposit]);
-
   // estimate gas cost
   useEffect(() => {
     const estimateTotalCost = async () => {
@@ -214,12 +217,13 @@ const SubmitListButton: React.FC = () => {
         <Button
           text="Create List"
           isLoading={
-            isBalanceLoading ||
-            isConfigLoading ||
-            isSubmittingList ||
-            isLoadingArbCost ||
-            isEstimatingCost ||
-            isLoadingExtradata
+            (isBalanceLoading ||
+              isConfigLoading ||
+              isSubmittingList ||
+              isLoadingArbCost ||
+              isEstimatingCost ||
+              isLoadingExtradata) &&
+            !insufficientBalance
           }
           Icon={StyledCheckCircle}
           disabled={isButtonDisabled}

From 058af8727543f2451a5ec31f955fa37857c4e80f Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:55:11 +0200
Subject: [PATCH 06/10] fix: slight adjustment in submit item condition, delete
 unused isloading param

---
 .../pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index 1c43f59..b2d897a 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -46,7 +46,7 @@ const SubmitItemButton: React.FC = () => {
     value: BigInt(submissionDeposit ?? 0),
   });
 
-  const { writeContractAsync: submitItem, isLoading } = useWriteCurateV2AddItem();
+  const { writeContractAsync: submitItem } = useWriteCurateV2AddItem();
 
   const isButtonDisabled = useMemo(
     () => isSubmittingItem || isConfigLoading || isConfigError || insufficientBalance,
@@ -59,7 +59,7 @@ const SubmitItemButton: React.FC = () => {
         <StyledButton
           text="Submit Item"
           disabled={isButtonDisabled}
-          isLoading={isLoading || isConfigLoading}
+          isLoading={isConfigLoading && !insufficientBalance}
           onClick={() => {
             if (submitItem && publicClient && config) {
               setIsSubmittingItem(true);

From c7d873281c83d77af5f9955661286484977bcce8 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Fri, 11 Oct 2024 18:18:09 +0200
Subject: [PATCH 07/10] feat: logic adjustments across all the components,
 styling

---
 .../Modal/Buttons/ErrorButtonMessage.tsx      | 11 +++++
 .../ActionButton/Modal/Buttons/index.tsx      | 40 +++++++++++++----
 .../ActionButton/Modal/ChallengeItemModal.tsx | 30 +++++--------
 .../ActionButton/Modal/RemoveModal.tsx        | 28 +++++-------
 .../ActionButton/Modal/ResubmitModal.tsx      | 45 +++++++++----------
 .../NavigationButtons/SubmitItemButton.tsx    |  6 +--
 .../NavigationButtons/SubmitListButton.tsx    |  6 +--
 7 files changed, 91 insertions(+), 75 deletions(-)
 create mode 100644 web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx

diff --git a/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx b/web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx
new file mode 100644
index 0000000..ce2eff8
--- /dev/null
+++ 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
index 587dca5..5990e19 100644
--- 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,48 @@ const Container = styled.div`
   gap: 16px;
 `;
 
+const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 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
index 87f0faf..6d96cfc 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -18,8 +18,6 @@ import {
   useSimulateCurateV2ChallengeRequest,
   useWriteCurateV2ChallengeRequest,
 } from "hooks/useContract";
-import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -95,7 +93,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
     isLoading: isConfigLoading,
     isError: isConfigError,
   } = useSimulateCurateV2ChallengeRequest({
-    query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled },
+    query: { enabled: !isUndefined(itemId) && !isUndefined(evidence) && !isDisabled && !insufficientBalance },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
@@ -105,14 +103,15 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const isLoading = useMemo(
     () =>
-      isBalanceLoading ||
-      isLoadingArbCost ||
-      isSubmissionChallengeDepositLoading ||
-      isRemovalChallengeDepositLoading ||
-      isLoadingExtradata ||
-      isChallengingItem ||
-      isEvidenceUploading ||
-      isConfigLoading,
+      (isBalanceLoading ||
+        isLoadingArbCost ||
+        isSubmissionChallengeDepositLoading ||
+        isRemovalChallengeDepositLoading ||
+        isLoadingExtradata ||
+        isChallengingItem ||
+        isEvidenceUploading ||
+        isConfigLoading) &&
+      !insufficientBalance,
     [
       isBalanceLoading,
       isLoadingArbCost,
@@ -122,6 +121,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       isChallengingItem,
       isEvidenceUploading,
       isConfigLoading,
+      insufficientBalance,
     ]
   );
 
@@ -134,9 +134,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       <div>
         <Buttons
           buttonText="Challenge"
-          toggleModal={toggleModal}
           isDisabled={isDisabled || isChallengingItem || isConfigError}
-          isLoading={isLoading}
           callback={() => {
             if (challengeRequest && publicClient && config) {
               setIsChallengingItem(true);
@@ -148,12 +146,8 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
                 .finally(() => setIsChallengingItem(false));
             }
           }}
+          {...{ insufficientBalance, toggleModal, isLoading }}
         />
-        {insufficientBalance && (
-          <ErrorButtonMessage>
-            <ClosedCircleIcon /> Insufficient balance
-          </ErrorButtonMessage>
-        )}
       </div>
     </ReStyledModal>
   );
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 2e48822..27eede5 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -17,8 +17,6 @@ import {
   useSimulateCurateV2RemoveItem,
   useWriteCurateV2RemoveItem,
 } from "hooks/useContract";
-import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
@@ -74,7 +72,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
     isLoading: isConfigLoading,
     isError: isConfigError,
   } = useSimulateCurateV2RemoveItem({
-    query: { enabled: !isDisabled && !isUndefined(evidence) },
+    query: { enabled: !isDisabled && !isUndefined(evidence) && !insufficientBalance },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
@@ -83,13 +81,14 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
   const { writeContractAsync: removeItem } = useWriteCurateV2RemoveItem();
   const isLoading = useMemo(
     () =>
-      isBalanceLoading ||
-      isLoadingArbCost ||
-      isRemovalDepositLoading ||
-      isLoadingExtradata ||
-      isRemovingItem ||
-      isEvidenceUploading ||
-      isConfigLoading,
+      (isBalanceLoading ||
+        isLoadingArbCost ||
+        isRemovalDepositLoading ||
+        isLoadingExtradata ||
+        isRemovingItem ||
+        isEvidenceUploading ||
+        isConfigLoading) &&
+      !insufficientBalance,
     [
       isBalanceLoading,
       isLoadingArbCost,
@@ -98,6 +97,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       isRemovingItem,
       isEvidenceUploading,
       isConfigLoading,
+      insufficientBalance,
     ]
   );
 
@@ -110,9 +110,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <div>
         <Buttons
           buttonText="Remove"
-          toggleModal={toggleModal}
           isDisabled={isDisabled || isRemovingItem || isConfigError}
-          isLoading={isLoading}
           callback={() => {
             if (removeItem && publicClient && config) {
               setIsRemovingItem(true);
@@ -124,12 +122,8 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
                 .finally(() => setIsRemovingItem(false));
             }
           }}
+          {...{ toggleModal, isLoading, insufficientBalance }}
         />
-        {insufficientBalance && (
-          <ErrorButtonMessage>
-            <ClosedCircleIcon /> Insufficient balance
-          </ErrorButtonMessage>
-        )}
       </div>
     </ReStyledModal>
   );
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index 519e9b6..35c0a30 100644
--- a/web/src/components/ActionButton/Modal/ResubmitModal.tsx
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -16,22 +16,11 @@ import {
   useSimulateCurateV2AddItem,
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
-import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 
 const ReStyledModal = styled(Modal)`
   gap: 32px;
 `;
 
-export const ErrorButtonMessage = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  justify-content: center;
-  margin: 12px;
-  color: ${({ theme }) => theme.error};
-  font-size: 14px;
-`;
-
 interface ISubmitModal extends IBaseModal {}
 
 const alertMessage = (isItem: boolean) =>
@@ -70,24 +59,36 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
     return (arbitrationCost as bigint) + removalDeposit;
   }, [arbitrationCost, removalDeposit]);
 
-  const isLoading = useMemo(
-    () =>
-      isBalanceLoading || isLoadingArbCost || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
-    [isBalanceLoading, isLoadingArbCost, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
-  );
-
   const insufficientBalance = useMemo(() => {
     if (!userBalance || !depositRequired) return true;
     return userBalance?.value < depositRequired;
   }, [userBalance, depositRequired]);
 
+  const isLoading = useMemo(
+    () =>
+      (isBalanceLoading ||
+        isLoadingArbCost ||
+        isSubmissionDepositLoading ||
+        isLoadingExtradata ||
+        isResubmittingItem) &&
+      !insufficientBalance,
+    [
+      isBalanceLoading,
+      isLoadingArbCost,
+      isSubmissionDepositLoading,
+      isLoadingExtradata,
+      isResubmittingItem,
+      insufficientBalance,
+    ]
+  );
+
   const isDisabled = useMemo(() => {
     return Boolean(insufficientBalance || isErrorExtradata || isErrorSubmissionDeposit);
   }, [insufficientBalance, isErrorExtradata, isErrorSubmissionDeposit]);
 
   const { data: config, isError } = useSimulateCurateV2AddItem({
     query: {
-      enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading,
+      enabled: address && registryAddress && !isLoading && !isDisabled && !isItemDataLoading && !insufficientBalance,
     },
     address: registryAddress,
     args: [itemData?.item?.data ?? ""],
@@ -104,9 +105,7 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
       <div>
         <Buttons
           buttonText="Resubmit"
-          toggleModal={toggleModal}
           isDisabled={isDisabled || isError || isResubmittingItem}
-          isLoading={isLoading}
           callback={() => {
             if (!resubmitItem || !config?.request || !publicClient) return;
             setIsResubmittingItem(true);
@@ -118,12 +117,8 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
               .catch(() => {})
               .finally(() => setIsResubmittingItem(false));
           }}
+          {...{ toggleModal, isLoading, insufficientBalance }}
         />
-        {insufficientBalance && (
-          <ErrorButtonMessage>
-            <ClosedCircleIcon /> Insufficient balance
-          </ErrorButtonMessage>
-        )}
       </div>
     </ReStyledModal>
   );
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index b2d897a..5df0b69 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -11,7 +11,7 @@ import { useRegistryDetailsContext } from "context/RegistryDetailsContext";
 import { useNavigate } from "react-router-dom";
 import { useSimulateCurateV2AddItem, useWriteCurateV2AddItem } from "hooks/useContract";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
-import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/Buttons/ErrorButtonMessage";
 
 const StyledButton = styled(Button)``;
 
@@ -77,11 +77,11 @@ const SubmitItemButton: React.FC = () => {
             }
           }}
         />
-        {insufficientBalance && (
+        {insufficientBalance ? (
           <ErrorButtonMessage>
             <ClosedCircleIcon /> Insufficient balance
           </ErrorButtonMessage>
-        )}
+        ) : null}
       </div>
     </EnsureChain>
   );
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index db78f16..467ee5c 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -27,7 +27,7 @@ import {
   useWriteCurateV2AddItem,
 } from "hooks/useContract";
 import { curateV2Abi, useSimulateCurateFactoryDeploy, useWriteCurateFactoryDeploy } from "hooks/contracts/generated";
-import { ErrorButtonMessage } from "components/ActionButton/Modal/ResubmitModal";
+import { ErrorButtonMessage } from "components/ActionButton/Modal/Buttons/ErrorButtonMessage";
 
 const StyledCheckCircle = styled(CheckCircle)`
   path {
@@ -229,11 +229,11 @@ const SubmitListButton: React.FC = () => {
           disabled={isButtonDisabled}
           onClick={handleDeploy}
         />
-        {insufficientBalance && (
+        {insufficientBalance ? (
           <ErrorButtonMessage>
             <ClosedCircleIcon /> Insufficient balance
           </ErrorButtonMessage>
-        )}
+        ) : null}
       </div>
     </EnsureChain>
   );

From 8a82c0e8dbc4e761bc5bcee4c084a1dc3554ab75 Mon Sep 17 00:00:00 2001
From: Shubham Parkhi <shubhamparkhi10@gmail.com>
Date: Wed, 16 Oct 2024 14:36:24 +0530
Subject: [PATCH 08/10] fix(web): improved logic for balance checking

---
 .../ActionButton/Modal/Buttons/index.tsx      |  1 +
 .../ActionButton/Modal/ChallengeItemModal.tsx | 16 +++----
 .../ActionButton/Modal/RemoveModal.tsx        | 45 +++++++++----------
 .../ActionButton/Modal/ResubmitModal.tsx      | 29 +++++-------
 .../NavigationButtons/SubmitItemButton.tsx    | 16 +++----
 .../NavigationButtons/SubmitListButton.tsx    | 12 +++--
 6 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/Buttons/index.tsx b/web/src/components/ActionButton/Modal/Buttons/index.tsx
index 5990e19..782c1bf 100644
--- a/web/src/components/ActionButton/Modal/Buttons/index.tsx
+++ b/web/src/components/ActionButton/Modal/Buttons/index.tsx
@@ -17,6 +17,7 @@ const Container = styled.div`
 const ButtonsContainer = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
 `;
 
 interface IButtons {
diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
index 6d96cfc..2928f6f 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -103,15 +103,13 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
 
   const isLoading = useMemo(
     () =>
-      (isBalanceLoading ||
-        isLoadingArbCost ||
-        isSubmissionChallengeDepositLoading ||
-        isRemovalChallengeDepositLoading ||
-        isLoadingExtradata ||
-        isChallengingItem ||
-        isEvidenceUploading ||
-        isConfigLoading) &&
-      !insufficientBalance,
+      isBalanceLoading ||
+      isSubmissionChallengeDepositLoading ||
+      isRemovalChallengeDepositLoading ||
+      isLoadingExtradata ||
+      isChallengingItem ||
+      isEvidenceUploading ||
+      (isConfigLoading && !insufficientBalance && isLoadingArbCost),
     [
       isBalanceLoading,
       isLoadingArbCost,
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 27eede5..68f114a 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -72,34 +72,33 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
     isLoading: isConfigLoading,
     isError: isConfigError,
   } = useSimulateCurateV2RemoveItem({
-    query: { enabled: !isDisabled && !isUndefined(evidence) && !insufficientBalance },
+    query: { enabled: !isDisabled && !isUndefined(evidence) },
     address: registryAddress,
     args: [itemId as `0x${string}`, JSON.stringify(evidence)],
     value: depositRequired,
   });
 
   const { writeContractAsync: removeItem } = useWriteCurateV2RemoveItem();
-  const isLoading = useMemo(
-    () =>
-      (isBalanceLoading ||
-        isLoadingArbCost ||
-        isRemovalDepositLoading ||
-        isLoadingExtradata ||
-        isRemovingItem ||
-        isEvidenceUploading ||
-        isConfigLoading) &&
-      !insufficientBalance,
-    [
-      isBalanceLoading,
-      isLoadingArbCost,
-      isRemovalDepositLoading,
-      isLoadingExtradata,
-      isRemovingItem,
-      isEvidenceUploading,
-      isConfigLoading,
-      insufficientBalance,
-    ]
-  );
+
+  const isLoading = useMemo(() => {
+    return (
+      isBalanceLoading ||
+      isRemovalDepositLoading ||
+      isLoadingExtradata ||
+      isRemovingItem ||
+      isEvidenceUploading ||
+      (isConfigLoading && !insufficientBalance && isLoadingArbCost)
+    );
+  }, [
+    isBalanceLoading,
+    isLoadingArbCost,
+    isRemovalDepositLoading,
+    isLoadingExtradata,
+    isRemovingItem,
+    isEvidenceUploading,
+    isConfigLoading,
+    insufficientBalance,
+  ]);
 
   return (
     <ReStyledModal {...{ toggleModal }}>
@@ -110,7 +109,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <div>
         <Buttons
           buttonText="Remove"
-          isDisabled={isDisabled || isRemovingItem || isConfigError}
+          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError}
           callback={() => {
             if (removeItem && publicClient && config) {
               setIsRemovingItem(true);
diff --git a/web/src/components/ActionButton/Modal/ResubmitModal.tsx b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
index 35c0a30..e8f371e 100644
--- a/web/src/components/ActionButton/Modal/ResubmitModal.tsx
+++ b/web/src/components/ActionButton/Modal/ResubmitModal.tsx
@@ -66,29 +66,21 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
 
   const isLoading = useMemo(
     () =>
-      (isBalanceLoading ||
-        isLoadingArbCost ||
-        isSubmissionDepositLoading ||
-        isLoadingExtradata ||
-        isResubmittingItem) &&
-      !insufficientBalance,
-    [
-      isBalanceLoading,
-      isLoadingArbCost,
-      isSubmissionDepositLoading,
-      isLoadingExtradata,
-      isResubmittingItem,
-      insufficientBalance,
-    ]
+      isBalanceLoading || isItemDataLoading || isSubmissionDepositLoading || isLoadingExtradata || isResubmittingItem,
+    [isBalanceLoading, isItemDataLoading, isSubmissionDepositLoading, isLoadingExtradata, isResubmittingItem]
   );
 
   const isDisabled = useMemo(() => {
     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 && !insufficientBalance,
+      enabled: address && registryAddress && !isLoading && !isDisabled,
     },
     address: registryAddress,
     args: [itemData?.item?.data ?? ""],
@@ -105,7 +97,8 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
       <div>
         <Buttons
           buttonText="Resubmit"
-          isDisabled={isDisabled || isError || isResubmittingItem}
+          isLoading={(isConfigLoading && !insufficientBalance && isLoadingArbCost) || isLoading}
+          isDisabled={isDisabled || isConfigError || isLoading}
           callback={() => {
             if (!resubmitItem || !config?.request || !publicClient) return;
             setIsResubmittingItem(true);
@@ -117,7 +110,7 @@ const ResubmitModal: React.FC<ISubmitModal> = ({ toggleModal, isItem, registryAd
               .catch(() => {})
               .finally(() => setIsResubmittingItem(false));
           }}
-          {...{ toggleModal, isLoading, insufficientBalance }}
+          {...{ toggleModal, insufficientBalance }}
         />
       </div>
     </ReStyledModal>
diff --git a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
index 5df0b69..30e13b0 100644
--- a/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
+++ b/web/src/pages/SubmitItem/NavigationButtons/SubmitItemButton.tsx
@@ -24,14 +24,12 @@ const SubmitItemButton: React.FC = () => {
   const { fields, submissionDeposit, resetItemData } = useSubmitItemContext();
   const { id: registryAddress } = useRegistryDetailsContext();
 
-  const { data: balanceData } = useBalance({
-    address: address as `0x${string}` | undefined,
-  });
+  const { data: userBalance, isLoading: isBalanceLoading } = useBalance({ address });
 
   const insufficientBalance = useMemo(() => {
-    if (!balanceData || !submissionDeposit) return true;
-    return balanceData.value < BigInt(submissionDeposit);
-  }, [balanceData, submissionDeposit]);
+    if (!userBalance || !submissionDeposit) return true;
+    return userBalance.value < BigInt(submissionDeposit);
+  }, [userBalance, submissionDeposit]);
 
   const {
     data: config,
@@ -49,8 +47,8 @@ const SubmitItemButton: React.FC = () => {
   const { writeContractAsync: submitItem } = useWriteCurateV2AddItem();
 
   const isButtonDisabled = useMemo(
-    () => isSubmittingItem || isConfigLoading || isConfigError || insufficientBalance,
-    [isSubmittingItem, isConfigLoading, isConfigError, insufficientBalance]
+    () => isSubmittingItem || isConfigLoading || isConfigError || insufficientBalance || isBalanceLoading,
+    [isSubmittingItem, isConfigLoading, isConfigError, insufficientBalance, isBalanceLoading]
   );
 
   return (
@@ -59,7 +57,7 @@ const SubmitItemButton: React.FC = () => {
         <StyledButton
           text="Submit Item"
           disabled={isButtonDisabled}
-          isLoading={isConfigLoading && !insufficientBalance}
+          isLoading={(isConfigLoading && !insufficientBalance) || isSubmittingItem || isBalanceLoading}
           onClick={() => {
             if (submitItem && publicClient && config) {
               setIsSubmittingItem(true);
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index 467ee5c..fd3cfcc 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -217,13 +217,11 @@ const SubmitListButton: React.FC = () => {
         <Button
           text="Create List"
           isLoading={
-            (isBalanceLoading ||
-              isConfigLoading ||
-              isSubmittingList ||
-              isLoadingArbCost ||
-              isEstimatingCost ||
-              isLoadingExtradata) &&
-            !insufficientBalance
+            (isConfigLoading && !insufficientBalance && isLoadingArbCost) ||
+            isBalanceLoading ||
+            isSubmittingList ||
+            isEstimatingCost ||
+            isLoadingExtradata
           }
           Icon={StyledCheckCircle}
           disabled={isButtonDisabled}

From 0de0cd34ce90dd3ea64c0332b13997f7646ea65b Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:19:24 +0200
Subject: [PATCH 09/10] feat: dont calculate isloading according to
 insufficientbalance

---
 .../ActionButton/Modal/ChallengeItemModal.tsx        |  7 ++++---
 .../components/ActionButton/Modal/RemoveModal.tsx    |  9 +++++----
 .../NavigationButtons/SubmitListButton.tsx           | 12 +++++++-----
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
index 2928f6f..91091f3 100644
--- a/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
+++ b/web/src/components/ActionButton/Modal/ChallengeItemModal.tsx
@@ -109,7 +109,8 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       isLoadingExtradata ||
       isChallengingItem ||
       isEvidenceUploading ||
-      (isConfigLoading && !insufficientBalance && isLoadingArbCost),
+      isConfigLoading ||
+      isLoadingArbCost,
     [
       isBalanceLoading,
       isLoadingArbCost,
@@ -119,7 +120,6 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
       isChallengingItem,
       isEvidenceUploading,
       isConfigLoading,
-      insufficientBalance,
     ]
   );
 
@@ -133,6 +133,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
         <Buttons
           buttonText="Challenge"
           isDisabled={isDisabled || isChallengingItem || isConfigError}
+          isLoading={isLoading && !insufficientBalance}
           callback={() => {
             if (challengeRequest && publicClient && config) {
               setIsChallengingItem(true);
@@ -144,7 +145,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
                 .finally(() => setIsChallengingItem(false));
             }
           }}
-          {...{ insufficientBalance, toggleModal, isLoading }}
+          {...{ insufficientBalance, toggleModal }}
         />
       </div>
     </ReStyledModal>
diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index 68f114a..d468518 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -87,7 +87,8 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       isLoadingExtradata ||
       isRemovingItem ||
       isEvidenceUploading ||
-      (isConfigLoading && !insufficientBalance && isLoadingArbCost)
+      isConfigLoading ||
+      isLoadingArbCost
     );
   }, [
     isBalanceLoading,
@@ -97,7 +98,6 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
     isRemovingItem,
     isEvidenceUploading,
     isConfigLoading,
-    insufficientBalance,
   ]);
 
   return (
@@ -109,7 +109,8 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <div>
         <Buttons
           buttonText="Remove"
-          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError}
+          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError || insufficientBalance}
+          isLoading={isLoading && !insufficientBalance}
           callback={() => {
             if (removeItem && publicClient && config) {
               setIsRemovingItem(true);
@@ -121,7 +122,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
                 .finally(() => setIsRemovingItem(false));
             }
           }}
-          {...{ toggleModal, isLoading, insufficientBalance }}
+          {...{ toggleModal, insufficientBalance }}
         />
       </div>
     </ReStyledModal>
diff --git a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
index fd3cfcc..600b949 100644
--- a/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
+++ b/web/src/pages/SubmitList/NavigationButtons/SubmitListButton.tsx
@@ -217,11 +217,13 @@ const SubmitListButton: React.FC = () => {
         <Button
           text="Create List"
           isLoading={
-            (isConfigLoading && !insufficientBalance && isLoadingArbCost) ||
-            isBalanceLoading ||
-            isSubmittingList ||
-            isEstimatingCost ||
-            isLoadingExtradata
+            (isConfigLoading ||
+              isLoadingArbCost ||
+              isBalanceLoading ||
+              isSubmittingList ||
+              isEstimatingCost ||
+              isLoadingExtradata) &&
+            !insufficientBalance
           }
           Icon={StyledCheckCircle}
           disabled={isButtonDisabled}

From cfdb2d906a38166d1dfd21b39e15aa36e77800d5 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:23:47 +0200
Subject: [PATCH 10/10] chore: remove unnecessary condition

---
 web/src/components/ActionButton/Modal/RemoveModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/ActionButton/Modal/RemoveModal.tsx b/web/src/components/ActionButton/Modal/RemoveModal.tsx
index d468518..de514f4 100644
--- a/web/src/components/ActionButton/Modal/RemoveModal.tsx
+++ b/web/src/components/ActionButton/Modal/RemoveModal.tsx
@@ -109,7 +109,7 @@ const RemoveModal: React.FC<IRemoveModal> = ({ toggleModal, isItem, registryAddr
       <div>
         <Buttons
           buttonText="Remove"
-          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError || insufficientBalance}
+          isDisabled={isDisabled || isLoading || isRemovingItem || isConfigError}
           isLoading={isLoading && !insufficientBalance}
           callback={() => {
             if (removeItem && publicClient && config) {