@rash2x/bridge-widget 0.1.5 → 0.1.7

package/dist/evaa-bridge.mjs

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import * as require$$0 from "react";
-import require$$0__default, { useState, useCallback, useRef, useEffect, useMemo, createContext, useContext, memo, forwardRef } from "react";
+import require$$0__default, { useState, useCallback, createContext, useContext, useRef, useEffect, useMemo, memo, forwardRef } from "react";
 import { create as create$1 } from "zustand";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -550,6 +550,23 @@ const Button = require$$0.forwardRef(
   }
 );
 Button.displayName = "Button";
+const ModalContainerContext = createContext(void 0);
+const ModalContainerProvider = ({
+  containerId,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ModalContainerContext.Provider, { value: containerId, children });
+};
+const useModalContainer = () => {
+  const containerId = useContext(ModalContainerContext);
+  if (typeof document === "undefined") {
+    return null;
+  }
+  if (!containerId) {
+    return document.body;
+  }
+  return document.getElementById(containerId) || document.body;
+};
 const ModalContent = ({ children, className }) => {
   return /* @__PURE__ */ jsx("div", { className: cn("p-5 flex flex-col h-full", className), children });
 };
@@ -603,11 +620,11 @@ const Modal = ({
   isOpen,
   onClose,
   children,
-  className,
-  modalContainer
+  className
 }) => {
   const panelRef = useRef(null);
   const lastActiveRef = useRef(null);
+  const container = useModalContainer();
   useEffect(() => {
     if (!isOpen) return;
     lastActiveRef.current = document.activeElement;
@@ -629,39 +646,41 @@ const Modal = ({
     return () => window.removeEventListener("keydown", onKey);
   }, [isOpen, onClose]);
   if (typeof document === "undefined") return null;
-  const container = modalContainer || document.body;
   return createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
       motion.div,
       {
-        className: "fixed inset-0 border border-border z-[100] bg-dialog sm:absolute sm:inset-0 sm:top-0 sm:bottom-0 sm:w-full sm:rounded-3xl",
+        className: "fixed m-auto border border-border max-w-md max-h-[80%] z-[100] bg-dialog sm:absolute sm:inset-0 sm:top-0 sm:bottom-0 sm:w-full rounded-xl",
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            ref: panelRef,
-            role: "dialog",
-            "aria-modal": "true",
-            tabIndex: -1,
-            className: cn(
-              "outline-none overflow-auto w-screen h-screen rounded-none sm:w-full sm:h-full sm:rounded-3xl",
-              className
-            ),
-            initial: { opacity: 0, scale: 0.9 },
-            animate: { opacity: 1, scale: 1 },
-            exit: { opacity: 0, scale: 0.9 },
-            transition: {
-              type: "spring",
-              stiffness: 480,
-              damping: 32,
-              mass: 0.6
-            },
-            onMouseDown: (e) => e.stopPropagation(),
-            children
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: panelRef,
+              role: "dialog",
+              "aria-modal": "true",
+              tabIndex: -1,
+              className: cn(
+                "outline-none overflow-auto relative z-30 w-screen h-screen rounded-none sm:w-full sm:h-full sm:rounded-3xl",
+                className
+              ),
+              initial: { opacity: 0, scale: 0.9 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.9 },
+              transition: {
+                type: "spring",
+                stiffness: 480,
+                damping: 32,
+                mass: 0.6
+              },
+              onMouseDown: (e) => e.stopPropagation(),
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "fixed inset-0 backdrop-blur-sm bg-background/10 z-10" })
+        ]
       }
     ) }),
     container
