fix(web): use loading and error states from hook

Author: ShubhamParkhi

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)],
   });
 
@@ -42,8 +42,8 @@ const ExecuteTransactionButton: React.FC = () => {
 
   return (
     <Button
-      isLoading={isSending}
-      disabled={isSending}
+      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

@@ -36,15 +36,15 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
      return BigInt(arbitrationCost.toString()) > BigInt(balanceData.value.toString());
   },[arbitrationCost, balanceData]);
 
-  const { data: payArbitrationFeeByBuyerConfig } = useSimulateEscrowUniversalPayArbitrationFeeByBuyer({
+  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,
     },
@@ -95,8 +95,15 @@ const RaiseDisputeButton: React.FC<IRaiseDisputeButton> = ({ toggleModal, button
   return (
     <div>
       <Button
-        isLoading={isSending}
-        disabled={isSending || insufficientBalance}
+        isLoading={isSending || isLoadingBuyerConfig || isLoadingSellerConfig}
+        disabled={
+          isSending ||
+          insufficientBalance ||
+          isLoadingBuyerConfig ||
+          isLoadingSellerConfig ||
+          isErrorBuyerConfig ||
+          isErrorSellerConfig
+        }
         text={buttonText}
         onClick={handleRaiseDispute}
       />

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)],
   });
 
@@ -63,8 +63,14 @@ const TimeOutButton: React.FC = () => {
 
   return (
     <Button
-      isLoading={isSending}
-      disabled={isSending}
+      isLoading={isSending || isLoadingBuyerConfig || isLoadingSellerConfig}
+      disabled={
+        isSending ||
+        isLoadingBuyerConfig ||
+        isLoadingSellerConfig ||
+        isErrorBuyerConfig ||
+        isErrorSellerConfig
+      }
       text="Claim full payment back"
       onClick={handleTimeout}
     />

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}
       />

web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx

@@ -93,15 +93,23 @@ const DepositPaymentButton: React.FC = () => {
     }
   }, [allowance, transactionValue]);
 
-  const { data: createNativeTransactionConfig } = useSimulateEscrowUniversalCreateNativeTransaction({
+  const {
+    data: createNativeTransactionConfig,
+    isLoading: isLoadingNativeConfig,
+    isError: isErrorNativeConfig,
+  } = useSimulateEscrowUniversalCreateNativeTransaction({
     query: {
       enabled: isNativeTransaction && ethAddressPattern.test(finalRecipientAddress) && !insufficientBalance,
     },
     args: [deadlineTimestamp, transactionUri, finalRecipientAddress],
     value: transactionValue,
   });
 
-  const { data: createERC20TransactionConfig } = useSimulateEscrowUniversalCreateErc20Transaction({
+  const {
+    data: createERC20TransactionConfig,
+    isLoading: isLoadingERC20Config,
+    isError: isErrorERC20Config,
+  } = useSimulateEscrowUniversalCreateErc20Transaction({
     query: {
       enabled:
         !isNativeTransaction &&
@@ -172,8 +180,15 @@ const DepositPaymentButton: React.FC = () => {
   return (
     <div>
       <StyledButton
-        isLoading={isSending}
-        disabled={isSending || insufficientBalance}
+        isLoading={isSending || isLoadingNativeConfig || isLoadingERC20Config}
+        disabled={
+          isSending ||
+          insufficientBalance ||
+          isLoadingNativeConfig ||
+          isLoadingERC20Config ||
+          isErrorNativeConfig ||
+          isErrorERC20Config
+        }
         text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
         onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
       />