@arcblock/did-connect-react 3.1.0

package/lib/Connect/index.js

@@ -0,0 +1,498 @@
+import { jsx as t, jsxs as p, Fragment as He } from "react/jsx-runtime";
+import { use as Ve, useRef as ie, useState as qe, useEffect as se } from "react";
+import e from "prop-types";
+import { Box as i, Skeleton as Ye, Divider as Ge } from "@mui/material";
+import { useUpdate as Ke, useSize as Qe, useCreation as d, useMount as ae, useMemoizedFn as M, useDebounceFn as Xe, usePrevious as Je, useUpdateEffect as Ze } from "ahooks";
+import x from "lodash/noop";
+import $e from "lodash/isUndefined";
+import et from "@arcblock/ux/lib/CloseButton";
+import { LOGIN_PROVIDER as tt, OAUTH_PROVIDER as z, DID_CONNECT_MEDIUM_WIDTH as U, LOGIN_PROVIDER_NAME as ot, DID_CONNECT_SMALL_WIDTH as rt } from "@arcblock/ux/lib/Util/constant";
+import nt from "@arcblock/ux/lib/QRCode";
+import { withUxTheme as it, withContainer as st, DIDConnectFooter as at } from "@arcblock/ux/lib/DIDConnect";
+import { useTheme as ct } from "@arcblock/ux/lib/Theme";
+import lt from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import "@fontsource/lexend/400.css";
+import "@fontsource/lexend/600.css";
+import ut from "./with-blocklet.js";
+import dt from "./with-bridge-call.js";
+import { default as mo } from "./hooks/security.js";
+import { SessionContext as ft } from "../Session/context.js";
+import { StateProvider as mt, useStateContext as pt } from "./contexts/state.js";
+import ht from "./components/login-item/connect-choose-list.js";
+import gt from "./components/auto-height.js";
+import xt from "./hooks/token.js";
+import { useOAuth as bt } from "../OAuth/context.js";
+import Ct from "./components/connect-status.js";
+import { usePasskey as wt } from "../Passkey/context.js";
+import { CHECK_STATUS_INTERVAL as yt, API_DID_PREFIX as kt, BUSY_STATUS as y, DEFAULT_TIMEOUT as St } from "../constant.js";
+import "../utils.js";
+import It from "./components/did-connect-title.js";
+import Dt from "./components/download-tips.js";
+import Pt from "./hooks/method-list.js";
+import Tt from "./hooks/auth-url.js";
+import { getWalletDid as vt } from "../User/use-did.js";
+import { getWebWalletUrl as _t } from "@arcblock/ux/lib/Util/wallet";
+function ce({
+  hideCloseButton: b = !1,
+  mode: f = "dialog",
+  action: k,
+  baseUrl: h = "",
+  checkFn: S,
+  checkInterval: I = yt,
+  checkTimeout: D = St * 1e3,
+  prefix: P = kt,
+  tokenKey: B = "_t_",
+  locale: F = "en",
+  encKey: ue = "_ek_",
+  autoConnect: de = !0,
+  forceConnected: N = !0,
+  saveConnect: fe = !0,
+  useSocket: me = !0,
+  allowWallet: j = !0,
+  provider: pe = "",
+  messages: u = {},
+  passkeyBehavior: H = "none",
+  webWalletUrl: V = _t(),
+  enabledConnectTypes: q = ["web", "mobile", ...Object.keys(z)],
+  extraContent: Y = null,
+  disableSwitchApp: T = !1,
+  magicToken: G = void 0,
+  customItems: he = [],
+  onClose: v = x,
+  onError: K = x,
+  onSuccess: _ = x,
+  onRecreateSession: Q = x,
+  setColor: ge = x
+}) {
+  const R = ct(), X = Ke(), xe = Ve(ft), be = vt(xe?.session?.user), {
+    t: J,
+    staticState: Ce,
+    connectState: s,
+    extraParams: we,
+    currentAppInfo: ye,
+    currentAppColor: O,
+    // 插件相关
+    selectedPlugin: a,
+    blocklet: Z,
+    masterBlocklet: ke
+  } = pt(), { state: o, generate: $, cancelWhenScanned: Se } = xt({
+    action: k,
+    baseUrl: h,
+    checkFn: S,
+    checkInterval: I,
+    checkTimeout: D,
+    extraParams: we,
+    prefix: P,
+    onError: K,
+    onSuccess: _,
+    locale: F,
+    tokenKey: B,
+    encKey: ue,
+    autoConnect: de,
+    forceConnected: N === !0 ? be || !0 : N,
+    saveConnect: fe,
+    useSocket: me,
+    provider: pe
+  }), A = ie(!1), ee = ie(null), g = Qe(ee), W = d(() => g ? g.width < U - 50 : !0, [g, g?.width]), [te, Ie] = qe(!1);
+  ae(() => {
+    Ie(g?.width < U - 50);
+  });
+  const { oauthState: c, setBaseUrl: De } = bt(), { passkeyState: l, setTargetAppPid: Pe } = wt();
+  ae(() => {
+    De(h), Pe(Z?.appPid), o.reset(), c.reset(), l.reset();
+  }), se(() => {
+    ge(O);
+  }, [O]);
+  const Te = d(() => ({
+    confirm: u.confirm,
+    success: u.success,
+    error: a?.state?.error || o.error || l.error || c.error || ""
+  }), [
+    u.confirm,
+    u.success,
+    o.error,
+    c.error,
+    l.error,
+    a?.state?.error
+  ]), C = d(() => y.includes(l.status) || y.includes(c.status) || y.includes(o.status) || y.includes(a?.state?.computedStatus), [o.status, c.status, l.status, a?.state?.computedStatus]), oe = M(async () => {
+    Q(), c.reset(), l.reset(), await $(!1);
+  }), ve = M(() => {
+    s?.retryConnect();
+  }), _e = M(() => {
+    Q(), c.reset(), l.reset(), a?.state?.reset(), Ce.current.cancelCount++, Se();
+  }), { run: Re } = Xe(
+    () => {
+      A.current || o.status === "timeout" && (A.current = !0, o.reset(), oe(), A.current = !1);
+    },
+    { leading: !0, trailing: !1 }
+  );
+  se(Re, [o.status]);
+  const Oe = d(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), {
+    showMobileLogin: Ae,
+    hideChooseList: r,
+    oauthProviderList: We,
+    showOAuthLogin: Le,
+    showPasskeyLogin: Ee,
+    showWebLogin: Me,
+    showEmailLogin: Ue,
+    hideQRCode: m
+  } = Pt({
+    action: o.action,
+    sourceAppPid: s?.sourceAppPid,
+    enabledConnectTypes: q,
+    allowWallet: j,
+    passkeyBehavior: H,
+    webWalletUrl: V,
+    mode: f,
+    blocklet: s?.sourceAppPid ? ke : Z,
+    isSmallView: W
+  }), ze = Je(s?.sourceAppPid);
+  Ze(() => {
+    $e(ze) || $();
+  }, [s?.sourceAppPid]);
+  const n = (w) => {
+    const je = R.spacing(w);
+    return parseInt(je, 10);
+  }, Be = d(() => b ? null : /* @__PURE__ */ t(
+    et,
+    {
+      onClose: v,
+      sx: {
+        position: "absolute",
+        right: 14,
+        top: 14
+      }
+    }
+  ), [b, v]);
+  let re = null;
+  C && (re = /* @__PURE__ */ t(
+    i,
+    {
+      sx: {
+        flex: 1,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
+        Ct,
+        {
+          status: a?.state?.computedStatus || c.status || l.status || o.status,
+          nextWorkflow: o.nextWorkflow,
+          mfaCode: o.mfaCode,
+          onCancel: _e,
+          onRetry: ve,
+          onClose: v,
+          messages: Te,
+          locale: F,
+          className: "did-connect__auth-status auth-status",
+          loadingIcon: s.chooseMethod ? /* @__PURE__ */ t(lt, { provider: s.chooseMethod, sx: { color: "text.primary" } }) : null,
+          chooseMethod: Oe,
+          hideRetry: s.chooseMethod === "email",
+          hideBack: !!G
+        }
+      ) })
+    }
+  ));
+  const ne = Tt({ disableSwitchApp: T, tokenState: o }), Fe = d(() => {
+    const w = R.mode === "dark" ? R.palette.grey[500] : "white";
+    return /* @__PURE__ */ t(
+      i,
+      {
+        sx: {
+          p: r ? 3 : 2,
+          width: (r ? 240 : 196) + n(1) * 2,
+          height: (r ? 240 : 196) + n(1) * 2
+        },
+        children: o.url ? /* @__PURE__ */ t(
+          nt,
+          {
+            data: ne,
+            size: r ? 240 - n(3) * 2 : 196 - n(2) * 2,
+            sx: {
+              width: (r ? 240 - n(3) * 2 : 196 - n(2) * 2) + n(1) * 2,
+              height: (r ? 240 - n(3) * 2 : 196 - n(2) * 2) + n(1) * 2,
+              flex: 1,
+              backgroundColor: w,
+              p: 1,
+              fontSize: 0,
+              textAlign: "center",
+              boxSizing: "border-box",
+              borderRadius: 1,
+              border: "1px solid",
+              borderColor: "divider"
+            },
+            config: {
+              backgroundOptions: {
+                color: w
+              }
+            }
+          }
+        ) : /* @__PURE__ */ t(
+          Ye,
+          {
+            animation: "wave",
+            variant: "rectangular",
+            sx: {
+              position: "absolute",
+              left: n(2) + 1,
+              right: n(2) + 1,
+              top: n(2) + 1,
+              bottom: n(2) + 1,
+              borderRadius: 1,
+              zIndex: 1,
+              width: "auto",
+              height: "auto"
+            }
+          }
+        )
+      }
+    );
+  }, [ne, r]), Ne = d(() => r ? "column-reverse" : !m && te ? "column" : "row", [r, te, m]), L = /* @__PURE__ */ p(
+    i,
+    {
+      className: "did-connect__body",
+      sx: {
+        display: "flex",
+        flexDirection: Ne,
+        justifyContent: "center",
+        alignItems: "stretch",
+        flex: 1,
+        gap: !m && W ? 0 : 1.5,
+        overflow: "visible",
+        px: r ? 2 : 0
+      },
+      children: [
+        !C && !m ? /* @__PURE__ */ p(He, { children: [
+          /* @__PURE__ */ t(
+            i,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                overflowX: "auto",
+                overflowY: "visible",
+                maxWidth: "100%",
+                margin: "auto"
+              },
+              children: /* @__PURE__ */ p(
+                i,
+                {
+                  sx: {
+                    fontSize: 0,
+                    position: "relative",
+                    mb: r ? 4 : 2.5
+                  },
+                  children: [
+                    Fe,
+                    /* @__PURE__ */ p(
+                      i,
+                      {
+                        sx: {
+                          position: "absolute",
+                          color: "text.secondary",
+                          fontSize: 12,
+                          bottom: r ? 8 : 4,
+                          transform: "translateY(100%)",
+                          left: 0,
+                          right: 0,
+                          textAlign: "center"
+                        },
+                        children: [
+                          J("scanWithWallet1"),
+                          " ",
+                          /* @__PURE__ */ t(Dt, {}),
+                          " ",
+                          J("scanWithWallet2")
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          r ? null : /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
+            Ge,
+            {
+              orientation: "vertical",
+              sx: {
+                fontSize: 12,
+                color: "text.hint",
+                "&::before, &::after": {
+                  borderColor: "divider"
+                }
+              },
+              children: "or"
+            }
+          ) })
+        ] }) : null,
+        /* @__PURE__ */ p(
+          i,
+          {
+            sx: {
+              display: "flex",
+              flex: 1
+            },
+            children: [
+              re,
+              /* @__PURE__ */ t(
+                ht,
+                {
+                  slotProps: {
+                    root: {
+                      sx: [C ? { display: "none" } : {}]
+                    }
+                  },
+                  allowWallet: j,
+                  size: m && f !== "dialog" ? "normal" : "small",
+                  tokenState: o,
+                  messages: u,
+                  tokenKey: B,
+                  onSuccess: _,
+                  passkeyBehavior: H,
+                  webWalletUrl: V,
+                  extraContent: Y,
+                  enabledConnectTypes: q,
+                  onRest: oe,
+                  showMobileLogin: Ae,
+                  showOAuthLogin: Le,
+                  showPasskeyLogin: Ee,
+                  showWebLogin: Me,
+                  showEmailLogin: Ue,
+                  oauthProviderList: We,
+                  disableSwitchApp: T,
+                  forceUpdate: X,
+                  magicToken: G,
+                  baseUrl: h,
+                  customItems: he
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  let E = L;
+  return a ? E = a.renderPlaceholder({
+    fallback: L,
+    forceUpdate: X,
+    onSuccess: _,
+    onError: K
+  }) : E = L, /* @__PURE__ */ p(
+    i,
+    {
+      ref: ee,
+      className: "did-connect__root",
+      sx: {
+        backgroundColor: "background.default",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        position: "relative",
+        maxWidth: "100%",
+        width: (
+          // eslint-disable-next-line no-nested-ternary
+          f === "drawer" ? "100%" : m || C || r ? rt : U
+        ),
+        transition: "width 0.2s ease-in-out",
+        margin: "auto",
+        p: W ? 2 : 3,
+        pb: 0,
+        gap: 2
+      },
+      children: [
+        /* @__PURE__ */ t(i, { "data-did-auth-url": o.url, sx: { display: "none" } }),
+        /* @__PURE__ */ t(
+          It,
+          {
+            title: u.title,
+            description: u.scan,
+            extraContent: Y,
+            disableSwitchApp: T
+          }
+        ),
+        /* @__PURE__ */ t(gt, { initHeight: 72, children: E }),
+        /* @__PURE__ */ t(at, { currentAppInfo: ye, currentAppColor: O }),
+        Be
+      ]
+    }
+  );
+}
+ce.propTypes = {
+  mode: e.oneOf(["dialog", "drawer", "page"]),
+  action: e.string.isRequired,
+  baseUrl: e.string,
+  checkFn: e.func.isRequired,
+  checkInterval: e.number,
+  checkTimeout: e.number,
+  // extraParams: PropTypes.object, // 需要使用 useStateContext 中导出的
+  prefix: e.string,
+  messages: e.object,
+  tokenKey: e.string,
+  locale: e.oneOf(["en", "zh", ""]),
+  encKey: e.string,
+  autoConnect: e.bool,
+  forceConnected: e.oneOfType([e.bool, e.string]),
+  saveConnect: e.bool,
+  useSocket: e.bool,
+  extraContent: e.any,
+  passkeyBehavior: e.oneOf(["none", "both", "only-existing", "only-new"]),
+  enabledConnectTypes: e.arrayOf(e.oneOf(["web", "mobile", ...Object.keys(z)])),
+  webWalletUrl: e.string,
+  allowWallet: e.bool,
+  provider: e.oneOf([tt.WALLET, ...Object.keys(z), ""]),
+  hideCloseButton: e.bool,
+  disableSwitchApp: e.bool,
+  onClose: e.func,
+  onError: e.func,
+  onSuccess: e.func,
+  onRecreateSession: e.func,
+  setColor: e.func,
+  magicToken: e.string,
+  customItems: e.arrayOf(e.node)
+};
+function le({ testOnlyBorderColor: b = void 0, ...f }) {
+  const { checkFn: k, extraParams: h = {}, blocklet: S, masterBlocklet: I, action: D, locale: P = "en" } = f;
+  if (typeof k != "function")
+    throw new Error("Cannot initialize did connect component without a fetchFn");
+  return /* @__PURE__ */ t(
+    mt,
+    {
+      blocklet: S,
+      masterBlocklet: I,
+      action: D,
+      locale: P,
+      extraParams: h,
+      testOnlyBorderColor: b,
+      sx: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        lineHeight: 1.2,
+        color: "grey.700",
+        "&, & *, & *:before, & *:after": {
+          fontFamily: "Lexend",
+          // 保持跟 DID Wallet 一致
+          boxSizing: "border-box"
+        }
+      },
+      children: /* @__PURE__ */ t(ce, { ...f })
+    }
+  );
+}
+le.propTypes = {
+  checkFn: e.func.isRequired,
+  extraParams: e.object,
+  blocklet: e.object.isRequired,
+  masterBlocklet: e.object,
+  action: e.string.isRequired,
+  locale: e.string,
+  testOnlyBorderColor: e.string
+};
+const lo = it(dt(ut(st(le))));
+export {
+  lo as default,
+  mo as useSecurity
+};

package/lib/Connect/landing-page.js

@@ -0,0 +1,5 @@
+import "@arcblock/ux/lib/DIDConnect/landing-page";
+import { default as f } from "@arcblock/ux/lib/DIDConnect/landing-page";
+export {
+  f as default
+};

package/lib/Connect/plugins/email/index.js

@@ -0,0 +1,62 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useReactive as c, useMemoizedFn as u } from "ahooks";
+import f from "@iconify-icons/material-symbols/mail-outline-rounded";
+import { LOGIN_PROVIDER as h } from "@arcblock/ux/lib/Util/constant";
+import { translate as E } from "@arcblock/ux/lib/Locale/util";
+import P from "./list-item.js";
+import g from "./placeholder.js";
+function k({ baseUrl: s }) {
+  const i = c({
+    baseUrl: s,
+    status: "idle",
+    get computedStatus() {
+      return this.status === "idle" ? "creating" : this.status === "creating" || this.status === "sending" || this.status === "verifying" ? "scanned" : this.status;
+    },
+    error: "",
+    magicToken: "",
+    reset() {
+      this.status = "idle", this.error = "", this.magicToken = "";
+    }
+  }), r = h.EMAIL, t = "Email", o = f, l = {
+    zh: {
+      email: "邮箱地址",
+      emailPlaceholder: "请输入邮箱地址",
+      sendCode: "发送验证邮件",
+      confirm: "确认",
+      verifyEmail: "登录链接已发送至邮箱，请登录邮箱查看",
+      useCode: "使用验证码",
+      codePlaceholder: "请输入验证码",
+      orUseCodePlaceholder: "或使用验证码",
+      emailInvalid: "邮箱格式不正确",
+      emailRequired: "邮箱地址不能为空"
+    },
+    en: {
+      email: "Email",
+      emailPlaceholder: "Enter your email address",
+      sendCode: "Send Verification Email",
+      confirm: "Confirm",
+      verifyEmail: "Login link sent! Please check your email.",
+      useCode: "Use Verification Code",
+      codePlaceholder: "Enter your verification code.",
+      orUseCodePlaceholder: "Or use verification code.",
+      emailInvalid: "Email format is incorrect",
+      emailRequired: "Email is required"
+    }
+  }, n = u((e, m = {}, d = "en") => E(l, e, d, "en", m));
+  return {
+    name: r,
+    title: t,
+    icon: o,
+    renderListItem(e) {
+      return /* @__PURE__ */ a(P, { ...e, state: i, name: r, title: t, icon: o, t: n });
+    },
+    renderPlaceholder(e) {
+      return /* @__PURE__ */ a(g, { ...e, state: i, name: r, title: t, icon: o, t: n });
+    },
+    order: 100,
+    state: i
+  };
+}
+export {
+  k as default
+};

package/lib/Connect/plugins/email/list-item.js

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import c from "prop-types";
+import { useMemoizedFn as p } from "ahooks";
+import l from "@iconify-icons/material-symbols/mail-outline-rounded";
+import { LOGIN_PROVIDER as o, LOGIN_PROVIDER_NAME as u } from "@arcblock/ux/lib/Util/constant";
+import a from "../../components/login-item/login-method-item.js";
+import { useStateContext as f } from "../../contexts/state.js";
+function I({ ...e }) {
+  const { setSelectedPlugin: n, getPlugin: i, connectState: r } = f(), m = p(() => {
+    const t = i(o.EMAIL);
+    t.state.reset(), t.state.status = "creating", r.chooseMethod = o.EMAIL, n(t);
+  });
+  return /* @__PURE__ */ s(
+    a,
+    {
+      ...e,
+      title: u[o.EMAIL],
+      icon: l,
+      onClick: m
+    }
+  );
+}
+I.propTypes = {
+  onClick: c.func
+};
+export {
+  I as default
+};