@meshsdk/react 1.8.5 → 1.8.7

package/dist/index.cjs

@@ -23457,7 +23457,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/cardano-wallet/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/common/button.tsx
 var React = __toESM(require("react"), 1);
@@ -24057,6 +24057,10 @@ var screens = {
   burner: {
     title: "Burner Wallet",
     subtitle: "Instantly create a new burner wallet. No seed phrase required, keys are generated on your device."
+  },
+  webauthn: {
+    title: "Passkey",
+    subtitle: "Derive self-custody wallet on Chrome, Safari, or Firefox browsers on Android, iOS, macOS, and Windows devices, or using password managers."
   }
 };
 
@@ -24209,10 +24213,47 @@ function IconDownload() {
   );
 }
 
-// src/common/icons/icon-monitor-smartphone.tsx
+// src/common/icons/icon-fingerprint.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function IconMonitorSmartphone() {
+function IconFingerprint() {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: {
+        color: "#ffadff",
+        width: "24px",
+        height: "24px",
+        strokeWidth: "1px"
+      },
+      className: "hover:mesh-fill-white",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M14 13.12c0 2.38 0 6.38-1 8.88" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M17.29 21.02c.12-.6.43-2.3.5-3.02" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2 12a10 10 0 0 1 18-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M2 16h.01" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M21.8 16c.2-2 .131-5.354 0-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M8.65 22c.21-.66.45-1.32.57-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M9 6.8a6 6 0 0 1 9 5.2v2" })
+      ]
+    }
+  );
+}
+
+// src/common/icons/icon-monitor-smartphone.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function IconMonitorSmartphone() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -24231,10 +24272,10 @@ function IconMonitorSmartphone() {
         strokeWidth: "1px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 19v-3.96 3.15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M7 19h5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "6", height: "10", x: "16", y: "12", rx: "2" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M10 19v-3.96 3.15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 19h5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "6", height: "10", x: "16", y: "12", rx: "2" })
       ]
     }
   );
@@ -24243,11 +24284,11 @@ function IconMonitorSmartphone() {
 // src/common/tooltip.tsx
 var React4 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   TooltipPrimitive.Content,
   {
     ref,
@@ -24262,55 +24303,66 @@ var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/cardano-wallet/wallet-icon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function WalletIcon({
   icon,
   name,
   action,
   iconReactNode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { delayDuration: 0, defaultOpen: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { delayDuration: 0, defaultOpen: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         className: "mesh-flex mesh-items-center mesh-justify-center mesh-rounded-lg mesh-w-10 mesh-h-10 mesh-bg-neutral-50 mesh-border mesh-border-zinc-700 hover:mesh-border-zinc-200 mesh-cursor-pointer",
         onClick: action,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
           iconReactNode && iconReactNode
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: name }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: name }) })
   ] });
 }
 
 // src/cardano-wallet/screen-main.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function ScreenMain({
   metamask,
   extensions,
   setOpen,
   setScreen,
   cardanoPeerConnect,
-  burnerWallet
+  burnerWallet,
+  webauthn
 }) {
   const wallets = useWalletList({ metamask });
-  const { connect } = useWallet();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mesh-grid mesh-gap-4 mesh-py-4 mesh-grid-cols-5 mesh-place-items-center mesh-gap-y-8", children: [
-    wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const { connect: connect2 } = useWallet();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mesh-grid mesh-gap-4 mesh-py-4 mesh-grid-cols-5 mesh-place-items-center mesh-gap-y-8", children: [
+    wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WalletIcon,
       {
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect(wallet.id, extensions);
+          connect2(wallet.id, extensions);
           setOpen(false);
         }
       },
       index
     )),
-    cardanoPeerConnect && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    webauthn && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      WalletIcon,
+      {
+        iconReactNode: IconFingerprint(),
+        name: screens.webauthn.title,
+        action: () => {
+          setScreen("webauthn");
+        }
+      }
+    ),
+    cardanoPeerConnect && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WalletIcon,
       {
         iconReactNode: IconMonitorSmartphone(),
@@ -24320,7 +24372,7 @@ function ScreenMain({
         }
       }
     ),
