@rash2x/bridge-widget 0.1.9 → 0.1.11

package/dist/evaa-bridge.mjs

@@ -4,14 +4,14 @@ 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, createContext, useContext, useRef, useEffect, useMemo, memo, forwardRef } from "react";
+import require$$0__default, { useState, useCallback, useMemo, createContext, useContext, useEffect, memo, forwardRef, useRef } from "react";
 import { create as create$1 } from "zustand";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "framer-motion";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon, X, ChevronDownIcon } from "lucide-react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { useAccount, useConnect, useDisconnect, useWalletClient, usePublicClient } from "wagmi";
 import { useWallet } from "@tronweb3/tronwallet-adapter-react-hooks";
@@ -20,7 +20,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Address, beginCell as beginCell$1, storeMessage, loadMessage, Cell } from "@ton/core";
 import { VariableSizeList } from "react-window";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { X, ChevronDownIcon } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { t } from "i18next";
 import { toast, Toaster } from "sonner";
@@ -267,32 +267,6 @@ const ArrowSwapIcon = (props) => {
     }
   );
 };
-const CloseIcon = (props) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("rect", { width: "24", height: "24", rx: "12", fill: "black", fillOpacity: "0.8" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M16 8.00005L8 16M16 16L8 8",
-            stroke: "white",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-};
 const SearchIcon = (props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -550,142 +524,103 @@ 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 });
-};
-const ModalHeader = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("relative flex gap-4 flex-col justify-between", className),
-      children
-    }
-  );
-};
-const ModalTitle = ({ children, className }) => {
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "h2",
+    DialogPrimitive.Overlay,
     {
+      "data-slot": "dialog-overlay",
       className: cn(
-        "text-2xl leading-7.5 font-bold font-display text-dialog-foreground",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       ),
-      children
+      ...props
     }
   );
-};
-const ModalDescription = ({ children, className }) => {
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "p",
+    "div",
     {
-      className: cn(
-        "text-base font-medium text-muted-foreground leading-5",
-        className
-      ),
-      children
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
     }
   );
-};
-const ModalClose = ({ onClick, children, className }) => {
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "button",
+    DialogPrimitive.Title,
     {
-      className: cn(
-        "cursor-pointer absolute right-0 top-0 p-0 bg-transparent rounded-full hover:bg-transparent shadow-none w-6 h-6",
-        className
-      ),
-      onClick,
-      children
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
     }
   );
-};
-const Modal = ({
-  isOpen,
-  onClose,
-  children,
-  className
-}) => {
-  const panelRef = useRef(null);
-  const lastActiveRef = useRef(null);
-  const container = useModalContainer();
-  useEffect(() => {
-    if (!isOpen) return;
-    lastActiveRef.current = document.activeElement;
-    const t2 = setTimeout(() => {
-      panelRef.current?.focus();
-    }, 0);
-    return () => {
-      clearTimeout(t2);
-      lastActiveRef.current?.focus?.();
-    };
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    window.document.body.style.overflow = "hidden";
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [isOpen, onClose]);
-  if (typeof document === "undefined") return null;
-  return createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        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 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
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
   );
-};
+}
 const TipIcon = (props) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -791,14 +726,7 @@ function TooltipContent({
 const Tip = (props) => {
   const { children, text } = props;
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "default",
-        className: "cursor-pointer rounded-none shadow-none shrink-0 !p-0 !m-0 !w-fit !h-auto !bg-transparent hover:bg-transparent",
-        children
-      }
-    ) }),
+    /* @__PURE__ */ jsx(TooltipTrigger, { children }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: text }) })
   ] });
 };
@@ -1066,10 +994,7 @@ const routePresets = [
   RoutePriority.CHEAPEST,
   RoutePriority.RECOMMENDED
 ];
