@arcblock/did-connect-react 3.3.4 → 3.3.5

package/lib/Connect/components/login-item/wallet-login-options.js

@@ -0,0 +1,109 @@
+import { jsxs as c, Fragment as f, jsx as e } from "react/jsx-runtime";
+import o from "prop-types";
+import { Box as t, Divider as R } from "@mui/material";
+import { LOGIN_PROVIDER as d } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as k, getWebWalletUrl as C } from "@arcblock/ux/lib/Util/wallet";
+import { detectWalletExtension as W } from "@arcblock/ux/lib/Util";
+import { useCreation as q } from "ahooks";
+import { useBrowser as j } from "@arcblock/react-hooks";
+import T from "./mobile-login-item.js";
+import B from "./web-login-item.js";
+import P from "../back-button.js";
+import { useStateContext as v } from "../../contexts/state.js";
+function E({
+  qrcode: p,
+  tokenState: r,
+  webWalletUrl: n = C(),
+  size: l = "small",
+  disableSwitchApp: m = !1,
+  tokenKey: u,
+  walletLoginRef: b = null,
+  webLoginRef: x = null,
+  onMobileLoginClick: g,
+  onWebLoginClick: h,
+  onBack: L
+}) {
+  const { locale: w } = v(), i = j(), y = k(n), s = W(), a = q(() => i.mobile.tablet || !i.mobile.any && window?.navigator?.maxTouchPoints > 0, [i.mobile.tablet, i.mobile.any]);
+  return /* @__PURE__ */ c(f, { children: [
+    p,
+    /* @__PURE__ */ c(t, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+      /* @__PURE__ */ e(t, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+        R,
+        {
+          orientation: "horizontal",
+          sx: {
+            fontSize: 12,
+            color: "text.hint",
+            "&::before, &::after": {
+              borderColor: "divider"
+            }
+          },
+          children: "or"
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          sx: {
+            width: "100%",
+            ".arc-login-item": {
+              width: "100%",
+              justifyContent: "center",
+              "& > .arc-login-item__body": {
+                flex: "unset"
+              },
+              "& > .other-item-icon": {
+                display: "none !important"
+              }
+            }
+          },
+          children: a ? /* @__PURE__ */ e(
+            T,
+            {
+              ref: b,
+              tokenState: r,
+              isTablet: a,
+              sx: [l === "small" ? { p: 1 } : { p: 2 }],
+              locale: w,
+              tokenKey: u,
+              disableSwitchApp: m,
+              onClick: g
+            },
+            d.WALLET
+          ) : (
+            // eslint-disable-next-line react/jsx-no-useless-fragment
+            /* @__PURE__ */ e(f, { children: (y || s) && (!i.mobile.any || s) ? /* @__PURE__ */ e(
+              B,
+              {
+                ref: x,
+                tokenState: r,
+                webWalletUrl: n,
+                sx: [l === "small" ? { p: 1 } : { p: 2 }],
+                disableSwitchApp: m,
+                onClick: h
+              },
+              d.WALLET
+            ) : null })
+          )
+        }
+      ),
+      /* @__PURE__ */ e(P, { variant: "text", onClick: L })
+    ] })
+  ] });
+}
+E.propTypes = {
+  qrcode: o.node.isRequired,
+  tokenState: o.object.isRequired,
+  webWalletUrl: o.string,
+  size: o.oneOf(["small", "normal", "large"]),
+  disableSwitchApp: o.bool,
+  tokenKey: o.string.isRequired,
+  walletLoginRef: o.object,
+  webLoginRef: o.object,
+  onMobileLoginClick: o.func.isRequired,
+  onWebLoginClick: o.func.isRequired,
+  onBack: o.func.isRequired
+};
+export {
+  E as default
+};

package/lib/Connect/components/login-item/web-login-item.js

