@meshsdk/react 1.8.12 → 1.8.14

package/dist/index.cjs

@@ -23457,7 +23457,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/cardano-wallet/index.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/common/button.tsx
 var React = __toESM(require("react"), 1);
@@ -23474,7 +23474,7 @@ function cn(...inputs) {
 // src/common/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-pointer-events-none disabled:mesh-opacity-50 dark:focus-visible:mesh-ring-zinc-300",
+  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-pointer-events-none disabled:mesh-opacity-50 dark:focus-visible:mesh-ring-zinc-300 dark:mesh-text-white",
   {
     variants: {
       variant: {
@@ -23642,14 +23642,19 @@ var INITIAL_STATE = {
   walletName: void 0,
   walletInstance: {}
 };
+var localstoragePersist = "mesh-wallet-persist";
 var useWalletStore = () => {
   const [error, setError] = (0, import_react.useState)(void 0);
+  const [state, setState] = (0, import_react.useState)("NOT_CONNECTED" /* NOT_CONNECTED */);
   const [connectingWallet, setConnectingWallet] = (0, import_react.useState)(false);
+  const [persistSession, setPersistSession] = (0, import_react.useState)(false);
+  const [address, setAddress] = (0, import_react.useState)("");
   const [connectedWalletInstance, setConnectedWalletInstance] = (0, import_react.useState)(INITIAL_STATE.walletInstance);
   const [connectedWalletName, setConnectedWalletName] = (0, import_react.useState)(INITIAL_STATE.walletName);
   const connectWallet = (0, import_react.useCallback)(
-    async (walletName, extensions) => {
+    async (walletName, extensions, persist) => {
       setConnectingWallet(true);
+      setState("CONNECTING" /* CONNECTING */);
       try {
         const walletInstance = await import_wallet.BrowserWallet.enable(
           walletName,
@@ -23658,8 +23663,18 @@ var useWalletStore = () => {
         setConnectedWalletInstance(walletInstance);
         setConnectedWalletName(walletName);
         setError(void 0);
+        if (persist) {
+          localStorage.setItem(
+            localstoragePersist,
+            JSON.stringify({ walletName })
+          );
+        }
+        setState("CONNECTED" /* CONNECTED */);
       } catch (error2) {
         setError(error2);
+        setState("NOT_CONNECTED" /* NOT_CONNECTED */);
+        setConnectedWalletName(INITIAL_STATE.walletName);
+        setConnectedWalletInstance(INITIAL_STATE.walletInstance);
       }
       setConnectingWallet(false);
     },
@@ -23668,14 +23683,40 @@ var useWalletStore = () => {
   const disconnect = (0, import_react.useCallback)(() => {
     setConnectedWalletName(INITIAL_STATE.walletName);
     setConnectedWalletInstance(INITIAL_STATE.walletInstance);
+    setState("NOT_CONNECTED" /* NOT_CONNECTED */);
+    localStorage.removeItem(localstoragePersist);
   }, []);
   const setWallet = (0, import_react.useCallback)(
     async (walletInstance, walletName) => {
       setConnectedWalletInstance(walletInstance);
       setConnectedWalletName(walletName);
+      setState("CONNECTED" /* CONNECTED */);
     },
     []
   );
+  const setPersist = (0, import_react.useCallback)((persist) => {
+    setPersistSession(persist);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    async function load() {
+      if (Object.keys(connectedWalletInstance).length > 0 && address.length === 0) {
+        let address2 = (await connectedWalletInstance.getUnusedAddresses())[0];
+        if (!address2)
+          address2 = await connectedWalletInstance.getChangeAddress();
+        setAddress(address2);
+      }
+    }
+    load();
+  }, [connectedWalletInstance]);
+  (0, import_react.useEffect)(() => {
+    const persist = localStorage.getItem(localstoragePersist);
+    if (persistSession && persist) {
+      const persist2 = JSON.parse(
+        localStorage.getItem(localstoragePersist) || ""
+      );
+      connectWallet(persist2.walletName);
+    }
+  }, [persistSession]);
   return {
     hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
     connectedWalletInstance,
@@ -23684,7 +23725,10 @@ var useWalletStore = () => {
     connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   };
 };
 var WalletContext = (0, import_react.createContext)({
@@ -23697,7 +23741,11 @@ var WalletContext = (0, import_react.createContext)({
   disconnect: () => {
   },
   setWallet: async () => {
-  }
+  },
+  setPersist: () => {
+  },
+  address: "",
+  state: "NOT_CONNECTED" /* NOT_CONNECTED */
 });
 
 // src/contexts/index.tsx
@@ -23816,7 +23864,10 @@ var useWallet = () => {
     connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   } = (0, import_react8.useContext)(WalletContext);
   if (connectWallet === void 0 || disconnect === void 0) {
     throw new Error(
@@ -23831,7 +23882,10 @@ var useWallet = () => {
     connect: connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   };
 };
 
@@ -23866,9 +23920,6 @@ var useWalletSubmit = () => {
   };
 };
 
-// src/cardano-wallet/connected-button.tsx
-var import_react10 = require("react");
-
 // src/common/dropdown-menu.tsx
 var React3 = __toESM(require("react"), 1);
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
@@ -24004,20 +24055,9 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 // src/cardano-wallet/connected-button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function ConnectedButton() {
-  const { wallet, connected, disconnect } = useWallet();
-  const [address, setAddress] = (0, import_react10.useState)("");
-  (0, import_react10.useEffect)(() => {
-    if (connected && wallet) {
-      async function afterConnectedWallet() {
-        let address2 = (await wallet.getUnusedAddresses())[0];
-        if (!address2) address2 = await wallet.getChangeAddress();
-        setAddress(address2);
-      }
-      afterConnectedWallet();
-    }
-  }, [connected, wallet]);
+  const { wallet, connected, disconnect, address } = useWallet();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: "outline", className: "mesh-text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: "outline", children: [
       address.slice(0, 6),
       "...",
       address.slice(-6)
@@ -24065,7 +24105,7 @@ var screens = {
 };
 
 // src/cardano-wallet/screen-burner.tsx
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_wallet3 = require("@meshsdk/wallet");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var localstoragekey = "mesh-burnerwallet";
@@ -24074,13 +24114,13 @@ function ScreenBurner({
   provider,
   setOpen
 }) {
-  const [loading, setLoading] = (0, import_react11.useState)(false);
-  const [hasKeyInStorage, setHasKeyInStorage] = (0, import_react11.useState)(false);
+  const [loading, setLoading] = (0, import_react10.useState)(false);
+  const [hasKeyInStorage, setHasKeyInStorage] = (0, import_react10.useState)(false);
   const { setWallet } = useWallet();
   function getKeyFromStorage() {
     return localStorage.getItem(localstoragekey);
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const key = getKeyFromStorage();
     if (key) {
       setHasKeyInStorage(true);
@@ -24120,7 +24160,6 @@ function ScreenBurner({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           handleRestoreWallet();
         },
@@ -24132,7 +24171,6 @@ function ScreenBurner({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           handleCreateWallet();
         },
@@ -24333,6 +24371,7 @@ function ScreenMain({
   extensions,
   setOpen,
   setScreen,
+  persist,
   cardanoPeerConnect,
   burnerWallet,
   webauthn
@@ -24346,7 +24385,7 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, extensions);
+          connect2(wallet.id, extensions, persist);
           setOpen(false);
         }
       },
@@ -24399,19 +24438,19 @@ function ScreenMain({
 }
 
 // src/cardano-wallet/screen-p2p.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_cardano_peer_connect = __toESM(require_dist(), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ScreenP2P({
   cardanoPeerConnect,
   setOpen
 }) {
-  const dAppConnect = (0, import_react12.useRef)(null);
-  const qrCodeField = (0, import_react12.useRef)(null);
-  const [address, setAddress] = (0, import_react12.useState)("");
-  const [copied, setCopied] = (0, import_react12.useState)(false);
+  const dAppConnect = (0, import_react11.useRef)(null);
+  const qrCodeField = (0, import_react11.useRef)(null);
+  const [address, setAddress] = (0, import_react11.useState)("");
+  const [copied, setCopied] = (0, import_react11.useState)(false);
   const { connect: connect2 } = useWallet();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (cardanoPeerConnect) {
       if (dAppConnect.current === null) {
         dAppConnect.current = new import_cardano_peer_connect.DAppPeerConnect({
@@ -24451,7 +24490,6 @@ function ScreenP2P({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           navigator.clipboard.writeText(address);
           setCopied(true);
@@ -24463,7 +24501,7 @@ function ScreenP2P({
 }
 
 // src/cardano-wallet/screen-webauthn.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_wallet4 = require("@meshsdk/wallet");
 
 // src/common/input.tsx
@@ -24513,9 +24551,9 @@ function ScreenWebauthn({
   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 [loading, setLoading] = (0, import_react12.useState)(false);
+  const [userName, setUserName] = (0, import_react12.useState)("");
+  const [password, setPassword] = (0, import_react12.useState)("");
   const { setWallet } = useWallet();
   function createWallet(root) {
     setTimeout(() => {
@@ -24587,26 +24625,30 @@ var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
   isDark = false,
+  persist = false,
   extensions = [],
   injectFn = void 0,
   cardanoPeerConnect = void 0,
   burnerWallet = void 0,
   webauthn = void 0
 }) => {
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  const [screen, setScreen] = (0, import_react14.useState)("main");
-  const { wallet, connected } = useWallet();
-  (0, import_react14.useEffect)(() => {
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const [screen, setScreen] = (0, import_react13.useState)("main");
+  const { wallet, connected, setPersist } = useWallet();
+  (0, import_react13.useEffect)(() => {
+    setPersist(persist);
+  }, [persist]);
+  (0, import_react13.useEffect)(() => {
     if (connected) {
       if (onConnected) onConnected();
     }
   }, [connected, wallet]);
   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.jsx)("div", { className: isDark ? "mesh-dark" : "", children: !connected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "outline", children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ConnectedButton, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       DialogContent,
       {
-        className: "sm:mesh-max-w-[425px]",
+        className: "sm:mesh-max-w-[425px] mesh-dark",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Header, { screen, setScreen }),
@@ -24617,6 +24659,7 @@ var CardanoWallet = ({
               extensions,
               setOpen,
               setScreen,
+              persist,
               cardanoPeerConnect: cardanoPeerConnect != void 0,
               burnerWallet: burnerWallet != void 0,
               webauthn: webauthn != void 0
@@ -24725,11 +24768,11 @@ var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime21
 );
 
 // src/stake-button/index.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_transaction = require("@meshsdk/transaction");
 
 // src/cardano-wallet-dropdown/index.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/common/button-dropdown.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -24831,16 +24874,16 @@ var CardanoWallet2 = ({
   extensions = [],
   cardanoPeerConnect = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = (0, import_react15.useState)(false);
-  const [hideMenuList, setHideMenuList] = (0, import_react15.useState)(true);
+  const [isDarkMode, setIsDarkMode] = (0, import_react14.useState)(false);
+  const [hideMenuList, setHideMenuList] = (0, import_react14.useState)(true);
   const { connect: connect2, connecting, connected, disconnect, name } = useWallet();
   const wallets = useWalletList();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (connected && onConnected) {
       onConnected();
     }
   }, [connected]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     setIsDarkMode(isDark);
   }, [isDark]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
@@ -24909,9 +24952,9 @@ var StakeButton = ({
   onCheck,
   onDelegated = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = (0, import_react16.useState)(false);
+  const [isDarkMode, setIsDarkMode] = (0, import_react15.useState)(false);
   const { connected } = useWallet();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setIsDarkMode(isDark);
   }, [isDark]);
   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)(
@@ -24930,11 +24973,11 @@ var Delegate = ({
 }) => {
   const { wallet } = useWallet();
   const rewardAddress = useRewardAddress();
-  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 [_, 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 checkAccountStatus = async () => {
     try {
       setChecking(true);
@@ -24985,7 +25028,7 @@ var Delegate = ({
     }
     setProcessing(false);
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     checkAccountStatus();
   }, [rewardAddress]);
   if (checking) {

package/dist/index.css

@@ -1379,109 +1379,112 @@ video {
   --tw-enter-translate-y: -48%;
 }
 
-@media (min-width: 640px) {
-  .sm\:mesh-max-w-\[425px\] {
-    max-width: 425px;
-  }
+.dark\:mesh-border-zinc-800:is(.mesh-dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
+}
 
-  .sm\:mesh-flex-row {
-    flex-direction: row;
-  }
+.dark\:mesh-bg-red-900:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
+}
 
-  .sm\:mesh-justify-end {
-    justify-content: flex-end;
-  }
+.dark\:mesh-bg-zinc-50:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
+}
 
-  .sm\:mesh-space-x-2 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
+.dark\:mesh-bg-zinc-800:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
 
-  .sm\:mesh-rounded-lg {
-    border-radius: 0.5rem;
-  }
+.dark\:mesh-bg-zinc-950:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
+}
 
-  .sm\:mesh-text-left {
-    text-align: left;
-  }
+.dark\:mesh-text-white:is(.mesh-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:mesh-border-zinc-800 {
-    --tw-border-opacity: 1;
-    border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
-  }
+.dark\:mesh-text-zinc-50:is(.mesh-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
 
-  .dark\:mesh-bg-red-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(127 29 29 / var(--tw-bg-opacity, 1));
-  }
+.dark\:mesh-text-zinc-900:is(.mesh-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
+}
 
-  .dark\:mesh-bg-zinc-50 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
-  }
+.dark\:hover\:mesh-bg-red-900\/90:hover:is(.mesh-dark *) {
+  background-color: rgb(127 29 29 / 0.9);
+}
 
-  .dark\:mesh-bg-zinc-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
-  }
+.dark\:hover\:mesh-bg-zinc-50\/90:hover:is(.mesh-dark *) {
+  background-color: rgb(250 250 250 / 0.9);
+}
 
-  .dark\:mesh-bg-zinc-950 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
-  }
+.dark\:hover\:mesh-bg-zinc-800:hover:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
 
-  .dark\:mesh-text-zinc-50 {
-    --tw-text-opacity: 1;
-    color: rgb(250 250 250 / var(--tw-text-opacity, 1));
-  }
+.dark\:hover\:mesh-bg-zinc-800\/80:hover:is(.mesh-dark *) {
+  background-color: rgb(39 39 42 / 0.8);
+}
 
-  .dark\:mesh-text-zinc-900 {
-    --tw-text-opacity: 1;
-    color: rgb(24 24 27 / var(--tw-text-opacity, 1));
-  }
+.dark\:hover\:mesh-text-zinc-50:hover:is(.mesh-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
 
-  .dark\:hover\:mesh-bg-red-900\/90:hover {
-    background-color: rgb(127 29 29 / 0.9);
-  }
+.dark\:focus\:mesh-bg-zinc-800:focus:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
 
-  .dark\:hover\:mesh-bg-zinc-50\/90:hover {
-    background-color: rgb(250 250 250 / 0.9);
-  }
+.dark\:focus\:mesh-text-zinc-50:focus:is(.mesh-dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+}
 
-  .dark\:hover\:mesh-bg-zinc-800:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
-  }
+.dark\:focus-visible\:mesh-ring-zinc-300:focus-visible:is(.mesh-dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity, 1));
+}
+
+.dark\:data-\[state\=open\]\:mesh-bg-zinc-800[data-state="open"]:is(.mesh-dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+}
 
-  .dark\:hover\:mesh-bg-zinc-800\/80:hover {
-    background-color: rgb(39 39 42 / 0.8);
+@media (min-width: 640px) {
+  .sm\:mesh-max-w-\[425px\] {
+    max-width: 425px;
   }
 
-  .dark\:hover\:mesh-text-zinc-50:hover {
-    --tw-text-opacity: 1;
-    color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+  .sm\:mesh-flex-row {
+    flex-direction: row;
   }
 
-  .dark\:focus\:mesh-bg-zinc-800:focus {
-    --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+  .sm\:mesh-justify-end {
+    justify-content: flex-end;
   }
 
-  .dark\:focus\:mesh-text-zinc-50:focus {
-    --tw-text-opacity: 1;
-    color: rgb(250 250 250 / var(--tw-text-opacity, 1));
+  .sm\:mesh-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .dark\:focus-visible\:mesh-ring-zinc-300:focus-visible {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity, 1));
+  .sm\:mesh-rounded-lg {
+    border-radius: 0.5rem;
   }
 
-  .dark\:data-\[state\=open\]\:mesh-bg-zinc-800[data-state="open"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
+  .sm\:mesh-text-left {
+    text-align: left;
   }
 }

package/dist/index.d.cts

@@ -7,6 +7,7 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    persist?: boolean;
     extensions?: number[];
     injectFn?: () => Promise<void>;
     cardanoPeerConnect?: {
@@ -26,17 +27,25 @@ interface ButtonProps$1 {
         url: string;
     };
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, persist, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
+declare enum WalletState {
+    NOT_CONNECTED = "NOT_CONNECTED",
+    CONNECTING = "CONNECTING",
+    CONNECTED = "CONNECTED"
+}
 interface WalletContext {
     hasConnectedWallet: boolean;
     connectedWalletInstance: IWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
-    connectWallet: (walletName: string, extensions?: number[]) => Promise<void>;
+    connectWallet: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
     disconnect: () => void;
     setWallet: (walletInstance: IWallet, walletName: string) => void;
+    setPersist: (persist: boolean) => void;
     error?: unknown;
+    address: string;
+    state: WalletState;
 }
 declare const WalletContext: react.Context<WalletContext>;
 
@@ -64,10 +73,13 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_common.IWallet;
-    connect: (walletName: string, extensions?: number[]) => Promise<void>;
+    connect: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
     disconnect: () => void;
     setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string) => void;
+    setPersist: (persist: boolean) => void;
     error: unknown;
+    address: string;
+    state: WalletState;
 };
 
 declare const useWalletSubmit: () => {

package/dist/index.d.ts

@@ -7,6 +7,7 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    persist?: boolean;
     extensions?: number[];
     injectFn?: () => Promise<void>;
     cardanoPeerConnect?: {
@@ -26,17 +27,25 @@ interface ButtonProps$1 {
         url: string;
     };
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, persist, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
+declare enum WalletState {
+    NOT_CONNECTED = "NOT_CONNECTED",
+    CONNECTING = "CONNECTING",
+    CONNECTED = "CONNECTED"
+}
 interface WalletContext {
     hasConnectedWallet: boolean;
     connectedWalletInstance: IWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
-    connectWallet: (walletName: string, extensions?: number[]) => Promise<void>;
+    connectWallet: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
     disconnect: () => void;
     setWallet: (walletInstance: IWallet, walletName: string) => void;
+    setPersist: (persist: boolean) => void;
     error?: unknown;
+    address: string;
+    state: WalletState;
 }
 declare const WalletContext: react.Context<WalletContext>;
 
@@ -64,10 +73,13 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_common.IWallet;
-    connect: (walletName: string, extensions?: number[]) => Promise<void>;
+    connect: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
     disconnect: () => void;
     setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string) => void;
+    setPersist: (persist: boolean) => void;
     error: unknown;
+    address: string;
+    state: WalletState;
 };
 
 declare const useWalletSubmit: () => {

package/dist/index.js

@@ -23432,7 +23432,7 @@ var require_dist = __commonJS({
 });
 
 // src/cardano-wallet/index.tsx
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect10, useState as useState12 } from "react";
 
 // src/common/button.tsx
 import * as React from "react";
@@ -23449,7 +23449,7 @@ function cn(...inputs) {
 // src/common/button.tsx
 import { jsx } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-pointer-events-none disabled:mesh-opacity-50 dark:focus-visible:mesh-ring-zinc-300",
+  "mesh-inline-flex mesh-items-center mesh-justify-center mesh-whitespace-nowrap mesh-rounded-md mesh-text-sm mesh-font-medium mesh-transition-colors focus-visible:mesh-outline-none focus-visible:mesh-ring-1 focus-visible:mesh-ring-zinc-950 disabled:mesh-pointer-events-none disabled:mesh-opacity-50 dark:focus-visible:mesh-ring-zinc-300 dark:mesh-text-white",
   {
     variants: {
       variant: {
@@ -23608,23 +23608,28 @@ function IconChevronRight() {
 }
 
 // src/hooks/useAddress.ts
-import { useContext, useEffect, useState as useState2 } from "react";
+import { useContext, useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/contexts/WalletContext.ts
-import { createContext, useCallback, useState } from "react";
+import { createContext, useCallback, useEffect, useState } from "react";
 import { BrowserWallet } from "@meshsdk/wallet";
 var INITIAL_STATE = {
   walletName: void 0,
   walletInstance: {}
 };
+var localstoragePersist = "mesh-wallet-persist";
 var useWalletStore = () => {
   const [error, setError] = useState(void 0);
+  const [state, setState] = useState("NOT_CONNECTED" /* NOT_CONNECTED */);
   const [connectingWallet, setConnectingWallet] = useState(false);
+  const [persistSession, setPersistSession] = useState(false);
+  const [address, setAddress] = useState("");
   const [connectedWalletInstance, setConnectedWalletInstance] = useState(INITIAL_STATE.walletInstance);
   const [connectedWalletName, setConnectedWalletName] = useState(INITIAL_STATE.walletName);
   const connectWallet = useCallback(
-    async (walletName, extensions) => {
+    async (walletName, extensions, persist) => {
       setConnectingWallet(true);
+      setState("CONNECTING" /* CONNECTING */);
       try {
         const walletInstance = await BrowserWallet.enable(
           walletName,
@@ -23633,8 +23638,18 @@ var useWalletStore = () => {
         setConnectedWalletInstance(walletInstance);
         setConnectedWalletName(walletName);
         setError(void 0);
+        if (persist) {
+          localStorage.setItem(
+            localstoragePersist,
+            JSON.stringify({ walletName })
+          );
+        }
+        setState("CONNECTED" /* CONNECTED */);
       } catch (error2) {
         setError(error2);
+        setState("NOT_CONNECTED" /* NOT_CONNECTED */);
+        setConnectedWalletName(INITIAL_STATE.walletName);
+        setConnectedWalletInstance(INITIAL_STATE.walletInstance);
       }
       setConnectingWallet(false);
     },
@@ -23643,14 +23658,40 @@ var useWalletStore = () => {
   const disconnect = useCallback(() => {
     setConnectedWalletName(INITIAL_STATE.walletName);
     setConnectedWalletInstance(INITIAL_STATE.walletInstance);
+    setState("NOT_CONNECTED" /* NOT_CONNECTED */);
+    localStorage.removeItem(localstoragePersist);
   }, []);
   const setWallet = useCallback(
     async (walletInstance, walletName) => {
       setConnectedWalletInstance(walletInstance);
       setConnectedWalletName(walletName);
+      setState("CONNECTED" /* CONNECTED */);
     },
     []
   );
+  const setPersist = useCallback((persist) => {
+    setPersistSession(persist);
+  }, []);
+  useEffect(() => {
+    async function load() {
+      if (Object.keys(connectedWalletInstance).length > 0 && address.length === 0) {
+        let address2 = (await connectedWalletInstance.getUnusedAddresses())[0];
+        if (!address2)
+          address2 = await connectedWalletInstance.getChangeAddress();
+        setAddress(address2);
+      }
+    }
+    load();
+  }, [connectedWalletInstance]);
+  useEffect(() => {
+    const persist = localStorage.getItem(localstoragePersist);
+    if (persistSession && persist) {
+      const persist2 = JSON.parse(
+        localStorage.getItem(localstoragePersist) || ""
+      );
+      connectWallet(persist2.walletName);
+    }
+  }, [persistSession]);
   return {
     hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
     connectedWalletInstance,
@@ -23659,7 +23700,10 @@ var useWalletStore = () => {
     connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   };
 };
 var WalletContext = createContext({
@@ -23672,7 +23716,11 @@ var WalletContext = createContext({
   disconnect: () => {
   },
   setWallet: async () => {
-  }
+  },
+  setPersist: () => {
+  },
+  address: "",
+  state: "NOT_CONNECTED" /* NOT_CONNECTED */
 });
 
 // src/contexts/index.tsx
@@ -23686,7 +23734,7 @@ var MeshProvider = (props) => {
 var useAddress = (accountId = 0) => {
   const [address, setAddress] = useState2();
   const { hasConnectedWallet, connectedWalletInstance } = useContext(WalletContext);
-  useEffect(() => {
+  useEffect2(() => {
     if (hasConnectedWallet) {
       connectedWalletInstance.getUsedAddresses().then((addresses) => {
         if (addresses[accountId]) {
@@ -23699,11 +23747,11 @@ var useAddress = (accountId = 0) => {
 };
 
 // src/hooks/useAssets.ts
-import { useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
+import { useContext as useContext2, useEffect as useEffect3, useState as useState3 } from "react";
 var useAssets = () => {
   const [assets, setAssets] = useState3();
   const { hasConnectedWallet, connectedWalletInstance } = useContext2(WalletContext);
-  useEffect2(() => {
+  useEffect3(() => {
     if (hasConnectedWallet) {
       connectedWalletInstance.getAssets().then(setAssets);
     }
@@ -23712,13 +23760,13 @@ var useAssets = () => {
 };
 
 // src/hooks/useWalletList.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { BrowserWallet as BrowserWallet2 } from "@meshsdk/wallet";
 var useWalletList = ({
   injectFn = void 0
 } = {}) => {
   const [wallets, setWallets] = useState4([]);
-  useEffect3(() => {
+  useEffect4(() => {
     async function get() {
       setWallets(await BrowserWallet2.getAvailableWallets({ injectFn }));
     }
@@ -23728,12 +23776,12 @@ var useWalletList = ({
 };
 
 // src/hooks/useLovelace.ts
-import { useContext as useContext3, useEffect as useEffect4, useMemo, useRef, useState as useState5 } from "react";
+import { useContext as useContext3, useEffect as useEffect5, useMemo, useRef, useState as useState5 } from "react";
 var useLovelace = () => {
   const [lovelace, setLovelace] = useState5();
   const { hasConnectedWallet, connectedWalletInstance } = useContext3(WalletContext);
   const hasFetchedLovelace = useRef(false);
-  useEffect4(() => {
+  useEffect5(() => {
     async function getLovelace() {
       if (hasConnectedWallet && !hasFetchedLovelace.current) {
         setLovelace(await connectedWalletInstance.getLovelace());
@@ -23749,11 +23797,11 @@ var useLovelace = () => {
 };
 
 // src/hooks/useNetwork.ts
-import { useContext as useContext4, useEffect as useEffect5, useState as useState6 } from "react";
+import { useContext as useContext4, useEffect as useEffect6, useState as useState6 } from "react";
 var useNetwork = () => {
   const [networkId, setNetworkId] = useState6();
   const { hasConnectedWallet, connectedWalletInstance } = useContext4(WalletContext);
-  useEffect5(() => {
+  useEffect6(() => {
     if (hasConnectedWallet) {
       connectedWalletInstance.getNetworkId().then(setNetworkId);
     } else {
@@ -23764,11 +23812,11 @@ var useNetwork = () => {
 };
 
 // src/hooks/useRewardAddress.ts
-import { useContext as useContext5, useEffect as useEffect6, useState as useState7 } from "react";
+import { useContext as useContext5, useEffect as useEffect7, useState as useState7 } from "react";
 var useRewardAddress = (accountId = 0) => {
   const [rewardAddress, setRewardAddress] = useState7();
   const { hasConnectedWallet, connectedWalletInstance } = useContext5(WalletContext);
-  useEffect6(() => {
+  useEffect7(() => {
     if (hasConnectedWallet) {
       connectedWalletInstance.getRewardAddresses().then((addresses) => {
         if (addresses[accountId]) {
@@ -23791,7 +23839,10 @@ var useWallet = () => {
     connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   } = useContext6(WalletContext);
   if (connectWallet === void 0 || disconnect === void 0) {
     throw new Error(
@@ -23806,7 +23857,10 @@ var useWallet = () => {
     connect: connectWallet,
     disconnect,
     setWallet,
-    error
+    setPersist,
+    error,
+    address,
+    state
   };
 };
 
@@ -23841,9 +23895,6 @@ var useWalletSubmit = () => {
   };
 };
 
-// src/cardano-wallet/connected-button.tsx
-import { useEffect as useEffect7, useState as useState9 } from "react";
-
 // src/common/dropdown-menu.tsx
 import * as React3 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -23983,20 +24034,9 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 // src/cardano-wallet/connected-button.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function ConnectedButton() {
-  const { wallet, connected, disconnect } = useWallet();
-  const [address, setAddress] = useState9("");
-  useEffect7(() => {
-    if (connected && wallet) {
-      async function afterConnectedWallet() {
-        let address2 = (await wallet.getUnusedAddresses())[0];
-        if (!address2) address2 = await wallet.getChangeAddress();
-        setAddress(address2);
-      }
-      afterConnectedWallet();
-    }
-  }, [connected, wallet]);
+  const { wallet, connected, disconnect, address } = useWallet();
   return /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "outline", className: "mesh-text-white", children: [
+    /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(Button, { variant: "outline", children: [
       address.slice(0, 6),
       "...",
       address.slice(-6)
@@ -24044,7 +24084,7 @@ var screens = {
 };
 
 // src/cardano-wallet/screen-burner.tsx
-import { useEffect as useEffect8, useState as useState10 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 import { MeshWallet } from "@meshsdk/wallet";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var localstoragekey = "mesh-burnerwallet";
@@ -24053,8 +24093,8 @@ function ScreenBurner({
   provider,
   setOpen
 }) {
-  const [loading, setLoading] = useState10(false);
-  const [hasKeyInStorage, setHasKeyInStorage] = useState10(false);
+  const [loading, setLoading] = useState9(false);
+  const [hasKeyInStorage, setHasKeyInStorage] = useState9(false);
   const { setWallet } = useWallet();
   function getKeyFromStorage() {
     return localStorage.getItem(localstoragekey);
@@ -24099,7 +24139,6 @@ function ScreenBurner({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           handleRestoreWallet();
         },
@@ -24111,7 +24150,6 @@ function ScreenBurner({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           handleCreateWallet();
         },
@@ -24312,6 +24350,7 @@ function ScreenMain({
   extensions,
   setOpen,
   setScreen,
+  persist,
   cardanoPeerConnect,
   burnerWallet,
   webauthn
@@ -24325,7 +24364,7 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, extensions);
+          connect2(wallet.id, extensions, persist);
           setOpen(false);
         }
       },
@@ -24379,7 +24418,7 @@ function ScreenMain({
 
 // src/cardano-wallet/screen-p2p.tsx
 var import_cardano_peer_connect = __toESM(require_dist(), 1);
-import { useEffect as useEffect9, useRef as useRef2, useState as useState11 } from "react";
+import { useEffect as useEffect9, useRef as useRef2, useState as useState10 } from "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function ScreenP2P({
   cardanoPeerConnect,
@@ -24387,8 +24426,8 @@ function ScreenP2P({
 }) {
   const dAppConnect = useRef2(null);
   const qrCodeField = useRef2(null);
-  const [address, setAddress] = useState11("");
-  const [copied, setCopied] = useState11(false);
+  const [address, setAddress] = useState10("");
+  const [copied, setCopied] = useState10(false);
   const { connect: connect2 } = useWallet();
   useEffect9(() => {
     if (cardanoPeerConnect) {
@@ -24430,7 +24469,6 @@ function ScreenP2P({
       Button,
       {
         variant: "outline",
-        className: "mesh-text-white",
         onClick: () => {
           navigator.clipboard.writeText(address);
           setCopied(true);
@@ -24442,7 +24480,7 @@ function ScreenP2P({
 }
 
 // src/cardano-wallet/screen-webauthn.tsx
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 import { connect, MeshWallet as MeshWallet2 } from "@meshsdk/wallet";
 
 // src/common/input.tsx
@@ -24492,9 +24530,9 @@ function ScreenWebauthn({
   provider,
   setOpen
 }) {
-  const [loading, setLoading] = useState12(false);
-  const [userName, setUserName] = useState12("");
-  const [password, setPassword] = useState12("");
+  const [loading, setLoading] = useState11(false);
+  const [userName, setUserName] = useState11("");
+  const [password, setPassword] = useState11("");
   const { setWallet } = useWallet();
   function createWallet(root) {
     setTimeout(() => {
@@ -24566,26 +24604,30 @@ var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
   isDark = false,
+  persist = false,
   extensions = [],
   injectFn = void 0,
   cardanoPeerConnect = void 0,
   burnerWallet = void 0,
   webauthn = void 0
 }) => {
-  const [open, setOpen] = useState13(false);
-  const [screen, setScreen] = useState13("main");
-  const { wallet, connected } = useWallet();
+  const [open, setOpen] = useState12(false);
+  const [screen, setScreen] = useState12("main");
+  const { wallet, connected, setPersist } = useWallet();
+  useEffect10(() => {
+    setPersist(persist);
+  }, [persist]);
   useEffect10(() => {
     if (connected) {
       if (onConnected) onConnected();
     }
   }, [connected, wallet]);
   return /* @__PURE__ */ jsxs13(Dialog, { open, onOpenChange: setOpen, children: [
-    !connected ? /* @__PURE__ */ jsx19(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "outline", className: "mesh-text-white", children: label }) }) : /* @__PURE__ */ jsx19(ConnectedButton, {}),
+    /* @__PURE__ */ jsx19("div", { className: isDark ? "mesh-dark" : "", children: !connected ? /* @__PURE__ */ jsx19(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "outline", children: label }) }) : /* @__PURE__ */ jsx19(ConnectedButton, {}) }),
     /* @__PURE__ */ jsxs13(
       DialogContent,
       {
-        className: "sm:mesh-max-w-[425px]",
+        className: "sm:mesh-max-w-[425px] mesh-dark",
         onOpenAutoFocus: (event) => event.preventDefault(),
         children: [
           /* @__PURE__ */ jsx19(Header, { screen, setScreen }),
@@ -24596,6 +24638,7 @@ var CardanoWallet = ({
               extensions,
               setOpen,
               setScreen,
+              persist,
               cardanoPeerConnect: cardanoPeerConnect != void 0,
               burnerWallet: burnerWallet != void 0,
               webauthn: webauthn != void 0
@@ -24704,11 +24747,11 @@ var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ jsxs14(
 );
 
 // src/stake-button/index.tsx
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect12, useState as useState14 } from "react";
 import { Transaction } from "@meshsdk/transaction";
 
 // src/cardano-wallet-dropdown/index.tsx
-import { useEffect as useEffect11, useState as useState14 } from "react";
+import { useEffect as useEffect11, useState as useState13 } from "react";
 
 // src/common/button-dropdown.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -24810,8 +24853,8 @@ var CardanoWallet2 = ({
   extensions = [],
   cardanoPeerConnect = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = useState14(false);
-  const [hideMenuList, setHideMenuList] = useState14(true);
+  const [isDarkMode, setIsDarkMode] = useState13(false);
+  const [hideMenuList, setHideMenuList] = useState13(true);
   const { connect: connect2, connecting, connected, disconnect, name } = useWallet();
   const wallets = useWalletList();
   useEffect11(() => {
@@ -24888,7 +24931,7 @@ var StakeButton = ({
   onCheck,
   onDelegated = void 0
 }) => {
-  const [isDarkMode, setIsDarkMode] = useState15(false);
+  const [isDarkMode, setIsDarkMode] = useState14(false);
   const { connected } = useWallet();
   useEffect12(() => {
     setIsDarkMode(isDark);
@@ -24909,11 +24952,11 @@ var Delegate = ({
 }) => {
   const { wallet } = useWallet();
   const rewardAddress = useRewardAddress();
-  const [_, setError] = useState15();
-  const [checking, setChecking] = useState15(false);
-  const [accountInfo, setAccountInfo] = useState15();
-  const [processing, setProcessing] = useState15(false);
-  const [done, setDone] = useState15(false);
+  const [_, setError] = useState14();
+  const [checking, setChecking] = useState14(false);
+  const [accountInfo, setAccountInfo] = useState14();
+  const [processing, setProcessing] = useState14(false);
+  const [done, setDone] = useState14(false);
   const checkAccountStatus = async () => {
     try {
       setChecking(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.8.12",
+  "version": "1.8.14",
   "description": "React component library - https://meshjs.dev/react",
   "main": "./dist/index.cjs",
   "browser": "./dist/index.js",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@fabianbormann/cardano-peer-connect": "^1.2.18",
-    "@meshsdk/common": "1.8.12",
-    "@meshsdk/transaction": "1.8.12",
-    "@meshsdk/wallet": "1.8.12",
+    "@meshsdk/common": "1.8.14",
+    "@meshsdk/transaction": "1.8.14",
+    "@meshsdk/wallet": "1.8.14",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.2",