@web3auth/modal 10.0.0-beta.1 → 10.0.0-beta.12

package/README.md

@@ -43,7 +43,7 @@ Hop on to the [Web3Auth Dashboard](https://dashboard.web3auth.io/) and create a
 Web3Auth needs to initialise as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialisation is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for Ethereum blockchain will look like this:
 
 ```js
-import { Web3Auth } from "@web3auth/modal";
+import { Web3Auth } from "web3auth";
 
 //Initialize within your constructor
 const web3auth = new Web3Auth({
@@ -54,7 +54,7 @@ const web3auth = new Web3Auth({
   },
 });
 
-await web3auth.initModal();
+await web3auth.init();
 ```
 
 ### Login your User

package/dist/lib.cjs/packages/modal/src/config.js

@@ -2,18 +2,18 @@
 
 var noModal = require('@web3auth/no-modal');
 
+const version = "10.0.0-beta.12";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {
     [noModal.EVM_CONNECTORS.AUTH]: {
       label: "Auth",
-      showOnModal: true,
-      showOnMobile: true,
-      showOnDesktop: true
+      showOnModal: true
     }
   }
 };
 const walletRegistryUrl = "https://assets.web3auth.io/v1/wallet-registry.json";
 
 exports.defaultConnectorsModalConfig = defaultConnectorsModalConfig;
+exports.version = version;
 exports.walletRegistryUrl = walletRegistryUrl;

package/dist/lib.cjs/packages/modal/src/connectors/coinbase-connector/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var coinbaseConnector = require('@web3auth/no-modal/connectors/coinbase-connector');
+
+
+
+Object.keys(coinbaseConnector).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return coinbaseConnector[k]; }
+	});
+});

package/dist/lib.cjs/packages/modal/src/index.js

@@ -7,6 +7,7 @@ var noModal = require('@web3auth/no-modal');
 
 
 exports.defaultConnectorsModalConfig = config.defaultConnectorsModalConfig;
