thirdweb-dev · Adamj1232 · Mar 22, 2023 · Mar 21, 2023 · Mar 21, 2023 · Mar 21, 2023
diff --git a/docs/src/routes/docs/[...4]wallets/web3auth.md b/docs/src/routes/docs/[...4]wallets/web3auth.md
@@ -22,8 +22,8 @@ npm install @web3-onboard/web3auth
 </Tabs>
 
 ## Options
-
 See the [Web3auth Docs](https://docs.web3auth.io/api-reference/web/plugnplay) for the extensive list of options.
+For troubleshooting web3Auth errors, framework, polyfill, etc please see the [official Web3Auth troubleshooting docs](https://web3auth.io/docs/troubleshooting/webpack-issues).
 
 ## Usage
 
@@ -48,6 +48,101 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+## Types
+
+```typescript
+type Web3AuthModuleOptions = Omit<Web3AuthOptions, 'chainConfig'> & {
+  chainConfig?: Partial<CustomChainConfig> &
+    Pick<CustomChainConfig, 'chainNamespace'>
+
+  modalConfig?: Record<string, ModalConfig> | undefined
+
+  /**
+   * @deprecated use web3Auth native Z-Index config through
+   * uiConfig.modalZIndex
+   */
+  loginModalZIndex?: string
+}
+
+interface Web3AuthOptions extends Web3AuthNoModalOptions {
+    /**
+     * web3auth instance provides different adapters for different type of usages. If you are a dapp and want to
+     * use external wallets like metamask, then you can use the `DAPP` authMode.
+     * If you are a wallet and only want to use you own wallet implementations along with openlogin,
+     * then you should use `WALLET` authMode.
+     *
+     * @defaultValue `DAPP`
+     */
+    authMode?: "DAPP" | "WALLET";
+    /**
+     * Config for configuring modal ui display properties
+     */
+    uiConfig?: Omit<UIConfig, "adapterListener">;
+}
+
+interface UIConfig {
+    /**
+     * App name to display in the UI.
+     */
+    appName?: string;
+    /**
+     * Logo for your app.
+     */
+    appLogo?: string;
+    /**
+     * theme for the modal
+     *
+     * @defaultValue `auto`
+     */
+    theme?: "light" | "dark" | "auto";
+    /**
+     * order of how login methods are shown
+     *
+     * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
+     */
+    loginMethodsOrder?: string[];
+    /**
+     * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
+     * en: english
+     * de: german
+     * ja: japanese
+     * ko: korean
+     * zh: mandarin
+     * es: spanish
+     * fr: french
+     * pt: portuguese
+     *
+     */
+    defaultLanguage?: string;
+    /**
+     * Z-index of the modal and iframe
+     * @defaultValue 99998
+     */
+    modalZIndex?: string;
+    /**
+     * Whether to show errors on Web3Auth modal.
+     *
+     * @defaultValue `true`
+     */
+    displayErrorsOnModal?: boolean;
+    /**
+     * number of columns to display the Social Login buttons
+     *
+     * @defaultValue `3`
+     */
+    loginGridCol?: 2 | 3;
+    /**
+     * decides which button will be displayed as primary button in modal
+     * only one button will be primary and other buttons in modal will be secondary
+     *
+     * @defaultValue `socialLogin`
+     */
+    primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
+    adapterListener: SafeEventEmitter;
+    web3AuthNetwork?: OPENLOGIN_NETWORK_TYPE;
+}
+```
+
 ## Build Environments
 For other build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
 ### Webpack 4

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -44,7 +44,7 @@
     "@web3-onboard/trust": "^2.0.1-alpha.1",
     "@web3-onboard/torus": "^2.2.2-alpha.1",
     "@web3-onboard/taho": "^2.0.1-alpha.1",
-    "@web3-onboard/web3auth": "^2.1.5-alpha.1",
+    "@web3-onboard/web3auth": "^2.2.0-alpha.1",
     "@web3-onboard/walletconnect": "^2.3.3-alpha.1",
     "@web3-onboard/enkrypt": "^2.0.1-alpha.1",
     "@web3-onboard/mew-wallet": "^2.0.0",

diff --git a/packages/web3auth/README.md b/packages/web3auth/README.md
@@ -9,6 +9,7 @@
 ## Options
 
 See the [Web3auth Docs](https://docs.web3auth.io/api-reference/web/plugnplay) for the extensive list of options.
+For troubleshooting web3Auth errors, framework, polyfill, etc please see the [official Web3Auth troubleshooting docs](https://web3auth.io/docs/troubleshooting/webpack-issues).
 
 ## Usage
 
@@ -32,3 +33,138 @@ const onboard = Onboard({
 const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
+
+## Types
+
+```typescript
+type Web3AuthModuleOptions = Omit<Web3AuthOptions, 'chainConfig'> & {
+  chainConfig?: Partial<CustomChainConfig> &
+    Pick<CustomChainConfig, 'chainNamespace'>
+
+  modalConfig?: Record<string, ModalConfig> | undefined
+
+  /**
+   * @deprecated use web3Auth native Z-Index config through
+   * uiConfig.modalZIndex
+   */
+  loginModalZIndex?: string
+}
+
+interface Web3AuthOptions extends Web3AuthNoModalOptions {
+    /**
+     * web3auth instance provides different adapters for different type of usages. If you are a dapp and want to
+     * use external wallets like metamask, then you can use the `DAPP` authMode.
+     * If you are a wallet and only want to use you own wallet implementations along with openlogin,
+     * then you should use `WALLET` authMode.
+     *
+     * @defaultValue `DAPP`
+     */
+    authMode?: "DAPP" | "WALLET";
+    /**
+     * Config for configuring modal ui display properties
+     */
+    uiConfig?: Omit<UIConfig, "adapterListener">;
+}
+
+interface UIConfig {
+    /**
+     * App name to display in the UI.
+     */
+    appName?: string;
+    /**
+     * Logo for your app.
+     */
+    appLogo?: string;
+    /**
+     * theme for the modal
+     *
+     * @defaultValue `auto`
+     */
+    theme?: "light" | "dark" | "auto";
+    /**
+     * order of how login methods are shown
+     *
+     * @defaultValue `["google", "facebook", "twitter", "reddit", "discord", "twitch", "apple", "line", "github", "kakao", "linkedin", "weibo", "wechat", "email_passwordless"]`
+     */
+    loginMethodsOrder?: string[];
+    /**
+     * language which will be used by web3auth. app will use browser language if not specified. if language is not supported it will use "en"
+     * en: english
+     * de: german
+     * ja: japanese
+     * ko: korean
+     * zh: mandarin
+     * es: spanish
+     * fr: french
+     * pt: portuguese
+     *
+     */
+    defaultLanguage?: string;
+    /**
+     * Z-index of the modal and iframe
+     * @defaultValue 99998
+     */
+    modalZIndex?: string;
+    /**
+     * Whether to show errors on Web3Auth modal.
+     *
+     * @defaultValue `true`
+     */
+    displayErrorsOnModal?: boolean;
+    /**
+     * number of columns to display the Social Login buttons
+     *
+     * @defaultValue `3`
+     */
+    loginGridCol?: 2 | 3;
+    /**
+     * decides which button will be displayed as primary button in modal
+     * only one button will be primary and other buttons in modal will be secondary
+     *
+     * @defaultValue `socialLogin`
+     */
+    primaryButton?: "externalLogin" | "socialLogin" | "emailLogin";
+    adapterListener: SafeEventEmitter;
+    web3AuthNetwork?: OPENLOGIN_NETWORK_TYPE;
+}
+```
+
+
+## Build Environments
+For troubleshooting web3Auth build env troubleshooting please also see the [official Web3Auth troubleshooting docs](https://web3auth.io/docs/troubleshooting/webpack-issues).
+### Webpack 4
+
+Node built-ins are automatically bundled in v4 so that portion is handled automatically.
+
+**web3auth** will require a Babel to compile from es6 if not already supported. See config for Babel and Webpack4 as follows
+
+`npm i --save-dev @babel/cli @babel/core @babel/node @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining @babel/plugin-syntax-bigint @babel/register`
+**AND**
+`npm i babel-loader`
+
+**babel.config.js**
+
+```javascript
+module.exports = (api) => {
+  api.cache(true)
+  const plugins = [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+    '@babel/plugin-syntax-bigint'
+  ]
+  return { plugins }
+}
+```
+
+**webpack.config.js**
+
+```javascript
+config.module.rules = [
+  ...otherModuleRules,
+  {
+    test: /\.js$/,
+    exclude: (_) => !/node_modules\/(@web3auth|@ethereumjs)/.test(_),
+    loader: 'babel-loader'
+  }
+]
+```
diff --git a/packages/web3auth/package.json b/packages/web3auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/web3auth",
-  "version": "2.1.5-alpha.1",
+  "version": "2.2.0-alpha.1",
   "description": "Web3Auth SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -53,11 +53,17 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "react": "^18.2.0",
     "typescript": "^4.5.5"
   },
   "dependencies": {
     "@web3-onboard/common": "^2.2.4-alpha.1",
-    "@web3auth/base": "^3.3.0",
-    "@web3auth/modal": "^3.3.0"
+    "@solana/web3.js": "^1.73.0",
+    "@web3auth/base": "^5.0.1",
+    "@web3auth/modal": "^5.0.1",
+    "react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2"
   }
 }
diff --git a/packages/web3auth/src/index.ts b/packages/web3auth/src/index.ts
@@ -5,15 +5,17 @@ import type {
   WalletInit
 } from '@web3-onboard/common'
 
-import type { Web3AuthCoreOptions } from '@web3auth/core'
-import type { ModalConfig, Web3Auth } from '@web3auth/modal'
+import type { Web3AuthOptions, ModalConfig } from '@web3auth/modal'
 import type { CustomChainConfig } from '@web3auth/base'
-import { LOGIN_MODAL_EVENTS } from '@web3auth/ui'
 
-type Web3AuthModuleOptions = Omit<Web3AuthCoreOptions, 'chainConfig'> & {
+type Web3AuthModuleOptions = Omit<Web3AuthOptions, 'chainConfig'> & {
   chainConfig?: Partial<CustomChainConfig> &
     Pick<CustomChainConfig, 'chainNamespace'>
   modalConfig?: Record<string, ModalConfig> | undefined
+  /**
+   * @deprecated use web3Auth native Z-Index config through
+   * uiConfig.modalZIndex
+   */
   loginModalZIndex?: string
 }
 
@@ -33,6 +35,8 @@ function web3auth(options: Web3AuthModuleOptions): WalletInit {
 
       let [currentChain] = chains
 
+      const { loginModalZIndex, modalConfig } = options || {}
+
       const getChainConfig = ({
         rpcUrl,
         namespace,
@@ -52,32 +56,25 @@ function web3auth(options: Web3AuthModuleOptions): WalletInit {
         }
       })
 
-      const web3authCoreOptions = {
+      const modalZIndex = loginModalZIndex
+        ? loginModalZIndex
+        : options.uiConfig && options.uiConfig.modalZIndex
+        ? options.uiConfig.modalZIndex
+        : '50'
+
+      const web3authCoreOptions: Web3AuthOptions = {
         ...options,
         ...getChainConfig(currentChain)
       }
 
+      if (modalZIndex) {
+        typeof web3authCoreOptions.uiConfig !== 'object'
+          ? (web3authCoreOptions.uiConfig = { modalZIndex: modalZIndex })
+          : (web3authCoreOptions.uiConfig.modalZIndex = modalZIndex)
+      }
+
       let web3auth = new Web3Auth(web3authCoreOptions)
 
-      // There is no exposed z-index setter so we must set through modal events
-      // Tracking a permanent fix here - https://github.com/Web3Auth/web3auth-web/issues/1018
-      // subscribe to lifecycle events emitted by web3auth
-      const subscribeAuthEvents = (web3auth: Web3Auth) => {
-        // emitted when modal visibility changes.
-        web3auth.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, isVisible => {
-          if (isVisible) {
-            // Move to bottom of stack
-            setTimeout(() => {
-              const modal = document.getElementById('w3a-modal')
-              if (modal) {
-                modal.style.zIndex = options.loginModalZIndex || '50'
-              }
-            }, 10)
-          }
-        })
-      }
-      subscribeAuthEvents(web3auth)
-      const { modalConfig } = options || {}
       await web3auth.initModal(modalConfig)
 
       let provider: EIP1193Provider