display dynamic time estimate on tx history page

skip-mev · Nov 9, 2023 · cf8a4be · cf8a4be
1 parent d8d49b1
commit cf8a4be
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/src/components/HistoryDialog/HistoryList.tsx b/src/components/HistoryDialog/HistoryList.tsx
@@ -12,9 +12,9 @@ import * as Accordion from "@radix-ui/react-accordion";
 import { clsx } from "clsx";
 import { ComponentPropsWithoutRef, forwardRef, Fragment, useMemo } from "react";
 
-import { useChains } from "@/api/queries";
 import { disclosure } from "@/context/disclosures";
 import { removeTxHistory, TxHistoryItem } from "@/context/tx-history";
+import { useFinalityTimeEstimate } from "@/utils/hooks";
 
 import { AssetValue } from "../AssetValue";
 import { ChainSymbol } from "../ChainSymbol";
@@ -61,13 +61,7 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
   function Item(props, ref) {
     const { id, data, className, ...rest } = props;
 
-    const { chains = [] } = useChains();
-
-    const isSourceEvm = useMemo(() => {
-      const [sourceChainID] = data.route.chainIDs;
-      const chain = chains.find(({ chainID }) => chainID === sourceChainID);
-      return chain?.chainType === "evm";
-    }, [chains, data.route.chainIDs]);
+    const estimatedFinalityTime = useFinalityTimeEstimate(data.route);
 
     return (
       <Accordion.Item
@@ -195,7 +189,9 @@ export const Item = forwardRef<HTMLDivElement, ItemProps>(
             <DescriptionList.Row>
               <DescriptionList.Dt>Completion Time</DescriptionList.Dt>
               <DescriptionList.Dd>
-                ~{isSourceEvm ? 30 : 2} minutes
+                {estimatedFinalityTime === ""
+                  ? "2 minutes"
+                  : estimatedFinalityTime}
               </DescriptionList.Dd>
             </DescriptionList.Row>
           </DescriptionList.Root>

diff --git a/src/components/TransactionDialog/TransactionDialogContent.tsx b/src/components/TransactionDialog/TransactionDialogContent.tsx
@@ -2,11 +2,10 @@ import { useManager } from "@cosmos-kit/react";
 import { ArrowLeftIcon, CheckCircleIcon } from "@heroicons/react/20/solid";
 import { RouteResponse } from "@skip-router/core";
 import { clsx } from "clsx";
-import { FC, Fragment, useMemo, useState } from "react";
+import { FC, Fragment, useState } from "react";
 import { useAccount } from "wagmi";
 
 import { Chain, useChains } from "@/api/queries";
-import { getFinalityTime } from "@/constants/finality";
 import { useSettingsStore } from "@/context/settings";
 import { useToast } from "@/context/toast";
 import {
@@ -17,6 +16,7 @@ import {
 } from "@/context/tx-history";
 import Toast from "@/elements/Toast";
 import { useSkipClient } from "@/solve";
+import { useFinalityTimeEstimate } from "@/utils/hooks";
 import {
   enableChains,
   getAddressForCosmosChain,
@@ -243,26 +243,7 @@ const TransactionDialogContent: FC<Props> = ({
     }
   };
 
-  const estimatedFinalityTime = useMemo(() => {
-    for (const operation of route.operations) {
-      if ("axelarTransfer" in operation) {
-        const sourceChain = chains.find(
-          ({ chainID }) => chainID === operation.axelarTransfer.fromChainID,
-        );
-        if (sourceChain?.chainType === "evm") {
-          return getFinalityTime(sourceChain.chainID);
-        }
-
-        const destinationChain = chains.find(
-          ({ chainID }) => chainID === operation.axelarTransfer.toChainID,
-        );
-        if (destinationChain?.chainType === "evm") {
-          return getFinalityTime(destinationChain.chainID);
-        }
-      }
-    }
-    return "";
-  }, [chains, route.operations]);
+  const estimatedFinalityTime = useFinalityTimeEstimate(route);
 
   if (txComplete) {
     return (

diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
@@ -1,4 +1,8 @@
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { RouteResponse } from "@skip-router/core";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+import { useChains } from "@/api/queries";
+import { getFinalityTime } from "@/constants/finality";
 
 export const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -24,3 +28,29 @@ export function useInterval(callback: () => void, delay: number | null) {
     return () => clearInterval(id);
   }, [delay]);
 }
+
+export function useFinalityTimeEstimate(route: RouteResponse) {
+  const { chains = [] } = useChains();
+
+  return useMemo(() => {
+    for (const operation of route.operations) {
+      if ("axelarTransfer" in operation) {
+        const sourceChain = chains.find(
+          ({ chainID }) => chainID === operation.axelarTransfer.fromChainID,
+        );
+        if (sourceChain?.chainType === "evm") {
+          return getFinalityTime(sourceChain.chainID);
+        }
+
+        const destinationChain = chains.find(
+          ({ chainID }) => chainID === operation.axelarTransfer.toChainID,
+        );
+        if (destinationChain?.chainType === "evm") {
+          return getFinalityTime(destinationChain.chainID);
+        }
+      }
+    }
+
+    return "";
+  }, [chains, route.operations]);
+}