feat: ux-improvements-to-prepare-for-testnet-release

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import styled from "styled-components";
-import { useNavigate } from "react-router-dom";
 import { Button } from "@kleros/ui-components-library";
 import {
   useEscrowUniversalCreateNativeTransaction,
@@ -24,6 +23,7 @@ import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { ethAddressPattern } from "utils/validateAddress";
 import { useQueryRefetch } from "hooks/useQueryRefetch";
+import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop";
 
 const StyledButton = styled(Button)``;
 
@@ -43,17 +43,27 @@ const DepositPaymentButton: React.FC = () => {
   const [currentTime, setCurrentTime] = useState(Date.now());
   const [finalRecipientAddress, setFinalRecipientAddress] = useState(sellerAddress);
   const publicClient = usePublicClient();
-  const navigate = useNavigate();
+  const navigateAndScrollTop = useNavigateAndScrollTop();
   const refetchQuery = useQueryRefetch();
   const [isSending, setIsSending] = useState(false);
   const [isApproved, setIsApproved] = useState(false);
   const { address } = useAccount();
   const { chain } = useNetwork();
   const ensResult = useEnsAddress({ name: sellerAddress, chainId: 1 });
-  const deadlineTimestamp = new Date(deadline).getTime();
-  const timeoutPayment = (deadlineTimestamp - currentTime) / 1000;
+  const deadlineTimestamp = useMemo(() => new Date(deadline).getTime(), [deadline]);
+  const timeoutPayment = useMemo(() => (deadlineTimestamp - currentTime) / 1000, [deadlineTimestamp, currentTime]);
   const isNativeTransaction = sendingToken?.address === "native";
-  const transactionValue = isNativeTransaction ? parseEther(sendingQuantity) : parseUnits(sendingQuantity, 18);
+  const transactionValue = useMemo(
+    () => (isNativeTransaction ? parseEther(sendingQuantity) : parseUnits(sendingQuantity, 18)),
+    [isNativeTransaction, sendingQuantity]
+  );
+  const isDeadlinePassed = currentTime >= deadlineTimestamp;
+
+  useEffect(() => {
+    if (isDeadlinePassed) {
+      navigateAndScrollTop("/new-transaction/deadline");
+    }
+  }, [isDeadlinePassed, navigateAndScrollTop]);
 
   useEffect(() => {
     const intervalId = setInterval(() => setCurrentTime(Date.now()), 1000);
@@ -65,7 +75,7 @@ const DepositPaymentButton: React.FC = () => {
   }, [sellerAddress, ensResult.data]);
 
   const { data: allowance } = useContractRead({
-    enabled: !isNativeTransaction,
+    enabled: !isNativeTransaction && !isDeadlinePassed,
     address: sendingToken?.address,
     abi: erc20ABI,
     functionName: "allowance",
@@ -78,50 +88,65 @@ const DepositPaymentButton: React.FC = () => {
     }
   }, [allowance, transactionValue]);
 
-  const templateData = JSON.stringify({
-    $schema: "../NewDisputeTemplate.schema.json",
-    title: escrowTitle,
-    description: deliverableText,
-    question: "Which party abided by the terms of the contract?",
-    answers: [
-      {
-        title: "Refund the Buyer",
-        description: "Select this to return the funds to the Buyer.",
-      },
-      {
-        title: "Pay the Seller",
-        description: "Select this to release the funds to the Seller.",
-      },
-    ],
-    policyURI: "ipfs://TODO",
-    attachment: {
-      label: "Transaction Terms",
-      uri: extraDescriptionUri,
-    },
-    frontendUrl: `https://escrow-v2.kleros.builders/#/my-transactions/%s`,
-    arbitrableChainID: "421614",
-    arbitrableAddress: "0x250AB0477346aDFC010585b58FbF61cff1d8f3ea",
-    arbitratorChainID: "421614",
-    arbitratorAddress: "0xA54e7A16d7460e38a8F324eF46782FB520d58CE8",
-    metadata: {
-      buyer: address,
-      seller: sellerAddress,
-      amount: sendingQuantity,
-      token: isNativeTransaction ? "native" : sendingToken?.address,
-      timeoutPayment: timeoutPayment,
-      transactionUri: transactionUri,
-    },
-    category: "Escrow",
-    specification: "KIPXXX",
-    aliases: {
-      Buyer: address,
-      Seller: sellerAddress,
-    },
-    version: "1.0",
-  });
+  const templateData = useMemo(
+    () =>
+      JSON.stringify({
+        $schema: "../NewDisputeTemplate.schema.json",
+        title: escrowTitle,
+        description: deliverableText,
+        question: "Which party abided by the terms of the contract?",
+        answers: [
+          {
+            title: "Refund the Buyer",
+            description: "Select this to return the funds to the Buyer.",
+          },
+          {
+            title: "Pay the Seller",
+            description: "Select this to release the funds to the Seller.",
+          },
+        ],
+        policyURI: "ipfs://TODO",
+        attachment: {
+          label: "Transaction Terms",
+          uri: extraDescriptionUri,
+        },
+        frontendUrl: `https://escrow-v2.kleros.builders/#/my-transactions/%s`,
+        arbitrableChainID: "421614",
+        arbitrableAddress: "0x250AB0477346aDFC010585b58FbF61cff1d8f3ea",
+        arbitratorChainID: "421614",
+        arbitratorAddress: "0xA54e7A16d7460e38a8F324eF46782FB520d58CE8",
+        metadata: {
+          buyer: address,
+          seller: sellerAddress,
+          amount: sendingQuantity,
+          token: isNativeTransaction ? "native" : sendingToken?.address,
+          timeoutPayment: timeoutPayment,
+          transactionUri: transactionUri,
+        },
+        category: "Escrow",
+        specification: "KIPXXX",
+        aliases: {
+          Buyer: address,
+          Seller: sellerAddress,
+        },
+        version: "1.0",
+      }),
+    [
+      escrowTitle,
+      deliverableText,
+      extraDescriptionUri,
+      sendingQuantity,
+      sellerAddress,
+      address,
+      isNativeTransaction,
+      sendingToken?.address,
+      timeoutPayment,
+      transactionUri,
+    ]
+  );
 
   const { config: createNativeTransactionConfig } = usePrepareEscrowUniversalCreateNativeTransaction({
-    enabled: isNativeTransaction && ethAddressPattern.test(finalRecipientAddress),
+    enabled: isNativeTransaction && ethAddressPattern.test(finalRecipientAddress) && !isDeadlinePassed,
     args: [BigInt(Math.floor(timeoutPayment)), transactionUri, finalRecipientAddress, templateData, ""],
     value: transactionValue,
   });
@@ -131,7 +156,8 @@ const DepositPaymentButton: React.FC = () => {
       !isNativeTransaction &&
       !isUndefined(allowance) &&
       allowance >= transactionValue &&
-      ethAddressPattern.test(finalRecipientAddress),
+      ethAddressPattern.test(finalRecipientAddress) &&
+      !isDeadlinePassed,
     args: [
       transactionValue,
       sendingToken?.address,
@@ -148,7 +174,7 @@ const DepositPaymentButton: React.FC = () => {
   const { writeAsync: createERC20Transaction } = useEscrowUniversalCreateErc20Transaction(createERC20TransactionConfig);
 
   const { config: approveConfig } = usePrepareContractWrite({
-    enabled: !isNativeTransaction,
+    enabled: !isNativeTransaction && !isDeadlinePassed,
     address: sendingToken?.address,
     abi: erc20ABI,
     functionName: "approve",
@@ -187,7 +213,7 @@ const DepositPaymentButton: React.FC = () => {
         if (wrapResult.status) {
           refetchQuery([["refetchOnBlock", "useMyTransactionsQuery"], ["useUserQuery"]]);
           resetContext();
-          navigate("/my-transactions/display/1/desc/all");
+          navigateAndScrollTop("/my-transactions/display/1/desc/all");
         }
       } catch (error) {
         console.error("Transaction failed:", error);
@@ -200,7 +226,7 @@ const DepositPaymentButton: React.FC = () => {
   return (
     <StyledButton
       isLoading={isSending}
-      disabled={isSending}
+      disabled={isSending || isDeadlinePassed}
       text={isNativeTransaction || isApproved ? "Deposit the Payment" : "Approve Token"}
       onClick={isNativeTransaction || isApproved ? handleCreateTransaction : handleApproveToken}
     />

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

@@ -84,7 +84,13 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
     }
   };
 
-  return <Button disabled={isButtonDisabled} onClick={handleNextClick} text="Next" />;
+  return (
+    <Button
+      disabled={isButtonDisabled}
+      onClick={handleNextClick}
+      text={escrowType === "general" ? "Next" : "Coming Soon"}
+    />
+  );
 };
 
 export default NextButton;