@arcblock/did-connect-react 3.4.0 → 3.4.1

package/lib/Connect/components/login-item/connect-provider-list.js

@@ -1,175 +1,180 @@
-import { jsx as l, jsxs as me } from "react/jsx-runtime";
-import o from "prop-types";
-import { Box as L } from "@mui/material";
-import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_ICON_SIZE as I, LOGIN_PROVIDER_NAME as de } from "@arcblock/ux/lib/Util/constant";
-import { checkSameProtocol as pe, getWebWalletUrl as ue } from "@arcblock/ux/lib/Util/wallet";
+import { jsx as l, jsxs as po } from "react/jsx-runtime";
+import n from "prop-types";
+import { Box as A } from "@mui/material";
+import { LOGIN_PROVIDER as e, LOGIN_PROVIDER_ICON_SIZE as E, LOGIN_PROVIDER_NAME as ho } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as uo, getWebWalletUrl as go } from "@arcblock/ux/lib/Util/wallet";
 import b from "lodash/noop";
-import { useMemoizedFn as a, useCreation as he } from "ahooks";
-import v from "js-cookie";
-import { detectWalletExtension as ge, getCookieOptions as fe } from "@arcblock/ux/lib/Util";
-import { useRef as w, useEffect as Z } from "react";
-import { mergeSx as ye } from "@arcblock/ux/lib/Util/style";
-import Le from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { GA_LAST_LOGIN_METHOD as g } from "@arcblock/ux/lib/withTracker/constant";
-import { translate as Ie } from "@arcblock/ux/lib/Locale/util";
-import be from "@arcblock/ux/lib/Empty";
-import { useBrowser as xe } from "@arcblock/react-hooks";
-import Ce from "./mobile-login-item.js";
-import Ae from "./web-login-item.js";
-import Ee from "./login-method-item.js";
-import Pe from "./wallet-login-options.js";
-import { useOAuth as Me } from "../../../OAuth/context.js";
-import { useStateContext as ve } from "../../contexts/state.js";
-import { getAppId as we, logger as _e, getApiErrorMessage as Oe } from "../../../utils.js";
-import We from "./passkey-login-item.js";
-import { usePasskey as Te } from "../../../Passkey/context.js";
+import { useMemoizedFn as a, useCreation as fo } from "ahooks";
+import O from "js-cookie";
+import { detectWalletExtension as yo, getCookieOptions as Lo } from "@arcblock/ux/lib/Util";
+import { useRef as w, useEffect as J } from "react";
+import { mergeSx as Io } from "@arcblock/ux/lib/Util/style";
+import Ao from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { GA_LAST_LOGIN_METHOD as f } from "@arcblock/ux/lib/withTracker/constant";
+import { translate as Eo } from "@arcblock/ux/lib/Locale/util";
+import bo from "@arcblock/ux/lib/Empty";
+import { useBrowser as xo } from "@arcblock/react-hooks";
+import Co from "./mobile-login-item.js";
+import Po from "./web-login-item.js";
+import Mo from "./login-method-item.js";
+import vo from "./wallet-login-options.js";
+import { useOAuth as _o } from "../../../OAuth/context.js";
+import { useStateContext as Oo } from "../../contexts/state.js";
+import { getAppId as wo, logger as Wo, getApiErrorMessage as To } from "../../../utils.js";
+import ko from "./passkey-login-item.js";
+import { usePasskey as So } from "../../../Passkey/context.js";
 import "../../../Passkey/actions.js";
