From cabe830f55567adc00760aaf7ac890d377216c58 Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Wed, 28 Feb 2024 15:58:04 +0800
Subject: [PATCH] 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    |  1 +
 web/src/auth/ProviderButton.js | 13 ++++++++++---
 web/src/common/OAuthWidget.js  | 18 ++++++++++++++++--
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index dd964995..9125a0a7 100644
--- a/.github/workflows/build.yml
+++ b/.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
diff --git a/web/src/auth/ProviderButton.js b/web/src/auth/ProviderButton.js
index 9b9c33aa..18355ead 100644
--- a/web/src/auth/ProviderButton.js
+++ b/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);
+      });
   }
 }
 
diff --git a/web/src/common/OAuthWidget.js b/web/src/common/OAuthWidget.js
index 4b5785b6..6dc0305c 100644
--- a/web/src/common/OAuthWidget.js
+++ b/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) => {