@rash2x/bridge-widget 0.6.34 → 0.6.35

package/dist/evaa-bridge.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-DvjGvKnp.cjs");
+const index = require("./index-BXp-N4UF.cjs");
 exports.DEFAULT_SLIPPAGE_BPS = index.DEFAULT_SLIPPAGE_BPS;
 exports.EvaaBridge = index.EvaaBridge;
 exports.RoutePriority = index.RoutePriority;

package/dist/evaa-bridge.mjs

@@ -1,4 +1,4 @@
-import { U, d, f, e, H, B, F, X, N, z, $, G, A, D, Z, w, s, v, r, p, q, L, a2, aa, a4, a7, x, I, y, a5, J, a3, a8, a9, Y, a6, W, P, _, a1, ab, Q, S, a0, K, V, t, o, i, u, l, m, j, n, h, k } from "./index-CO2PQtBo.js";
+import { U, d, f, e, H, B, F, X, N, z, $, G, A, D, Z, w, s, v, r, p, q, L, a2, aa, a4, a7, x, I, y, a5, J, a3, a8, a9, Y, a6, W, P, _, a1, ab, Q, S, a0, K, V, t, o, i, u, l, m, j, n, h, k } from "./index-DvKN7Y1C.js";
 export {
   U as DEFAULT_SLIPPAGE_BPS,
   d as EvaaBridge,

package/dist/{index-DvjGvKnp.cjs → index-BXp-N4UF.cjs}

@@ -31,6 +31,7 @@ const viem = require("viem");
 const tronwalletAdapters = require("@tronweb3/tronwallet-adapters");
 const tronweb = require("tronweb");
 const card = require("@/components/ui/card");
+const reactWindow = require("react-window");
 const common$1 = { "connecting": "Connecting…", "initializing": "Initializing...", "loading": "Loading...", "paste": "paste", "close": "Close", "zeroPlaceholder": "0", "nativeToken": "Native Token" };
 const wallets$1 = { "addTonWallet": "Add TON wallet", "addEvmWallet": "Add EVM wallet", "connectTonWallet": "Connect TON wallet", "connectEvmWallet": "Connect EVM wallet", "initializingMetamask": "Initializing MetaMask SDK...", "initializingTronlink": "Initializing TronLink...", "failedToConnectTon": "Failed to connect to TON wallet", "failedToDisconnect": "Failed to disconnect", "metamaskConnectionError": "MetaMask connection error", "failedToConnectMetamask": "Failed to connect to MetaMask", "failedToDisconnectMetamask": "Failed to disconnect from MetaMask", "selectWallet": "Select Wallet", "tonWallets": "TON", "evmWallets": "EVM", "tronWallets": "TRON", "tonconnect": "TonConnect", "metaMask": "WalletConnect", "walletConnect": "WalletConnect", "tronLink": "TronLink", "addTronWallet": "Add Tron wallet", "comingSoon": "Coming Soon", "connected": "CONNECTED", "connectedStatus": "Connected", "disconnect": "Disconnect", "chooseWallet": "Connect wallet", "oneWalletPerEnv": "You can only connect one wallet per environment.", "connect": "Connect", "connectTronWallet": "Connect Tron wallet", "connectWallet": "Connect wallet" };
 const bridge$1 = { "max": "Max", "sourceNetwork": "Source network", "destinationNetwork": "Destination network", "selectToken": "Select token", "selectNetwork": "Select network", "selectSourceNetwork": "Select source network", "selectDestinationNetwork": "Select destination network", "searchToken": "Search token", "myTokens": "My tokens", "allTokens": "All tokens", "search": "Search", "select": "Select", "willChangeSourceChain": "Will change source network", "willChangeSourceNetworkAndToken": "Will change source token", "noBalancesFound": "No balances found.", "noResults": "No results", "tokenNotFound": "We couldn't find a token with that name or symbol. Please try again.", "chainNotFound": "We couldn't find a chain with that name. Please try again.", "sendToAnotherAddress": "Send to another address", "youWillReceive": "You will receive", "anotherAddressPlaceholder": "Address", "addressDoesntMatch": "Address doesn't match the {{network}} network", "checkBeforeTransfer": "Check correctness before transfer" };
@@ -6715,6 +6716,7 @@ const SettingsModal = ({ isOpen, onClose }) => {
     }
   ) });
 };
