From 338512d2d272d6e3b845bb5f57bc2bb4caee0adc Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Sat, 1 Jun 2024 00:39:57 +0200 Subject: [PATCH] feat: change text to coming soon in crypto swap, redirect user to deadline path again if deadline has passed --- .../DepositPaymentButton.tsx | 132 +++++++++++------- .../NavigationButtons/NextButton.tsx | 8 +- 2 files changed, 86 insertions(+), 54 deletions(-) diff --git a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx index 8bee098..c03133b 100644 --- a/web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx +++ b/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 ( diff --git a/web/src/pages/NewTransaction/NavigationButtons/NextButton.tsx b/web/src/pages/NewTransaction/NavigationButtons/NextButton.tsx index 13dca83..241917f 100644 --- a/web/src/pages/NewTransaction/NavigationButtons/NextButton.tsx +++ b/web/src/pages/NewTransaction/NavigationButtons/NextButton.tsx @@ -84,7 +84,13 @@ const NextButton: React.FC = ({ nextRoute }) => { } }; - return