-import ke from "../../plugins/email/index.js";
-import Re from "../../assets/locale.js";
-function Se({
-  onSuccess: _ = b,
-  onError: O = b,
+import Ro from "../../plugins/email/index.js";
+import jo from "../../assets/locale.js";
+function No({
+  onSuccess: W = b,
+  onError: T = b,
   size: m = "small",
-  tokenState: n,
-  webWalletUrl: x = ue(),
-  tokenKey: W,
-  passkeyBehavior: T = "none",
+  tokenState: t,
+  webWalletUrl: x = go(),
+  tokenKey: k,
+  passkeyBehavior: S = "none",
   onReset: C = b,
   providerList: d = [],
-  slotProps: $ = {},
-  disableSwitchApp: A = !1,
-  forceUpdate: J = b,
-  magicToken: k = void 0,
-  baseUrl: X = "/",
-  customItems: z = [],
-  qrcode: Q = null,
-  hideQRCode: f = !1
+  slotProps: X = {},
+  disableSwitchApp: P = !1,
+  forceUpdate: z = b,
+  magicToken: R = void 0,
+  baseUrl: Q = "/",
+  customItems: oo = [],
+  qrcode: eo = null,
+  hideQRCode: y = !1
 }) {
-  const E = w(null), P = w(null), R = w(null), ee = pe(x), S = ge(), p = xe(), { loginOAuth: oe, logoutOAuth: ne, t: te, oauthState: s } = Me(), { passkeyState: j } = Te(), {
-    extraParams: N,
-    locale: D,
+  const M = w(null), v = w(null), j = w(null), no = uo(x), N = yo(), p = xo(), { loginOAuth: to, logoutOAuth: ro, t: io, oauthState: s } = _o(), { passkeyState: D } = So(), {
+    extraParams: F,
+    locale: B,
     connectState: i,
-    plugins: F,
-    setPlugins: re,
-    setSelectedPlugin: ie,
-    getPlugin: B,
-    showWalletOptions: h,
-    setShowWalletOptions: y
-  } = ve(), le = a((e, t = {}) => Ie(Re, e, D, "en", t)), G = a(async (e) => {
-    localStorage.setItem(g, e.provider), n.reset(), s.reset({
+    plugins: G,
+    setPlugins: lo,
+    setSelectedPlugin: so,
+    getPlugin: U,
+    showWalletOptions: g,
+    setShowWalletOptions: L,
+    lastLoginMethod: h
+  } = Oo(), I = a((o, r = {}) => Eo(jo, o, B, "en", r)), q = a(async (o) => {
+    localStorage.setItem(f, o.provider), t.reset(), s.reset({
       status: "scanned"
-    }), j.reset(), i.chooseMethod = e.provider;
-    const t = N?.sourceAppPid;
+    }), D.reset(), i.chooseMethod = o.provider;
+    const r = F?.sourceAppPid;
     try {
       s.loading = !0, s.status = "scanned";
-      const c = await oe(e, {
-        action: n.action,
-        ...N
-      }), u = fe({ returnDomain: !1 });
-      v.remove("connected_did", u), v.remove("connected_pk", u), v.remove("connected_wallet_os", u), c?.sessionToken && (await _(
+      const c = await to(o, {
+        action: t.action,
+        ...F
+      }), u = Lo({ returnDomain: !1 });
+      O.remove("connected_did", u), O.remove("connected_pk", u), O.remove("connected_wallet_os", u), c?.sessionToken && (await W(
         {
           ...c,
           encrypted: !1
         },
-        (ae) => ae,
+        (mo) => mo,
         {
-          sourceAppPid: t,
-          connected_app: we(n.appInfo, n.memberAppInfo)
+          sourceAppPid: r,
+          connected_app: wo(t.appInfo, t.memberAppInfo)
         }
       ), s.loading = !1, s.status = "succeed");
     } catch (c) {
-      _e.error(`Failed login OAuth: ${e.provider}`, c);
-      const u = Oe(c, te("loginOAuthFailed"));
-      s.loading = !1, s.error = u, s.status = "error", await ne({ provider: e.provider }), O(new Error(u));
+      Wo.error(`Failed login OAuth: ${o.provider}`, c);
+      const u = To(c, io("loginOAuthFailed"));
+      s.loading = !1, s.error = u, s.status = "error", await ro({ provider: o.provider }), T(new Error(u));
     }
-  }), U = a(async () => {
-    n.reset(), await C(), n.status = "created", i.chooseMethod = "wallet";
-  }), q = a(async () => {
-    localStorage.setItem(g, "wallet"), n.reset(), await C(), n.status = "created", i.chooseMethod = "wallet";
-    const e = E.current?.connect;
+  }), K = a(async () => {
+    t.reset(), await C(), t.status = "created", i.chooseMethod = "wallet";
+  }), V = a(async () => {
+    localStorage.setItem(f, e.WALLET), t.reset(), await C(), t.status = "created", i.chooseMethod = "wallet";
+    const o = M.current?.connect;
     i.retryConnect = () => {
-      e(U);
+      o(K);
     };
-  }), V = a(() => {
-    localStorage.setItem(g, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
-    const e = P.current.connect;
+  }), Y = a(() => {
+    localStorage.setItem(f, e.WALLET), t.status = "scanned", i.chooseMethod = "wallet-web";
+    const o = v.current.connect;
     i.retryConnect = async () => {
-      await C(), n.error = "", n.status = "scanned", e();
+      await C(), t.error = "", t.status = "scanned", o();
     };
-  }), se = a(() => {
-    y(!1);
-  }), M = he(() => d.length === 1 && d[0].provider === r.WALLET, [d]);
-  Z(() => {
-    M && !p.mobile.any && !h && y(!0);
-  }, [M, p.mobile.any, y, h]);
-  const K = d.some((e) => e.provider === r.EMAIL), Y = ke({ baseUrl: X }), ce = a(() => {
-    if (k && d.some((e) => e.name === r.EMAIL) && F.some((e) => e.name === r.EMAIL)) {
-      const e = B(r.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(g, "email"), e.state.reset(), e.state.magicToken = k, i.chooseMethod = r.EMAIL, ie(e), J());
+  }), co = a(() => {
+    L(!1);
+  }), _ = fo(() => d.length === 1 && d[0].provider === e.WALLET, [d]);
+  J(() => {
+    _ && !p.mobile.any && !g && L(!0);
+  }, [_, p.mobile.any, L, g]);
+  const H = d.some((o) => o.provider === e.EMAIL), Z = Ro({ baseUrl: Q }), ao = a(() => {
+    if (R && d.some((o) => o.name === e.EMAIL) && G.some((o) => o.name === e.EMAIL)) {
+      const o = U(e.EMAIL);
+      o.state.status === "idle" && (localStorage.setItem(f, e.EMAIL), o.state.reset(), o.state.magicToken = R, i.chooseMethod = e.EMAIL, so(o), z());
     }
   });
-  Z(() => {
-    const e = [];
-    if (K) {
-      const t = B(r.EMAIL);
-      t && t.baseUrl === Y.baseUrl ? e.push(t) : e.push(Y);
+  J(() => {
+    const o = [];
+    if (H) {
+      const r = U(e.EMAIL);
+      r && r.baseUrl === Z.baseUrl ? o.push(r) : o.push(Z);
     }
-    re(e), i.retryConnect = U, setTimeout(() => {
-      ce();
+    lo(o), i.retryConnect = K, setTimeout(() => {
+      ao();
     }, 100);
-  }, [K]);
-  const H = d.map((e) => {
-    if (e.provider === r.WALLET)
-      return p.mobile.any && !h ? /* @__PURE__ */ l(
-        Ce,
+  }, [H]);
+  const $ = d.map((o) => {
+    if (o.provider === e.WALLET)
+      return p.mobile.any && !g ? /* @__PURE__ */ l(
+        Co,
         {
-          ref: E,
-          tokenState: n,
+          t: I,
+          isLatest: h && h === e.WALLET,
+          ref: M,
+          tokenState: t,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
-          locale: D,
-          tokenKey: W,
-          disableSwitchApp: A,
-          onClick: q
+          locale: B,
+          tokenKey: k,
+          disableSwitchApp: P,
+          onClick: V
         },
-        r.WALLET
-      ) : f || !f && (ee || S) && (!p.mobile.any || S) ? /* @__PURE__ */ l(
-        Ae,
+        e.WALLET
+      ) : y || !y && (no || N) && (!p.mobile.any || N) ? /* @__PURE__ */ l(
+        Po,
         {
-          ref: P,
-          tokenState: n,
+          t: I,
+          isLatest: h && h === e.WALLET,
+          ref: v,
+          tokenState: t,
           webWalletUrl: x,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
-          disableSwitchApp: A,
-          autoConnect: !f,
+          disableSwitchApp: P,
+          autoConnect: !y,
           onClick: () => {
-            f ? y(!0) : V();
+            y ? L(!0) : Y();
           }
         },
-        r.WALLET
+        e.WALLET
       ) : null;
-    if (e.provider === r.PASSKEY)
-      return T === "none" ? null : /* @__PURE__ */ l(
-        We,
+    if (o.provider === e.PASSKEY)
+      return S === "none" ? null : /* @__PURE__ */ l(
+        ko,
         {
-          ref: R,
-          onSuccess: _,
-          onError: O,
-          tokenState: n,
-          behavior: T,
+          ref: j,
+          onSuccess: W,
+          onError: T,
+          tokenState: t,
+          behavior: S,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
           onClick: () => {
-            localStorage.setItem(g, "passkey");
-            const t = R.current.connect;
+            localStorage.setItem(f, e.PASSKEY);
+            const r = j.current.connect;
             i.chooseMethod = "passkey", i.retryConnect = () => {
-              j.verifying = !0, i.chooseMethod = "passkey", t();
+              D.verifying = !0, i.chooseMethod = "passkey", r();
             };
           },
           slotProps: {
             icon: {
               sx: {
-                fontSize: I,
+                fontSize: E,
                 "& svg": {
-                  fontSize: I,
+                  fontSize: E,
                   width: "1em",
                   height: "1em"
                 }
@@ -177,78 +182,80 @@ function Se({
             }
           }
         },
-        r.PASSKEY
+        e.PASSKEY
       );
-    if (e.provider === r.EMAIL) {
-      const t = F.find((c) => c.name === r.EMAIL);
-      return t ? t?.renderListItem({
-        key: t.name,
+    if (o.provider === e.EMAIL) {
+      const r = G.find((c) => c.name === e.EMAIL);
+      return r ? r?.renderListItem({
+        key: r.name,
         sx: [m === "small" ? { p: 1 } : { p: 2 }]
         // forceUpdate,
       }) : null;
     }
-    return e.type === "oauth" ? /* @__PURE__ */ l(
-      Ee,
+    return o.type === "oauth" ? /* @__PURE__ */ l(
+      Mo,
       {
-        title: de[e.provider],
+        t: I,
+        isLatest: h && h === o.provider,
+        title: ho[o.provider],
         icon: /* @__PURE__ */ l(
-          Le,
+          Ao,
           {
-            provider: e.provider,
+            provider: o.provider,
             sx: {
               transform: "scale(0.95)",
-              width: I,
-              height: I,
+              width: E,
+              height: E,
               color: "text.primary"
             }
           }
         ),
         onClick: () => {
-          G(e), i.retryConnect = () => {
-            G(e);
+          q(o), i.retryConnect = () => {
+            q(o);
           };
         },
         sx: [m === "small" ? { p: 1.2 } : { p: 2 }]
       },
-      e.provider
+      o.provider
     ) : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ l(L, { className: "did-connect__choose", sx: ye({ flex: 1 }, $?.root?.sx), children: /* @__PURE__ */ l(
-    L,
+  return /* @__PURE__ */ l(A, { className: "did-connect__choose", sx: Io({ flex: 1 }, X?.root?.sx), children: /* @__PURE__ */ l(
+    A,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: 2
       },
-      children: /* @__PURE__ */ me(
-        L,
+      children: /* @__PURE__ */ po(
+        A,
         {
           sx: [
             {
               display: "flex",
               flexDirection: "column",
-              ...h && !p.mobile.any ? { alignItems: "center", gap: 0 } : { gap: 1.5 }
+              ...g && !p.mobile.any ? { alignItems: "center", gap: 0 } : { gap: 1.5 }
             }
           ],
           children: [
-            h && !p.mobile.any ? /* @__PURE__ */ l(
-              Pe,
+            g && !p.mobile.any ? /* @__PURE__ */ l(
+              vo,
               {
-                qrcode: Q,
-                tokenState: n,
+                qrcode: eo,
+                tokenState: t,
                 webWalletUrl: x,
                 size: m,
-                disableSwitchApp: A,
-                tokenKey: W,
-                walletLoginRef: E,
-                webLoginRef: P,
-                onMobileLoginClick: q,
-                onWebLoginClick: V,
-                onBack: M ? void 0 : se
+                disableSwitchApp: P,
+                tokenKey: k,
+                walletLoginRef: M,
+                webLoginRef: v,
+                onMobileLoginClick: V,
+                onWebLoginClick: Y,
+                onBack: _ ? void 0 : co
               }
             ) : /* @__PURE__ */ l(
-              L,
+              A,
               {
                 sx: {
                   display: "grid",
@@ -293,8 +300,8 @@ function Se({
                     }
                   }
                 },
-                children: H.length > 0 ? H : /* @__PURE__ */ l(
-                  be,
+                children: $.length > 0 ? $ : /* @__PURE__ */ l(
+                  bo,
                   {
                     className: "arc-login-item",
                     sx: {
@@ -302,37 +309,37 @@ function Se({
                         textAlign: "center"
                       }
                     },
-                    children: le("noAuthenticationProvider")
+                    children: I("noAuthenticationProvider")
                   }
                 )
               }
             ),
-            z.map((e) => e || null)
+            oo.map((o) => o || null)
           ]
         }
       )
     }
   ) });
 }
-Se.propTypes = {
-  onSuccess: o.func,
-  onError: o.func,
-  size: o.oneOf(["small", "normal", "large"]),
-  tokenState: o.object.isRequired,
-  webWalletUrl: o.string,
-  tokenKey: o.string.isRequired,
-  passkeyBehavior: o.oneOf(["none", "both", "only-existing", "only-new"]),
-  onReset: o.func,
-  providerList: o.array,
-  slotProps: o.object,
-  disableSwitchApp: o.bool,
-  forceUpdate: o.func,
-  magicToken: o.string,
-  baseUrl: o.string,
-  customItems: o.arrayOf(o.node),
-  qrcode: o.node,
-  hideQRCode: o.bool
+No.propTypes = {
+  onSuccess: n.func,
+  onError: n.func,
+  size: n.oneOf(["small", "normal", "large"]),
+  tokenState: n.object.isRequired,
+  webWalletUrl: n.string,
+  tokenKey: n.string.isRequired,
+  passkeyBehavior: n.oneOf(["none", "both", "only-existing", "only-new"]),
+  onReset: n.func,
+  providerList: n.array,
+  slotProps: n.object,
+  disableSwitchApp: n.bool,
+  forceUpdate: n.func,
+  magicToken: n.string,
+  baseUrl: n.string,
+  customItems: n.arrayOf(n.node),
+  qrcode: n.node,
+  hideQRCode: n.bool
 };
 export {
-  Se as default
+  No as default
 };