fix: disable button when user has insufficient native balance

ShubhamParkhi · ShubhamParkhi · commit d94be629b6b3 · 2024-09-24T19:26:27.000+05:30
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
@@ -4,6 +4,7 @@ import { usePublicClient } from "wagmi";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useSimulateEscrowUniversalAcceptSettlement,
   useWriteEscrowUniversalAcceptSettlement,
@@ -15,6 +16,7 @@ const AcceptButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: acceptSettlementConfig } = useSimulateEscrowUniversalAcceptSettlement({
     args: [BigInt(id)],
@@ -39,7 +41,14 @@ const AcceptButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Accept" onClick={handleAcceptSettlement} />;
+  return (
+    <Button
+      isLoading={isSending}
+      disabled={isSending || !hasSufficientNativeBalance}
+      text="Accept"
+      onClick={handleAcceptSettlement}
+    />
+  );
 };
 
 export default AcceptButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx
@@ -4,6 +4,7 @@ import { usePublicClient } from "wagmi";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useSimulateEscrowUniversalExecuteTransaction,
   useWriteEscrowUniversalExecuteTransaction,
@@ -15,6 +16,7 @@ const ExecuteTransactionButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
     args: [BigInt(id)],
@@ -41,7 +43,12 @@ const ExecuteTransactionButton: React.FC = () => {
   };
 
   return (
-    <Button isLoading={isSending} disabled={isSending} text="Execute Transaction" onClick={handleExecuteTransaction} />
+    <Button
+      isLoading={isSending}
+      disabled={isSending || !hasSufficientNativeBalance}
+      text="Execute Transaction"
+      onClick={handleExecuteTransaction}
+    />
   );
 };
 
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
@@ -5,6 +5,7 @@ import { parseEther } from "viem";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useTransactionDetailsContext } from "context/TransactionDetailsContext";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useSimulateEscrowUniversalProposeSettlement,
   useWriteEscrowUniversalProposeSettlement,
@@ -28,6 +29,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: proposeSettlementConfig } = useSimulateEscrowUniversalProposeSettlement({
     args: [BigInt(id), parseEther(amountProposed)],
@@ -57,7 +59,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   return (
     <Button
       isLoading={isSending}
-      disabled={isSending || !isAmountValid}
+      disabled={isSending || !isAmountValid || !hasSufficientNativeBalance}
       text={buttonText}
       onClick={handleProposeSettlement}
     />
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/RaiseDisputeButton.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { Button } from "@kleros/ui-components-library";
 import { useAccount, usePublicClient } from "wagmi";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useWriteEscrowUniversalPayArbitrationFeeByBuyer,
   useWriteEscrowUniversalPayArbitrationFeeBySeller,
@@ -25,6 +26,7 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
   const { buyer, id } = useTransactionDetailsContext();
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: payArbitrationFeeByBuyerConfig } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
     args: [BigInt(id)],
@@ -76,7 +78,14 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text={buttonText} onClick={handleRaiseDispute} />;
+  return (
+    <Button
+      isLoading={isSending}
+      disabled={isSending || !hasSufficientNativeBalance}
+      text={buttonText}
+      onClick={handleRaiseDispute}
+    />
+  );
 };
 
 export default RaiseDisputeButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { Button } from "@kleros/ui-components-library";
 import { useAccount, usePublicClient } from "wagmi";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useWriteEscrowUniversalTimeOutByBuyer,
   useWriteEscrowUniversalTimeOutBySeller,
@@ -19,6 +20,7 @@ const TimeOutButton: React.FC = () => {
   const { buyer, id } = useTransactionDetailsContext();
   const isBuyer = useMemo(() => address?.toLowerCase() === buyer?.toLowerCase(), [address, buyer]);
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: timeOutByBuyerConfig } = useSimulateEscrowUniversalTimeOutByBuyer({
     args: [BigInt(id)],
@@ -61,7 +63,14 @@ const TimeOutButton: React.FC = () => {
     }
   };
 
-  return <Button isLoading={isSending} disabled={isSending} text="Claim full payment back" onClick={handleTimeout} />;
+  return (
+    <Button
+      isLoading={isSending}
+      disabled={isSending || !hasSufficientNativeBalance}
+      text="Claim full payment back"
+      onClick={handleTimeout}
+    />
+  );
 };
 
 export default TimeOutButton;
diff --git a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button } from "@kleros/ui-components-library";
 import { useToggle } from "react-use";
 import PaymentReleased from "pages/MyTransactions/Modal/PaymentReleased";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useWriteEscrowUniversalExecuteTransaction,
   useSimulateEscrowUniversalExecuteTransaction,
@@ -16,6 +17,7 @@ const ClaimFullPaymentButton: React.FC = () => {
   const [isSending, setIsSending] = useState<boolean>(false);
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
     args: [id],
@@ -47,7 +49,7 @@ const ClaimFullPaymentButton: React.FC = () => {
     <>
       <Button
         isLoading={isSending}
-        disabled={isSending}
+        disabled={isSending || !hasSufficientNativeBalance}
         text={"No. Claim full payment"}
         onClick={handleExecuteTransaction}
       />
diff --git a/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button } from "@kleros/ui-components-library";
 import { useToggle } from "react-use";
 import PaymentReleased from "pages/MyTransactions/Modal/PaymentReleased";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import { useWriteEscrowUniversalPay, useSimulateEscrowUniversalPay } from "hooks/contracts/generated";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
@@ -15,6 +16,7 @@ const ReleasePaymentButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id, amount } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: releaseFullPaymentConfig } = useSimulateEscrowUniversalPay({
     args: [id, amount],
@@ -45,7 +47,7 @@ const ReleasePaymentButton: React.FC = () => {
     <>
       <Button
         isLoading={isSending}
-        disabled={isSending}
+        disabled={isSending || !hasSufficientNativeBalance}
         text={"Yes. Release full payment"}
         onClick={handleReleasePayment}
       />
diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useMemo } from "react";
 import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
+import { useNewTransactionContext } from "context/NewTransactionContext";
 import {
   useWriteEscrowUniversalCreateNativeTransaction,
   useSimulateEscrowUniversalCreateNativeTransaction,
@@ -54,6 +55,7 @@ const DepositPaymentButton: React.FC = () => {
     () => (isNativeTransaction ? parseEther(sendingQuantity) : parseUnits(sendingQuantity, 18)),
     [isNativeTransaction, sendingQuantity]
   );
+  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   useEffect(() => {
     setFinalRecipientAddress(ensResult.data || sellerAddress);
@@ -151,7 +153,7 @@ const DepositPaymentButton: React.FC = () => {
   return (
     <StyledButton
       isLoading={isSending}
-      disabled={isSending}
+      disabled={isSending || !hasSufficientNativeBalance}
       text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
       onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
     />
