@arcblock/did-connect-react 3.2.19 → 3.3.0

package/lib/Connect/index.js

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