@arcblock/did-connect-react 3.3.10 → 3.4.1

package/lib/Connect/index.js

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

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

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

package/lib/Connect/use-connect.js

@@ -7,12 +7,12 @@ import T from "lodash/cloneDeep";
 import S from "lodash/isFunction";
 import J from "lodash/isUndefined";
 import { joinURL as k, withQuery as M } from "ufo";
-import { getFederatedEnabled as K, getMaster as N } from "@arcblock/ux/lib/Util/federated";
-import G from "p-queue";
-import { useTheme as W } from "@arcblock/ux/lib/Theme";
-import { getCookieOptions as Y } from "@arcblock/ux/lib/Util";
+import K from "p-queue";
+import { useTheme as N } from "@arcblock/ux/lib/Theme";
+import { getCookieOptions as G } from "@arcblock/ux/lib/Util";
 import A from "js-cookie";
-import { useBrowser as Z } from "@arcblock/react-hooks";
+import { useBrowser as W } from "@arcblock/react-hooks";
+import { getFederatedEnabled as Y, getMaster as Z } from "@arcblock/ux/lib/Util/federated";
 import { SessionContext as $ } from "../Session/context.js";
 import { openPopup as ee, runPopup as oe, updateConnectedInfo as ne, getAppId as te } from "../utils.js";
 import { API_DID_PREFIX as re, BLOCKLET_SERVICE_PATH_PREFIX as se } from "../constant.js";
@@ -24,7 +24,7 @@ function ie({ ref: P }) {
     scan: "Use follwing methods to complete this action",
     confirm: "Confirm in your account",
     success: "Success!"
-  }), x = W(), F = {
+  }), x = N(), F = {
     containerEl: null,
     popup: !0,
     checkFn: _?.get || z
@@ -52,7 +52,7 @@ function ie({ ref: P }) {
         action: m,
         ...a
       }
-    ), h = Y({ returnDomain: !1 });
+    ), h = G({ returnDomain: !1 });
     A.remove("connected_did", h), A.remove("connected_pk", h), A.remove("connected_wallet_os", h), d(
       {
         ...f,
@@ -79,9 +79,9 @@ function ie({ ref: P }) {
   return e.containerEl ? j(u, e.containerEl) : e.show || o ? u : null;
 }
 function xe() {
-  const P = B(null), _ = Z(), s = R(() => {
+  const P = B(null), _ = W(), s = R(() => {
     const o = { concurrency: 1 };
-    return _.arcSphere && delete o.concurrency, new G(o);
+    return _.arcSphere && delete o.concurrency, new K(o);
   }), c = g((...o) => {
     P.current?.close(...o);
   }), I = g(
@@ -110,7 +110,7 @@ function xe() {
       const u = () => new Promise((n) => {
         (async () => {
           if (J(i)) {
-            const r = K(), U = N();
+            const r = Y(), U = Z();
             i = r ? U.appUrl : window.location.origin;
           }
           const { onSuccess: a, onClose: d, onError: f, custom: h = !1, ...w } = o;

package/lib/OAuth/context.js

@@ -1,7 +1,7 @@
 import { jsxs as J, jsx as E } from "react/jsx-runtime";
 import h from "prop-types";
 import Q from "lodash/isUndefined";
-import { createContext as Z, use as ee } from "react";
+import { use as Z, createContext as ee } from "react";
 import l from "@arcblock/ux/lib/Toast";
 import { useReactive as v, useMemoizedFn as u, useCreation as te, useLatest as oe } from "ahooks";
 import O from "lodash/noop";
@@ -15,7 +15,7 @@ import { createAxios as se, openPopup as ae, runPopup as de, sleep as ce, getApi
 import { parseResponse as ue, PassportSwitcher as le } from "../components/PassportSwitcher.js";
 import pe from "../Session/hooks/use-mobile.js";
 import he from "./bind-conflict-alert.js";
-const D = Z({}), { Provider: fe, Consumer: Te } = D, R = `${F}/api/oauth`, be = {
+const D = ee({}), { Provider: fe, Consumer: Te } = D, R = `${F}/api/oauth`, be = {
   zh: {
     bindOAuth: "绑定第三方登录",
     bind: "绑定",
@@ -258,7 +258,7 @@ function Ae({
   );
 }
 function _e() {
-  const w = ee(D);
+  const w = Z(D);
   return B(w, ["locale", "getToken"]);
 }
 Ae.propTypes = {