@meshsdk/react 1.6.1 → 1.6.2

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
     }
   );
@@ -149,10 +152,15 @@ var useAssets = () => {
 // src/hooks/useWalletList.ts
 var import_react4 = require("react");
 var import_wallet2 = require("@meshsdk/wallet");
-var useWalletList = () => {
+var useWalletList = ({
+  nufiNetwork = "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({ nufiNetwork }));
+    }
+    get();
   }, []);
   return wallets;
 };
@@ -334,29 +342,27 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var CardanoWallet = ({
   label = "Connect Wallet",
   onConnected = void 0,
-  isDark = false
+  isDark = false,
+  nufiNetwork = "preprod"
 }) => {
   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({ nufiNetwork });
   (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 +376,7 @@ var CardanoWallet = ({
                 connected,
                 connecting,
                 label,
-                wallet: wallets.find((wallet) => wallet.name === name)
+                wallet: wallets.find((wallet) => wallet.id === name)
               }
             )
           }
@@ -385,10 +391,10 @@ var CardanoWallet = ({
                 icon: wallet.icon,
                 label: wallet.name,
                 action: () => {
-                  connect(wallet.name);
+                  connect(wallet.id);
                   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)(

package/dist/index.d.cts

@@ -8,8 +8,9 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    nufiNetwork?: string;
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, nufiNetwork, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 interface WalletContext {
     hasConnectedWallet: boolean;
@@ -31,7 +32,9 @@ declare const useAddress: (accountId?: number) => string | undefined;
 
 declare const useAssets: () => Asset[] | undefined;
 
-declare const useWalletList: () => Wallet[];
+declare const useWalletList: ({ nufiNetwork, }?: {
+    nufiNetwork?: string;
+}) => Wallet[];
 
 declare const useLovelace: () => string | undefined;
 

package/dist/index.d.ts

@@ -8,8 +8,9 @@ interface ButtonProps$1 {
     label?: string;
     onConnected?: Function;
     isDark?: boolean;
+    nufiNetwork?: string;
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, nufiNetwork, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 interface WalletContext {
     hasConnectedWallet: boolean;
@@ -31,7 +32,9 @@ declare const useAddress: (accountId?: number) => string | undefined;
 
 declare const useAssets: () => Asset[] | undefined;
 
-declare const useWalletList: () => Wallet[];
+declare const useWalletList: ({ nufiNetwork, }?: {
+    nufiNetwork?: string;
+}) => Wallet[];
 
 declare const useLovelace: () => string | undefined;
 

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
     }
   );
@@ -111,10 +114,15 @@ 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 = ({
+  nufiNetwork = "preprod"
+} = {}) => {
   const [wallets, setWallets] = useState4([]);
   useEffect3(() => {
-    setWallets(BrowserWallet2.getInstalledWallets());
+    async function get() {
+      setWallets(await BrowserWallet2.getAvailableWallets({ nufiNetwork }));
+    }
+    get();
   }, []);
   return wallets;
 };
@@ -296,29 +304,27 @@ 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,
+  nufiNetwork = "preprod"
 }) => {
   const [isDarkMode, setIsDarkMode] = useState9(false);
   const [hideMenuList, setHideMenuList] = useState9(true);
-  const [wallets, setWallets] = useState9([]);
   const { connect, connecting, connected, disconnect, name } = useWallet();
+  const wallets = useWalletList({ nufiNetwork });
   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 +338,7 @@ var CardanoWallet = ({
                 connected,
                 connecting,
                 label,
-                wallet: wallets.find((wallet) => wallet.name === name)
+                wallet: wallets.find((wallet) => wallet.id === name)
               }
             )
           }
@@ -347,10 +353,10 @@ var CardanoWallet = ({
                 icon: wallet.icon,
                 label: wallet.name,
                 action: () => {
-                  connect(wallet.name);
+                  connect(wallet.id);
                   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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshsdk/react",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",