@meshsdk/react 1.6.1 → 1.6.3

package/dist/index.cjs

@@ -38,7 +38,6 @@ 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");
@@ -46,13 +45,17 @@ function Button({
   children,
   isDarkMode = false,
   hideMenuList = false,
-  setHideMenuList
+  setHideMenuList,
+  onMouseEnter,
+  onMouseLeave
 }) {
   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),
+      onMouseEnter,
+      onMouseLeave,
       children
     }
   );
@@ -75,19 +78,24 @@ var useWalletStore = () => {
   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 connectWallet = (0, import_react.useCallback)(
+    async (walletName, extensions) => {
+      setConnectingWallet(true);
+      try {
+        const walletInstance = await import_wallet.BrowserWallet.enable(
+          walletName,
+          extensions
+        );
+        setConnectedWalletInstance(walletInstance);
+        setConnectedWalletName(walletName);
+        setError(void 0);
+      } catch (error2) {
+        setError(error2);
+      }
+      setConnectingWallet(false);
+    },
+    []
+  );
   const disconnect = (0, import_react.useCallback)(() => {
     setConnectedWalletName(INITIAL_STATE.walletName);
     setConnectedWalletInstance(INITIAL_STATE.walletInstance);
@@ -99,7 +107,6 @@ var useWalletStore = () => {
     connectingWallet,
     connectWallet,
     disconnect,
-    // setWallet,
     error
   };
 };
@@ -149,10 +156,17 @@ var useAssets = () => {
 // src/hooks/useWalletList.ts
 var import_react4 = require("react");
 var import_wallet2 = require("@meshsdk/wallet");
-var useWalletList = () => {
+var useWalletList = ({
+  metamask = {
+    network: "preprod"
+  }
+} = {}) => {
   const [wallets, setWallets] = (0, import_react4.useState)([]);
   (0, import_react4.useEffect)(() => {
-    setWallets(import_wallet2.BrowserWallet.getInstalledWallets());
+    async function get() {
+      setWallets(await import_wallet2.BrowserWallet.getAvailableWallets({ metamask }));
+    }
+    get();
   }, []);
   return wallets;
 };
@@ -248,7 +262,6 @@ var useWalletSubmit = () => {
       );
     } catch (error2) {
       setError(error2);
-      console.error(error2);
     }
     setSubmitting(false);
   }, []);
@@ -275,7 +288,7 @@ function MenuItem({
       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) => {
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-mr-menu-item ui-text-xl ui-font-normal ui-text-gray-700 hover:ui-text-black", children: label.split(" ").map((word) => {
           return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
         }).join(" ") })
       ]
@@ -334,29 +347,30 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
-  isDark = false
+  isDark = false,
+  metamask = {
+    network: "preprod"
+  },
+  extensions = []
 }) => {
   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();
+  const wallets = useWalletList({ metamask });
   (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),
+      style: { width: "min-content", zIndex: 50 },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Button,
@@ -370,7 +384,7 @@ var CardanoWallet = ({
                 connected,
                 connecting,
                 label,
-                wallet: wallets.find((wallet) => wallet.name === name)
+                wallet: wallets.find((wallet) => wallet.id === name)
               }
             )
           }
@@ -379,16 +393,17 @@ var CardanoWallet = ({
           "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`}`,
+            style: { zIndex: 50 },
             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);
+                  connect(wallet.id, extensions);
                   setHideMenuList(!hideMenuList);
                 },
-                active: name === wallet.name
+                active: name === wallet.id
               },
               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)(
@@ -472,7 +487,7 @@ var Delegate = ({
 }) => {
   const { wallet } = useWallet();
   const rewardAddress = useRewardAddress();
-  const [error, setError] = (0, import_react11.useState)();
+  const [_, 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);
@@ -485,8 +500,8 @@ var Delegate = ({
         setAccountInfo(info);
       }
       setChecking(false);
-    } catch (error2) {
-      setError(error2);
+    } catch (error) {
+      setError(error);
     }
   };
   const registerAddress = async () => {
@@ -497,35 +512,14 @@ var Delegate = ({
         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);
+        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);
+    } catch (error) {
+      setError(error);
     }
     setProcessing(false);
   };

package/dist/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.9 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -696,6 +696,11 @@ video {
   font-weight: 600;
 }
 