-    burnerWallet && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    burnerWallet && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WalletIcon,
       {
         iconReactNode: IconBookDashed(),
@@ -24330,7 +24382,7 @@ function ScreenMain({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       WalletIcon,
       {
         iconReactNode: IconDownload(),
@@ -24349,7 +24401,7 @@ function ScreenMain({
 // src/cardano-wallet/screen-p2p.tsx
 var import_react12 = require("react");
 var import_cardano_peer_connect = __toESM(require_dist(), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ScreenP2P({
   cardanoPeerConnect,
   setOpen
@@ -24358,7 +24410,7 @@ function ScreenP2P({
   const qrCodeField = (0, import_react12.useRef)(null);
   const [address, setAddress] = (0, import_react12.useState)("");
   const [copied, setCopied] = (0, import_react12.useState)(false);
-  const { connect } = useWallet();
+  const { connect: connect2 } = useWallet();
   (0, import_react12.useEffect)(() => {
     if (cardanoPeerConnect) {
       if (dAppConnect.current === null) {
@@ -24369,7 +24421,7 @@ function ScreenP2P({
           },
           announce: cardanoPeerConnect.announce,
           onApiInject: async (name, address2) => {
-            await connect(name);
+            await connect2(name);
             setOpen(false);
           },
           onApiEject: (name, address2) => {
@@ -24393,9 +24445,9 @@ function ScreenP2P({
       }
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mesh-flex mesh-flex-col mesh-items-center mesh-justify-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { marginTop: 16, marginBottom: 16 }, ref: qrCodeField }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "mesh-flex mesh-flex-col mesh-items-center mesh-justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { marginTop: 16, marginBottom: 16 }, ref: qrCodeField }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       Button,
       {
         variant: "outline",
@@ -24410,8 +24462,127 @@ function ScreenP2P({
   ] });
 }
 
+// src/cardano-wallet/screen-webauthn.tsx
+var import_react13 = require("react");
+var import_wallet4 = require("@meshsdk/wallet");
+
+// src/common/input.tsx
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Input = React5.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "input",
+      {
+        type,
+        className: cn(
+          "mesh-flex mesh-h-9 mesh-w-full mesh-rounded-md mesh-border mesh-border-zinc-200 mesh-bg-transparent mesh-px-3 mesh-py-1 mesh-text-sm mesh-shadow-sm mesh-transition-colors file:mesh-border-0 file:mesh-bg-transparent file:mesh-text-sm file:mesh-font-medium placeholder:mesh-text-zinc-500 focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-cursor-not-allowed disabled:mesh-opacity-50 dark:mesh-border-zinc-800 dark:mesh-placeholder:text-zinc-400 dark:mesh-focus-visible:ring-zinc-300",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/common/label.tsx
+var React6 = __toESM(require("react"), 1);
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority2.cva)(
+  "mesh-text-sm mesh-font-medium mesh-leading-none peer-disabled:mesh-cursor-not-allowed peer-disabled:mesh-opacity-70"
+);
+var Label2 = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label2.displayName = LabelPrimitive.Root.displayName;
+
+// src/cardano-wallet/screen-webauthn.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ScreenWebauthn({
+  url,
+  networkId,
+  provider,
+  setOpen
+}) {
+  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const [userName, setUserName] = (0, import_react13.useState)("");
+  const [password, setPassword] = (0, import_react13.useState)("");
+  const { setWallet } = useWallet();
+  function createWallet(root) {
+    setTimeout(() => {
+      const wallet = new import_wallet4.MeshWallet({
+        networkId,
+        fetcher: provider,
+        submitter: provider,
+        key: {
+          type: "root",
+          bech32: root
+        }
+      });
+      setWallet(wallet, screens.webauthn.title);
+      setLoading(false);
+      setOpen(false);
+    }, 500);
+  }
+  async function handleConnect() {
+    setLoading(true);
+    const res = await (0, import_wallet4.connect)({ username: userName, password, serverUrl: url });
+    if (res.success && res.wallet) {
+      createWallet(res.wallet.bech32PrivateKey);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mesh-flex mesh-flex-row mesh-flex-gap-4 mesh-items-center mesh-justify-center", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: "Connecting wallet..." }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mesh-flex mesh-flex-col mesh-gap-6 mesh-w-full mesh-mx-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mesh-grid mesh-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label2, { htmlFor: "username", children: "Username" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Input,
+        {
+          id: "username",
+          type: "username",
+          placeholder: "adalovelace",
+          value: userName,
+          onChange: (e2) => setUserName(e2.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mesh-text-gray-500 mesh-text-xs", children: "Unique to the application you are connecting." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "mesh-grid mesh-gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mesh-flex mesh-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label2, { htmlFor: "password", children: "Unique Code" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Input,
+        {
+          id: "password",
+          type: "password",
+          placeholder: "********",
+          value: password,
+          onChange: (e2) => setPassword(e2.target.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "mesh-text-gray-500 mesh-text-xs", children: "Additional security to derive your wallet." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Button,
+      {
+        className: "mesh-w-full",
+        onClick: () => handleConnect(),
+        disabled: !userName || userName.length < 6,
+        children: "Connect"
+      }
+    )
+  ] }) }) });
+}
+
 // src/cardano-wallet/index.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
@@ -24419,26 +24590,27 @@ var CardanoWallet = ({
   extensions = [],
   metamask = void 0,
   cardanoPeerConnect = void 0,
-  burnerWallet = void 0
+  burnerWallet = void 0,
+  webauthn = void 0
 }) => {
-  const [open, setOpen] = (0, import_react13.useState)(false);
-  const [screen, setScreen] = (0, import_react13.useState)("main");
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [screen, setScreen] = (0, import_react14.useState)("main");
   const { wallet, connected } = useWallet();
-  (0, import_react13.useEffect)(() => {
-    if (connected && wallet) {
+  (0, import_react14.useEffect)(() => {
+    if (connected) {
       if (onConnected) onConnected();
     }
   }, [connected, wallet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Dialog, { open, onOpenChange: setOpen, children: [
-    !connected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "outline", className: "mesh-text-white", children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ConnectedButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog, { open, onOpenChange: setOpen, children: [
+    !connected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "outline", className: "mesh-text-white", children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ConnectedButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       DialogContent,
       {
         className: "sm:mesh-max-w-[425px]",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Header, { screen, setScreen }),
-          screen == "main" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Header, { screen, setScreen }),
+          screen == "main" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ScreenMain,
             {
               metamask,
@@ -24446,17 +24618,18 @@ var CardanoWallet = ({
               setOpen,
               setScreen,
               cardanoPeerConnect: cardanoPeerConnect != void 0,
-              burnerWallet: burnerWallet != void 0
+              burnerWallet: burnerWallet != void 0,
+              webauthn: webauthn != void 0
             }
           ),
-          screen == "p2p" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          screen == "p2p" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ScreenP2P,
             {
               cardanoPeerConnect,
               setOpen
             }
           ),
-          screen == "burner" && burnerWallet && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          screen == "burner" && burnerWallet && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             ScreenBurner,
             {
               networkId: burnerWallet.networkId,
@@ -24464,7 +24637,16 @@ var CardanoWallet = ({
               setOpen
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Footer, {})
+          screen == "webauthn" && webauthn && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            ScreenWebauthn,
+            {
+              url: webauthn.url,
+              networkId: webauthn.networkId,
+              provider: webauthn.provider,
+              setOpen
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Footer, {})
         ]
       }
     )
@@ -24474,25 +24656,25 @@ function Header({
   screen,
   setScreen
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DialogHeader, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DialogTitle, { className: "mesh-flex mesh-justify-between", children: [
-      screen != "main" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { onClick: () => setScreen("main"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronRight, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { width: "24px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: screens[screen].title }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { width: "24px" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogHeader, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogTitle, { className: "mesh-flex mesh-justify-between", children: [
+      screen != "main" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { onClick: () => setScreen("main"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconChevronRight, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { width: "24px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: screens[screen].title }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { style: { width: "24px" } })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogDescription, { children: screens[screen].subtitle && screens[screen].subtitle })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogDescription, { children: screens[screen].subtitle && screens[screen].subtitle })
   ] });
 }
 function Footer() {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DialogFooter, { className: "mesh-justify-center mesh-text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogFooter, { className: "mesh-justify-center mesh-text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "a",
     {
       href: "https://meshjs.dev/",
       target: "_blank",
       className: "mesh-grow mesh-flex mesh-gap-1 mesh-items-center mesh-justify-center mesh-text-zinc-500 hover:mesh-text-white mesh-fill-zinc-500 hover:mesh-fill-white",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "", children: "Powered by" }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "", children: "Powered by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "svg",
           {
             width: 24,
@@ -24500,31 +24682,31 @@ function Footer() {
             enableBackground: "new 0 0 300 200",
             viewBox: "0 0 300 200",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "", children: "Mesh SDK" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "", children: "Mesh SDK" })
       ]
     }
   ) });
 }
 
 // src/mesh-badge/mesh-logo.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var MeshLogo = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var MeshLogo = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "svg",
   {
     className: "mesh-h-16 mesh-p-2",
     fill: "currentColor",
     viewBox: "0 0 300 200",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" })
   }
 );
 
 // src/mesh-badge/index.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
   "a",
   {
     className: `mesh-flex mesh-max-w-fit mesh-flex-col mesh-items-center mesh-rounded-md mesh-border mesh-border-solid mesh-border-current mesh-p-1 mesh-text-xl mesh-font-semibold mesh-no-underline ${isDark ? `mesh-bg-neutral-950	mesh-text-neutral-50` : `mesh-bg-neutral-50	mesh-text-neutral-950`}`,
@@ -24536,21 +24718,21 @@ var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime17
     rel: "noopener noreferrer",
     target: "_blank",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MeshLogo, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MeshLogo, {}),
       "Mesh"
     ]
   }
 );
 
 // src/stake-button/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_transaction = require("@meshsdk/transaction");
 
 // src/cardano-wallet-dropdown/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/common/button-dropdown.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ButtonDropdown({
   children,
   isDarkMode = false,
@@ -24559,7 +24741,7 @@ function ButtonDropdown({
   onMouseEnter,
   onMouseLeave
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "button",
     {
       className: `mesh-mr-menu-list mesh-flex mesh-w-60 mesh-items-center mesh-justify-center mesh-rounded-t-md mesh-border mesh-px-4 mesh-py-2 mesh-text-lg mesh-font-normal mesh-shadow-sm ${isDarkMode ? `mesh-bg-neutral-950	mesh-text-neutral-50` : `mesh-bg-neutral-50	mesh-text-neutral-950`}`,
@@ -24572,21 +24754,21 @@ function ButtonDropdown({
 }
 
 // src/cardano-wallet-dropdown/menu-item.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function MenuItem({
   icon,
   label,
   action,
   active
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: "mesh-flex mesh-cursor-pointer mesh-items-center mesh-px-4 mesh-py-2 mesh-opacity-80 hover:mesh-opacity-100 mesh-h-16",
       onClick: action,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { className: "mesh-pr-2 mesh-m-1 mesh-h-8", src: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "mesh-mr-menu-item mesh-text-xl mesh-font-normal mesh-text-neutral-700 hover:mesh-text-black", children: label.split(" ").map((word) => {
+        icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("img", { className: "mesh-pr-2 mesh-m-1 mesh-h-8", src: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "mesh-mr-menu-item mesh-text-xl mesh-font-normal mesh-text-neutral-700 hover:mesh-text-black", children: label.split(" ").map((word) => {
           return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
         }).join(" ") })
       ]
@@ -24595,8 +24777,8 @@ function MenuItem({
 }
 
 // src/cardano-wallet-dropdown/chevron-down.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "svg",
   {
     className: "mesh-m-2 mesh-h-6",
@@ -24605,7 +24787,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     viewBox: "0 0 24 24",
     stroke: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "path",
       {
         strokeLinecap: "round",
@@ -24618,7 +24800,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
 );
 
 // src/cardano-wallet-dropdown/wallet-balance.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var WalletBalance = ({
   connected,
   connecting,
@@ -24626,22 +24808,22 @@ var WalletBalance = ({
   wallet
 }) => {
   const lovelace = useLovelace();
-  return connected && lovelace && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mesh-m-2 mesh-h-6", src: wallet.icon }),
+  return connected && lovelace && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { className: "mesh-m-2 mesh-h-6", src: wallet.icon }),
     "\u20B3",
     " ",
     parseInt((parseInt(lovelace, 10) / 1e6).toString(), 10),
     ".",
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mesh-text-xs", children: lovelace.substring(lovelace.length - 6) })
-  ] }) : connected && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { className: "mesh-m-2 mesh-h-6", src: wallet.icon }) }) : connecting ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: "Connecting..." }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "mesh-text-xs", children: lovelace.substring(lovelace.length - 6) })
+  ] }) : connected && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { className: "mesh-m-2 mesh-h-6", src: wallet.icon }) }) : connecting ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: "Connecting..." }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     label,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronDown, {})
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChevronDown, {})
   ] });
 };
 
 // src/cardano-wallet-dropdown/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var CardanoWallet2 = ({
   label = "Connect Wallet",
   onConnected = void 0,
@@ -24650,32 +24832,32 @@ var CardanoWallet2 = ({
   extensions = [],
   cardanoPeerConnect = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = (0, import_react14.useState)(false);
-  const [hideMenuList, setHideMenuList] = (0, import_react14.useState)(true);
-  const { connect, connecting, connected, disconnect, name } = useWallet();
+  const [isDarkMode, setIsDarkMode] = (0, import_react15.useState)(false);
+  const [hideMenuList, setHideMenuList] = (0, import_react15.useState)(true);
+  const { connect: connect2, connecting, connected, disconnect, name } = useWallet();
   const wallets = useWalletList({ metamask });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (connected && onConnected) {
       onConnected();
     }
   }, [connected]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setIsDarkMode(isDark);
   }, [isDark]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       onMouseEnter: () => setHideMenuList(false),
       onMouseLeave: () => setHideMenuList(true),
       style: { width: "min-content", zIndex: 50 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           ButtonDropdown,
           {
             isDarkMode,
             hideMenuList,
             setHideMenuList,
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               WalletBalance,
               {
                 connected,
@@ -24686,24 +24868,24 @@ var CardanoWallet2 = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             className: `mesh-mr-menu-list mesh-absolute mesh-w-60 mesh-rounded-b-md mesh-border mesh-text-center mesh-shadow-sm mesh-backdrop-blur ${hideMenuList && "mesh-hidden"} ${isDarkMode ? `mesh-bg-neutral-950	mesh-text-neutral-50` : `mesh-bg-neutral-50	mesh-text-neutral-950`}`,
             style: { zIndex: 50 },
-            children: !connected && wallets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            children: !connected && wallets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               MenuItem,
               {
                 icon: wallet.icon,
                 label: wallet.name,
                 action: () => {
-                  connect(wallet.id, extensions);
+                  connect2(wallet.id, extensions);
                   setHideMenuList(!hideMenuList);
                 },
                 active: name === wallet.id
               },
               index
-            )) }) : wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "No Wallet Found" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            )) }) : wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "No Wallet Found" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               MenuItem,
               {
                 active: false,
@@ -24720,7 +24902,7 @@ var CardanoWallet2 = ({
 };
 
 // src/stake-button/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var StakeButton = ({
   label = "Stake your ADA",
   isDark = false,
@@ -24728,19 +24910,19 @@ var StakeButton = ({
   onCheck,
   onDelegated = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = (0, import_react15.useState)(false);
+  const [isDarkMode, setIsDarkMode] = (0, import_react16.useState)(false);
   const { connected } = useWallet();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setIsDarkMode(isDark);
   }, [isDark]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: connected ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ButtonDropdown, { isDarkMode, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: connected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ButtonDropdown, { isDarkMode, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Delegate,
     {
       poolId,
       onCheck,
       onDelegated
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardanoWallet2, { label, isDark }) });
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardanoWallet2, { label, isDark }) });
 };
 var Delegate = ({
   poolId,
@@ -24749,11 +24931,11 @@ var Delegate = ({
 }) => {
   const { wallet } = useWallet();
   const rewardAddress = useRewardAddress();
-  const [_, setError] = (0, import_react15.useState)();
-  const [checking, setChecking] = (0, import_react15.useState)(false);
-  const [accountInfo, setAccountInfo] = (0, import_react15.useState)();
-  const [processing, setProcessing] = (0, import_react15.useState)(false);
-  const [done, setDone] = (0, import_react15.useState)(false);
+  const [_, setError] = (0, import_react16.useState)();
+  const [checking, setChecking] = (0, import_react16.useState)(false);
+  const [accountInfo, setAccountInfo] = (0, import_react16.useState)();
+  const [processing, setProcessing] = (0, import_react16.useState)(false);
+  const [done, setDone] = (0, import_react16.useState)(false);
   const checkAccountStatus = async () => {
     try {
       setChecking(true);
@@ -24804,22 +24986,22 @@ var Delegate = ({
     }
     setProcessing(false);
   };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     checkAccountStatus();
   }, [rewardAddress]);
   if (checking) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Checking..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Checking..." });
   }
   if (processing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Loading..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Loading..." });
   }
   if (done) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Stake Delegated" });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Stake Delegated" });
   }
   if (accountInfo?.active) {
-    return accountInfo.poolId === poolId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "Stake Delegated" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { onClick: delegateStake, children: "Begin Staking" });
+    return accountInfo.poolId === poolId ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: "Stake Delegated" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { onClick: delegateStake, children: "Begin Staking" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { onClick: registerAddress, children: "Begin Staking" });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { onClick: registerAddress, children: "Begin Staking" });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {