@meshsdk/react 1.5.29 → 1.5.32

package/dist/index.css

@@ -558,6 +558,10 @@ video {
   position: absolute;
 }
 
+.ui-m-1 {
+  margin: 0.25rem;
+}
+
 .ui-m-2 {
   margin: 0.5rem;
 }
@@ -578,6 +582,10 @@ video {
   height: 1.5rem;
 }
 
+.ui-h-8 {
+  height: 2rem;
+}
+
 .ui-w-60 {
   width: 15rem;
 }
@@ -675,6 +683,11 @@ video {
   line-height: 1.75rem;
 }
 
+.ui-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .ui-font-normal {
   font-weight: 400;
 }

package/dist/index.d.mts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Asset, Wallet, AccountInfo } from '@meshsdk/common';
+import * as _meshsdk_wallet from '@meshsdk/wallet';
+import { BrowserWallet } from '@meshsdk/wallet';
+import * as react from 'react';
+
+interface ButtonProps$1 {
+    label?: string;
+    onConnected?: Function;
+    isDark?: boolean;
+}
+declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+
+interface WalletContext {
+    hasConnectedWallet: boolean;
+    connectedWalletInstance: BrowserWallet;
+    connectedWalletName: string;
+    connectingWallet: boolean;
+    connectWallet?: (walletName: string) => Promise<void>;
+    disconnect?: () => void;
+    error?: unknown;
+}
+declare const WalletContext: react.Context<WalletContext>;
+
+interface Props {
+    children: React.ReactNode;
+}
+declare const MeshProvider: React.FC<Props>;
+
+declare const useAddress: (accountId?: number) => string | undefined;
+
+declare const useAssets: () => Asset[] | undefined;
+
+declare const useWalletList: () => Wallet[];
+
+declare const useLovelace: () => string | undefined;
+
+declare const useNetwork: () => number | undefined;
+
+declare const useRewardAddress: (accountId?: number) => string | undefined;
+
+declare const useWallet: () => {
+    name: string;
+    connecting: boolean;
+    connected: boolean;
+    wallet: _meshsdk_wallet.BrowserWallet;
+    connect: (walletName: string) => Promise<void>;
+    disconnect: () => void;
+    error: unknown;
+};
+
+declare const useWalletSubmit: () => {
+    error: unknown;
+    result: string | undefined;
+    submitting: boolean;
+    submitTx: (signedTx: string) => Promise<void>;
+};
+
+declare const MeshBadge: ({ isDark }: {
+    isDark?: boolean | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    label?: string;
+    isDark?: boolean;
+    poolId: string;
+    onCheck: (rewardAddress: string) => Promise<AccountInfo>;
+    onDelegated?: () => void;
+}
+declare const StakeButton: ({ label, isDark, poolId, onCheck, onDelegated, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { CardanoWallet, MeshBadge, MeshProvider, StakeButton, WalletContext, useAddress, useAssets, useLovelace, useNetwork, useRewardAddress, useWallet, useWalletList, useWalletSubmit };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Asset, Wallet, AccountInfo } from '@meshsdk/common';
+import * as _meshsdk_wallet from '@meshsdk/wallet';
+import { BrowserWallet } from '@meshsdk/wallet';
+import * as react from 'react';
+
+interface ButtonProps$1 {
+    label?: string;
+    onConnected?: Function;
+    isDark?: boolean;
+}
+declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+
+interface WalletContext {
+    hasConnectedWallet: boolean;
+    connectedWalletInstance: BrowserWallet;
+    connectedWalletName: string;
+    connectingWallet: boolean;
+    connectWallet?: (walletName: string) => Promise<void>;
+    disconnect?: () => void;
+    error?: unknown;
+}
+declare const WalletContext: react.Context<WalletContext>;
+
+interface Props {
+    children: React.ReactNode;
+}
+declare const MeshProvider: React.FC<Props>;
+
+declare const useAddress: (accountId?: number) => string | undefined;
+
+declare const useAssets: () => Asset[] | undefined;
+
+declare const useWalletList: () => Wallet[];
+
+declare const useLovelace: () => string | undefined;
+
+declare const useNetwork: () => number | undefined;
+
+declare const useRewardAddress: (accountId?: number) => string | undefined;
+
+declare const useWallet: () => {
+    name: string;
+    connecting: boolean;
+    connected: boolean;
+    wallet: _meshsdk_wallet.BrowserWallet;
+    connect: (walletName: string) => Promise<void>;
+    disconnect: () => void;
+    error: unknown;
+};
+
+declare const useWalletSubmit: () => {
+    error: unknown;
+    result: string | undefined;
+    submitting: boolean;
+    submitTx: (signedTx: string) => Promise<void>;
+};
+
+declare const MeshBadge: ({ isDark }: {
+    isDark?: boolean | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    label?: string;
+    isDark?: boolean;
+    poolId: string;
+    onCheck: (rewardAddress: string) => Promise<AccountInfo>;
+    onDelegated?: () => void;
+}
+declare const StakeButton: ({ label, isDark, poolId, onCheck, onDelegated, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { CardanoWallet, MeshBadge, MeshProvider, StakeButton, WalletContext, useAddress, useAssets, useLovelace, useNetwork, useRewardAddress, useWallet, useWalletList, useWalletSubmit };

package/dist/index.js

@@ -0,0 +1,567 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CardanoWallet: () => CardanoWallet,
+  MeshBadge: () => MeshBadge,
+  MeshProvider: () => MeshProvider,
+  StakeButton: () => StakeButton,
+  WalletContext: () => WalletContext,
+  useAddress: () => useAddress,
+  useAssets: () => useAssets,
+  useLovelace: () => useLovelace,
+  useNetwork: () => useNetwork,
+  useRewardAddress: () => useRewardAddress,
+  useWallet: () => useWallet,
+  useWalletList: () => useWalletList,
+  useWalletSubmit: () => useWalletSubmit
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/cardano-wallet/index.tsx
+var import_react10 = require("react");
+var import_wallet3 = require("@meshsdk/wallet");
+
+// src/common/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button({
+  children,
+  isDarkMode = false,
+  hideMenuList = false,
+  setHideMenuList
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: `ui-mr-menu-list ui-flex ui-w-60 ui-items-center ui-justify-center ui-rounded-t-md ui-border ui-px-4 ui-py-2 ui-text-lg ui-font-normal ui-shadow-sm ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+      onClick: () => setHideMenuList && setHideMenuList(!hideMenuList),
+      children
+    }
+  );
+}
+
+// src/hooks/useAddress.ts
+var import_react2 = require("react");
+
+// src/contexts/WalletContext.ts
+var import_react = require("react");
+var import_wallet = require("@meshsdk/wallet");
+var INITIAL_STATE = {
+  walletName: "",
+  walletInstance: {}
+};
+var useWalletStore = () => {
+  const [error, setError] = (0, import_react.useState)(void 0);
+  const [connectingWallet, setConnectingWallet] = (0, import_react.useState)(false);
+  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) => {
+    setConnectingWallet(true);
+    try {
+      const walletInstance = await import_wallet.BrowserWallet.enable(walletName);
+      setConnectedWalletInstance(walletInstance);
+      setConnectedWalletName(walletName);
+      setError(void 0);
+    } catch (error2) {
+      setError(error2);
+      console.error(error2);
+    }
+    setConnectingWallet(false);
+  }, []);
+  const disconnect = (0, import_react.useCallback)(() => {
+    setConnectedWalletName(INITIAL_STATE.walletName);
+    setConnectedWalletInstance(INITIAL_STATE.walletInstance);
+  }, []);
+  return {
+    hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
+    connectedWalletInstance,
+    connectedWalletName,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    // setWallet,
+    error
+  };
+};
+var WalletContext = (0, import_react.createContext)({
+  hasConnectedWallet: false,
+  connectedWalletInstance: INITIAL_STATE.walletInstance,
+  connectedWalletName: INITIAL_STATE.walletName,
+  connectingWallet: false
+});
+
+// src/contexts/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MeshProvider = (props) => {
+  const store = useWalletStore();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children }) });
+};
+
+// src/hooks/useAddress.ts
+var useAddress = (accountId = 0) => {
+  const [address, setAddress] = (0, import_react2.useState)();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = (0, import_react2.useContext)(WalletContext);
+  (0, import_react2.useEffect)(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getUsedAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+  return address;
+};
+
+// src/hooks/useAssets.ts
+var import_react3 = require("react");
+var useAssets = () => {
+  const [assets, setAssets] = (0, import_react3.useState)();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = (0, import_react3.useContext)(WalletContext);
+  (0, import_react3.useEffect)(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getAssets().then(setAssets);
+    }
+  }, [connectedWalletName]);
+  return assets;
+};
+
+// src/hooks/useWalletList.ts
+var import_react4 = require("react");
+var import_wallet2 = require("@meshsdk/wallet");
+var useWalletList = () => {
+  const [wallets, setWallets] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    setWallets(import_wallet2.BrowserWallet.getInstalledWallets());
+  }, []);
+  return wallets;
+};
+
+// src/hooks/useLovelace.ts
+var import_react5 = require("react");
+var useLovelace = () => {
+  const [lovelace, setLovelace] = (0, import_react5.useState)();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = (0, import_react5.useContext)(WalletContext);
+  (0, import_react5.useEffect)(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getLovelace().then(setLovelace);
+    }
+  }, [connectedWalletName]);
+  return lovelace;
+};
+
+// src/hooks/useNetwork.ts
+var import_react6 = require("react");
+var useNetwork = () => {
+  const [networkId, setNetworkId] = (0, import_react6.useState)();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = (0, import_react6.useContext)(WalletContext);
+  (0, import_react6.useEffect)(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getNetworkId().then(setNetworkId);
+    }
+  }, [connectedWalletName]);
+  return networkId;
+};
+
+// src/hooks/useRewardAddress.ts
+var import_react7 = require("react");
+var useRewardAddress = (accountId = 0) => {
+  const [rewardAddress, setRewardAddress] = (0, import_react7.useState)();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = (0, import_react7.useContext)(WalletContext);
+  (0, import_react7.useEffect)(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getRewardAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setRewardAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+  return rewardAddress;
+};
+
+// src/hooks/useWallet.ts
+var import_react8 = require("react");
+var useWallet = () => {
+  const {
+    hasConnectedWallet,
+    connectedWalletName,
+    connectedWalletInstance,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    error
+  } = (0, import_react8.useContext)(WalletContext);
+  if (connectWallet === void 0 || disconnect === void 0) {
+    throw new Error(
+      "Can't call useWallet outside of the WalletProvider context"
+    );
+  }
+  return {
+    name: connectedWalletName,
+    connecting: connectingWallet,
+    connected: hasConnectedWallet,
+    wallet: connectedWalletInstance,
+    connect: connectWallet,
+    disconnect,
+    error
+  };
+};
+
+// src/hooks/useWalletSubmit.ts
+var import_react9 = require("react");
+var useWalletSubmit = () => {
+  const [error, setError] = (0, import_react9.useState)();
+  const [result, setResult] = (0, import_react9.useState)();
+  const [submitting, setSubmitting] = (0, import_react9.useState)(false);
+  const { hasConnectedWallet, connectedWalletInstance } = (0, import_react9.useContext)(WalletContext);
+  const submitTx = (0, import_react9.useCallback)(async (signedTx) => {
+    setSubmitting(true);
+    try {
+      if (hasConnectedWallet) {
+        const txHash = await connectedWalletInstance.submitTx(signedTx);
+        setError(void 0);
+        setResult(txHash);
+      }
+      throw new Error(
+        "Please make sure to connect a wallet before calling useWalletSubmit"
+      );
+    } catch (error2) {
+      setError(error2);
+      console.error(error2);
+    }
+    setSubmitting(false);
+  }, []);
+  return {
+    error,
+    result,
+    submitting,
+    submitTx
+  };
+};
+
+// src/cardano-wallet/menu-item.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MenuItem({
+  icon,
+  label,
+  action,
+  active
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: "ui-flex ui-cursor-pointer ui-items-center ui-px-4 ui-py-2 ui-opacity-80 hover:ui-opacity-100 ui-h-16",
+      onClick: action,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: "ui-pr-2 ui-m-1 ui-h-8", src: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-mr-menu-item ui-text-xl ui-font-normal", children: label.split(" ").map((word) => {
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        }).join(" ") })
+      ]
+    }
+  );
+}
+
+// src/cardano-wallet/chevron-down.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  "svg",
+  {
+    className: "ui-m-2 ui-h-6",
+    fill: "none",
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M19 9l-7 7-7-7"
+      }
+    )
+  }
+);
+
+// src/cardano-wallet/wallet-balance.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var WalletBalance = ({
+  connected,
+  connecting,
+  label,
+  wallet
+}) => {
+  const lovelace = useLovelace();
+  return connected && lovelace && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "ui-m-2 ui-h-6", src: wallet.icon }),
+    "\u20B3",
+    " ",
+    parseInt((parseInt(lovelace, 10) / 1e6).toString(), 10),
+    ".",
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ui-text-xs", children: lovelace.substring(lovelace.length - 6) })
+  ] }) : connected && wallet?.icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { className: "ui-m-2 ui-h-6", src: wallet.icon }) }) : connecting ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: "Connecting..." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    label,
+    " ",
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, {})
+  ] });
+};
+
+// src/cardano-wallet/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CardanoWallet = ({
+  label = "Connect Wallet",
+  onConnected = void 0,
+  isDark = false
+}) => {
+  const [isDarkMode, setIsDarkMode] = (0, import_react10.useState)(false);
+  const [hideMenuList, setHideMenuList] = (0, import_react10.useState)(true);
+  const [wallets, setWallets] = (0, import_react10.useState)([]);
+  const { connect, connecting, connected, disconnect, name } = useWallet();
+  (0, import_react10.useEffect)(() => {
+    if (connected && onConnected) {
+      onConnected();
+    }
+  }, [connected]);
+  (0, import_react10.useEffect)(() => {
+    setWallets(import_wallet3.BrowserWallet.getInstalledWallets());
+  }, []);
+  (0, import_react10.useEffect)(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: "w-fit",
+      onMouseEnter: () => setHideMenuList(false),
+      onMouseLeave: () => setHideMenuList(true),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Button,
+          {
+            isDarkMode,
+            hideMenuList,
+            setHideMenuList,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              WalletBalance,
+              {
+                connected,
+                connecting,
+                label,
+                wallet: wallets.find((wallet) => wallet.name === name)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: `ui-mr-menu-list ui-absolute ui-w-60 ui-rounded-b-md ui-border ui-text-center ui-shadow-sm ui-backdrop-blur ${hideMenuList && "ui-hidden"} ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+            children: !connected && wallets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: wallets.map((wallet, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              MenuItem,
+              {
+                icon: wallet.icon,
+                label: wallet.name,
+                action: () => {
+                  connect(wallet.name);
+                  setHideMenuList(!hideMenuList);
+                },
+                active: name === wallet.name
+              },
+              index
+            )) }) : wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "No Wallet Found" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              MenuItem,
+              {
+                active: false,
+                label: "disconnect",
+                action: disconnect,
+                icon: void 0
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/mesh-badge/mesh-logo.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var MeshLogo = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  "svg",
+  {
+    className: "ui-h-16 ui-p-2",
+    fill: "currentColor",
+    viewBox: "0 0 300 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime8 = require("react/jsx-runtime");
+var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  "a",
+  {
+    className: `ui-flex ui-max-w-fit ui-flex-col ui-items-center ui-rounded-md ui-border ui-border-solid ui-border-current ui-p-1 ui-text-xl ui-font-semibold ui-no-underline ${isDark ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+    style: {
+      color: isDark ? "#EEEEEE" : "#111111",
+      backgroundColor: isDark ? "#111111" : "#EEEEEE"
+    },
+    href: "https://meshjs.dev/",
+    rel: "noopener noreferrer",
+    target: "_blank",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MeshLogo, {}),
+      "Mesh"
+    ]
+  }
+);
+
+// src/stake-button/index.tsx
+var import_react11 = require("react");
+var import_transaction = require("@meshsdk/transaction");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var StakeButton = ({
+  label = "Stake your ADA",
+  isDark = false,
+  poolId,
+  onCheck,
+  onDelegated = void 0
+}) => {
+  const [isDarkMode, setIsDarkMode] = (0, import_react11.useState)(false);
+  const { connected } = useWallet();
+  (0, import_react11.useEffect)(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: connected ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { isDarkMode, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Delegate,
+    {
+      poolId,
+      onCheck,
+      onDelegated
+    }
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CardanoWallet, { label, isDark }) });
+};
+var Delegate = ({
+  poolId,
+  onCheck,
+  onDelegated
+}) => {
+  const { wallet } = useWallet();
+  const rewardAddress = useRewardAddress();
+  const [error, setError] = (0, import_react11.useState)();
+  const [checking, setChecking] = (0, import_react11.useState)(false);
+  const [accountInfo, setAccountInfo] = (0, import_react11.useState)();
+  const [processing, setProcessing] = (0, import_react11.useState)(false);
+  const [done, setDone] = (0, import_react11.useState)(false);
+  const checkAccountStatus = async () => {
+    try {
+      setChecking(true);
+      if (rewardAddress) {
+        const info = await onCheck(rewardAddress);
+        setAccountInfo(info);
+      }
+      setChecking(false);
+    } catch (error2) {
+      setError(error2);
+    }
+  };
+  const registerAddress = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const tx = new import_transaction.Transaction({ initiator: wallet }).registerStake(rewardAddress).delegateStake(rewardAddress, poolId);
+        const unsignedTx = await tx.build();
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        if (onDelegated) {
+          onDelegated();
+        }
+        setDone(true);
+      }
+    } catch (error2) {
+      console.error("error", error2);
+      setError(error2);
+    }
+    setProcessing(false);
+  };
+  const delegateStake = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const tx = new import_transaction.Transaction({ initiator: wallet }).delegateStake(
+          rewardAddress,
+          poolId
+        );
+        const unsignedTx = await tx.build();
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        setDone(true);
+      }
+    } catch (error2) {
+      console.error("error", error2);
+      setError(error2);
+    }
+    setProcessing(false);
+  };
+  (0, import_react11.useEffect)(() => {
+    checkAccountStatus();
+  }, [rewardAddress]);
+  if (checking) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Checking..." });
+  }
+  if (processing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Loading..." });
+  }
+  if (done) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Stake Delegated" });
+  }
+  if (accountInfo?.active) {
+    return accountInfo.poolId === poolId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Stake Delegated" }) : (
+      // <span onClick={delegateStake}>Delegate Stake</span>
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { onClick: registerAddress, children: "Begin Staking" })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { onClick: registerAddress, children: "Begin Staking" });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardanoWallet,
+  MeshBadge,
+  MeshProvider,
+  StakeButton,
+  WalletContext,
+  useAddress,
+  useAssets,
+  useLovelace,
+  useNetwork,
+  useRewardAddress,
+  useWallet,
+  useWalletList,
+  useWalletSubmit
+});

package/dist/index.mjs

@@ -0,0 +1,528 @@
+// src/cardano-wallet/index.tsx
+import { useEffect as useEffect7, useState as useState9 } from "react";
+import { BrowserWallet as BrowserWallet3 } from "@meshsdk/wallet";
+
+// src/common/button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button({
+  children,
+  isDarkMode = false,
+  hideMenuList = false,
+  setHideMenuList
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: `ui-mr-menu-list ui-flex ui-w-60 ui-items-center ui-justify-center ui-rounded-t-md ui-border ui-px-4 ui-py-2 ui-text-lg ui-font-normal ui-shadow-sm ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+      onClick: () => setHideMenuList && setHideMenuList(!hideMenuList),
+      children
+    }
+  );
+}
+
+// src/hooks/useAddress.ts
+import { useContext, useEffect, useState as useState2 } from "react";
+
+// src/contexts/WalletContext.ts
+import { createContext, useCallback, useState } from "react";
+import { BrowserWallet } from "@meshsdk/wallet";
+var INITIAL_STATE = {
+  walletName: "",
+  walletInstance: {}
+};
+var useWalletStore = () => {
+  const [error, setError] = useState(void 0);
+  const [connectingWallet, setConnectingWallet] = useState(false);
+  const [connectedWalletInstance, setConnectedWalletInstance] = useState(INITIAL_STATE.walletInstance);
+  const [connectedWalletName, setConnectedWalletName] = useState(
+    INITIAL_STATE.walletName
+  );
+  const connectWallet = useCallback(async (walletName) => {
+    setConnectingWallet(true);
+    try {
+      const walletInstance = await BrowserWallet.enable(walletName);
+      setConnectedWalletInstance(walletInstance);
+      setConnectedWalletName(walletName);
+      setError(void 0);
+    } catch (error2) {
+      setError(error2);
+      console.error(error2);
+    }
+    setConnectingWallet(false);
+  }, []);
+  const disconnect = useCallback(() => {
+    setConnectedWalletName(INITIAL_STATE.walletName);
+    setConnectedWalletInstance(INITIAL_STATE.walletInstance);
+  }, []);
+  return {
+    hasConnectedWallet: INITIAL_STATE.walletName !== connectedWalletName,
+    connectedWalletInstance,
+    connectedWalletName,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    // setWallet,
+    error
+  };
+};
+var WalletContext = createContext({
+  hasConnectedWallet: false,
+  connectedWalletInstance: INITIAL_STATE.walletInstance,
+  connectedWalletName: INITIAL_STATE.walletName,
+  connectingWallet: false
+});
+
+// src/contexts/index.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var MeshProvider = (props) => {
+  const store = useWalletStore();
+  return /* @__PURE__ */ jsx2(WalletContext.Provider, { value: store, children: /* @__PURE__ */ jsx2(Fragment, { children: props.children }) });
+};
+
+// src/hooks/useAddress.ts
+var useAddress = (accountId = 0) => {
+  const [address, setAddress] = useState2();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext(WalletContext);
+  useEffect(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getUsedAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+  return address;
+};
+
+// src/hooks/useAssets.ts
+import { useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
+var useAssets = () => {
+  const [assets, setAssets] = useState3();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext2(WalletContext);
+  useEffect2(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getAssets().then(setAssets);
+    }
+  }, [connectedWalletName]);
+  return assets;
+};
+
+// src/hooks/useWalletList.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { BrowserWallet as BrowserWallet2 } from "@meshsdk/wallet";
+var useWalletList = () => {
+  const [wallets, setWallets] = useState4([]);
+  useEffect3(() => {
+    setWallets(BrowserWallet2.getInstalledWallets());
+  }, []);
+  return wallets;
+};
+
+// src/hooks/useLovelace.ts
+import { useContext as useContext3, useEffect as useEffect4, useState as useState5 } from "react";
+var useLovelace = () => {
+  const [lovelace, setLovelace] = useState5();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext3(WalletContext);
+  useEffect4(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getLovelace().then(setLovelace);
+    }
+  }, [connectedWalletName]);
+  return lovelace;
+};
+
+// src/hooks/useNetwork.ts
+import { useContext as useContext4, useEffect as useEffect5, useState as useState6 } from "react";
+var useNetwork = () => {
+  const [networkId, setNetworkId] = useState6();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext4(WalletContext);
+  useEffect5(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getNetworkId().then(setNetworkId);
+    }
+  }, [connectedWalletName]);
+  return networkId;
+};
+
+// src/hooks/useRewardAddress.ts
+import { useContext as useContext5, useEffect as useEffect6, useState as useState7 } from "react";
+var useRewardAddress = (accountId = 0) => {
+  const [rewardAddress, setRewardAddress] = useState7();
+  const { hasConnectedWallet, connectedWalletName, connectedWalletInstance } = useContext5(WalletContext);
+  useEffect6(() => {
+    if (hasConnectedWallet) {
+      connectedWalletInstance.getRewardAddresses().then((addresses) => {
+        if (addresses[accountId]) {
+          setRewardAddress(addresses[accountId]);
+        }
+      });
+    }
+  }, [accountId, connectedWalletName]);
+  return rewardAddress;
+};
+
+// src/hooks/useWallet.ts
+import { useContext as useContext6 } from "react";
+var useWallet = () => {
+  const {
+    hasConnectedWallet,
+    connectedWalletName,
+    connectedWalletInstance,
+    connectingWallet,
+    connectWallet,
+    disconnect,
+    error
+  } = useContext6(WalletContext);
+  if (connectWallet === void 0 || disconnect === void 0) {
+    throw new Error(
+      "Can't call useWallet outside of the WalletProvider context"
+    );
+  }
+  return {
+    name: connectedWalletName,
+    connecting: connectingWallet,
+    connected: hasConnectedWallet,
+    wallet: connectedWalletInstance,
+    connect: connectWallet,
+    disconnect,
+    error
+  };
+};
+
+// src/hooks/useWalletSubmit.ts
+import { useCallback as useCallback2, useContext as useContext7, useState as useState8 } from "react";
+var useWalletSubmit = () => {
+  const [error, setError] = useState8();
+  const [result, setResult] = useState8();
+  const [submitting, setSubmitting] = useState8(false);
+  const { hasConnectedWallet, connectedWalletInstance } = useContext7(WalletContext);
+  const submitTx = useCallback2(async (signedTx) => {
+    setSubmitting(true);
+    try {
+      if (hasConnectedWallet) {
+        const txHash = await connectedWalletInstance.submitTx(signedTx);
+        setError(void 0);
+        setResult(txHash);
+      }
+      throw new Error(
+        "Please make sure to connect a wallet before calling useWalletSubmit"
+      );
+    } catch (error2) {
+      setError(error2);
+      console.error(error2);
+    }
+    setSubmitting(false);
+  }, []);
+  return {
+    error,
+    result,
+    submitting,
+    submitTx
+  };
+};
+
+// src/cardano-wallet/menu-item.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function MenuItem({
+  icon,
+  label,
+  action,
+  active
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-flex ui-cursor-pointer ui-items-center ui-px-4 ui-py-2 ui-opacity-80 hover:ui-opacity-100 ui-h-16",
+      onClick: action,
+      children: [
+        icon && /* @__PURE__ */ jsx3("img", { className: "ui-pr-2 ui-m-1 ui-h-8", src: icon }),
+        /* @__PURE__ */ jsx3("span", { className: "ui-mr-menu-item ui-text-xl ui-font-normal", children: label.split(" ").map((word) => {
+          return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+        }).join(" ") })
+      ]
+    }
+  );
+}
+
+// src/cardano-wallet/chevron-down.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronDown = () => /* @__PURE__ */ jsx4(
+  "svg",
+  {
+    className: "ui-m-2 ui-h-6",
+    fill: "none",
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx4(
+      "path",
+      {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2",
+        d: "M19 9l-7 7-7-7"
+      }
+    )
+  }
+);
+
+// src/cardano-wallet/wallet-balance.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var WalletBalance = ({
+  connected,
+  connecting,
+  label,
+  wallet
+}) => {
+  const lovelace = useLovelace();
+  return connected && lovelace && wallet?.icon ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("img", { className: "ui-m-2 ui-h-6", src: wallet.icon }),
+    "\u20B3",
+    " ",
+    parseInt((parseInt(lovelace, 10) / 1e6).toString(), 10),
+    ".",
+    /* @__PURE__ */ jsx5("span", { className: "ui-text-xs", children: lovelace.substring(lovelace.length - 6) })
+  ] }) : connected && wallet?.icon ? /* @__PURE__ */ jsx5(Fragment2, { children: /* @__PURE__ */ jsx5("img", { className: "ui-m-2 ui-h-6", src: wallet.icon }) }) : connecting ? /* @__PURE__ */ jsx5(Fragment2, { children: "Connecting..." }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    label,
+    " ",
+    /* @__PURE__ */ jsx5(ChevronDown, {})
+  ] });
+};
+
+// src/cardano-wallet/index.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var CardanoWallet = ({
+  label = "Connect Wallet",
+  onConnected = void 0,
+  isDark = false
+}) => {
+  const [isDarkMode, setIsDarkMode] = useState9(false);
+  const [hideMenuList, setHideMenuList] = useState9(true);
+  const [wallets, setWallets] = useState9([]);
+  const { connect, connecting, connected, disconnect, name } = useWallet();
+  useEffect7(() => {
+    if (connected && onConnected) {
+      onConnected();
+    }
+  }, [connected]);
+  useEffect7(() => {
+    setWallets(BrowserWallet3.getInstalledWallets());
+  }, []);
+  useEffect7(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "w-fit",
+      onMouseEnter: () => setHideMenuList(false),
+      onMouseLeave: () => setHideMenuList(true),
+      children: [
+        /* @__PURE__ */ jsx6(
+          Button,
+          {
+            isDarkMode,
+            hideMenuList,
+            setHideMenuList,
+            children: /* @__PURE__ */ jsx6(
+              WalletBalance,
+              {
+                connected,
+                connecting,
+                label,
+                wallet: wallets.find((wallet) => wallet.name === name)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: `ui-mr-menu-list ui-absolute ui-w-60 ui-rounded-b-md ui-border ui-text-center ui-shadow-sm ui-backdrop-blur ${hideMenuList && "ui-hidden"} ${isDarkMode ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+            children: !connected && wallets.length > 0 ? /* @__PURE__ */ jsx6(Fragment3, { children: wallets.map((wallet, index) => /* @__PURE__ */ jsx6(
+              MenuItem,
+              {
+                icon: wallet.icon,
+                label: wallet.name,
+                action: () => {
+                  connect(wallet.name);
+                  setHideMenuList(!hideMenuList);
+                },
+                active: name === wallet.name
+              },
+              index
+            )) }) : wallets.length === 0 ? /* @__PURE__ */ jsx6("span", { children: "No Wallet Found" }) : /* @__PURE__ */ jsx6(Fragment3, { children: /* @__PURE__ */ jsx6(
+              MenuItem,
+              {
+                active: false,
+                label: "disconnect",
+                action: disconnect,
+                icon: void 0
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/mesh-badge/mesh-logo.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var MeshLogo = () => /* @__PURE__ */ jsx7(
+  "svg",
+  {
+    className: "ui-h-16 ui-p-2",
+    fill: "currentColor",
+    viewBox: "0 0 300 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx7("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
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var MeshBadge = ({ isDark = false }) => /* @__PURE__ */ jsxs4(
+  "a",
+  {
+    className: `ui-flex ui-max-w-fit ui-flex-col ui-items-center ui-rounded-md ui-border ui-border-solid ui-border-current ui-p-1 ui-text-xl ui-font-semibold ui-no-underline ${isDark ? `ui-bg-neutral-950	ui-text-neutral-50` : `ui-bg-neutral-50	ui-text-neutral-950`}`,
+    style: {
+      color: isDark ? "#EEEEEE" : "#111111",
+      backgroundColor: isDark ? "#111111" : "#EEEEEE"
+    },
+    href: "https://meshjs.dev/",
+    rel: "noopener noreferrer",
+    target: "_blank",
+    children: [
+      /* @__PURE__ */ jsx8(MeshLogo, {}),
+      "Mesh"
+    ]
+  }
+);
+
+// src/stake-button/index.tsx
+import { useEffect as useEffect8, useState as useState10 } from "react";
+import { Transaction } from "@meshsdk/transaction";
+import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
+var StakeButton = ({
+  label = "Stake your ADA",
+  isDark = false,
+  poolId,
+  onCheck,
+  onDelegated = void 0
+}) => {
+  const [isDarkMode, setIsDarkMode] = useState10(false);
+  const { connected } = useWallet();
+  useEffect8(() => {
+    setIsDarkMode(isDark);
+  }, [isDark]);
+  return /* @__PURE__ */ jsx9(Fragment4, { children: connected ? /* @__PURE__ */ jsx9(Button, { isDarkMode, children: /* @__PURE__ */ jsx9(
+    Delegate,
+    {
+      poolId,
+      onCheck,
+      onDelegated
+    }
+  ) }) : /* @__PURE__ */ jsx9(CardanoWallet, { label, isDark }) });
+};
+var Delegate = ({
+  poolId,
+  onCheck,
+  onDelegated
+}) => {
+  const { wallet } = useWallet();
+  const rewardAddress = useRewardAddress();
+  const [error, setError] = useState10();
+  const [checking, setChecking] = useState10(false);
+  const [accountInfo, setAccountInfo] = useState10();
+  const [processing, setProcessing] = useState10(false);
+  const [done, setDone] = useState10(false);
+  const checkAccountStatus = async () => {
+    try {
+      setChecking(true);
+      if (rewardAddress) {
+        const info = await onCheck(rewardAddress);
+        setAccountInfo(info);
+      }
+      setChecking(false);
+    } catch (error2) {
+      setError(error2);
+    }
+  };
+  const registerAddress = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const tx = new Transaction({ initiator: wallet }).registerStake(rewardAddress).delegateStake(rewardAddress, poolId);
+        const unsignedTx = await tx.build();
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        if (onDelegated) {
+          onDelegated();
+        }
+        setDone(true);
+      }
+    } catch (error2) {
+      console.error("error", error2);
+      setError(error2);
+    }
+    setProcessing(false);
+  };
+  const delegateStake = async () => {
+    setProcessing(true);
+    setDone(false);
+    try {
+      if (rewardAddress) {
+        const tx = new Transaction({ initiator: wallet }).delegateStake(
+          rewardAddress,
+          poolId
+        );
+        const unsignedTx = await tx.build();
+        const signedTx = await wallet.signTx(unsignedTx);
+        const txHash = await wallet.submitTx(signedTx);
+        setDone(true);
+      }
+    } catch (error2) {
+      console.error("error", error2);
+      setError(error2);
+    }
+    setProcessing(false);
+  };
+  useEffect8(() => {
+    checkAccountStatus();
+  }, [rewardAddress]);
+  if (checking) {
+    return /* @__PURE__ */ jsx9("span", { children: "Checking..." });
+  }
+  if (processing) {
+    return /* @__PURE__ */ jsx9("span", { children: "Loading..." });
+  }
+  if (done) {
+    return /* @__PURE__ */ jsx9("span", { children: "Stake Delegated" });
+  }
+  if (accountInfo?.active) {
+    return accountInfo.poolId === poolId ? /* @__PURE__ */ jsx9("span", { children: "Stake Delegated" }) : (
+      // <span onClick={delegateStake}>Delegate Stake</span>
+      /* @__PURE__ */ jsx9("span", { onClick: registerAddress, children: "Begin Staking" })
+    );
+  }
+  return /* @__PURE__ */ jsx9("span", { onClick: registerAddress, children: "Begin Staking" });
+};
+export {
+  CardanoWallet,
+  MeshBadge,
+  MeshProvider,
+  StakeButton,
+  WalletContext,
+  useAddress,
+  useAssets,
+  useLovelace,
+  useNetwork,
+  useRewardAddress,
+  useWallet,
+  useWalletList,
+  useWalletSubmit
+};

package/package.json

@@ -1,28 +1,34 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.5.29",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "version": "1.5.32",
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./styles.css": "./dist/index.css",
-    ".": "./src/index.ts"
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
   "files": [
     "dist/**"
   ],
-  "license": "MIT",
   "scripts": {
-    "build:mesh": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
+    "build:mesh": "tsup src/index.ts --format esm,cjs --dts && tailwindcss -i ./src/styles.css -o ./dist/index.css",
     "lint": "eslint",
-    "dev": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
+    "dev_old": "tailwindcss -i ./src/styles.css -o ./dist/index.css --watch",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf .turbo && rm -rf dist && rm -rf node_modules",
     "format": "prettier --check . --ignore-path ../../.gitignore"
   },
-  "peerDependencies": {
+  "dependencies": {
     "react": "^18.2.0",
-    "@meshsdk/transaction": "*"
+    "@meshsdk/common": "*",
+    "@meshsdk/transaction": "*",
+    "@meshsdk/wallet": "*"
   },
   "devDependencies": {
     "@meshsdk/eslint-config": "*",
@@ -38,5 +44,6 @@
   "prettier": "@meshsdk/prettier-config",
   "publishConfig": {
     "access": "public"
-  }
-}
+  },
+  "license": "Apache-2.0"
+}