@luno-kit/ui 0.0.1

package/dist/index.cjs

@@ -0,0 +1,1822 @@
+'use client'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ConnectButton: () => ConnectButton,
+  LunoKitProvider: () => LunoKitProvider,
+  useLunoTheme: () => useLunoTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/AccountDetailsModal/index.tsx
+var import_react13 = require("react");
+var import_react14 = require("@luno-kit/react");
+
+// src/components/Dialog/index.tsx
+var import_react = __toESM(require("react"), 1);
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+
+// src/utils/cs.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var customTwMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        "text-xs",
+        "text-sm",
+        "text-base",
+        "text-lg"
+      ]
+    }
+  }
+});
+function cs(...inputs) {
+  return customTwMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/utils/debounce.ts
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      fn();
+    }, ms);
+  };
+}
+
+// src/components/Dialog/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogRoot = ({
+  open,
+  onOpenChange,
+  children,
+  contentClassName,
+  overlayClassName
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPrimitive.Portal, { children: [
+    import_react.default.createElement(DialogPrimitive.Overlay, {
+      className: cs(
+        "fixed inset-0 z-[100] bg-modalBackdrop luno-kit",
+        "data-[state=open]:[animation:overlay-in_150ms_ease-out]",
+        overlayClassName
+      )
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogPrimitive.Content,
+      {
+        className: cs(
+          "luno-kit font-body fixed z-[200] text-modalText text-base leading-base",
+          "bg-modalBackground shadow-primary focus:outline-none overflow-hidden",
+          "transition-all duration-200",
+          "rounded-t-modalMobile bottom-0 left-0 w-full",
+          "translate-y-0 -translate-x-0",
+          "data-[state=open]:[animation:slide-up_200ms_ease-out]",
+          "md:bottom-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
+          "md:w-auto md:rounded-modal",
+          "md:data-[state=open]:[animation:dialog-in_150ms_ease-out]",
+          contentClassName
+        ),
+        children
+      }
+    )
+  ] }) });
+};
+var DialogTitleWrapper = ({ children, className }) => import_react.default.createElement(DialogPrimitive.Title, { className: cs("font-heading", className) }, children);
+var DialogCloseWrapper = ({ children, className, onClick }) => import_react.default.createElement(DialogPrimitive.Close, { className, onClick }, children);
+var Dialog = DialogRoot;
+var DialogClose = DialogCloseWrapper;
+var DialogTitle = DialogTitleWrapper;
+
+// src/providers/ModalContext.tsx
+var import_react2 = require("react");
+var import_react3 = require("@luno-kit/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useModalVisibility() {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const open = (0, import_react2.useCallback)(() => setIsOpen(true), []);
+  const close = (0, import_react2.useCallback)(() => setIsOpen(false), []);
+  return { isOpen, open, close };
+}
+var ModalContext = (0, import_react2.createContext)(void 0);
+var ModalProvider = ({ children }) => {
+  const { isOpen: isConnectModalOpen, open: openConnectModal, close: closeConnectModal } = useModalVisibility();
+  const { isOpen: isAccountModalOpen, open: openAccountModal, close: closeAccountModal } = useModalVisibility();
+  const { isOpen: isChainModalOpen, open: openChainModal, close: closeChainModal } = useModalVisibility();
+  const connectionStatus = (0, import_react3.useStatus)();
+  const closeAllModals = (0, import_react2.useCallback)(() => {
+    closeConnectModal();
+    closeAccountModal();
+    closeChainModal();
+  }, [closeConnectModal, closeAccountModal, closeChainModal]);
+  (0, import_react2.useEffect)(() => {
+    if (connectionStatus === import_react3.ConnectionStatus.Disconnected) {
+      closeAccountModal();
+      closeChainModal();
+    }
+  }, [connectionStatus, closeAccountModal, closeChainModal]);
+  const contextValue = (0, import_react2.useMemo)(() => ({
+    isConnectModalOpen,
+    isAccountModalOpen,
+    isChainModalOpen,
+    openConnectModal: connectionStatus !== import_react3.ConnectionStatus.Connected ? openConnectModal : void 0,
+    closeConnectModal,
+    openAccountModal: connectionStatus === import_react3.ConnectionStatus.Connected ? openAccountModal : void 0,
+    closeAccountModal,
+    openChainModal: connectionStatus === import_react3.ConnectionStatus.Connected ? openChainModal : void 0,
+    closeChainModal,
+    closeAllModals
+  }), [
+    isConnectModalOpen,
+    openConnectModal,
+    closeConnectModal,
+    isAccountModalOpen,
+    openAccountModal,
+    closeAccountModal,
+    isChainModalOpen,
+    openChainModal,
+    closeChainModal,
+    closeAllModals,
+    connectionStatus
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ModalContext.Provider, { value: contextValue, children });
+};
+var useConnectModal = () => {
+  const context = (0, import_react2.useContext)(ModalContext);
+  if (!context) throw new Error("[ModalContext]: useConnectModal must be used within a ModalProvider");
+  return {
+    isOpen: context.isConnectModalOpen,
+    open: context.openConnectModal,
+    close: context.closeConnectModal
+  };
+};
+var useAccountModal = () => {
+  const context = (0, import_react2.useContext)(ModalContext);
+  if (!context) throw new Error("[ModalContext]: useAccountModal must be used within a ModalProvider");
+  return {
+    isOpen: context.isAccountModalOpen,
+    open: context.openAccountModal,
+    close: context.closeAccountModal
+  };
+};
+var useChainModal = () => {
+  const context = (0, import_react2.useContext)(ModalContext);
+  if (!context) throw new Error("[ModalContext]: useChainModal must be used within a ModalProvider");
+  return {
+    isOpen: context.isChainModalOpen,
+    open: context.openChainModal,
+    close: context.closeChainModal
+  };
+};
+
+// src/assets/icons/Arrow.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgArrow = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "arrow_svg__icon",
+    viewBox: "0 0 256 256",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z" })
+  }
+);
+var Arrow_default = SvgArrow;
+
+// src/assets/icons/Back.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SvgBack = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M228,128a12,12,0,0,1-12,12H69l51.52,51.51a12,12,0,0,1-17,17l-72-72a12,12,0,0,1,0-17l72-72a12,12,0,0,1,17,17L69,116H216A12,12,0,0,1,228,128Z" })
+  }
+);
+var Back_default = SvgBack;
+
+// src/assets/icons/Close.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SvgClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z" })
+  }
+);
+var Close_default = SvgClose;
+
+// src/assets/icons/Copy.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SvgCopy = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "copy_svg__icon",
+    width: "16",
+    height: "16",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M216,28H88A12,12,0,0,0,76,40V76H40A12,12,0,0,0,28,88V216a12,12,0,0,0,12,12H168a12,12,0,0,0,12-12V180h36a12,12,0,0,0,12-12V40A12,12,0,0,0,216,28ZM156,204H52V100H156Zm48-48H180V88a12,12,0,0,0-12-12H100V52H204Z" })
+  }
+);
+var Copy_default = SvgCopy;
+
+// src/assets/icons/Disconnect.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SvgDisconnect = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 256 256",
+    width: "20",
+    height: "20",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z" })
+  }
+);
+var Disconnect_default = SvgDisconnect;
+
+// src/assets/icons/List.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SvgList = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "list_svg__icon",
+    viewBox: "0 0 256 256",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M232,48V88a8,8,0,0,1-16,0V56H184a8,8,0,0,1,0-16h40A8,8,0,0,1,232,48ZM72,200H40V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16Zm152-40a8,8,0,0,0-8,8v32H184a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,224,160ZM32,96a8,8,0,0,0,8-8V56H72a8,8,0,0,0,0-16H32a8,8,0,0,0-8,8V88A8,8,0,0,0,32,96ZM188,167l-56,32a8,8,0,0,1-7.94,0L68,167A8,8,0,0,1,64,160V96a8,8,0,0,1,4-7l56-32a8,8,0,0,1,7.94,0l56,32a8,8,0,0,1,4,7v64A8,8,0,0,1,188,167ZM88.12,96,128,118.79,167.88,96,128,73.21ZM80,155.36l40,22.85V132.64L80,109.79Zm96,0V109.79l-40,22.85v45.57Z" })
+  }
+);
+var List_default = SvgList;
+
+// src/assets/icons/Loading.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SvgLoading = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    className: "loading_svg__icon",
+    viewBox: "0 0 256 256",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M236,128a108,108,0,0,1-216,0c0-42.52,24.73-81.34,63-98.9A12,12,0,1,1,93,50.91C63.24,64.57,44,94.83,44,128a84,84,0,0,0,168,0c0-33.17-19.24-63.43-49-77.09A12,12,0,1,1,173,29.1C211.27,46.66,236,85.48,236,128Z" })
+  }
+);
+var Loading_default = SvgLoading;
+
+// src/assets/icons/Success.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SvgSuccess = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "success_svg__icon",
+    viewBox: "0 0 256 256",
+    width: "20",
+    height: "20",
+    fill: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" })
+  }
+);
+var Success_default = SvgSuccess;
+
+// src/assets/icons/Switch.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SvgSwitch = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    className: "switch_svg__icon",
+    viewBox: "0 0 256 256",
+    fill: "currentColor",
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M253.66,133.66l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L216,132.69V128A88,88,0,0,0,56.49,76.67a8,8,0,0,1-13-9.34A104,104,0,0,1,232,128v4.69l10.34-10.35a8,8,0,0,1,11.32,11.32Zm-41.18,55A104,104,0,0,1,24,128v-4.69L13.66,133.66A8,8,0,0,1,2.34,122.34l24-24a8,8,0,0,1,11.32,0l24,24a8,8,0,0,1-11.32,11.32L40,123.31V128a87.62,87.62,0,0,0,22.24,58.41A79.66,79.66,0,0,1,98.3,157.66a48,48,0,1,1,59.4,0,79.59,79.59,0,0,1,36.08,28.78,89.68,89.68,0,0,0,5.71-7.11,8,8,0,0,1,13,9.34ZM128,152a32,32,0,1,0-32-32A32,32,0,0,0,128,152Zm0,64a88.2,88.2,0,0,0,53.92-18.49,64,64,0,0,0-107.84,0A87.57,87.57,0,0,0,128,216Z" })
+  }
+);
+var Switch_default = SvgSwitch;
+
+// src/components/AccountDetailsModal/MainView.tsx
+var import_react4 = require("react");
+
+// src/components/ChainIcon/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ChainIcon = ({
+  chainIconUrl,
+  chainName,
+  className
+}) => {
+  if (chainIconUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "img",
+      {
+        src: chainIconUrl,
+        alt: chainName || "Chain icon",
+        className: cs("w-full h-full object-cover rounded-full", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cs(
+    "w-full h-full bg-gray-500 text-modalText font-semibold",
+    "flex items-center justify-center rounded-full",
+    className
+  ), children: chainName ? chainName.charAt(0).toUpperCase() : "C" });
+};
+
+// src/components/AccountDetailsModal/MainView.tsx
+var import_react5 = require("@luno-kit/react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MainView = ({
+  onViewChange,
+  onModalClose
+}) => {
+  const { address } = (0, import_react5.useAccount)();
+  const { chain } = (0, import_react5.useChain)();
+  const { disconnectAsync } = (0, import_react5.useDisconnect)();
+  const items = (0, import_react4.useMemo)(() => {
+    return [
+      {
+        key: "Chain Name",
+        content: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-stretch w-full justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ChainIcon,
+              {
+                className: "w-[20px] h-[20px]",
+                chainIconUrl: chain?.chainIconUrl,
+                chainName: chain?.name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-base text-modalText", children: chain?.name || "Polkadot" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "div",
+            {
+              className: "flex items-center justify-center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Arrow_default, { className: "w-[16px] h-[16px] " })
+            }
+          )
+        ] }),
+        onClick: () => onViewChange("switchChain" /* switchChain */)
+      },
+      {
+        key: "View on Explorer",
+        content: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(List_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-base text-accountActionItemText", children: "View on Explorer" })
+        ] }),
+        onClick: () => window.open((0, import_react5.getExplorerUrl)(chain?.blockExplorers?.default?.url, address, "address"))
+      },
+      {
+        key: "Switch Account",
+        content: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Switch_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-base text-accountActionItemText", children: "Switch Account" })
+        ] }),
+        onClick: () => onViewChange("switchAccount" /* switchAccount */)
+      }
+    ];
+  }, [onViewChange, chain, address]);
+  const handleDisconnect = async () => {
+    await disconnectAsync();
+    onModalClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center gap-3 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col gap-1.5 w-full px-4", children: items.map((i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectItem, { onClick: i.onClick, children: i.content }, i.key)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full mx-[-100px] h-[1px] bg-cutLine" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SelectItem, { onClick: handleDisconnect, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Disconnect_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-base text-accountActionItemText", children: "Disconnect" })
+    ] }) })
+  ] });
+};
+var SelectItem = ({ children, onClick }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => onClick?.(),
+      className: cs(
+        "w-full p-3.5 rounded-accountActionItem border-none text-left flex items-center gap-2 font-medium",
+        "bg-accountActionItemBackground hover:bg-accountActionItemBackgroundHover",
+        "transition-colors duration-200",
+        onClick ? "cursor-pointer" : "cursor-auto"
+      ),
+      "aria-label": typeof children === "string" ? children : void 0,
+      children
+    }
+  );
+};
+
+// src/components/AccountDetailsModal/SwitchAccountView.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react7 = require("@luno-kit/react");
+var import_react8 = require("@luno-kit/react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SwitchAccountView = ({ onBack }) => {
+  const { accounts, selectAccount } = (0, import_react7.useAccounts)();
+  const { address: currentAddress } = (0, import_react7.useAccount)();
+  const _selectAccount = (0, import_react6.useCallback)((acc) => {
+    selectAccount(acc);
+    onBack();
+  }, [onBack]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col gap-1.5 pt-3 overflow-auto max-h-[400px] no-scrollbar p-4 pt-0", children: accounts.map((acc) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    AccountItem,
+    {
+      account: acc,
+      isSelected: acc.address === currentAddress,
+      selectAccount: _selectAccount
+    },
+    acc.address
+  )) });
+};
+SwitchAccountView.title = "Switch Accounts";
+var AccountItem = import_react6.default.memo(({
+  isSelected,
+  account,
+  selectAccount
+}) => {
+  const { chain } = (0, import_react7.useChain)();
+  const address = account.address;
+  const { data: balance } = (0, import_react7.useBalance)({ address });
+  const connector = (0, import_react7.useActiveConnector)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: () => selectAccount(account),
+      className: cs(
+        "px-3.5 py-2.5 w-full rounded-accountSelectItem border-none",
+        "bg-accountSelectItemBackground",
+        "text-left flex items-center justify-between gap-2",
+        "transition-colors duration-200",
+        isSelected ? "cursor-auto" : "cursor-pointer hover:bg-accountSelectItemBackgroundHover"
+      ),
+      "aria-label": account.name || address,
+      disabled: isSelected,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "shrink-0 w-[24px] h-[24px] bg-pink-500 rounded-full flex items-center justify-center", children: connector?.icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: connector?.icon, alt: "luno account" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium text-sm leading-sm text-accountSelectItemText", children: account.name || (0, import_react8.formatAddress)(address) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-modalTextSecondary font-medium", children: balance === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "animate-pulse rounded w-[60px] h-[18px] bg-skeleton" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              balance?.formattedTransferable || "0.00",
+              " ",
+              chain?.nativeCurrency?.symbol || "DOT"
+            ] }) })
+          ] })
+        ] }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "border-[1px] border-solid border-accentColor rounded-full overflow-hidden flex items-center justify-center w-[18px] h-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "rounded-full bg-accentColor w-[10px] h-[10px]" }) })
+      ]
+    }
+  );
+});
+
+// src/components/ChainList/index.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react10 = require("@luno-kit/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FILTER_TABS = [
+  { key: "All" /* all */, label: "All" /* all */ },
+  { key: "Mainnets" /* mainnets */, label: "Mainnets" /* mainnets */ },
+  { key: "Testnets" /* testnets */, label: "Testnets" /* testnets */ }
+];
+var ChainList = ({ onChainSwitched }) => {
+  const { chain: currentChain } = (0, import_react10.useChain)();
+  const chains = (0, import_react10.useChains)();
+  const { switchChainAsync } = (0, import_react10.useSwitchChain)();
+  const { isApiReady, apiError } = (0, import_react10.useApi)();
+  const [activeFilter, setActiveFilter] = (0, import_react9.useState)("All" /* all */);
+  const [switchingChain, setSwitchingChain] = (0, import_react9.useState)(null);
+  const filteredChains = (0, import_react9.useMemo)(() => {
+    switch (activeFilter) {
+      case "Mainnets" /* mainnets */:
+        return chains.filter((chain) => !chain.testnet);
+      case "Testnets" /* testnets */:
+        return chains.filter((chain) => chain.testnet);
+      case "All" /* all */:
+      default:
+        return chains;
+    }
+  }, [chains, activeFilter]);
+  const handleChainSelect = async (chain) => {
+    if (chain.genesisHash === currentChain?.genesisHash) return;
+    if (!isApiReady && !apiError) return;
+    setSwitchingChain(chain.genesisHash);
+    try {
+      await switchChainAsync({ chainId: chain.genesisHash });
+      onChainSwitched?.(chain);
+    } catch (error) {
+      console.error("Failed to switch chain:", error);
+    } finally {
+      setSwitchingChain(null);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-1.5 w-full", children: FILTER_TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "button",
+      {
+        onClick: () => setActiveFilter(tab.key),
+        className: cs(
+          "px-3.5 flex items-center justify-center cursor-pointer min-w-[48px] min-h-[24px] rounded-networkSelectItem text-[12px] leading-[16px] font-medium transition-colors",
+          activeFilter === tab.key ? "bg-navigationButtonBackground text-modalText" : "bg-transparent text-modalTextSecondary hover:text-modalText"
+        ),
+        children: tab.label
+      },
+      tab.key
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col gap-1.5 overflow-y-auto custom-scrollbar max-h-[450px]", children: filteredChains.map((chain) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ChainItem,
+      {
+        chain,
+        isSelected: chain.genesisHash === currentChain?.genesisHash,
+        onSelect: handleChainSelect,
+        isLoading: (switchingChain === chain.genesisHash || !isApiReady) && !apiError
+      },
+      chain.genesisHash
+    )) }),
+    filteredChains.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-modalTextSecondary text-xs", children: [
+      "No ",
+      activeFilter === "All" /* all */ ? "chains" : activeFilter.toLowerCase(),
+      " available"
+    ] }) })
+  ] });
+};
+var ChainItem = import_react9.default.memo(({
+  chain,
+  isSelected,
+  isLoading,
+  onSelect
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "button",
+    {
+      onClick: () => onSelect(chain),
+      disabled: isSelected || isLoading,
+      className: cs(
+        "flex items-center justify-between p-2 rounded-sm",
+        "bg-networkSelectItemBackground",
+        "transition-colors duration-200",
+        isSelected || isLoading ? "cursor-default" : "cursor-pointer hover:bg-networkSelectItemBackgroundHover",
+        isLoading && "opacity-80"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ChainIcon,
+            {
+              className: "w-[24px] bg-modal-bg h-[24px] flex items-center justify-center",
+              chainIconUrl: chain?.chainIconUrl,
+              chainName: chain?.name
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "font-medium text-base text-modalText", children: chain.name }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center justify-center h-[20px]", children: isSelected ? isLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-accentColor text-xs leading-xs mr-1.5", children: "Switching" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            Loading_default,
+            {
+              className: "text-accentColor animate-[spin_2s_linear_infinite]",
+              width: "15px",
+              height: "15px"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "status-dot-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ping-animation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "status-dot" })
+        ] }) : null })
+      ]
+    }
+  );
+});
+
+// src/components/AccountDetailsModal/SwitchChainView.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SwitchChainView = ({ onBack }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-3.5 p-4 pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChainList, {}) });
+};
+SwitchChainView.title = "Select Networks";
+
+// src/components/Copy/index.tsx
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Copy = ({ copyText, label, className = "" }) => {
+  const [isCopied, setIsCopied] = (0, import_react11.useState)(false);
+  const copyToClipboard = (0, import_react11.useCallback)(async (text) => {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2e3);
+        return true;
+      }
+      return false;
+    } catch (err) {
+      console.error("Copy failed:", err);
+      return false;
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cs("cursor-pointer bg-transparent border-none p-0 m-0 inline-flex items-center justify-center gap-1", className),
+      onClick: () => !isCopied && copyText && copyToClipboard(copyText),
+      "aria-label": "Copy address to clipboard",
+      disabled: isCopied,
+      children: [
+        isCopied ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Success_default, { className: "text-accentColor", width: 16, height: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Copy_default, { width: 16, height: 16 }),
+        label
+      ]
+    }
+  );
+};
+
+// src/components/AccountDetailsModal/index.tsx
+var import_react15 = require("@luno-kit/react");
+
+// src/hooks/useAnimatedViews.ts
+var import_react12 = require("react");
+function useAnimatedViews({
+  initialView,
+  animationDuration = 200,
+  animationEasing = "ease-out"
+}) {
+  const [currentView, setCurrentView] = (0, import_react12.useState)(initialView);
+  const [isAnimating, setIsAnimating] = (0, import_react12.useState)(false);
+  const containerRef = (0, import_react12.useRef)(null);
+  const currentViewRef = (0, import_react12.useRef)(null);
+  const handleViewChange = (0, import_react12.useCallback)((view) => {
+    if (view === currentView || isAnimating) return;
+    setIsAnimating(true);
+    if (!containerRef.current) {
+      setCurrentView(view);
+      setIsAnimating(false);
+      return;
+    }
+    const container = containerRef.current;
+    const currentHeight = container.offsetHeight;
+    setCurrentView(view);
+    requestAnimationFrame(() => {
+      if (!container || !currentViewRef.current) {
+        setIsAnimating(false);
+        return;
+      }
+      const newHeight = currentViewRef.current.offsetHeight;
+      container.animate([
+        { height: currentHeight + "px" },
+        { height: newHeight + "px" }
+      ], {
+        duration: animationDuration,
+        easing: animationEasing,
+        fill: "forwards"
+      }).addEventListener("finish", () => {
+        setIsAnimating(false);
+      });
+    });
+  }, [currentView, isAnimating, animationDuration, animationEasing]);
+  const resetView = (0, import_react12.useCallback)(() => {
+    setCurrentView(initialView);
+    setIsAnimating(false);
+  }, [initialView]);
+  return {
+    currentView,
+    isAnimating,
+    containerRef,
+    currentViewRef,
+    handleViewChange,
+    resetView
+  };
+}
+
+// src/components/AccountDetailsModal/index.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AccountDetailsModal = () => {
+  const { isOpen, close } = useAccountModal();
+  const { address } = (0, import_react14.useAccount)();
+  const { chain } = (0, import_react14.useChain)();
+  const { data: balance } = (0, import_react14.useBalance)({ address });
+  const activeConnector = (0, import_react14.useActiveConnector)();
+  const {
+    currentView,
+    containerRef,
+    currentViewRef,
+    handleViewChange,
+    resetView
+  } = useAnimatedViews({ initialView: "main" /* main */ });
+  const handleModalClose = (0, import_react13.useCallback)(() => {
+    close();
+    resetView();
+  }, [close]);
+  const viewTitle = (0, import_react13.useMemo)(() => {
+    if (currentView === "switchAccount" /* switchAccount */) return "Switch Account";
+    if (currentView === "switchChain" /* switchChain */) return SwitchChainView.title;
+    return null;
+  }, [currentView]);
+  const viewComponents = (0, import_react13.useMemo)(() => ({
+    ["main" /* main */]: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      MainView,
+      {
+        onViewChange: handleViewChange,
+        onModalClose: handleModalClose
+      }
+    ),
+    ["switchAccount" /* switchAccount */]: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SwitchAccountView, { onBack: () => handleViewChange("main" /* main */) }),
+    ["switchChain" /* switchChain */]: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SwitchChainView, { onBack: () => handleViewChange("main" /* main */) })
+  }), [handleViewChange, handleModalClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    Dialog,
+    {
+      open: isOpen,
+      onOpenChange: handleModalClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cs(
+        "flex flex-col w-full md:w-[360px] max-h-[500px] text-modalText",
+        "bg-modalBackground shadow-modal",
+        currentView === "main" /* main */ ? "gap-6" : "gap-3.5"
+      ), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-stretch justify-between w-full px-4 pt-4", children: [
+          currentView === "main" /* main */ ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3", children: [
+            activeConnector?.icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center w-[55px] h-[55px]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src: activeConnector.icon, alt: "" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col items-start gap-2 w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogTitle, { className: "sr-only", children: "Account Details" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1.5 w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-base text-modalText font-semibold", children: (0, import_react15.formatAddress)(address) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Copy, { copyText: address })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm text-modalTextSecondary font-medium min-h-[20px]", children: balance === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "animate-pulse rounded w-[80px] h-[20px] bg-skeleton" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+                balance?.formattedTransferable || "0.00",
+                " ",
+                chain?.nativeCurrency?.symbol || "DOT"
+              ] }) })
+            ] })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "button",
+              {
+                className: "flex items-center justify-center w-[30px] h-[30px] cursor-pointer rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover  transition-colors duration-200",
+                onClick: () => handleViewChange("main" /* main */),
+                "aria-label": "Back",
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Back_default, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              DialogTitle,
+              {
+                className: "text-lg leading-lg text-modalText font-semibold transition-opacity duration-300",
+                children: viewTitle
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogClose, { className: "z-10 flex items-center justify-center h-[30px] w-[30px] rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover  transition-colors duration-200 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Close_default, {}) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative overflow-hidden",
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: currentViewRef, children: viewComponents[currentView] })
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/components/ChainModal/index.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChainModal = () => {
+  const { isOpen, close } = useChainModal();
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog, { open: isOpen, onOpenChange: (open) => !open && close(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col w-full md:w-[360px] max-h-[500px] p-4 gap-3.5 text-modalText", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-[30px]" }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "text-lg leading-lg text-modalText font-semibold transition-opacity duration-300", children: "Select Network" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogClose, { className: "z-10 flex items-center justify-center h-[30px] w-[30px] rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover transition-colors duration-200 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Close_default, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChainList, {})
+  ] }) });
+};
+
+// src/components/ConnectModal/index.tsx
+var import_react22 = require("react");
+var import_react23 = require("@luno-kit/react");
+
+// src/hooks/useConnectButton.ts
+var import_react16 = require("@luno-kit/react");
+function useLunoWallet() {
+  const connectionStatus = (0, import_react16.useStatus)();
+  const { account, address } = (0, import_react16.useAccount)();
+  const { chain: currentChain } = (0, import_react16.useChain)();
+  const configuredChains = (0, import_react16.useChains)();
+  const { data: balance } = (0, import_react16.useBalance)({ address });
+  const activeConnector = (0, import_react16.useActiveConnector)();
+  const { open: openConnectModal, isOpen: isConnectModalOpen } = useConnectModal();
+  const { open: openAccountModal, isOpen: isAccountModalOpen } = useAccountModal();
+  const { open: openChainModal, isOpen: isChainModalOpen } = useChainModal();
+  const isConnecting = connectionStatus === import_react16.ConnectionStatus.Connecting;
+  const isConnected = connectionStatus === import_react16.ConnectionStatus.Connected;
+  const isDisconnected = connectionStatus === import_react16.ConnectionStatus.Disconnected || connectionStatus === import_react16.ConnectionStatus.Disconnecting;
+  const isChainSupported = !!currentChain && configuredChains.some((c) => c.genesisHash.toLowerCase() === currentChain.genesisHash.toLowerCase());
+  return {
+    activeConnector,
+    connectionStatus,
+    isConnected,
+    isDisconnected,
+    isConnecting,
+    account,
+    address,
+    displayAddress: (0, import_react16.formatAddress)(address),
+    currentChain,
+    configuredChains,
+    isChainSupported,
+    chainIconUrl: currentChain?.chainIconUrl,
+    chainName: currentChain?.name,
+    balance,
+    openConnectModal,
+    openAccountModal,
+    openChainModal,
+    isConnectModalOpen,
+    isAccountModalOpen,
+    isChainModalOpen
+  };
+}
+
+// src/hooks/useWindowSize.ts
+var import_react17 = require("react");
+var useWindowSize = () => {
+  const [windowSize, setWindowSize] = (0, import_react17.useState)({
+    height: void 0,
+    width: void 0
+  });
+  (0, import_react17.useEffect)(() => {
+    const handleResize = debounce(() => {
+      setWindowSize({
+        height: window.innerHeight,
+        width: window.innerWidth
+      });
+    }, 500);
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+};
+
+// src/components/ConnectModal/WalletView.tsx
+var import_react19 = __toESM(require("react"), 1);
+
+// src/components/QRCode/index.tsx
+var import_cuer = require("cuer");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var QRCode = ({
+  logoBackground,
+  uri,
+  size
+}) => {
+  if (!uri) {
+    const QR_GRID_SIZE = 57;
+    const FINDER_SIZE_WITH_MARGIN = 8;
+    const ARENA_GRID_SIZE = Math.floor(QR_GRID_SIZE / 4);
+    const cellSize = size / QR_GRID_SIZE;
+    const arenaSize = ARENA_GRID_SIZE * cellSize;
+    const arenaStart = Math.floor(QR_GRID_SIZE / 2 - ARENA_GRID_SIZE / 2);
+    const arenaEnd = arenaStart + ARENA_GRID_SIZE;
+    const generateSkeletonDots = () => {
+      const dots = [];
+      for (let i = 0; i < QR_GRID_SIZE; i++) {
+        for (let j = 0; j < QR_GRID_SIZE; j++) {
+          if (i >= arenaStart && i <= arenaEnd && j >= arenaStart && j <= arenaEnd) continue;
+          const isInFinder = i < FINDER_SIZE_WITH_MARGIN && j < FINDER_SIZE_WITH_MARGIN || i < FINDER_SIZE_WITH_MARGIN && j >= QR_GRID_SIZE - FINDER_SIZE_WITH_MARGIN || i >= QR_GRID_SIZE - FINDER_SIZE_WITH_MARGIN && j < FINDER_SIZE_WITH_MARGIN;
+          if (isInFinder) continue;
+          const cx = j + 0.5;
+          const cy = i + 0.5;
+          dots.push(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "rect",
+              {
+                x: cx - 0.4,
+                y: cy - 0.4,
+                width: 0.8,
+                height: 0.8,
+                rx: 0.4,
+                fill: "var(--color-walletSelectItemBackground)"
+              },
+              `${i}-${j}`
+            )
+          );
+        }
+      }
+      return dots;
+    };
+    const renderFinderPattern = ({ position }) => {
+      const finderSize = 7 * cellSize;
+      const positionStyles = {
+        "top-left": { top: 0, left: 0 },
+        "top-right": { top: 0, right: 0 },
+        "bottom-left": { bottom: 0, left: 0 }
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: "absolute z-[4]",
+          style: {
+            width: `${finderSize}px`,
+            height: `${finderSize}px`,
+            ...positionStyles[position]
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "div",
+              {
+                className: "absolute inset-0",
+                style: {
+                  borderRadius: `${2 * cellSize}px`,
+                  border: `${cellSize}px solid var(--color-walletSelectItemBackground)`
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "div",
+              {
+                className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+                style: {
+                  width: `${3 * cellSize}px`,
+                  height: `${3 * cellSize}px`,
+                  borderRadius: `${0.5 * cellSize}px`,
+                  backgroundColor: "var(--color-walletSelectItemBackground)"
+                }
+              }
+            )
+          ]
+        }
+      );
+    };
+    const renderArenaLogo = () => {
+      const logoStart = Math.ceil(QR_GRID_SIZE / 2 - ARENA_GRID_SIZE / 2) * cellSize;
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          className: "absolute z-[4] flex items-center justify-center box-border",
+          style: {
+            width: `${arenaSize}px`,
+            height: `${arenaSize}px`,
+            left: `${logoStart}px`,
+            top: `${logoStart}px`,
+            borderRadius: `${cellSize}px`,
+            padding: `${cellSize / 2}px`
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "img",
+            {
+              src: logoBackground,
+              alt: "QR Code Logo",
+              className: "h-full w-full object-cover",
+              style: {
+                borderRadius: `${cellSize}px`
+              }
+            }
+          )
+        }
+      );
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        className: "relative overflow-hidden flex items-center justify-center",
+        style: {
+          width: size,
+          height: size,
+          borderRadius: `${2 * cellSize}px`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "svg",
+            {
+              className: "absolute inset-0 z-[3]",
+              width: size,
+              height: size,
+              viewBox: `0 0 ${QR_GRID_SIZE} ${QR_GRID_SIZE}`,
+              children: generateSkeletonDots()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 z-[100]",
+              style: {
+                background: "linear-gradient(90deg, transparent 50%, var(--color-walletSelectItemBackgroundHover), transparent)",
+                backgroundSize: "200% 100%",
+                transform: "scale(1.5) rotate(45deg)",
+                animation: "shimmer 1000ms linear infinite both"
+              }
+            }
+          ),
+          renderFinderPattern({ position: "top-left" }),
+          renderFinderPattern({ position: "top-right" }),
+          renderFinderPattern({ position: "bottom-left" }),
+          logoBackground && renderArenaLogo()
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_cuer.Cuer, { arena: logoBackground, value: uri });
+};
+
+// src/components/ConnectButton/index.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var transitionClassName = "transition-transform transition-[125] hover:scale-[1.03] transition-ease";
+var ConnectButton = ({
+  className,
+  label = "Connect Wallet",
+  accountStatus = "full",
+  chainStatus = "full",
+  showBalance = true
+}) => {
+  const {
+    isConnected,
+    isDisconnected,
+    displayAddress,
+    balance,
+    openConnectModal,
+    openAccountModal,
+    openChainModal,
+    chainIconUrl,
+    chainName,
+    currentChain,
+    activeConnector
+  } = useLunoWallet();
+  const { width: windowWidth } = useWindowSize();
+  const isLargeWindow = windowWidth && windowWidth > 768;
+  if (isDisconnected || !isConnected || !activeConnector) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => openConnectModal?.(),
+        className: cs(
+          "cursor-pointer font-semibold inline-flex items-center justify-center focus:outline-none",
+          "text-connectButtonText bg-connectButtonBackground shadow-button active:scale-[0.95]",
+          "rounded-connectButton",
+          transitionClassName,
+          "px-3.5 text-base leading-base min-h-[40px]",
+          className
+        ),
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cs("text-modalText flex items-stretch bg-transparent font-semibold text-base leading-base gap-3", className), children: [
+    chainStatus !== "none" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => openChainModal?.(),
+        className: cs(
+          "flex items-center rounded-currentNetworkButton cursor-pointer",
+          "bg-currentNetworkButtonBackground shadow-button",
+          "py-2 px-2.5 gap-1.5",
+          transitionClassName
+        ),
+        "aria-label": "Switch chain",
+        children: [
+          chainStatus === "full" || chainStatus === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChainIcon, { chainIconUrl, chainName, className: "w-[24px] h-[24px]" }) : null,
+          (chainStatus === "full" || chainStatus === "name") && isLargeWindow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: currentChain?.name || "Unknown Chain" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => openAccountModal?.(),
+        className: cs(
+          "flex items-center cursor-pointer rounded-connectButton bg-connectButtonBackground shadow-button",
+          transitionClassName
+        ),
+        "aria-label": "Open account modal",
+        children: [
+          showBalance && isLargeWindow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "p-2 pl-3", children: balance === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "animate-pulse rounded w-[80px] h-[20px] bg-accountActionItemBackgroundHover" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "", children: [
+            balance?.formattedTransferable || balance?.formattedTotal || 0,
+            "  ",
+            currentChain?.nativeCurrency?.symbol || ""
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cs(
+            "flex items-center bg-connectButtonInnerBackground border-2 border-connectButtonBackground rounded-connectButton gap-1.5 max-h-[40px]",
+            showBalance && isLargeWindow ? "bg-connectButtonInnerBackground py-1.5 px-2" : "bg-connectButtonBackground py-2 px-2.5"
+          ), children: [
+            accountStatus === "full" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "w-[24px] h-[24px]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: activeConnector.icon, alt: "luno" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "span",
+              {
+                "aria-label": "Wallet icon placeholder",
+                className: "",
+                children: displayAddress
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/SpiralAnimation/index.tsx
+var import_react18 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SpiralAnimation = ({
+  size = 160,
+  dotCount = 300,
+  duration = 3,
+  className = ""
+}) => {
+  const containerRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
+    if (!containerRef.current) return;
+    const DOT_RADIUS = 1;
+    const MARGIN = 2;
+    const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+    const CENTER = size / 2;
+    const MAX_RADIUS = CENTER - MARGIN - DOT_RADIUS;
+    const svgNS = "http://www.w3.org/2000/svg";
+    containerRef.current.innerHTML = "";
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", size.toString());
+    svg.setAttribute("height", size.toString());
+    svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
+    svg.style.display = "block";
+    containerRef.current.appendChild(svg);
+    for (let i = 0; i < dotCount; i++) {
+      const idx = i + 0.5;
+      const frac = idx / dotCount;
+      const r = Math.sqrt(frac) * MAX_RADIUS;
+      const theta = idx * GOLDEN_ANGLE;
+      const x = CENTER + r * Math.cos(theta);
+      const y = CENTER + r * Math.sin(theta);
+      const circle = document.createElementNS(svgNS, "circle");
+      circle.setAttribute("cx", x.toString());
+      circle.setAttribute("cy", y.toString());
+      circle.setAttribute("r", DOT_RADIUS.toString());
+      circle.setAttribute("fill", "currentColor");
+      circle.setAttribute("opacity", "0.6");
+      svg.appendChild(circle);
+      const animR = document.createElementNS(svgNS, "animate");
+      animR.setAttribute("attributeName", "r");
+      animR.setAttribute(
+        "values",
+        `${DOT_RADIUS * 0.5};${DOT_RADIUS * 1.8};${DOT_RADIUS * 0.5}`
+      );
+      animR.setAttribute("dur", `${duration}s`);
+      animR.setAttribute("begin", `${frac * duration}s`);
+      animR.setAttribute("repeatCount", "indefinite");
+      animR.setAttribute("calcMode", "spline");
+      animR.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
+      circle.appendChild(animR);
+      const animO = document.createElementNS(svgNS, "animate");
+      animO.setAttribute("attributeName", "opacity");
+      animO.setAttribute("values", "0.2;1;0.2");
+      animO.setAttribute("dur", `${duration}s`);
+      animO.setAttribute("begin", `${frac * duration}s`);
+      animO.setAttribute("repeatCount", "indefinite");
+      animO.setAttribute("calcMode", "spline");
+      animO.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
+      circle.appendChild(animO);
+    }
+  }, [size, dotCount, duration]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: cs("text-accentColor inline-flex w-full h-full justify-center align-center", className)
+    }
+  );
+};
+
+// src/components/ConnectModal/WalletView.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var WalletView = import_react19.default.memo(({ selectedConnector, onConnect, qrCode, isWide, connectState }) => {
+  const showQRCode = selectedConnector?.hasConnectionUri();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cs(
+    "flex flex-col items-center",
+    isWide ? "w-[400px] p-4 min-h-[472px]" : "justify-center w-full min-h-[400px]"
+  ), children: [
+    isWide && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        DialogClose,
+        {
+          className: "z-10 w-[30px] h-[30px] flex items-center justify-center cursor-pointer rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover  transition-colors duration-200",
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Close_default, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cs(
+      "flex items-center py-12 flex-col grow justify-start",
+      selectedConnector && showQRCode ? "max-w-[220px]" : "max-w-[360px]"
+    ), children: selectedConnector ? showQRCode ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(QRCode, { size: 220, logoBackground: selectedConnector.icon, uri: qrCode }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "text-secondaryFont leading-secondary font-[500] text-center", children: [
+        "Scan the QR Code with ",
+        selectedConnector.id === "nova" ? "the Nova app" : "your phone"
+      ] }),
+      selectedConnector.links?.browserExtension ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "p",
+        {
+          onClick: () => window.open(selectedConnector.links.browserExtension),
+          className: "cursor-pointer pt-[16px] text-base leading-base text-accentColor font-bold text-center",
+          children: [
+            "Don\u2018t have ",
+            selectedConnector.name,
+            "?"
+          ]
+        }
+      ) : qrCode ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Copy, { className: "text-sm leading-sm text-accentColor", copyText: qrCode, label: "Copy Link" }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[102px] h-[102px] pb-[16px]", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { src: selectedConnector.icon, className: "w-full h-full", alt: "" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "pb-[10px] text-primary leading-primary text-modalFont font-[600]", children: [
+        "Opening ",
+        selectedConnector.name,
+        "..."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "pb-[10px] text-secondaryFont text-secondary leading-secondary font-[500] text-center", children: "Confirm connection in the extension" }),
+      connectState.isConnecting && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loading_default, { className: "w-[24px] h-[24px] text-secondaryFont animate-[spin_3s_linear_infinite]" }),
+      !selectedConnector.isInstalled() && selectedConnector.links.browserExtension && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        "p",
+        {
+          onClick: () => window.open(selectedConnector.links.browserExtension),
+          className: "cursor-pointer pt-[16px] text-base leading-base text-accentColor font-bold text-center",
+          children: [
+            "Don\u2018t have ",
+            selectedConnector.name,
+            "?"
+          ]
+        }
+      ),
+      !connectState.isConnecting && connectState.isError && selectedConnector.isInstalled() && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "button",
+        {
+          className: cs(
+            "rounded-connectButton focus:outline-none py-[4px] px-[12px] cursor-pointer font-[600] text-primaryFont bg-connectButtonBackground shadow-connectButton active:scale-[0.95]",
+            transitionClassName
+          ),
+          onClick: () => onConnect(selectedConnector),
+          children: "Retry"
+        }
+      )
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-[160px] h-[160px] mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SpiralAnimation, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "cursor-pointer pb-[16px] text-base leading-base text-accentColor font-bold text-center", children: "New to wallets?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-modalTextSecondary text-sm leading-sm font-medium text-center", children: "Your gateway to the decentralized world Connect a wallet to get started" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {})
+  ] });
+});
+
+// src/components/ConnectModal/ConnectOptions.tsx
+var import_react20 = __toESM(require("react"), 1);
+var import_react21 = require("@luno-kit/react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ConnectOptions = import_react20.default.memo(({ onConnect }) => {
+  const connectors = (0, import_react21.useConnectors)();
+  if ((0, import_react21.isMobileDevice)()) {
+    const filteredConnectors = connectors.filter((i) => i.links.deepLink);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col items-start gap-1 w-full", children: filteredConnectors.map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ConnectorItem, { connector: i, onConnect: () => onConnect(i) }, `${i.id}-${i.name}`)) });
+  }
+  const installedConnectors = connectors.filter((c) => c.isInstalled());
+  const moreConnectors = connectors.filter((c) => !c.isInstalled());
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-start gap-4 w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-start gap-3 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-base text-modalText font-semibold leading-base", children: "Installed" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col items-start gap-1.5 w-full", children: installedConnectors.map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ConnectorItem, { connector: i, onConnect: () => onConnect(i) }, i.id)) })
+    ] }),
+    moreConnectors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-start gap-3 w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-base text-modalText font-semibold leading-base", children: "More" }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex flex-col items-start gap-1 w-full", children: moreConnectors.map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ConnectorItem, { connector: i, onConnect: () => onConnect(i) }, i.id)) })
+    ] })
+  ] });
+});
+var ConnectorItem = import_react20.default.memo(({ connector, onConnect }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "button",
+    {
+      onClick: onConnect,
+      className: cs(
+        "cursor-pointer bg-walletSelectItemBackground p-2 w-full flex items-center gap-3 rounded-walletSelectItem border-none",
+        "hover:bg-walletSelectItemBackgroundHover transition-transform active:scale-[0.95]",
+        "text-left"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-[24px] h-[24px]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "img",
+          {
+            src: connector.icon,
+            alt: connector.name,
+            className: "w-full h-full"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold leading-base text-base text-modalText", children: connector.name })
+      ]
+    }
+  );
+});
+
+// src/components/ConnectModal/index.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ConnectModal = ({
+  size = "wide"
+}) => {
+  const { isOpen, close } = useConnectModal();
+  const { connectAsync, reset: resetConnect, isPending: isConnecting, isError: connectError } = (0, import_react23.useConnect)();
+  const [selectedConnector, setSelectedConnector] = (0, import_react22.useState)(null);
+  const [qrCode, setQrCode] = (0, import_react22.useState)();
+  const { width: windowWidth } = useWindowSize();
+  const isLargeWindow = windowWidth && windowWidth > 768;
+  const isWide = !!(size === "wide" && isLargeWindow);
+  const {
+    containerRef,
+    currentViewRef,
+    resetView,
+    handleViewChange,
+    currentView
+  } = useAnimatedViews({ initialView: "Connect Wallet" /* connectOptions */ });
+  const onQrCode = async (connector) => {
+    const uri = await connector.getConnectionUri();
+    setQrCode(uri);
+  };
+  const handleConnect = async (connector) => {
+    if ((0, import_react23.isMobileDevice)() && connector.links.deepLink) {
+      try {
+        await connectAsync({ connectorId: connector.id });
+        _onOpenChange(false);
+        return;
+      } catch (error) {
+        window.location.href = `${connector.links.deepLink}?url=${window.location.href}`;
+        return;
+      }
+    }
+    !isWide && handleViewChange("walletView" /* walletView */);
+    setSelectedConnector(connector);
+    setQrCode(void 0);
+    if (connector.hasConnectionUri()) {
+      onQrCode(connector);
+    }
+    await connectAsync({ connectorId: connector.id });
+    _onOpenChange(false);
+  };
+  const _onOpenChange = (open) => {
+    !open && close();
+    resetConnect();
+    resetView();
+    setSelectedConnector(null);
+    setQrCode(void 0);
+  };
+  const viewComponents = (0, import_react22.useMemo)(() => {
+    return {
+      ["Connect Wallet" /* connectOptions */]: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ConnectOptions, { onConnect: handleConnect }),
+      ["walletView" /* walletView */]: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        WalletView,
+        {
+          connectState: { isConnecting, isError: connectError },
+          isWide,
+          selectedConnector,
+          qrCode,
+          onConnect: handleConnect
+        }
+      )
+    };
+  }, [isWide, selectedConnector, qrCode, handleConnect, isConnecting, connectError]);
+  (0, import_react22.useEffect)(() => {
+    if (isWide && currentView === "walletView" /* walletView */) {
+      handleViewChange("Connect Wallet" /* connectOptions */);
+    }
+  }, [isWide, currentView]);
+  (0, import_react22.useEffect)(() => {
+    if (isWide && currentView === "walletView" /* walletView */) {
+      handleViewChange("Connect Wallet" /* connectOptions */);
+    }
+  }, [isWide, currentView]);
+  (0, import_react22.useEffect)(() => {
+    if (isWide && currentView === "walletView" /* walletView */) {
+      handleViewChange("Connect Wallet" /* connectOptions */);
+    }
+  }, [isWide, currentView]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialog, { open: isOpen, onOpenChange: _onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cs("flex items-stretch justify-between w-full md:max-h-[504px] md:max-w-[724px]"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cs(
+      "flex flex-col items-start py-4 px-5 md:min-w-[360px] w-full md:w-auto",
+      isWide && "border-r-[1px] border-r-solid border-r-separatorLine"
+    ), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cs("flex items-center justify-between w-full", !isWide && "pb-4"), children: [
+        currentView === "Connect Wallet" /* connectOptions */ ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { className: cs("text-lg leading-lg text-modalText font-bold", isWide && "pb-6"), children: "Connect Wallet" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              className: "flex items-center justify-center w-[30px] h-[30px] cursor-pointer rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover  transition-colors duration-200",
+              onClick: () => handleViewChange("Connect Wallet" /* connectOptions */),
+              "aria-label": "Back",
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Back_default, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            DialogTitle,
+            {
+              className: cs(
+                "text-lg leading-lg text-modalText font-semibold transition-opacity duration-300",
+                !selectedConnector?.hasConnectionUri() && "sr-only"
+              ),
+              children: selectedConnector?.hasConnectionUri() && "Scan by your phone"
+            }
+          )
+        ] }),
+        !isWide && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          DialogClose,
+          {
+            className: "z-10 w-[30px] h-[30px] flex items-center justify-center cursor-pointer rounded-modalControlButton border-none hover:bg-modalControlButtonBackgroundHover  transition-colors duration-200",
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Close_default, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          className: "relative overflow-hidden w-full",
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: currentViewRef, children: viewComponents[currentView] })
+        }
+      )
+    ] }),
+    isWide && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      WalletView,
+      {
+        connectState: { isConnecting, isError: connectError },
+        isWide,
+        selectedConnector,
+        qrCode,
+        onConnect: handleConnect
+      }
+    )
+  ] }) });
+};
+
+// src/providers/LunoKitProvider.tsx
+var import_react26 = require("react");
+var import_react27 = require("@luno-kit/react");
+var import_react_query = require("@tanstack/react-query");
+
+// src/theme/context.tsx
+var import_react25 = require("react");
+
+// src/hooks/useCSSVariableInjection.ts
+var import_react24 = require("react");
+var ALL_THEME_VARS = [
+  "--color-accentColor",
+  "--color-walletSelectItemBackground",
+  "--color-walletSelectItemBackgroundHover",
+  "--color-walletSelectItemText",
+  "--color-connectButtonBackground",
+  "--color-connectButtonInnerBackground",
+  "--color-connectButtonText",
+  "--color-accountActionItemBackground",
+  "--color-accountActionItemBackgroundHover",
+  "--color-accountActionItemText",
+  "--color-accountSelectItemBackground",
+  "--color-accountSelectItemBackgroundHover",
+  "--color-accountSelectItemText",
+  "--color-currentNetworkButtonBackground",
+  "--color-currentNetworkButtonText",
+  "--color-networkSelectItemBackground",
+  "--color-networkSelectItemBackgroundHover",
+  "--color-networkSelectItemText",
+  "--color-navigationButtonBackground",
+  "--color-separatorLine",
+  "--color-modalBackground",
+  "--color-modalBackdrop",
+  "--color-modalBorder",
+  "--color-modalText",
+  "--color-modalTextSecondary",
+  "--color-modalControlButtonBackgroundHover",
+  "--color-modalControlButtonText",
+  "--color-success",
+  "--color-successForeground",
+  "--color-warning",
+  "--color-warningForeground",
+  "--color-error",
+  "--color-errorForeground",
+  "--color-info",
+  "--color-infoForeground",
+  "--color-skeleton",
+  "--color-cutLine",
+  "--font-body",
+  "--font-heading",
+  "--font-mono",
+  "--radius-walletSelectItem",
+  "--radius-connectButton",
+  "--radius-modalControlButton",
+  "--radius-accountActionItem",
+  "--radius-accountSelectItem",
+  "--radius-currentNetworkButton",
+  "--radius-networkSelectItem",
+  "--radius-modal",
+  "--radius-modalMobile",
+  "--shadow-button",
+  "--shadow-modal",
+  "--blur-modalOverlay"
+];
+var useCSSVariableInjection = (themeInfo, themeMode) => {
+  (0, import_react24.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const root = document.documentElement;
+    if (themeInfo.type === "complete" && themeInfo.completeTheme) {
+      Object.entries(themeInfo.completeTheme.colors).forEach(([key, value]) => {
+        if (value) {
+          root.style.setProperty(`--color-${key}`, value);
+        }
+      });
+      Object.entries(themeInfo.completeTheme.fonts).forEach(([key, value]) => {
+        if (value) {
+          root.style.setProperty(`--font-${key}`, value);
+        }
+      });
+      Object.entries(themeInfo.completeTheme.radii).forEach(([key, value]) => {
+        if (value) {
+          root.style.setProperty(`--radius-${key}`, value);
+        }
+      });
+      Object.entries(themeInfo.completeTheme.shadows).forEach(([key, value]) => {
+        if (value) {
+          root.style.setProperty(`--shadow-${key}`, value);
+        }
+      });
+      Object.entries(themeInfo.completeTheme.blurs).forEach(([key, value]) => {
+        if (value) {
+          root.style.setProperty(`--blur-${key}`, value);
+        }
+      });
+      root.removeAttribute("data-theme");
+    } else if (themeInfo.type === "partial" && themeInfo.partialOverrides) {
+      root.setAttribute("data-theme", themeMode);
+      const hasOverrides = Object.keys(themeInfo.partialOverrides).length > 0;
+      if (hasOverrides) {
+        ALL_THEME_VARS.forEach((varName) => {
+          root.style.removeProperty(varName);
+        });
+        if (themeInfo.partialOverrides.colors) {
+          Object.entries(themeInfo.partialOverrides.colors).forEach(([key, value]) => {
+            if (value) {
+              root.style.setProperty(`--color-${key}`, value);
+            }
+          });
+        }
+        if (themeInfo.partialOverrides.fonts) {
+          Object.entries(themeInfo.partialOverrides.fonts).forEach(([key, value]) => {
+            if (value) {
+              root.style.setProperty(`--font-${key}`, value);
+            }
+          });
+        }
+        if (themeInfo.partialOverrides.radii) {
+          Object.entries(themeInfo.partialOverrides.radii).forEach(([key, value]) => {
+            if (value) {
+              root.style.setProperty(`--radius-${key}`, value);
+            }
+          });
+        }
+        if (themeInfo.partialOverrides.shadows) {
+          Object.entries(themeInfo.partialOverrides.shadows).forEach(([key, value]) => {
+            if (value) {
+              root.style.setProperty(`--shadow-${key}`, value);
+            }
+          });
+        }
+        if (themeInfo.partialOverrides.blurs) {
+          Object.entries(themeInfo.partialOverrides.blurs).forEach(([key, value]) => {
+            if (value) {
+              root.style.setProperty(`--blur-${key}`, value);
+            }
+          });
+        }
+      }
+    } else {
+      root.setAttribute("data-theme", themeMode);
+      ALL_THEME_VARS.forEach((varName) => {
+        root.style.removeProperty(varName);
+      });
+    }
+  }, [themeInfo, themeMode]);
+};
+
+// src/theme/context.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var THEME_STORAGE_KEY = "luno.lastThemePreference";
+var saveThemePreference = (preference) => {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(preference));
+  } catch (e) {
+  }
+};
+var ThemeContext = (0, import_react25.createContext)(void 0);
+var isCompleteTheme = (theme) => {
+  return "colors" in theme && "fonts" in theme && "radii" in theme && "shadows" in theme && "blurs" in theme;
+};
+var useSystemTheme = () => {
+  const [systemTheme, setSystemTheme] = (0, import_react25.useState)(() => {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  (0, import_react25.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const updateTheme = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    updateTheme(mediaQuery);
+    mediaQuery.addEventListener("change", updateTheme);
+    return () => mediaQuery.removeEventListener("change", updateTheme);
+  }, []);
+  return systemTheme;
+};
+var ThemeProvider = ({
+  children,
+  theme: themeOverrides
+}) => {
+  const systemTheme = useSystemTheme();
+  const [themeMode, setThemeMode] = (0, import_react25.useState)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem(THEME_STORAGE_KEY);
+        if (saved) {
+          const preference = JSON.parse(saved);
+          if (preference?.isAuto) {
+            return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+          } else if (preference?.preferredTheme) {
+            return preference.preferredTheme;
+          }
+        }
+      } catch (e) {
+      }
+    }
+    if (!themeOverrides || isCompleteTheme(themeOverrides)) {
+      return "light";
+    }
+    const overrides = themeOverrides;
+    return overrides.defaultMode || "light";
+  });
+  const [isAutoMode, setIsAutoMode] = (0, import_react25.useState)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem(THEME_STORAGE_KEY);
+        if (saved) {
+          const preference = JSON.parse(saved);
+          return preference?.isAuto ?? false;
+        }
+      } catch (e) {
+      }
+    }
+    if (!themeOverrides || isCompleteTheme(themeOverrides)) {
+      return false;
+    }
+    const overrides = themeOverrides;
+    return overrides.autoMode ?? false;
+  });
+  const themeInfo = (0, import_react25.useMemo)(() => {
+    if (!themeOverrides) {
+      return { type: "default", completeTheme: null, partialOverrides: null };
+    }
+    if (isCompleteTheme(themeOverrides)) {
+      return { type: "complete", completeTheme: themeOverrides, partialOverrides: null };
+    }
+    const overrides = themeOverrides;
+    if (overrides.theme) {
+      return { type: "complete", completeTheme: overrides.theme, partialOverrides: null };
+    }
+    let partialOverrides = null;
+    if (themeMode === "light" && overrides.light) {
+      partialOverrides = overrides.light;
+    } else if (themeMode === "dark" && overrides.dark) {
+      partialOverrides = overrides.dark;
+    } else {
+      partialOverrides = { ...overrides };
+    }
+    return { type: "partial", completeTheme: null, partialOverrides };
+  }, [themeMode, themeOverrides]);
+  const currentTheme = (0, import_react25.useMemo)(() => {
+    return themeInfo.type === "complete" ? themeInfo.completeTheme : null;
+  }, [themeInfo]);
+  useCSSVariableInjection(themeInfo, themeMode);
+  const setThemeChoice = (0, import_react25.useCallback)((choice) => {
+    const isAuto = choice === "auto";
+    setIsAutoMode(isAuto);
+    if (isAuto) {
+      setThemeMode(systemTheme || "light");
+    } else {
+      setThemeMode(choice);
+    }
+    const preference = {
+      isAuto,
+      ...isAuto ? {} : { preferredTheme: choice }
+    };
+    saveThemePreference(preference);
+  }, [systemTheme]);
+  (0, import_react25.useEffect)(() => {
+    if (isAutoMode) {
+      setThemeMode(systemTheme || "light");
+    }
+  }, [systemTheme, isAutoMode]);
+  const contextValue = (0, import_react25.useMemo)(() => ({
+    themeMode,
+    setThemeChoice,
+    currentTheme
+  }), [themeMode, setThemeChoice, currentTheme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ThemeContext.Provider, { value: contextValue, children });
+};
+var useLunoTheme = () => {
+  const context = (0, import_react25.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useLunoTheme must be used within a ThemeProvider (which is part of LunoKitProvider)");
+  }
+  return context;
+};
+
+// src/providers/LunoKitProvider.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var LunoKitProvider = ({
+  children,
+  config,
+  queryClientConfig,
+  theme
+}) => {
+  const [queryClient] = (0, import_react26.useState)(() => new import_react_query.QueryClient(queryClientConfig));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react27.LunoProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ModalProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "font-base luno-kit", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RenderModals, { modalSize: config.modalSize })
+  ] }) }) }) });
+};
+var RenderModals = ({ modalSize }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ConnectModal, { size: modalSize }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AccountDetailsModal, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ChainModal, {})
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConnectButton,
+  LunoKitProvider,
+  useLunoTheme
+});
+//# sourceMappingURL=index.cjs.map