@arcblock/did-connect-react 3.4.1 → 3.4.2

package/lib/Connect/connect.js

@@ -1,8 +1,8 @@
 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 { use as Ve, useRef as ce, useState as Ye, 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 de, useMemoizedFn as F, useDebounceFn as Je, usePrevious as Ze, useUpdateEffect as $e } from "ahooks";
+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";
@@ -30,7 +30,7 @@ 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({
+function de({
   hideCloseButton: y = !1,
   mode: p = "dialog",
   action: I,
@@ -41,70 +41,70 @@ function fe({
   prefix: D = Ct,
   tokenKey: B = "_t_",
   locale: q = "en",
-  encKey: me = "_ek_",
-  autoConnect: pe = !0,
+  encKey: fe = "_ek_",
+  autoConnect: me = !0,
   forceConnected: H = !0,
-  saveConnect: he = !0,
-  useSocket: be = !0,
+  saveConnect: pe = !0,
+  useSocket: he = !0,
   allowWallet: V = !0,
-  provider: ge = "",
+  provider: be = "",
   messages: d = {},
   passkeyBehavior: Y = "none",
-  webWalletUrl: xe = _t(),
-  enabledConnectTypes: Ce = ["web", "mobile", ...Object.keys(j)],
+  webWalletUrl: ge = _t(),
+  enabledConnectTypes: xe = ["web", "mobile", ...Object.keys(j)],
   extraContent: G = null,
   disableSwitchApp: T = !1,
   magicToken: K = void 0,
-  customItems: ye = [],
+  customItems: Ce = [],
   onClose: O = C,
   onError: Q = C,
   onSuccess: R = C,
   onRecreateSession: X = C,
-  setColor: Se = C
+  setColor: ye = C
 }) {
-  const A = at(), J = Qe(), ke = Ve(lt), we = vt(ke?.session?.user), {
+  const A = at(), J = Qe(), Se = Ve(lt), ke = vt(Se?.session?.user), {
     t: Z,
-    staticState: Ie,
+    staticState: we,
     connectState: s,
-    extraParams: ve,
-    currentAppInfo: Pe,
+    extraParams: Ie,
+    currentAppInfo: ve,
     currentAppColor: W,
     // 插件相关
     selectedPlugin: a,
     blocklet: $,
-    masterBlocklet: _e,
+    masterBlocklet: Pe,
     showWalletOptions: f,
-    setShowWalletOptions: De,
-    lastLoginMethod: Te
-  } = dt(), { state: o, generate: ee, cancelWhenScanned: Oe } = pt({
+    setShowWalletOptions: _e,
+    lastLoginMethod: De
+  } = dt(), { state: o, generate: ee, cancelWhenScanned: Te } = pt({
     action: I,
     baseUrl: g,
     checkFn: v,
     checkInterval: P,
     checkTimeout: _,
-    extraParams: ve,
+    extraParams: Ie,
     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);
+    encKey: fe,
+    autoConnect: me,
+    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);
+  ue(() => {
+    Oe(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);
+  const { oauthState: c, setBaseUrl: Re } = ht(), { passkeyState: l, setTargetAppPid: Ae } = gt();
+  ue(() => {
+    Re(g), Ae($?.appPid), o.reset(), c.reset(), l.reset();
+  }), le(() => {
+    ye(W);
   }, [W]);
-  const ze = u(() => ({
+  const We = u(() => ({
     confirm: d.confirm,
     success: d.success,
     error: a?.state?.error || o.error || l.error || c.error || ""
@@ -117,34 +117,34 @@ function fe({
     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(() => {
+  }), ze = F(() => {
     s?.retryConnect();
-  }), Le = F(() => {
-    X(), c.reset(), l.reset(), a?.state?.reset(), Ie.current.cancelCount++, Oe();
-  }), { run: Me } = Je(
+  }), Ee = F(() => {
+    X(), c.reset(), l.reset(), a?.state?.reset(), we.current.cancelCount++, Te();
+  }), { run: Le } = 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({
+  le(Le, [o.status]);
+  const Me = u(() => ot[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), { providerList: Ue, hideQRCode: m, hideChooseList: r, loadingProviderList: Fe } = wt({
     action: o.action,
     sourceAppPid: s?.sourceAppPid,
     allowWallet: V,
     passkeyBehavior: Y,
     mode: p,
-    blocklet: s?.sourceAppPid ? _e : $,
+    blocklet: s?.sourceAppPid ? Pe : $,
     isSmallView: oe,
-    lastLoginMethod: Te
-  }), je = Ze(s?.sourceAppPid);
+    lastLoginMethod: De
+  }), Ne = Ze(s?.sourceAppPid);
   $e(() => {
-    et(je) || ee();
+    et(Ne) || ee();
   }, [s?.sourceAppPid]);
   const n = (k) => {
     const h = A.spacing(k);
     return parseInt(h, 10);
-  }, Be = u(() => y ? null : /* @__PURE__ */ t(
+  }, je = u(() => y ? null : /* @__PURE__ */ t(
     tt,
     {
       onClose: O,
@@ -154,14 +154,12 @@ function fe({
         top: 14
       }
     }
-  ), [y, O]);
-  let ie = null;
-  S && (ie = /* @__PURE__ */ t(
+  ), [y, O]), Be = /* @__PURE__ */ t(
     i,
     {
       sx: {
         flex: 1,
-        display: "flex",
+        display: S ? "flex" : "none",
         alignItems: "center",
         justifyContent: "center"
       },
@@ -171,21 +169,20 @@ function fe({
           status: a?.state?.computedStatus || c.status || l.status || o.status,
           nextWorkflow: o.nextWorkflow,
           mfaCode: o.mfaCode,
-          onCancel: Le,
-          onRetry: Ee,
+          onCancel: Ee,
+          onRetry: ze,
           onClose: O,
-          messages: ze,
+          messages: We,
           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,
+          chooseMethod: Me,
           hideRetry: s.chooseMethod === "email",
           hideBack: !!K
         }
       ) })
     }
-  ));
-  const se = It({ disableSwitchApp: T, tokenState: o }), E = u(() => {
+  ), 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(
@@ -200,7 +197,7 @@ function fe({
         children: o.url ? /* @__PURE__ */ t(
           it,
           {
-            data: se,
+            data: ie,
             size: h,
             sx: {
               width: h + n(1) * 2,
@@ -241,7 +238,7 @@ function fe({
         )
       }
     );
-  }, [se, r, f]), qe = u(() => r ? "column-reverse" : !m && re ? "column" : "row", [r, re, m]), ae = u(() => E ? /* @__PURE__ */ t(
+  }, [ie, r, f]), qe = u(() => r ? "column-reverse" : !m && re ? "column" : "row", [r, re, m]), se = u(() => E ? /* @__PURE__ */ t(
     i,
     {
       sx: {
@@ -317,7 +314,7 @@ function fe({
       },
       children: [
         !S && !m ? /* @__PURE__ */ b(He, { children: [
-          ae,
+          se,
           r ? null : /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(
             Ke,
             {
@@ -341,7 +338,7 @@ function fe({
               flex: 1
             },
             children: [
-              ie,
+              Be,
               /* @__PURE__ */ t(
                 ft,
                 {
@@ -358,17 +355,17 @@ function fe({
                   tokenKey: B,
                   onSuccess: R,
                   passkeyBehavior: Y,
-                  webWalletUrl: xe,
+                  webWalletUrl: ge,
                   extraContent: G,
-                  enabledConnectTypes: Ce,
+                  enabledConnectTypes: xe,
                   onReset: ne,
                   disableSwitchApp: T,
                   forceUpdate: J,
                   magicToken: K,
                   baseUrl: g,
-                  customItems: ye,
-                  providerList: Fe,
-                  qrcode: ae
+                  customItems: Ce,
+                  providerList: Ue,
+                  qrcode: se
                 }
               )
             ]
@@ -384,8 +381,8 @@ function fe({
     onSuccess: R,
     onError: Q
   }) : M = L;
-  const ce = m || S ? rt : N;
-  return Ne ? /* @__PURE__ */ t(Pt, {}) : /* @__PURE__ */ b(
+  const ae = m || S ? rt : N;
+  return Fe ? /* @__PURE__ */ t(Pt, {}) : /* @__PURE__ */ b(
     i,
     {
       ref: te,
@@ -399,7 +396,7 @@ function fe({
         maxWidth: "100%",
         width: (
           // eslint-disable-next-line no-nested-ternary
-          p === "drawer" ? "100%" : f ? ce - 20 : ce
+          p === "drawer" ? "100%" : f ? ae - 20 : ae
         ),
         transition: "width 0.2s ease-in-out",
         margin: "auto",
@@ -417,17 +414,17 @@ function fe({
             extraContent: G,
             disableSwitchApp: T,
             showWalletOptions: f,
-            onBack: () => De(!1)
+            onBack: () => _e(!1)
           }
         ),
         /* @__PURE__ */ t(mt, { initHeight: 72, children: M }),
-        /* @__PURE__ */ t(st, { currentAppInfo: Pe, currentAppColor: W }),
-        Be
+        /* @__PURE__ */ t(st, { currentAppInfo: ve, currentAppColor: W }),
+        je
       ]
     }
   );
 }
-fe.propTypes = {
+de.propTypes = {
   mode: e.oneOf(["dialog", "drawer", "page"]),
   action: e.string.isRequired,
   baseUrl: e.string,
@@ -485,7 +482,7 @@ function Dt({ testOnlyBorderColor: y = void 0, ...p }) {
           boxSizing: "border-box"
         }
       },
-      children: /* @__PURE__ */ t(fe, { ...p })
+      children: /* @__PURE__ */ t(de, { ...p })
     }
   );
 }

package/lib/Connect/hooks/token.js

@@ -1,74 +1,74 @@
-import { useRef as I, useEffect as C } from "react";
-import T from "lodash/get";
-import ue from "js-cookie";
-import B from "lodash/omitBy";
-import M from "lodash/isNil";
-import fe from "lodash/omit";
-import de from "lodash/cloneDeep";
-import { useReactive as H, useCreation as pe, useMemoizedFn as E } from "ahooks";
+import { useRef as S, useEffect as C } from "react";
+import W from "lodash/get";
+import fe from "js-cookie";
+import M from "lodash/omitBy";
+import H from "lodash/isNil";
+import de from "lodash/omit";
+import pe from "lodash/cloneDeep";
+import { useReactive as Q, useCreation as me, useMemoizedFn as T } from "ahooks";
 import ke from "@arcblock/react-hooks/lib/useInterval";
-import me from "@arcblock/react-hooks/lib/useBrowser";
-import { getVisitorId as he, stringifyQuery as $, isUrl as ge } from "@arcblock/ux/lib/Util";
-import { WsClient as be } from "@arcblock/ws";
-import { sleep as q, getExtraHeaders as x, getConnectedInfo as we, updateConnectedInfo as Ce, parseNextWorkflow as Q, createAxios as z, decodeConnectUrl as Se, parseTokenFromConnectUrl as Ie } from "../../utils.js";
-import V from "../assets/locale.js";
-import $e from "./security.js";
-import xe from "./page-show.js";
-import { RELAY_SOCKET_PREFIX as G } from "../../constant.js";
-function ve(o) {
+import ge from "@arcblock/react-hooks/lib/useBrowser";
+import { getVisitorId as he, stringifyQuery as x, isUrl as be } from "@arcblock/ux/lib/Util";
+import { WsClient as we } from "@arcblock/ws";
+import { sleep as G, getExtraHeaders as v, getConnectedInfo as Se, updateConnectedInfo as Ce, parseNextWorkflow as z, createAxios as V, decodeConnectUrl as Ie, parseTokenFromConnectUrl as $e } from "../../utils.js";
+import X from "../assets/locale.js";
+import xe from "./security.js";
+import ve from "./page-show.js";
+import { RELAY_SOCKET_PREFIX as J } from "../../constant.js";
+function Ue(o) {
   const l = o || window.location.href;
   return new URL(l).host;
 }
 const P = {};
-function Ue({ action: o, prefix: l, checkFn: k, extraParams: v, baseUrl: m }) {
-  const d = `${l}/token?${$(v)}`;
+function Ae({ action: o, prefix: l, checkFn: m, extraParams: U, baseUrl: k }) {
+  const d = `${l}/token?${x(U)}`;
   return P[d] || (P[d] = async function() {
-    const f = +/* @__PURE__ */ new Date(), h = await k(d, { headers: x(m) }), g = +/* @__PURE__ */ new Date();
-    if (g - f < 500 && await q(500 - (g - f)), h?.data?.token)
-      return h.data;
-    if (h?.data?.error)
-      throw new Error(h.data.error);
-    const U = ge(l) ? l : `${m}${l}`;
-    throw new Error(`Error generating ${o} QR Code from: ${U}`);
+    const f = +/* @__PURE__ */ new Date(), g = await m(d, { headers: v(k) }), h = +/* @__PURE__ */ new Date();
+    if (h - f < 500 && await G(500 - (h - f)), g?.data?.token)
+      return g.data;
+    if (g?.data?.error)
+      throw new Error(g.data.error);
+    const A = be(l) ? l : `${k}${l}`;
+    throw new Error(`Error generating ${o} QR Code from: ${A}`);
   }), P[d];
 }
-const Ae = () => {
+const ye = () => {
   try {
     const l = new URL(window.location.href).searchParams.get("__connect_url__");
     if (!l)
       return null;
-    const k = Se(l);
+    const m = Ie(l);
     return {
-      token: Ie(k),
-      url: k
+      token: $e(m),
+      url: m
     };
   } catch (o) {
     return {
       error: o
     };
   }
-}, J = () => T(globalThis, "blocklet.appPid") || T(globalThis, "blocklet.appId") || T(globalThis, "env.appId") || "", ye = () => (T(globalThis, "env.apiPrefix") || "/").replace(/\/$/, "").replace(G, ""), R = (o) => `relay:${J()}:${o}`, Ee = () => window.location.protocol === "https:" ? "wss:" : "ws:", X = (o) => !o || new URL(o).origin === window.location.origin, Y = (o) => ["succeed", "error", "timeout", "busy"].includes(o);
-function Xe({
+}, Z = () => W(globalThis, "blocklet.appPid") || W(globalThis, "blocklet.appId") || W(globalThis, "env.appId") || "", Ee = () => (W(globalThis, "env.apiPrefix") || "/").replace(/\/$/, "").replace(J, ""), _ = (o) => `relay:${Z()}:${o}`, Te = () => window.location.protocol === "https:" ? "wss:" : "ws:", Y = (o) => !o || new URL(o).origin === window.location.origin, q = (o) => ["succeed", "error", "timeout", "busy"].includes(o);
+function Ye({
   action: o,
   checkFn: l,
-  checkInterval: k,
-  checkTimeout: v,
-  extraParams: m,
+  checkInterval: m,
+  checkTimeout: U,
+  extraParams: k,
   locale: d,
-  prefix: _,
+  prefix: F,
   tokenKey: f,
-  encKey: h,
-  onError: g,
-  onSuccess: U,
-  baseUrl: Z,
-  autoConnect: K = !0,
-  forceConnected: ee = !0,
-  saveConnect: re = !0,
+  encKey: g,
+  onError: h,
+  onSuccess: A,
+  baseUrl: K,
+  autoConnect: ee = !0,
+  forceConnected: re = !0,
+  saveConnect: te = !0,
   // FIXME: @zhanghan 将来需要设置为默认 false，仅在需要的时候进行保存 login, switch/role/profile
-  useSocket: te = !0,
-  provider: ne = "wallet"
+  useSocket: ne = !0,
+  provider: oe = "wallet"
 }) {
-  const e = H({
+  const e = Q({
     checking: !1,
     loading: !1,
     token: "",
@@ -76,7 +76,6 @@ function Xe({
     store: null,
     status: "created",
     error: "",
-    checkCount: 0,
     mfaCode: 0,
     appInfo: null,
     memberAppInfo: null,
@@ -84,80 +83,80 @@ function Xe({
     saveConnect: !1,
     inExistingSession: !1,
     nextWorkflow: "",
-    baseUrl: Z,
-    prefix: `${_}/${o}`,
-    extraParams: B(m, M),
+    baseUrl: K,
+    prefix: `${F}/${o}`,
+    extraParams: M(k, H),
     checkFn: l,
     results: {},
     action: o,
-    provider: ne,
+    provider: oe,
     reset() {
       this.error = "", this.status = "created";
     }
-  }), F = I(null), S = V[d] || V.en, u = pe(() => Ae(), []), oe = Math.ceil(v / k), c = H({
+  }), I = S(0), D = S(null), $ = X[d] || X.en, u = me(() => ye(), []), se = Math.ceil(U / m), c = Q({
     onSuccessCalled: !1,
     cancelWhenScannedCounter: 0,
     isSocketAvailable: !1
-  }), { encryptKey: se, decrypt: A } = $e(), D = me(), O = he(), a = I(null), p = I(null), b = {
+  }), { encryptKey: ae, decrypt: y } = xe(), O = ge(), L = he(), a = S(null), p = S(null), b = {
     ...e.extraParams,
     locale: d,
     [f]: e.token || u?.token,
     provider: e.provider
-  }, L = async () => {
+  }, j = async () => {
     if (!(u?.token && u?.token === e.token)) {
       try {
-        b[f] && e.status === "created" && await e.checkFn(`${e.prefix}/timeout?${$(b)}`, {
-          headers: x(e.baseUrl)
+        b[f] && e.status === "created" && await e.checkFn(`${e.prefix}/timeout?${x(b)}`, {
+          headers: v(e.baseUrl)
         });
       } catch {
       }
       try {
-        e.token && p.current && (await a.current.unsubscribe(R(e.token)), p.current = null);
+        e.token && p.current && (await a.current.unsubscribe(_(e.token)), p.current = null);
       } catch {
       }
     }
-  }, ae = E((...t) => {
+  }, ce = T((...t) => {
     const r = {
-      [h]: se,
+      [g]: ae,
       ...e.extraParams,
       locale: d,
-      forceConnected: ee,
+      forceConnected: re,
       // - autoConnect 请求参数用于控制服务端是否给钱包应用发送自动连接通知
       // - 使用 connect 组件时明确传入了 autoConnect = false, 则 autoConnect 请求参数 为 false
       // - 如果 cancelWhenScannedCounter > 0, 说明用户进行过 cancel 操作, 则临时禁用自动连接, autoConnect 请求参数 为 false
       //   (避免 "无限自动连接问题")
       // - 如果上次连接设备 (connected_wallet_os) 不是 ios/android, 则禁用自动连接
-      autoConnect: K && // 如果是 wallet webview 环境, 不发送通知, 避免 wallet 连续弹出 auth 窗口 2 次 (#341)
-      !(D.wallet || D.arcSphere) && !c.cancelWhenScannedCounter && ["ios", "android"].includes(ue.get("connected_wallet_os")),
+      autoConnect: ee && // 如果是 wallet webview 环境, 不发送通知, 避免 wallet 连续弹出 auth 窗口 2 次 (#341)
+      !(O.wallet || O.arcSphere) && !c.cancelWhenScannedCounter && ["ios", "android"].includes(fe.get("connected_wallet_os")),
       provider: e.provider
     };
-    O && (r.visitorId = O);
-    const n = fe(F.current || {}, ["sourceAppPid", "verbose"]);
+    L && (r.visitorId = L);
+    const n = de(D.current || {}, ["sourceAppPid", "verbose"]);
     return Object.keys(n).forEach((s) => {
-      (!r[s] || s === h && n[s]) && (r[s] = n[s]);
-    }), u?.token && !r.sourceToken && (r.sourceToken = u?.token), Ue({
+      (!r[s] || s === g && n[s]) && (r[s] = n[s]);
+    }), u?.token && !r.sourceToken && (r.sourceToken = u?.token), Ae({
       action: o,
       prefix: e.prefix,
       baseUrl: e.baseUrl,
       checkFn: e.checkFn,
       extraParams: r
     })(...t);
-  }), y = E(async (t = !0) => {
-    t && L();
+  }), E = T(async (t = !0) => {
+    t && j();
     try {
-      e.loading = !0, e.token = "", e.url = "", e.store = null, e.extraParams = B(m, M), await q();
-      const r = await ae(), n = r.extra || {};
-      e.loading = !1, e.token = r.token, e.url = r.url, e.status = "created", e.error = "", e.checkCount = 0, e.appInfo = r.appInfo, e.memberAppInfo = r.memberAppInfo, e.connectedDid = n.connectedDid, e.saveConnect = n.saveConnect;
+      e.loading = !0, e.token = "", e.url = "", e.store = null, e.extraParams = M(k, H), await G();
+      const r = await ce(), n = r.extra || {};
+      e.loading = !1, e.token = r.token, e.url = r.url, e.status = "created", e.error = "", I.current = 0, e.appInfo = r.appInfo, e.memberAppInfo = r.memberAppInfo, e.connectedDid = n.connectedDid, e.saveConnect = n.saveConnect;
     } catch (r) {
-      e.loading = !1, e.status = "error", e.error = `${S.generateError}: ${r.message}`;
+      e.loading = !1, e.status = "error", e.error = `${$.generateError}: ${r.message}`;
     }
-  }), ce = E(() => {
+  }), ie = T(() => {
     c.cancelWhenScannedCounter++;
   });
   C(() => {
-    c.cancelWhenScannedCounter > 0 && (m.nw ? g(new Error(S.retryForbidden)) : y());
-  }, [c.cancelWhenScannedCounter]), C(() => (!(/^((?!chrome|android).)*safari/i.test(globalThis.navigator.userAgent) || Object.hasOwn(globalThis?.blocklet || {}, "DID_CONNECT_DISABLE_SOCKET")) && te && X(e.baseUrl) && J() ? (!a.current || a.current.isConnected() === !1 || a.current.baseUrl !== e.baseUrl) && (a.current = new be(
-    `${Ee()}//${ve(e.baseUrl)}${ye()}${G}/relay`,
+    c.cancelWhenScannedCounter > 0 && (k.nw ? h(new Error($.retryForbidden)) : E());
+  }, [c.cancelWhenScannedCounter]), C(() => (!(/^((?!chrome|android).)*safari/i.test(globalThis.navigator.userAgent) || Object.hasOwn(globalThis?.blocklet || {}, "DID_CONNECT_DISABLE_SOCKET")) && ne && Y(e.baseUrl) && Z() ? (!a.current || a.current.isConnected() === !1 || a.current.baseUrl !== e.baseUrl) && (a.current = new we(
+    `${Te()}//${Ue(e.baseUrl)}${Ee()}${J}/relay`,
     {
       longpollerTimeout: 5e3,
       // connection timeout
@@ -168,50 +167,54 @@ function Xe({
   }), a.current.connect()) : c.isSocketAvailable && (c.isSocketAvailable = !1), () => {
     a.current && (a.current.disconnect(), a.current = null);
   }), [e.baseUrl]);
-  const ie = () => !e.token || e.loading || Y(e.status) ? null : k, j = I(null);
+  const le = () => !e.token || e.loading || q(e.status) ? null : m, N = S(null);
   C(() => {
-    j.current = { state: e, params: b };
+    N.current = { state: e, params: b };
   }), C(() => () => {
-    const { state: t, params: r } = j.current;
-    t.status === "created" && r[f] && t.checkFn(`${t.prefix}/timeout?${$(r)}`, {
-      headers: x(t.baseUrl)
+    const { state: t, params: r } = N.current;
+    t.status === "created" && r[f] && t.checkFn(`${t.prefix}/timeout?${x(r)}`, {
+      headers: v(t.baseUrl)
     });
   }, []);
-  const w = E(async (t = !1) => {
-    if ((e.checking || document.hidden) && !t || (e.status === "created" && e.checkCount++, c.isSocketAvailable && !t))
+  const w = T(async (t = !1) => {
+    if ((e.checking || document.hidden) && !t)
+      return null;
+    if (e.status === "created" && (I.current++, e.status !== "timeout" && I.current > se))
+      return e.status = "timeout", j(), null;
+    if (c.isSocketAvailable && !t)
       return null;
     try {
       e.checking = !0;
-      const r = await e.checkFn(`${e.prefix}/status?${$(b)}`, {
-        headers: x(e.baseUrl)
+      const r = await e.checkFn(`${e.prefix}/status?${x(b)}`, {
+        headers: v(e.baseUrl)
       }), { status: n, error: i, mfaCode: s = 0 } = r.data;
       if (e.store = r.data, e.mfaCode = s, e.checking = !1, e.status === "scanned" && n === "created" || (e.status = n), n === "error" && i) {
-        const N = new Error(i);
-        throw N.response = r, N;
+        const B = new Error(i);
+        throw B.response = r, B;
       }
       return r.data;
     } catch (r) {
       const { response: n } = r;
       if (n?.status) {
-        b[f] && e.checkFn(`${e.prefix}/timeout?${$(b)}`, {
-          headers: x(e.baseUrl)
+        b[f] && e.checkFn(`${e.prefix}/timeout?${x(b)}`, {
+          headers: v(e.baseUrl)
         });
         const i = n?.data?.error ? n.data.error : r.message, s = new Error(i);
-        s.code = n.status, e.status = "error", e.checking = !1, e.error = i, g(s, e?.store, A);
+        s.code = n.status, e.status = "error", e.checking = !1, e.error = i, h(s, e?.store, y);
       } else
-        e.status = "error", e.checking = !1, e.error = S.generateError;
+        e.status = "error", e.checking = !1, e.error = $.generateError;
     }
     return null;
-  }), le = async () => {
+  }), ue = async () => {
     try {
       if (u.error)
         throw u.error;
       e.loading = !0, e.token = u.token, e.url = u.url, e.inExistingSession = !0;
       let t = await w();
-      if ((["scanned"].includes(t?.status) || t?.sourceToken === u?.token) && (await y(!1), t = await w()), F.current = t?.extraParams || null, t?.status && !["created"].includes(t?.status))
-        throw new Error(`${S.invalidSessionStatus} [${t.status}]`);
+      if ((["scanned"].includes(t?.status) || t?.sourceToken === u?.token) && (await E(!1), t = await w()), D.current = t?.extraParams || null, t?.status && !["created"].includes(t?.status))
+        throw new Error(`${$.invalidSessionStatus} [${t.status}]`);
     } catch (t) {
-      e.status = "error", e.error = t.message, g(t, e?.store, A);
+      e.status = "error", e.error = t.message, h(t, e?.store, y);
     } finally {
       e.loading = !1;
     }
@@ -219,39 +222,35 @@ function Xe({
   C(() => {
     if (!e.token && !e.store && !e.loading && !e.error)
       if (u)
-        le();
+        ue();
       else {
-        y(!1);
+        E(!1);
         return;
       }
-    if (e.status !== "timeout" && e.checkCount > oe) {
-      e.status = "timeout", L();
-      return;
-    }
     if (e.status === "succeed" && !c.onSuccessCalled) {
-      const t = we({
+      const t = Se({
         ...e.store,
         appInfo: e.appInfo,
         memberAppInfo: e.memberAppInfo
       });
-      if (X(e.baseUrl) && re && e.saveConnect && e.store.did && Ce(t, !0), e.store) {
+      if (Y(e.baseUrl) && te && e.saveConnect && e.store.did && Ce(t, !0), e.store) {
         const { nextWorkflow: r } = e.store;
         if (r)
           try {
-            const n = Q(r, f);
-            e.nextWorkflow = n?.nextWorkflow || r, Object.assign(e, n), e.store = null, e.error = "", e.url = "", e.appInfo = null, e.memberAppInfo = null, e.checkCount = 0, e.status = "scanned", e.results = {
+            const n = z(r, f);
+            e.nextWorkflow = n?.nextWorkflow || r, Object.assign(e, n), e.store = null, e.error = "", e.url = "", e.appInfo = null, e.memberAppInfo = null, I.current = 0, e.status = "scanned", e.results = {
               ...e.results,
               [e.token]: e.store
-            }, e.checkFn = z({ baseURL: n.baseUrl, timeout: 8e3 }).get, w();
+            }, e.checkFn = V({ baseURL: n.baseUrl, timeout: 8e3 }).get, w();
           } catch (n) {
             console.error(`Invalid nextWorkflow: ${r}`, n), e.status = "error", e.error = `Invalid nextWorkflow: ${r}: ${n.message}`;
           }
-        else if (e.nextWorkflow && (e.nextWorkflow = "", e.url = ""), typeof U == "function") {
+        else if (e.nextWorkflow && (e.nextWorkflow = "", e.url = ""), typeof A == "function") {
           const n = Object.values({ ...e.results, [e.token]: e.store });
           c.onSuccessCalled = !0;
-          const i = n.length > 1 ? n : n[0], s = de(i);
-          U(s, A, {
-            sourceAppPid: m?.sourceAppPid,
+          const i = n.length > 1 ? n : n[0], s = pe(i);
+          A(s, y, {
+            sourceAppPid: k?.sourceAppPid,
             ...t
           });
         }
@@ -261,37 +260,37 @@ function Xe({
     if (e.store?.nextWorkflow) {
       const { nextWorkflow: t } = e.store;
       try {
-        const r = Q(t, f);
-        e.nextWorkflow = r?.nextWorkflow || t, Object.assign(e, r), e.store = null, e.error = "", e.url = "", e.appInfo = null, e.memberAppInfo = null, e.checkCount = 0, e.status = "scanned", e.results = {
+        const r = z(t, f);
+        e.nextWorkflow = r?.nextWorkflow || t, Object.assign(e, r), e.store = null, e.error = "", e.url = "", e.appInfo = null, e.memberAppInfo = null, I.current = 0, e.status = "scanned", e.results = {
           ...e.results,
           [e.token]: e.store
-        }, e.checkFn = z({ baseURL: r.baseUrl, timeout: 8e3 }).get, w();
+        }, e.checkFn = V({ baseURL: r.baseUrl, timeout: 8e3 }).get, w();
       } catch (r) {
         console.error(`Invalid nextWorkflow: ${t}`, r), e.status = "error", e.error = `Invalid nextWorkflow: ${t}: ${r.message}`;
       }
     }
   });
-  const W = I(0);
+  const R = S(0);
   return C(() => {
     if (e.token && c.isSocketAvailable && a.current) {
       let t = !1;
-      p.current ? p.current.token !== e.token && (a.current.unsubscribe(R(p.current.token)), t = !0) : t = !0, t && (p.current = a.current.subscribe(R(e.token)), W.current = 0, p.current.token = e.token, p.current.on("updated", ({ response: r }) => {
+      p.current ? p.current.token !== e.token && (a.current.unsubscribe(_(p.current.token)), t = !0) : t = !0, t && (p.current = a.current.subscribe(_(e.token)), R.current = 0, p.current.token = e.token, p.current.on("updated", ({ response: r }) => {
         const n = +new Date(r.updatedAt);
-        if (n <= W.current) {
+        if (n <= R.current) {
           console.warn("Ignore outdated message", r);
           return;
         }
-        W.current = n;
+        R.current = n;
         let { status: i, error: s } = r;
-        i === "forbidden" && (s = S.forbidden, i = "error"), e.status = i, e.mfaCode = r.mfaCode || 0, e.store = r, e.error = s, s && g(new Error(s), e?.store, A);
+        i === "forbidden" && (s = $.forbidden, i = "error"), e.status = i, e.mfaCode = r.mfaCode || 0, e.store = r, e.error = s, s && h(new Error(s), e?.store, y);
       }));
     }
-  }, [e.token, c.isSocketAvailable, a.current]), ke(w, ie()), xe(() => {
-    e.token && Y(e.status) === !1 && (e.checking = !1, setTimeout(() => {
+  }, [e.token, c.isSocketAvailable, a.current]), ke(w, le()), ve(() => {
+    e.token && q(e.status) === !1 && (e.checking = !1, setTimeout(() => {
       w(!0);
     }, 100));
-  }), { state: e, generate: y, cancelWhenScanned: ce };
+  }), { state: e, generate: E, cancelWhenScanned: ie };
 }
 export {
-  Xe as default
+  Ye as default
 };

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

@@ -1,13 +1,14 @@
 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 { useReactive as u, useMemoizedFn as f } from "ahooks";
+import h from "@iconify-icons/material-symbols/mail-outline-rounded";
+import { LOGIN_PROVIDER as E } from "@arcblock/ux/lib/Util/constant";
+import { translate as P } 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,
+import s from "../../assets/locale.js";
+function q({ baseUrl: l }) {
+  const i = u({
+    baseUrl: l,
     status: "idle",
     get computedStatus() {
       return this.status === "idle" ? "creating" : this.status === "creating" || this.status === "sending" || this.status === "verifying" ? "scanned" : this.status;
@@ -17,8 +18,9 @@ function k({ baseUrl: s }) {
     reset() {
       this.status = "idle", this.error = "", this.magicToken = "";
     }
-  }), r = h.EMAIL, t = "Email", o = f, l = {
+  }), r = E.EMAIL, t = "Email", o = h, m = {
     zh: {
+      ...s.zh,
       email: "邮箱地址",
       emailPlaceholder: "请输入邮箱地址",
       sendCode: "发送验证邮件",
@@ -31,6 +33,7 @@ function k({ baseUrl: s }) {
       emailRequired: "邮箱地址不能为空"
     },
     en: {
+      ...s.en,
       email: "Email",
       emailPlaceholder: "Enter your email address",
       sendCode: "Send Verification Email",
@@ -42,13 +45,13 @@ function k({ baseUrl: s }) {
       emailInvalid: "Email format is incorrect",
       emailRequired: "Email is required"
     }
-  }, n = u((e, m = {}, d = "en") => E(l, e, d, "en", m));
+  }, n = f((e, d = {}, c = "en") => P(m, e, c, "en", d));
   return {
     name: r,
     title: t,
     icon: o,
     renderListItem(e) {
-      return /* @__PURE__ */ a(P, { ...e, state: i, name: r, title: t, icon: o, t: n });
+      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 });
@@ -58,5 +61,5 @@ function k({ baseUrl: s }) {
   };
 }
 export {
-  k as default
+  q as default
 };

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const o = "3.4.1", s = {
+const o = "3.4.2", s = {
   version: o
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "Client side library to work with DID Connect by ArcBlock.",
   "keywords": [
     "react",
@@ -32,10 +32,10 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "3.4.1",
+    "@arcblock/bridge": "3.4.2",
     "@arcblock/did": "^1.28.1",
-    "@arcblock/icons": "3.4.1",
-    "@arcblock/react-hooks": "3.4.1",
+    "@arcblock/icons": "3.4.2",
+    "@arcblock/react-hooks": "3.4.2",
     "@arcblock/ws": "^1.28.1",
     "@blocklet/constant": "^1.17.7",
     "@fontsource/lexend": "^5.2.9",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "6101f8f54333c0c376437160147a0b15a1548111"
+  "gitHead": "9ba657c3d15f93dc93e9029845631ececf385afc"
 }

package/src/Connect/connect.jsx

@@ -253,40 +253,38 @@ function Connect({
     );
   }, [hideCloseButton, onClose]);
 
-  let content = null;
-  if (showStatus) {
-    content = (
-      <Box
-        sx={{
-          flex: 1,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-        <Box>
-          <ConnectStatus
-            status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
-            nextWorkflow={state.nextWorkflow}
-            mfaCode={state.mfaCode}
-            onCancel={handleCancel}
-            onRetry={handleRetry}
-            onClose={onClose}
-            messages={statusMessages}
-            locale={locale}
-            className="did-connect__auth-status auth-status"
-            loadingIcon={
-              connectState.chooseMethod ? (
-                <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
-              ) : null
-            }
-            chooseMethod={chooseMethod}
-            hideRetry={connectState.chooseMethod === 'email'}
-            hideBack={!!magicToken}
-          />
-        </Box>
+  // 预渲染 ConnectStatus，通过 CSS 控制显示/隐藏，避免 DOM 的创建/销毁导致卡顿
+  const statusContent = (
+    <Box
+      sx={{
+        flex: 1,
+        display: showStatus ? 'flex' : 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+      <Box>
+        <ConnectStatus
+          status={selectedPlugin?.state?.computedStatus || oauthState.status || passkeyState.status || state.status}
+          nextWorkflow={state.nextWorkflow}
+          mfaCode={state.mfaCode}
+          onCancel={handleCancel}
+          onRetry={handleRetry}
+          onClose={onClose}
+          messages={statusMessages}
+          locale={locale}
+          className="did-connect__auth-status auth-status"
+          loadingIcon={
+            connectState.chooseMethod ? (
+              <ProviderIcon provider={connectState.chooseMethod} sx={{ color: 'text.primary' }} />
+            ) : null
+          }
+          chooseMethod={chooseMethod}
+          hideRetry={connectState.chooseMethod === 'email'}
+          hideBack={!!magicToken}
+        />
       </Box>
-    );
-  }
+    </Box>
+  );
 
   const urlWithParams = useAuthUrl({ disableSwitchApp, tokenState: state });
 
@@ -455,8 +453,9 @@ function Connect({
           display: 'flex',
           flex: 1,
         }}>
-        {/* eslint-disable-next-line no-nested-ternary */}
-        {content}
+        {/* ConnectStatus：始终渲染，通过 CSS 控制显示/隐藏 */}
+        {statusContent}
+        {/* ConnectProviderList：始终渲染，通过 CSS 控制显示/隐藏 */}
         <ConnectProviderList
           slotProps={{
             root: {

package/src/Connect/hooks/token.js

@@ -119,7 +119,6 @@ export default function useToken({
     store: null,
     status: 'created',
     error: '',
-    checkCount: 0,
     mfaCode: 0,
     appInfo: null,
     memberAppInfo: null,
@@ -140,6 +139,8 @@ export default function useToken({
     },
   });
 
+  // 使用 ref 存储 checkCount，避免计数时触发不必要的渲染
+  const checkCountRef = useRef(0);
   const statusExtraParams = useRef(null);
 
   const translation = translations[locale] || translations.en;
@@ -264,7 +265,7 @@ export default function useToken({
       state.url = data.url;
       state.status = 'created';
       state.error = '';
-      state.checkCount = 0;
+      checkCountRef.current = 0;
       state.appInfo = data.appInfo;
       state.memberAppInfo = data.memberAppInfo;
       state.connectedDid = extra.connectedDid;
@@ -363,7 +364,6 @@ export default function useToken({
   }, []);
 
   // Check auth token status
-  // FIXME: @zhanghan 这个函数会造成 connect 组件每秒重渲染一次，需要从 setState 入手，优化这个问题。优化的原则是，页面数据没有变更时，不应该触发重渲染
   const checkStatus = useMemoizedFn(async (force = false) => {
     if ((state.checking || document.hidden) && !force) {
       return null;
@@ -371,7 +371,14 @@ export default function useToken({
 
     // NOTICE: 仅当状态为 created 时才去计算次数统计
     if (state.status === 'created') {
-      state.checkCount++;
+      checkCountRef.current++;
+
+      // 超时判断：超过最大检查次数则标记为超时
+      if (state.status !== 'timeout' && checkCountRef.current > maxCheckCount) {
+        state.status = 'timeout';
+        unsubscribe();
+        return null;
+      }
     }
 
     if (currentState.isSocketAvailable && !force) {
@@ -467,13 +474,6 @@ export default function useToken({
       }
     }
 
-    // Mark token as expired if exceed max retry count
-    if (state.status !== 'timeout' && state.checkCount > maxCheckCount) {
-      state.status = 'timeout';
-      unsubscribe();
-      return;
-    }
-
     // Trigger on success if we completed the process
     if (state.status === 'succeed' && !currentState.onSuccessCalled) {
       // save connected_did to cookie if only on same origin
@@ -499,7 +499,7 @@ export default function useToken({
             state.url = '';
             state.appInfo = null;
             state.memberAppInfo = null;
-            state.checkCount = 0;
+            checkCountRef.current = 0;
             state.status = 'scanned';
             state.results = {
               ...state.results,
@@ -547,7 +547,7 @@ export default function useToken({
         state.url = '';
         state.appInfo = null;
         state.memberAppInfo = null;
-        state.checkCount = 0;
+        checkCountRef.current = 0;
         state.status = 'scanned';
         state.results = {
           ...state.results,

package/src/Connect/plugins/email/index.jsx

@@ -5,6 +5,7 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 
 import EmailListItem from './list-item';
 import EmailPlaceholder from './placeholder';
+import defaultTranslations from '../../assets/locale';
 
 export default function useEmailPlugin({ baseUrl }) {
   const state = useReactive({
@@ -38,6 +39,7 @@ export default function useEmailPlugin({ baseUrl }) {
   const icon = mailOutlineRoundedIcon;
   const translations = {
     zh: {
+      ...defaultTranslations.zh,
       email: '邮箱地址',
       emailPlaceholder: '请输入邮箱地址',
       sendCode: '发送验证邮件',
@@ -50,6 +52,7 @@ export default function useEmailPlugin({ baseUrl }) {
       emailRequired: '邮箱地址不能为空',
     },
     en: {
+      ...defaultTranslations.en,
       email: 'Email',
       emailPlaceholder: 'Enter your email address',
       sendCode: 'Send Verification Email',