-const SettingModal = ({
-  isOpen,
-  onClose
-}) => {
+const SettingModal = ({ isOpen, onClose }) => {
   const { t: t2 } = useTranslation();
   const { toChain } = useChainsStore();
   const { tokens } = useTokensStore();
@@ -1102,13 +1027,10 @@ 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, 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" }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-5 mt-7.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex flex-col gap-5", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t2("settings.title", { defaultValue: "Settings" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm font-medium leading-3.5", children: t2("settings.gasOnDestination") }),
@@ -1622,14 +1544,14 @@ const TokenRow = ({
     Button,
     {
       onClick: onPick,
-      className: `w-full h-[50px] cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-modal-item-hover rounded-12 transition-[300] ${isSelected ? "border border-ring" : ""}`,
+      className: `w-full h-12.5 rounded-md cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-modal-item-hover transition-[300] ${isSelected ? "border border-ring" : ""}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsx(
             TokenSymbol,
             {
               symbol,
-              className: "w-7.5 h-7.5 rounded-full",
+              className: "size-7.5 max-w-7.5 rounded-full",
               alt: symbol
             }
           ),
@@ -1677,7 +1599,7 @@ const VirtualizedTokenList = ({
     const bal = getBalance(node.token.symbol);
     const usd = getTokenUsdValue(node.token.symbol, node.token.price?.usd);
     const isSelected = selectedAssetSymbol?.toUpperCase() === node.token.symbol.toUpperCase();
-    return /* @__PURE__ */ jsx("div", { style, className: "px-0", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       TokenRow,
       {
         symbol: node.token.symbol,
@@ -1689,7 +1611,7 @@ const VirtualizedTokenList = ({
         isBalanceLoading: balancesLoading,
         onPick: () => onPick(node.token.symbol, node.willChangeSrc)
       }
-    ) });
+    );
   };
   const getItemSize = (index) => {
     const node = nodes[index];
@@ -1796,72 +1718,64 @@ const TokenSelectModal = ({
     }
     return out;
   }, [effectiveTab, myTokens, groupedTokens, t2]);
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      isOpen,
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxs(ModalContent, { children: [
-        /* @__PURE__ */ jsxs(ModalHeader, { children: [
-          /* @__PURE__ */ jsx(ModalTitle, { children: t2("bridge.selectToken") }),
-          /* @__PURE__ */ jsx(ModalClose, { onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `flex items-center gap-2.5 px-5 py-3.5 bg-input rounded-12 mt-6 h-12.5 transition-all duration-200 ${isFocused ? "border border-ring" : "border border-transparent"}`,
-            children: [
-              /* @__PURE__ */ jsx(SearchIcon, { className: "size-6 text-input-icon" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  placeholder: t2("bridge.searchToken"),
-                  className: "w-full outline-none leading-0 p-0 h-6 text-base text-input-text placeholder:text-input-placeholder bg-none dark:bg-transparent",
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value),
-                  onFocus: () => setIsFocused(true),
-                  onBlur: () => setIsFocused(false)
-                }
-              )
-            ]
-          }
-        ),
-        hasAnyWallet() && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: `px-5 py-2.5 rounded-full text-sm font-bold hover:bg-filter-active hover:text-filter-active-foreground cursor-pointer ${tab === "my" ? "bg-filter-active text-filter-active-foreground" : "bg-filter text-filter-foreground"}`,
-              onClick: () => setTab("my"),
-              children: t2("bridge.myTokens")
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: `px-4 py-2 rounded-full text-sm font-bold hover:bg-filter-active hover:text-filter-active-foreground cursor-pointer ${tab === "all" ? "bg-filter-active text-filter-active-foreground" : "bg-filter text-filter-foreground"}`,
-              onClick: () => setTab("all"),
-              children: t2("bridge.allTokens")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-4 flex-1 overflow-hidden", children: virtualNodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground px-5 py-3.5", children: t2("bridge.noResults") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ jsx("p", { className: "leading-4 text-base font-semibold text-muted-foreground uppercase px-5 py-2", children: t2("bridge.noBalancesFound") }),
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-auto", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t2("bridge.selectToken") }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-2.5 px-5 py-3.5 bg-input rounded-12 h-12.5 transition-all duration-200 ${isFocused ? "border border-ring" : "border border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "size-6 text-input-icon" }),
           /* @__PURE__ */ jsx(
-            VirtualizedTokenList,
+            Input,
             {
-              nodes: virtualNodes,
-              balancesLoading: balancesQuery.isLoading || balancesQuery.isFetching,
-              hasAnyWallet: hasAnyWallet(),
-              selectedAssetSymbol,
-              getBalance,
-              getTokenUsdValue,
-              onPick
+              placeholder: t2("bridge.searchToken"),
+              className: "w-full outline-none leading-0 p-0 h-6 text-base text-input-text placeholder:text-input-placeholder bg-none dark:bg-transparent",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false)
             }
           )
-        ] }) })
-      ] })
-    }
-  );
+        ]
+      }
+    ),
+    hasAnyWallet() && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: tab === "my" ? "default" : "outline",
+          onClick: () => setTab("my"),
+          size: "sm",
+          children: t2("bridge.myTokens")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: tab === "all" ? "default" : "outline",
+          onClick: () => setTab("all"),
+          size: "sm",
+          children: t2("bridge.allTokens")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden -mx-5", children: virtualNodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground px-5 py-3.5", children: t2("bridge.noResults") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ jsx("p", { className: "leading-4 text-base font-semibold text-muted-foreground uppercase px-5 py-2", children: t2("bridge.noBalancesFound") }),
+      /* @__PURE__ */ jsx(
+        VirtualizedTokenList,
+        {
+          nodes: virtualNodes,
+          balancesLoading: balancesQuery.isLoading || balancesQuery.isFetching,
+          hasAnyWallet: hasAnyWallet(),
+          selectedAssetSymbol,
+          getBalance,
+          getTokenUsdValue,
+          onPick
+        }
+      )
+    ] }) })
+  ] }) });
 };
 const useBridgeQuoteStore = create$1((set) => ({
   inputAmount: "",
@@ -1995,7 +1909,7 @@ function Card({ className, ...props }) {
     {
       "data-slot": "card",
       className: cn(
-        "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-4 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-4 rounded-lg border py-4 shadow-sm",
         className
       ),
       ...props
@@ -2724,7 +2638,7 @@ const ChainSelectModal = ({
   };
   const renderChainItem = (chain, willChangeSrc) => {
     const isSelected = fromChain?.chainKey === chain.chainKey || toChain?.chainKey === chain.chainKey;
-    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       Button,
       {
         onClick: () => onChainPick(chain, willChangeSrc),
@@ -2740,52 +2654,43 @@ const ChainSelectModal = ({
           ),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 ", children: /* @__PURE__ */ jsx("p", { className: "text-foreground text-base font-extrabold leading-[100%]", children: chain.name }) }) })
         ] })
-      }
-    ) }, chain.chainKey);
+      },
+      chain.chainKey
+    );
   };
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      isOpen,
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxs(ModalContent, { children: [
-        /* @__PURE__ */ jsxs(ModalHeader, { children: [
-          /* @__PURE__ */ jsx(ModalTitle, { children: t2("bridge.selectNetwork") }),
-          /* @__PURE__ */ jsx(ModalClose, { onClick: handleClose, children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `flex items-center gap-2.5 px-5 py-3.5 bg-input rounded-12 mt-6 h-12.5 transition-all duration-200 ${isFocused ? "border border-ring" : "border border-transparent"}`,
-            children: [
-              /* @__PURE__ */ jsx(SearchIcon, { className: "size-6 text-muted-foreground" }),
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  placeholder: t2("bridge.searchDestinationChain"),
-                  className: "w-full outline-none leading-0 p-0 h-6 text-base text-foreground placeholder:text-muted-foreground bg-none dark:bg-transparent",
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value),
-                  onFocus: () => setIsFocused(true),
-                  onBlur: () => setIsFocused(false)
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex-1 overflow-y-auto", children: [
-          groupedChains.available.length > 0 && /* @__PURE__ */ jsx("div", { children: groupedChains.available.map((c) => renderChainItem(c, false)) }),
-          groupedChains.available.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-            groupedChains.willChangeSrc.length > 0 && /* @__PURE__ */ jsx("p", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t2("bridge.willChangeSourceChain") }),
-            groupedChains.willChangeSrc.length > 0 && groupedChains.willChangeSrc.map(
-              (c) => renderChainItem(c, true)
-            )
-          ] }),
-          groupedChains.available.length === 0 && groupedChains.willChangeSrc.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-5 py-3.5 text-sm text-muted-foreground", children: t2("bridge.noResults") })
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-hidden", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: t2("bridge.selectNetwork") }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex items-center gap-2.5 px-5 py-3.5 bg-input rounded-md h-12.5 transition-all duration-200 ${isFocused ? "border border-ring" : "border border-transparent"}`,
+        children: [
+          /* @__PURE__ */ jsx(SearchIcon, { className: "size-6 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: t2("bridge.searchDestinationChain"),
+              className: "w-full outline-none leading-0 p-0 h-6 text-base text-foreground placeholder:text-muted-foreground bg-none dark:bg-transparent",
+              value: query,
+              onChange: (e) => setQuery(e.target.value),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      groupedChains.available.length > 0 && groupedChains.available.map((c) => renderChainItem(c, false)),
+      groupedChains.available.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        groupedChains.willChangeSrc.length > 0 && /* @__PURE__ */ jsx("p", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t2("bridge.willChangeSourceChain") }),
+        groupedChains.willChangeSrc.length > 0 && groupedChains.willChangeSrc.map(
+          (c) => renderChainItem(c, true)
+        )
+      ] }),
+      groupedChains.available.length === 0 && groupedChains.willChangeSrc.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-5 py-3.5 text-sm text-muted-foreground", children: t2("bridge.noResults") })
+    ] })
+  ] }) });
 };
 const useWalletSelectModal = create$1((set) => ({
   isOpen: false,
@@ -3083,7 +2988,7 @@ const ToggleRow = ({ enabled, onToggle }) => {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: "p-4 flex flex-col rounded-b-xl gap-2 bg-muted", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 flex flex-col rounded-b-lg gap-2 bg-muted", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm leading-4.5 font-medium text-muted-foreground", children: t2("bridge.sendToAnotherAddress") }),
       /* @__PURE__ */ jsx(
@@ -3351,8 +3256,8 @@ const Details = () => {
   })();
   const currentSlippageText = formatPercentage(slippageBps);
   const routeText = quote?.route ? getRouteDisplayName(quote.route) : t2(`settings.routePresets.${routePriority}`);
-  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", className: "bg-muted rounded-xl", children: [
-    /* @__PURE__ */ jsx(AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-xl data-[state=open]:pb-3", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", className: "bg-muted rounded-lg", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { className: "w-full gap-1 items-center py-6 px-5 rounded-b-lg data-[state=open]:pb-3", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-normal text-priority leading-3.5", children: t2("bridge.youWillReceive", { defaultValue: "You will receive" }) }),
       /* @__PURE__ */ jsxs("div", { className: "bg-transparent hover:bg-transparent shadow-none h-4 p-0 px-0 py-0 flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(TokenSymbol, { symbol, className: "w-4 h-4", alt: "token" }),
@@ -4153,20 +4058,17 @@ const WalletSelectModal = () => {
       console.error("Failed to connect wallet:", error);
     }
   };
-  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", {
-        defaultValue: "You can only connect one wallet per environment."
-      }) }),
-      /* @__PURE__ */ jsx(ModalClose, { onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t2("wallets.chooseWallet") }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t2("wallets.oneWalletPerEnv") })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-5 flex flex-col gap-3.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
       connectedWallets.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t2("wallets.connected") }),