+.ui-text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .ui-text-neutral-50 {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity));
@@ -726,6 +731,11 @@ video {
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
+.hover\:ui-text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:ui-opacity-100:hover {
   opacity: 1;
 }

package/dist/index.d.cts

@@ -8,15 +8,19 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    metamask?: {
+        network: string;
+    };
+    extensions?: number[];
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, metamask, extensions, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 interface WalletContext {
     hasConnectedWallet: boolean;
     connectedWalletInstance: BrowserWallet;
     connectedWalletName: string;
     connectingWallet: boolean;
-    connectWallet?: (walletName: string) => Promise<void>;
+    connectWallet?: (walletName: string, extensions?: number[]) => Promise<void>;
     disconnect?: () => void;
     error?: unknown;
 }
@@ -31,7 +35,11 @@ declare const useAddress: (accountId?: number) => string | undefined;
 
 declare const useAssets: () => Asset[] | undefined;
 
-declare const useWalletList: () => Wallet[];
+declare const useWalletList: ({ metamask, }?: {
+    metamask?: {
+        network: string;
+    };
+}) => Wallet[];
 
 declare const useLovelace: () => string | undefined;
 
@@ -44,7 +52,7 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_wallet.BrowserWallet;
-    connect: (walletName: string) => Promise<void>;
+    connect: (walletName: string, extensions?: number[]) => Promise<void>;
     disconnect: () => void;
     error: unknown;
 };

package/dist/index.d.ts

@@ -8,15 +8,19 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    metamask?: {
+        network: string;
+    };
+    extensions?: number[];
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, metamask, extensions, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 interface WalletContext {
     hasConnectedWallet: boolean;
     connectedWalletInstance: BrowserWallet;
     connectedWalletName: string;
     connectingWallet: boolean;
-    connectWallet?: (walletName: string) => Promise<void>;
+    connectWallet?: (walletName: string, extensions?: number[]) => Promise<void>;
     disconnect?: () => void;
     error?: unknown;
 }
@@ -31,7 +35,11 @@ declare const useAddress: (accountId?: number) => string | undefined;
 
 declare const useAssets: () => Asset[] | undefined;
 
-declare const useWalletList: () => Wallet[];
+declare const useWalletList: ({ metamask, }?: {
+    metamask?: {
+        network: string;
+    };
+}) => Wallet[];
 
 declare const useLovelace: () => string | undefined;
 
@@ -44,7 +52,7 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_wallet.BrowserWallet;
-    connect: (walletName: string) => Promise<void>;
+    connect: (walletName: string, extensions?: number[]) => Promise<void>;
     disconnect: () => void;
     error: unknown;
 };

package/dist/index.js

@@ -1,6 +1,5 @@
 // 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";
@@ -8,13 +7,17 @@ function Button({
   children,
   isDarkMode = false,
   hideMenuList = false,
-  setHideMenuList
+  setHideMenuList,
+  onMouseEnter,
+  onMouseLeave
 }) {
   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),
+      onMouseEnter,
+      onMouseLeave,
       children
     }
   );
