@arcblock/did-connect-react 3.3.1 → 3.3.3

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

@@ -1,128 +1,128 @@
-import { jsx as s, jsxs as ee } from "react/jsx-runtime";
+import { jsx as s, jsxs as oe } from "react/jsx-runtime";
 import t from "prop-types";
-import { Box as d } from "@mui/material";
-import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_NAME as oe } from "@arcblock/ux/lib/Util/constant";
-import { checkSameProtocol as te, getWebWalletUrl as ne } from "@arcblock/ux/lib/Util/wallet";
+import { Box as p } from "@mui/material";
+import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_ICON_SIZE as h, LOGIN_PROVIDER_NAME as te } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as ne, getWebWalletUrl as re } from "@arcblock/ux/lib/Util/wallet";
 import u from "lodash/noop";
-import { useMemoizedFn as h } from "ahooks";
-import y from "js-cookie";
-import { detectWalletExtension as re, getCookieOptions as ie } from "@arcblock/ux/lib/Util";
-import { useRef as x, useEffect as se } from "react";
-import { mergeSx as le } from "@arcblock/ux/lib/Util/style";
-import ce from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { GA_LAST_LOGIN_METHOD as p } from "@arcblock/ux/lib/withTracker/constant";
-import { translate as ae } from "@arcblock/ux/lib/Locale/util";
-import me from "@arcblock/ux/lib/Empty";
+import { useMemoizedFn as g } from "ahooks";
+import I from "js-cookie";
+import { detectWalletExtension as ie, getCookieOptions as se } from "@arcblock/ux/lib/Util";
+import { useRef as L, useEffect as le } from "react";
+import { mergeSx as ce } from "@arcblock/ux/lib/Util/style";
+import ae from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { GA_LAST_LOGIN_METHOD as d } from "@arcblock/ux/lib/withTracker/constant";
+import { translate as me } from "@arcblock/ux/lib/Locale/util";
+import de from "@arcblock/ux/lib/Empty";
 import { useBrowser as pe } from "@arcblock/react-hooks";
-import de from "./mobile-login-item.js";
+import he from "./mobile-login-item.js";
 import ue from "./web-login-item.js";
-import he from "./login-method-item.js";
-import { useOAuth as ge } from "../../../OAuth/context.js";
-import { useStateContext as fe } from "../../contexts/state.js";
-import { getAppId as ye, logger as xe, getApiErrorMessage as Le } from "../../../utils.js";
+import ge from "./login-method-item.js";
+import { useOAuth as fe } from "../../../OAuth/context.js";
+import { useStateContext as ye } from "../../contexts/state.js";
+import { getAppId as Ie, logger as Le, getApiErrorMessage as xe } from "../../../utils.js";
 import Ae from "./passkey-login-item.js";
-import { usePasskey as Ie } from "../../../Passkey/context.js";
+import { usePasskey as Ee } from "../../../Passkey/context.js";
 import "../../../Passkey/actions.js";
