@rash2x/bridge-widget 0.6.34 → 0.6.35

package/dist/{index-CO2PQtBo.js → index-DvKN7Y1C.js}

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, createContext, useContext, useState, useCallback, forwardRef, useRef } from "react";
+import { useEffect, useMemo, createContext, useContext, useState, useCallback, forwardRef, useRef, useLayoutEffect } from "react";
 import { initReactI18next, I18nextProvider, useTranslation } from "react-i18next";
 import i18n from "i18next";
 import { Button } from "@/components/ui/button";
@@ -30,6 +30,7 @@ import { isAddress, formatUnits, parseUnits } from "viem";
 import { TronLinkAdapterName } from "@tronweb3/tronwallet-adapters";
 import { TronWeb } from "tronweb";
 import { CardHeader, CardTitle, CardAction, Card, CardContent, CardFooter } from "@/components/ui/card";
+import { FixedSizeList } from "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" };
@@ -6714,6 +6715,7 @@ const SettingsModal = ({ isOpen, onClose }) => {
     }
   ) });
 };
+const TOKEN_ROW_HEIGHT = 52;
 const TokenRow = ({
   symbol,
   name,
@@ -6765,17 +6767,21 @@ const TokenSelectModal = ({
   const [query, setQuery] = useState("");
   const [tab, setTab] = useState("my");
   const [manualTabSwitch, setManualTabSwitch] = useState(false);
+  const [listHeight, setListHeight] = 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 = useCallback(() => {
+    return hasWalletForChain(fromChain?.chainKey);
+  }, [hasWalletForChain, fromChain?.chainKey]);
   useEffect(() => {
-    if (!hasAnyWallet()) setTab("all");
-  }, [hasAnyWallet]);
+    if (!hasSourceWallet()) setTab("all");
+  }, [hasSourceWallet]);
   const getTokenUsdValue = useCallback(
     (symbol, price) => {
       const bal = getBalance(symbol);
@@ -6842,7 +6848,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";
   useEffect(() => {
     if (query.trim() !== "" && tab === "my" && myTokens.length === 0 && !manualTabSwitch) {
       setTab("all");
@@ -6869,14 +6875,17 @@ const TokenSelectModal = ({
     if (!isOpen) resetState();
   }, [isOpen, resetState]);
   useEffect(() => () => resetState(), [resetState]);
-  const onPick = (sym, willChangeSrcChain = false) => {
-    if (willChangeSrcChain) {
-      const newChain = findFirstAvailableChain(sym);
-      if (newChain && setFromChain) setFromChain(newChain);
-    }
-    onChangeAsset(sym);
-    handleClose();
-  };
+  const onPick = useCallback(
+    (sym, willChangeSrcChain = false) => {
+      if (willChangeSrcChain) {
+        const newChain = findFirstAvailableChain(sym);
+        if (newChain && setFromChain) setFromChain(newChain);
+      }
+      onChangeAsset(sym);
+      handleClose();
+    },
+    [findFirstAvailableChain, handleClose, onChangeAsset, setFromChain]
+  );
   const tokensToRender = useMemo(() => {
     if (effectiveTab === "my") {
       return myTokens.map((token) => ({
@@ -6904,6 +6913,103 @@ const TokenSelectModal = ({
     [groupedTokens.willChangeSrcChain]
   );
   const hasNoResults = tokensToRender.length === 0 && willChangeSrcTokens.length === 0;
+  const virtualItems = 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]);
+  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 = useCallback(
+    ({ index, style }) => {
+      const item = virtualItems[index];
+      if (!item) return null;
+      if (item.type === "header") {
+        return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { ...style, height: TOKEN_ROW_HEIGHT }, children: /* @__PURE__ */ 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 = 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__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90dvh] h-[90dvh] overflow-hidden flex flex-col p-10 pt-7", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-2xl leading-8", children: t2("bridge.selectToken") }) }),
     /* @__PURE__ */ jsx(
@@ -6914,11 +7020,11 @@ const TokenSelectModal = ({
         onChange: setQuery
       }
     ),
-    hasAnyWallet() && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      myTokens.length !== 0 && /* @__PURE__ */ jsx(
+    hasSourceWallet() && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
         Button,
         {
-          variant: tab === "my" ? "default" : "ghost",
+          variant: effectiveTab === "my" ? "default" : "ghost",
           onClick: () => {
             setTab("my");
             setManualTabSwitch(true);
@@ -6926,7 +7032,7 @@ const TokenSelectModal = ({
           size: "sm",
           className: cn$2(
             "px-4 cursor-pointer",
-            tab !== "my" && "bg-muted hover:bg-accent"
+            effectiveTab !== "my" && "bg-muted hover:bg-accent"
           ),
           children: t2("bridge.myTokens")
         }
@@ -6934,7 +7040,7 @@ const TokenSelectModal = ({
       /* @__PURE__ */ jsx(
         Button,
         {
-          variant: tab === "all" ? "default" : "ghost",
+          variant: effectiveTab === "all" ? "default" : "ghost",
           onClick: () => {
             setTab("all");
             setManualTabSwitch(true);
@@ -6942,58 +7048,27 @@ const TokenSelectModal = ({
           size: "sm",
           className: cn$2(
             "px-4 cursor-pointer",
-            tab !== "all" && "bg-muted hover:bg-accent"
+            effectiveTab !== "all" && "bg-muted hover:bg-accent"
           ),
           children: t2("bridge.allTokens")
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto -mx-5", children: hasNoResults ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { id: "token-select-list", className: "flex-1 -mx-5 min-h-0", children: hasNoResults ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
       effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "px-5 flex leading-4 text-base py-2 text-muted-foreground uppercase mt-8", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
+        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
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25839,7 +25914,7 @@ class WalletConnectModal {
   }
   async initUi() {
     if (typeof window !== "undefined") {
-      await import("./index-sU0Z-m5M.js");
+      await import("./index-Cd_UnZsU.js");
       const modal = document.createElement("wcm-modal");
       document.body.insertAdjacentElement("beforeend", modal);
       OptionsCtrl.setIsUiLoaded(true);
@@ -26563,4 +26638,4 @@ export {
   getQuoteFees as y,
   calculateMinReceived as z
 };
-//# sourceMappingURL=index-CO2PQtBo.js.map
+//# sourceMappingURL=index-DvKN7Y1C.js.map