@arcblock/did-connect-react 3.5.1 → 4.0.0-beta.1

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

@@ -1,257 +0,0 @@
-import { jsx as l, jsxs as G } from "react/jsx-runtime";
-import o from "prop-types";
-import { Box as g } from "@mui/material";
-import { LAST_USED_LOGIN_METHOD as re, LOGIN_PROVIDER as n, WALLET_LOGIN_METHOD as U, LOGIN_PROVIDER_NAME as se, LOGIN_PROVIDER_ICON_SIZE as h } from "@arcblock/ux/lib/Util/constant";
-import { getWebWalletUrl as ne } from "@arcblock/ux/lib/Util/wallet";
-import L from "lodash/noop";
-import { useMemoizedFn as y } from "ahooks";
-import x from "js-cookie";
-import { getCookieOptions as le } from "@arcblock/ux/lib/Util";
-import { useRef as M, useEffect as ie } from "react";
-import { mergeSx as ae } from "@arcblock/ux/lib/Util/style";
-import ce from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { GA_LAST_LOGIN_METHOD as u } from "@arcblock/ux/lib/withTracker/constant";
-import pe from "./mobile-login-item.js";
-import me from "./web-login-item.js";
-import ue from "./login-method-item.js";
-import { useOAuth as de } from "../../../OAuth/context.js";
-import { useStateContext as fe } from "../../contexts/state.js";
-import { getAppId as ge, logger as he, getApiErrorMessage as Le } from "../../../utils.js";
-import Ie from "./passkey-login-item.js";
-import { usePasskey as ye } from "../../../Passkey/context.js";
-import "../../../Passkey/actions.js";
-import xe from "../../plugins/email/index.js";
-function Me({
-  onSuccess: O = L,
-  onError: A = L,
-  size: c = "small",
-  tokenState: r,
-  webWalletUrl: F = ne(),
-  tokenKey: j,
-  passkeyBehavior: B = "none",
-  onReset: I = L,
-  showMobileLogin: H = !0,
-  showOAuthLogin: E = !0,
-  showPasskeyLogin: b = !0,
-  showWebLogin: V = !0,
-  showEmailLogin: d = !0,
-  oauthProviderList: q = [],
-  slotProps: K = {},
-  disableSwitchApp: v = !1,
-  forceUpdate: Y = L,
-  magicToken: w = void 0,
-  baseUrl: Z = "/",
-  customItems: $ = []
-}) {
-  const _ = M(null), P = M(null), C = M(null), { loginOAuth: z, logoutOAuth: J, t: f, oauthState: s } = de(), { passkeyState: T } = ye(), { extraParams: R, locale: Q, connectState: t, plugins: D, setPlugins: X, setSelectedPlugin: ee, getPlugin: N, lastLoginMethod: i } = fe(), W = y(async (e) => {
-    localStorage.setItem(u, e.provider), r.reset(), s.reset({
-      status: "scanned"
-    }), T.reset(), t.chooseMethod = e.provider, t.walletMethod = "";
-    const p = R?.sourceAppPid;
-    try {
-      s.loading = !0, s.status = "scanned";
-      const m = await z(e, {
-        action: r.action,
-        ...R
-      }), a = le({ returnDomain: !1 });
-      x.remove("connected_did", a), x.remove("connected_pk", a), x.remove("connected_wallet_os", a), m?.sessionToken && (localStorage.setItem(re, e.provider), await O(
-        {
-          ...m,
-          encrypted: !1
-        },
-        (te) => te,
-        {
-          sourceAppPid: p,
-          connected_app: ge(r.appInfo, r.memberAppInfo)
-        }
-      ), s.loading = !1, s.status = "succeed");
-    } catch (m) {
-      he.error(`Failed login OAuth: ${e.provider}`, m);
-      const a = Le(m, f("loginOAuthFailed"));
-      s.loading = !1, s.error = a, s.status = "error", await J({ provider: e.provider }), A(new Error(a));
-    }
-  }), k = y(async () => {
-    r.reset(), await I(), r.status = "created", t.chooseMethod = "wallet", t.walletMethod = "";
-  }), S = xe({ baseUrl: Z }), oe = y(() => {
-    if (w && d && D.some((e) => e.name === n.EMAIL)) {
-      const e = N(n.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(u, n.EMAIL), e.state.reset(), e.state.magicToken = w, t.chooseMethod = n.EMAIL, ee(e), Y());
-    }
-  });
-  return ie(() => {
-    const e = [];
-    if (d) {
-      const p = N(n.EMAIL);
-      p && p.baseUrl === S.baseUrl ? e.push(p) : e.push(S);
-    }
-    X(e), t.retryConnect = k, setTimeout(() => {
-      oe();
-    }, 100);
-  }, [d]), /* @__PURE__ */ l(g, { className: "did-connect__choose", sx: ae({ flex: 1 }, K?.root?.sx), children: /* @__PURE__ */ l(
-    g,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 2
-      },
-      children: /* @__PURE__ */ G(
-        g,
-        {
-          sx: [
-            {
-              display: "flex",
-              flexDirection: "column",
-              gap: 1.5
-            }
-          ],
-          children: [
-            H && /* @__PURE__ */ l(
-              pe,
-              {
-                t: f,
-                isLatest: i && i === U.MOBILE,
-                ref: _,
-                tokenState: r,
-                sx: [c === "small" ? { p: 1 } : { p: 2 }],
-                locale: Q,
-                tokenKey: j,
-                disableSwitchApp: v,
-                onClick: async () => {
-                  localStorage.setItem(u, n.WALLET), r.reset(), await I(), r.status = "created", t.chooseMethod = "wallet";
-                  const e = _.current?.connect;
-                  t.retryConnect = () => {
-                    e(k);
-                  };
-                }
-              }
-            ),
-            V && /* @__PURE__ */ l(
-              me,
-              {
-                isLatest: i && i === U.WEB,
-                ref: P,
-                tokenState: r,
-                webWalletUrl: F,
-                t: f,
-                sx: [c === "small" ? { p: 1 } : { p: 2 }],
-                disableSwitchApp: v,
-                onClick: () => {
-                  localStorage.setItem(u, n.WALLET), r.status = "scanned", t.chooseMethod = "wallet-web";
-                  const e = P.current.connect;
-                  t.retryConnect = async () => {
-                    await I(), r.error = "", r.status = "scanned", e();
-                  };
-                }
-              }
-            ),
-            E || b || d ? /* @__PURE__ */ G(
-              g,
-              {
-                sx: [
-                  {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 1.5
-                  }
-                ],
-                children: [
-                  D.map(
-                    (e) => e.renderListItem({
-                      key: e.name,
-                      sx: [c === "small" ? { p: 1 } : { p: 2 }]
-                      // forceUpdate,
-                    })
-                  ),
-                  E ? q.map((e) => /* @__PURE__ */ l(
-                    ue,
-                    {
-                      t: f,
-                      isLatest: i && i === e.provider,
-                      title: se[e.provider],
-                      icon: /* @__PURE__ */ l(
-                        ce,
-                        {
-                          provider: e.provider,
-                          sx: {
-                            transform: "scale(0.95)",
-                            width: h,
-                            height: h,
-                            color: "text.primary"
-                          }
-                        }
-                      ),
-                      onClick: () => {
-                        W(e), t.retryConnect = () => {
-                          W(e);
-                        };
-                      },
-                      sx: [c === "small" ? { p: 1 } : { p: 2 }]
-                    },
-                    e.provider
-                  )) : null,
-                  b ? /* @__PURE__ */ l(
-                    Ie,
-                    {
-                      ref: C,
-                      onSuccess: O,
-                      onError: A,
-                      tokenState: r,
-                      behavior: B,
-                      sx: [c === "small" ? { p: 1 } : { p: 2 }],
-                      onClick: () => {
-                        localStorage.setItem(u, n.PASSKEY);
-                        const e = C.current.connect;
-                        t.chooseMethod = "passkey", t.walletMethod = "", t.retryConnect = () => {
-                          T.verifying = !0, t.chooseMethod = "passkey", e();
-                        };
-                      },
-                      slotProps: {
-                        icon: {
-                          sx: {
-                            fontSize: h,
-                            "& svg": {
-                              fontSize: h,
-                              width: "1em",
-                              height: "1em"
-                            }
-                          }
-                        }
-                      }
-                    }
-                  ) : null
-                ]
-              }
-            ) : null,
-            $.map((e) => e || null)
-          ]
-        }
-      )
-    }
-  ) });
-}
-Me.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,
-  showMobileLogin: o.bool,
-  showOAuthLogin: o.bool,
-  showPasskeyLogin: o.bool,
-  showWebLogin: o.bool,
-  showEmailLogin: o.bool,
-  oauthProviderList: o.array,
-  slotProps: o.object,
-  disableSwitchApp: o.bool,
-  forceUpdate: o.func,
-  magicToken: o.string,
-  baseUrl: o.string,
-  customItems: o.arrayOf(o.node)
-};
-export {
-  Me as default
-};

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

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