@@ -1,65 +1,68 @@
-import { jsx as m } from "react/jsx-runtime";
-import r from "prop-types";
-import { CircularProgress as C } from "@mui/material";
-import { useReactive as L, useMemoizedFn as d, useCreation as p } from "ahooks";
-import { detectWalletExtension as _, openWebWallet as w } from "@arcblock/ux/lib/Util";
-import { mergeSx as E } from "@arcblock/ux/lib/Util/style";
-import O from "lodash/noop";
-import P from "lodash/omit";
-import { useImperativeHandle as v } from "react";
-import A from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { LOGIN_PROVIDER_ICON_SIZE as a, LOGIN_PROVIDER as y } from "@arcblock/ux/lib/Util/constant";
-import T from "./login-method-item.js";
-import { useStateContext as N } from "../../contexts/state.js";
-import { EXT_DOWNLOAD_URL as I } from "../../../constant.js";
-import U from "../../hooks/auth-url.js";
-function j({
-  ref: g = null,
-  tokenState: o,
-  locale: x = "en",
+import { jsx as p } from "react/jsx-runtime";
+import o from "prop-types";
+import { CircularProgress as _ } from "@mui/material";
+import { useReactive as w, useMemoizedFn as I, useCreation as f } from "ahooks";
+import { detectWalletExtension as C, openWebWallet as E } from "@arcblock/ux/lib/Util";
+import { mergeSx as O } from "@arcblock/ux/lib/Util/style";
+import P from "lodash/noop";
+import v from "lodash/omit";
+import { useImperativeHandle as A } from "react";
+import y from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER_ICON_SIZE as a, LOGIN_PROVIDER as T } from "@arcblock/ux/lib/Util/constant";
+import N from "./login-method-item.js";
+import { useStateContext as U } from "../../contexts/state.js";
+import { EXT_DOWNLOAD_URL as g } from "../../../constant.js";
+import j from "../../hooks/auth-url.js";
+function q({
+  ref: x = null,
+  tokenState: r,
+  locale: D = "en",
   webWalletUrl: b,
-  onClick: D = O,
-  disableSwitchApp: h = !1,
-  ...f
+  onClick: h = P,
+  disableSwitchApp: W = !1,
+  autoConnect: t = !0,
+  ...u
 }) {
-  const { browserBrand: i } = N(), l = _(), t = L({
+  const { browserBrand: l } = U(), s = C(), n = w({
     loading: !1
-  }), W = U({ disableSwitchApp: h, tokenState: o }), u = d(() => {
-    t.loading = !0, w({
+  }), R = j({ disableSwitchApp: W, tokenState: r }), c = I(() => {
+    if (!t)
+      return;
+    n.loading = !0, E({
       webWalletUrl: b,
-      url: W,
-      locale: x,
-      appInfo: o.appInfo,
-      memberAppInfo: o.memberAppInfo
-    })?.type === "web" ? t.loading = !1 : setTimeout(() => {
-      t.loading = !1;
+      url: R,
+      locale: D,
+      appInfo: r.appInfo,
+      memberAppInfo: r.memberAppInfo
+    })?.type === "web" ? n.loading = !1 : setTimeout(() => {
+      n.loading = !1;
     }, 3e3);
-  }), s = d((e) => {
-    o.url && (D(e), e?.preventDefault(), u());
+  }), m = I((e) => {
+    r.url && (h(e), e?.preventDefault(), c());
   });
-  v(g, () => ({
-    connect: u
+  A(x, () => ({
+    connect: c
   }));
-  const n = p(() => i === "edge" ? I.edge : i === "chrome" ? I.chrome : null, [i]), c = p(() => {
+  const i = f(() => l === "edge" ? g.edge : l === "chrome" ? g.chrome : null, [l]), d = f(() => {
     const e = {};
-    return l ? e.onClick = s : n ? (e.component = "a", e.href = n, e.target = "_blank", e.rel = "noopener") : e.onClick = s, o.url || (e.sx = {
+    return s || !t ? e.onClick = m : i && t ? (e.component = "a", e.href = i, e.target = "_blank", e.rel = "noopener") : e.onClick = m, r.url || (e.sx = {
       cursor: "not-allowed"
     }), e;
-  }, [s, o.url]), R = p(() => l || n ? "DID Wallet (Extension)" : "DID Wallet (Web)", [l, n]);
-  return /* @__PURE__ */ m(
-    T,
+  }, [m, r.url]), L = f(() => t ? s || i ? "DID Wallet (Extension)" : "DID Wallet (Web)" : "DID Wallet", [s, i]);
+  return /* @__PURE__ */ p(
+    N,
     {
-      ...f,
-      sx: E(
+      ...u,
+      sx: O(
         {
           textDecoration: "none"
         },
-        f?.sx,
-        c.sx
+        u?.sx,
+        d.sx
       ),
-      title: R,
-      icon: t.loading || !o.url ? /* @__PURE__ */ m(
-        C,
+      title: L,
+      icon: n.loading || !r.url ? /* @__PURE__ */ p(
+        _,
         {
           color: "primary",
           size: a,
@@ -69,29 +72,31 @@ function j({
             }
           }
         }
-      ) : /* @__PURE__ */ m(
-        A,
+      ) : /* @__PURE__ */ p(
+        y,
         {
           sx: {
             width: a,
             height: a,
             transform: "scale(0.9)"
           },
-          provider: y.DID_WALLET
+          provider: T.DID_WALLET
         }
       ),
-      ...P(c, "sx")
+      ...v(d, "sx")
     }
   );
 }
-j.propTypes = {
-  tokenState: r.object.isRequired,
-  locale: r.string,
-  webWalletUrl: r.string.isRequired,
-  onClick: r.func,
-  disableSwitchApp: r.bool,
-  ref: r.any
+q.propTypes = {
+  tokenState: o.object.isRequired,
+  locale: o.string,
+  webWalletUrl: o.string.isRequired,
+  onClick: o.func,
+  disableSwitchApp: o.bool,
+  autoConnect: o.bool,
+  // 点击后是否自动连接，默认true
+  ref: o.any
 };
 export {
-  j as default
+  q as default
 };

package/lib/Connect/contexts/state.js

@@ -1,57 +1,57 @@
-import { jsx as I } from "react/jsx-runtime";
+import { jsx as O } from "react/jsx-runtime";
 import r from "prop-types";
-import { createContext as K, useState as x, use as O, useRef as D, useEffect as Q } from "react";
-import V from "@arcblock/react-hooks/lib/useBrowser";
-import { useUpdate as X, useCreation as s, useMemoizedFn as S, useLatest as Y, useReactive as Z, useSize as _ } from "ahooks";
-import E from "lodash/isUndefined";
-import $ from "lodash/noop";
-import { Box as ee } from "@mui/material";
-import { translate as te } from "@arcblock/ux/lib/Locale/util";
-import { getMaster as R, getCurrentApp as oe } from "@arcblock/ux/lib/Util/federated";
-import { getDIDMotifInfo as re } from "@arcblock/did-motif";
-import { isEthereumDid as ne, getDIDColor as ie } from "@arcblock/ux/lib/Util";
-import se from "../hooks/use-apps.js";
-import { SessionContext as pe } from "../../Session/context.js";
-import ce from "../assets/locale.js";
-const T = K({
+import { createContext as V, useState as S, use as E, useRef as W, useEffect as X } from "react";
+import Y from "@arcblock/react-hooks/lib/useBrowser";
+import { useUpdate as Z, useCreation as i, useMemoizedFn as h, useLatest as _, useReactive as $, useSize as ee } from "ahooks";
+import x from "lodash/isUndefined";
+import te from "lodash/noop";
+import { Box as oe } from "@mui/material";
+import { translate as re } from "@arcblock/ux/lib/Locale/util";
+import { getMaster as D, getCurrentApp as ne } from "@arcblock/ux/lib/Util/federated";
+import { getDIDMotifInfo as se } from "@arcblock/did-motif";
+import { isEthereumDid as ie, getDIDColor as pe } from "@arcblock/ux/lib/Util";
+import ce from "../hooks/use-apps.js";
+import { SessionContext as ue } from "../../Session/context.js";
+import de from "../assets/locale.js";
+const R = V({
   isWalletWebview: !1,
   isMobile: !1,
   matchSmallScreen: !1,
   blocklet: null
-}), { Provider: ue, Consumer: Ie } = T;
-function de({
-  children: W,
+}), { Provider: ae, Consumer: We } = R;
+function le({
+  children: T,
   blocklet: p,
-  masterBlocklet: h = void 0,
+  masterBlocklet: P = void 0,
   action: d,
   extraParams: t = {},
   locale: a = "en",
-  testOnlyBorderColor: f = void 0,
+  testOnlyBorderColor: l = void 0,
   ...j
 }) {
-  const P = X(), [l, q] = x([]), [m, z] = x(""), J = s(() => new Map(l.map((e) => [e.name, e])), [l]), N = S((e) => J.get(e)), U = Y(m), k = S((e, i = {}) => te(ce, e, a, "en", i)), g = O(pe), o = Z({
+  const w = Z(), [f, q] = S([]), [z, J] = S(!1), [m, N] = S(""), U = i(() => new Map(f.map((e) => [e.name, e])), [f]), k = h((e) => U.get(e)), B = _(m), L = h((e, s = {}) => re(de, e, a, "en", s)), g = E(ue), o = $({
     sourceAppPid: void 0,
     status: "created",
     autoActiveWebview: !0,
     deeplink: void 0,
     chooseMethod: "",
-    retryConnect: $
-  }), B = D({
+    retryConnect: te
+  }), F = W({
     cancelCount: 0
-  }), n = V(), { appInfoList: w, autoGenerateSourceAppPid: A, canSwitchApp: b } = se({
+  }), n = Y(), { appInfoList: b, autoGenerateSourceAppPid: A, canSwitchApp: v } = ce({
     blocklet: p,
     connectState: o,
     action: d,
     sourceAppPid: t?.sourceAppPid,
     enableSwitchApp: t?.forceSwitch || t?.enableSwitchApp
-  }), v = D(null), C = _(v), M = s(() => (C?.width || 0) < 500, [C?.width]), c = s(() => {
-    if (b)
+  }), C = W(null), M = ee(C), y = i(() => (M?.width || 0) < 500, [M?.width]), c = i(() => {
+    if (v)
       return {
         ...t,
-        sourceAppPid: E(o.sourceAppPid) ? A : o.sourceAppPid
+        sourceAppPid: x(o.sourceAppPid) ? A : o.sourceAppPid
       };
-    const e = R(p)?.appPid, i = R(globalThis.blocklet)?.appPid;
-    return g?.session?.user && (e === i || !e) ? E(t?.sourceAppPid) ? {
+    const e = D(p)?.appPid, s = D(globalThis.blocklet)?.appPid;
+    return g?.session?.user && (e === s || !e) ? x(t?.sourceAppPid) ? {
       ...t,
       sourceAppPid: g.session.user?.sourceAppPid
     } : t : {
@@ -59,70 +59,73 @@ function de({
       sourceAppPid: A
     };
   }, [
-    b,
+    v,
     t,
     o.sourceAppPid,
     d,
     A,
     g?.session?.user
-  ]), L = s(() => {
+  ]), G = i(() => {
     const e = window?.navigator?.userAgent;
     return e.indexOf("Edge") > -1 || e.indexOf("Edg") > -1 ? "edge" : e.indexOf("Chrome") > -1 ? "chrome" : "unknown";
   }, []);
-  Q(() => {
+  X(() => {
     o.sourceAppPid = c.sourceAppPid;
   }, [c.sourceAppPid]);
-  const F = S((e) => {
+  const H = h((e) => {
     o.status = e || "created";
-  }), u = globalThis.blocklet ? oe(p) : globalThis.env, y = s(() => {
-    if (f)
-      return f;
-    const e = u.appPid, i = ne(e), H = i ? void 0 : re(e);
-    return i ? ie(e) : H.color;
-  }, [u.appId, f]), G = s(() => ({
+  }), u = globalThis.blocklet ? ne(p) : globalThis.env, I = i(() => {
+    if (l)
+      return l;
+    const e = u.appPid, s = ie(e), Q = s ? void 0 : se(e);
+    return s ? pe(e) : Q.color;
+  }, [u.appId, l]), K = i(() => ({
     isWalletWebview: n.wallet || n.arcSphere,
     isMobile: n.mobile.any,
-    matchSmallScreen: M,
+    matchSmallScreen: y,
     connectState: o,
-    staticState: B,
+    staticState: F,
     reactiveState: o,
-    appInfoList: w,
+    appInfoList: b,
     extraParams: c,
     blocklet: p,
-    masterBlocklet: h,
-    browserBrand: L,
+    masterBlocklet: P,
+    browserBrand: G,
     currentAppInfo: u,
-    currentAppColor: y,
-    t: k,
+    currentAppColor: I,
+    t: L,
     locale: a,
     action: d,
-    changeStatus: F,
-    getPlugin: N,
-    latestActivePlugin: U,
-    plugins: l,
+    changeStatus: H,
+    getPlugin: k,
+    latestActivePlugin: B,
+    plugins: f,
     setPlugins: q,
     selectedPlugin: m,
-    setSelectedPlugin: z,
-    forceUpdate: P
+    setSelectedPlugin: N,
+    forceUpdate: w,
+    // 控制钱包登录的显示
+    showWalletOptions: z,
+    setShowWalletOptions: J
   }), [
     n.wallet,
     n.arcSphere,
     n.mobile.any,
-    M,
+    y,
     JSON.stringify(o),
-    JSON.stringify(w),
+    JSON.stringify(b),
     JSON.stringify(c),
     p,
-    h,
+    P,
     a,
     m,
-    P,
+    w,
     u,
-    y
+    I
   ]);
-  return /* @__PURE__ */ I(ue, { value: G, children: /* @__PURE__ */ I(ee, { ...j, ref: v, children: W }) });
+  return /* @__PURE__ */ O(ae, { value: K, children: /* @__PURE__ */ O(oe, { ...j, ref: C, children: T }) });
 }
-de.propTypes = {
+le.propTypes = {
   children: r.any.isRequired,
   blocklet: r.object.isRequired,
   masterBlocklet: r.object,
@@ -132,11 +135,11 @@ de.propTypes = {
   testOnlyBorderColor: r.string
 };
 function xe() {
-  return O(T);
+  return E(R);
 }
 export {
-  Ie as StateConsumer,
-  T as StateContext,
-  de as StateProvider,
+  We as StateConsumer,
+  R as StateContext,
+  le as StateProvider,
   xe as useStateContext
 };