From c6724934df91afacbbde748404f185db24f4b7a5 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Thu, 5 Sep 2024 15:55:46 +0900 Subject: [PATCH 01/18] fix : Revoke style on Provide Confirm --- src/assets/icons/questionBlue.svg | 12 ++++++ src/components/tooltip/CustomTooltip.tsx | 10 ++++- src/components/tooltip/RevokeTooltip.tsx | 37 +++++++++++++++++++ .../comfirm/CTConfirmCrossTradeFooter.tsx | 12 +++++- 4 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/questionBlue.svg create mode 100644 src/components/tooltip/RevokeTooltip.tsx diff --git a/src/assets/icons/questionBlue.svg b/src/assets/icons/questionBlue.svg new file mode 100644 index 00000000..03bd2097 --- /dev/null +++ b/src/assets/icons/questionBlue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/tooltip/CustomTooltip.tsx b/src/components/tooltip/CustomTooltip.tsx index 9b587283..93010acb 100644 --- a/src/components/tooltip/CustomTooltip.tsx +++ b/src/components/tooltip/CustomTooltip.tsx @@ -3,6 +3,7 @@ import Image from "next/image"; import React, { CSSProperties, ReactNode, useState } from "react"; import QuestionIcon from "assets/icons/question.svg"; import GrayQuestionIcon from "assets/icons/questionGray.svg"; +import BlueQuestionIcon from "assets/icons/questionBlue.svg"; import TooltipArrow from "assets/icons/tooltipArrow.svg"; export default function CustomTooltip(props: { @@ -84,6 +85,7 @@ export default function CustomTooltip(props: { export const CustomTooltipWithQuestion = (props: { isGrayIcon?: boolean; + isBlueIcon?: boolean; tooltipLabel: string | ReactNode; style?: { width?: string; @@ -102,7 +104,13 @@ export const CustomTooltipWithQuestion = (props: { } diff --git a/src/components/tooltip/RevokeTooltip.tsx b/src/components/tooltip/RevokeTooltip.tsx new file mode 100644 index 00000000..b3dbd6d4 --- /dev/null +++ b/src/components/tooltip/RevokeTooltip.tsx @@ -0,0 +1,37 @@ +import { Flex } from "@chakra-ui/react"; +import { CustomTooltipWithQuestion } from "./CustomTooltip"; +import { CSSProperties } from "react"; + +export function TooltipForRevoke(props: { + style?: CSSProperties; + isGrayIcon?: boolean; + isBlueIcon?: boolean; +}) { + const { style, isGrayIcon, isBlueIcon } = props; + return ( + + + { + + Approval for USDT must be revoked first
+ before a new amount is approved. + + } + + } + style={{ px: "-5px", tooltipLineHeight: "15x", height: "45px" }} + > + + ); +} diff --git a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx index 31ce312f..4c14e157 100644 --- a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx +++ b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx @@ -30,6 +30,7 @@ import { useGetMode } from "@/hooks/mode/useGetMode"; import { useAccount } from "wagmi"; import useConnectWallet from "@/hooks/account/useConnectWallet"; import useInputBalanceCheck from "@/hooks/token/useInputCheck"; +import { TooltipForRevoke } from "@/components/tooltip/RevokeTooltip"; export type ContractWrite = (args: { args: any[]; value?: BigInt }) => void; type TradeConfirmationProps = { @@ -388,12 +389,16 @@ export default function CTConfirmCrossTradeFooter( : !approveBtnDisabled ? "#FFFFFF" : "#8E8E92", - border: !isLoading && isRevokeForUSDT ? "1px solid #007AFF" : "", + border: + !isLoading && isRevokeForUSDT && !approveBtnDisabled + ? "1px solid #007AFF" + : "", }} _disabled={{ backgroundColor: "#17181D", color: "#8E8E92", }} + _active={{}} > {isLoading ? ( @@ -404,6 +409,11 @@ export default function CTConfirmCrossTradeFooter( }`} )} + )} )} diff --git a/src/staging/hooks/useBridgeHistory.ts b/src/staging/hooks/useBridgeHistory.ts index d7ee1792..86ec90ce 100644 --- a/src/staging/hooks/useBridgeHistory.ts +++ b/src/staging/hooks/useBridgeHistory.ts @@ -56,7 +56,7 @@ import { getProvideStatus, getProvideTransactionHash, } from "../utils/getProvideStatus"; -import { mock_cancelRequest } from "@/test/crosstrade/mock/mockdata"; +import { mock_cancelRequest } from "@/test/crosstrade/_mock/mockdata"; const getApolloClient = (chainId: number) => { return subgraphApolloClientsForHistory[chainId]; @@ -474,6 +474,7 @@ export const useRequestHistoryData = () => { }); const result = trimedData.filter((data) => data !== null); + // const result = [mock_cancelRequest]; setRequestHistory(result as CT_Request_History[]); } }, [l1Data, l2Data, isConnectedToMainNetwork]); diff --git a/src/test/crosstrade/mock/mockdata.ts b/src/test/crosstrade/_mock/mockdata.ts similarity index 64% rename from src/test/crosstrade/mock/mockdata.ts rename to src/test/crosstrade/_mock/mockdata.ts index 392afecb..b2ac65e1 100644 --- a/src/test/crosstrade/mock/mockdata.ts +++ b/src/test/crosstrade/_mock/mockdata.ts @@ -17,6 +17,15 @@ export const mock_cancelRequest = { action: 0, blockTimestamps: { cancelRequest: Math.floor(Date.now() / 1000), + update: [ + Math.floor(Date.now() / 1000) - 60, + Math.floor(Date.now() / 1000) - 120, + Math.floor(Date.now() / 1000) - 160, + Math.floor(Date.now() / 1000) - 240, + Math.floor(Date.now() / 1000) - 300, + Math.floor(Date.now() / 1000) - 360, + Math.floor(Date.now() / 1000) - 420, + ], refund: undefined, request: 1725425942, }, @@ -49,5 +58,14 @@ export const mock_cancelRequest = { cancelRequest: "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", refund: "0x", + update: [ + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + ], }, }; From a7496dfd079e72fbf2efd8d934a0e9b2a353f512 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Thu, 19 Sep 2024 13:33:31 +0900 Subject: [PATCH 05/18] fix : issue#187 --- .../components/core/comfirm/CTConfirmCrossTradeFooter.tsx | 2 +- src/staging/hooks/useCrossTrade.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx index 7221cba1..adc8a3f3 100644 --- a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx +++ b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx @@ -238,7 +238,7 @@ export default function CTConfirmCrossTradeFooter( }, [isProvide, inTokenIsETH, txData, requestRegisteredToken, provideCT]); return ( - + {/** Check Box */} {!isProvide && ( diff --git a/src/staging/hooks/useCrossTrade.ts b/src/staging/hooks/useCrossTrade.ts index e8c9077b..0a1b31b4 100644 --- a/src/staging/hooks/useCrossTrade.ts +++ b/src/staging/hooks/useCrossTrade.ts @@ -324,7 +324,7 @@ export const useRequestData = (): { const trimedResult = result.filter( (item) => !item.isCanceled && - item.recevingUSD > item.providingUSD && + item.recevingUSD >= item.providingUSD && !item.isProvided ); setIsLoading(false); From 0832531eb45e4b5f65e85a3b3497622ea69866c7 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Thu, 19 Sep 2024 14:13:28 +0900 Subject: [PATCH 06/18] fix : issue#189 --- package-lock.json | 6 +++++ package.json | 1 + .../core/updateFee/CTUpdateInput.tsx | 1 - .../cross-trade/hooks/useRecommendFee.ts | 27 +++++++++++++------ 4 files changed, 26 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 374d9c4c..8466b5d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "d3": "^7.8.5", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", + "decimal.js": "^10.4.3", "ethers": "^5.7.2", "framer-motion": "^10.12.10", "fs": "^0.0.1-security", @@ -14288,6 +14289,11 @@ "node": ">=0.10.0" } }, + "node_modules/decimal.js": { + "version": "10.4.3", + "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz", + "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==" + }, "node_modules/decimal.js-light": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", diff --git a/package.json b/package.json index 59cc1834..2df82575 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "d3": "^7.8.5", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", + "decimal.js": "^10.4.3", "ethers": "^5.7.2", "framer-motion": "^10.12.10", "fs": "^0.0.1-security", diff --git a/src/staging/components/cross-trade/components/core/updateFee/CTUpdateInput.tsx b/src/staging/components/cross-trade/components/core/updateFee/CTUpdateInput.tsx index ea3ee200..7951d9d4 100644 --- a/src/staging/components/cross-trade/components/core/updateFee/CTUpdateInput.tsx +++ b/src/staging/components/cross-trade/components/core/updateFee/CTUpdateInput.tsx @@ -17,7 +17,6 @@ import { WarningType } from "@/staging/components/cross-trade/types"; import { TransactionToken } from "@/staging/types/transaction"; import { TokenSymbol } from "@/components/image/TokenSymbol"; import { TokenInfo } from "@/types/token/supportedToken"; -import useCTRecommend from "../../../hooks/useCTRecommend"; interface AdditionalDetailProps { recommendCheck: boolean; diff --git a/src/staging/components/cross-trade/hooks/useRecommendFee.ts b/src/staging/components/cross-trade/hooks/useRecommendFee.ts index 0405e359..96c4519e 100644 --- a/src/staging/components/cross-trade/hooks/useRecommendFee.ts +++ b/src/staging/components/cross-trade/hooks/useRecommendFee.ts @@ -5,6 +5,7 @@ import { CTTransactionType } from "@/types/crossTrade/contracts"; import { getSupportedTokenForCT } from "@/utils/token/getSupportedTokenInfo"; import { formatUnits } from "@/utils/trim/convertNumber"; import { useMemo } from "react"; +import { Decimal } from "decimal.js"; export const useRecommendFee = (params: { totalAmount: number; @@ -24,10 +25,15 @@ export const useRecommendFee = (params: { }, [hasRecomendFee]); const additionalFee = useMemo(() => { - if (totalAmount && additionalFeeRatio) { - return (totalAmount * additionalFeeRatio) / 100; + if (totalAmount && additionalFeeRatio && tokenInfo?.decimals) { + const totalAmountDecimal = new Decimal(totalAmount.toString()); + const additionalFeeRatioDecimal = new Decimal( + additionalFeeRatio.toString() + ); + const fee = totalAmountDecimal.mul(additionalFeeRatioDecimal).div(100); + return fee.toFixed(tokenInfo.decimals); } - }, [totalAmount, additionalFeeRatio]); + }, [totalAmount, additionalFeeRatio, tokenInfo?.decimals]); const { tokenPriceWithAmount: serviceFee } = useGetMarketPrice({ tokenName: "ethereum", @@ -39,16 +45,21 @@ export const useRecommendFee = (params: { const recommendedFee = useMemo(() => { if (serviceFee && additionalFee && tokenInfo?.decimals) { - const sum = serviceFee + additionalFee; - return Number(sum.toFixed(tokenInfo.decimals)); + const additionalFeeWithDecimals = new Decimal(additionalFee.toString()); + const serviceFeeWithDecimals = new Decimal(serviceFee.toString()); + const sum = additionalFeeWithDecimals.plus(serviceFeeWithDecimals); + return sum.toFixed(tokenInfo.decimals); } }, [serviceFee, additionalFee, tokenInfo?.decimals]); const recommendedCtAmount = useMemo(() => { - if (totalAmount && recommendedFee) { - return totalAmount - recommendedFee; + if (totalAmount && recommendedFee && tokenInfo?.decimals) { + const totalAmountDecimals = new Decimal(totalAmount.toString()); + const recommendedFeeDecimal = new Decimal(recommendedFee.toString()); + const result = totalAmountDecimals.minus(recommendedFeeDecimal); + return result.toFixed(tokenInfo?.decimals); } - }, [totalAmount, recommendedFee]); + }, [totalAmount, recommendedFee, tokenInfo?.decimals]); return { recommendedCtAmount, recommendedFee }; }; From 6adcaf2b37de37563b8532f2cb62ab53faae4bb8 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Mon, 23 Sep 2024 15:33:01 +0900 Subject: [PATCH 07/18] fix : issue#192 --- .../components/core/updateFee/index.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/staging/components/cross-trade/components/core/updateFee/index.tsx b/src/staging/components/cross-trade/components/core/updateFee/index.tsx index a48307da..36c5abbe 100644 --- a/src/staging/components/cross-trade/components/core/updateFee/index.tsx +++ b/src/staging/components/cross-trade/components/core/updateFee/index.tsx @@ -35,6 +35,7 @@ import { useRecommendFee } from "../../../hooks/useRecommendFee"; import { useRecoilState } from "recoil"; import { accountDrawerStatus } from "@/recoil/modal/atom"; import { isZeroAddress } from "@/utils/contract/isZeroAddress"; +import { useAccount } from "wagmi"; export default function CTFeeUpdateModal() { const { ctUpdateFeeModal, onCloseCTUpdateFeeModal } = useCTUpdateFee(); @@ -263,8 +264,26 @@ export default function CTFeeUpdateModal() { ); }, [activeConfirmButton, connectedToLayer1, inputWarningCheck]); + const {address} = useAccount() + + const requester = useMemo(() => { + return ctUpdateFeeModal.txData?.L2_subgraphData?._requester; + }, [ctUpdateFeeModal.txData?.L2_subgraphData?._requester]); + + const isRequester = useMemo(() => { + if(requester && address){ + return requester.toLowerCase() === address.toLowerCase() + } + return false + }, [requester, address]); + + return ( - + Date: Tue, 24 Sep 2024 11:01:40 +0900 Subject: [PATCH 08/18] fix : issue#184 --- .../core/comfirm/CTConfirmHistoryFooter.tsx | 7 +- .../core/option/CTOptionCrossDetail.tsx | 31 ++++-- .../core/updateFee/CTUpdateFeeDetail.tsx | 103 +++++++++++------- .../components/cross-trade/types/index.ts | 2 +- 4 files changed, 91 insertions(+), 52 deletions(-) diff --git a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx index 58bc34a9..b791b05c 100644 --- a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx +++ b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx @@ -263,7 +263,7 @@ export default function CTConfirmHistoryFooter(props: { }, [txData, keyLength, isCompleted]); return ( - <> + @@ -280,13 +281,13 @@ export default function CTConfirmHistoryFooter(props: { {isRequest && ( - + Tip: Update the service fee to reflect significant
change in L1 gas price. )} - + ); } diff --git a/src/staging/components/cross-trade/components/core/option/CTOptionCrossDetail.tsx b/src/staging/components/cross-trade/components/core/option/CTOptionCrossDetail.tsx index 86b55c9d..f8fbcb78 100644 --- a/src/staging/components/cross-trade/components/core/option/CTOptionCrossDetail.tsx +++ b/src/staging/components/cross-trade/components/core/option/CTOptionCrossDetail.tsx @@ -73,6 +73,13 @@ export default function CTOptionCrossDetail( CTTransactionType.requestRegisteredToken ); + const receiveIsLessThanZero = Number(receiveTokenValue) < 0; + + const receiveValueOnUI = useMemo(() => { + if (receiveIsLessThanZero) return "Reduce the service fee"; + return `${formatNumber(receiveTokenValue)} ${inToken?.tokenSymbol}`; + }, [receiveIsLessThanZero, receiveTokenValue, inToken?.tokenSymbol]); + return ( Receive - {`${formatNumber(receiveTokenValue)} ${inToken?.tokenSymbol}`} - - - {`$${ - Number(tokenPriceWithAmount) < 0 - ? 0 - : commafy(tokenPriceWithAmount) - }`} + {receiveValueOnUI} + {!receiveIsLessThanZero && ( + + {`$${ + Number(tokenPriceWithAmount) < 0 + ? 0 + : commafy(tokenPriceWithAmount) + }`} + + )} diff --git a/src/staging/components/cross-trade/components/core/updateFee/CTUpdateFeeDetail.tsx b/src/staging/components/cross-trade/components/core/updateFee/CTUpdateFeeDetail.tsx index 1dd36ea9..4a64db16 100644 --- a/src/staging/components/cross-trade/components/core/updateFee/CTUpdateFeeDetail.tsx +++ b/src/staging/components/cross-trade/components/core/updateFee/CTUpdateFeeDetail.tsx @@ -57,6 +57,70 @@ const FeeDetail: React.FC = ({ } }, [receivedAmount, tokenInfo]); + const isReceiveAmountOver = useMemo(() => { + if (receivedAmount) { + return Number(receivedAmount) < 0; + } + }, [receivedAmount]); + + const ReceiveNotOverComp = useMemo(() => { + return ( + + + {formatNumber(receivedAmount) ?? "-"} {tokenInfo?.symbol} + + + + {formatNumber(receviedRatio) ?? "-"} + + + % + + + + ); + }, [receivedAmount, receviedRatio, tokenInfo?.symbol]); + + const ReceiveOverComp = useMemo(() => { + return ( + + Reduce the service fee + + ); + }, []); + + const ReceiveAmountComp = useMemo(() => { + if (isReceiveAmountOver) return ReceiveOverComp; + return ReceiveNotOverComp; + }, [ReceiveNotOverComp, ReceiveOverComp, isReceiveAmountOver]); + return ( = ({ > {title} - {type == FeeDetailType.Receive && ( - - - {formatNumber(receivedAmount) ?? "-"} {tokenInfo?.symbol} - - - - {formatNumber(receviedRatio) ?? "-"} - - - % - - - - )} - + {type == FeeDetailType.Receive && ReceiveAmountComp} {type == FeeDetailType.Network && ( {"GasStationSymbol"} diff --git a/src/staging/components/cross-trade/types/index.ts b/src/staging/components/cross-trade/types/index.ts index e2f7a531..eb249a8f 100644 --- a/src/staging/components/cross-trade/types/index.ts +++ b/src/staging/components/cross-trade/types/index.ts @@ -27,7 +27,7 @@ export interface CTInputProps { inTokenSymbol?: string; onInputChange: (e: ChangeEvent) => void; onInputFocus?: (e: FocusEvent) => void; - recommnededFee?: number; + recommnededFee?: string; } export enum ButtonTypeMain { From ecc505e2f39f82c5e88451108c895ba483350db7 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Tue, 24 Sep 2024 11:44:30 +0900 Subject: [PATCH 09/18] fix : issue#175 --- src/components/modal/TxToast.tsx | 10 ++++++++-- .../cross-trade/components/core/updateFee/index.tsx | 13 +++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/modal/TxToast.tsx b/src/components/modal/TxToast.tsx index 171ca3fe..07335d92 100644 --- a/src/components/modal/TxToast.tsx +++ b/src/components/modal/TxToast.tsx @@ -92,8 +92,11 @@ function TxTokenInfo(props: TransactionToastProp & { isToken0: boolean }) { */} {trimAmount(convertParsedAmount)} {symbol === "WETH" ? "WETH" : "ETH"} @@ -116,7 +119,10 @@ function TxTokenInfo(props: TransactionToastProp & { isToken0: boolean }) { {noNeedToShowAmount ? "" : trimAmount(convertParsedAmount)} {symbol} diff --git a/src/staging/components/cross-trade/components/core/updateFee/index.tsx b/src/staging/components/cross-trade/components/core/updateFee/index.tsx index 36c5abbe..6866d011 100644 --- a/src/staging/components/cross-trade/components/core/updateFee/index.tsx +++ b/src/staging/components/cross-trade/components/core/updateFee/index.tsx @@ -264,19 +264,24 @@ export default function CTFeeUpdateModal() { ); }, [activeConfirmButton, connectedToLayer1, inputWarningCheck]); - const {address} = useAccount() + const { address } = useAccount(); const requester = useMemo(() => { return ctUpdateFeeModal.txData?.L2_subgraphData?._requester; }, [ctUpdateFeeModal.txData?.L2_subgraphData?._requester]); const isRequester = useMemo(() => { - if(requester && address){ - return requester.toLowerCase() === address.toLowerCase() + if (requester && address) { + return requester.toLowerCase() === address.toLowerCase(); } - return false + return false; }, [requester, address]); + useEffect(() => { + if (!isRequester) { + resetAllStates(); + } + }, [isRequester]); return ( Date: Tue, 24 Sep 2024 14:59:00 +0900 Subject: [PATCH 10/18] fix : issue#182 --- src/hooks/time/useTimeOver.ts | 26 ++++++++++++ .../core/comfirm/CTConfirmHistoryFooter.tsx | 40 +++++++++++++------ .../core/pending/StatusComponent.tsx | 20 ++++++++-- src/staging/hooks/useBridgeHistory.ts | 5 ++- src/test/crosstrade/_mock/mockdata.ts | 8 ++-- 5 files changed, 77 insertions(+), 22 deletions(-) create mode 100644 src/hooks/time/useTimeOver.ts diff --git a/src/hooks/time/useTimeOver.ts b/src/hooks/time/useTimeOver.ts new file mode 100644 index 00000000..6e5941d6 --- /dev/null +++ b/src/hooks/time/useTimeOver.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; + +export function useTimeOver(props: { + timeStamp: number; + timeBuffer: number; + needToCheck: boolean; +}) { + const { timeStamp, timeBuffer, needToCheck } = props; + const [isTimeOver, setIsTimeOver] = useState(false); + + useEffect(() => { + const interval = setInterval(() => { + if ( + needToCheck && + timeStamp + timeBuffer < Math.floor(Date.now() / 1000) + ) { + setIsTimeOver(true); + } else { + setIsTimeOver(false); + } + }, 1000); + return () => clearInterval(interval); + }, [needToCheck, timeStamp]); + + return { isTimeOver }; +} diff --git a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx index b791b05c..21e16ea7 100644 --- a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx +++ b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmHistoryFooter.tsx @@ -7,7 +7,7 @@ import { isInCT_REQUEST, isInCT_REQUEST_CANCEL, } from "@/staging/types/transaction"; -import { useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; import { isFinalStatus } from "../../../utils/getStatus"; import { formatTimeDisplay } from "@/staging/utils/formatTimeDisplay"; import { useCountdown } from "@/staging/hooks/useCountdown"; @@ -15,6 +15,8 @@ import { ErrorRollupComponent } from "@/staging/components/new-history/component import { getRemainTime } from "@/staging/components/new-history/utils/getTimeDisplay"; import { useBlockExplorer } from "@/hooks/network/useBlockExplorer"; import { CustomTooltipWithQuestion } from "@/components/tooltip/CustomTooltip"; +import { useTimeOver } from "@/hooks/time/useTimeOver"; +import { TRANSACTION_CONSTANTS } from "@/staging/constants/transactionTime"; interface TransactionItemProps { title: string; @@ -26,7 +28,8 @@ interface TransactionItemProps { } const TransactionItem = (props: TransactionItemProps) => { - const { title, isActive, txHash, isError, txData } = props; + const { title, isActive, txHash, isError, txData, blockTimestamp } = props; + const isOnError = isActive && isError; const _title = useMemo(() => { @@ -78,7 +81,16 @@ const TransactionItem = (props: TransactionItemProps) => { const needToShowTimeDisplay = (title === "refund" || title === "return") && isActive; const initialTimeDisplay = formatTimeDisplay(getRemainTime(txData)); - const timeDisplay = useCountdown(initialTimeDisplay, Boolean(isOnError)); + const { isTimeOver } = useTimeOver({ + timeStamp: Number(blockTimestamp), + //refund and return have same timeBuffer as 300s + timeBuffer: TRANSACTION_CONSTANTS.CROSS_TRADE.RETURN_LIQUIDITY, + needToCheck: needToShowTimeDisplay, + }); + const timeDisplay = useCountdown( + initialTimeDisplay, + Boolean(isOnError) || isTimeOver + ); const CountdownComponent = useMemo(() => { if (!needToShowTimeDisplay) return null; @@ -87,12 +99,12 @@ const TransactionItem = (props: TransactionItemProps) => { fontWeight={400} fontSize={"13px"} lineHeight={"20px"} - color={isOnError ? "#DD3A44" : "#fff"} + color={isOnError || isTimeOver ? "#DD3A44" : "#fff"} > {timeDisplay} ); - }, [timeDisplay, needToShowTimeDisplay]); + }, [timeDisplay, needToShowTimeDisplay, isTimeOver]); return ( @@ -222,14 +234,14 @@ export default function CTConfirmHistoryFooter(props: { {Object.entries(txData.transactionHashes).map(([key, hash], index) => { const isActive = isCompleted ? false : lastIndex === index; + console.log("txData.blockTimestamps", txData.blockTimestamps); //@ts-ignore - const blockTimestamp = txData.blockTimestamps[key]; - // if ( - // (hash === "" || hash === undefined) && - // key !== "waitForReceive" && - // key !== "return" - // ) - // return null; + const blockTimestamp = + key === "refund" + ? //@ts-ignore + txData.blockTimestamps["cancelRequest"] + : //@ts-ignore + txData.blockTimestamps[key]; const isCancelCompleted = isInCT_REQUEST_CANCEL(txData.status) && key === "completed"; if (typeof hash === "string") { @@ -247,12 +259,16 @@ export default function CTConfirmHistoryFooter(props: { return hash?.map((tx, index) => { const isActiveOnUpdateFee = isActive && index === hash.length - 1; if (tx === "" || tx === undefined) return null; + + console.log("key", key); + return ( ); diff --git a/src/staging/components/new-history/components/core/pending/StatusComponent.tsx b/src/staging/components/new-history/components/core/pending/StatusComponent.tsx index 8aeb07ac..fac672d2 100644 --- a/src/staging/components/new-history/components/core/pending/StatusComponent.tsx +++ b/src/staging/components/new-history/components/core/pending/StatusComponent.tsx @@ -1,5 +1,5 @@ // StatusComponent.tsx -import React, { useMemo } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { Flex, Text, Circle, Button } from "@chakra-ui/react"; import { TransactionHistory, @@ -31,6 +31,7 @@ import GoogleCalendar from "@/assets/icons/newHistory/googleCalendar.svg"; import { useCalendar } from "@/staging/hooks/useGoogleCalendar"; import { useFinalize } from "@/hooks/history/useFinalize"; import { useHistoryTab } from "@/staging/hooks/useHistoryTab"; +import { useTimeOver } from "@/hooks/time/useTimeOver"; type TransactionStatusComponentProps = { label: HISTORY_TRANSACTION_STATUS; @@ -142,9 +143,19 @@ export default function StatusComponent( ) ); + const { isTimeOver } = useTimeOver({ + timeStamp: Number(blockTimestamp), + //refund and return have same timeBuffer as 300s + timeBuffer: TRANSACTION_CONSTANTS.CROSS_TRADE.RETURN_LIQUIDITY, + needToCheck: shouldCountdown, + }); + // Output variable const timeDisplay = shouldCountdown - ? useCountdown(initialTimeDisplay, Boolean(transactionData.errorMessage)) + ? useCountdown( + initialTimeDisplay, + Boolean(transactionData.errorMessage) || isTimeOver + ) : initialTimeDisplay; // Calendar start time @@ -174,8 +185,9 @@ export default function StatusComponent( // If error message exists and status is rollup, time increases and color turns red const errorRollup = transactionData.errorMessage && label === Status.Rollup; const errorRefund = - transactionData.errorMessage === ERROR_CODE.CT_REFUND_NOT_COMPLETED && - label === CT_REQUEST_CANCEL.Refund; + (transactionData.errorMessage === ERROR_CODE.CT_REFUND_NOT_COMPLETED && + label === CT_REQUEST_CANCEL.Refund) || + isTimeOver; const errorReturnLiquidity = transactionData.errorMessage === ERROR_CODE.CT_LIQUIDITY_NOT_RETURNED && label === CT_PROVIDE.Return; diff --git a/src/staging/hooks/useBridgeHistory.ts b/src/staging/hooks/useBridgeHistory.ts index 86ec90ce..5c86a79b 100644 --- a/src/staging/hooks/useBridgeHistory.ts +++ b/src/staging/hooks/useBridgeHistory.ts @@ -473,8 +473,9 @@ export const useRequestHistoryData = () => { return result; }); - const result = trimedData.filter((data) => data !== null); - // const result = [mock_cancelRequest]; + // const result = trimedData.filter((data) => data !== null); + const result = [mock_cancelRequest]; + //@ts-ignore setRequestHistory(result as CT_Request_History[]); } }, [l1Data, l2Data, isConnectedToMainNetwork]); diff --git a/src/test/crosstrade/_mock/mockdata.ts b/src/test/crosstrade/_mock/mockdata.ts index b2ac65e1..abce9e02 100644 --- a/src/test/crosstrade/_mock/mockdata.ts +++ b/src/test/crosstrade/_mock/mockdata.ts @@ -16,7 +16,7 @@ export const mock_cancelRequest = { }, action: 0, blockTimestamps: { - cancelRequest: Math.floor(Date.now() / 1000), + cancelRequest: Math.floor(Date.now() / 1000) - 280, update: [ Math.floor(Date.now() / 1000) - 60, Math.floor(Date.now() / 1000) - 120, @@ -55,9 +55,6 @@ export const mock_cancelRequest = { transactionHashes: { request: "0xece1a37f48b4222e8ae8e1ce98a03bfcba4c99472dd86ae0b43add017da76d38", - cancelRequest: - "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", - refund: "0x", update: [ "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", @@ -67,5 +64,8 @@ export const mock_cancelRequest = { "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", ], + cancelRequest: + "0xf0f4c75de1b0227fecfdf5c3749af882b58523a332d4cdb8e964458fce00180f", + refund: "0x", }, }; From 57e1a37582fd3cf84bf78acdbe2d1629ac65e2e4 Mon Sep 17 00:00:00 2001 From: SonYoungsung Date: Tue, 24 Sep 2024 16:51:43 +0900 Subject: [PATCH 11/18] fix : issue#183 --- .../components/core/comfirm/CTConfirmCrossTradeFooter.tsx | 2 +- .../components/core/comfirm/CTConfirmHistoryFooter.tsx | 2 -- src/staging/hooks/useBridgeHistory.ts | 5 +++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx index adc8a3f3..bd973b02 100644 --- a/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx +++ b/src/staging/components/cross-trade/components/core/comfirm/CTConfirmCrossTradeFooter.tsx @@ -370,7 +370,7 @@ export default function CTConfirmCrossTradeFooter( )} {/** Confirm Button */} - {!isApproved && ( + {!isApproved && !isBalanceOver && (