fix: Disable execute button for expired swaps

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 (
     <>

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)

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

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])
 }