fix: Hide Expired status in tx history

safe-global · May 6, 2024 · 3d90599 · 3d90599
1 parent 4ed007f
commit 3d90599
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 8 deletions.
diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
@@ -137,7 +137,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
             </Box>
           )}
 
-          {expiredSwap && (
+          {isQueue && expiredSwap && (
             <Typography color="text.secondary" mt={2}>
               This order has expired. Reject this transaction and try again.
             </Typography>

diff --git a/src/components/transactions/TxSummary/index.tsx b/src/components/transactions/TxSummary/index.tsx
@@ -84,7 +84,7 @@ const TxSummary = ({ item, isGrouped }: TxSummaryProps): ReactElement => {
         </Box>
       )}
 
-      {expiredSwap && (
+      {isQueue && expiredSwap && (
         <Box gridArea="status" justifyContent="flex-end" display="flex" className={css.status}>
           <StatusLabel status="expired" />
         </Box>

diff --git 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 { isExpiredSwap as isSwapInfoExpired, isSwapTxInfo } from '@/utils/transaction-guards'
+import { 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 && isSwapInfoExpired(txInfo))
+    setIsExpired(Date.now() > txInfo.validUntil * 1000)
   }
 
   useInterval(isExpiredSwap, INTERVAL_IN_MS)

diff --git a/src/utils/transaction-guards.ts b/src/utils/transaction-guards.ts
@@ -110,10 +110,6 @@ export const isSwapConfirmationViewOrder = (
   return false
 }
 
-export const isExpiredSwap = (value: TransactionInfo) => {
-  return isSwapTxInfo(value) && value.status === 'expired'
-}
-
 export const isCancelledSwap = (value: TransactionInfo) => {
   return isSwapTxInfo(value) && value.status === 'cancelled'
 }