optimise auth connector loading

Author: arch1995

demo/vite-react-app/package-lock.json

@@ -1,4 +1,4 @@
-import { WALLET_CONNECTORS } from "@web3auth/modal";
+import { CONNECTOR_STATUS, WALLET_CONNECTORS } from "@web3auth/modal";
 import { useWeb3Auth } from "../services/web3auth";
 import styles from "../styles/Home.module.css";
 
@@ -18,6 +18,7 @@ const Main = () => {
     showWalletConnectScanner,
     enableMFA,
     manageMFA,
+    isReady,
   } = useWeb3Auth();
 
   const loggedInView = (
@@ -68,9 +69,15 @@ const Main = () => {
   );
 
   const unloggedInView = (
-    <button onClick={login} className={styles.card}>
-      Login
-    </button>
+    <>
+      {isReady ? (
+        <button onClick={login} className={styles.card}>
+          Login
+        </button>
+      ) : (
+        <p>Loading Web3Auth...</p>
+      )}
+    </>
   );
 
   return <div className={styles.grid}>{provider ? loggedInView : unloggedInView}</div>;

demo/vite-react-app/src/components/Main.tsx

@@ -7,6 +7,7 @@ export interface IWeb3AuthContext {
   web3Auth: Web3Auth | null;
   provider: IProvider | null;
   isLoading: boolean;
+  isReady: boolean;
   user: unknown;
   chain: string;
   login: () => Promise<void>;
@@ -29,6 +30,7 @@ export const Web3AuthContext = createContext<IWeb3AuthContext>({
   isLoading: false,
   user: null,
   chain: "",
+  isReady: false,
   login: async () => {},
   logout: async () => {},
   getUserInfo: async () => {},
@@ -66,6 +68,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
   const [wsPlugin, setWsPlugin] = useState<WalletServicesPluginType | null>(null);
   const [user, setUser] = useState<unknown | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [isReady, setIsReady] = useState(false);
 
   useEffect(() => {
     const subscribeAuthEvents = (web3auth: Web3Auth) => {
@@ -88,6 +91,11 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
       web3auth.on(CONNECTOR_EVENTS.ERRORED, (error) => {
         console.error("some error or user has cancelled login request", error);
       });
+
+      web3auth.on(CONNECTOR_EVENTS.READY, () => {
+        console.log("web3auth is ready");
+        setIsReady(true);
+      });
     };
 
     const subscribePluginEvents = (plugin: WalletServicesPluginType) => {
@@ -120,45 +128,29 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
           // get your client id from https://dashboard.web3auth.io
           clientId,
           web3AuthNetwork,
-          accountAbstractionConfig: {
-            smartAccountType: SMART_ACCOUNT.SAFE,
-            bundlerConfig: {
-              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
-            },
-            paymasterConfig: {
-              url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`,
-            },
-          },
           chains: [currentChainConfig],
           uiConfig: {
-            uxMode: "redirect",
             appName: "W3A Heroes",
             appUrl: "https://web3auth.io/",
             theme: {
               primary: "#5f27cd",
               onPrimary: "white",
             },
-            logoLight: "https://web3auth.io/images/web3auth-logo.svg",
-            logoDark: "https://web3auth.io/images/web3auth-logo.svg",
             defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
             mode: "auto", // whether to enable dark mode. defaultValue: auto
             // useLogoLoader: true,
             loginGridCol: 3,
             primaryButton: "socialLogin",
           },
           enableLogging: true,
-          plugins: [walletServicesPlugin()],
+          authBuildEnv: "testing"
         });
 
-        setWsPlugin(wsPlugin);
 
         subscribeAuthEvents(web3AuthInstance);
         setWeb3Auth(web3AuthInstance);
-        await web3AuthInstance.init();
+        await web3AuthInstance.initModal();
 
-        const plugin = web3AuthInstance.getPlugin(EVM_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-        setWsPlugin(plugin);
-        subscribePluginEvents(plugin);
       } catch (error) {
         console.error(error);
       } finally {
@@ -304,6 +296,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
     provider,
     user,
     isLoading,
+    isReady,
     login,
     logout,
     getUserInfo,

demo/vite-react-app/src/services/web3auth.tsx

@@ -68,7 +68,7 @@
     "@walletconnect/sign-client": "^2.19.1",
     "@walletconnect/types": "^2.19.1",
     "@walletconnect/utils": "^2.19.1",
-    "@web3auth/auth": "^10.3.0",
+    "@web3auth/auth": "/Users/architgupta/Desktop/web3auth/OpenLoginSdk/web3auth-auth-10.3.2.tgz",
     "@web3auth/ws-embed": "^5.0.0",
     "assert": "^2.1.0",
     "bignumber.js": "^9.1.2",

package-lock.json

@@ -72,6 +72,8 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
 
   private authConnectionConfig: (AuthConnectionConfigItem & { isDefault?: boolean })[] = [];
 
+  private wsEmbedInstancePromise: Promise<void> | null = null;
+
   constructor(params: AuthConnectorOptions) {
     super(params);
 
@@ -120,7 +122,8 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
     });
     log.debug("initializing auth connector init", this.authOptions);
 
-    await this.authInstance.init();
+    // making it async here to initialize provider.
+    const authInstancePromise = this.authInstance.init();
 
     // Use this for xrpl, mpc cases
     if (this.coreOptions.privateKeyProvider) {
@@ -139,15 +142,20 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
           const wsSupportedChains = chains.filter(
             (x) => x.chainNamespace === CHAIN_NAMESPACES.EIP155 || x.chainNamespace === CHAIN_NAMESPACES.SOLANA
           );
-          await this.wsEmbedInstance.init({
-            ...this.wsSettings,
-            chains: wsSupportedChains as ProviderConfig[],
-            chainId,
-            whiteLabel: {
-              ...this.authOptions.whiteLabel,
-              ...this.wsSettings.whiteLabel,
-            },
-          });
+          this.wsEmbedInstancePromise = this.wsEmbedInstance
+            .init({
+              ...this.wsSettings,
+              chains: wsSupportedChains as ProviderConfig[],
+              chainId,
+              whiteLabel: {
+                ...this.authOptions.whiteLabel,
+                ...this.wsSettings.whiteLabel,
+              },
+            })
+            .then(() => {
+              this.wsEmbedInstancePromise = null;
+              return;
+            });
           break;
         }
         case CHAIN_NAMESPACES.XRPL:
@@ -164,6 +172,9 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
       }
     }
 
+    // wait for auth instance to be ready.
+    await authInstancePromise;
+
     this.status = CONNECTOR_STATUS.READY;
     this.emit(CONNECTOR_EVENTS.READY, WALLET_CONNECTORS.AUTH);
 
@@ -339,6 +350,9 @@ class AuthConnector extends BaseConnector<AuthLoginParams> {
 
     // setup WS embed if chainNamespace is EIP155 or SOLANA
     if (chainNamespace === CHAIN_NAMESPACES.EIP155 || chainNamespace === CHAIN_NAMESPACES.SOLANA) {
+      // wait for ws embed instance to be ready.
+      if (this.wsEmbedInstancePromise) await this.wsEmbedInstancePromise;
+
       const { sessionId, sessionNamespace } = this.authInstance || {};
       if (sessionId) {
         const isLoggedIn = await this.wsEmbedInstance.loginWithSessionId({