@rash2x/bridge-widget 0.1.5 → 0.1.6

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,7 +646,6 @@ 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(
       motion.div,
@@ -1049,8 +1065,7 @@ const routePresets = [
 ];
 const SettingModal = ({
   isOpen,
-  onClose,
-  modalContainer
+  onClose
 }) => {
   const { t: t2 } = useTranslation();
   const { toChain } = useChainsStore();
@@ -1084,7 +1099,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" }) })
@@ -1687,8 +1702,7 @@ const TokenSelectModal = ({
   isOpen,
   onClose,
   items,
-  onChangeAsset,
-  modalContainer
+  onChangeAsset
 }) => {
   const { t: t2 } = useTranslation();
   const {
@@ -1773,7 +1787,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 +2044,7 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-const FormHeaderComponent = ({ modalContainer }) => {
+const FormHeaderComponent = () => {
   const { t: t2 } = useTranslation();
   const { isOpen, onClose, onOpen } = useModal();
   const {
@@ -2047,7 +2060,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 +2078,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,
@@ -2630,8 +2638,7 @@ const ChainSelectModal = ({
   onClose,
   items,
   allowedItems,
-  onChangeChain,
-  modalContainer
+  onChangeChain
 }) => {
   const { t: t2 } = useTranslation();
   const [query, setQuery] = useState("");
@@ -2720,7 +2727,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 +2864,7 @@ const SwapSection = ({
   disableNetworkSelect,
   isSource,
   onSelect,
-  onAmountChange,
-  modalContainer
+  onAmountChange
 }) => {
   const { isOpen, onClose, onOpen } = useModal();
   const { assetMatrix, selectedAssetSymbol } = useTokensStore();
@@ -2892,9 +2897,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
         ),
@@ -2954,8 +2959,7 @@ const SwapSection = ({
         onClose,
         items: chains,
         allowedItems: allowedChains,
-        onChangeChain,
-        modalContainer
+        onChangeChain
       }
     )
   ] });
@@ -4041,9 +4045,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 +4145,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 +6138,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 +6156,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();
@@ -7857,7 +7859,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 +7884,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsx(EvaaBridgeContent, { ...props })
     }
-  );
+  ) });
 };
 const EvaaBridgeContent = ({
   className,
@@ -7891,7 +7893,6 @@ const EvaaBridgeContent = ({
   onChainChange
 } = {}) => {
   const { t: t2 } = useTranslation();
-  const modalContainerRef = useRef(null);
   useTokensRequest();
   useChainsRequest();
   const [sendToAnother, setSendToAnother] = useState(false);
@@ -7990,9 +7991,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 +8006,7 @@ const EvaaBridgeContent = ({
                 amount,
                 isSource: true,
                 onAmountChange: handleAmountChange,
-                onSelect: handleFromChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleFromChainChange
               }
             ),
             /* @__PURE__ */ jsx(SwapButton, {}),
@@ -8021,8 +8020,7 @@ const EvaaBridgeContent = ({
                 allowedChains: allowedToChains,
                 amount: outputAmount,
                 readOnlyAmount: true,
-                onSelect: handleToChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleToChainChange
               }
             ),
             /* @__PURE__ */ jsx(
@@ -8038,8 +8036,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 })
   ] });
 };