@arcblock/did-connect-react 3.3.10 → 3.4.1

package/lib/Connect/connect.js

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