diff --git a/src/components/ExplorerTable/ExplorerTable.tsx b/src/components/ExplorerTable/ExplorerTable.tsx index 3bc35f5..53076c7 100644 --- a/src/components/ExplorerTable/ExplorerTable.tsx +++ b/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 diff --git a/src/pages/DetailView/DetailView.tsx b/src/pages/DetailView/DetailView.tsx index f339dd2..76c4f6b 100644 --- a/src/pages/DetailView/DetailView.tsx +++ b/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>