+exports.version = config.version;
 exports.walletRegistryUrl = config.walletRegistryUrl;
 exports.Web3Auth = modalManager.Web3Auth;
 Object.keys(noModal).forEach(function (k) {

package/dist/lib.cjs/packages/modal/src/modalManager.js

@@ -2,6 +2,7 @@
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
 var deepmerge = require('deepmerge');
 var config = require('./config.js');
@@ -11,8 +12,8 @@ var loginModal = require('./ui/loginModal.js');
 var utils = require('./ui/utils.js');
 
 class Web3Auth extends noModal.Web3AuthNoModal {
-  constructor(options) {
-    super(options);
+  constructor(options, initialState) {
+    super(options, initialState);
     _defineProperty(this, "loginModal", void 0);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", noModal.cloneDeep(config.defaultConnectorsModalConfig));
@@ -26,14 +27,14 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     });
     _defineProperty(this, "onSocialLogin", async params => {
       try {
-        await this.connectTo(params.connector, params.loginParams);
+        await this.connectTo(noModal.WALLET_CONNECTORS.AUTH, params.loginParams, noModal.LOGIN_MODE.MODAL);
       } catch (error) {
         noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
     });
     _defineProperty(this, "onExternalWalletLogin", async params => {
       try {
-        await this.connectTo(params.connector, params.loginParams);
+        await this.connectTo(params.connector, params.loginParams, noModal.LOGIN_MODE.MODAL);
       } catch (error) {
         noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
@@ -41,6 +42,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     _defineProperty(this, "onModalVisibility", async visibility => {
       noModal.log.debug("is login modal visible", visibility);
       this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      // handle WC session refresh
       const wcConnector = this.getConnector(noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
       if (wcConnector) {
         const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
@@ -62,25 +64,50 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           wcConnector.status = noModal.CONNECTOR_STATUS.READY;
         }
       }
+      // handle MM session refresh if MM is not injected
+      const metamaskConnector = this.getConnector(noModal.WALLET_CONNECTORS.METAMASK);
+      if (metamaskConnector && !metamaskConnector.isInjected) {
+        const status = metamaskConnector === null || metamaskConnector === void 0 ? void 0 : metamaskConnector.status;
+        noModal.log.debug("trying refreshing MM session", visibility, status);
+        if (visibility && (status === noModal.CONNECTOR_STATUS.READY || status === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.log.debug("refreshing MM session");
+          // refreshing session for MM whenever modal is opened.
+          try {
+            const initialChain = this.getInitialChainIdForConnector(metamaskConnector);
+            metamaskConnector.connect({
+              chainId: initialChain.chainId
+            });
+          } catch (error) {
+            noModal.log.error(`Error while connecting to MM`, error);
+          }
+        }
+        if (!visibility && this.status === noModal.CONNECTOR_STATUS.CONNECTED && (status === noModal.CONNECTOR_STATUS.READY || status === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.log.debug("this stops MM connector from trying to reconnect once proposal expires");
+          metamaskConnector.status = noModal.CONNECTOR_STATUS.READY;
+        }
+      }
+    });
+    _defineProperty(this, "getChainNamespaces", () => {
+      var _this$coreOptions$cha;
+      return [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])];
     });
     this.options = _objectSpread({}, options);
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
     noModal.log.info("modalConfig", this.modalConfig);
   }
-  async initModal() {
-    var _this$coreOptions$cha;
+  async init(options) {
+    const {
+      signal
+    } = options || {};
     super.checkInitRequirements();
     // get project config and wallet registry
     const {
       projectConfig,
       walletRegistry
     } = await this.getProjectAndWalletConfig();
-    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
-    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
-    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig || {});
     // init config
+    this.initUIConfig(projectConfig);
     super.initAccountAbstractionConfig(projectConfig);
     super.initChainsConfig(projectConfig);
     super.initCachedConnectorAndChainId();
@@ -93,7 +120,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       connectorListener: this,
       web3authClientId: this.options.clientId,
       web3authNetwork: this.options.web3AuthNetwork,
-      chainNamespaces: [...new Set(((_this$coreOptions$cha = this.coreOptions.chains) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.map(x => x.chainNamespace)) || [])],
+      authBuildEnv: this.options.authBuildEnv,
+      chainNamespaces: this.getChainNamespaces(),
       walletRegistry: filteredWalletRegistry
     }), {
       onInitExternalWallets: this.onInitExternalWallets,
@@ -101,22 +129,32 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       onExternalWalletLogin: this.onExternalWalletLogin,
       onModalVisibility: this.onModalVisibility
     });
-    await this.loginModal.initModal();
+    await noModal.withAbort(() => this.loginModal.initModal(), signal);
     // setup common JRPC provider
-    await this.setupCommonJRPCProvider();
+    await noModal.withAbort(() => this.setupCommonJRPCProvider(), signal);
     // initialize connectors
     this.on(noModal.CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
       connectors: newConnectors
-    }) => this.initConnectors({
-      connectors: newConnectors,
-      projectConfig,
-      disabledExternalWallets
-    }));
-    await this.loadConnectors({
-      projectConfig
+    }) => {
+      const onAbortHandler = () => {
+        var _this$connectors;
+        noModal.log.debug("init aborted");
+        if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
+          super.cleanup();
+        }
+      };
+      noModal.withAbort(() => this.initConnectors({
+        connectors: newConnectors,
+        projectConfig,
+        disabledExternalWallets
+      }), signal, onAbortHandler);
     });
+    await noModal.withAbort(() => super.loadConnectors({
+      projectConfig,
+      modalMode: true
+    }), signal);
     // initialize plugins