-import Ee from "../../plugins/email/index.js";
-import Ce from "../../assets/locale.js";
-function Pe({
-  onSuccess: L = u,
+import Ce from "../../plugins/email/index.js";
+import Pe from "../../assets/locale.js";
+function ve({
+  onSuccess: x = u,
   onError: A = u,
   size: m = "small",
   tokenState: n,
-  webWalletUrl: I = ne(),
+  webWalletUrl: E = re(),
   tokenKey: U,
-  passkeyBehavior: E = "none",
-  onReset: g = u,
-  providerList: f = [],
-  slotProps: G = {},
-  disableSwitchApp: C = !1,
-  forceUpdate: B = u,
-  magicToken: P = void 0,
-  baseUrl: K = "/",
+  passkeyBehavior: C = "none",
+  onReset: f = u,
+  providerList: y = [],
+  slotProps: B = {},
+  disableSwitchApp: P = !1,
+  forceUpdate: K = u,
+  magicToken: v = void 0,
+  baseUrl: V = "/",
   customItems: q = []
 }) {
-  const v = x(null), M = x(null), w = x(null), b = pe(), V = te(I), _ = re(), { loginOAuth: Y, logoutOAuth: H, t: $, oauthState: l } = ge(), { passkeyState: O } = Ie(), { extraParams: T, locale: R, connectState: i, plugins: k, setPlugins: z, setSelectedPlugin: J, getPlugin: j } = fe(), Q = h((e, o = {}) => ae(Ce, e, R, "en", o)), S = h(async (e) => {
-    localStorage.setItem(p, e.provider), n.reset(), l.reset({
+  const _ = L(null), M = L(null), b = L(null), w = pe(), Y = ne(E), O = ie(), { loginOAuth: H, logoutOAuth: Z, t: $, oauthState: l } = fe(), { passkeyState: R } = Ee(), { extraParams: T, locale: k, connectState: i, plugins: S, setPlugins: z, setSelectedPlugin: J, getPlugin: j } = ye(), Q = g((e, o = {}) => me(Pe, e, k, "en", o)), N = g(async (e) => {
+    localStorage.setItem(d, e.provider), n.reset(), l.reset({
       status: "scanned"
-    }), O.reset(), i.chooseMethod = e.provider;
+    }), R.reset(), i.chooseMethod = e.provider;
     const o = T?.sourceAppPid;
     try {
       l.loading = !0, l.status = "scanned";
-      const c = await Y(e, {
+      const c = await H(e, {
         action: n.action,
         ...T
-      }), a = ie({ returnDomain: !1 });
-      y.remove("connected_did", a), y.remove("connected_pk", a), y.remove("connected_wallet_os", a), c?.sessionToken && (await L(
+      }), a = se({ returnDomain: !1 });
+      I.remove("connected_did", a), I.remove("connected_pk", a), I.remove("connected_wallet_os", a), c?.sessionToken && (await x(
         {
           ...c,
           encrypted: !1
         },
-        (Z) => Z,
+        (ee) => ee,
         {
           sourceAppPid: o,
-          connected_app: ye(n.appInfo, n.memberAppInfo)
+          connected_app: Ie(n.appInfo, n.memberAppInfo)
         }
       ), l.loading = !1, l.status = "succeed");
     } catch (c) {
-      xe.error(`Failed login OAuth: ${e.provider}`, c);
-      const a = Le(c, $("loginOAuthFailed"));
-      l.loading = !1, l.error = a, l.status = "error", await H({ provider: e.provider }), A(new Error(a));
+      Le.error(`Failed login OAuth: ${e.provider}`, c);
+      const a = xe(c, $("loginOAuthFailed"));
+      l.loading = !1, l.error = a, l.status = "error", await Z({ provider: e.provider }), A(new Error(a));
     }
-  }), W = h(async () => {
-    n.reset(), await g(), n.status = "created", i.chooseMethod = "wallet";
-  }), D = f.some((e) => e.provider === r.EMAIL), F = Ee({ baseUrl: K }), X = h(() => {
-    if (P && f.some((e) => e.name === r.EMAIL) && k.some((e) => e.name === r.EMAIL)) {
+  }), D = g(async () => {
+    n.reset(), await f(), n.status = "created", i.chooseMethod = "wallet";
+  }), W = y.some((e) => e.provider === r.EMAIL), F = Ce({ baseUrl: V }), X = g(() => {
+    if (v && y.some((e) => e.name === r.EMAIL) && S.some((e) => e.name === r.EMAIL)) {
       const e = j(r.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(p, "email"), e.state.reset(), e.state.magicToken = P, i.chooseMethod = r.EMAIL, J(e), B());
+      e.state.status === "idle" && (localStorage.setItem(d, "email"), e.state.reset(), e.state.magicToken = v, i.chooseMethod = r.EMAIL, J(e), K());
     }
   });
-  se(() => {
+  le(() => {
     const e = [];
-    if (D) {
+    if (W) {
       const o = j(r.EMAIL);
       o && o.baseUrl === F.baseUrl ? e.push(o) : e.push(F);
     }
-    z(e), i.retryConnect = W, setTimeout(() => {
+    z(e), i.retryConnect = D, setTimeout(() => {
       X();
     }, 100);
-  }, [D]);
-  const N = f.map((e) => {
+  }, [W]);
+  const G = y.map((e) => {
     if (e.provider === r.WALLET) {
-      if (b.mobile.any)
+      if (w.mobile.any)
         return /* @__PURE__ */ s(
-          de,
+          he,
           {
-            ref: v,
+            ref: _,
             tokenState: n,
             sx: [m === "small" ? { p: 1 } : { p: 2 }],
-            locale: R,
+            locale: k,
             tokenKey: U,
-            disableSwitchApp: C,
+            disableSwitchApp: P,
             onClick: async () => {
-              localStorage.setItem(p, "wallet"), n.reset(), await g(), n.status = "created", i.chooseMethod = "wallet";
-              const o = v.current?.connect;
+              localStorage.setItem(d, "wallet"), n.reset(), await f(), n.status = "created", i.chooseMethod = "wallet";
+              const o = _.current?.connect;
               i.retryConnect = () => {
-                o(W);
+                o(D);
               };
             }
           },
           r.WALLET
         );
-      if ((V || _) && (!b.mobile.any || _))
+      if ((Y || O) && (!w.mobile.any || O))
         return /* @__PURE__ */ s(
           ue,
           {
             ref: M,
             tokenState: n,
-            webWalletUrl: I,
+            webWalletUrl: E,
             sx: [m === "small" ? { p: 1 } : { p: 2 }],
-            disableSwitchApp: C,
+            disableSwitchApp: P,
             onClick: () => {
-              localStorage.setItem(p, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
+              localStorage.setItem(d, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
               const o = M.current.connect;
               i.retryConnect = async () => {
-                await g(), n.error = "", n.status = "scanned", o();
+                await f(), n.error = "", n.status = "scanned", o();
               };
             }
           },
@@ -130,28 +130,28 @@ function Pe({
         );
     }
     if (e.provider === r.PASSKEY)
-      return E === "none" ? null : /* @__PURE__ */ s(
+      return C === "none" ? null : /* @__PURE__ */ s(
         Ae,
         {
-          ref: w,
-          onSuccess: L,
+          ref: b,
+          onSuccess: x,
           onError: A,
           tokenState: n,
-          behavior: E,
+          behavior: C,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
           onClick: () => {
-            localStorage.setItem(p, "passkey");
-            const o = w.current.connect;
+            localStorage.setItem(d, "passkey");
+            const o = b.current.connect;
             i.chooseMethod = "passkey", i.retryConnect = () => {
-              O.verifying = !0, i.chooseMethod = "passkey", o();
+              R.verifying = !0, i.chooseMethod = "passkey", o();
             };
           },
           slotProps: {
             icon: {
               sx: {
-                fontSize: 24,
+                fontSize: h,
                 "& svg": {
-                  fontSize: 24,
+                  fontSize: h,
                   width: "1em",
                   height: "1em"
                 }
@@ -162,7 +162,7 @@ function Pe({
         r.PASSKEY
       );
     if (e.provider === r.EMAIL) {
-      const o = k.find((c) => c.name === r.EMAIL);
+      const o = S.find((c) => c.name === r.EMAIL);
       return o ? o?.renderListItem({
         key: o.name,
         sx: [m === "small" ? { p: 1 } : { p: 2 }]
@@ -170,41 +170,41 @@ function Pe({
       }) : null;
     }
     return e.type === "oauth" ? /* @__PURE__ */ s(
-      he,
+      ge,
       {
-        title: oe[e.provider],
+        title: te[e.provider],
         icon: /* @__PURE__ */ s(
-          ce,
+          ae,
           {
             provider: e.provider,
             sx: {
               transform: "scale(0.95)",
-              width: 24,
-              height: 24,
+              width: h,
+              height: h,
               color: "text.primary"
             }
           }
         ),
         onClick: () => {
-          S(e), i.retryConnect = () => {
-            S(e);
+          N(e), i.retryConnect = () => {
+            N(e);
           };
         },
-        sx: [m === "small" ? { p: 1 } : { p: 2 }]
+        sx: [m === "small" ? { p: 1.2 } : { p: 2 }]
       },
       e.provider
     ) : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ s(d, { className: "did-connect__choose", sx: le({ flex: 1 }, G?.root?.sx), children: /* @__PURE__ */ s(
-    d,
+  return /* @__PURE__ */ s(p, { className: "did-connect__choose", sx: ce({ flex: 1 }, B?.root?.sx), children: /* @__PURE__ */ s(
+    p,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: 2
       },
-      children: /* @__PURE__ */ ee(
-        d,
+      children: /* @__PURE__ */ oe(
+        p,
         {
           sx: [
             {
@@ -215,15 +215,19 @@ function Pe({
           ],
           children: [
             /* @__PURE__ */ s(
-              d,
+              p,
               {
                 sx: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
-                  gap: 1.25,
+                  gap: 1.5,
                   ".arc-login-item:nth-child(-n+3)": {
                     gridColumn: "span 12"
                   },
+                  // 当登录项大于等于 5 时，第三个登录项增加一个 marginBottom，用于分割独占一行的和一行多个的登录项
+                  ".arc-login-item:nth-child(3):nth-last-child(n+3)": {
+                    mb: 1
+                  },
                   ".arc-login-item:nth-child(4):last-child": {
                     gridColumn: "span 12"
                   },
@@ -256,8 +260,8 @@ function Pe({
                     }
                   }
                 },
-                children: N.length > 0 ? N : /* @__PURE__ */ s(
-                  me,
+                children: G.length > 0 ? G : /* @__PURE__ */ s(
+                  de,
                   {
                     className: "arc-login-item",
                     sx: {
@@ -277,7 +281,7 @@ function Pe({
     }
   ) });
 }
-Pe.propTypes = {
+ve.propTypes = {
   onSuccess: t.func,
   onError: t.func,
   size: t.oneOf(["small", "normal", "large"]),
@@ -295,5 +299,5 @@ Pe.propTypes = {
   customItems: t.arrayOf(t.node)
 };
 export {
-  Pe as default
+  ve as default
 };

package/lib/Connect/components/login-item/login-method-item.js

@@ -1,20 +1,21 @@
-import { jsxs as t, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { useTheme as g, Box as r, Tooltip as y, Typography as s } from "@mui/material";
+import { jsxs as t, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { useTheme as y, Box as r, Tooltip as u, Typography as s } from "@mui/material";
 import { Icon as c } from "@iconify/react";
-import { isValidElement as u } from "react";
+import { isValidElement as _ } from "react";
 import o from "prop-types";
 import { mergeSx as m } from "@arcblock/ux/lib/Util/style";
-import b from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
-function _({
+import { LOGIN_PROVIDER_ICON_SIZE as p } from "@arcblock/ux/lib/Util/constant";
+import I from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
+function b({
   title: n,
   description: a = null,
   icon: i,
-  iconScale: p = 0.95,
-  slotProps: d = {},
-  mode: f = "normal",
+  iconScale: d = 0.95,
+  slotProps: f = {},
+  mode: h = "normal",
   ...l
 }) {
-  const h = g();
+  const x = y();
   return /* @__PURE__ */ t(
     r,
     {
@@ -26,7 +27,7 @@ function _({
           alignItems: "center",
           gap: 1,
           cursor: "pointer",
-          p: 1,
+          p: 1.2,
           borderRadius: 1,
           backgroundColor: "grey.50",
           textDecoration: "none",
@@ -50,7 +51,7 @@ function _({
         l?.sx
       ),
       children: [
-        /* @__PURE__ */ e(y, { title: n, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(u, { title: n, children: /* @__PURE__ */ e(
           r,
           {
             className: "arc-login-item__icon",
@@ -61,23 +62,23 @@ function _({
                 alignItems: "center",
                 color: "text.primary"
               },
-              d?.icon?.sx
+              f?.icon?.sx
             ),
-            children: u(i) ? i : /* @__PURE__ */ e(
+            children: _(i) ? i : /* @__PURE__ */ e(
               r,
               {
                 component: c,
                 icon: i,
                 sx: {
-                  transform: `scale(${p})`,
-                  width: 24,
-                  height: 24
+                  transform: `scale(${d})`,
+                  width: p,
+                  height: p
                 }
               }
             )
           }
         ) }),
-        f === "normal" ? /* @__PURE__ */ t(x, { children: [
+        h === "normal" ? /* @__PURE__ */ t(g, { children: [
           /* @__PURE__ */ t(r, { className: "arc-login-item__body", sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
             /* @__PURE__ */ e(
               s,
@@ -107,9 +108,9 @@ function _({
             c,
             {
               className: "other-item-icon",
-              icon: b,
+              icon: I,
               fontSize: "1.3rem",
-              color: h.palette.primary.main
+              color: x.palette.primary.main
             }
           )
         ] }) : null
@@ -117,7 +118,7 @@ function _({
     }
   );
 }
-_.propTypes = {
+b.propTypes = {
   title: o.string.isRequired,
   description: o.string,
   icon: o.any.isRequired,
@@ -126,5 +127,5 @@ _.propTypes = {
   mode: o.oneOf(["mini", "simple", "normal"])
 };
 export {
-  _ as default
+  b as default
 };

package/lib/Connect/components/login-item/mobile-login-item.js

@@ -1,35 +1,35 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import n from "prop-types";
 import { CircularProgress as D } from "@mui/material";
-import { useReactive as T, useCreation as W, useMemoizedFn as a } from "ahooks";
-import O from "@arcblock/bridge";
-import { useBrowser as E } from "@arcblock/react-hooks";
-import q from "lodash/noop";
-import { useImperativeHandle as F } from "react";
-import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
-import N from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { LOGIN_PROVIDER as _ } from "@arcblock/ux/lib/Util/constant";
-import { useStateContext as j } from "../../contexts/state.js";
-import z from "./login-method-item.js";
-import { logger as I } from "../../../utils.js";
+import { useReactive as E, useCreation as T, useMemoizedFn as a } from "ahooks";
+import W from "@arcblock/bridge";
+import { useBrowser as _ } from "@arcblock/react-hooks";
+import N from "lodash/noop";
+import { useImperativeHandle as q } from "react";
+import { mergeSx as F } from "@arcblock/ux/lib/Util/style";
+import M from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER_ICON_SIZE as p, LOGIN_PROVIDER as j } from "@arcblock/ux/lib/Util/constant";
+import { useStateContext as z } from "../../contexts/state.js";
+import G from "./login-method-item.js";
+import { logger as b } from "../../../utils.js";
 import J from "../../hooks/auth-url.js";
 function K({
-  ref: b = null,
+  ref: w = null,
   tokenState: e,
-  locale: w,
-  tokenKey: y,
-  onClick: C = q,
-  disableSwitchApp: P = !1,
-  ...m
+  locale: C,
+  tokenKey: P,
+  onClick: y = N,
+  disableSwitchApp: R = !1,
+  ...f
 }) {
-  const l = T({
+  const l = E({
     loading: !1
-  }), { isWalletWebview: f } = j(), x = "DID Wallet", c = E(), d = new URL(window.location.href), A = J({ disableSwitchApp: P, tokenState: e }), h = W(() => {
+  }), { isWalletWebview: d } = z(), A = "DID Wallet", c = _(), h = new URL(window.location.href), L = J({ disableSwitchApp: R, tokenState: e }), u = T(() => {
     if (!e.url)
       return "";
-    d.searchParams.set("tokenKey", e.token);
-    const o = new URL(A);
-    c.wallet || (o.searchParams.set("callback", encodeURIComponent(d)), o.searchParams.set("callback_delay", 1500)), o.searchParams.set("locale", w);
+    h.searchParams.set("tokenKey", e.token);
+    const o = new URL(L);
+    c.wallet || (o.searchParams.set("callback", encodeURIComponent(h)), o.searchParams.set("callback_delay", 1500)), o.searchParams.set("locale", C);
     const g = new TextEncoder(), v = o.href.length;
     let r = "", i = "";
     try {
@@ -42,56 +42,56 @@ function K({
         i = btoa(String.fromCharCode(...t));
       }
       if (v + 8 + r.length + 14 + i.length > 2e3)
-        throw I.warn("URL too long, drop appInfo & memberAppInfo", { appInfo: r, memberAppInfo: i }), new Error("URL too long");
+        throw b.warn("URL too long, drop appInfo & memberAppInfo", { appInfo: r, memberAppInfo: i }), new Error("URL too long");
       i ? r && (o.searchParams.set("appInfo", r), o.searchParams.set("memberAppInfo", i)) : r && o.searchParams.set("appInfo", r);
     } catch (t) {
-      I.warn("Failed to convert appInfo & memberAppInfo", t);
+      b.warn("Failed to convert appInfo & memberAppInfo", t);
     }
     return o.href.replace(/^https?:\/\//, "abt://");
-  }, [y, e.token, e.appInfo, e.memberAppInfo, e.url]), L = a(() => {
+  }, [P, e.token, e.appInfo, e.memberAppInfo, e.url]), x = a(() => {
     l.loading = !0, setTimeout(() => {
-      O.call("authAction", { action: "auth", deepLink: h });
+      W.call("authAction", { action: "auth", deepLink: u });
     }, 600), setTimeout(() => {
       l.loading = !1;
     }, 2e3);
-  }), R = a(() => {
+  }), O = a(() => {
     e.checking = !0, e.status = "scanned";
   }), s = {};
-  !f && c.mobile.any && (s.component = "a", s.href = h), e.url || (s.sx = {
+  !d && c.mobile.any && (s.component = "a", s.href = u), e.url || (s.sx = {
     cursor: "not-allowed"
   });
-  const u = a((o) => {
-    e.url && (f ? L() : c.mobile.any ? R() : o());
+  const I = a((o) => {
+    e.url && (d ? x() : c.mobile.any ? O() : o());
   }), U = a(() => {
-    u(C);
+    I(y);
   });
-  return F(b, () => ({
-    connect: u
-  })), /* @__PURE__ */ p(
-    z,
+  return q(w, () => ({
+    connect: I
+  })), /* @__PURE__ */ m(
+    G,
     {
-      ...m,
+      ...f,
       ...s,
-      sx: M(m?.sx, s?.sx),
-      title: x,
-      icon: l.loading || !e.url ? /* @__PURE__ */ p(
+      sx: F(f?.sx, s?.sx),
+      title: A,
+      icon: l.loading || !e.url ? /* @__PURE__ */ m(
         D,
         {
           color: "primary",
-          size: 24,
+          size: p,
           sx: {
             "& svg": {
               transform: "scale(0.75)"
             }
           }
         }
-      ) : /* @__PURE__ */ p(
-        N,
+      ) : /* @__PURE__ */ m(
+        M,
         {
-          width: "24px",
-          height: "24px",
-          provider: _.DID_WALLET,
-          style: {
+          provider: j.DID_WALLET,
+          sx: {
+            width: p,
+            height: p,
             transform: "scale(0.9)"
           }
         }