diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx index e66b6ecfd6..f8cd5d510e 100644 --- a/src/components/transactions/TxDetails/index.tsx +++ b/src/components/transactions/TxDetails/index.tsx @@ -1,4 +1,5 @@ import { POLLING_INTERVAL } from '@/config/constants' +import useIsExpiredSwap from '@/features/swap/hooks/useIsExpiredSwap' import useIntervalCounter from '@/hooks/useIntervalCounter' import React, { type ReactElement } from 'react' import type { TransactionDetails, TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk' @@ -12,7 +13,6 @@ import useChainId from '@/hooks/useChainId' import useAsync from '@/hooks/useAsync' import { isAwaitingExecution, - isExpiredSwap, isModuleExecutionInfo, isMultiSendTxInfo, isMultisigDetailedExecutionInfo, @@ -67,7 +67,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement safeTxHash = txDetails.detailedExecutionInfo.safeTxHash } - const expiredSwap = isExpiredSwap(txSummary.txInfo) + const expiredSwap = useIsExpiredSwap(txSummary.txInfo) return ( <> diff --git a/src/features/swap/hooks/useIsExpiredSwap.ts b/src/features/swap/hooks/useIsExpiredSwap.ts index f686525d5f..ba2f675e01 100644 --- a/src/features/swap/hooks/useIsExpiredSwap.ts +++ b/src/features/swap/hooks/useIsExpiredSwap.ts @@ -1,7 +1,7 @@ import { useState } from 'react' import type { TransactionInfo } from '@safe-global/safe-gateway-typescript-sdk' import useInterval from '@/hooks/useInterval' -import { isSwapTxInfo } from '@/utils/transaction-guards' +import { isExpiredSwap as isSwapInfoExpired, isSwapTxInfo } from '@/utils/transaction-guards' const INTERVAL_IN_MS = 10_000 @@ -16,7 +16,7 @@ const useIsExpiredSwap = (txInfo: TransactionInfo) => { const isExpiredSwap = () => { if (!isSwapTxInfo(txInfo)) return - setIsExpired(Date.now() > txInfo.validUntil * 1000) + setIsExpired(Date.now() > txInfo.validUntil * 1000 && isSwapInfoExpired(txInfo)) } useInterval(isExpiredSwap, INTERVAL_IN_MS) diff --git a/src/hooks/__tests__/useInterval.test.ts b/src/hooks/__tests__/useInterval.test.ts index f649fc13a8..a4175c9d17 100644 --- a/src/hooks/__tests__/useInterval.test.ts +++ b/src/hooks/__tests__/useInterval.test.ts @@ -6,22 +6,31 @@ describe('useInterval', () => { jest.useFakeTimers() }) + it('should run the callback function once immediately', () => { + let mockValue = 0 + const mockCallback = jest.fn(() => mockValue++) + + renderHook(() => useInterval(mockCallback, 100)) + + expect(mockValue).toEqual(1) + }) + it('should run the callback function with every interval', async () => { let mockValue = 0 const mockCallback = jest.fn(() => mockValue++) renderHook(() => useInterval(mockCallback, 100)) - expect(mockValue).toEqual(0) + expect(mockValue).toEqual(1) act(() => { jest.advanceTimersByTime(100) }) - expect(mockValue).toEqual(1) + expect(mockValue).toEqual(2) act(() => { jest.advanceTimersByTime(100) }) - expect(mockValue).toEqual(2) + expect(mockValue).toEqual(3) }) }) diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts index 21c2141e1f..4a684b3f86 100644 --- a/src/hooks/useInterval.ts +++ b/src/hooks/useInterval.ts @@ -15,6 +15,9 @@ const useInterval = (callback: () => void, time: number) => { useEffect(() => { const interval = setInterval(() => callbackRef.current?.(), time) + // Call the function once initially + callbackRef.current?.() + return () => clearInterval(interval) }, [time]) }