+        /* @__PURE__ */ jsx("div", { className: "py-2 font-semibold text-muted-foreground uppercase", children: t2("wallets.connected") }),
         /* @__PURE__ */ jsx("div", { className: "", children: connectedWallets.map((wallet) => {
           const IconComponent = wallet.icon;
-          return /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsxs(Button, { className: "w-full cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-muted h-auto rounded-12 transition-[300]", children: [
+          return /* @__PURE__ */ jsx("div", { className: "-mx-5", children: /* @__PURE__ */ jsxs(Button, { className: "w-full cursor-pointer bg-transparent flex shadow-none items-center justify-between gap-2.5 px-5 py-2.5 hover:bg-muted h-auto rounded-12 transition-[300]", children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
               /* @__PURE__ */ jsx("div", { className: "w-7.5 h-7.5 flex items-center justify-center", children: /* @__PURE__ */ jsx(IconComponent, { className: "size-7.5" }) }),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
@@ -4189,8 +4091,8 @@ const WalletSelectModal = () => {
         }) })
       ] }),
       categories.map((category) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: category.title }),
-        /* @__PURE__ */ jsx("div", { className: "", children: category.wallets.map((wallet) => {
+        /* @__PURE__ */ jsx("div", { className: "py-2 font-semibold text-muted-foreground uppercase", children: category.title }),
+        /* @__PURE__ */ jsx("div", { className: "-mx-5", children: category.wallets.map((wallet) => {
           const IconComponent = wallet.icon;
           const isEvmConnector = category.title === t2("wallets.evmWallets");
           const connector = isEvmConnector ? connectors.find((c) => c.id === wallet.id) : null;
@@ -6163,8 +6065,8 @@ const TransactionManager = () => {
   if (status === "completed") {
     step = /* @__PURE__ */ jsx(SuccessStep, {});
   }
-  return /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: () => {
-  }, children: step });
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: () => {
+  }, children: /* @__PURE__ */ jsx(DialogContent, { showCloseButton: false, className: "p-0 gap-0 border-none max-w-[calc(100%-2rem)] sm:max-w-md", children: step }) });
 };
 const useTokensRequest = () => {
   const { setTokens, setSelectedToken, setSelectedAssetSymbol } = useTokensStore();
@@ -6667,6 +6569,7 @@ class EvmChainStrategy {
       console.warn("No publicClient available for balance query");
       return {};
     }
+    console.log("publicClient", this.publicClient);
     return await getEvmBalances(this.publicClient, address, tokens, priorityToken);
   }
   isAddressValid(address) {
@@ -7933,7 +7836,7 @@ const EvaaBridgeWithProviders = (props) => {
   useEffect(() => {
     setTronConnected(!!tronConnected);
   }, [tronConnected, setTronConnected]);
-  return /* @__PURE__ */ jsx(ModalContainerProvider, { containerId: props.modalContainerId, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     ChainStrategyProvider,
     {
       evmWallet: {
@@ -7958,7 +7861,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsx(EvaaBridgeContent, { ...props })
     }
-  ) });
+  );
 };
 const EvaaBridgeContent = ({
   className,
@@ -8071,7 +7974,7 @@ const EvaaBridgeContent = ({
             /* @__PURE__ */ jsx(
               SwapSection,
               {
-                className: "rounded-t-xl",
+                className: "rounded-t-lg",
                 label: t2("bridge.sourceNetwork"),
                 balance: fromBalance,
                 chain: fromChain,