+const TOKEN_ROW_HEIGHT = 52;
 const TokenRow = ({
   symbol,
   name,
@@ -6766,17 +6768,21 @@ const TokenSelectModal = ({
   const [query, setQuery] = react.useState("");
   const [tab, setTab] = react.useState("my");
   const [manualTabSwitch, setManualTabSwitch] = react.useState(false);
+  const [listHeight, setListHeight] = react.useState(400);
   const { srcAddress } = useAddresses();
   const { fromChain, setFromChain, chains } = useChainsStore();
   const { assetMatrix, selectedAssetSymbol } = useTokensStore();
-  const { hasAnyWallet } = useConnectedWalletsStore();
+  const { hasAnyWallet, hasWalletForChain } = useConnectedWalletsStore();
   const { getBalance, query: balancesQuery } = useBalances(
     fromChain?.chainKey,
     srcAddress
   );
+  const hasSourceWallet = react.useCallback(() => {
+    return hasWalletForChain(fromChain?.chainKey);
+  }, [hasWalletForChain, fromChain?.chainKey]);
   react.useEffect(() => {
-    if (!hasAnyWallet()) setTab("all");
-  }, [hasAnyWallet]);
+    if (!hasSourceWallet()) setTab("all");
+  }, [hasSourceWallet]);
   const getTokenUsdValue = react.useCallback(
     (symbol, price) => {
       const bal = getBalance(symbol);
@@ -6843,7 +6849,7 @@ const TokenSelectModal = ({
     getTokenUsdValue
   ]);
   const myTokens = groupedTokens.withBalance;
-  const effectiveTab = hasAnyWallet() ? tab : "all";
+  const effectiveTab = hasSourceWallet() ? tab === "my" && myTokens.length === 0 && !manualTabSwitch ? "all" : tab : "all";
   react.useEffect(() => {
     if (query.trim() !== "" && tab === "my" && myTokens.length === 0 && !manualTabSwitch) {
       setTab("all");
@@ -6870,14 +6876,17 @@ const TokenSelectModal = ({
     if (!isOpen) resetState();
   }, [isOpen, resetState]);
   react.useEffect(() => () => resetState(), [resetState]);
-  const onPick = (sym, willChangeSrcChain = false) => {
-    if (willChangeSrcChain) {
-      const newChain = findFirstAvailableChain(sym);
-      if (newChain && setFromChain) setFromChain(newChain);
-    }
-    onChangeAsset(sym);
-    handleClose();
-  };
+  const onPick = react.useCallback(
+    (sym, willChangeSrcChain = false) => {
+      if (willChangeSrcChain) {
+        const newChain = findFirstAvailableChain(sym);
+        if (newChain && setFromChain) setFromChain(newChain);
+      }
+      onChangeAsset(sym);
+      handleClose();
+    },
+    [findFirstAvailableChain, handleClose, onChangeAsset, setFromChain]
+  );
   const tokensToRender = react.useMemo(() => {
     if (effectiveTab === "my") {
       return myTokens.map((token) => ({
@@ -6905,6 +6914,103 @@ const TokenSelectModal = ({
     [groupedTokens.willChangeSrcChain]
   );
   const hasNoResults = tokensToRender.length === 0 && willChangeSrcTokens.length === 0;
+  const virtualItems = react.useMemo(() => {
+    const items2 = tokensToRender.map(
+      ({ token, willChangeSrc }) => ({
+        type: "token",
+        data: { token, willChangeSrc }
+      })
+    );
+    if (effectiveTab === "all" && willChangeSrcTokens.length > 0) {
+      items2.push({
+        type: "header",
+        text: t2("bridge.willChangeSourceChain")
+      });
+      items2.push(
+        ...willChangeSrcTokens.map(({ token, willChangeSrc }) => ({
+          type: "token",
+          data: { token, willChangeSrc }
+        }))
+      );
+    }
+    return items2;
+  }, [effectiveTab, tokensToRender, t2, willChangeSrcTokens]);
+  react.useLayoutEffect(() => {
+    const updateHeight = () => {
+      const container2 = document.getElementById("token-select-list");
+      console.log("CONTAINER", container2);
+      if (!container2) return;
+      const height = container2.getBoundingClientRect().height;
+      if (height > 0) {
+        setListHeight(height);
+      }
+    };
+    updateHeight();
+    const timeout1 = setTimeout(updateHeight, 0);
+    const timeout2 = setTimeout(updateHeight, 300);
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      updateHeight();
+    }) : void 0;
+    const container = document.getElementById("token-select-list");
+    if (container) resizeObserver?.observe(container);
+    return () => {
+      clearTimeout(timeout1);
+      clearTimeout(timeout2);
+      resizeObserver?.disconnect();
+    };
+  }, [isOpen, hasSourceWallet]);
+  const VirtualRow = react.useCallback(
+    ({ index, style }) => {
+      const item = virtualItems[index];
+      if (!item) return null;
+      if (item.type === "header") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: { ...style, height: TOKEN_ROW_HEIGHT },
+            className: "px-5 flex leading-4 text-base py-2 text-muted-foreground uppercase mt-8",
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.text })
+          }
+        );
+      }
+      const { token, willChangeSrc } = item.data;
+      const bal = getBalance(token.symbol);
+      const usd = getTokenUsdValue(token.symbol, token.price?.usd);
+      const isSelected = selectedAssetSymbol?.toUpperCase() === token.symbol.toUpperCase();
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...style, height: TOKEN_ROW_HEIGHT }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        TokenRow,
+        {
+          symbol: token.symbol,
+          name: token.name,
+          isSelected: !!isSelected,
+          hasAnyWallet: hasAnyWallet(),
+          balance: bal,
+          usdValue: usd,
+          isBalanceLoading: balancesQuery.isLoading || balancesQuery.isFetching,
+          onPick: () => onPick(token.symbol, willChangeSrc)
+        }
+      ) });
+    },
+    [
+      balancesQuery.isFetching,
+      balancesQuery.isLoading,
+      getBalance,
+      getTokenUsdValue,
+      hasAnyWallet,
+      onPick,
+      selectedAssetSymbol,
+      virtualItems
+    ]
+  );
+  const itemKey = react.useCallback(
+    (index) => {
+      const item = virtualItems[index];
+      if (!item) return index;
+      if (item.type === "header") return `header-${index}-${item.text}`;
+      return `${effectiveTab}:${item.data.token.symbol}:${item.data.willChangeSrc ? "will" : "on"}`;
+    },
+    [effectiveTab, virtualItems]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-h-[90dvh] h-[90dvh] overflow-hidden flex flex-col p-10 pt-7", children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-2xl leading-8", children: t2("bridge.selectToken") }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6915,11 +7021,11 @@ const TokenSelectModal = ({
         onChange: setQuery
       }
     ),
-    hasAnyWallet() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-      myTokens.length !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    hasSourceWallet() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         button.Button,
         {
-          variant: tab === "my" ? "default" : "ghost",
+          variant: effectiveTab === "my" ? "default" : "ghost",
           onClick: () => {
             setTab("my");
             setManualTabSwitch(true);
@@ -6927,7 +7033,7 @@ const TokenSelectModal = ({
           size: "sm",
           className: utils$1.cn(
             "px-4 cursor-pointer",
-            tab !== "my" && "bg-muted hover:bg-accent"
+            effectiveTab !== "my" && "bg-muted hover:bg-accent"
           ),
           children: t2("bridge.myTokens")
         }
@@ -6935,7 +7041,7 @@ const TokenSelectModal = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         button.Button,
         {
-          variant: tab === "all" ? "default" : "ghost",
+          variant: effectiveTab === "all" ? "default" : "ghost",
           onClick: () => {
             setTab("all");
             setManualTabSwitch(true);
@@ -6943,58 +7049,27 @@ const TokenSelectModal = ({
           size: "sm",
           className: utils$1.cn(
             "px-4 cursor-pointer",
-            tab !== "all" && "bg-muted hover:bg-accent"
+            effectiveTab !== "all" && "bg-muted hover:bg-accent"
           ),
           children: t2("bridge.allTokens")
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto -mx-5", children: hasNoResults ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground px-12 py-2 h-28 flex items-center justify-center text-center", children: t2("bridge.tokenNotFound") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: "token-select-list", className: "flex-1 -mx-5 min-h-0", children: hasNoResults ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground px-12 py-2 h-28 flex items-center justify-center text-center", children: t2("bridge.tokenNotFound") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-4 px-5 text-base text-muted-foreground uppercase py-2", children: t2("bridge.noBalancesFound") }),
-      tokensToRender.map(({ token, willChangeSrc }) => {
-        const bal = getBalance(token.symbol);
-        const usd = getTokenUsdValue(token.symbol, token.price?.usd);
-        const isSelected = selectedAssetSymbol?.toUpperCase() === token.symbol.toUpperCase();
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          TokenRow,
-          {
-            symbol: token.symbol,
-            name: token.name,
-            isSelected: !!isSelected,
-            hasAnyWallet: hasAnyWallet(),
-            balance: bal,
-            usdValue: usd,
-            isBalanceLoading: balancesQuery.isLoading || balancesQuery.isFetching,
-            onPick: () => onPick(token.symbol, willChangeSrc)
-          },
-          `${effectiveTab}:${token.symbol}`
-        );
-      }),
-      effectiveTab === "all" && willChangeSrcTokens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 flex leading-4 text-base py-2 text-muted-foreground uppercase mt-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t2("bridge.willChangeSourceChain") }) }),
-        willChangeSrcTokens.map(({ token, willChangeSrc }) => {
-          const bal = getBalance(token.symbol);
-          const usd = getTokenUsdValue(
-            token.symbol,
-            token.price?.usd
-          );
-          const isSelected = selectedAssetSymbol?.toUpperCase() === token.symbol.toUpperCase();
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            TokenRow,
-            {
-              symbol: token.symbol,
-              name: token.name,
-              isSelected: !!isSelected,
-              hasAnyWallet: hasAnyWallet(),
-              balance: bal,
-              usdValue: usd,
-              isBalanceLoading: balancesQuery.isLoading || balancesQuery.isFetching,
-              onPick: () => onPick(token.symbol, willChangeSrc)
-            },
-            `will:${token.symbol}`
-          );
-        })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactWindow.FixedSizeList,
+        {
+          height: listHeight,
+          itemCount: virtualItems.length,
+          itemSize: TOKEN_ROW_HEIGHT,
+          width: "100%",
+          itemKey,
+          className: "[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30",
+          overscanCount: 5,
+          children: VirtualRow
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25840,7 +25915,7 @@ class WalletConnectModal {
   }
   async initUi() {
     if (typeof window !== "undefined") {
-      await Promise.resolve().then(() => require("./index-CmbarigA.cjs"));
+      await Promise.resolve().then(() => require("./index-DJbbVeMD.cjs"));
       const modal = document.createElement("wcm-modal");
       document.body.insertAdjacentElement("beforeend", modal);
       OptionsCtrl.setIsUiLoaded(true);
@@ -26562,4 +26637,4 @@ exports.useSettingsStore = useSettingsStore;
 exports.useSwapModel = useSwapModel;
 exports.useTokensStore = useTokensStore;
 exports.useTransactionStore = useTransactionStore;
-//# sourceMappingURL=index-DvjGvKnp.cjs.map
+//# sourceMappingURL=index-BXp-N4UF.cjs.map