@@ -37,19 +40,24 @@ var useWalletStore = () => {
   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 connectWallet = useCallback(
+    async (walletName, extensions) => {
+      setConnectingWallet(true);
+      try {
+        const walletInstance = await BrowserWallet.enable(
+          walletName,
+          extensions
+        );
+        setConnectedWalletInstance(walletInstance);
+        setConnectedWalletName(walletName);
+        setError(void 0);
+      } catch (error2) {
+        setError(error2);
+      }
+      setConnectingWallet(false);
+    },
+    []
+  );
   const disconnect = useCallback(() => {
     setConnectedWalletName(INITIAL_STATE.walletName);
     setConnectedWalletInstance(INITIAL_STATE.walletInstance);
@@ -61,7 +69,6 @@ var useWalletStore = () => {
     connectingWallet,
     connectWallet,
     disconnect,
-    // setWallet,
     error
   };
 };
@@ -111,10 +118,17 @@ var useAssets = () => {
 // src/hooks/useWalletList.ts
 import { useEffect as useEffect3, useState as useState4 } from "react";
 import { BrowserWallet as BrowserWallet2 } from "@meshsdk/wallet";
-var useWalletList = () => {
+var useWalletList = ({
+  metamask = {
+    network: "preprod"
+  }
+} = {}) => {
   const [wallets, setWallets] = useState4([]);
   useEffect3(() => {
-    setWallets(BrowserWallet2.getInstalledWallets());
+    async function get() {
+      setWallets(await BrowserWallet2.getAvailableWallets({ metamask }));
+    }
+    get();
   }, []);
   return wallets;
 };
@@ -210,7 +224,6 @@ var useWalletSubmit = () => {
       );
     } catch (error2) {
       setError(error2);
-      console.error(error2);
     }
     setSubmitting(false);
   }, []);
@@ -237,7 +250,7 @@ function MenuItem({
       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) => {
+        /* @__PURE__ */ jsx3("span", { className: "ui-mr-menu-item ui-text-xl ui-font-normal ui-text-gray-700 hover:ui-text-black", children: label.split(" ").map((word) => {
           return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
         }).join(" ") })
       ]
@@ -296,29 +309,30 @@ import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-run
 var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
-  isDark = false
+  isDark = false,
+  metamask = {
+    network: "preprod"
+  },
+  extensions = []
 }) => {
   const [isDarkMode, setIsDarkMode] = useState9(false);
   const [hideMenuList, setHideMenuList] = useState9(true);
-  const [wallets, setWallets] = useState9([]);
   const { connect, connecting, connected, disconnect, name } = useWallet();
+  const wallets = useWalletList({ metamask });
   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),
+      style: { width: "min-content", zIndex: 50 },
       children: [
         /* @__PURE__ */ jsx6(
           Button,
@@ -332,7 +346,7 @@ var CardanoWallet = ({
                 connected,
                 connecting,
                 label,
-                wallet: wallets.find((wallet) => wallet.name === name)
+                wallet: wallets.find((wallet) => wallet.id === name)
               }
             )
           }
@@ -341,16 +355,17 @@ var CardanoWallet = ({
           "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`}`,
+            style: { zIndex: 50 },
             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);
+                  connect(wallet.id, extensions);
                   setHideMenuList(!hideMenuList);
                 },
-                active: name === wallet.name
+                active: name === wallet.id
               },
               index
             )) }) : wallets.length === 0 ? /* @__PURE__ */ jsx6("span", { children: "No Wallet Found" }) : /* @__PURE__ */ jsx6(Fragment3, { children: /* @__PURE__ */ jsx6(
@@ -434,7 +449,7 @@ var Delegate = ({
 }) => {
   const { wallet } = useWallet();
   const rewardAddress = useRewardAddress();
-  const [error, setError] = useState10();
+  const [_, setError] = useState10();
   const [checking, setChecking] = useState10(false);
   const [accountInfo, setAccountInfo] = useState10();
   const [processing, setProcessing] = useState10(false);
@@ -447,8 +462,8 @@ var Delegate = ({
         setAccountInfo(info);
       }
       setChecking(false);
-    } catch (error2) {
-      setError(error2);
+    } catch (error) {
+      setError(error);
     }
   };
   const registerAddress = async () => {
@@ -459,35 +474,14 @@ var Delegate = ({
         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);
+        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);
+    } catch (error) {
+      setError(error);
     }
     setProcessing(false);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -18,13 +18,14 @@
     "dist/**"
   ],
   "scripts": {
+    "build:docs": "typedoc src/index.ts --json ../../apps/docs/src/data/mesh-react.json",
     "build:mesh": "tsup src/index.ts --format esm,cjs --dts && tailwindcss -i ./src/styles.css -o ./dist/index.css",
-    "lint": "eslint",
-    "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"
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "pack": "npm pack --pack-destination=./dist",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -33,9 +34,7 @@
     "@meshsdk/wallet": "*"
   },
   "devDependencies": {
-    "@meshsdk/eslint-config": "*",
-    "@meshsdk/tailwind-config": "*",
-    "@meshsdk/typescript-config": "*",
+    "@meshsdk/configs": "*",
     "@types/react": "^18.2.61",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
@@ -43,7 +42,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "latest"
   },
-  "prettier": "@meshsdk/prettier-config",
+  "prettier": "@meshsdk/configs/prettier",
   "publishConfig": {
     "access": "public"
   },
@@ -55,4 +54,4 @@
     "blockchain",
     "sdk"
   ]
-}
+}