feat: use dynamic import to load web3Auth (#2757)

* feat: use dynamic import to load web3Auth and success reduce the size of signin page to 720KB when web3 idp disabled

* feat: avoid frequent import in OAuthWidget.js which may cause e2e test EPIPE error

* feat: remove import may cause e2e error

* feat: remove import may cause e2e error

* feat: remove bug may cause e2e error

* feat: try use chrome in ci/cd instead of electron to solve e2e error

.github/workflows/build.yml

@@ -108,6 +108,7 @@ jobs:
         working-directory: ./web
       - uses: cypress-io/github-action@v5
         with:
+          browser: chrome
           start: yarn start
           wait-on: 'http://localhost:7001'
           wait-on-timeout: 210

web/src/auth/ProviderButton.js

@@ -17,7 +17,6 @@ import i18next from "i18next";
 import * as Provider from "./Provider";
 import {getProviderLogoURL} from "../Setting";
 import {GithubLoginButton, GoogleLoginButton} from "react-social-login-buttons";
-import {authViaMetaMask, authViaWeb3Onboard} from "./Web3Auth";
 import QqLoginButton from "./QqLoginButton";
 import FacebookLoginButton from "./FacebookLoginButton";
 import WeiboLoginButton from "./WeiboLoginButton";
@@ -124,9 +123,17 @@ function goToSamlUrl(provider, location) {
 
 export function goToWeb3Url(application, provider, method) {
   if (provider.type === "MetaMask") {
-    authViaMetaMask(application, provider, method);
+    import("./Web3Auth")
+      .then(module => {
+        const authViaMetaMask = module.authViaMetaMask;
+        authViaMetaMask(application, provider, method);
+      });
   } else if (provider.type === "Web3Onboard") {
-    authViaWeb3Onboard(application, provider, method);
+    import("./Web3Auth")
+      .then(module => {
+        const authViaWeb3Onboard = module.authViaWeb3Onboard;
+        authViaWeb3Onboard(application, provider, method);
+      });
   }
 }
 

web/src/common/OAuthWidget.js

@@ -20,7 +20,6 @@ import * as Setting from "../Setting";
 import * as Provider from "../auth/Provider";
 import * as AuthBackend from "../auth/AuthBackend";
 import {goToWeb3Url} from "../auth/ProviderButton";
-import {delWeb3AuthToken} from "../auth/Web3Auth";
 import AccountAvatar from "../account/AccountAvatar";
 
 class OAuthWidget extends React.Component {
@@ -98,7 +97,22 @@ class OAuthWidget extends React.Component {
       user: this.props.user,
     };
     if (providerType === "MetaMask" || providerType === "Web3Onboard") {
-      delWeb3AuthToken(linkedValue);
+      import("../auth/Web3Auth")
+        .then(module => {
+          const delWeb3AuthToken = module.delWeb3AuthToken;
+          delWeb3AuthToken(linkedValue);
+          AuthBackend.unlink(body)
+            .then((res) => {
+              if (res.status === "ok") {
+                Setting.showMessage("success", "Unlinked successfully");
+
+                this.unlinked();
+              } else {
+                Setting.showMessage("error", `Failed to unlink: ${res.msg}`);
+              }
+            });
+        });
+      return;
     }
     AuthBackend.unlink(body)
       .then((res) => {