fix: fetch transfer details on intervals

src/pages/DetailView/DetailView.tsx

@@ -1,6 +1,6 @@
-import { CircularProgress, Tooltip, Typography, Container, Box } from "@mui/material"
-import { useReducer } from "react"
-import { Link, useLocation } from "react-router-dom"
+import { CircularProgress, Tooltip, Typography, Container, Box, Alert } from "@mui/material"
+import { useEffect, useReducer, useState } from "react"
+import { Link, Location, useLocation } from "react-router-dom"
 import ContentCopyIcon from "@mui/icons-material/ContentCopy"
 import ArrowBackIcon from "@mui/icons-material/ArrowBack"
 import dayjs from "dayjs"
@@ -30,9 +30,7 @@ import useUpdateInterval from "./hooks/useUpdateInterval"
 
 dayjs.extend(localizedFormat)
 
-export type LocationT = {
-  state: { id: string; page: number; txHash: string }
-}
+export type LocationState = { id: string; page: number; txHash: string }
 
 export default function DetailView() {
   const explorerContext = useExplorer()
@@ -41,7 +39,9 @@ export default function DetailView() {
 
   const { classes } = useStyles()
 
-  const { state: data } = useLocation() as LocationT
+  const { state: data, pathname } = useLocation() as Location<LocationState>
+
+  const [txHashFromPathname, setTxHashFromPathname] = useState<string>("")
 
   const initState: DetailViewState = {
     transferDetails: null,
@@ -54,13 +54,20 @@ export default function DetailView() {
     fallbackPage: 1,
   }
 
+  useEffect(() => {
+    if (data?.txHash === undefined) {
+      const splitedPath = pathname.split("/")
+      setTxHashFromPathname(splitedPath[splitedPath.length - 1])
+    }
+  }, [data, txHashFromPathname])
+
   const [state, dispatcher] = useReducer(reducer, initState)
 
   useClipboard(state, dispatcher)
 
-  useFetchTransfer(routes, data?.txHash, dispatcher)
+  useFetchTransfer(routes, data?.txHash || txHashFromPathname, dispatcher)
 
-  useUpdateInterval(state, dispatcher, data?.txHash, routes)
+  useUpdateInterval(state, dispatcher, data?.txHash || txHashFromPathname, routes)
 
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   const renderTransferDetails = (transfer: Transfer | null) => {
@@ -247,12 +254,15 @@ export default function DetailView() {
             </Container>
           </section>
         )}
-        {state.isLoading === "loading" && (
-          <Container className={classes.circularProgress}>
-            <CircularProgress />
-          </Container>
-        )}
       </Box>
+      {state.isLoading === "loading" && (
+        <Container className={classes.circularProgress}>
+          <div>
+            <Alert severity="info">Loading transfer details</Alert>
+            <CircularProgress />
+          </div>
+        </Container>
+      )}
     </Container>
   )
 }

src/pages/DetailView/hooks/useFetchTransfer.ts

@@ -1,13 +1,12 @@
 import { useEffect } from "react"
-import history from "history/browser"
 import { sanitizeTransferData } from "../../../utils/Helpers"
 import { Routes, Transfer } from "../../../types"
 import { DetailViewActions } from "../reducer"
 
 export default function useFetchTransfer(routes: Routes, txHash: string, dispatcher: React.Dispatch<DetailViewActions>): void {
   const fetchTransfer = async (txHashFallback?: string): Promise<void> => {
     dispatcher({
-      type: "fetch_transfer",
+      type: "fetching_transfer",
     })
 
     let transfer: Transfer | Transfer[]
@@ -20,30 +19,29 @@ export default function useFetchTransfer(routes: Routes, txHash: string, dispatc
 
     const sanitizedTransfer = Array.isArray(transfer) ? sanitizeTransferData([...transfer]) : sanitizeTransferData([transfer])
 
-    dispatcher({
-      type: "set_transfer_details",
-      payload: sanitizedTransfer,
-    })
-
-    dispatcher({
-      type: "set_transfer_status",
-      payload: "completed",
-    })
-
-    dispatcher({
-      type: "update_fetching_status",
-      payload: "fetching",
-    })
+    if (Array.isArray(sanitizedTransfer) && sanitizedTransfer.length > 0) {
+      dispatcher({
+        type: "set_transfer_details",
+        payload: sanitizedTransfer,
+      })
+
+      dispatcher({
+        type: "set_transfer_status",
+        payload: "completed",
+      })
+
+      const isExecuted = sanitizedTransfer.length && sanitizedTransfer.every(t => t.status === "executed")
+
+      if (isExecuted) {
+        dispatcher({
+          type: "set_delay",
+          payload: null,
+        })
+      }
+    }
   }
 
   useEffect(() => {
-    if (txHash !== undefined) {
-      void fetchTransfer()
-    } else {
-      const { pathname } = history.location
-      const txHashFallback = pathname.split("/").filter(Boolean)[1]
-      history.replace(history.location.pathname, { txHash, page: 1, id: "" })
-      void fetchTransfer(txHashFallback)
-    }
+    void fetchTransfer()
   }, [txHash])
 }

src/pages/DetailView/hooks/useUpdateInterval.ts

@@ -11,33 +11,47 @@ export default function useUpdateInterval(
 ): void {
   const fetchUpdatedTransfer = async (): Promise<void> => {
     dispatcher({
-      type: "fetch_transfer",
+      type: "fetching_transfer",
     })
 
     const transfer = await routes.transferByTransactionHash(txHash)
     const sanitizedTransfer = Array.isArray(transfer) ? sanitizeTransferData([...transfer]) : sanitizeTransferData([transfer])
 
     dispatcher({
-      type: "set_transfer_details",
-      payload: sanitizedTransfer,
+      type: "update_fetching_status",
+      payload: "fetching",
     })
+
+    if (Array.isArray(sanitizedTransfer) && sanitizedTransfer.length > 0) {
+      dispatcher({
+        type: "update_transfer_details",
+        payload: sanitizedTransfer,
+      })
+    }
+
+    const isExecuted = sanitizedTransfer.length && sanitizedTransfer.every(t => t.status === "executed")
+
+    if (isExecuted) {
+      dispatcher({
+        type: "set_delay",
+        payload: null,
+      })
+
+      dispatcher({
+        type: "set_transfer_status",
+        payload: "completed",
+      })
+    }
   }
 
-  useInterval(
-    () => {
-      const isExecuted = Array.isArray(state.transferDetails)
-        ? state.transferDetails.every(transfer => transfer.status === "executed")
-        : state.transferDetails?.status === "executed"
-
-      if (!isExecuted) {
-        void fetchUpdatedTransfer()
-      } else {
-        dispatcher({
-          type: "update_fetching_status",
-          payload: "idle",
-        })
-      }
-    },
-    state.fetchingStatus === "fetching" ? state.delay : null,
-  )
+  useInterval(() => {
+    const isExecuted =
+      Array.isArray(state.transferDetails) &&
+      state.transferDetails.length > 0 &&
+      state.transferDetails.every(transfer => transfer.status === "executed")
+
+    if (!isExecuted || state.fetchingStatus === "fetching") {
+      void fetchUpdatedTransfer()
+    }
+  }, state.delay)
 }

src/pages/DetailView/reducer.ts

@@ -1,30 +1,32 @@
 import { Transfer } from "../../types"
 
 export type DetailViewState = {
-  transferDetails: Transfer | Transfer[] | null
+  transferDetails: Transfer[] | null
   transferStatus: "none" | "completed"
   clipboardMessageT1: string
   clipboardMessageT2: string
-  delay: number
+  delay: number | null
   fetchingStatus: "fetching" | "idle"
   isLoading: "none" | "loading" | "done"
   fallbackPage: number
 }
 
 export type DetailViewActions =
-  | { type: "set_transfer_details"; payload: Transfer | Transfer[] }
+  | { type: "set_transfer_details"; payload: Transfer[] }
   | { type: "set_transfer_status"; payload: "none" | "completed" }
   | { type: "set_clipboard_message_t1"; payload: string }
   | { type: "set_clipboard_message_t2"; payload: string }
   | { type: "update_fetching_status"; payload: "fetching" | "idle" }
-  | { type: "fetch_transfer" }
+  | { type: "fetching_transfer" }
+  | { type: "update_transfer_details"; payload: Transfer[] }
+  | { type: "set_delay"; payload: number | null }
 
 export function reducer(state: DetailViewState, action: DetailViewActions): DetailViewState {
   switch (action.type) {
     case "set_transfer_details": {
       return {
         ...state,
-        transferDetails: action.payload,
+        transferDetails: [...action.payload],
         isLoading: "done",
       }
     }
@@ -52,10 +54,23 @@ export function reducer(state: DetailViewState, action: DetailViewActions): Deta
         fetchingStatus: action.payload,
       }
     }
-    case "fetch_transfer": {
+    case "fetching_transfer": {
       return {
         ...state,
-        isLoading: "loading",
+        isLoading: state.transferDetails?.length ? "done" : "loading",
+      }
+    }
+    case "update_transfer_details": {
+      return {
+        ...state,
+        transferDetails: [...action.payload],
+      }
+    }
+    case "set_delay": {
+      return {
+        ...state,
+        delay: action.payload,
+        fetchingStatus: "idle",
       }
     }
     default:

src/pages/DetailView/styles.ts

@@ -18,11 +18,19 @@ export const useStyles = makeStyles()(theme => {
       },
     },
     circularProgress: {
-      gridColumn: "6 / span 2",
+      gridColumn: "6 / span 3",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       height: "100%",
+
+      "& > div": {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "20px",
+      },
     },
     sectionContainer: {
       display: "flex",

src/utils/Helpers.tsx

@@ -95,7 +95,6 @@ export const getNetworkNames = (chainId: number): string => {
       return "Khala"
     case 5233:
       return "Phala"
-    case 84531:
     case 8453:
       return "Base"
     case 338:
@@ -113,6 +112,8 @@ export const getNetworkNames = (chainId: number): string => {
       return "Arbitrum Sepolia"
     case 10200:
       return "Gnosis Chiado"
+    case 84532:
+      return "Base Sepolia"
     default:
       return "Ethereum"
   }
@@ -249,7 +250,6 @@ export const renderNetworkIcon = (chainId: number, classes: Record<"networkIcon"
       return <img src={`/assets/icons/phala-black.svg`} alt="substrate" className={classes.substrateNetworkIcon} />
     case 5232:
       return <img src={`/assets/icons/khala.svg`} alt="substrate" className={classes.substrateNetworkIcon} />
-    case 84531:
     case 8453:
       return <img src={`/assets/icons/base.svg`} alt="base" className={classes.networkIcon} />
     case 338:
@@ -263,6 +263,8 @@ export const renderNetworkIcon = (chainId: number, classes: Record<"networkIcon"
       return <img src={`/assets/icons/gnosis.svg`} alt="gnosis" className={classes.networkIcon} />
     case 421614:
       return <img src={`/assets/icons/arbitrum.svg`} alt="gnosis" className={classes.networkIcon} />
+    case 84532:
+      return <img src={`/assets/icons/base.svg`} alt="gnosis" className={classes.networkIcon} />
     default:
       return <img src={`/assets/icons/evm.svg`} alt="ethereum" className={classes.networkIcon} />
   }