-    await this.initPlugins();
+    await noModal.withAbort(() => super.initPlugins(), signal);
   }
   async connect() {
     if (!this.loginModal) throw noModal.WalletInitializationError.notReady("Login modal is not initialized");
@@ -177,32 +215,31 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     };
   }
   async getProjectAndWalletConfig() {
-    var _this$modalConfig;
-    // get project config
-    let projectConfig;
-    try {
-      var _this$options$account;
-      projectConfig = await noModal.fetchProjectConfig({
-        clientId: this.options.clientId,
-        web3AuthNetwork: this.options.web3AuthNetwork,
-        aaProvider: (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType,
-        authBuildEnv: this.options.authBuildEnv
-      });
-    } catch (e) {
-      noModal.log.error("Failed to fetch project configurations", e);
-      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", e);
+    var _this$options$account, _this$modalConfig;
+    const [projectConfigResult, walletRegistryResult] = await Promise.allSettled([noModal.fetchProjectConfig({
+      clientId: this.options.clientId,
+      web3AuthNetwork: this.options.web3AuthNetwork,
+      aaProvider: (_this$options$account = this.options.accountAbstractionConfig) === null || _this$options$account === void 0 ? void 0 : _this$options$account.smartAccountType,
+      authBuildEnv: this.options.authBuildEnv
+    }), noModal.fetchWalletRegistry(config.walletRegistryUrl)]);
+    // handle project config result
+    if (projectConfigResult.status === "rejected") {
+      const error = await auth.serializeError(projectConfigResult.reason);
+      noModal.log.error("Failed to fetch project configurations", error);
+      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", error);
     }
-    // get wallet registry
+    const projectConfig = projectConfigResult.value;
+    // handle wallet registry result
     let walletRegistry = {
       others: {},
       default: {}
     };
     const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
     if (isExternalWalletEnabled && !((_this$modalConfig = this.modalConfig) !== null && _this$modalConfig !== void 0 && _this$modalConfig.hideWalletDiscovery)) {
-      try {
-        walletRegistry = await noModal.fetchWalletRegistry(config.walletRegistryUrl);
-      } catch (e) {
-        noModal.log.error("Failed to fetch wallet registry", e);
+      if (walletRegistryResult.status === "fulfilled") {
+        walletRegistry = walletRegistryResult.value;
+      } else {
+        noModal.log.error("Failed to fetch wallet registry", walletRegistryResult.reason);
       }
     }
     return {
@@ -210,6 +247,25 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       walletRegistry
     };
   }
+  initUIConfig(projectConfig) {
+    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig, {
+      arrayMerge: (_, sourceArray) => sourceArray
+    });
+    // merge login methods order from project config and user config, with user config taking precedence
+    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
   async initConnectors({
     connectors,
     projectConfig,
@@ -277,9 +333,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           groupedAuthConnectionId: groupedAuthConnectionId,
           extraLoginOptions: authConnectionConfig.jwtParameters,
           isDefault: true,
-          showOnModal: true,
-          showOnDesktop: true,
-          showOnMobile: true
+          showOnModal: true
         };
       }
       embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
@@ -325,9 +379,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: noModal.CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(config$1.capitalizeFirstLetter).join(" "),
-        showOnModal: true,
-        showOnMobile: true,
-        showOnDesktop: true
+        showOnModal: true
       };
       this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3[connectorName]) || {});
       // check if connector is configured/added by user and exist in connectors map.
