@skip-go/widget 3.10.0 → 3.10.2

package/build/{index-BJ7FPDIO.js → index-Ax9YbGG_.js}

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import o, { useState, useMemo, useEffect, useContext, useRef, useDebugValue, createElement, useCallback, Fragment as Fragment$1 } from "react";
+import o, { useContext, useState, useMemo, useEffect, useRef, useDebugValue, createElement, useCallback, Fragment as Fragment$1, 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";
@@ -43189,7 +43189,7 @@ function walletConnect(parameters) {
         const optionalChains = config2.chains.map((x2) => x2.id);
         if (!optionalChains.length)
           return;
-        const { EthereumProvider } = await import("./index.es-D26eUUH4.js");
+        const { EthereumProvider } = await import("./index.es-COUg1FzR.js");
         return await EthereumProvider.init({
           ...parameters,
           disableProviderPing: true,
@@ -44497,12 +44497,14 @@ const VirtualList = ({
   renderItem,
   itemKey,
   className,
-  empty
+  empty,
+  expandedItemKey
 }) => {
   const theme = nt();
   const [currentlyFocusedElement, setCurrentlyFocusedElement] = useState();
   const listHeight = useListHeight(itemHeight);
   const listRef = useRef(null);
+  const itemRefs = useRef({});
   useEffect(() => {
     var _a, _b, _c;
     const listElement = (_c = (_b = (_a = listRef.current) == null ? void 0 : _a.nativeElement) == null ? void 0 : _b.getElementsByClassName(
@@ -44541,6 +44543,13 @@ const VirtualList = ({
       (_a = listRef.current) == null ? void 0 : _a.scrollTo(0);
     }, 0);
   }, [listItems.length]);
+  useEffect(() => {
+    if (!listRef.current || expandedItemKey == null) return;
+    const index = listItems.findIndex((item) => itemKey(item) === expandedItemKey);
+    if (index !== -1) {
+      listRef.current.scrollTo({ index, align: "top" });
+    }
+  }, [expandedItemKey, listItems, itemKey]);
   if (listItems.length === 0) {
     return /* @__PURE__ */ jsxs(StyledNoResultsContainer, { gap: 10, height: height ?? listHeight, children: [
       empty == null ? void 0 : empty.icon,
@@ -44567,7 +44576,9 @@ const VirtualList = ({
           backgroundColor: getHexColor(theme.primary.text.normal) + opacityToHex(50)
         }
       },
-      children: (item, index) => renderItem(item, index)
+      children: (item, index) => renderItem(item, index, (el) => {
+        itemRefs.current[itemKey(item)] = el;
+      })
     }
   );
 };
@@ -51820,144 +51831,142 @@ const FilledWarningIcon = ({
     }
   )
 ] });
-const TransactionHistoryPageHistoryItem = ({
-  index,
-  txHistoryItem,
-  showDetails,
-  onClickRow
-}) => {
-  var _a, _b, _c;
-  const theme = nt();
-  const isMobileScreenSize = useIsMobileScreenSize();
-  const { data: chains2 } = useAtomValue(skipChainsAtom);
-  const {
-    status: historyStatus,
-    explorerLinks: txHistoryExplorerLinks,
-    transferAssetRelease
-  } = useTxHistory({
-    txHistoryItem,
-    index
-  });
-  const removeTransactionHistoryItem = useSetAtom(removeTransactionHistoryItemAtom);
-  const {
-    route: {
-      amountIn,
-      amountOut,
-      sourceAssetDenom,
-      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,
-    tokenAmount: amountIn
-  });
-  const destinationAssetDetails = useGetAssetDetails({
-    assetDenom: destAssetDenom,
-    chainId: destAssetChainId,
-    tokenAmount: amountOut
-  });
-  const source = {
-    amount: sourceAssetDetails.amount,
-    asset: sourceAssetDetails.asset,
-    assetImage: sourceAssetDetails.assetImage ?? "",
-    chainName: sourceAssetDetails.chainName
-  };
-  const destination = {
-    amount: destinationAssetDetails.amount,
-    asset: destinationAssetDetails.asset,
-    assetImage: destinationAssetDetails.assetImage ?? "",
-    chainName: destinationAssetDetails.chainName
-  };
-  const renderStatus = useMemo(() => {
-    switch (historyStatus) {
-      case "unconfirmed":
-      case "pending":
-        return /* @__PURE__ */ jsx(
-          StyledAnimatedBorder,
-          {
-            width: 10,
-            height: 10,
-            backgroundColor: theme.primary.text.normal,
-            status: "pending"
-          }
-        );
-      case "completed":
-        return /* @__PURE__ */ jsx(StyledGreenDot, {});
-      case "incomplete":
-      case "failed": {
-        if (transferAssetRelease) {
-          return /* @__PURE__ */ jsx(FilledWarningIcon, { backgroundColor: theme.warning.text });
-        } else return /* @__PURE__ */ jsx(XIcon, { color: theme.error.text });
-      }
-    }
-  }, [
-    historyStatus,
-    theme.primary.text.normal,
-    theme.error.text,
-    theme.warning.text,
-    transferAssetRelease
-  ]);
-  const absoluteTimeString = useMemo(() => {
-    if (isMobileScreenSize) {
-      return getMobileDateFormat(new Date(timestamp));
-    }
-    return new Date(timestamp).toLocaleString();
-  }, [isMobileScreenSize, timestamp]);
-  const relativeTime = useMemo(() => {
-    if (historyStatus === "pending") {
-      return "In Progress";
-    }
-    if (!timestamp) return "";
-    return formatDistanceStrict(new Date(timestamp), /* @__PURE__ */ new Date(), {
-      addSuffix: true
-    }).replace("minutes", "mins").replace("minute", "min").replace("hours", "hrs").replace("hour", "hr").replace("seconds", "secs").replace("second", "sec").replace("months", "mos").replace("month", "mo").replace("years", "yrs").replace("year", "yr");
-  }, [timestamp, historyStatus]);
-  if (!txHistoryItem.route) return null;
-  return /* @__PURE__ */ jsxs(StyledHistoryContainer, { showDetails, children: [
-    /* @__PURE__ */ jsxs(StyledHistoryItemRow, { align: "center", justify: "space-between", onClick: onClickRow, children: [
-      /* @__PURE__ */ jsxs(Row, { gap: 8, align: "center", children: [
-        /* @__PURE__ */ jsx(RenderAssetAmount, { ...source, sourceAsset: true }),
-        /* @__PURE__ */ jsx(ThinArrowIcon, { color: theme.primary.text.lowContrast, direction: "right" }),
-        /* @__PURE__ */ jsx(RenderAssetAmount, { ...destination })
+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({
+      txHistoryItem,
+      index
+    });
+    const removeTransactionHistoryItem = useSetAtom(removeTransactionHistoryItemAtom);
+    const {
+      route: {
+        amountIn,
+        amountOut,
+        sourceAssetDenom,
+        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,
+      tokenAmount: amountIn
+    });
+    const destinationAssetDetails = useGetAssetDetails({
+      assetDenom: destAssetDenom,
+      chainId: destAssetChainId,
+      tokenAmount: amountOut
+    });
+    const source = {
+      amount: sourceAssetDetails.amount,
+      asset: sourceAssetDetails.asset,
+      assetImage: sourceAssetDetails.assetImage ?? "",
+      chainName: sourceAssetDetails.chainName
+    };
+    const destination = {
+      amount: destinationAssetDetails.amount,
+      asset: destinationAssetDetails.asset,
+      assetImage: destinationAssetDetails.assetImage ?? "",
+      chainName: destinationAssetDetails.chainName
+    };
+    const renderStatus = useMemo(() => {
+      switch (historyStatus) {
+        case "unconfirmed":
+        case "pending":
+          return /* @__PURE__ */ jsx(
+            StyledAnimatedBorder,
+            {
+              width: 10,
+              height: 10,
+              backgroundColor: theme.primary.text.normal,
+              status: "pending"
+            }
+          );
+        case "completed":
+          return /* @__PURE__ */ jsx(StyledGreenDot, {});
+        case "incomplete":
+        case "failed": {
+          if (transferAssetRelease) {
+            return /* @__PURE__ */ jsx(FilledWarningIcon, { backgroundColor: theme.warning.text });
+          } else return /* @__PURE__ */ jsx(XIcon, { color: theme.error.text });
+        }
+      }
+    }, [
+      historyStatus,
+      theme.primary.text.normal,
+      theme.error.text,
+      theme.warning.text,
+      transferAssetRelease
+    ]);
+    const absoluteTimeString = useMemo(() => {
+      if (isMobileScreenSize) {
+        return getMobileDateFormat(new Date(timestamp));
+      }
+      return new Date(timestamp).toLocaleString();
+    }, [isMobileScreenSize, timestamp]);
+    const relativeTime = useMemo(() => {
+      if (historyStatus === "pending") {
+        return "In Progress";
+      }
+      if (!timestamp) return "";
+      return formatDistanceStrict(new Date(timestamp), /* @__PURE__ */ new Date(), {
+        addSuffix: true
+      }).replace("minutes", "mins").replace("minute", "min").replace("hours", "hrs").replace("hour", "hr").replace("seconds", "secs").replace("second", "sec").replace("months", "mos").replace("month", "mo").replace("years", "yrs").replace("year", "yr");
+    }, [timestamp, historyStatus]);
+    if (!txHistoryItem.route) return null;
+    return /* @__PURE__ */ jsxs(StyledHistoryContainer, { ref, showDetails, children: [
+      /* @__PURE__ */ jsxs(StyledHistoryItemRow, { align: "center", justify: "space-between", onClick: onClickRow, children: [
+        /* @__PURE__ */ jsxs(Row, { gap: 8, align: "center", children: [
+          /* @__PURE__ */ jsx(RenderAssetAmount, { ...source, sourceAsset: true }),
+          /* @__PURE__ */ jsx(ThinArrowIcon, { color: theme.primary.text.lowContrast, direction: "right" }),
+          /* @__PURE__ */ jsx(RenderAssetAmount, { ...destination })
+        ] }),
+        /* @__PURE__ */ jsxs(Row, { align: "center", gap: 6, children: [
+          /* @__PURE__ */ jsx(SmallText, { children: relativeTime }),
+          /* @__PURE__ */ jsx(Row, { width: 20, align: "center", justify: "center", children: renderStatus })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs(Row, { align: "center", gap: 6, children: [
-        /* @__PURE__ */ jsx(SmallText, { children: relativeTime }),
-        /* @__PURE__ */ jsx(Row, { width: 20, align: "center", justify: "center", children: renderStatus })
-      ] })
-    ] }),
-    showDetails && /* @__PURE__ */ jsx(
-      TransactionHistoryPageHistoryItemDetails,
-      {
-        status: historyStatus,
-        sourceChainName: sourceAssetDetails.chainName ?? "--",
-        destinationChainName: destinationAssetDetails.chainName ?? "--",
-        absoluteTimeString,
-        onClickDelete: () => removeTransactionHistoryItem(index),
-        explorerLinks,
-        transferAssetRelease
-      }
-    )
-  ] });
-};
+      showDetails && /* @__PURE__ */ jsx(
+        TransactionHistoryPageHistoryItemDetails,
+        {
+          status: historyStatus,
+          sourceChainName: sourceAssetDetails.chainName ?? "--",
+          destinationChainName: destinationAssetDetails.chainName ?? "--",
+          absoluteTimeString,
+          onClickDelete: () => removeTransactionHistoryItem(index),
+          explorerLinks,
+          transferAssetRelease
+        }
+      )
+    ] });
+  }
+);
+TransactionHistoryPageHistoryItem.displayName = "TransactionHistoryPageHistoryItem";
 const RenderAssetAmount = ({
   amount,
   asset,
@@ -52013,7 +52022,7 @@ const StyledGreenDot = dt.div`
   border-radius: 50%;
 `;
 const TransactionHistoryPage = () => {
-  var _a;
+  var _a, _b, _c, _d;
   const theme = nt();
   const setCurrentPage = useSetAtom(currentPageAtom);
   const [itemIndexToShowDetail, setItemIndexToShowDetail] = useState(void 0);
@@ -52045,10 +52054,11 @@ const TransactionHistoryPage = () => {
           details: "No transactions yet",
           icon: /* @__PURE__ */ jsx(HistoryIcon, { width: 30, height: 30, color: (_a = theme == null ? void 0 : theme.primary) == null ? void 0 : _a.text.lowContrast })
         },
-        itemHeight: 1,
-        renderItem: (item, index) => /* @__PURE__ */ jsx(
+        itemHeight: 55,
+        renderItem: (item, index, refSetter) => /* @__PURE__ */ jsx(
           TransactionHistoryPageHistoryItem,
           {
+            ref: refSetter,
             index,
             txHistoryItem: item,
             showDetails: index === itemIndexToShowDetail,
@@ -52061,9 +52071,10 @@ const TransactionHistoryPage = () => {
           }
         ),
         itemKey: (item) => {
-          var _a2;
-          return (_a2 = item.transactionDetails) == null ? void 0 : _a2[0].txHash;
-        }
+          var _a2, _b2;
+          return (_b2 = (_a2 = item == null ? void 0 : item.transactionDetails) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.txHash;
+        },
+        expandedItemKey: itemIndexToShowDetail ? (_d = (_c = (_b = historyList[itemIndexToShowDetail]) == null ? void 0 : _b.transactionDetails) == null ? void 0 : _c[0]) == null ? void 0 : _d.txHash : void 0
       },
       txHistory.length
     ) }),
@@ -52240,7 +52251,7 @@ const initSentry = () => {
 };
 const name = "@skip-go/widget";
 const description = "Swap widget";
-const version = "3.10.0";
+const version = "3.10.2";
 const repository = {
   url: "https://github.com/skip-mev/skip-go",
   directory: "packages/widget"
@@ -52298,7 +52309,7 @@ const devDependencies = {
   "@typescript-eslint/parser": "^7.15.0",
   "@vitejs/plugin-react": "^4.3.1",
   buffer: "^6.0.3",
-  "chain-registry": "^1.69.212",
+  "chain-registry": "^1.69.218",
   download: "^8.0.0",
   eslint: "^9.9.0",
   "eslint-config-prettier": "^9.1.0",
@@ -52343,7 +52354,6 @@ const dependencies = {
   "@cosmjs/stargate": "0.33.1",
   "@ebay/nice-modal-react": "^1.2.13",
   "@eslint/compat": "^1.1.1",
-  "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.44",
   "@penumbra-zone/bech32m": "^13.0.0",
   "@penumbra-zone/client": "^24.0.0",
   "@penumbra-zone/protobuf": "^7.2.0",
@@ -52365,7 +52375,7 @@ const dependencies = {
   "@walletconnect/solana-adapter": "^0.0.6",
   add: "^2.0.6",
   bech32: "^2.0.0",
-  graz: "0.3.1",
+  graz: "0.3.2",
   jotai: "^2.10.1",
   "jotai-effect": "^1.0.2",
   "jotai-tanstack-query": "^0.8.6",

package/build/{index.es-D26eUUH4.js → index.es-COUg1FzR.js}

@@ -1,4 +1,4 @@
-import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs, p as process$1 } from "./index-BJ7FPDIO.js";
+import { g as getAugmentedNamespace, c as commonjsGlobal, a as getDefaultExportFromCjs, p as process$1 } from "./index-Ax9YbGG_.js";
 import qg, { PROPOSAL_EXPIRY_MESSAGE } from "@walletconnect/sign-client";
 const global = globalThis || void 0 || self;
 var buffer$1 = {};

package/build/index.js

@@ -1,4 +1,4 @@
-import { W, d, l, o, r } from "./index-BJ7FPDIO.js";
+import { W, d, l, o, r } from "./index-Ax9YbGG_.js";
 export {
   W as Widget,
   d as defaultTheme,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skip-go/widget",
   "description": "Swap widget",
-  "version": "3.10.0",
+  "version": "3.10.2",
   "repository": {
     "url": "https://github.com/skip-mev/skip-go",
     "directory": "packages/widget"
@@ -36,14 +36,13 @@
     "@cosmjs/stargate": "0.33.1",
     "@ebay/nice-modal-react": "^1.2.13",
     "@eslint/compat": "^1.1.1",
-    "@leapwallet/cosmos-social-login-capsule-provider": "^0.0.44",
     "@penumbra-zone/bech32m": "^13.0.0",
     "@penumbra-zone/client": "^24.0.0",
     "@penumbra-zone/protobuf": "^7.2.0",
     "@penumbra-zone/transport-dom": "^7.5.0",
     "@r2wc/react-to-web-component": "^2.0.3",
     "@sentry/react": "^8.46.0",
-    "@skip-go/client": "1.1.0",
+    "@skip-go/client": "1.1.1",
     "@solana/spl-token": "^0.4.8",
     "@solana/wallet-adapter-backpack": "^0.1.14",
     "@solana/wallet-adapter-coinbase": "^0.1.19",
@@ -58,7 +57,7 @@
     "@walletconnect/solana-adapter": "^0.0.6",
     "add": "^2.0.6",
     "bech32": "^2.0.0",
-    "graz": "0.3.1",
+    "graz": "0.3.2",
     "jotai": "^2.10.1",
     "jotai-effect": "^1.0.2",
     "jotai-tanstack-query": "^0.8.6",