fix(web): deposit payment button

kleros · Sep 27, 2024 · 84605c6 · 84605c6
1 parent d94be62
commit 84605c6
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 41 deletions.
diff --git a/...src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx b/...src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/AcceptSettlementButton.tsx
@@ -4,7 +4,6 @@ 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,
@@ -16,7 +15,6 @@ const AcceptButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
-  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: acceptSettlementConfig } = useSimulateEscrowUniversalAcceptSettlement({
     args: [BigInt(id)],
@@ -44,7 +42,7 @@ const AcceptButton: React.FC = () => {
   return (
     <Button
       isLoading={isSending}
-      disabled={isSending || !hasSufficientNativeBalance}
+      disabled={isSending}
       text="Accept"
       onClick={handleAcceptSettlement}
     />

diff --git a/...c/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx b/...c/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ExecuteTransactionButton.tsx
@@ -4,7 +4,6 @@ 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,
@@ -16,7 +15,6 @@ const ExecuteTransactionButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
-  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: executeTransactionConfig } = useSimulateEscrowUniversalExecuteTransaction({
     args: [BigInt(id)],
@@ -45,7 +43,7 @@ const ExecuteTransactionButton: React.FC = () => {
   return (
     <Button
       isLoading={isSending}
-      disabled={isSending || !hasSufficientNativeBalance}
+      disabled={isSending}
       text="Execute Transaction"
       onClick={handleExecuteTransaction}
     />

diff --git a/...rc/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx b/...rc/pages/MyTransactions/TransactionDetails/PreviewCardButtons/ProposeSettlementButton.tsx
@@ -5,7 +5,6 @@ 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,
@@ -29,7 +28,6 @@ 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)],
@@ -59,7 +57,7 @@ const ProposeSettlementButton: React.FC<IProposeSettlementButton> = ({
   return (
     <Button
       isLoading={isSending}
-      disabled={isSending || !isAmountValid || !hasSufficientNativeBalance}
+      disabled={isSending || !isAmountValid}
       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,7 +1,6 @@
 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,
@@ -26,23 +25,29 @@ 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)],
-    value: arbitrationCost,
-  });
+  const { data: payArbitrationFeeByBuyerConfig, isLoading: isPreparingBuyerConfig } =
+    useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+      query: {
+        enabled: isBuyer,
+      },
+      args: [BigInt(id)],
+      value: arbitrationCost,
+    });
 
-  const { data: payArbitrationFeeBySellerConfig } = useSimulateEscrowUniversalPayArbitrationFeeBySeller({
-    args: [BigInt(id)],
-    value: arbitrationCost,
-  });
+  const { data: payArbitrationFeeBySellerConfig, isLoading: isPreparingSellerConfig } =
+    useSimulateEscrowUniversalPayArbitrationFeeBySeller({
+      query: {
+        enabled: !isBuyer,
+      },
+      args: [BigInt(id)],
+      value: arbitrationCost,
+    });
 
   const { writeContractAsync: payArbitrationFeeByBuyer } =
     useWriteEscrowUniversalPayArbitrationFeeByBuyer(payArbitrationFeeByBuyerConfig);
-  const { writeContractAsync: payArbitrationFeeBySeller } = useWriteEscrowUniversalPayArbitrationFeeBySeller(
-    payArbitrationFeeBySellerConfig
-  );
+  const { writeContractAsync: payArbitrationFeeBySeller } =
+    useWriteEscrowUniversalPayArbitrationFeeBySeller(payArbitrationFeeBySellerConfig);
 
   const handleRaiseDispute = () => {
     if (isBuyer && !isUndefined(payArbitrationFeeByBuyer)) {
@@ -80,8 +85,8 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
 
   return (
     <Button
-      isLoading={isSending}
-      disabled={isSending || !hasSufficientNativeBalance}
+      isLoading={isSending || isPreparingBuyerConfig || isPreparingSellerConfig}
+      disabled={isSending || isPreparingBuyerConfig || isPreparingSellerConfig}
       text={buttonText}
       onClick={handleRaiseDispute}
     />

diff --git a/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx b/web/src/pages/MyTransactions/TransactionDetails/PreviewCardButtons/TimeOutButton.tsx
@@ -1,7 +1,6 @@
 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,
@@ -20,7 +19,6 @@ 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)],
@@ -66,7 +64,7 @@ const TimeOutButton: React.FC = () => {
   return (
     <Button
       isLoading={isSending}
-      disabled={isSending || !hasSufficientNativeBalance}
+      disabled={isSending}
       text="Claim full payment back"
       onClick={handleTimeout}
     />

diff --git a/...pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx b/...pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ClaimFullPaymentButton.tsx
@@ -2,7 +2,6 @@ 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,
@@ -17,7 +16,6 @@ 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],
@@ -49,7 +47,7 @@ const ClaimFullPaymentButton: React.FC = () => {
     <>
       <Button
         isLoading={isSending}
-        disabled={isSending || !hasSufficientNativeBalance}
+        disabled={isSending}
         text={"No. Claim full payment"}
         onClick={handleExecuteTransaction}
       />

diff --git a/...c/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx b/...c/pages/MyTransactions/TransactionDetails/WasItFulfilled/Buttons/ReleasePaymentButton.tsx
@@ -2,7 +2,6 @@ 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";
@@ -16,7 +15,6 @@ const ReleasePaymentButton: React.FC = () => {
   const publicClient = usePublicClient();
   const { id, amount } = useTransactionDetailsContext();
   const refetchQuery = useQueryRefetch();
-  const { hasSufficientNativeBalance } = useNewTransactionContext();
 
   const { data: releaseFullPaymentConfig } = useSimulateEscrowUniversalPay({
     args: [id, amount],
@@ -47,7 +45,7 @@ const ReleasePaymentButton: React.FC = () => {
     <>
       <Button
         isLoading={isSending}
-        disabled={isSending || !hasSufficientNativeBalance}
+        disabled={isSending}
         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,7 +1,6 @@
 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,
@@ -18,6 +17,7 @@ import {
   useReadContract,
   useWriteContract,
   useSimulateContract,
+  useBalance,
 } from "wagmi";
 import { parseEther, parseUnits } from "viem";
 import { isUndefined } from "utils/index";
@@ -39,6 +39,7 @@ const DepositPaymentButton: React.FC = () => {
     deadline,
     sendingToken,
     resetContext,
+    setHasSufficientNativeBalance,
   } = useNewTransactionContext();
 
   const [finalRecipientAddress, setFinalRecipientAddress] = useState(sellerAddress);
@@ -55,12 +56,34 @@ const DepositPaymentButton: React.FC = () => {
     () => (isNativeTransaction ? parseEther(sendingQuantity) : parseUnits(sendingQuantity, 18)),
     [isNativeTransaction, sendingQuantity]
   );
-  const { hasSufficientNativeBalance } = useNewTransactionContext();
+
+  const { data: balanceData } = useBalance({
+    address: address as `0x${string}` | undefined,
+    token: isNativeTransaction ? undefined : sendingToken?.address as `0x${string}` | undefined,
+  });
+
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     setFinalRecipientAddress(ensResult.data || sellerAddress);
   }, [sellerAddress, ensResult.data]);
 
+  useEffect(() => {
+    const balance = parseFloat(balanceData?.formatted || "0");
+    const quantity = parseFloat(sendingQuantity);
+
+    if (quantity > balance) {
+      setError("Insufficient balance");
+      setHasSufficientNativeBalance(false);
+    } else if (quantity === 0) {
+      setError("Amount cannot be zero");
+      setHasSufficientNativeBalance(false);
+    } else {
+      setError(null);
+      setHasSufficientNativeBalance(true);
+    }
+  }, [balanceData, sendingQuantity, setHasSufficientNativeBalance]);
+
   const { data: allowance, refetch: refetchAllowance } = useReadContract({
     query: { enabled: !isNativeTransaction && chain?.id },
     address: sendingToken?.address,
@@ -151,12 +174,15 @@ const DepositPaymentButton: React.FC = () => {
   };
 
   return (
-    <StyledButton
-      isLoading={isSending}
-      disabled={isSending || !hasSufficientNativeBalance}
-      text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
-      onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
-    />
+    <>
+      <StyledButton
+        isLoading={isSending}
+        disabled={isSending || !!error}
+        text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
+        onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
+      />
+      <p>{error}</p>
+    </>
   );
 };