transform pending status older that 2h into failed (#188)

src/components/ExplorerTable/ExplorerTable.tsx

@@ -2,7 +2,15 @@ import React from "react"
 import { Table, TableHead, TableCell, TableBody, TableRow, CircularProgress } from "@mui/material"
 import clsx from "clsx"
 import { Link } from "react-router-dom"
-import { EnvironmentMetadata, EvmBridgeConfig, ExplorerContextState, ResourceTypes, SharedConfigDomain, Transfer } from "../../types"
+import {
+  EnvironmentMetadata,
+  EvmBridgeConfig,
+  ExplorerContextState,
+  ResourceTypes,
+  SharedConfigDomain,
+  Transfer,
+  TransferStatus,
+} from "../../types"
 import { renderNetworkIcon, renderStatusIcon } from "../../utils/renderUtils"
 import {
   filterTransfers,
@@ -16,6 +24,7 @@ import {
   shortenAddress,
 } from "../../utils/transferHelpers"
 import { useStyles } from "./styles"
+import { add, isAfter } from "date-fns"
 
 type ExplorerTable = {
   active: boolean
@@ -32,7 +41,12 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, domainMetadata }: Explo
 
   const renderTransferList = (transferData: Transfer[]): JSX.Element[] => {
     return transferData.map((transfer: Transfer) => {
-      const { deposit, status, amount, resource, fromDomainId, toDomainId, id, resourceID, fee, usdValue } = transfer
+      const { deposit, amount, resource, fromDomainId, toDomainId, id, resourceID, fee, usdValue, timestamp } = transfer
+      let { status } = transfer
+
+      if (deposit && deposit.timestamp && status === "pending" && isAfter(Date.now(), add(new Date(deposit.timestamp), {hours: 2}))) {
+        status = "failed" as TransferStatus
+      }
 
       const { type } = resource
 

src/pages/DetailView/DetailView.tsx

@@ -8,7 +8,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat"
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight"
 import clsx from "clsx"
 import { useExplorer } from "../../context"
-import { EnvironmentMetadata, ResourceTypes, Transfer } from "../../types"
+import { EnvironmentMetadata, ResourceTypes, Transfer, TransferStatus } from "../../types"
 import { renderNetworkIcon, renderStatusIcon } from "../../utils/renderUtils"
 import {
   accountLinks,
@@ -24,6 +24,7 @@ import useClipboard from "./hooks/useClipboard"
 import useFetchTransfer from "./hooks/useFetchTransfer"
 import { DetailViewState, reducer } from "./reducer"
 import useUpdateInterval from "./hooks/useUpdateInterval"
+import { add, isAfter } from "date-fns"
 
 dayjs.extend(localizedFormat)
 
@@ -69,10 +70,15 @@ export default function DetailView() {
 
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   const renderTransferDetails = (transfer: Transfer | null) => {
-    const { fromDomainId, toDomainId, resource, usdValue } = transfer as Transfer
+    const { fromDomainId, toDomainId, resource, usdValue, deposit } = transfer as Transfer
     const fromDomainInfo = (domainMetadata as EnvironmentMetadata)[Number(fromDomainId)]
     const toDomainInfo = (domainMetadata as EnvironmentMetadata)[Number(toDomainId)]
 
+    let { status } = transfer as Transfer
+    if (deposit && deposit.timestamp && status === "pending" && isAfter(Date.now(), add(new Date(deposit.timestamp), {hours: 2}))) {
+      status = "failed" as TransferStatus
+    }
+
     const { id, type } = resource
 
     const fromDomainName = fromDomainInfo.renderName
@@ -98,8 +104,8 @@ export default function DetailView() {
           <span className={classes.detailsInnerContentTitle}>Status:</span>
           <span className={classes.detailsInnerContent}>
             <span className={classes.statusPill}>
-              {renderStatusIcon(transfer?.status!, classes)}
-              {displayStatus(transfer?.status!)}
+              {renderStatusIcon(status!, classes)}
+              {displayStatus(status!)}
             </span>
           </span>
         </div>