@rash2x/bridge-widget 0.1.8 → 0.1.10

package/dist/evaa-bridge.cjs

@@ -32,8 +32,8 @@ const reactSlot = require("@radix-ui/react-slot");
 const classVarianceAuthority = require("class-variance-authority");
 const clsx = require("clsx");
 const tailwindMerge = require("tailwind-merge");
-const reactDom = require("react-dom");
-const framerMotion = require("framer-motion");
+const DialogPrimitive = require("@radix-ui/react-dialog");
+const lucideReact = require("lucide-react");
 const TooltipPrimitive = require("@radix-ui/react-tooltip");
 const wagmi = require("wagmi");
 const tronwalletAdapterReactHooks = require("@tronweb3/tronwallet-adapter-react-hooks");
@@ -42,7 +42,7 @@ const reactQuery = require("@tanstack/react-query");
 const core = require("@ton/core");
 const reactWindow = require("react-window");
 const SwitchPrimitive = require("@radix-ui/react-switch");
-const lucideReact = require("lucide-react");
+const framerMotion = require("framer-motion");
 const AccordionPrimitive = require("@radix-ui/react-accordion");
 const i18next = require("i18next");
 const sonner = require("sonner");
@@ -67,6 +67,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const require$$0__namespace = /* @__PURE__ */ _interopNamespaceDefault(require$$0);
+const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
 const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
 const SwitchPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SwitchPrimitive);
 const AccordionPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccordionPrimitive);
@@ -309,32 +310,6 @@ const ArrowSwapIcon = (props) => {
     }
   );
 };
-const CloseIcon = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", rx: "12", fill: "black", fillOpacity: "0.8" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M16 8.00005L8 16M16 16L8 8",
-            stroke: "white",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-};
 const SearchIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -592,142 +567,103 @@ const Button = require$$0__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-const ModalContainerContext = require$$0.createContext(void 0);
-const ModalContainerProvider = ({
-  containerId,
-  children
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalContainerContext.Provider, { value: containerId, children });
-};
-const useModalContainer = () => {
-  const containerId = require$$0.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__ */ jsxRuntime.jsx("div", { className: cn("p-5 flex flex-col h-full", className), children });
-};
-const ModalHeader = ({ children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn("relative flex gap-4 flex-col justify-between", className),
-      children
-    }
-  );
-};
-const ModalTitle = ({ children, className }) => {
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "h2",
+    DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "button",
+    DialogPrimitive__namespace.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 = require$$0.useRef(null);
-  const lastActiveRef = require$$0.useRef(null);
-  const container = useModalContainer();
-  require$$0.useEffect(() => {
-    if (!isOpen) return;
-    lastActiveRef.current = document.activeElement;
-    const t = setTimeout(() => {
-      panelRef.current?.focus();
-    }, 0);
-    return () => {
-      clearTimeout(t);
-      lastActiveRef.current?.focus?.();
-    };
-  }, [isOpen]);
-  require$$0.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 reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.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__ */ jsxRuntime.jsx(
-            framerMotion.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__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 backdrop-blur-sm bg-background/10 z-10" })
-        ]
-      }
-    ) }),
-    container
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
   );
-};
+}
 const TipIcon = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -1108,10 +1044,7 @@ const routePresets = [
   RoutePriority.CHEAPEST,
   RoutePriority.RECOMMENDED
 ];
-const SettingModal = ({
-  isOpen,
-  onClose
-}) => {
+const SettingModal = ({ isOpen, onClose }) => {
   const { t } = reactI18next.useTranslation();
   const { toChain } = useChainsStore();
   const { tokens } = useTokensStore();
@@ -1144,13 +1077,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__ */ jsxRuntime.jsx(Modal, { isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("settings.title", { defaultValue: "Settings" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalClose, { className: "", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5 mt-7.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2.5 flex flex-col gap-5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("settings.title", { defaultValue: "Settings" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm font-medium leading-3.5", children: t("settings.gasOnDestination") }),
@@ -1664,7 +1594,7 @@ 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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1719,7 +1649,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__ */ jsxRuntime.jsx("div", { style, className: "px-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       TokenRow,
       {
         symbol: node.token.symbol,
@@ -1731,7 +1661,7 @@ const VirtualizedTokenList = ({
         isBalanceLoading: balancesLoading,
         onPick: () => onPick(node.token.symbol, node.willChangeSrc)
       }
-    ) });
+    );
   };
   const getItemSize = (index) => {
     const node = nodes[index];
@@ -1838,72 +1768,64 @@ const TokenSelectModal = ({
     }
     return out;
   }, [effectiveTab, myTokens, groupedTokens, t]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Modal,
-    {
-      isOpen,
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("bridge.selectToken") }),
-          /* @__PURE__ */ jsxRuntime.jsx(ModalClose, { onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-input-icon" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Input,
-                {
-                  placeholder: t("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__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.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: t("bridge.myTokens")
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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: t("bridge.allTokens")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex-1 overflow-hidden", children: virtualNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground px-5 py-3.5", children: t("bridge.noResults") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-4 text-base font-semibold text-muted-foreground uppercase px-5 py-2", children: t("bridge.noBalancesFound") }),
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("bridge.selectToken") }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-input-icon" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            VirtualizedTokenList,
+            Input,
             {
-              nodes: virtualNodes,
-              balancesLoading: balancesQuery.isLoading || balancesQuery.isFetching,
-              hasAnyWallet: hasAnyWallet(),
-              selectedAssetSymbol,
-              getBalance,
-              getTokenUsdValue,
-              onPick
+              placeholder: t("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__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: tab === "my" ? "default" : "outline",
+          onClick: () => setTab("my"),
+          size: "sm",
+          children: t("bridge.myTokens")
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: tab === "all" ? "default" : "outline",
+          onClick: () => setTab("all"),
+          size: "sm",
+          children: t("bridge.allTokens")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden -mx-5", children: virtualNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground px-5 py-3.5", children: t("bridge.noResults") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      effectiveTab === "my" && myTokens.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "leading-4 text-base font-semibold text-muted-foreground uppercase px-5 py-2", children: t("bridge.noBalancesFound") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        VirtualizedTokenList,
+        {
+          nodes: virtualNodes,
+          balancesLoading: balancesQuery.isLoading || balancesQuery.isFetching,
+          hasAnyWallet: hasAnyWallet(),
+          selectedAssetSymbol,
+          getBalance,
+          getTokenUsdValue,
+          onPick
+        }
+      )
+    ] }) })
+  ] }) });
 };
 const useBridgeQuoteStore = zustand.create((set) => ({
   inputAmount: "",
@@ -2766,7 +2688,7 @@ const ChainSelectModal = ({
   };
   const renderChainItem = (chain, willChangeSrc) => {
     const isSelected = fromChain?.chainKey === chain.chainKey || toChain?.chainKey === chain.chainKey;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         onClick: () => onChainPick(chain, willChangeSrc),
@@ -2782,52 +2704,43 @@ const ChainSelectModal = ({
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 ", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-base font-extrabold leading-[100%]", children: chain.name }) }) })
         ] })
