@skip-go/widget 3.10.7 → 3.10.8

package/build/{index-DH5wZbVT.js → index-CNQdmj1d.js}

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import o, { useContext, useState, useMemo, useEffect, useRef, useDebugValue, createElement, useCallback, Fragment as Fragment$1, forwardRef } from "react";
+import o, { useContext, useState, useMemo, useEffect, useRef, useDebugValue, createElement, useCallback, Fragment as Fragment$1, memo, forwardRef } from "react";
 import { Scope } from "react-shadow-scope";
 import { atom as atom$1, useAtomValue, useAtom, useSetAtom, createStore, Provider } from "jotai";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
@@ -2131,6 +2131,20 @@ const iconMap = {
     /* goFast */
   ]: GoFastIcon
 };
+const isBrowser = typeof window !== "undefined" && typeof window.navigator !== "undefined";
+function isMobile() {
+  if (!isBrowser) {
+    return false;
+  }
+  return window.matchMedia("(pointer:coarse)").matches || !!window.navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini/u);
+}
+function isWindows() {
+  var _a;
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform.startsWith("Win")) ?? navigator.platform.startsWith("Win")
+  );
+}
 const removeButtonStyles = lt`
   background: none;
   border: none;
@@ -2194,6 +2208,7 @@ const Text = dt(SmallText)`
   font-size: 20px;
   font-weight: 400;
   letter-spacing: 0;
+  ${({ useWindowsTextHack }) => useWindowsTextHack && isWindows() ? "margin-bottom: -4px" : ""};
   ${textProps}
 `;
 const TextButton = dt(Text).attrs({ as: "button" })`
