@web3auth/modal 10.15.0 → 11.0.0-beta.0

package/dist/lib.cjs/node_modules/style-inject/dist/style-inject.es.js

@@ -3,7 +3,7 @@
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
-  if (typeof document === 'undefined') {
+  if (!css || typeof document === 'undefined') {
     return;
   }
   var head = document.head || document.getElementsByTagName('head')[0];

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

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.15.0";
+const version = "11.0.0-beta.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -13,8 +13,10 @@ var utils = require('./ui/utils.js');
 
 class Web3Auth extends noModal.Web3AuthNoModal {
   constructor(options, initialState) {
+    var _this$options$uiConfi;
     super(options, initialState);
     _defineProperty(this, "loginModal", void 0);
+    _defineProperty(this, "loginMode", noModal.LOGIN_MODE.MODAL);
     _defineProperty(this, "options", void 0);
     _defineProperty(this, "modalConfig", noModal.cloneDeep(config.defaultConnectorsModalConfig));
     _defineProperty(this, "onInitExternalWallets", async params => {
@@ -29,7 +31,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       try {
         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);
+        noModal.log.error("Error while connecting via social login (AUTH)", error);
       }
     });
     _defineProperty(this, "onExternalWalletLogin", async params => {
@@ -79,18 +81,38 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     _defineProperty(this, "onMobileVerifyConnect", async params => {
       try {
         const connector = this.getConnector(params.connector);
-        await connector.getIdentityToken();
+        await connector.getAuthTokenInfo();
       } catch (error) {
         noModal.log.error(`Error while connecting to connector: ${params.connector}`, error);
       }
     });
+    _defineProperty(this, "onAcceptConsent", async () => {
+      try {
+        await this.acceptConsent();
+      } catch (error) {
+        noModal.log.error("Error while accepting consent", error);
+      }
+    });
+    _defineProperty(this, "onDeclineConsent", async () => {
+      try {
+        await this.logout();
+      } catch (error) {
+        noModal.log.error("Error while declining consent", error);
+      } finally {
+        this.loginModal.closeModal();
+      }
+    });
     _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.initialAuthenticationMode) {
+      this.options.initialAuthenticationMode = noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN;
+    }
     if (!this.options.uiConfig) this.options.uiConfig = {};
     if (this.options.modalConfig) this.modalConfig = this.options.modalConfig;
+    this.consentRequired = ((_this$options$uiConfi = this.options.uiConfig.consentConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.required) || false;
     noModal.log.info("modalConfig", this.modalConfig);
   }
   async init(options) {
@@ -111,7 +133,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     });
     let trackData = {};
     try {
-      var _authConnector$authIn, _this$coreOptions$uiC;
+      var _this$options$uiConfi2, _authConnector$authIn, _this$coreOptions$uiC;
       const {
         signal
       } = options || {};
@@ -151,8 +173,11 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         onSocialLogin: this.onSocialLogin,
         onExternalWalletLogin: this.onExternalWalletLogin,
         onModalVisibility: this.onModalVisibility,
-        onMobileVerifyConnect: this.onMobileVerifyConnect
+        onMobileVerifyConnect: this.onMobileVerifyConnect,
+        onAcceptConsent: this.onAcceptConsent,
+        onDeclineConsent: this.onDeclineConsent
       });
+      this.consentRequired = ((_this$options$uiConfi2 = this.options.uiConfig.consentConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.required) || false;
       await noModal.withAbort(() => this.loginModal.initModal(), signal);
       // setup common JRPC provider
       await noModal.withAbort(() => this.setupCommonJRPCProvider(), signal);
@@ -201,41 +226,52 @@ class Web3Auth extends noModal.Web3AuthNoModal {
   }
   async connect() {
     if (!this.loginModal) throw noModal.WalletInitializationError.notReady("Login modal is not initialized");
-    // if already connected return provider
-    if (this.connectedConnectorName && noModal.CONNECTED_STATUSES.includes(this.status) && this.provider) return this.provider;
+    // if already connected return connection
+    if (this.connectedConnectorName && noModal.CONNECTED_STATUSES.includes(this.status) && this.connection) return this.connection;
     this.loginModal.open();
     return new Promise((resolve, reject) => {
       // remove all listeners when promise is resolved or rejected.
       // this is to prevent memory leaks if user clicks connect button multiple times.
-      const handleConnected = () => {
+      const handleCompletion = () => {
         this.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
         this.removeListener(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
-        return resolve(this.provider);
+        if (this.coreOptions.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
+          this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
+        } else {
+          this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleCompletion);
+        }
+        return resolve(this.connection);
       };
       const handleError = err => {
-        this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
-        this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+        this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleCompletion);
+        this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
         this.removeListener(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
         return reject(err);
       };
       const handleVisibility = visibility => {
         // modal is closed but user is not connected to any wallet.
         if (!visibility && !noModal.CONNECTED_STATUSES.includes(this.status)) {
-          this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+          this.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, handleCompletion);
           this.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
-          this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+          this.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
           return reject(new Error("User closed the modal"));
         }
       };
+      if (this.consentRequired) {
+        this.once(noModal.CONNECTOR_EVENTS.CONSENT_ACCEPTED, handleCompletion);
+      }
       if (this.coreOptions.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN) {
-        this.once(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleConnected);
+        this.once(noModal.CONNECTOR_EVENTS.AUTHORIZED, handleCompletion);
       } else {
-        this.once(noModal.CONNECTOR_EVENTS.CONNECTED, handleConnected);
+        this.once(noModal.CONNECTOR_EVENTS.CONNECTED, handleCompletion);
       }
       this.once(noModal.CONNECTOR_EVENTS.ERRORED, handleError);
       this.once(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
+  async acceptConsent() {
+    await super.completeConsentAcceptance();
+  }
   initUIConfig(projectConfig) {
     super.initUIConfig(projectConfig);
     this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
@@ -257,26 +293,26 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
   }
   getInitializationTrackData() {
-    var _this$modalConfig, _this$modalConfig2, _this$modalConfig3, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3, _this$options$uiConfi4, _this$options$uiConfi5, _this$options$uiConfi6, _this$options$uiConfi7, _this$options$uiConfi8, _this$options$uiConfi9, _this$options$uiConfi0, _this$options$uiConfi1, _this$options$uiConfi10, _this$options$uiConfi11, _this$options$uiConfi12;
+    var _this$modalConfig, _this$modalConfig2, _this$modalConfig3, _this$options$uiConfi3, _this$options$uiConfi4, _this$options$uiConfi5, _this$options$uiConfi6, _this$options$uiConfi7, _this$options$uiConfi8, _this$options$uiConfi9, _this$options$uiConfi0, _this$options$uiConfi1, _this$options$uiConfi10, _this$options$uiConfi11, _this$options$uiConfi12, _this$options$uiConfi13, _this$options$uiConfi14;
     return _objectSpread(_objectSpread({}, super.getInitializationTrackData()), {}, {
       modal_hide_wallet_discovery: (_this$modalConfig = this.modalConfig) === null || _this$modalConfig === void 0 ? void 0 : _this$modalConfig.hideWalletDiscovery,
       modal_connectors: Object.keys(((_this$modalConfig2 = this.modalConfig) === null || _this$modalConfig2 === void 0 ? void 0 : _this$modalConfig2.connectors) || {}),
       modal_auth_connector_login_methods: Object.keys(((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3[noModal.WALLET_CONNECTORS.AUTH]) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3.loginMethods) || {}),
       // UI config
-      ui_login_methods_order: (_this$options$uiConfi = this.options.uiConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.loginMethodsOrder,
-      ui_modal_z_index: (_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.modalZIndex,
-      ui_display_errors_on_modal: (_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.displayErrorsOnModal,
-      ui_login_grid_col: (_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.loginGridCol,
-      ui_primary_button: (_this$options$uiConfi5 = this.options.uiConfig) === null || _this$options$uiConfi5 === void 0 ? void 0 : _this$options$uiConfi5.primaryButton,
-      ui_modal_widget_type: (_this$options$uiConfi6 = this.options.uiConfig) === null || _this$options$uiConfi6 === void 0 ? void 0 : _this$options$uiConfi6.widgetType,
-      ui_modal_target_id_used: Boolean((_this$options$uiConfi7 = this.options.uiConfig) === null || _this$options$uiConfi7 === void 0 ? void 0 : _this$options$uiConfi7.targetId),
-      ui_modal_logo_alignment: (_this$options$uiConfi8 = this.options.uiConfig) === null || _this$options$uiConfi8 === void 0 ? void 0 : _this$options$uiConfi8.logoAlignment,
-      ui_modal_border_radius_type: (_this$options$uiConfi9 = this.options.uiConfig) === null || _this$options$uiConfi9 === void 0 ? void 0 : _this$options$uiConfi9.borderRadiusType,
-      ui_modal_button_radius_type: (_this$options$uiConfi0 = this.options.uiConfig) === null || _this$options$uiConfi0 === void 0 ? void 0 : _this$options$uiConfi0.buttonRadiusType,
-      ui_modal_sign_in_methods: (_this$options$uiConfi1 = this.options.uiConfig) === null || _this$options$uiConfi1 === void 0 ? void 0 : _this$options$uiConfi1.signInMethods,
-      ui_modal_add_previous_login_hint: (_this$options$uiConfi10 = this.options.uiConfig) === null || _this$options$uiConfi10 === void 0 ? void 0 : _this$options$uiConfi10.addPreviousLoginHint,
-      ui_modal_display_installed_external_wallets: (_this$options$uiConfi11 = this.options.uiConfig) === null || _this$options$uiConfi11 === void 0 ? void 0 : _this$options$uiConfi11.displayInstalledExternalWallets,
-      ui_modal_display_external_wallets_count: (_this$options$uiConfi12 = this.options.uiConfig) === null || _this$options$uiConfi12 === void 0 ? void 0 : _this$options$uiConfi12.displayExternalWalletsCount
+      ui_login_methods_order: (_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.loginMethodsOrder,
+      ui_modal_z_index: (_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.modalZIndex,
+      ui_display_errors_on_modal: (_this$options$uiConfi5 = this.options.uiConfig) === null || _this$options$uiConfi5 === void 0 ? void 0 : _this$options$uiConfi5.displayErrorsOnModal,
+      ui_login_grid_col: (_this$options$uiConfi6 = this.options.uiConfig) === null || _this$options$uiConfi6 === void 0 ? void 0 : _this$options$uiConfi6.loginGridCol,
+      ui_primary_button: (_this$options$uiConfi7 = this.options.uiConfig) === null || _this$options$uiConfi7 === void 0 ? void 0 : _this$options$uiConfi7.primaryButton,
+      ui_modal_widget_type: (_this$options$uiConfi8 = this.options.uiConfig) === null || _this$options$uiConfi8 === void 0 ? void 0 : _this$options$uiConfi8.widgetType,
+      ui_modal_target_id_used: Boolean((_this$options$uiConfi9 = this.options.uiConfig) === null || _this$options$uiConfi9 === void 0 ? void 0 : _this$options$uiConfi9.targetId),
+      ui_modal_logo_alignment: (_this$options$uiConfi0 = this.options.uiConfig) === null || _this$options$uiConfi0 === void 0 ? void 0 : _this$options$uiConfi0.logoAlignment,
+      ui_modal_border_radius_type: (_this$options$uiConfi1 = this.options.uiConfig) === null || _this$options$uiConfi1 === void 0 ? void 0 : _this$options$uiConfi1.borderRadiusType,
+      ui_modal_button_radius_type: (_this$options$uiConfi10 = this.options.uiConfig) === null || _this$options$uiConfi10 === void 0 ? void 0 : _this$options$uiConfi10.buttonRadiusType,
+      ui_modal_sign_in_methods: (_this$options$uiConfi11 = this.options.uiConfig) === null || _this$options$uiConfi11 === void 0 ? void 0 : _this$options$uiConfi11.signInMethods,
+      ui_modal_add_previous_login_hint: (_this$options$uiConfi12 = this.options.uiConfig) === null || _this$options$uiConfi12 === void 0 ? void 0 : _this$options$uiConfi12.addPreviousLoginHint,
+      ui_modal_display_installed_external_wallets: (_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.displayInstalledExternalWallets,
+      ui_modal_display_external_wallets_count: (_this$options$uiConfi14 = this.options.uiConfig) === null || _this$options$uiConfi14 === void 0 ? void 0 : _this$options$uiConfi14.displayExternalWalletsCount
     });
   }
   filterWalletRegistry(walletRegistry, projectConfig) {
@@ -525,17 +561,17 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         await connector.init({
           autoConnect,
           chainId: initialChain.chainId,
-          getIdentityToken: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
+          getAuthTokenInfo: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
         });
         // note: not adding cachedWallet to modal if it is external wallet.
         // adding it later if no in-app wallets are available.
         if (connector.type === noModal.CONNECTOR_CATEGORY.IN_APP) {
-          var _this$modalConfig$con6, _this$options$uiConfi13, _this$options$uiConfi14, _this$options$uiConfi15;
+          var _this$modalConfig$con6, _this$options$uiConfi15, _this$options$uiConfi16, _this$options$uiConfi17;
           noModal.log.info("connectorInitResults", connectorName);
           const loginMethods = ((_this$modalConfig$con6 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con6 === void 0 ? void 0 : _this$modalConfig$con6.loginMethods) || {};
-          this.loginModal.addSocialLogins(connectorName, loginMethods, ((_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.loginMethodsOrder) || config$1.AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
-            loginGridCol: ((_this$options$uiConfi14 = this.options.uiConfig) === null || _this$options$uiConfi14 === void 0 ? void 0 : _this$options$uiConfi14.loginGridCol) || 3,
-            primaryButton: ((_this$options$uiConfi15 = this.options.uiConfig) === null || _this$options$uiConfi15 === void 0 ? void 0 : _this$options$uiConfi15.primaryButton) || "socialLogin"
+          this.loginModal.addSocialLogins(loginMethods, ((_this$options$uiConfi15 = this.options.uiConfig) === null || _this$options$uiConfi15 === void 0 ? void 0 : _this$options$uiConfi15.loginMethodsOrder) || config$1.AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+            loginGridCol: ((_this$options$uiConfi16 = this.options.uiConfig) === null || _this$options$uiConfi16 === void 0 ? void 0 : _this$options$uiConfi16.loginGridCol) || 3,
+            primaryButton: ((_this$options$uiConfi17 = this.options.uiConfig) === null || _this$options$uiConfi17 === void 0 ? void 0 : _this$options$uiConfi17.primaryButton) || "socialLogin"
           }));
         }
       } catch (error) {
@@ -566,7 +602,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           await connector.init({
             autoConnect: this.cachedConnector === connectorName,
             chainId: initialChain.chainId,
-            getIdentityToken: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
+            getAuthTokenInfo: this.options.initialAuthenticationMode === noModal.CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN
           });
         } catch (error) {
           noModal.log.error(error, "error while initializing connector", connectorName);

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

@@ -3,14 +3,16 @@
 var react = require('react');
 var WalletServicesInnerContext = require('./context/WalletServicesInnerContext.js');
 var Web3AuthInnerContext = require('./context/Web3AuthInnerContext.js');
+var react$1 = require('@web3auth/no-modal/react');
 
 function Web3AuthProvider({
   config,
   initialState,
   children
 }) {
-  const pluginChild = /*#__PURE__*/react.createElement(WalletServicesInnerContext.WalletServicesContextProvider, {
-    context: Web3AuthInnerContext.Web3AuthInnerContext
+  const SharedWalletServicesContextProvider = WalletServicesInnerContext.WalletServicesContextProvider;
+  const pluginChild = /*#__PURE__*/react.createElement(SharedWalletServicesContextProvider, {
+    context: react$1.Web3AuthInnerContext
   }, children);
   return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Web3AuthInnerProvider, {
     config,

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

@@ -1,68 +1,15 @@
 'use strict';
 
-var noModal = require('@web3auth/no-modal');
+var react$1 = require('@web3auth/no-modal/react');
 var react = require('react');
 
-const WalletServicesContext = /*#__PURE__*/react.createContext(null);
+const WalletServicesContext = react$1.WalletServicesContext;
 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 (noModal.CONNECTED_STATUSES.includes(plugin === null || plugin === void 0 ? void 0 : plugin.status)) 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.removeListener(noModal.PLUGIN_EVENTS.CONNECTED, connectedListener);
-        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.DISCONNECTED, disconnectedListener);
-        walletServicesPlugin.removeListener(noModal.PLUGIN_EVENTS.CONNECTING, connectingListener);
-      }
-    };
-  }, [walletServicesPlugin]);
-  const value = react.useMemo(() => {
-    return {
-      plugin: walletServicesPlugin,
-      ready,
-      connecting
-    };
-  }, [walletServicesPlugin, ready, connecting]);
+  const value = react$1.useWalletServicesContextValue(web3AuthContext);
   return /*#__PURE__*/react.createElement(WalletServicesContext.Provider, {
     value
   }, children);

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

@@ -1,10 +1,9 @@
 'use strict';
 
-var noModal = require('@web3auth/no-modal');
-var react = require('react');
+var react = require('@web3auth/no-modal/react');
+var react$1 = require('react');
 var modalManager = require('../../modalManager.js');
 
-const Web3AuthInnerContext = /*#__PURE__*/react.createContext(null);
 function Web3AuthInnerProvider(params) {
   const {
     children,
@@ -14,157 +13,21 @@ function Web3AuthInnerProvider(params) {
   const {
     web3AuthOptions
   } = config;
-  const [chainId, setChainId] = react.useState(null);
-  const [chainNamespace, setChainNamespace] = react.useState(null);
-  const [isInitializing, setIsInitializing] = react.useState(false);
-  const [initError, setInitError] = react.useState(null);
-  const [provider, setProvider] = react.useState(null);
-  const [isInitialized, setIsInitialized] = react.useState(false);
-  const [isMFAEnabled, setIsMFAEnabled] = react.useState(false);
-  const web3Auth = react.useMemo(() => {
-    setProvider(null);
-    return new modalManager.Web3Auth(web3AuthOptions, initialState);
-  }, [web3AuthOptions, initialState]);
-  const [isConnected, setIsConnected] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.CONNECTED);
-  const [isAuthorized, setIsAuthorized] = react.useState(web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED);
-  const [status, setStatus] = react.useState(web3Auth.status);
-  const getPlugin = react.useCallback(name => {
-    if (!web3Auth) throw noModal.WalletInitializationError.notReady();
-    return web3Auth.getPlugin(name);
-  }, [web3Auth]);
-  react.useEffect(() => {
-    const controller = new AbortController();
-    async function init() {
-      try {
-        var _web3Auth$currentChai;
-        setInitError(null);
-        setIsInitializing(true);
-        web3Auth.setAnalyticsProperties({
-          integration_type: noModal.ANALYTICS_INTEGRATION_TYPE.REACT_HOOKS
-        });
-        await web3Auth.init({
-          signal: controller.signal
-        });
-        setChainId(web3Auth.currentChainId);
-        setChainNamespace((_web3Auth$currentChai = web3Auth.currentChain) === null || _web3Auth$currentChai === void 0 ? void 0 : _web3Auth$currentChai.chainNamespace);
-      } catch (error) {
-        setInitError(error);
-      } finally {
-        setIsInitializing(false);
-      }
-    }
-    if (web3Auth) init();
-    return () => {
-      controller.abort();
-    };
-  }, [web3Auth, config]);
-  react.useEffect(() => {
-    const handleChainChange = async chainId => {
-      var _web3Auth$currentChai2;
-      setChainId(chainId);
-      setChainNamespace(web3Auth === null || web3Auth === void 0 || (_web3Auth$currentChai2 = web3Auth.currentChain) === null || _web3Auth$currentChai2 === void 0 ? void 0 : _web3Auth$currentChai2.chainNamespace);
-    };
-    if (provider) {
-      provider.on("chainChanged", handleChainChange);
-      return () => {
-        if (provider) {
-          provider.removeListener("chainChanged", handleChainChange);
-        }
-      };
-    }
-  }, [web3Auth, provider]);
-  react.useEffect(() => {
-    const notReadyListener = () => setStatus(web3Auth.status);
-    const readyListener = () => {
-      setStatus(web3Auth.status);
-      setIsInitialized(true);
-    };
-    const connectedListener = data => {
-      setStatus(web3Auth.status);
-      // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
-      if (web3Auth.status === noModal.CONNECTOR_STATUS.CONNECTED) {
-        setIsInitialized(true);
-        setIsConnected(true);
-        setProvider(data.provider);
-      }
-    };
-    const authorizedListener = _data => {
-      setStatus(web3Auth.status);
-      if (web3Auth.status === noModal.CONNECTOR_STATUS.AUTHORIZED) {
-        setIsConnected(true);
-        setIsAuthorized(true);
-      }
-    };
-    const disconnectedListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const connectingListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const errorListener = () => {
-      setStatus(web3Auth.status);
-    };
-    const rehydrationErrorListener = () => {
-      setStatus(web3Auth.status);
-      setIsConnected(false);
-      setIsAuthorized(false);
-      setProvider(null);
-    };
-    const mfaEnabledListener = isMFAEnabled => {
-      if (typeof isMFAEnabled === "boolean") setIsMFAEnabled(isMFAEnabled);
-    };
-    if (web3Auth) {
-      // web3Auth is initialized here.
-      setStatus(web3Auth.status);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.READY, readyListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-      web3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-    }
-    return () => {
-      if (web3Auth) {
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.READY, readyListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
-        web3Auth.removeListener(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
-        web3Auth.cleanup();
-      }
-    };
-  }, [web3Auth]);
-  const value = react.useMemo(() => {
-    return {
-      web3Auth,
-      isConnected,
-      isAuthorized,
-      isInitialized,
-      provider,
-      status,
-      isInitializing,
-      initError,
-      isMFAEnabled,
-      chainId,
-      chainNamespace,
-      getPlugin,
-      setIsMFAEnabled
-    };
-  }, [web3Auth, isConnected, isAuthorized, isMFAEnabled, setIsMFAEnabled, isInitialized, provider, status, getPlugin, isInitializing, initError, chainId, chainNamespace]);
-  return /*#__PURE__*/react.createElement(Web3AuthInnerContext.Provider, {
+  const value = react.useWeb3AuthInnerContextValue({
+    Web3AuthConstructor: modalManager.Web3Auth,
+    web3AuthOptions,
+    initialState,
+    notReadyUsesCurrentStatus: true,
+    cleanupOnUnmount: true,
+    initEffectDependency: config
+  });
+  return /*#__PURE__*/react$1.createElement(react.Web3AuthInnerContext.Provider, {
     value
   }, children);
 }
 
-exports.Web3AuthInnerContext = Web3AuthInnerContext;
+Object.defineProperty(exports, "Web3AuthInnerContext", {
+    enumerable: true,
+    get: function () { return react.Web3AuthInnerContext; }
+});
 exports.Web3AuthInnerProvider = Web3AuthInnerProvider;

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3Auth.js

@@ -3,28 +3,7 @@
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3Auth = () => {
-  const {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  } = useWeb3AuthInner.useWeb3AuthInner();
-  return {
-    initError,
-    isConnected,
-    isAuthorized,
-    isInitialized,
-    isInitializing,
-    provider,
-    status,
-    web3Auth,
-    getPlugin
-  };
+  return useWeb3AuthInner.useWeb3AuthInner();
 };
 
 exports.useWeb3Auth = useWeb3Auth;

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthConnect.js

@@ -1,60 +1,47 @@
 'use strict';
 
-var react = require('react');
+var react = require('@web3auth/no-modal/react');
+var react$1 = require('react');
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useWeb3AuthConnect = () => {
   const {
-    web3Auth,
-    isConnected
+    web3Auth
   } = useWeb3AuthInner.useWeb3AuthInner();
-  const [loading, setLoading] = react.useState(false);
-  const [error, setError] = react.useState(null);
-  const [connectorName, setConnectorName] = react.useState(null);
-  react.useEffect(() => {
-    if (!web3Auth) return;
-    if (!isConnected && connectorName) {
-      setConnectorName(null);
-    }
-    if (isConnected && !connectorName) {
-      setConnectorName(web3Auth.connectedConnectorName);
-    }
-  }, [isConnected, connectorName, web3Auth]);
-  const connect = react.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const provider = await web3Auth.connect();
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
-    } catch (error) {
-      setError(error);
-    } finally {
-      setLoading(false);
-    }
-  }, [web3Auth]);
-  const connectTo = react.useCallback(async (connector, params) => {
-    setLoading(true);
-    setError(null);
+  const {
+    isConnected,
+    loading: sharedLoading,
+    error: sharedError,
+    connectorName,
+    connect: sharedConnectTo
+  } = react.useWeb3AuthConnect();
+  const [connectLoading, setConnectLoading] = react$1.useState(false);
+  const [connectError, setConnectError] = react$1.useState(null);
+  const [activeFlow, setActiveFlow] = react$1.useState(null);
+  const connect = react$1.useCallback(async () => {
+    setActiveFlow("connect");
+    setConnectLoading(true);
+    setConnectError(null);
+    let connection = null;
     try {
-      const provider = await web3Auth.connectTo(connector, params);
-      if (provider) {
-        setConnectorName(web3Auth.connectedConnectorName);
-      }
-      return provider;
+      connection = await web3Auth.connect();
     } catch (error) {
-      setError(error);
+      setConnectError(error);
     } finally {
-      setLoading(false);
+      setConnectLoading(false);
     }
+    return connection;
   }, [web3Auth]);
+  const connectTo = react$1.useCallback(async (connector, params) => {
+    setActiveFlow("connectTo");
+    setConnectError(null);
+    return sharedConnectTo(connector, params);
+  }, [sharedConnectTo]);
   return {
     isConnected,
-    loading,
-    error,
-    connectorName,
+    loading: connectLoading || sharedLoading,
+    error: activeFlow === "connect" ? connectError : sharedError,
+    connectorName: connectorName,
     connect,
     connectTo
   };