-      }
-    ) }, chain.chainKey);
+      },
+      chain.chainKey
+    );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Modal,
-    {
-      isOpen,
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("bridge.selectNetwork") }),
-          /* @__PURE__ */ jsxRuntime.jsx(ModalClose, { onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Input,
-                {
-                  placeholder: t("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__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex-1 overflow-y-auto", children: [
-          groupedChains.available.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: groupedChains.available.map((c) => renderChainItem(c, false)) }),
-          groupedChains.available.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            groupedChains.willChangeSrc.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t("bridge.willChangeSourceChain") }),
-            groupedChains.willChangeSrc.length > 0 && groupedChains.willChangeSrc.map(
-              (c) => renderChainItem(c, true)
-            )
-          ] }),
-          groupedChains.available.length === 0 && groupedChains.willChangeSrc.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-3.5 text-sm text-muted-foreground", children: t("bridge.noResults") })
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-h-[80dvh] overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("bridge.selectNetwork") }) }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SearchIcon, { className: "size-6 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Input,
+            {
+              placeholder: t("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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+        groupedChains.willChangeSrc.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t("bridge.willChangeSourceChain") }),
+        groupedChains.willChangeSrc.length > 0 && groupedChains.willChangeSrc.map(
+          (c) => renderChainItem(c, true)
+        )
+      ] }),
+      groupedChains.available.length === 0 && groupedChains.willChangeSrc.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-3.5 text-sm text-muted-foreground", children: t("bridge.noResults") })
+    ] })
+  ] }) });
 };
 const useWalletSelectModal = zustand.create((set) => ({
   isOpen: false,
@@ -4195,20 +4108,17 @@ const WalletSelectModal = () => {
       console.error("Failed to connect wallet:", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen, onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("wallets.chooseWallet", { defaultValue: "Choose wallet" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: t("wallets.oneWalletPerEnv", {
-        defaultValue: "You can only connect one wallet per environment."
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalClose, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "size-6 p-0 [&>rect]:fill-modal-x [&>path]:stroke-modal-x-foreground" }) })
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t("wallets.chooseWallet") }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: t("wallets.oneWalletPerEnv") })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex flex-col gap-3.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
       connectedWallets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: t("wallets.connected") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 font-semibold text-muted-foreground uppercase", children: t("wallets.connected") }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: connectedWallets.map((wallet) => {
           const IconComponent = wallet.icon;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "-mx-5", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7.5 h-7.5 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "size-7.5" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
@@ -4231,8 +4141,8 @@ const WalletSelectModal = () => {
         }) })
       ] }),
       categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-2 leading-4 text-base font-semibold text-muted-foreground uppercase", children: category.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "", children: category.wallets.map((wallet) => {
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 font-semibold text-muted-foreground uppercase", children: category.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-5", children: category.wallets.map((wallet) => {
           const IconComponent = wallet.icon;
           const isEvmConnector = category.title === t("wallets.evmWallets");
           const connector = isEvmConnector ? connectors.find((c) => c.id === wallet.id) : null;
@@ -6205,8 +6115,8 @@ const TransactionManager = () => {
   if (status === "completed") {
     step = /* @__PURE__ */ jsxRuntime.jsx(SuccessStep, {});
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: () => {
-  }, children: step });
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: true, onOpenChange: () => {
+  }, children: /* @__PURE__ */ jsxRuntime.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();
@@ -7975,7 +7885,7 @@ const EvaaBridgeWithProviders = (props) => {
   require$$0.useEffect(() => {
     setTronConnected(!!tronConnected);
   }, [tronConnected, setTronConnected]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ModalContainerProvider, { containerId: props.modalContainerId, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     ChainStrategyProvider,
     {
       evmWallet: {
@@ -8000,7 +7910,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(EvaaBridgeContent, { ...props })
     }
-  ) });
+  );
 };
 const EvaaBridgeContent = ({
   className,