@@ -1049,8 +1068,7 @@ const routePresets = [
 ];
 const SettingModal = ({
   isOpen,
-  onClose,
-  modalContainer
+  onClose
 }) => {
   const { t: t2 } = useTranslation();
   const { toChain } = useChainsStore();
@@ -1084,7 +1102,7 @@ const SettingModal = ({
   );
   const activeBtn = "bg-settings-active hover:bg-settings-active/80 text-settings-active-foreground";
   const notActiveBtn = "bg-settings-button hover:bg-settings-button/80 text-settings-button-foreground";
-  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, modalContainer, children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, children: /* @__PURE__ */ jsxs(ModalContent, { children: [
     /* @__PURE__ */ jsxs(ModalHeader, { children: [
       /* @__PURE__ */ jsx(ModalTitle, { children: t2("settings.title", { defaultValue: "Settings" }) }),
       /* @__PURE__ */ jsx(ModalClose, { className: "", onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
@@ -1415,7 +1433,7 @@ function sumFeeByTokenLD(fees, dstTokenAddr, dstChainKey) {
   }
   return acc.toString();
 }
-function useBalances(chainKey, address) {
+function useBalances(chainKey, address, priorityTokenSymbol) {
   const { chainRegistry } = useChainStrategies();
   const { assetMatrix } = useTokensStore();
   const tokensOnChain = useMemo(() => {
@@ -1427,13 +1445,24 @@ function useBalances(chainKey, address) {
     }
     return tokensList;
   }, [assetMatrix, chainKey]);
+  const priorityToken = useMemo(() => {
+    if (!priorityTokenSymbol || !chainKey || !assetMatrix) return void 0;
+    const normalizedSymbol = normalizeTickerSymbol$1(priorityTokenSymbol);
+    const token = assetMatrix[normalizedSymbol]?.[chainKey];
+    return token;
+  }, [priorityTokenSymbol, chainKey, assetMatrix]);
   const query = useQuery({
-    queryKey: ["balances", chainKey, address],
+    queryKey: ["balances", chainKey, address, priorityTokenSymbol],
     queryFn: async () => {
       if (!address || !chainKey)
         return {};
       if (!isAddressValidForChain(chainKey, address)) return {};
-      return await chainRegistry.getBalances(chainKey, address, tokensOnChain);
+      return await chainRegistry.getBalances(
+        chainKey,
+        address,
+        tokensOnChain,
+        priorityToken
+      );
     },
     enabled: !!address && !!chainKey && tokensOnChain.length > 0 && isAddressValidForChain(chainKey, address),
     staleTime: 6e4,
@@ -1687,8 +1716,7 @@ const TokenSelectModal = ({
   isOpen,
   onClose,
   items,
-  onChangeAsset,
-  modalContainer
+  onChangeAsset
 }) => {
   const { t: t2 } = useTranslation();
   const {
@@ -1773,7 +1801,6 @@ const TokenSelectModal = ({
     {
       isOpen,
       onClose: handleClose,
-      modalContainer,
       children: /* @__PURE__ */ jsxs(ModalContent, { children: [
         /* @__PURE__ */ jsxs(ModalHeader, { children: [
           /* @__PURE__ */ jsx(ModalTitle, { children: t2("bridge.selectToken") }),
@@ -2031,7 +2058,7 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-const FormHeaderComponent = ({ modalContainer }) => {
+const FormHeaderComponent = () => {
   const { t: t2 } = useTranslation();
   const { isOpen, onClose, onOpen } = useModal();
   const {
@@ -2047,7 +2074,7 @@ const FormHeaderComponent = ({ modalContainer }) => {
     const sum = selectedAssetSymbol.toUpperCase();
     return assets.find((a) => a.symbol.toUpperCase() === sum) ?? assets[0];
   }, [assets, selectedAssetSymbol]);
-  return /* @__PURE__ */ jsxs(CardHeader, { className: "gap-y-0", children: [
+  return /* @__PURE__ */ jsxs(CardHeader, { className: "gap-y-0 flex justify-between items-center", children: [
     /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm font-normal leading-3.5 text-muted-foreground", children: t2("bridge.selectToken") }),
       /* @__PURE__ */ jsx(SelectTokenButton, { token: current, onClick: onOpen })
@@ -2065,24 +2092,19 @@ const FormHeaderComponent = ({ modalContainer }) => {
         onChangeAsset: (symbol) => {
           setSelectedAssetSymbol(symbol);
           onClose();
-        },
-        modalContainer
+        }
       }
     ),
     /* @__PURE__ */ jsx(
       SettingModal,
       {
         isOpen: isOpenSettings,
-        onClose: onCloseSettings,
-        modalContainer
+        onClose: onCloseSettings
       }
     )
   ] });
 };
-const FormHeader = memo(
-  FormHeaderComponent,
-  (prev, next) => prev.modalContainer === next.modalContainer
-);
+const FormHeader = memo(FormHeaderComponent);
 async function fetchQuotes(req) {
   const params = {
     srcChainKey: req.srcChainKey,
@@ -2405,8 +2427,16 @@ function useSwapModel() {
   const tokensStore = useTokensStore();
   const { srcAddress, dstAddress } = useAddresses();
   const { allowedFromChains, allowedToChains, isLoadingToChains } = useChainDerivations();
-  const srcBalances = useBalances(chainsStore.fromChain?.chainKey, srcAddress);
-  const dstBalances = useBalances(chainsStore.toChain?.chainKey, dstAddress);
+  const srcBalances = useBalances(
+    chainsStore.fromChain?.chainKey,
+    srcAddress,
+    tokensStore.selectedAssetSymbol
+  );
+  const dstBalances = useBalances(
+    chainsStore.toChain?.chainKey,
+    dstAddress,
+    tokensStore.selectedAssetSymbol
+  );
   const { loading } = useBridgeQuote();
   const { inputAmount, setInputAmount, resetWithIdle } = useBridgeQuoteStore();
   const fromBalance = useMemo(
@@ -2489,10 +2519,10 @@ const SwapButton = () => {
     {
       onClick: handleSwap,
       disabled: !canSwap || isSwapping,
+      variant: "secondary",
+      size: "sm",
       className: cn(
-        "has-[>svg]:p-0 h-9 bg-swap rounded-full p-2 max-w-9 w-full",
         "absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2",
-        "hover:bg-swap transition-all duration-200 shadow-none select-none",
         !canSwap || isSwapping ? "opacity-50 cursor-not-allowed" : "hover:scale-110"
       ),
       children: /* @__PURE__ */ jsx(
@@ -2501,8 +2531,7 @@ const SwapButton = () => {
           style: {
             transform: `rotate(${turns * 180}deg)`,
             transition: "transform 300ms linear"
-          },
-          className: "size-5 text-swap-foreground will-change-transform"
+          }
         }
       )
     }
@@ -2533,7 +2562,6 @@ const NetworkSymbol = ({
 };
 const SelectNetworkButton = ({
   onClick,
-  className,
   network
 }) => {
   const { t: t2 } = useTranslation();
@@ -2544,7 +2572,8 @@ const SelectNetworkButton = ({
     Button,
     {
       onClick,
-      className: `cursor-pointer hover:scale-[1.1] p-1.5 h-8.5 pr-3 !pl-1.5 bg-secondary hover:bg-secondary shadow-none rounded-full flex items-center justify-between gap-3 w-fit shrink-0 ${className ?? ""}`,
+      size: "sm",
+      variant: "secondary",
       type: "button",
       "aria-label": label,
       children: [
@@ -2630,8 +2659,7 @@ const ChainSelectModal = ({
   onClose,
   items,
   allowedItems,
-  onChangeChain,
-  modalContainer
+  onChangeChain
 }) => {
   const { t: t2 } = useTranslation();
   const [query, setQuery] = useState("");
@@ -2720,7 +2748,6 @@ const ChainSelectModal = ({
     {
       isOpen,
       onClose: handleClose,
-      modalContainer,
       children: /* @__PURE__ */ jsxs(ModalContent, { children: [
         /* @__PURE__ */ jsxs(ModalHeader, { children: [
           /* @__PURE__ */ jsx(ModalTitle, { children: t2("bridge.selectNetwork") }),
@@ -2858,8 +2885,7 @@ const SwapSection = ({
   disableNetworkSelect,
   isSource,
   onSelect,
-  onAmountChange,
-  modalContainer
+  onAmountChange
 }) => {
   const { isOpen, onClose, onOpen } = useModal();
   const { assetMatrix, selectedAssetSymbol } = useTokensStore();
@@ -2892,9 +2918,9 @@ const SwapSection = ({
       "div",
       {
         className: cn(
-          "p-4 flex flex-col gap-4 transition-colors bg-muted",
+          "p-4 flex flex-col gap-4 transition-colors bg-input",
           {
-            "bg-muted-focus": isSource && isFocused
+            "bg-input-focus": isSource && isFocused
           },
           className
         ),
@@ -2914,8 +2940,7 @@ const SwapSection = ({
               SelectNetworkButton,
               {
                 network: chain,
-                onClick: disableNetworkSelect ? void 0 : onOpen,
-                className: disableNetworkSelect ? "opacity-80 cursor-not-allowed" : ""
+                onClick: disableNetworkSelect ? void 0 : onOpen
               }
             ),
             /* @__PURE__ */ jsx(
@@ -2954,8 +2979,7 @@ const SwapSection = ({
         onClose,
         items: chains,
         allowedItems: allowedChains,
-        onChangeChain,
-        modalContainer
+        onChangeChain
       }
     )
   ] });
@@ -4041,9 +4065,7 @@ const SubmitButton = () => {
 function short(addr) {
   return addr.slice(0, 4) + "…" + addr.slice(-4);
 }
-const WalletSelectModal = ({
-  modalContainer
-}) => {
+const WalletSelectModal = () => {
   const { t: t2 } = useTranslation();
   const { isOpen, onClose } = useWalletSelectModal();
   const { connect, connectors, isPending } = useConnect();
@@ -4143,7 +4165,7 @@ const WalletSelectModal = ({
       console.error("Failed to connect wallet:", error);
     }
   };
-  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, modalContainer, children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, children: /* @__PURE__ */ jsxs(ModalContent, { children: [
     /* @__PURE__ */ jsxs(ModalHeader, { children: [
       /* @__PURE__ */ jsx(ModalTitle, { children: t2("wallets.chooseWallet", { defaultValue: "Choose wallet" }) }),
       /* @__PURE__ */ jsx(ModalDescription, { children: t2("wallets.oneWalletPerEnv", {
@@ -6136,7 +6158,7 @@ const ConfirmStep = () => {
     /* @__PURE__ */ jsx("div", { className: "text-3xl font-black relative z-10", children: formatTime })
   ] }) });
 };
-const TransactionManager = ({ modalContainer }) => {
+const TransactionManager = () => {
   const { current } = useTransactionStore();
   const status = current?.status;
   if (!status || status === "idle") return null;
@@ -6154,7 +6176,7 @@ const TransactionManager = ({ modalContainer }) => {
     step = /* @__PURE__ */ jsx(SuccessStep, {});
   }
   return /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: () => {
-  }, modalContainer, children: step });
+  }, children: step });
 };
 const useTokensRequest = () => {
   const { setTokens, setSelectedToken, setSelectedAssetSymbol } = useTokensStore();
@@ -6245,10 +6267,10 @@ class ChainStrategyRegistry {
     const strategy = this.getStrategy(chainKey);
     return strategy?.isConnected() || false;
   }
-  async getBalances(chainKey, address, tokens) {
+  async getBalances(chainKey, address, tokens, priorityToken) {
     const strategy = this.getStrategy(chainKey);
     if (!strategy) return {};
-    return await strategy.getBalances(address, tokens);
+    return await strategy.getBalances(address, tokens, priorityToken);
   }
   isAddressValid(chainKey, address) {
     const strategy = this.getStrategy(chainKey);
@@ -6359,13 +6381,14 @@ function parseTonAddress(address) {
   }
   return Address$1.parse(address);
 }
-async function getEvmBalances(publicClient, address, tokens) {
+async function getEvmBalances(publicClient, address, tokens, priorityToken) {
   const balances = {};
   try {
     console.log("start getEvmBalances");
     console.log("publicClient:", publicClient);
     console.log("isAddress:", isAddress(address));
     console.log("tokens:", tokens);
+    console.log("priorityToken:", priorityToken);
     if (!address || !isAddress(address)) {
       console.warn(`Invalid EVM address provided: ${address}`);
       return balances;
@@ -6373,25 +6396,93 @@ async function getEvmBalances(publicClient, address, tokens) {
     if (!publicClient) {
       throw new Error("No public client provided");
     }
-    for (const token of tokens) {
+    const nativeTokens = tokens.filter((t2) => isNativeAddress(t2.address));
+    const erc20Tokens = tokens.filter((t2) => !isNativeAddress(t2.address) && isAddress(t2.address));
+    if (priorityToken) {
       try {
-        let balance = 0;
-        const isNative = isNativeAddress(token.address);
-        if (isNative) {
+        const isPriorityNative = isNativeAddress(priorityToken.address);
+        if (isPriorityNative) {
           const ethBalance = await publicClient.getBalance({
             address
           });
-          balance = parseFloat(formatUnits(ethBalance, token.decimals));
-        } else {
-          if (!isAddress(token.address)) {
-            continue;
+          const balance = parseFloat(formatUnits(ethBalance, priorityToken.decimals));
+          if (balance > 0) {
+            balances[priorityToken.symbol] = { balance, address };
           }
-          const bytecode = await publicClient.getBytecode({
-            address: token.address
+        } else if (isAddress(priorityToken.address)) {
+          const tokenBalance = await publicClient.readContract({
+            address: priorityToken.address,
+            abi: [
+              {
+                name: "balanceOf",
+                type: "function",
+                stateMutability: "view",
+                inputs: [{ name: "owner", type: "address" }],
+                outputs: [{ name: "balance", type: "uint256" }]
+              }
+            ],
+            functionName: "balanceOf",
+            args: [address]
           });
-          if (!bytecode || bytecode === "0x") {
-            continue;
+          const balance = parseFloat(formatUnits(tokenBalance, priorityToken.decimals));
+          if (balance > 0) {
+            balances[priorityToken.symbol] = { balance, address };
           }
+        }
+      } catch (error) {
+        console.debug(`Failed to get priority token balance for ${priorityToken.symbol}:`, error);
+      }
+    }
+    for (const token of nativeTokens) {
+      try {
+        const ethBalance = await publicClient.getBalance({
+          address
+        });
+        const balance = parseFloat(formatUnits(ethBalance, token.decimals));
+        if (balance > 0) {
+          balances[token.symbol] = { balance, address };
+        }
+      } catch (error) {
+        console.debug(`Failed to get native balance for ${token.symbol}:`, error);
+      }
+    }
+    if (erc20Tokens.length > 0) {
+      try {
+        const multicallContracts = erc20Tokens.map((token) => ({
+          address: token.address,
+          abi: [
+            {
+              name: "balanceOf",
+              type: "function",
+              stateMutability: "view",
+              inputs: [{ name: "owner", type: "address" }],
+              outputs: [{ name: "balance", type: "uint256" }]
+            }
+          ],
+          functionName: "balanceOf",
+          args: [address]
+        }));
+        const results = await publicClient.multicall({
+          contracts: multicallContracts,
+          allowFailure: true
+        });
+        results.forEach((result, index) => {
+          const token = erc20Tokens[index];
+          if (!token) return;
+          if (result.status === "success" && result.result !== void 0) {
+            try {
+              const balance = parseFloat(formatUnits(result.result, token.decimals));
+              if (balance > 0) {
+                balances[token.symbol] = { balance, address };
+              }
+            } catch (error) {
+              console.debug(`Failed to parse balance for ${token.symbol}:`, error);
+            }
+          }
+        });
+      } catch (error) {
+        console.warn("Multicall failed, falling back to individual calls:", error);
+        for (const token of erc20Tokens) {
           try {
             const tokenBalance = await publicClient.readContract({
               address: token.address,
@@ -6407,23 +6498,16 @@ async function getEvmBalances(publicClient, address, tokens) {
               functionName: "balanceOf",
               args: [address]
             });
-            balance = parseFloat(
+            const balance = parseFloat(
               formatUnits(tokenBalance, token.decimals)
             );
-          } catch {
-            continue;
+            if (balance > 0) {
+              balances[token.symbol] = { balance, address };
+            }
+          } catch (error2) {
+            console.debug(`Failed to get balance for ${token.symbol}:`, error2);
           }
         }
-        if (balance > 0) {
-          balances[token.symbol] = { balance, address };
-        }
-      } catch (error) {
-        if (error instanceof Error && !error.message.includes("could not decode")) {
-          console.warn(
-            `Network error fetching balance for ${token.symbol}:`,
-            error
-          );
-        }
       }
     }
   } catch (error) {
@@ -6485,7 +6569,11 @@ async function getTonBalances(address, tokens, customTonClient, tonApiKey) {
           }
         }
       } catch (error) {
-        console.debug(`Failed to get balance for ${token.symbol}:`, error);
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        const isNoWalletError = errorMessage.includes("exit_code: -13") || errorMessage.includes("exit_code:-13") || errorMessage.includes("exitCode: -13");
+        if (!isNoWalletError) {
+          console.debug(`Failed to get balance for ${token.symbol}:`, error);
+        }
       }
     }
   } catch (error) {
@@ -6586,12 +6674,12 @@ class EvmChainStrategy {
   getConnectLabel(t2) {
     return t2("wallets.connectEvmWallet");
   }
-  async getBalances(address, tokens) {
+  async getBalances(address, tokens, priorityToken) {
     if (!this.publicClient) {
       console.warn("No publicClient available for balance query");
       return {};
     }
-    return await getEvmBalances(this.publicClient, address, tokens);
+    return await getEvmBalances(this.publicClient, address, tokens, priorityToken);
   }
   isAddressValid(address) {
     if (!address) return false;
@@ -7857,7 +7945,7 @@ const EvaaBridgeWithProviders = (props) => {
   useEffect(() => {
     setTronConnected(!!tronConnected);
   }, [tronConnected, setTronConnected]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ModalContainerProvider, { containerId: props.modalContainerId, children: /* @__PURE__ */ jsx(
     ChainStrategyProvider,
     {
       evmWallet: {
@@ -7882,7 +7970,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsx(EvaaBridgeContent, { ...props })
     }
-  );
+  ) });
 };
 const EvaaBridgeContent = ({
   className,
@@ -7891,7 +7979,6 @@ const EvaaBridgeContent = ({
   onChainChange
 } = {}) => {
   const { t: t2 } = useTranslation();
-  const modalContainerRef = useRef(null);
   useTokensRequest();
   useChainsRequest();
   const [sendToAnother, setSendToAnother] = useState(false);
@@ -7990,9 +8077,8 @@ const EvaaBridgeContent = ({
           "max-w-md w-full mx-auto flex flex-col relative",
           className
         ),
-        ref: modalContainerRef,
         children: [
-          /* @__PURE__ */ jsx(FormHeader, { modalContainer: modalContainerRef.current }),
+          /* @__PURE__ */ jsx(FormHeader, {}),
           /* @__PURE__ */ jsxs(CardContent, { className: "space-y-[1px]", children: [
             /* @__PURE__ */ jsx(
               SwapSection,
@@ -8006,8 +8092,7 @@ const EvaaBridgeContent = ({
                 amount,
                 isSource: true,
                 onAmountChange: handleAmountChange,
-                onSelect: handleFromChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleFromChainChange
               }
             ),
             /* @__PURE__ */ jsx(SwapButton, {}),
@@ -8021,8 +8106,7 @@ const EvaaBridgeContent = ({
                 allowedChains: allowedToChains,
                 amount: outputAmount,
                 readOnlyAmount: true,
-                onSelect: handleToChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleToChainChange
               }
             ),
             /* @__PURE__ */ jsx(
@@ -8038,8 +8122,8 @@ const EvaaBridgeContent = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(WalletSelectModal, { modalContainer: modalContainerRef.current }),
-    /* @__PURE__ */ jsx(TransactionManager, { modalContainer: modalContainerRef.current }),
+    /* @__PURE__ */ jsx(WalletSelectModal, {}),
+    /* @__PURE__ */ jsx(TransactionManager, {}),
     /* @__PURE__ */ jsx(Toaster, { position: "top-right", richColors: true })
   ] });
 };