@rash2x/bridge-widget 0.1.5 → 0.1.6

package/dist/evaa-bridge.cjs

@@ -592,6 +592,23 @@ 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 });
 };
@@ -645,11 +662,11 @@ const Modal = ({
   isOpen,
   onClose,
   children,
-  className,
-  modalContainer
+  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;
@@ -671,7 +688,6 @@ const Modal = ({
     return () => window.removeEventListener("keydown", onKey);
   }, [isOpen, onClose]);
   if (typeof document === "undefined") return null;
-  const container = modalContainer || document.body;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
@@ -1091,8 +1107,7 @@ const routePresets = [
 ];
 const SettingModal = ({
   isOpen,
-  onClose,
-  modalContainer
+  onClose
 }) => {
   const { t } = reactI18next.useTranslation();
   const { toChain } = useChainsStore();
@@ -1126,7 +1141,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__ */ jsxRuntime.jsx(Modal, { isOpen, onClose, modalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
+  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" }) })
@@ -1729,8 +1744,7 @@ const TokenSelectModal = ({
   isOpen,
   onClose,
   items,
-  onChangeAsset,
-  modalContainer
+  onChangeAsset
 }) => {
   const { t } = reactI18next.useTranslation();
   const {
@@ -1815,7 +1829,6 @@ const TokenSelectModal = ({
     {
       isOpen,
       onClose: handleClose,
-      modalContainer,
       children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("bridge.selectToken") }),
@@ -2073,7 +2086,7 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-const FormHeaderComponent = ({ modalContainer }) => {
+const FormHeaderComponent = () => {
   const { t } = reactI18next.useTranslation();
   const { isOpen, onClose, onOpen } = useModal();
   const {
@@ -2089,7 +2102,7 @@ const FormHeaderComponent = ({ modalContainer }) => {
     const sum = selectedAssetSymbol.toUpperCase();
     return assets.find((a) => a.symbol.toUpperCase() === sum) ?? assets[0];
   }, [assets, selectedAssetSymbol]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-y-0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "gap-y-0 flex justify-between items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal leading-3.5 text-muted-foreground", children: t("bridge.selectToken") }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectTokenButton, { token: current, onClick: onOpen })
@@ -2107,24 +2120,19 @@ const FormHeaderComponent = ({ modalContainer }) => {
         onChangeAsset: (symbol) => {
           setSelectedAssetSymbol(symbol);
           onClose();
-        },
-        modalContainer
+        }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
       SettingModal,
       {
         isOpen: isOpenSettings,
-        onClose: onCloseSettings,
-        modalContainer
+        onClose: onCloseSettings
       }
     )
   ] });
 };
-const FormHeader = require$$0.memo(
-  FormHeaderComponent,
-  (prev, next) => prev.modalContainer === next.modalContainer
-);
+const FormHeader = require$$0.memo(FormHeaderComponent);
 async function fetchQuotes(req) {
   const params = {
     srcChainKey: req.srcChainKey,
@@ -2672,8 +2680,7 @@ const ChainSelectModal = ({
   onClose,
   items,
   allowedItems,
-  onChangeChain,
-  modalContainer
+  onChangeChain
 }) => {
   const { t } = reactI18next.useTranslation();
   const [query, setQuery] = require$$0.useState("");
@@ -2762,7 +2769,6 @@ const ChainSelectModal = ({
     {
       isOpen,
       onClose: handleClose,
-      modalContainer,
       children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: t("bridge.selectNetwork") }),
@@ -2900,8 +2906,7 @@ const SwapSection = ({
   disableNetworkSelect,
   isSource,
   onSelect,
-  onAmountChange,
-  modalContainer
+  onAmountChange
 }) => {
   const { isOpen, onClose, onOpen } = useModal();
   const { assetMatrix, selectedAssetSymbol } = useTokensStore();
@@ -2934,9 +2939,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
         ),
@@ -2996,8 +3001,7 @@ const SwapSection = ({
         onClose,
         items: chains,
         allowedItems: allowedChains,
-        onChangeChain,
-        modalContainer
+        onChangeChain
       }
     )
   ] });
@@ -4083,9 +4087,7 @@ const SubmitButton = () => {
 function short(addr) {
   return addr.slice(0, 4) + "…" + addr.slice(-4);
 }
-const WalletSelectModal = ({
-  modalContainer
-}) => {
+const WalletSelectModal = () => {
   const { t } = reactI18next.useTranslation();
   const { isOpen, onClose } = useWalletSelectModal();
   const { connect, connectors, isPending } = wagmi.useConnect();
@@ -4185,7 +4187,7 @@ const WalletSelectModal = ({
       console.error("Failed to connect wallet:", error);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen, onClose, modalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { children: [
+  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", {
@@ -6178,7 +6180,7 @@ const ConfirmStep = () => {
     /* @__PURE__ */ jsxRuntime.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;
@@ -6196,7 +6198,7 @@ const TransactionManager = ({ modalContainer }) => {
     step = /* @__PURE__ */ jsxRuntime.jsx(SuccessStep, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Modal, { isOpen: true, onClose: () => {
-  }, modalContainer, children: step });
+  }, children: step });
 };
 const useTokensRequest = () => {
   const { setTokens, setSelectedToken, setSelectedAssetSymbol } = useTokensStore();
@@ -7899,7 +7901,7 @@ const EvaaBridgeWithProviders = (props) => {
   require$$0.useEffect(() => {
     setTronConnected(!!tronConnected);
   }, [tronConnected, setTronConnected]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalContainerProvider, { containerId: props.modalContainerId, children: /* @__PURE__ */ jsxRuntime.jsx(
     ChainStrategyProvider,
     {
       evmWallet: {
@@ -7924,7 +7926,7 @@ const EvaaBridgeWithProviders = (props) => {
       tonApiKey: props.tonApiKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(EvaaBridgeContent, { ...props })
     }
-  );
+  ) });
 };
 const EvaaBridgeContent = ({
   className,
@@ -7933,7 +7935,6 @@ const EvaaBridgeContent = ({
   onChainChange
 } = {}) => {
   const { t } = reactI18next.useTranslation();
-  const modalContainerRef = require$$0.useRef(null);
   useTokensRequest();
   useChainsRequest();
   const [sendToAnother, setSendToAnother] = require$$0.useState(false);
@@ -8032,9 +8033,8 @@ const EvaaBridgeContent = ({
           "max-w-md w-full mx-auto flex flex-col relative",
           className
         ),
-        ref: modalContainerRef,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FormHeader, { modalContainer: modalContainerRef.current }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormHeader, {}),
           /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-[1px]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               SwapSection,
@@ -8048,8 +8048,7 @@ const EvaaBridgeContent = ({
                 amount,
                 isSource: true,
                 onAmountChange: handleAmountChange,
-                onSelect: handleFromChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleFromChainChange
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(SwapButton, {}),
@@ -8063,8 +8062,7 @@ const EvaaBridgeContent = ({
                 allowedChains: allowedToChains,
                 amount: outputAmount,
                 readOnlyAmount: true,
-                onSelect: handleToChainChange,
-                modalContainer: modalContainerRef.current || void 0
+                onSelect: handleToChainChange
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -8080,8 +8078,8 @@ const EvaaBridgeContent = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(WalletSelectModal, { modalContainer: modalContainerRef.current }),
-    /* @__PURE__ */ jsxRuntime.jsx(TransactionManager, { modalContainer: modalContainerRef.current }),
+    /* @__PURE__ */ jsxRuntime.jsx(WalletSelectModal, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TransactionManager, {}),
     /* @__PURE__ */ jsxRuntime.jsx(sonner.Toaster, { position: "top-right", richColors: true })
   ] });
 };