@arcblock/did-connect-react 3.4.13 → 3.4.15

package/lib/Connect/connect.js

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