Merge pull request #80 from kleros/fix-disable-button-if-insufficient-balance

fix: disable button when user has insufficient native balance

Author: kemuru

web/src/pages/MyTransactions/Modal/RaiseDisputeModal/FeeRequired.tsx

@@ -37,7 +37,7 @@ const FeeRequired: React.FC<IFeeRequired> = ({ arbitrationCost }) => {
   return (
     <StyledCard>
       <StyledHeader>Arbitration fee required</StyledHeader>
-      <StyledQuantity>{formatEther(arbitrationCost)} ETH</StyledQuantity>
+      {arbitrationCost ? <StyledQuantity>{formatEther(arbitrationCost)} ETH</StyledQuantity> : null}
     </StyledCard>
   );
 };

web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx

@@ -16,7 +16,7 @@ const AcceptButton: React.FC = () => {
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: acceptSettlementConfig } = useSimulateEscrowUniversalAcceptSettlement({
+  const { data: acceptSettlementConfig, isLoading, isError } = useSimulateEscrowUniversalAcceptSettlement({
     args: [BigInt(id)],
   });
 
@@ -39,7 +39,14 @@ const AcceptButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Accept" onClick={handleAcceptSettlement} />;
+  return (
+    <Button
+      isLoading={isSending || isLoading}
+      disabled={isSending || isLoading || isError}
+      text="Accept"
+      onClick={handleAcceptSettlement}
+    />
+  );
 };
 
 export default AcceptButton;

web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx

@@ -16,7 +16,7 @@ const ExecuteTransactionButton: React.FC = () => {
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
+  const { data: executeTransactionConfig, isLoading, isError } = useSimulateEscrowUniversalExecuteTransaction({
     args: [BigInt(id)],
   });
 
@@ -41,7 +41,12 @@ const ExecuteTransactionButton: React.FC = () => {
   };
 
   return (
-    <Button isLoading={isSending} disabled={isSending} text="Execute Transaction" onClick={handleExecuteTransaction} />
+    <Button
+      isLoading={isSending || isLoading}
+      disabled={isSending || isLoading || isError}
+      text="Execute Transaction"
+      onClick={handleExecuteTransaction}
+    />
   );
 };
 

web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx

@@ -29,7 +29,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: proposeSettlementConfig } = useSimulateEscrowUniversalProposeSettlement({
+  const { data: proposeSettlementConfig, isLoading, isError } = useSimulateEscrowUniversalProposeSettlement({
     args: [BigInt(id), parseEther(amountProposed)],
   });
 
@@ -56,9 +56,9 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
 
   return (
     <Button
-      isLoading={isSending}
-      disabled={isSending || !isAmountValid}
-      text={buttonText}
+      isLoading={isSending || isLoading}
+      disabled={isSending || !isAmountValid || isLoading || isError}
+    text={buttonText}
       onClick={handleProposeSettlement}
     />
   );

web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 import { Button } from "@kleros/ui-components-library";
-import { useAccount, usePublicClient } from "wagmi";
+import { useAccount, useBalance, usePublicClient } from "wagmi";
 import {
   useWriteEscrowUniversalPayArbitrationFeeByBuyer,
   useWriteEscrowUniversalPayArbitrationFeeBySeller,
@@ -11,6 +11,8 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
 import { useQueryRefetch } from "hooks/useQueryRefetch";
+import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
+import { ErrorButtonMessage } from "pages/NewTransaction/NavigationButtons/DepositPaymentButton";
 
 interface IRaiseDisputeButton {
   toggleModal?: () => void;
@@ -26,12 +28,34 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
 
-  const { data: payArbitrationFeeByBuyerConfig } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+  const { data: balanceData } = useBalance({
+    address: address as `0x${string}` | undefined,
+  });
+
+  const insufficientBalance = useMemo(() => {
+    return balanceData && BigInt(arbitrationCost.toString()) > BigInt(balanceData.value.toString());
+  }, [arbitrationCost, balanceData]);
+
+  const {
+    data: payArbitrationFeeByBuyerConfig,
+    isLoading: isLoadingBuyerConfig,
+    isError: isErrorBuyerConfig,
+  } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+    query: {
+      enabled: isBuyer && !insufficientBalance,
+    },
     args: [BigInt(id)],
     value: arbitrationCost,
   });
 
-  const { data: payArbitrationFeeBySellerConfig } = useSimulateEscrowUniversalPayArbitrationFeeBySeller({
+  const {
+    data: payArbitrationFeeBySellerConfig,
+    isLoading: isLoadingSellerConfig,
+    isError: isErrorSellerConfig,
+  } = useSimulateEscrowUniversalPayArbitrationFeeBySeller({
+    query: {
+      enabled: !isBuyer && !insufficientBalance,
+    },
     args: [BigInt(id)],
     value: arbitrationCost,
   });
@@ -76,7 +100,28 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text={buttonText} onClick={handleRaiseDispute} />;
+  return (
+    <div>
+      <Button
+        isLoading={!insufficientBalance && (isSending || isLoadingBuyerConfig || isLoadingSellerConfig)}
+        disabled={
+          isSending ||
+          insufficientBalance ||
+          isLoadingBuyerConfig ||
+          isLoadingSellerConfig ||
+          isErrorBuyerConfig ||
+          isErrorSellerConfig
+        }
+        text={buttonText}
+        onClick={handleRaiseDispute}
+      />
+      {insufficientBalance && (
+        <ErrorButtonMessage>
+          <ClosedCircleIcon /> Insufficient balance
+        </ErrorButtonMessage>
+      )}
+    </div>
+  );
 };
 
 export default RaiseDisputeButton;

web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx

@@ -20,11 +20,11 @@ const TimeOutButton: React.FC = () => {
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
 
-  const { data: timeOutByBuyerConfig } = useSimulateEscrowUniversalTimeOutByBuyer({
+  const { data: timeOutByBuyerConfig, isLoading: isLoadingBuyerConfig, isError: isErrorBuyerConfig } = useSimulateEscrowUniversalTimeOutByBuyer({
     args: [BigInt(id)],
   });
 
-  const { data: timeOutBySellerConfig } = useSimulateEscrowUniversalTimeOutBySeller({
+  const { data: timeOutBySellerConfig, isLoading: isLoadingSellerConfig, isError: isErrorSellerConfig } = useSimulateEscrowUniversalTimeOutBySeller({
     args: [BigInt(id)],
   });
 
@@ -61,7 +61,20 @@ const TimeOutButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Claim full payment back" onClick={handleTimeout} />;
+  return (
+    <Button
+      isLoading={isSending || isLoadingBuyerConfig || isLoadingSellerConfig}
+      disabled={
+        isSending ||
+        isLoadingBuyerConfig ||
+        isLoadingSellerConfig ||
+        isErrorBuyerConfig ||
+        isErrorSellerConfig
+      }
+      text="Claim full payment back"
+      onClick={handleTimeout}
+    />
+  );
 };
 
 export default TimeOutButton;

web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx

@@ -17,7 +17,7 @@ const ClaimFullPaymentButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
 
-  const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
+  const { data: executeTransactionConfig, isLoading, isError } = useSimulateEscrowUniversalExecuteTransaction({
     args: [id],
   });
 
@@ -46,8 +46,8 @@ const ClaimFullPaymentButton: React.FC = () => {
   return (
     <>
       <Button
-        isLoading={isSending}
-        disabled={isSending}
+        isLoading={isSending || isLoading}
+        disabled={isSending || isLoading || isError}
         text={"No. Claim full payment"}
         onClick={handleExecuteTransaction}
       />

web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx

@@ -16,7 +16,7 @@ const ReleasePaymentButton: React.FC = () => {
   const { id, amount } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
 
-  const { data: releaseFullPaymentConfig } = useSimulateEscrowUniversalPay({
+  const { data: releaseFullPaymentConfig, isLoading, isError } = useSimulateEscrowUniversalPay({
     args: [id, amount],
   });
 
@@ -44,8 +44,8 @@ const ReleasePaymentButton: React.FC = () => {
   return (
     <>
       <Button
-        isLoading={isSending}
-        disabled={isSending}
+        isLoading={isSending || isLoading}
+        disabled={isSending || isLoading || isError}
         text={"Yes. Release full payment"}
         onClick={handleReleasePayment}
       />