@@ -375,7 +427,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     const hasExternalConnectors = connectorNames.some(connectorName => {
       var _this$getConnector, _this$modalConfig$con5;
       if (connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) return true;
-      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === noModal.CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con5 = this.modalConfig.connectors) === null || _this$modalConfig$con5 === void 0 ? void 0 : _this$modalConfig$con5[connectorName].showOnModal);
+      return ((_this$getConnector = this.getConnector(connectorName)) === null || _this$getConnector === void 0 ? void 0 : _this$getConnector.type) === noModal.CONNECTOR_CATEGORY.EXTERNAL && ((_this$modalConfig$con5 = this.modalConfig.connectors) === null || _this$modalConfig$con5 === void 0 || (_this$modalConfig$con5 = _this$modalConfig$con5[connectorName]) === null || _this$modalConfig$con5 === void 0 ? void 0 : _this$modalConfig$con5.showOnModal);
     });
     return {
       hasInAppConnectors,
@@ -389,7 +441,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         // skip if connector is already initialized
         if (connector.status !== noModal.CONNECTOR_STATUS.NOT_READY) return;
         // only initialize a external connectors here if it is a cached connector.
-        if (this.cachedConnector !== connectorName && connectorName !== noModal.WALLET_CONNECTORS.METAMASK && connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) return;
+        if (this.cachedConnector !== connectorName && connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) return;
         // in-app wallets or cached wallet (being connected or already connected) are initialized first.
         // if connector is configured then only initialize in app or cached connector.
         // external wallets are initialized on INIT_EXTERNAL_WALLET event.
@@ -417,13 +469,21 @@ class Web3Auth extends noModal.Web3AuthNoModal {
   }
   async initExternalConnectors(externalConnectors, options) {
     const connectorsConfig = {};
+    const connectorChainNamespaceMap = {};
     // we do it like this because we don't want one slow connector to delay the load of the entire external wallet section.
     externalConnectors.forEach(async connector => {
       const connectorName = connector.name;
       noModal.log.debug("init external wallet", this.cachedConnector, connectorName, connector.status);
-      if (connector.status === noModal.CONNECTOR_STATUS.NOT_READY) {
-        // we are not initializing cached connector here as it is already being initialized in initModal before.
-        if (this.cachedConnector === connectorName) return;
+      // a wallet can support multiple chain namespaces e.g. Phantom has EvmInjected connector and WalletStandard connector.
+      if (!connectorChainNamespaceMap[connectorName]) connectorChainNamespaceMap[connectorName] = new Set();
+      if (connector.connectorNamespace === noModal.CONNECTOR_NAMESPACES.MULTICHAIN) {
+        this.getChainNamespaces().forEach(x => connectorChainNamespaceMap[connectorName].add(x));
+      } else {
+        connectorChainNamespaceMap[connectorName].add(connector.connectorNamespace);
+      }
+      // initialize connectors
+      // skip initializing cached connector here as it is already being initialized in initModal before.
+      if (connector.status === noModal.CONNECTOR_STATUS.NOT_READY && this.cachedConnector !== connectorName) {
         try {
           this.subscribeToConnectorEvents(connector);
           const initialChain = this.getInitialChainIdForConnector(connector);
@@ -431,33 +491,23 @@ class Web3Auth extends noModal.Web3AuthNoModal {
             autoConnect: this.cachedConnector === connectorName,
             chainId: initialChain.chainId
           });
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
         } catch (error) {
           noModal.log.error(error, "error while initializing connector", connectorName);
         }
-      } else {
-        if (connector.status === noModal.CONNECTOR_STATUS.READY || connector.status === noModal.CONNECTOR_STATUS.CONNECTING) {
-          // we use connecting status for wallet connect
-          const connectorModalConfig = this.modalConfig.connectors[connectorName];
-          connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
-            isInjected: connector.isInjected,
-            icon: connector.icon
-          });
-          this.loginModal.addWalletLogins(connectorsConfig, {
-            showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-            externalWalletsVisibility: !!options.externalWalletsVisibility,
-            externalWalletsInitialized: !!options.externalWalletsInitialized
-          });
-        }
+      }
+      // update connector config
+      if ([noModal.CONNECTOR_STATUS.NOT_READY, noModal.CONNECTOR_STATUS.READY, noModal.CONNECTOR_STATUS.CONNECTING].includes(connector.status)) {
+        const connectorModalConfig = this.modalConfig.connectors[connectorName];
+        connectorsConfig[connectorName] = _objectSpread(_objectSpread({}, connectorModalConfig), {}, {
+          isInjected: connector.isInjected,
+          icon: connector.icon,
+          chainNamespaces: Array.from(connectorChainNamespaceMap[connectorName])
+        });
+        this.loginModal.addWalletLogins(connectorsConfig, {
+          showExternalWalletsOnly: !!options.showExternalWalletsOnly,
+          externalWalletsVisibility: !!options.externalWalletsVisibility,
+          externalWalletsInitialized: !!options.externalWalletsInitialized
+        });
       }
     });
   }

