Merge pull request #2137 from Web3Auth/feat/optimization

optimise auth connector loading

Author: chaitanyapotti

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) => {
@@ -109,63 +117,51 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
         console.error("some error on plugin login", error);
       });
     };
+    const controller = new AbortController();
 
     async function init() {
       try {
         const currentChainConfig = CHAIN_CONFIG[chain];
         setIsLoading(true);
         const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
-
         const web3AuthInstance = new Web3Auth({
           // 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({ signal: controller.signal });
 
-        const plugin = web3AuthInstance.getPlugin(EVM_PLUGINS.WALLET_SERVICES) as WalletServicesPluginType;
-        setWsPlugin(plugin);
-        subscribePluginEvents(plugin);
       } catch (error) {
         console.error(error);
       } finally {
         setIsLoading(false);
       }
     }
     init();
+
+    return () => {
+      controller.abort();
+    };
   }, [chain, web3AuthNetwork]);
 
   const login = async () => {
@@ -304,6 +300,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
     provider,
     user,
     isLoading,
+    isReady,
     login,
     logout,
     getUserInfo,

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

@@ -12,19 +12,19 @@
   "dependencies": {
     "@solana/web3.js": "^1.98.0",
     "@toruslabs/base-controllers": "^8.1.0",
+    "@toruslabs/bs58": "^1.0.0",
     "@toruslabs/ethereum-controllers": "^8.2.0",
     "@toruslabs/solana-controllers": "^8.1.0",
+    "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^8.0.6",
     "@toruslabs/vue-icons": "^8.0.2",
-    "@web3auth/auth": "^10.3.0",
+    "@web3auth/auth": "^10.4.0",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/no-modal": "file:../../packages/no-modal",
     "@web3auth/sign-in-with-ethereum": "^5.0.0",
     "@web3auth/ws-embed": "^5.0.0",
-    "@toruslabs/bs58": "^1.0.0",
     "ethers": "^6.13.5",
     "petite-vue-i18n": "^11.1.3",
-    "@toruslabs/tweetnacl-js": "^1.0.4",
     "vue": "^3.5.13"
   },
   "devDependencies": {