@web3auth/modal 8.12.7 → 9.0.0-alpha.1

package/dist/lib.esm/modalManager.js

@@ -0,0 +1,424 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { LOGIN_PROVIDER, getAuthDefaultOptions, AuthAdapter } from '@web3auth/auth-adapter';
+import { cloneDeep, WalletInitializationError, fetchProjectConfig, log, fetchWalletRegistry, WALLET_ADAPTERS, getChainConfig, ADAPTER_CATEGORY, ADAPTER_STATUS, ADAPTER_EVENTS } from '@web3auth/base';
+import { CommonJRPCProvider } from '@web3auth/base-provider';
+import { Web3AuthNoModal } from '@web3auth/no-modal';
+import { getUserLanguage, LoginModal, capitalizeFirstLetter, getAdapterSocialLogins, LOGIN_MODAL_EVENTS, AUTH_PROVIDERS } from '@web3auth/ui';
+import deepmerge from 'deepmerge';
+import { defaultOtherModalConfig, walletRegistryUrl } from './config.js';
+
+class Web3Auth extends Web3AuthNoModal {
+  constructor(options) {
+    super(options);
+    _defineProperty(this, "loginModal", void 0);
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "modalConfig", cloneDeep(defaultOtherModalConfig));
+    this.options = _objectSpread({}, options);
+    if (!this.options.uiConfig) this.options.uiConfig = {};
+    if (!this.coreOptions.privateKeyProvider) throw WalletInitializationError.invalidParams("privateKeyProvider is required");
+  }
+  setModalConfig(modalConfig) {
+    super.checkInitRequirements();
+    this.modalConfig = modalConfig;
+  }
+  async initModal(params) {
+    super.checkInitRequirements();
+    let projectConfig;
+    try {
+      projectConfig = await fetchProjectConfig(this.options.clientId, this.options.web3AuthNetwork);
+    } catch (e) {
+      log.error("Failed to fetch project configurations", e);
+      throw WalletInitializationError.notReady("failed to fetch project configurations", e);
+    }
+    const {
+      whitelabel
+    } = projectConfig;
+    this.options.uiConfig = deepmerge(cloneDeep(whitelabel), this.options.uiConfig);
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    let walletRegistry = {};
+    try {
+      walletRegistry = await fetchWalletRegistry(walletRegistryUrl);
+    } catch (e) {
+      log.error("Failed to fetch wallet registry", e);
+    }
+    this.loginModal = new LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+      adapterListener: this,
+      chainNamespace: this.options.chainConfig.chainNamespace,
+      walletRegistry
+    }));
+    this.subscribeToLoginModalEvents();
+    const {
+      sms_otp_enabled: smsOtpEnabled,
+      whitelist,
+      key_export_enabled: keyExportEnabled
+    } = projectConfig;
+    if (smsOtpEnabled !== undefined) {
+      var _params;
+      const adapterConfig = {
+        [WALLET_ADAPTERS.AUTH]: {
+          label: WALLET_ADAPTERS.AUTH,
+          loginMethods: {
+            [LOGIN_PROVIDER.SMS_PASSWORDLESS]: {
+              name: LOGIN_PROVIDER.SMS_PASSWORDLESS,
+              showOnModal: smsOtpEnabled,
+              showOnDesktop: smsOtpEnabled,
+              showOnMobile: smsOtpEnabled
+            }
+          }
+        }
+      };
+      if (!((_params = params) !== null && _params !== void 0 && _params.modalConfig)) params = {
+        modalConfig: {}
+      };
+      params.modalConfig = deepmerge(cloneDeep(params.modalConfig), adapterConfig);
+    }
+    await this.loginModal.initModal();
+    const providedChainConfig = this.options.chainConfig;
+    // merge default adapters with the custom configured adapters.
+    const allAdapters = [...new Set([...Object.keys(this.modalConfig.adapters || {}), ...Object.keys(this.walletAdapters)])];
+    const adapterConfigurationPromises = allAdapters.map(async adapterName => {
+      var _this$modalConfig$ada, _params2, _this$modalConfig$ada2, _this$modalConfig$ada3;
+      // start with the default config of adapter.
+      let adapterConfig = ((_this$modalConfig$ada = this.modalConfig.adapters) === null || _this$modalConfig$ada === void 0 ? void 0 : _this$modalConfig$ada[adapterName]) || {
+        label: adapterName.split("-").map(capitalizeFirstLetter).join(" "),
+        showOnModal: true,
+        showOnMobile: true,
+        showOnDesktop: true
+      };
+
+      // override the default config of adapter if some config is being provided by the user.
+      if ((_params2 = params) !== null && _params2 !== void 0 && (_params2 = _params2.modalConfig) !== null && _params2 !== void 0 && _params2[adapterName]) {
+        adapterConfig = _objectSpread(_objectSpread({}, adapterConfig), params.modalConfig[adapterName]);
+      }
+      this.modalConfig.adapters[adapterName] = adapterConfig;
+
+      // check if adapter is configured/added by user and exist in walletAdapters map.
+      const adapter = this.walletAdapters[adapterName];
+      log.debug("adapter config", adapterName, (_this$modalConfig$ada2 = this.modalConfig.adapters) === null || _this$modalConfig$ada2 === void 0 ? void 0 : _this$modalConfig$ada2[adapterName].showOnModal, adapter);
+
+      // if adapter is not custom configured then check if it is available in default adapters.
+      // and if adapter is not hidden by user
+      if (!adapter && (_this$modalConfig$ada3 = this.modalConfig.adapters) !== null && _this$modalConfig$ada3 !== void 0 && _this$modalConfig$ada3[adapterName].showOnModal) {
+        // Adapters to be shown on modal should be pre-configured.
+        if (adapterName === WALLET_ADAPTERS.AUTH) {
+          var _this$coreOptions$cha;
+          const defaultOptions = getAuthDefaultOptions();
+          const {
+            clientId,
+            useCoreKitKey,
+            chainConfig,
+            web3AuthNetwork,
+            sessionTime,
+            privateKeyProvider
+          } = this.coreOptions;
+          const finalChainConfig = _objectSpread(_objectSpread({}, getChainConfig(providedChainConfig.chainNamespace, (_this$coreOptions$cha = this.coreOptions.chainConfig) === null || _this$coreOptions$cha === void 0 ? void 0 : _this$coreOptions$cha.chainId)), chainConfig);
+          if (!privateKeyProvider) {
+            throw WalletInitializationError.invalidParams("privateKeyProvider is required");
+          }
+          const finalAuthAdapterSettings = _objectSpread(_objectSpread({}, defaultOptions.adapterSettings), {}, {
+            clientId,
+            network: web3AuthNetwork,
+            whiteLabel: this.options.uiConfig
+          });
+          if (smsOtpEnabled !== undefined) {
+            finalAuthAdapterSettings.loginConfig = {
+              [LOGIN_PROVIDER.SMS_PASSWORDLESS]: {
+                showOnModal: smsOtpEnabled,
+                showOnDesktop: smsOtpEnabled,
+                showOnMobile: smsOtpEnabled,
+                showOnSocialBackupFactor: smsOtpEnabled
+              }
+            };
+          }
+          if (whitelist) {
+            finalAuthAdapterSettings.originData = whitelist.signed_urls;
+          }
+          if (this.options.uiConfig.uxMode) {
+            finalAuthAdapterSettings.uxMode = this.options.uiConfig.uxMode;
+          }
+          const authAdapter = new AuthAdapter(_objectSpread(_objectSpread({}, defaultOptions), {}, {
+            clientId,
+            useCoreKitKey,
+            chainConfig: _objectSpread({}, finalChainConfig),
+            adapterSettings: finalAuthAdapterSettings,
+            sessionTime,
+            web3AuthNetwork,
+            privateKeyProvider
+          }));
+          this.walletAdapters[adapterName] = authAdapter;
+          return adapterName;
+        }
+        throw WalletInitializationError.invalidParams(`Adapter ${adapterName} is not configured`);
+      } else if ((adapter === null || adapter === void 0 ? void 0 : adapter.type) === ADAPTER_CATEGORY.IN_APP || (adapter === null || adapter === void 0 ? void 0 : adapter.type) === ADAPTER_CATEGORY.EXTERNAL || adapterName === this.cachedAdapter) {
+        var _this$modalConfig$ada4;
+        if (!((_this$modalConfig$ada4 = this.modalConfig.adapters) !== null && _this$modalConfig$ada4 !== void 0 && _this$modalConfig$ada4[adapterName].showOnModal)) return;
+        // add client id to adapter, same web3auth client id can be used in adapter.
+        // this id is being overridden if user is also passing client id in adapter's constructor.
+        this.walletAdapters[adapterName].setAdapterSettings({
+          clientId: this.options.clientId,
+          sessionTime: this.options.sessionTime,
+          web3AuthNetwork: this.options.web3AuthNetwork,
+          useCoreKitKey: this.coreOptions.useCoreKitKey
+        });
+
+        // if adapter doesn't have any chainConfig then we will set the chainConfig based of passed chainNamespace
+        // and chainNamespace.
+        if (!adapter.chainConfigProxy) {
+          var _this$coreOptions$cha2;
+          const chainConfig = _objectSpread(_objectSpread({}, getChainConfig(providedChainConfig.chainNamespace, (_this$coreOptions$cha2 = this.coreOptions.chainConfig) === null || _this$coreOptions$cha2 === void 0 ? void 0 : _this$coreOptions$cha2.chainId)), this.coreOptions.chainConfig);
+          this.walletAdapters[adapterName].setAdapterSettings({
+            chainConfig
+          });
+        }
+        if (adapterName === WALLET_ADAPTERS.AUTH) {
+          var _this$options$uiConfi;
+          const authAdapter = this.walletAdapters[adapterName];
+          if (this.coreOptions.privateKeyProvider) {
+            if (authAdapter.currentChainNamespace !== this.coreOptions.privateKeyProvider.currentChainConfig.chainNamespace) {
+              throw WalletInitializationError.incompatibleChainNameSpace("private key provider is not compatible with provided chainNamespace for auth adapter");
+            }
+            authAdapter.setAdapterSettings({
+              privateKeyProvider: this.coreOptions.privateKeyProvider
+            });
+          }
+          if (smsOtpEnabled !== undefined) {
+            authAdapter.setAdapterSettings({
+              loginConfig: {
+                [LOGIN_PROVIDER.SMS_PASSWORDLESS]: {
+                  showOnModal: smsOtpEnabled,
+                  showOnDesktop: smsOtpEnabled,
+                  showOnMobile: smsOtpEnabled,
+                  showOnSocialBackupFactor: smsOtpEnabled
+                }
+              }
+            });
+          }
+          if (whitelist) {
+            authAdapter.setAdapterSettings({
+              originData: whitelist.signed_urls
+            });
+          }
+          if ((_this$options$uiConfi = this.options.uiConfig) !== null && _this$options$uiConfi !== void 0 && _this$options$uiConfi.uxMode) {
+            authAdapter.setAdapterSettings({
+              uxMode: this.options.uiConfig.uxMode
+            });
+          }
+          authAdapter.setAdapterSettings({
+            whiteLabel: this.options.uiConfig
+          });
+          if (!authAdapter.privateKeyProvider) {
+            throw WalletInitializationError.invalidParams("privateKeyProvider is required for auth adapter");
+          }
+        } else if (adapterName === WALLET_ADAPTERS.WALLET_CONNECT_V2) {
+          const walletConnectAdapter = this.walletAdapters[adapterName];
+          const {
+            wallet_connect_enabled: walletConnectEnabled,
+            wallet_connect_project_id: walletConnectProjectId
+          } = projectConfig;
+          if (walletConnectEnabled === false) {
+            var _this$modalConfig$ada5, _this$modalConfig$ada6, _this$modalConfig$ada7;
+            // override user specified config by hiding wallet connect
+            this.modalConfig.adapters = _objectSpread(_objectSpread({}, (_this$modalConfig$ada5 = this.modalConfig.adapters) !== null && _this$modalConfig$ada5 !== void 0 ? _this$modalConfig$ada5 : {}), {}, {
+              [WALLET_ADAPTERS.WALLET_CONNECT_V2]: _objectSpread(_objectSpread({}, (_this$modalConfig$ada6 = (_this$modalConfig$ada7 = this.modalConfig.adapters) === null || _this$modalConfig$ada7 === void 0 ? void 0 : _this$modalConfig$ada7[WALLET_ADAPTERS.WALLET_CONNECT_V2]) !== null && _this$modalConfig$ada6 !== void 0 ? _this$modalConfig$ada6 : {}), {}, {
+                showOnModal: false
+              })
+            });
+            this.modalConfig.adapters[WALLET_ADAPTERS.WALLET_CONNECT_V2].showOnModal = false;
+          } else {
+            var _walletConnectAdapter;
+            if (!(walletConnectAdapter !== null && walletConnectAdapter !== void 0 && (_walletConnectAdapter = walletConnectAdapter.adapterOptions) !== null && _walletConnectAdapter !== void 0 && (_walletConnectAdapter = _walletConnectAdapter.adapterSettings) !== null && _walletConnectAdapter !== void 0 && (_walletConnectAdapter = _walletConnectAdapter.walletConnectInitOptions) !== null && _walletConnectAdapter !== void 0 && _walletConnectAdapter.projectId) && !walletConnectProjectId) throw WalletInitializationError.invalidParams("Invalid wallet connect project id. Please configure it on the dashboard");
+            if (walletConnectProjectId) {
+              walletConnectAdapter.setAdapterSettings({
+                adapterSettings: {
+                  walletConnectInitOptions: {
+                    projectId: walletConnectProjectId
+                  }
+                }
+              });
+            }
+          }
+        }
+        return adapterName;
+      }
+    });
+    const adapterNames = await Promise.all(adapterConfigurationPromises);
+    const hasInAppWallets = Object.values(this.walletAdapters).some(adapter => {
+      var _this$modalConfig$ada8, _this$modalConfig$ada9, _adapter$name;
+      if (adapter.type !== ADAPTER_CATEGORY.IN_APP) return false;
+      if (((_this$modalConfig$ada8 = this.modalConfig.adapters) === null || _this$modalConfig$ada8 === void 0 || (_this$modalConfig$ada8 = _this$modalConfig$ada8[adapter.name]) === null || _this$modalConfig$ada8 === void 0 ? void 0 : _this$modalConfig$ada8.showOnModal) !== true) return false;
+      if (!((_this$modalConfig$ada9 = this.modalConfig.adapters) !== null && _this$modalConfig$ada9 !== void 0 && (_this$modalConfig$ada9 = _this$modalConfig$ada9[adapter.name]) !== null && _this$modalConfig$ada9 !== void 0 && _this$modalConfig$ada9.loginMethods)) return true;
+      const mergedLoginMethods = getAdapterSocialLogins(adapter.name, (_adapter$name = this.modalConfig.adapters[adapter.name]) === null || _adapter$name === void 0 ? void 0 : _adapter$name.loginMethods);
+      if (Object.values(mergedLoginMethods).some(method => method.showOnModal)) return true;
+      return false;
+    });
+    log.debug(hasInAppWallets, this.walletAdapters, adapterNames, "hasInAppWallets");
+
+    // Now, initialize the adapters.
+    const initPromises = adapterNames.map(async adapterName => {
+      if (!adapterName) return;
+      try {
+        const adapter = this.walletAdapters[adapterName];
+        // only initialize a external adapter here if it is a cached adapter.
+        if (this.cachedAdapter !== adapterName && adapter.type === ADAPTER_CATEGORY.EXTERNAL) {
+          return;
+        }
+        // in-app wallets or cached wallet (being connected or already connected) are initialized first.
+        // if adapter is configured then only initialize in app or cached adapter.
+        // external wallets are initialized on INIT_EXTERNAL_WALLET event.
+        this.subscribeToAdapterEvents(adapter);
+        if (adapter.status === ADAPTER_STATUS.NOT_READY) await adapter.init({
+          autoConnect: this.cachedAdapter === adapterName
+        });
+        // note: not adding cachedWallet to modal if it is external wallet.
+        // adding it later if no in-app wallets are available.
+        if (adapter.type === ADAPTER_CATEGORY.IN_APP) {
+          this.initializeInAppWallet(adapterName);
+        }
+      } catch (error) {
+        log.error(error, "error while initializing adapter ", adapterName);
+      }
+    });
+    this.commonJRPCProvider = await CommonJRPCProvider.getProviderInstance({
+      chainConfig: this.coreOptions.chainConfig
+    });
+    if (typeof keyExportEnabled === "boolean") {
+      this.coreOptions.privateKeyProvider.setKeyExportFlag(keyExportEnabled);
+      // dont know if we need to do this.
+      this.commonJRPCProvider.setKeyExportFlag(keyExportEnabled);
+    }
+    await Promise.all(initPromises);
+    if (this.status === ADAPTER_STATUS.NOT_READY) {
+      this.status = ADAPTER_STATUS.READY;
+      this.emit(ADAPTER_EVENTS.READY);
+    }
+    const hasExternalWallets = allAdapters.some(adapterName => {
+      var _this$walletAdapters$, _this$modalConfig$ada10;
+      return ((_this$walletAdapters$ = this.walletAdapters[adapterName]) === null || _this$walletAdapters$ === void 0 ? void 0 : _this$walletAdapters$.type) === ADAPTER_CATEGORY.EXTERNAL && ((_this$modalConfig$ada10 = this.modalConfig.adapters) === null || _this$modalConfig$ada10 === void 0 ? void 0 : _this$modalConfig$ada10[adapterName].showOnModal);
+    });
+    if (hasExternalWallets) {
+      this.loginModal.initExternalWalletContainer();
+    }
+
+    // variable to check if we have any in app wallets
+    // currently all default in app and external wallets can be hidden or shown based on config.
+    if (!hasInAppWallets && hasExternalWallets) {
+      // if no in app wallet is available then initialize external wallets in modal
+      await this.initExternalWalletAdapters(false, {
+        showExternalWalletsOnly: true
+      });
+    }
+  }
+  async connect() {
+    if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
+    // if already connected return provider
+    if (this.connectedAdapterName && this.status === ADAPTER_STATUS.CONNECTED && this.provider) return this.provider;
+    this.loginModal.open();
+    return new Promise((resolve, reject) => {
+      this.once(ADAPTER_EVENTS.CONNECTED, () => {
+        return resolve(this.provider);
+      });
+      this.once(ADAPTER_EVENTS.ERRORED, err => {
+        return reject(err);
+      });
+      this.once(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility => {
+        // modal is closed but user is not connected to any wallet.
+        if (!visibility && this.status !== ADAPTER_STATUS.CONNECTED) {
+          return reject(new Error("User closed the modal"));
+        }
+      });
+    });
+  }
+  async initExternalWalletAdapters(externalWalletsInitialized, options) {
+    if (externalWalletsInitialized) return;
+    const adaptersConfig = {};
+    Object.keys(this.walletAdapters).forEach(async adapterName => {
+      const adapter = this.walletAdapters[adapterName];
+      if ((adapter === null || adapter === void 0 ? void 0 : adapter.type) === ADAPTER_CATEGORY.EXTERNAL) {
+        log.debug("init external wallet", this.cachedAdapter, adapterName);
+        this.subscribeToAdapterEvents(adapter);
+        // we are not initializing cached adapter here as it is already being initialized in initModal before.
+        if (this.cachedAdapter === adapterName) {
+          return;
+        }
+        if (adapter.status === ADAPTER_STATUS.NOT_READY) {
+          await adapter.init({
+            autoConnect: this.cachedAdapter === adapterName
+          }).then(() => {
+            const adapterModalConfig = this.modalConfig.adapters[adapterName];
+            adaptersConfig[adapterName] = _objectSpread(_objectSpread({}, adapterModalConfig), {}, {
+              isInjected: adapter.isInjected
+            });
+            this.loginModal.addWalletLogins(adaptersConfig, {
+              showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+            });
+            return undefined;
+          }).catch(error => log.error(error, "error while initializing adapter", adapterName));
+        } else if (adapter.status === ADAPTER_STATUS.READY) {
+          const adapterModalConfig = this.modalConfig.adapters[adapterName];
+          adaptersConfig[adapterName] = _objectSpread(_objectSpread({}, adapterModalConfig), {}, {
+            isInjected: adapter.isInjected
+          });
+          this.loginModal.addWalletLogins(adaptersConfig, {
+            showExternalWalletsOnly: !!(options !== null && options !== void 0 && options.showExternalWalletsOnly)
+          });
+        }
+      }
+    });
+  }
+  initializeInAppWallet(adapterName) {
+    log.info("adapterInitResults", adapterName);
+    if (this.walletAdapters[adapterName].type === ADAPTER_CATEGORY.IN_APP) {
+      var _adapterName, _this$options$uiConfi2, _this$options$uiConfi3, _this$options$uiConfi4;
+      this.loginModal.addSocialLogins(adapterName, getAdapterSocialLogins(adapterName, (_adapterName = this.modalConfig.adapters[adapterName]) === null || _adapterName === void 0 ? void 0 : _adapterName.loginMethods), ((_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.loginMethodsOrder) || AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+        loginGridCol: ((_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.loginGridCol) || 3,
+        primaryButton: ((_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.primaryButton) || "socialLogin"
+      }));
+    }
+  }
+  subscribeToLoginModalEvents() {
+    this.loginModal.on(LOGIN_MODAL_EVENTS.LOGIN, async params => {
+      try {
+        await this.connectTo(params.adapter, params.loginParams);
+      } catch (error) {
+        log.error(`Error while connecting to adapter: ${params.adapter}`, error);
+      }
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.INIT_EXTERNAL_WALLETS, async params => {
+      await this.initExternalWalletAdapters(params.externalWalletsInitialized);
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.DISCONNECT, async () => {
+      try {
+        await this.logout();
+      } catch (error) {
+        log.error(`Error while disconnecting`, error);
+      }
+    });
+    this.loginModal.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, async visibility => {
+      log.debug("is login modal visible", visibility);
+      this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      const adapter = this.walletAdapters[WALLET_ADAPTERS.WALLET_CONNECT_V2];
+      if (adapter) {
+        const walletConnectStatus = adapter === null || adapter === void 0 ? void 0 : adapter.status;
+        log.debug("trying refreshing wc session", visibility, walletConnectStatus);
+        if (visibility && (walletConnectStatus === ADAPTER_STATUS.READY || walletConnectStatus === ADAPTER_STATUS.CONNECTING)) {
+          log.debug("refreshing wc session");
+
+          // refreshing session for wallet connect whenever modal is opened.
+          try {
+            adapter.connect();
+          } catch (error) {
+            log.error(`Error while disconnecting to wallet connect in core`, error);
+          }
+        }
+        if (!visibility && this.status === ADAPTER_STATUS.CONNECTED && (walletConnectStatus === ADAPTER_STATUS.READY || walletConnectStatus === ADAPTER_STATUS.CONNECTING)) {
+          log.debug("this stops wc adapter from trying to reconnect once proposal expires");
+          adapter.status = ADAPTER_STATUS.READY;
+        }
+      }
+    });
+  }
+}
+
+export { Web3Auth };