@@ -4155,14 +4170,33 @@ const PillButtonLink = dt(PillButton).attrs({
   color: ${({ theme }) => theme.primary.text.lowContrast};
   text-decoration: none;
 `;
-const SwapPageHeader = ({ leftButton, rightButton, rightContent }) => {
-  const LeftIcon = iconMap[(leftButton == null ? void 0 : leftButton.icon) || ICONS.none];
-  const RightIcon = iconMap[(rightButton == null ? void 0 : rightButton.icon) || ICONS.none];
-  return /* @__PURE__ */ jsxs(StyledSwapPageHeaderContainer, { justify: "space-between", children: [
+const PageHeader = ({
+  leftButton,
+  centerButton,
+  rightButton,
+  rightContent
+}) => {
+  const renderIcon = (icon) => {
+    if (o.isValidElement(icon)) {
+      return () => icon;
+    }
+    if (icon && icon in iconMap) {
+      return iconMap[icon];
+    }
+    return () => null;
+  };
+  const LeftIcon = renderIcon(leftButton == null ? void 0 : leftButton.icon);
+  const CenterIcon = renderIcon(centerButton == null ? void 0 : centerButton.icon);
+  const RightIcon = renderIcon(rightButton == null ? void 0 : rightButton.icon);
+  return /* @__PURE__ */ jsxs(StyledPageHeaderContainer, { align: "center", justify: "space-between", children: [
     /* @__PURE__ */ jsx(Row, { align: "center", gap: 10, children: leftButton && /* @__PURE__ */ jsxs(GhostButton, { gap: 5, align: "center", onClick: leftButton.onClick, children: [
       /* @__PURE__ */ jsx(LeftIcon, {}),
       leftButton.label
     ] }) }),
+    /* @__PURE__ */ jsx(CenterContainer, { children: centerButton && /* @__PURE__ */ jsxs(GhostButton, { gap: 5, align: "center", onClick: centerButton.onClick, children: [
+      /* @__PURE__ */ jsx(CenterIcon, {}),
+      centerButton.label
+    ] }) }),
     /* @__PURE__ */ jsxs(Row, { align: "center", gap: 10, children: [
       rightContent,
       rightButton && /* @__PURE__ */ jsxs(GhostButton, { gap: 5, align: "center", onClick: rightButton.onClick, children: [
@@ -4172,8 +4206,14 @@ const SwapPageHeader = ({ leftButton, rightButton, rightContent }) => {
     ] })
   ] });
 };
-const StyledSwapPageHeaderContainer = dt(Row)`
+const StyledPageHeaderContainer = dt(Row)`
   height: 30px;
+  position: relative;
+`;
+const CenterContainer = dt.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 `;
 const WarningPageBadPrice = ({
   onClickContinue,
@@ -4267,7 +4307,7 @@ const WarningPageBadPrice = ({
   const { title, descriptionContent } = errorPageContent;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -4326,7 +4366,7 @@ const ExpectedErrorPageAuthFailed = ({ onClickBack }) => {
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -4398,7 +4438,7 @@ const UnexpectedErrorPageTransactionFailed = ({
   const setCurrentPage = useSetAtom(currentPageAtom);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -4473,7 +4513,7 @@ const UnexpectedErrorPageUnexpected = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -4794,7 +4834,7 @@ const useBroadcastedTxsStatus = ({
       setPrevData(resData);
       return resData;
     },
-    enabled: !isSettled && (!!txs && txs.length > 0 && enabled !== void 0 ? enabled : true),
+    enabled: txsRequired !== void 0 && txs !== void 0 && !isSettled && (!!txs && txs.length > 0 && enabled !== void 0 ? enabled : true),
     refetchInterval: 500,
     // to make the data persist when query key changed
     initialData: prevData
@@ -5260,8 +5300,8 @@ const setTransactionHistoryAtom = atom$1(
   null,
   (get, set, index, historyItem) => {
     const history = get(transactionHistoryAtom);
-    const oldHistoryItem = (history == null ? void 0 : history[index]) ?? {};
-    const newHistory = history;
+    const newHistory = [...history];
+    const oldHistoryItem = newHistory[index] ?? {};
     newHistory[index] = { ...oldHistoryItem, ...historyItem };
     set(transactionHistoryAtom, newHistory);
   }
@@ -5284,8 +5324,9 @@ atomWithQuery((get) => {
     queryFn: async () => {
       const nestedTransactionHistoryPromises = transactionHistory.map(
         async (transactionHistoryItem) => {
+          var _a;
           const transactionDetailsPromises = await Promise.all(
-            transactionHistoryItem.transactionDetails.map(async (transactionDetail) => {
+            (_a = transactionHistoryItem.transactionDetails) == null ? void 0 : _a.map(async (transactionDetail) => {
               if (transactionHistoryItem.status !== "completed" && transactionHistoryItem.status !== "failed") {
                 return await transactionStatus(transactionDetail);
               }
@@ -43478,7 +43519,7 @@ function walletConnect(parameters) {
         const optionalChains = config2.chains.map((x2) => x2.id);
         if (!optionalChains.length)
           return;
-        const { EthereumProvider } = await import("./index.es-BpfdJdUu.js");
+        const { EthereumProvider } = await import("./index.es-BHI6rKwj.js");
         return await EthereumProvider.init({
           ...parameters,
           disableProviderPing: true,
@@ -43678,13 +43719,6 @@ function walletConnect(parameters) {
     }
   }));
 }
-const isBrowser = typeof window !== "undefined" && typeof window.navigator !== "undefined";
-function isMobile() {
-  if (!isBrowser) {
-    return false;
-  }
-  return window.matchMedia("(pointer:coarse)").matches || !!window.navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini/u);
-}
 const formaTestnet = defineChain$1({
   id: 984123,
   name: "Forma Testnet",
@@ -43812,6 +43846,14 @@ const createExplorerLink = ({
       return void 0;
   }
 };
+const createSkipExplorerLink = (transactionDetails) => {
+  var _a, _b;
+  const { get } = jotaiStore;
+  const txHashCommaSeperatedList = (_a = transactionDetails == null ? void 0 : transactionDetails.map((txDetails) => txDetails.txHash)) == null ? void 0 : _a.join(",");
+  const isTestnet = get(onlyTestnetsAtom);
+  const initialTxChainId = (_b = transactionDetails == null ? void 0 : transactionDetails[0]) == null ? void 0 : _b.chainId;
+  return `https://explorer.skip.build/?tx_hash=${txHashCommaSeperatedList}&chain_id=${initialTxChainId}${isTestnet ? "&is_testnet=true" : ""}`;
+};
 var WalletAdapterNetwork;
 (function(WalletAdapterNetwork2) {
   WalletAdapterNetwork2["Mainnet"] = "mainnet-beta";
@@ -43895,7 +43937,10 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
       var _a2;
       track("execute route: transaction updated", { txInfo });
       if (((_a2 = txInfo.status) == null ? void 0 : _a2.status) !== "STATE_COMPLETED") {
-        set(setTransactionDetailsAtom, txInfo, transactionHistoryIndex);
+        set(setTransactionDetailsAtom, {
+          transactionDetails: txInfo,
+          transactionHistoryIndex
+        });
       }
     },
     onApproveAllowance: async ({ status, allowance }) => {
@@ -43907,6 +43952,7 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
     onTransactionBroadcast: async (txInfo) => {
       var _a2;
       track("execute route: transaction broadcasted", { txInfo });
+      set(setValidatingGasBalanceAtom, { status: "completed" });
       setUser({ id: txInfo == null ? void 0 : txInfo.txHash });
       const chain = chains2 == null ? void 0 : chains2.find((chain2) => chain2.chainId === txInfo.chainId);
       const explorerLink = createExplorerLink({
@@ -43914,11 +43960,10 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
         chainType: chain == null ? void 0 : chain.chainType,
         txHash: txInfo.txHash
       });
-      set(
-        setTransactionDetailsAtom,
-        { ...txInfo, explorerLink, status: void 0 },
+      set(setTransactionDetailsAtom, {
+        transactionDetails: { ...txInfo, explorerLink, status: void 0 },
         transactionHistoryIndex
-      );
+      });
       (_a2 = callbacks == null ? void 0 : callbacks.onTransactionBroadcasted) == null ? void 0 : _a2.call(callbacks, {
         chainId: txInfo.chainId,
         txHash: txInfo.txHash,
@@ -43955,7 +44000,9 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
     },
     onTransactionSigned: async (txInfo) => {
       track("execute route: transaction signed");
+      let transactionsSigned = 0;
       set(swapExecutionStateAtom, (prev2) => {
+        transactionsSigned = (prev2.transactionsSigned ?? 0) + 1;
         const clientOperations = prev2.clientOperations;
         const signRequiredIndex = clientOperations.findIndex((operation) => {
           return operation.signRequired && (operation.chainId === txInfo.chainId || operation.fromChainId === txInfo.chainId);
@@ -43966,19 +44013,23 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
         return {
           ...prev2,
           clientOperations,
-          transactionsSigned: (prev2.transactionsSigned ?? 0) + 1
+          transactionsSigned
         };
       });
+      const transactionHistoryItem = get(transactionHistoryAtom)[transactionHistoryIndex];
+      set(setTransactionHistoryAtom, transactionHistoryIndex, {
+        ...transactionHistoryItem,
+        signatures: transactionsSigned
+      });
       set(setOverallStatusAtom, "pending");
     },
-    onError: (error, transactionDetailsArray) => {
+    onError: (error) => {
       var _a2, _b, _c;
       const currentPage = get(currentPageAtom);
       track("execute route: error", { error, route: route2 });
       (_a2 = callbacks == null ? void 0 : callbacks.onTransactionFailed) == null ? void 0 : _a2.call(callbacks, {
         error: error == null ? void 0 : error.message
       });
-      const lastTransaction = transactionDetailsArray == null ? void 0 : transactionDetailsArray[(transactionDetailsArray == null ? void 0 : transactionDetailsArray.length) - 1];
       if (isUserRejectedRequestError(error)) {
         track("expected error page: user rejected request");
         if (currentPage === Routes.SwapExecutionPage) {
@@ -44008,28 +44059,6 @@ const setSwapExecutionStateAtom = atom$1(null, (get, set) => {
             set(setOverallStatusAtom, "unconfirmed");
           }
         });
-      } else if (lastTransaction == null ? void 0 : lastTransaction.explorerLink) {
-        track("unexpected error page: transaction failed", { lastTransaction });
-        set(errorWarningAtom, {
-          errorWarningType: ErrorWarningType.TransactionFailed,
-          onClickBack: () => {
-            set(setOverallStatusAtom, "unconfirmed");
-          },
-          explorerLink: (lastTransaction == null ? void 0 : lastTransaction.explorerLink) ?? "",
-          txHash: (lastTransaction == null ? void 0 : lastTransaction.txHash) ?? "",
-          onClickContactSupport: () => {
-            window.open("https://skip.build/discord", "_blank");
-          }
-        });
-      } else {
-        track("unexpected error page: unexpected error", { error, route: route2 });
-        set(errorWarningAtom, {
-          errorWarningType: ErrorWarningType.Unexpected,
-          error,
-          onClickBack: () => {
-            set(setOverallStatusAtom, "unconfirmed");
-          }
-        });
       }
     },
     onValidateGasBalance: async (props) => {
@@ -44046,10 +44075,10 @@ const setValidatingGasBalanceAtom = atom$1(
 );
 const setTransactionDetailsAtom = atom$1(
   null,
-  (get, set, transactionDetails, transactionHistoryIndex) => {
+  (get, set, { transactionDetails, transactionHistoryIndex, status }) => {
     const swapExecutionState = get(swapExecutionStateAtom);
     const { transactionDetailsArray, route: route2 } = swapExecutionState;
-    const newTransactionDetailsArray = transactionDetailsArray;
+    const newTransactionDetailsArray = [...transactionDetailsArray];
     const transactionIndexFound = newTransactionDetailsArray.findIndex(
       (transaction) => transaction.txHash.toLowerCase() === transactionDetails.txHash.toLowerCase()
     );
@@ -44065,11 +44094,16 @@ const setTransactionDetailsAtom = atom$1(
       ...swapExecutionState,
       transactionDetailsArray: newTransactionDetailsArray
     });
+    const transactionHistoryItem = get(transactionHistoryAtom)[transactionHistoryIndex];
     set(setTransactionHistoryAtom, transactionHistoryIndex, {
+      ...transactionHistoryItem,
       route: route2,
       transactionDetails: newTransactionDetailsArray,
+      transferEvents: [],
       timestamp: Date.now(),
-      status: "unconfirmed"
+      isSettled: false,
+      isSuccess: false,
+      ...status && { status }
     });
   }
 );
@@ -44213,7 +44247,7 @@ const UnexpectedErrorPageTimeout = ({
   }, [data == null ? void 0 : data.isSettled, errorWarning, setErrorWarning]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -44283,7 +44317,7 @@ const WarningPageTradeAdditionalSigningRequired = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -44342,7 +44376,7 @@ const UnexpectedErrorPageTransactionReverted = ({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -44416,7 +44450,7 @@ const WarningPageCosmosLedger = ({ onClickBack }) => {
   const theme = nt();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -44965,7 +44999,7 @@ const filterOutAtom = atom$1();
 const filterOutUnlessUserHasBalanceAtom = atom$1();
 const useGroupedAssetByRecommendedSymbol = ({
   context
-}) => {
+} = {}) => {
   const { data: _assets } = useAtomValue(skipAssetsAtom);
   const getBalance = useGetBalance();
   const filter2 = useAtomValue(filterAtom);
@@ -45003,7 +45037,7 @@ const useGroupedAssetByRecommendedSymbol = ({
       });
       return isAllowed && !isBlocked && !isBlockedUnlessUserHasBalance;
     });
-  }, [filter2, context, filterOut, filterOutUnlessUserHasBalance, _assets, getBalance]);
+  }, [context, filter2, filterOut, filterOutUnlessUserHasBalance, _assets, getBalance]);
   const groupedAssetsByRecommendedSymbol = useMemo(() => {
     if (!assets2) return;
     const groupedAssets = [];
@@ -45130,9 +45164,7 @@ const SwapExecutionPageRouteDetailedRow = ({
     chainId,
     tokenAmount
   });
-  const groupedAssets = useGroupedAssetByRecommendedSymbol({
-    context: void 0
-  });
+  const groupedAssets = useGroupedAssetByRecommendedSymbol();
   const groupedAsset = groupedAssets == null ? void 0 : groupedAssets.find((i) => i.id === (assetDetails == null ? void 0 : assetDetails.symbol));
   const chainAddresses = useAtomValue(chainAddressesAtom);
   const shouldRenderEditDestinationWallet = context === "destination" && onClickEditDestinationWallet !== void 0;
@@ -45957,7 +45989,7 @@ const useCreateCosmosWallets = () => {
               setCosmosWallet({
                 id: currentCosmosId,
                 walletName: wallet,
-                chainType: ChainType.Svm
+                chainType: ChainType.Cosmos
               });
             }
             track("wallet connected", {
@@ -47729,7 +47761,7 @@ const RowLayout = ({ image, mainText, subText, eureka }) => {
         flexDirection: isMobileScreenSize ? "column" : "row",
         gap: isMobileScreenSize ? void 0 : 8,
         children: [
-          /* @__PURE__ */ jsx(Text, { children: mainText }),
+          /* @__PURE__ */ jsx(Text, { useWindowsTextHack: true, children: mainText }),
           /* @__PURE__ */ jsxs(Row, { align: "center", gap: 6, children: [
             subText,
             eureka && /* @__PURE__ */ jsx(SmallText, { normalTextColor: true, children: " IBC Eureka " })
@@ -47890,7 +47922,6 @@ const SwapPageAssetChainInput = ({
   priceChangePercentage,
   isWaitingToUpdateInputValue,
   badPriceWarning,
-  context,
   disabled
 }) => {
   const theme = nt();
@@ -47902,7 +47933,7 @@ const SwapPageAssetChainInput = ({
     amount: value,
     chainId: selectedAsset == null ? void 0 : selectedAsset.chainId
   });
-  const groupedAssetsByRecommendedSymbol = useGroupedAssetByRecommendedSymbol({ context });
+  const groupedAssetsByRecommendedSymbol = useGroupedAssetByRecommendedSymbol();
   const groupedAsset = groupedAssetsByRecommendedSymbol == null ? void 0 : groupedAssetsByRecommendedSymbol.find(
     (group) => {
       var _a;
@@ -47996,7 +48027,7 @@ const SwapPageAssetChainInput = ({
       /* @__PURE__ */ jsxs(StyledAssetButton, { onClick: handleChangeAsset, disabled, gap: 5, children: [
         (assetDetails == null ? void 0 : assetDetails.assetImage) && assetDetails.symbol ? /* @__PURE__ */ jsxs(StyledAssetLabel, { align: "center", justify: "center", gap: 7, children: [
           /* @__PURE__ */ jsx(GroupedAssetImage, { height: 23, width: 23, groupedAsset }),
-          /* @__PURE__ */ jsx(Text, { children: assetDetails.symbol }),
+          /* @__PURE__ */ jsx(Text, { useWindowsTextHack: true, children: assetDetails.symbol }),
           isMobileScreenSize && /* @__PURE__ */ jsx(
             ChevronIcon,
             {
@@ -48211,7 +48242,7 @@ const AssetAndChainSelectorModalSearchInput = ({
       /* @__PURE__ */ jsx(Button, { onClick: onClickBack, children: /* @__PURE__ */ jsx(StyledLeftArrowIcon, { color: theme.primary.text.normal, maskedVersion: false }) }),
       /* @__PURE__ */ jsxs(StyledSelectedAsset, { gap: 5, align: "center", justify: "center", children: [
         /* @__PURE__ */ jsx(GroupedAssetImage, { groupedAsset, width: 20, height: 20 }),
-        /* @__PURE__ */ jsx(Text, { children: asset == null ? void 0 : asset.recommendedSymbol })
+        /* @__PURE__ */ jsx(Text, { useWindowsTextHack: true, children: asset == null ? void 0 : asset.recommendedSymbol })
       ] })
     ] }) : /* @__PURE__ */ jsx(StyledSearchIcon, { color: theme.primary.text.normal }),
     /* @__PURE__ */ jsx(
@@ -48888,7 +48919,7 @@ const WarningPageGoFast = ({ onClickBack, onClickContinue }) => {
       },
       children: [
         /* @__PURE__ */ jsx(
-          SwapPageHeader,
+          PageHeader,
           {
             leftButton: {
               label: "Back",
@@ -48963,7 +48994,7 @@ const WarningPageLowInfo = ({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -49038,7 +49069,7 @@ const ExpectedErrorPageInsufficientGasBalance = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -49076,7 +49107,10 @@ const ExpectedErrorPageInsufficientGasBalance = ({
     )
   ] });
 };
-const ExpectedErrorPageRelayFeeQuoteExpired = ({ error, onClickBack }) => {
+const ExpectedErrorPageRelayFeeQuoteExpired = ({
+  error,
+  onClickBack
+}) => {
   const theme = nt();
   const setErrorAtom = useSetAtom(errorWarningAtom);
   const setCurrentPage = useSetAtom(currentPageAtom);
@@ -49089,7 +49123,7 @@ const ExpectedErrorPageRelayFeeQuoteExpired = ({ error, onClickBack }) => {
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -49180,9 +49214,7 @@ const SwapExecutionPageRouteSimpleRow = ({
     chainId,
     tokenAmount
   });
-  const groupedAssets = useGroupedAssetByRecommendedSymbol({
-    context: void 0
-  });
+  const groupedAssets = useGroupedAssetByRecommendedSymbol();
   const groupedAsset = groupedAssets == null ? void 0 : groupedAssets.find((i) => i.id === (assetDetails == null ? void 0 : assetDetails.symbol));
   const chainAddresses = useAtomValue(chainAddressesAtom);
   const source = useMemo(() => {
@@ -49861,7 +49893,12 @@ const useSyncTxStatus = ({
 }) => {
   const transferEvents = statusData == null ? void 0 : statusData.transferEvents;
   const setOverallStatus = useSetAtom(setOverallStatusAtom);
-  const { route: route2, transactionDetailsArray, overallStatus, transactionHistoryIndex } = useAtomValue(swapExecutionStateAtom);
+  const {
+    route: route2,
+    transactionDetailsArray,
+    overallStatus,
+    transactionHistoryIndex: currentTransactionHistoryIndex
+  } = useAtomValue(swapExecutionStateAtom);
   const setTransactionHistory = useSetAtom(setTransactionHistoryAtom);
   const txHistory = useAtomValue(transactionHistoryAtom);
   const { isPending } = useAtomValue(skipSubmitSwapExecutionAtom);
@@ -49870,15 +49907,12 @@ const useSyncTxStatus = ({
     return getClientOperations(route2.operations);
   }, [route2 == null ? void 0 : route2.operations]);
   const computedSwapStatus = useMemo(() => {
-    if ((statusData == null ? void 0 : statusData.lastTxStatus) === "pending") {
-      if (isPending) {
-        setOverallStatus("pending");
-      }
+    if ((statusData == null ? void 0 : statusData.lastTxStatus) === "pending" || isPending) {
       return "pending";
     }
     if ((transferEvents == null ? void 0 : transferEvents.length) === 0 && !(statusData == null ? void 0 : statusData.isSettled)) {
       if (isPending && overallStatus !== "pending") {
-        setOverallStatus("signing");
+        return "signing";
       }
       return;
     }
@@ -49897,7 +49931,6 @@ const useSyncTxStatus = ({
     }
   }, [
     isPending,
-    setOverallStatus,
     statusData == null ? void 0 : statusData.isSettled,
     statusData == null ? void 0 : statusData.isSuccess,
     statusData == null ? void 0 : statusData.lastTxStatus,
@@ -49906,13 +49939,15 @@ const useSyncTxStatus = ({
   ]);
   useEffect(() => {
     if (computedSwapStatus) {
-      const index = historyIndex ?? transactionHistoryIndex;
-      setTransactionHistory(historyIndex ?? transactionHistoryIndex, {
+      const index = historyIndex ?? currentTransactionHistoryIndex;
+      const newTxHistoryItem = {
         ...txHistory[index],
         ...statusData,
         status: computedSwapStatus
-      });
-      if (!historyIndex) {
+      };
+      const oldTxHistoryItem = txHistory[index];
+      if (JSON.stringify(newTxHistoryItem) !== JSON.stringify(oldTxHistoryItem)) {
+        setTransactionHistory(index, newTxHistoryItem);
         setOverallStatus(computedSwapStatus);
       }
     }
@@ -49922,11 +49957,11 @@ const useSyncTxStatus = ({
     computedSwapStatus,
     setOverallStatus,
     transactionDetailsArray.length,
+    txHistory,
+    statusData,
     setTransactionHistory,
-    transactionHistoryIndex,
     historyIndex,
-    txHistory,
-    statusData
+    currentTransactionHistoryIndex
   ]);
 };
 function useSwapExecutionState({
@@ -49953,7 +49988,7 @@ function useSwapExecutionState({
     if (overallStatus === "completed") {
       return SwapExecutionState.confirmed;
     }
-    if (overallStatus === "pending") {
+    if (overallStatus === "pending" || overallStatus === "failed") {
       if (signaturesRemaining > 0) {
         return SwapExecutionState.signaturesRemaining;
       }
@@ -50193,76 +50228,113 @@ const SwapExecutionButton = ({
       return null;
   }
 };
-const useHandleTransactionFailed = (statusData) => {
-  var _a, _b;
+const DELAY_EXPECTING_TRANSFER_ASSET_RELEASE = 15e3;
+const useHandleTransactionFailed = (error, statusData) => {
   const setErrorWarning = useSetAtom(errorWarningAtom);
   const setCurrentPage = useSetAtom(currentPageAtom);
-  const setSourceAssetAtom = useSetAtom(sourceAssetAtom);
-  const setDebouncedSourceAssetAmountAtom = useSetAtom(debouncedSourceAssetAmountAtom);
+  const setSourceAsset = useSetAtom(sourceAssetAtom);
+  const setDebouncedSourceAssetAmount = useSetAtom(debouncedSourceAssetAmountAtom);
+  const setOverallStatus = useSetAtom(setOverallStatusAtom);
   const [{ data: assets2 }] = useAtom(skipAssetsAtom);
-  const { transactionDetailsArray } = useAtomValue(swapExecutionStateAtom);
-  const lastTransaction = transactionDetailsArray[transactionDetailsArray.length - 1];
+  const { transactionDetailsArray, route: route2 } = useAtomValue(swapExecutionStateAtom);
+  const lastTransaction = transactionDetailsArray.at(-1);
+  const lastTxHash = lastTransaction == null ? void 0 : lastTransaction.txHash;
   const getClientAsset = useCallback(
     (denom, chainId) => {
-      if (!denom || !chainId) return;
-      if (!assets2) return;
+      if (!denom || !chainId || !assets2) return;
       return assets2.find(
         (a) => a.denom.toLowerCase() === denom.toLowerCase() && a.chainId === chainId
       );
     },
     [assets2]
   );
-  const sourceClientAsset = getClientAsset(
-    (_a = statusData == null ? void 0 : statusData.transferAssetRelease) == null ? void 0 : _a.denom,
-    (_b = statusData == null ? void 0 : statusData.transferAssetRelease) == null ? void 0 : _b.chainId
-  );
-  useEffect(() => {
-    if ((statusData == null ? void 0 : statusData.isSettled) && !(statusData == null ? void 0 : statusData.isSuccess)) {
-      if (sourceClientAsset) {
-        track("unexpected error page: transaction reverted", {
-          transferAssetRelease: statusData.transferAssetRelease,
-          lastTransaction
-        });
-        setErrorWarning({
-          errorWarningType: ErrorWarningType.TransactionReverted,
-          onClickContinueTransaction: () => {
-            var _a2;
-            setSourceAssetAtom(sourceClientAsset);
-            setDebouncedSourceAssetAmountAtom(
-              (_a2 = statusData.transferAssetRelease) == null ? void 0 : _a2.amount,
-              void 0,
-              true
-            );
-            setCurrentPage(Routes.SwapPage);
-            setErrorWarning(void 0);
-          },
-          explorerUrl: (lastTransaction == null ? void 0 : lastTransaction.explorerLink) ?? "",
-          transferAssetRelease: statusData.transferAssetRelease
-        });
-        return;
-      }
+  const explorerLink = createSkipExplorerLink(transactionDetailsArray);
+  const handleTransactionFailed = useCallback(() => {
+    var _a, _b;
+    const sourceClientAsset = getClientAsset(
+      (_a = statusData == null ? void 0 : statusData.transferAssetRelease) == null ? void 0 : _a.denom,
+      (_b = statusData == null ? void 0 : statusData.transferAssetRelease) == null ? void 0 : _b.chainId
+    );
+    if (sourceClientAsset) {
+      track("unexpected error page: transaction reverted", {
+        transferAssetRelease: statusData == null ? void 0 : statusData.transferAssetRelease,
+        lastTransaction
+      });
+      setErrorWarning({
+        errorWarningType: ErrorWarningType.TransactionReverted,
+        onClickContinueTransaction: () => {
+          var _a2;
+          setSourceAsset({
+            ...sourceClientAsset
+          });
+          setDebouncedSourceAssetAmount((_a2 = statusData == null ? void 0 : statusData.transferAssetRelease) == null ? void 0 : _a2.amount, void 0, true);
+          setCurrentPage(Routes.SwapPage);
+          setErrorWarning(void 0);
+        },
+        explorerUrl: explorerLink,
+        transferAssetRelease: statusData == null ? void 0 : statusData.transferAssetRelease
+      });
+    } else if (explorerLink) {
       track("unexpected error page: transaction failed", { lastTransaction });
       setErrorWarning({
         errorWarningType: ErrorWarningType.TransactionFailed,
         onClickContactSupport: () => window.open("https://skip.build/discord", "_blank"),
-        explorerLink: (lastTransaction == null ? void 0 : lastTransaction.explorerLink) ?? "",
-        txHash: lastTransaction == null ? void 0 : lastTransaction.txHash
+        explorerLink,
+        txHash: lastTxHash ?? ""
+      });
+    } else {
+      track("unexpected error page: unexpected error", { error, route: route2 });
+      setErrorWarning({
+        errorWarningType: ErrorWarningType.Unexpected,
+        error,
+        onClickBack: () => setOverallStatus("unconfirmed")
       });
     }
   }, [
+    error,
+    explorerLink,
+    getClientAsset,
     lastTransaction,
-    lastTransaction == null ? void 0 : lastTransaction.explorerLink,
-    lastTransaction == null ? void 0 : lastTransaction.txHash,
+    lastTxHash,
+    route2,
     setCurrentPage,
-    setDebouncedSourceAssetAmountAtom,
+    setDebouncedSourceAssetAmount,
     setErrorWarning,
-    setSourceAssetAtom,
-    sourceClientAsset,
+    setOverallStatus,
+    setSourceAsset,
+    statusData == null ? void 0 : statusData.transferAssetRelease
+  ]);
+  useEffect(() => {
+    if ((statusData == null ? void 0 : statusData.isSuccess) || !(statusData == null ? void 0 : statusData.isSettled)) return;
+    const timeout = setTimeout(() => {
+      handleTransactionFailed();
+    }, DELAY_EXPECTING_TRANSFER_ASSET_RELEASE);
+    if (statusData.transferAssetRelease) {
+      clearTimeout(timeout);
+      handleTransactionFailed();
+    }
+    return () => clearTimeout(timeout);
+  }, [
     statusData == null ? void 0 : statusData.isSettled,
     statusData == null ? void 0 : statusData.isSuccess,
-    statusData == null ? void 0 : statusData.transferAssetRelease
+    statusData == null ? void 0 : statusData.transferAssetRelease,
+    handleTransactionFailed
   ]);
 };
+function usePreventPageUnload(shouldWarn) {
+  useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (shouldWarn) {
+        track("Prevent user leaving the page before all txs are signed");
+        e.preventDefault();
+        e.returnValue = "Please complete the required transaction signatures to complete this trade. Leaving this page before signing both may cause your trade to fail.";
+        return "Please complete the required transaction signatures to complete this trade. Leaving this page before signing both may cause your trade to fail.";
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [shouldWarn]);
+}
 var SwapExecutionState = /* @__PURE__ */ ((SwapExecutionState2) => {
   SwapExecutionState2[SwapExecutionState2["recoveryAddressUnset"] = 0] = "recoveryAddressUnset";
   SwapExecutionState2[SwapExecutionState2["destinationAddressUnset"] = 1] = "destinationAddressUnset";
@@ -50289,13 +50361,16 @@ const SwapExecutionPage = () => {
   const chainAddresses = useAtomValue(chainAddressesAtom);
   const { connectRequiredChains, isLoading } = useAutoSetAddress();
   const [simpleRoute, setSimpleRoute] = useState(true);
-  const { mutate: submitExecuteRouteMutation } = useAtomValue(skipSubmitSwapExecutionAtom);
+  const { mutate: submitExecuteRouteMutation, error } = useAtomValue(skipSubmitSwapExecutionAtom);
   const shouldDisplaySignaturesRemaining = (route2 == null ? void 0 : route2.txsRequired) && route2.txsRequired > 1;
   const signaturesRemaining = shouldDisplaySignaturesRemaining ? route2.txsRequired - transactionsSigned : 0;
   const { data: statusData } = useBroadcastedTxsStatus({
     txsRequired: route2 == null ? void 0 : route2.txsRequired,
     txs: transactionDetailsArray
   });
+  const lastTransaction = transactionDetailsArray.at(-1);
+  const lastTxHash = lastTransaction == null ? void 0 : lastTransaction.txHash;
+  const lastTxChainId = lastTransaction == null ? void 0 : lastTransaction.chainId;
   useSyncTxStatus({
     statusData
   });
@@ -50308,7 +50383,11 @@ const SwapExecutionPage = () => {
     signaturesRemaining,
     isLoading
   });
-  useHandleTransactionFailed(statusData);
+  usePreventPageUnload(
+    swapExecutionState === 5 || swapExecutionState === 4 || swapExecutionState === 8 || swapExecutionState === 7
+    /* validatingGasBalance */
+  );
+  useHandleTransactionFailed(error, statusData);
   useHandleTransactionTimeout(swapExecutionState);
   const firstOperationStatus = useMemo(() => {
     if (swapExecutionState === 6 || swapExecutionState === 3 || swapExecutionState === 5) {
@@ -50349,9 +50428,10 @@ const SwapExecutionPage = () => {
     };
   }, [swapExecutionState, route2]);
   const SwapExecutionPageRoute = simpleRoute ? SwapExecutionPageRouteSimple : SwapExecutionPageRouteDetailed;
+  const shouldRenderTrackProgressButton = lastTxHash && lastTxChainId && (route2 == null ? void 0 : route2.txsRequired) === transactionDetailsArray.length;
   return /* @__PURE__ */ jsxs(Column, { gap: 5, children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: simpleRoute ? {
           label: "Back",
@@ -50361,6 +50441,15 @@ const SwapExecutionPage = () => {
             setCurrentPage(Routes.SwapPage);
           }
         } : void 0,
+        centerButton: shouldRenderTrackProgressButton ? {
+          label: "Track progress",
+          onClick: () => {
+            window.open(createSkipExplorerLink(transactionDetailsArray), "_blank");
+            track("swap execution page: track progress button - clicked", {
+              txHash: lastTxHash
+            });
+          }
+        } : void 0,
         rightButton: {
           label: simpleRoute ? "Details" : "Hide details",
           icon: simpleRoute ? ICONS.hamburger : ICONS.horizontalLine,
@@ -50768,107 +50857,6 @@ const useInsufficientSourceBalance = () => {
   }
   return true;
 };
-const SpinnerIcon = (props) => {
-  return /* @__PURE__ */ jsxs("svg", { fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", opacity: ".25", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
-        fill: "currentColor",
-        opacity: ".75"
-      }
-    )
-  ] });
-};
-const ConnectedWalletContent = () => {
-  const sourceAsset = useAtomValue(sourceAssetAtom);
-  const getAccount = useGetAccount();
-  const sourceAccount = getAccount(sourceAsset == null ? void 0 : sourceAsset.chainId);
-  const sourceDetails = useGetAssetDetails({
-    assetDenom: sourceAsset == null ? void 0 : sourceAsset.denom,
-    amount: sourceAsset == null ? void 0 : sourceAsset.amount,
-    chainId: sourceAsset == null ? void 0 : sourceAsset.chainId
-  });
-  const { data: sourceBalance, isLoading } = useGetSourceBalance();
-  const handleMaxButton = useSetMaxAmount();
-  const maxAmountTokenMinusFees = useMaxAmountTokenMinusFees();
-  const formattedBalance = useMemo(() => {
-    var _a;
-    const symbol = (sourceDetails == null ? void 0 : sourceDetails.symbol) ? ` ${sourceDetails == null ? void 0 : sourceDetails.symbol}` : "";
-    if ((_a = sourceBalance == null ? void 0 : sourceBalance.error) == null ? void 0 : _a.message) return "--";
-    if (sourceBalance === void 0) return;
-    const formattedBalanceAmount = formatDisplayAmount(sourceBalance == null ? void 0 : sourceBalance.formattedAmount);
-    return formattedBalanceAmount + symbol;
-  }, [sourceBalance, sourceDetails == null ? void 0 : sourceDetails.symbol]);
-  if (!sourceAccount) return null;
-  return /* @__PURE__ */ jsxs(
-    Row,
-    {
-      style: {
-        paddingRight: 8,
-        gap: 1
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          GhostButton,
-          {
-            onClick: () => {
-              track("swap page: connected wallet balance - clicked");
-              NiceModal.show(Modals.ConnectedWalletModal);
-            },
-            align: "center",
-            gap: 8,
-            children: [
-              (sourceAccount == null ? void 0 : sourceAccount.wallet.logo) && /* @__PURE__ */ jsx(
-                "img",
-                {
-                  style: { objectFit: "cover" },
-                  src: sourceAccount == null ? void 0 : sourceAccount.wallet.logo,
-                  height: 16,
-                  width: 16
-                }
-              ),
-              isLoading ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    marginLeft: "8px",
-                    marginRight: "8px",
-                    position: "relative"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    SpinnerIcon,
-                    {
-                      style: {
-                        animation: "spin 1s linear infinite",
-                        position: "absolute",
-                        height: 14,
-                        width: 14
-                      }
-                    }
-                  )
-                }
-              ) : formattedBalance
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          GhostButton,
-          {
-            disabled: !sourceBalance || (sourceBalance == null ? void 0 : sourceBalance.amount) === "0" || maxAmountTokenMinusFees === "0",
-            onClick: () => {
-              track("swap page: max button - clicked");
-              handleMaxButton();
-            },
-            align: "center",
-            children: "Max"
-          }
-        )
-      ]
-    }
-  );
-};
 const useFetchAllBalances = () => {
   const getAccount = useGetAccount();
   const { data: assets2 } = useAtomValue(skipAssetsAtom);
@@ -50985,7 +50973,7 @@ const useShowCosmosLedgerWarning = () => {
 };
 const name = "@skip-go/widget";
 const description = "Swap widget";
-const version = "3.10.7";
+const version = "3.10.8";
 const repository = {
   url: "https://github.com/skip-mev/skip-go",
   directory: "packages/widget"
@@ -51154,6 +51142,231 @@ const startAmplitudeSessionReplay = () => {
     add(plugin);
   }
 };
+const SpinnerIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", opacity: ".25", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+        fill: "currentColor",
+        opacity: ".75"
+      }
+    )
+  ] });
+};
+const ConnectedWalletContent = () => {
+  const sourceAsset = useAtomValue(sourceAssetAtom);
+  const getAccount = useGetAccount();
+  const sourceAccount = getAccount(sourceAsset == null ? void 0 : sourceAsset.chainId);
+  const sourceDetails = useGetAssetDetails({
+    assetDenom: sourceAsset == null ? void 0 : sourceAsset.denom,
+    amount: sourceAsset == null ? void 0 : sourceAsset.amount,
+    chainId: sourceAsset == null ? void 0 : sourceAsset.chainId
+  });
+  const { data: sourceBalance, isLoading } = useGetSourceBalance();
+  const handleMaxButton = useSetMaxAmount();
+  const maxAmountTokenMinusFees = useMaxAmountTokenMinusFees();
+  const formattedBalance = useMemo(() => {
+    var _a;
+    const symbol = (sourceDetails == null ? void 0 : sourceDetails.symbol) ? ` ${sourceDetails == null ? void 0 : sourceDetails.symbol}` : "";
+    if ((_a = sourceBalance == null ? void 0 : sourceBalance.error) == null ? void 0 : _a.message) return "--";
+    if (sourceBalance === void 0) return;
+    const formattedBalanceAmount = formatDisplayAmount(sourceBalance == null ? void 0 : sourceBalance.formattedAmount);
+    return formattedBalanceAmount + symbol;
+  }, [sourceBalance, sourceDetails == null ? void 0 : sourceDetails.symbol]);
+  if (!sourceAccount) return null;
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      style: {
+        paddingRight: 8,
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          GhostButton,
+          {
+            onClick: () => {
+              track("swap page: connected wallet balance - clicked");
+              NiceModal.show(Modals.ConnectedWalletModal);
+            },
+            align: "center",
+            gap: 8,
+            children: [
+              (sourceAccount == null ? void 0 : sourceAccount.wallet.logo) && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  style: { objectFit: "cover" },
+                  src: sourceAccount == null ? void 0 : sourceAccount.wallet.logo,
+                  height: 16,
+                  width: 16
+                }
+              ),
+              isLoading ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginLeft: "8px",
+                    marginRight: "8px",
+                    position: "relative"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    SpinnerIcon,
+                    {
+                      style: {
+                        animation: "spin 1s linear infinite",
+                        position: "absolute",
+                        height: 14,
+                        width: 14
+                      }
+                    }
+                  )
+                }
+              ) : formattedBalance
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          GhostButton,
+          {
+            disabled: !sourceBalance || (sourceBalance == null ? void 0 : sourceBalance.amount) === "0" || maxAmountTokenMinusFees === "0",
+            onClick: () => {
+              track("swap page: max button - clicked");
+              handleMaxButton();
+            },
+            align: "center",
+            children: "Max"
+          }
+        )
+      ]
+    }
+  );
+};
+const useTxHistory = ({ txHistoryItem, index }) => {
+  var _a, _b, _c;
+  const { data: chains2 } = useAtomValue(skipChainsAtom);
+  const txs = (_a = txHistoryItem == null ? void 0 : txHistoryItem.transactionDetails) == null ? void 0 : _a.map((tx) => ({
+    chainId: tx.chainId,
+    txHash: tx.txHash
+  }));
+  const chainIdFound = chains2 == null ? void 0 : chains2.some(
+    (chain) => txs == null ? void 0 : txs.map((tx) => tx.chainId).includes(chain.chainId ?? "")
+  );
+  const txsRequired = (_b = txHistoryItem == null ? void 0 : txHistoryItem.route) == null ? void 0 : _b.txsRequired;
+  let statusData = {
+    isSuccess: false,
+    isSettled: false,
+    transferEvents: [],
+    ...txHistoryItem
+  };
+  const shouldFetchStatus = !(txHistoryItem == null ? void 0 : txHistoryItem.isSettled) && txs !== void 0 && chainIdFound;
+  const { data, isFetching, isPending } = useBroadcastedTxsStatus({
+    txsRequired,
+    txs,
+    enabled: shouldFetchStatus
+  });
+  if (data !== void 0) {
+    statusData = data;
+  }
+  useSyncTxStatus({
+    statusData,
+    historyIndex: index
+  });
+  const explorerLinks = /* @__PURE__ */ new Set();
+  (_c = statusData == null ? void 0 : statusData.transferEvents) == null ? void 0 : _c.forEach((transferEvent) => {
+    explorerLinks.add(transferEvent.fromExplorerLink);
+    explorerLinks.add(transferEvent.toExplorerLink);
+  });
+  const query = useQuery({
+    queryKey: ["tx-history-status", { txs, txsRequired, statusData }],
+    queryFn: () => {
+      if ((txs == null ? void 0 : txs.length) !== txsRequired) return "incomplete";
+      if (isFetching && isPending) return "unconfirmed";
+      if ((statusData == null ? void 0 : statusData.isSettled) && (statusData == null ? void 0 : statusData.isSuccess)) return "completed";
+      if ((statusData == null ? void 0 : statusData.isSettled) && !(statusData == null ? void 0 : statusData.isSuccess) || !chainIdFound) return "failed";
+      return "pending";
+    },
+    enabled: txs !== void 0 && txsRequired !== void 0 && statusData !== void 0
+  });
+  return {
+    status: query.data,
+    explorerLinks: Array.from(explorerLinks).filter((link) => link),
+    transferAssetRelease: (statusData == null ? void 0 : statusData.transferAssetRelease) ?? (txHistoryItem == null ? void 0 : txHistoryItem.transferAssetRelease)
+  };
+};
+const SwapPageHeader = memo(() => {
+  const setCurrentPage = useSetAtom(currentPageAtom);
+  const sourceAsset = useAtomValue(sourceAssetAtom);
+  const getAccount = useGetAccount();
+  const sourceAccount = getAccount(sourceAsset == null ? void 0 : sourceAsset.chainId);
+  const noHistoryItems = useAtomValue(noHistoryItemsAtom);
+  const isFetchingLastTransactionStatus = useAtomValue(isFetchingLastTransactionStatusAtom);
+  const historyPageButton = useMemo(() => {
+    if (noHistoryItems) return;
+    const getHistoryPageIcon = () => {
+      if (isFetchingLastTransactionStatus) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              marginLeft: "8px",
+              marginRight: "8px",
+              position: "relative"
+            },
+            children: /* @__PURE__ */ jsx(
+              SpinnerIcon,
+              {
+                style: {
+                  animation: "spin 1s linear infinite",
+                  position: "absolute",
+                  height: 14,
+                  width: 14
+                }
+              }
+            )
+          }
+        );
+      }
+      return ICONS.history;
+    };
+    return {
+      label: "History",
+      icon: getHistoryPageIcon(),
+      onClick: () => {
+        track("swap page: history button - clicked");
+        setCurrentPage(Routes.TransactionHistoryPage);
+      }
+    };
+  }, [isFetchingLastTransactionStatus, noHistoryItems, setCurrentPage]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isFetchingLastTransactionStatus && /* @__PURE__ */ jsx(TrackLatestTxHistoryItemStatus, {}),
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        leftButton: historyPageButton,
+        rightContent: sourceAccount ? /* @__PURE__ */ jsx(ConnectedWalletContent, {}) : null
+      }
+    )
+  ] });
+});
+const TrackLatestTxHistoryItemStatus = memo(() => {
+  const transactionhistory = useAtomValue(transactionHistoryAtom);
+  const lastTxHistoryItem = transactionhistory.at(-1);
+  useTxHistory({
+    txHistoryItem: lastTxHistoryItem,
+    index: transactionhistory.length - 1
+  });
+  return null;
+});
+const noHistoryItemsAtom = atom$1((get) => {
+  const txHistoryItems = get(transactionHistoryAtom);
+  return (txHistoryItems == null ? void 0 : txHistoryItems.length) === 0;
+});
+const isFetchingLastTransactionStatusAtom = atom$1((get) => {
+  const { overallStatus, route: route2, transactionsSigned } = get(swapExecutionStateAtom);
+  return overallStatus === "pending" && transactionsSigned === (route2 == null ? void 0 : route2.txsRequired);
+});
 const SwapPage = () => {
   var _a;
   const { SettingsFooter, drawerOpen } = useSettingsDrawer();
@@ -51188,7 +51401,6 @@ const SwapPage = () => {
   const switchEvmchainId = useSwitchEvmChain();
   const getAccount = useGetAccount();
   const sourceAccount = getAccount(sourceAsset == null ? void 0 : sourceAsset.chainId);
-  const txHistory = useAtomValue(transactionHistoryAtom);
   const isSwapOperation = useIsSwapOperation(route2);
   const getClientAsset = useCallback(
     (denom, chainId) => {
@@ -51444,17 +51656,6 @@ const SwapPage = () => {
     setSwapExecutionState,
     setError
   ]);
-  const historyPageButton = useMemo(() => {
-    if (txHistory.length === 0) return;
-    return {
-      label: "History",
-      icon: ICONS.history,
-      onClick: () => {
-        track("swap page: history button - clicked");
-        setCurrentPage(Routes.TransactionHistoryPage);
-      }
-    };
-  }, [setCurrentPage, txHistory]);
   return /* @__PURE__ */ jsxs(
     Column,
     {
@@ -51463,13 +51664,7 @@ const SwapPage = () => {
         opacity: drawerOpen ? 0.3 : 1
       },
       children: [
-        /* @__PURE__ */ jsx(
-          SwapPageHeader,
-          {
-            leftButton: historyPageButton,
-            rightContent: sourceAccount ? /* @__PURE__ */ jsx(ConnectedWalletContent, {}) : null
-          }
-        ),
+        /* @__PURE__ */ jsx(SwapPageHeader, {}),
         /* @__PURE__ */ jsxs(Column, { align: "center", children: [
           /* @__PURE__ */ jsx(
             SwapPageAssetChainInput,
@@ -51484,7 +51679,6 @@ const SwapPage = () => {
                 track("swap page: source asset amount input - changed", { amount: v2 });
                 setSourceAssetAmount(v2);
               },
-              context: "source",
               disabled: sourceAsset == null ? void 0 : sourceAsset.locked
             }
           ),
@@ -51504,7 +51698,6 @@ const SwapPage = () => {
                 track("swap page: destination asset amount input - changed", { amount: v2 });
                 setDestinationAssetAmount(v2);
               },
-              context: "destination",
               disabled: destinationAsset == null ? void 0 : destinationAsset.locked
             }
           )
@@ -51560,10 +51753,12 @@ const TransactionHistoryPageHistoryItemDetails = ({
   destinationChainName,
   absoluteTimeString,
   onClickDelete,
-  explorerLinks,
-  transferAssetRelease
+  transferAssetRelease,
+  transactionDetails
 }) => {
+  var _a;
   const theme = nt();
+  const initialTxHash = (_a = transactionDetails == null ? void 0 : transactionDetails[0]) == null ? void 0 : _a.txHash;
   const statusColor = useMemo(() => {
     if (status === "failed" || status === "incomplete") {
       if (transferAssetRelease) {
@@ -51575,47 +51770,6 @@ const TransactionHistoryPageHistoryItemDetails = ({
     }
     return;
   }, [status, theme.error.text, theme.success.text, theme.warning.text, transferAssetRelease]);
-  const handleClickingLinkIfNoExplorerLink = (txHash, explorerLink) => {
-    if (!explorerLink) {
-      copyToClipboard(txHash);
-    }
-  };
-  const getTxHashFromLink = (link) => {
-    const splitLinkBySlash = link == null ? void 0 : link.split("/");
-    if (!splitLinkBySlash) return;
-    return splitLinkBySlash[splitLinkBySlash.length - 1];
-  };
-  const renderTransactionIds = useMemo(() => {
-    return explorerLinks == null ? void 0 : explorerLinks.map((link, index) => {
-      const txHash = getTxHashFromLink(link);
-      const getTransactionIdLabel = () => {
-        if (index === 0) {
-          return "Initial transaction ";
-        }
-        if (index === explorerLinks.length - 1) {
-          return "Final transaction ";
-        }
-        return "Transaction ";
-      };
-      return /* @__PURE__ */ jsxs(StyledHistoryItemDetailRow, { align: "center", children: [
-        /* @__PURE__ */ jsx(StyledDetailsLabel, { children: getTransactionIdLabel() }),
-        /* @__PURE__ */ jsxs(
-          Link,
-          {
-            onClick: () => handleClickingLinkIfNoExplorerLink(txHash, link),
-            href: link,
-            title: txHash,
-            target: "_blank",
-            gap: 5,
-            children: [
-              /* @__PURE__ */ jsx(SmallText, { normalTextColor: true, children: getTruncatedAddress(txHash) }),
-              /* @__PURE__ */ jsx(SmallText, { children: /* @__PURE__ */ jsx(ChainIcon, {}) })
-            ]
-          }
-        )
-      ] }, `${index}-${txHash}`);
-    });
-  }, [explorerLinks]);
   const showTransferAssetRelease = Boolean(
     transferAssetRelease && transferAssetRelease.released && (status === "failed" || status === "incomplete")
   );
@@ -51623,6 +51777,7 @@ const TransactionHistoryPageHistoryItemDetails = ({
     assetDenom: transferAssetRelease == null ? void 0 : transferAssetRelease.denom,
     chainId: transferAssetRelease == null ? void 0 : transferAssetRelease.chainId
   });
+  const skipExplorerLink = createSkipExplorerLink(transactionDetails);
   return /* @__PURE__ */ jsxs(Column, { padding: 10, gap: 10, style: { paddingTop: showTransferAssetRelease ? 0 : 10 }, children: [
     showTransferAssetRelease && /* @__PURE__ */ jsx(StyledTransferAssetRelease, { children: /* @__PURE__ */ jsxs(SmallText, { color: theme.warning.text, children: [
       "This transaction did not complete. Your assets have been released as:",
@@ -51649,7 +51804,17 @@ const TransactionHistoryPageHistoryItemDetails = ({
         /* @__PURE__ */ jsx(SmallText, { normalTextColor: true, children: destinationChainName })
       ] })
     ] }),
-    renderTransactionIds,
+    /* @__PURE__ */ jsxs(StyledHistoryItemDetailRow, { align: "center", children: [
+      /* @__PURE__ */ jsx(StyledDetailsLabel, { children: "Route explorer" }),
+      /* @__PURE__ */ jsxs(Link, { href: skipExplorerLink, target: "_blank", gap: 5, onClick: () => {
+        track("transaction history page: view route explorer - clicked", {
+          txHash: initialTxHash
+        });
+      }, children: [
+        /* @__PURE__ */ jsx(SmallText, { normalTextColor: true, children: getTruncatedAddress(initialTxHash) }),
+        /* @__PURE__ */ jsx(SmallText, { children: /* @__PURE__ */ jsx(ChainIcon, {}) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsx(Row, { align: "center", style: { marginTop: 10, padding: "0px 10px" }, children: /* @__PURE__ */ jsxs(Button, { onClick: onClickDelete, gap: 5, align: "center", children: [
       /* @__PURE__ */ jsx(SmallText, { color: theme.error.text, children: "Delete" }),
       /* @__PURE__ */ jsx(TrashIcon, { color: theme.error.text })
@@ -52295,59 +52460,6 @@ const getMobileDateFormat = (date, timeZone) => {
   const year = lookup("year");
   return `${hours}:${minutes} ${tz} ${month}/${day}/${year}`;
 };
-const useTxHistory = ({
-  txHistoryItem,
-  index
-}) => {
-  var _a, _b, _c;
-  const { data: chains2 } = useAtomValue(skipChainsAtom);
-  const txs = (_a = txHistoryItem.transactionDetails) == null ? void 0 : _a.map((tx) => ({
-    chainId: tx.chainId,
-    txHash: tx.txHash
-  }));
-  const chainIdFound = chains2 == null ? void 0 : chains2.some(
-    (chain) => txs.map((tx) => tx.chainId).includes(chain.chainId ?? "")
-  );
-  const txsRequired = (_b = txHistoryItem == null ? void 0 : txHistoryItem.route) == null ? void 0 : _b.txsRequired;
-  let statusData = {
-    isSuccess: false,
-    isSettled: false,
-    transferEvents: [],
-    ...txHistoryItem
-  };
-  const { data, isFetching, isPending } = useBroadcastedTxsStatus({
-    txsRequired,
-    txs,
-    enabled: !txHistoryItem.isSettled && chainIdFound
-  });
-  if (data !== void 0) {
-    statusData = data;
-  }
-  useSyncTxStatus({
-    statusData,
-    historyIndex: index
-  });
-  const explorerLinks = /* @__PURE__ */ new Set();
-  (_c = statusData == null ? void 0 : statusData.transferEvents) == null ? void 0 : _c.forEach((transferEvent) => {
-    explorerLinks.add(transferEvent.fromExplorerLink);
-    explorerLinks.add(transferEvent.toExplorerLink);
-  });
-  const query = useQuery({
-    queryKey: ["tx-history-status", { txs, txsRequired, statusData }],
-    queryFn: () => {
-      if (txs.length !== txsRequired) return "incomplete";
-      if (isFetching && isPending) return "unconfirmed";
-      if ((statusData == null ? void 0 : statusData.isSettled) && (statusData == null ? void 0 : statusData.isSuccess)) return "completed";
-      if ((statusData == null ? void 0 : statusData.isSettled) && !(statusData == null ? void 0 : statusData.isSuccess) || !chainIdFound) return "failed";
-      return "pending";
-    }
-  });
-  return {
-    status: query.data,
-    explorerLinks: Array.from(explorerLinks).filter((link) => link),
-    transferAssetRelease: (statusData == null ? void 0 : statusData.transferAssetRelease) ?? txHistoryItem.transferAssetRelease
-  };
-};
 const FilledWarningIcon = ({
   color = "currentColor",
   backgroundColor = "transparent"
@@ -52363,15 +52475,9 @@ const FilledWarningIcon = ({
 ] });
 const TransactionHistoryPageHistoryItem = forwardRef(
   ({ index, txHistoryItem, showDetails, onClickRow }, ref) => {
-    var _a, _b, _c;
     const theme = nt();
     const isMobileScreenSize = useIsMobileScreenSize();
-    const { data: chains2 } = useAtomValue(skipChainsAtom);
-    const {
-      status: historyStatus,
-      explorerLinks: txHistoryExplorerLinks,
-      transferAssetRelease
-    } = useTxHistory({
+    const { status: historyStatus, transferAssetRelease } = useTxHistory({
       txHistoryItem,
       index
     });
@@ -52384,24 +52490,10 @@ const TransactionHistoryPageHistoryItem = forwardRef(
         sourceAssetChainId,
         destAssetDenom,
         destAssetChainId
-      },
+      } = {},
       timestamp,
       transactionDetails
     } = txHistoryItem;
-    const initialTxHash = (_a = transactionDetails == null ? void 0 : transactionDetails[0]) == null ? void 0 : _a.txHash;
-    const chainId = (_b = transactionDetails == null ? void 0 : transactionDetails[0]) == null ? void 0 : _b.chainId;
-    const chainType = (_c = chains2 == null ? void 0 : chains2.find((chain) => chain.chainId === chainId)) == null ? void 0 : _c.chainType;
-    const derivedExplorerLink = createExplorerLink({
-      txHash: initialTxHash,
-      chainId,
-      chainType
-    });
-    const explorerLinks = useMemo(() => {
-      if (txHistoryExplorerLinks.length === 0 && derivedExplorerLink) {
-        return [derivedExplorerLink];
-      }
-      return txHistoryExplorerLinks;
-    }, [derivedExplorerLink, txHistoryExplorerLinks]);
     const sourceAssetDetails = useGetAssetDetails({
       assetDenom: sourceAssetDenom,
       chainId: sourceAssetChainId,
@@ -52485,11 +52577,11 @@ const TransactionHistoryPageHistoryItem = forwardRef(
         TransactionHistoryPageHistoryItemDetails,
         {
           status: historyStatus,
+          transactionDetails,
           sourceChainName: sourceAssetDetails.chainName ?? "--",
           destinationChainName: destinationAssetDetails.chainName ?? "--",
           absoluteTimeString,
           onClickDelete: () => removeTransactionHistoryItem(index),
-          explorerLinks,
           transferAssetRelease
         }
       )
@@ -52558,7 +52650,7 @@ const TransactionHistoryPage = () => {
   );
   return /* @__PURE__ */ jsxs(Column, { gap: 5, children: [
     /* @__PURE__ */ jsx(
-      SwapPageHeader,
+      PageHeader,
       {
         leftButton: {
           label: "Back",
@@ -52597,7 +52689,7 @@ const TransactionHistoryPage = () => {
         ),
         itemKey: (item) => {
           var _a2, _b2;
-          return (_b2 = (_a2 = item == null ? void 0 : item.transactionDetails) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.txHash;
+          return ((_b2 = (_a2 = item == null ? void 0 : item.transactionDetails) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.txHash) ?? item.timestamp;
         },
         expandedItemKey: itemIndexToShowDetail ? (_d = (_c = (_b = historyList[itemIndexToShowDetail]) == null ? void 0 : _b.transactionDetails) == null ? void 0 : _c[0]) == null ? void 0 : _d.txHash : void 0
       },