@meshsdk/react 1.9.0-beta.25 → 1.9.0-beta.26

package/dist/index.cjs

@@ -23638,6 +23638,7 @@ var import_react2 = require("react");
 // src/contexts/WalletContext.ts
 var import_react = require("react");
 var import_wallet = require("@meshsdk/wallet");
+var import_web3_sdk = require("@meshsdk/web3-sdk");
 var INITIAL_STATE = {
   walletName: void 0,
   walletInstance: {}
@@ -23651,11 +23652,13 @@ var useWalletStore = () => {
   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 [web3Services, setWeb3Services] = (0, import_react.useState)(void 0);
   const connectWallet = (0, import_react.useCallback)(
-    async (walletName, extensions, persist) => {
+    async (walletName, persist) => {
       setConnectingWallet(true);
       setState("CONNECTING" /* CONNECTING */);
       try {
+        const extensions = import_wallet.BrowserWallet.getSupportedExtensions(walletName);
         const walletInstance = await import_wallet.BrowserWallet.enable(
           walletName,
           extensions
@@ -23687,10 +23690,16 @@ var useWalletStore = () => {
     localStorage.removeItem(localstoragePersist);
   }, []);
   const setWallet = (0, import_react.useCallback)(
-    async (walletInstance, walletName) => {
+    async (walletInstance, walletName, persist) => {
       setConnectedWalletInstance(walletInstance);
       setConnectedWalletName(walletName);
       setState("CONNECTED" /* CONNECTED */);
+      if (persist) {
+        localStorage.setItem(
+          localstoragePersist,
+          JSON.stringify({ walletName, ...persist })
+        );
+      }
     },
     []
   );
@@ -23714,7 +23723,22 @@ var useWalletStore = () => {
       const persist2 = JSON.parse(
         localStorage.getItem(localstoragePersist) || ""
       );
-      connectWallet(persist2.walletName);
+      if (persist2.walletName == "Mesh Web3 Services" && web3Services) {
+        import_web3_sdk.Web3Wallet.initWallet({
+          networkId: web3Services.networkId,
+          address: persist2.walletAddress,
+          fetcher: web3Services.fetcher,
+          submitter: web3Services.submitter,
+          projectId: web3Services.projectId,
+          appUrl: web3Services.appUrl
+        }).then((wallet) => {
+          setConnectedWalletInstance(wallet);
+          setConnectedWalletName(persist2.walletName);
+          setState("CONNECTED" /* CONNECTED */);
+        });
+      } else {
+        connectWallet(persist2.walletName);
+      }
     }
   }, [persistSession]);
   return {
@@ -23726,6 +23750,7 @@ var useWalletStore = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -23744,6 +23769,8 @@ var WalletContext = (0, import_react.createContext)({
   },
   setPersist: () => {
   },
+  setWeb3Services: () => {
+  },
   address: "",
   state: "NOT_CONNECTED" /* NOT_CONNECTED */
 });
@@ -23865,6 +23892,7 @@ var useWallet = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -23883,6 +23911,7 @@ var useWallet = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -24345,7 +24374,8 @@ function WalletIcon({
   icon,
   name,
   action,
-  iconReactNode
+  iconReactNode,
+  loading = false
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { delayDuration: 0, defaultOpen: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
@@ -24353,9 +24383,11 @@ function WalletIcon({
       {
         className: "mesh-flex mesh-items-center mesh-justify-center mesh-rounded-lg mesh-w-10 mesh-h-10 mesh-bg-neutral-50 mesh-border mesh-border-zinc-700 hover:mesh-border-zinc-200 mesh-cursor-pointer",
         onClick: action,
+        disabled: loading,
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
-          iconReactNode && iconReactNode
+          icon && !loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
+          !loading && iconReactNode && iconReactNode,
+          loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-black", children: "..." })
         ]
       }
     ) }),
@@ -24365,7 +24397,7 @@ function WalletIcon({
 
 // src/cardano-wallet/web3-services.tsx
 var import_react11 = require("react");
-var import_web3_sdk = require("@meshsdk/web3-sdk");
+var import_web3_sdk2 = require("@meshsdk/web3-sdk");
 
 // src/common/icons/icon-discord.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -24391,7 +24423,8 @@ function IconDiscord() {
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Web3Services({
   options,
-  setOpen
+  setOpen,
+  persist
 }) {
   const { setWallet } = useWallet();
   const [loading, setLoading] = (0, import_react11.useState)(false);
@@ -24404,8 +24437,14 @@ function Web3Services({
       appUrl: options.appUrl,
       projectId: options.projectId
     };
-    const wallet = await import_web3_sdk.Web3Wallet.enable(_options);
-    setWallet(wallet, "Mesh Web3 Services");
+    const wallet = await import_web3_sdk2.Web3Wallet.enable(_options);
+    setWallet(
+      wallet,
+      "Mesh Web3 Services",
+      persist ? {
+        walletAddress: await wallet.getChangeAddress()
+      } : void 0
+    );
     setLoading(false);
     setOpen(false);
   }
@@ -24414,7 +24453,8 @@ function Web3Services({
     {
       iconReactNode: IconDiscord(),
       name: `Discord`,
-      action: () => loadWallet()
+      action: () => loadWallet(),
+      loading
     }
   );
 }
@@ -24423,7 +24463,6 @@ function Web3Services({
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function ScreenMain({
   injectFn,
-  extensions,
   setOpen,
   setScreen,
   persist,
@@ -24442,13 +24481,20 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, extensions, persist);
+          connect2(wallet.id, persist);
           setOpen(false);
         }
       },
       index
     )),
-    web3Services && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Web3Services, { options: web3Services, setOpen }),
+    web3Services && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Web3Services,
+      {
+        options: web3Services,
+        setOpen,
+        persist
+      }
+    ),
     webauthn && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       WalletIcon,
       {
@@ -24684,7 +24730,6 @@ var CardanoWallet = ({
   onConnected = void 0,
   isDark = false,
   persist = false,
-  extensions = [],
   injectFn = void 0,
   cardanoPeerConnect = void 0,
   burnerWallet = void 0,
@@ -24694,10 +24739,11 @@ var CardanoWallet = ({
 }) => {
   const [open, setOpen] = (0, import_react14.useState)(false);
   const [screen, setScreen] = (0, import_react14.useState)("main");
-  const { wallet, connected, setPersist } = useWallet();
+  const { wallet, connected, setPersist, setWeb3Services } = useWallet();
   (0, import_react14.useEffect)(() => {
     setPersist(persist);
-  }, [persist]);
+    if (web3Services) setWeb3Services(web3Services);
+  }, []);
   (0, import_react14.useEffect)(() => {
     if (connected) {
       if (onConnected) onConnected();
@@ -24716,7 +24762,6 @@ var CardanoWallet = ({
             ScreenMain,
             {
               injectFn,
-              extensions,
               setOpen,
               setScreen,
               persist,

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _meshsdk_common from '@meshsdk/common';
 import { IFetcher, ISubmitter, IWallet, Asset, Wallet, AccountInfo } from '@meshsdk/common';
+import * as _meshsdk_web3_sdk from '@meshsdk/web3-sdk';
 import { InitWeb3WalletOptions } from '@meshsdk/web3-sdk';
 import * as react from 'react';
 
@@ -9,7 +10,6 @@ interface ButtonProps$1 {
     onConnected?: Function;
     isDark?: boolean;
     persist?: boolean;
-    extensions?: number[];
     injectFn?: () => Promise<void>;
     cardanoPeerConnect?: {
         dAppInfo: {
@@ -30,7 +30,7 @@ interface ButtonProps$1 {
     showDownload?: boolean;
     web3Services?: InitWeb3WalletOptions;
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, persist, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, showDownload, web3Services, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, persist, injectFn, cardanoPeerConnect, burnerWallet, webauthn, showDownload, web3Services, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 declare enum WalletState {
     NOT_CONNECTED = "NOT_CONNECTED",
@@ -42,10 +42,13 @@ interface WalletContext {
     connectedWalletInstance: IWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
-    connectWallet: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
+    connectWallet: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: IWallet, walletName: string) => void;
+    setWallet: (walletInstance: IWallet, walletName: string, persist?: {
+        [key: string]: any;
+    }) => void;
     setPersist: (persist: boolean) => void;
+    setWeb3Services: (web3Services: InitWeb3WalletOptions | undefined) => void;
     error?: unknown;
     address: string;
     state: WalletState;
@@ -76,10 +79,13 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_common.IWallet;
-    connect: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
+    connect: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string) => void;
+    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string, persist?: {
+        [key: string]: any;
+    }) => void;
     setPersist: (persist: boolean) => void;
+    setWeb3Services: (web3Services: _meshsdk_web3_sdk.InitWeb3WalletOptions | undefined) => void;
     error: unknown;
     address: string;
     state: WalletState;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _meshsdk_common from '@meshsdk/common';
 import { IFetcher, ISubmitter, IWallet, Asset, Wallet, AccountInfo } from '@meshsdk/common';
+import * as _meshsdk_web3_sdk from '@meshsdk/web3-sdk';
 import { InitWeb3WalletOptions } from '@meshsdk/web3-sdk';
 import * as react from 'react';
 
@@ -9,7 +10,6 @@ interface ButtonProps$1 {
     onConnected?: Function;
     isDark?: boolean;
     persist?: boolean;
-    extensions?: number[];
     injectFn?: () => Promise<void>;
     cardanoPeerConnect?: {
         dAppInfo: {
@@ -30,7 +30,7 @@ interface ButtonProps$1 {
     showDownload?: boolean;
     web3Services?: InitWeb3WalletOptions;
 }
-declare const CardanoWallet: ({ label, onConnected, isDark, persist, extensions, injectFn, cardanoPeerConnect, burnerWallet, webauthn, showDownload, web3Services, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
+declare const CardanoWallet: ({ label, onConnected, isDark, persist, injectFn, cardanoPeerConnect, burnerWallet, webauthn, showDownload, web3Services, }: ButtonProps$1) => react_jsx_runtime.JSX.Element;
 
 declare enum WalletState {
     NOT_CONNECTED = "NOT_CONNECTED",
@@ -42,10 +42,13 @@ interface WalletContext {
     connectedWalletInstance: IWallet;
     connectedWalletName: string | undefined;
     connectingWallet: boolean;
-    connectWallet: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
+    connectWallet: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: IWallet, walletName: string) => void;
+    setWallet: (walletInstance: IWallet, walletName: string, persist?: {
+        [key: string]: any;
+    }) => void;
     setPersist: (persist: boolean) => void;
+    setWeb3Services: (web3Services: InitWeb3WalletOptions | undefined) => void;
     error?: unknown;
     address: string;
     state: WalletState;
@@ -76,10 +79,13 @@ declare const useWallet: () => {
     connecting: boolean;
     connected: boolean;
     wallet: _meshsdk_common.IWallet;
-    connect: (walletName: string, extensions?: number[], persist?: boolean) => Promise<void>;
+    connect: (walletName: string, persist?: boolean) => Promise<void>;
     disconnect: () => void;
-    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string) => void;
+    setWallet: (walletInstance: _meshsdk_common.IWallet, walletName: string, persist?: {
+        [key: string]: any;
+    }) => void;
     setPersist: (persist: boolean) => void;
+    setWeb3Services: (web3Services: _meshsdk_web3_sdk.InitWeb3WalletOptions | undefined) => void;
     error: unknown;
     address: string;
     state: WalletState;

package/dist/index.js

@@ -23613,6 +23613,7 @@ import { useContext, useEffect as useEffect2, useState as useState2 } from "reac
 // src/contexts/WalletContext.ts
 import { createContext, useCallback, useEffect, useState } from "react";
 import { BrowserWallet } from "@meshsdk/wallet";
+import { Web3Wallet } from "@meshsdk/web3-sdk";
 var INITIAL_STATE = {
   walletName: void 0,
   walletInstance: {}
@@ -23626,11 +23627,13 @@ var useWalletStore = () => {
   const [address, setAddress] = useState("");
   const [connectedWalletInstance, setConnectedWalletInstance] = useState(INITIAL_STATE.walletInstance);
   const [connectedWalletName, setConnectedWalletName] = useState(INITIAL_STATE.walletName);
+  const [web3Services, setWeb3Services] = useState(void 0);
   const connectWallet = useCallback(
-    async (walletName, extensions, persist) => {
+    async (walletName, persist) => {
       setConnectingWallet(true);
       setState("CONNECTING" /* CONNECTING */);
       try {
+        const extensions = BrowserWallet.getSupportedExtensions(walletName);
         const walletInstance = await BrowserWallet.enable(
           walletName,
           extensions
@@ -23662,10 +23665,16 @@ var useWalletStore = () => {
     localStorage.removeItem(localstoragePersist);
   }, []);
   const setWallet = useCallback(
-    async (walletInstance, walletName) => {
+    async (walletInstance, walletName, persist) => {
       setConnectedWalletInstance(walletInstance);
       setConnectedWalletName(walletName);
       setState("CONNECTED" /* CONNECTED */);
+      if (persist) {
+        localStorage.setItem(
+          localstoragePersist,
+          JSON.stringify({ walletName, ...persist })
+        );
+      }
     },
     []
   );
@@ -23689,7 +23698,22 @@ var useWalletStore = () => {
       const persist2 = JSON.parse(
         localStorage.getItem(localstoragePersist) || ""
       );
-      connectWallet(persist2.walletName);
+      if (persist2.walletName == "Mesh Web3 Services" && web3Services) {
+        Web3Wallet.initWallet({
+          networkId: web3Services.networkId,
+          address: persist2.walletAddress,
+          fetcher: web3Services.fetcher,
+          submitter: web3Services.submitter,
+          projectId: web3Services.projectId,
+          appUrl: web3Services.appUrl
+        }).then((wallet) => {
+          setConnectedWalletInstance(wallet);
+          setConnectedWalletName(persist2.walletName);
+          setState("CONNECTED" /* CONNECTED */);
+        });
+      } else {
+        connectWallet(persist2.walletName);
+      }
     }
   }, [persistSession]);
   return {
@@ -23701,6 +23725,7 @@ var useWalletStore = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -23719,6 +23744,8 @@ var WalletContext = createContext({
   },
   setPersist: () => {
   },
+  setWeb3Services: () => {
+  },
   address: "",
   state: "NOT_CONNECTED" /* NOT_CONNECTED */
 });
@@ -23840,6 +23867,7 @@ var useWallet = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -23858,6 +23886,7 @@ var useWallet = () => {
     disconnect,
     setWallet,
     setPersist,
+    setWeb3Services,
     error,
     address,
     state
@@ -24324,7 +24353,8 @@ function WalletIcon({
   icon,
   name,
   action,
-  iconReactNode
+  iconReactNode,
+  loading = false
 }) {
   return /* @__PURE__ */ jsxs9(Tooltip, { delayDuration: 0, defaultOpen: false, children: [
     /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9(
@@ -24332,9 +24362,11 @@ function WalletIcon({
       {
         className: "mesh-flex mesh-items-center mesh-justify-center mesh-rounded-lg mesh-w-10 mesh-h-10 mesh-bg-neutral-50 mesh-border mesh-border-zinc-700 hover:mesh-border-zinc-200 mesh-cursor-pointer",
         onClick: action,
+        disabled: loading,
         children: [
-          icon && /* @__PURE__ */ jsx13("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
-          iconReactNode && iconReactNode
+          icon && !loading && /* @__PURE__ */ jsx13("img", { src: icon, alt: name, className: "mesh-w-8 mesh-h-8" }),
+          !loading && iconReactNode && iconReactNode,
+          loading && /* @__PURE__ */ jsx13("span", { className: "text-black", children: "..." })
         ]
       }
     ) }),
@@ -24344,7 +24376,7 @@ function WalletIcon({
 
 // src/cardano-wallet/web3-services.tsx
 import { useState as useState10 } from "react";
-import { Web3Wallet } from "@meshsdk/web3-sdk";
+import { Web3Wallet as Web3Wallet2 } from "@meshsdk/web3-sdk";
 
 // src/common/icons/icon-discord.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -24370,7 +24402,8 @@ function IconDiscord() {
 import { jsx as jsx15 } from "react/jsx-runtime";
 function Web3Services({
   options,
-  setOpen
+  setOpen,
+  persist
 }) {
   const { setWallet } = useWallet();
   const [loading, setLoading] = useState10(false);
@@ -24383,8 +24416,14 @@ function Web3Services({
       appUrl: options.appUrl,
       projectId: options.projectId
     };
-    const wallet = await Web3Wallet.enable(_options);
-    setWallet(wallet, "Mesh Web3 Services");
+    const wallet = await Web3Wallet2.enable(_options);
+    setWallet(
+      wallet,
+      "Mesh Web3 Services",
+      persist ? {
+        walletAddress: await wallet.getChangeAddress()
+      } : void 0
+    );
     setLoading(false);
     setOpen(false);
   }
@@ -24393,7 +24432,8 @@ function Web3Services({
     {
       iconReactNode: IconDiscord(),
       name: `Discord`,
-      action: () => loadWallet()
+      action: () => loadWallet(),
+      loading
     }
   );
 }
@@ -24402,7 +24442,6 @@ function Web3Services({
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function ScreenMain({
   injectFn,
-  extensions,
   setOpen,
   setScreen,
   persist,
@@ -24421,13 +24460,20 @@ function ScreenMain({
         icon: wallet.icon,
         name: wallet.name,
         action: () => {
-          connect2(wallet.id, extensions, persist);
+          connect2(wallet.id, persist);
           setOpen(false);
         }
       },
       index
     )),
-    web3Services && /* @__PURE__ */ jsx16(Web3Services, { options: web3Services, setOpen }),
+    web3Services && /* @__PURE__ */ jsx16(
+      Web3Services,
+      {
+        options: web3Services,
+        setOpen,
+        persist
+      }
+    ),
     webauthn && /* @__PURE__ */ jsx16(
       WalletIcon,
       {
@@ -24663,7 +24709,6 @@ var CardanoWallet = ({
   onConnected = void 0,
   isDark = false,
   persist = false,
-  extensions = [],
   injectFn = void 0,
   cardanoPeerConnect = void 0,
   burnerWallet = void 0,
@@ -24673,10 +24718,11 @@ var CardanoWallet = ({
 }) => {
   const [open, setOpen] = useState13(false);
   const [screen, setScreen] = useState13("main");
-  const { wallet, connected, setPersist } = useWallet();
+  const { wallet, connected, setPersist, setWeb3Services } = useWallet();
   useEffect10(() => {
     setPersist(persist);
-  }, [persist]);
+    if (web3Services) setWeb3Services(web3Services);
+  }, []);
   useEffect10(() => {
     if (connected) {
       if (onConnected) onConnected();
@@ -24695,7 +24741,6 @@ var CardanoWallet = ({
             ScreenMain,
             {
               injectFn,
-              extensions,
               setOpen,
               setScreen,
               persist,

package/package.json

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