package/dist/lib.cjs/packages/modal/src/providers/ethereum-mpc-provider/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var ethereumMpcProvider = require('@web3auth/no-modal/providers/ethereum-mpc-provider');
+
+
+
+Object.keys(ethereumMpcProvider).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return ethereumMpcProvider[k]; }
+	});
+});

package/dist/lib.cjs/packages/modal/src/providers/xrpl-provider/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var xrplProvider = require('@web3auth/no-modal/providers/xrpl-provider');
+
+
+
+Object.keys(xrplProvider).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return xrplProvider[k]; }
+	});
+});

package/dist/lib.cjs/packages/modal/src/react/Web3AuthProvider.js

@@ -1,15 +1,21 @@
 'use strict';
 
 var react = require('react');
+var WalletServicesInnerContext = require('./context/WalletServicesInnerContext.js');
 var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
 
 function Web3AuthProvider({
   config,
+  initialState,
   children
 }) {
-  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
-    config
+  const pluginChild = /*#__PURE__*/react.createElement(WalletServicesInnerContext.WalletServicesContextProvider, {
+    context: Web3AuthInnerContext.Web3AuthInnerContext
   }, children);
+  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
+    config,
+    initialState
+  }, pluginChild);
 }
 
 exports.Web3AuthProvider = Web3AuthProvider;

package/dist/lib.cjs/packages/modal/src/react/context/WalletServicesInnerContext.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var noModal = require('@web3auth/no-modal');
+var react = require('react');
+
+const WalletServicesContext = /*#__PURE__*/react.createContext(null);
+function WalletServicesContextProvider({
+  children,
+  context
+}) {
+  const web3AuthContext = react.useContext(context);
+  const {
+    getPlugin,
+    isInitialized,
+    isConnected
+  } = web3AuthContext;
+  const [ready, setReady] = react.useState(false);
+  const [connecting, setConnecting] = react.useState(false);
+  const [walletServicesPlugin, setWalletServicesPlugin] = react.useState(null);
+  react.useEffect(() => {
+    if (isInitialized) {
+      const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+      setWalletServicesPlugin(plugin);
+    }
+  }, [isInitialized, getPlugin]);
+  react.useEffect(() => {
+    if (isConnected) {
+      const plugin = getPlugin(noModal.EVM_PLUGINS.WALLET_SERVICES);
+      setWalletServicesPlugin(plugin);
+      // when rehydrating, the connectedListener may be registered after the connected event is emitted, we need to check the status here
+      if ((plugin === null || plugin === void 0 ? void 0 : plugin.status) === noModal.CONNECTOR_STATUS.CONNECTED) setReady(true);
+    }
+  }, [isConnected, getPlugin, walletServicesPlugin]);
+  react.useEffect(() => {
+    const connectedListener = () => {
+      setReady(true);
+      setConnecting(false);
+    };
+    const disconnectedListener = () => {
+      setReady(false);
+      setConnecting(false);
+    };
+    const connectingListener = () => {
+      setConnecting(true);
+    };
+    if (walletServicesPlugin) {
+      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+      walletServicesPlugin.on(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+    }
+    return () => {
+      if (walletServicesPlugin) {
+        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
+        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
+        walletServicesPlugin.off(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
+      }
+    };
+  }, [walletServicesPlugin]);
+  const value = react.useMemo(() => {
+    return {
+      plugin: walletServicesPlugin,
+      ready,
+      connecting
+    };
+  }, [walletServicesPlugin, ready, connecting]);
+  return /*#__PURE__*/react.createElement(WalletServicesContext.Provider, {
+    value
+  }, children);
+}
+
+exports.WalletServicesContext = WalletServicesContext;
+exports.WalletServicesContextProvider = WalletServicesContextProvider;