@arcblock/did-connect-react 3.3.4 → 3.3.6

package/lib/Connect/components/back-button.js

@@ -1,24 +1,25 @@
-import { jsx as e } from "react/jsx-runtime";
-import i from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+import s from "prop-types";
 import o from "../assets/locale.js";
-import { useStateContext as s } from "../contexts/state.js";
-import c from "./action-button.js";
-function a({ onClick: t }) {
-  const { locale: r } = s(), n = o[r] || o.en;
-  return /* @__PURE__ */ e(
-    c,
+import { useStateContext as c } from "../contexts/state.js";
+import a from "./action-button.js";
+function p({ onClick: t, ...r }) {
+  const { locale: n } = c(), e = o[n] || o.en;
+  return /* @__PURE__ */ i(
+    a,
     {
       onClick: t,
       sx: {
         color: "text.secondary"
       },
-      children: n.back
+      ...r,
+      children: e.back
     }
   );
 }
-a.propTypes = {
-  onClick: i.func.isRequired
+p.propTypes = {
+  onClick: s.func.isRequired
 };
 export {
-  a as default
+  p as default
 };

package/lib/Connect/components/login-item/connect-provider-list.js

@@ -1,157 +1,170 @@
-import { jsx as s, jsxs as oe } from "react/jsx-runtime";
-import t from "prop-types";
-import { Box as p } from "@mui/material";
-import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_ICON_SIZE as h, LOGIN_PROVIDER_NAME as te } from "@arcblock/ux/lib/Util/constant";
-import { checkSameProtocol as ne, getWebWalletUrl as re } from "@arcblock/ux/lib/Util/wallet";
+import { jsx as l, jsxs as ie } from "react/jsx-runtime";
+import o from "prop-types";
+import { Box as h } from "@mui/material";
+import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_ICON_SIZE as g, LOGIN_PROVIDER_NAME as le } from "@arcblock/ux/lib/Util/constant";
+import { getWebWalletUrl as se } from "@arcblock/ux/lib/Util/wallet";
 import u from "lodash/noop";
-import { useMemoizedFn as g } from "ahooks";
-import I from "js-cookie";
-import { detectWalletExtension as ie, getCookieOptions as se } from "@arcblock/ux/lib/Util";
-import { useRef as L, useEffect as le } from "react";
-import { mergeSx as ce } from "@arcblock/ux/lib/Util/style";
-import ae from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { GA_LAST_LOGIN_METHOD as d } from "@arcblock/ux/lib/withTracker/constant";
-import { translate as me } from "@arcblock/ux/lib/Locale/util";
-import de from "@arcblock/ux/lib/Empty";
-import { useBrowser as pe } from "@arcblock/react-hooks";
-import he from "./mobile-login-item.js";
-import ue from "./web-login-item.js";
-import ge from "./login-method-item.js";
-import { useOAuth as fe } from "../../../OAuth/context.js";
-import { useStateContext as ye } from "../../contexts/state.js";
-import { getAppId as Ie, logger as Le, getApiErrorMessage as xe } from "../../../utils.js";
-import Ae from "./passkey-login-item.js";
-import { usePasskey as Ee } from "../../../Passkey/context.js";
+import { useMemoizedFn as c } from "ahooks";
+import E from "js-cookie";
+import { getCookieOptions as ae } from "@arcblock/ux/lib/Util";
+import { useRef as b, useEffect as ce } from "react";
+import { mergeSx as me } from "@arcblock/ux/lib/Util/style";
+import de from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { GA_LAST_LOGIN_METHOD as p } from "@arcblock/ux/lib/withTracker/constant";
+import { translate as pe } from "@arcblock/ux/lib/Locale/util";
+import he from "@arcblock/ux/lib/Empty";
+import { useBrowser as ge } from "@arcblock/react-hooks";
+import ue from "./mobile-login-item.js";
+import fe from "./web-login-item.js";
+import ye from "./login-method-item.js";
+import Le from "./wallet-login-options.js";
+import { useOAuth as Ie } from "../../../OAuth/context.js";
+import { useStateContext as Ce } from "../../contexts/state.js";
+import { getAppId as xe, logger as Ae, getApiErrorMessage as Ee } from "../../../utils.js";
+import be from "./passkey-login-item.js";
+import { usePasskey as Me } from "../../../Passkey/context.js";
 import "../../../Passkey/actions.js";
-import Ce from "../../plugins/email/index.js";
+import ve from "../../plugins/email/index.js";
 import Pe from "../../assets/locale.js";
-function ve({
-  onSuccess: x = u,
-  onError: A = u,
+function _e({
+  onSuccess: M = u,
+  onError: v = u,
   size: m = "small",
   tokenState: n,
-  webWalletUrl: E = re(),
-  tokenKey: U,
-  passkeyBehavior: C = "none",
+  webWalletUrl: P = se(),
+  tokenKey: _,
+  passkeyBehavior: w = "none",
   onReset: f = u,
   providerList: y = [],
-  slotProps: B = {},
-  disableSwitchApp: P = !1,
+  slotProps: V = {},
+  disableSwitchApp: L = !1,
   forceUpdate: K = u,
-  magicToken: v = void 0,
-  baseUrl: V = "/",
-  customItems: q = []
+  magicToken: O = void 0,
+  baseUrl: Y = "/",
+  customItems: H = [],
+  qrcode: Z = null
 }) {
-  const _ = L(null), M = L(null), b = L(null), w = pe(), Y = ne(E), O = ie(), { loginOAuth: H, logoutOAuth: Z, t: $, oauthState: l } = fe(), { passkeyState: R } = Ee(), { extraParams: T, locale: k, connectState: i, plugins: S, setPlugins: z, setSelectedPlugin: J, getPlugin: j } = ye(), Q = g((e, o = {}) => me(Pe, e, k, "en", o)), N = g(async (e) => {
-    localStorage.setItem(d, e.provider), n.reset(), l.reset({
+  const I = b(null), C = b(null), R = b(null), x = ge(), { loginOAuth: $, logoutOAuth: J, t: Q, oauthState: s } = Ie(), { passkeyState: T } = Me(), {
+    extraParams: k,
+    locale: W,
+    connectState: i,
+    plugins: j,
+    setPlugins: X,
+    setSelectedPlugin: z,
+    getPlugin: N,
+    showWalletOptions: A,
+    setShowWalletOptions: D
+  } = Ce(), ee = c((e, t = {}) => pe(Pe, e, W, "en", t)), F = c(async (e) => {
+    localStorage.setItem(p, e.provider), n.reset(), s.reset({
       status: "scanned"
-    }), R.reset(), i.chooseMethod = e.provider;
-    const o = T?.sourceAppPid;
+    }), T.reset(), i.chooseMethod = e.provider;
+    const t = k?.sourceAppPid;
     try {
-      l.loading = !0, l.status = "scanned";
-      const c = await H(e, {
+      s.loading = !0, s.status = "scanned";
+      const a = await $(e, {
         action: n.action,
-        ...T
-      }), a = se({ returnDomain: !1 });
-      I.remove("connected_did", a), I.remove("connected_pk", a), I.remove("connected_wallet_os", a), c?.sessionToken && (await x(
+        ...k
+      }), d = ae({ returnDomain: !1 });
+      E.remove("connected_did", d), E.remove("connected_pk", d), E.remove("connected_wallet_os", d), a?.sessionToken && (await M(
         {
-          ...c,
+          ...a,
           encrypted: !1
         },
-        (ee) => ee,
+        (re) => re,
         {
-          sourceAppPid: o,
-          connected_app: Ie(n.appInfo, n.memberAppInfo)
+          sourceAppPid: t,
+          connected_app: xe(n.appInfo, n.memberAppInfo)
         }
-      ), l.loading = !1, l.status = "succeed");
-    } catch (c) {
-      Le.error(`Failed login OAuth: ${e.provider}`, c);
-      const a = xe(c, $("loginOAuthFailed"));
-      l.loading = !1, l.error = a, l.status = "error", await Z({ provider: e.provider }), A(new Error(a));
+      ), s.loading = !1, s.status = "succeed");
+    } catch (a) {
+      Ae.error(`Failed login OAuth: ${e.provider}`, a);
+      const d = Ee(a, Q("loginOAuthFailed"));
+      s.loading = !1, s.error = d, s.status = "error", await J({ provider: e.provider }), v(new Error(d));
     }
-  }), D = g(async () => {
+  }), S = c(async () => {
     n.reset(), await f(), n.status = "created", i.chooseMethod = "wallet";
-  }), W = y.some((e) => e.provider === r.EMAIL), F = Ce({ baseUrl: V }), X = g(() => {
-    if (v && y.some((e) => e.name === r.EMAIL) && S.some((e) => e.name === r.EMAIL)) {
-      const e = j(r.EMAIL);
-      e.state.status === "idle" && (localStorage.setItem(d, "email"), e.state.reset(), e.state.magicToken = v, i.chooseMethod = r.EMAIL, J(e), K());
+  }), B = c(async () => {
+    localStorage.setItem(p, "wallet"), n.reset(), await f(), n.status = "created", i.chooseMethod = "wallet";
+    const e = I.current?.connect;
+    i.retryConnect = () => {
+      e(S);
+    };
+  }), oe = c(() => {
+    localStorage.setItem(p, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
+    const e = C.current.connect;
+    i.retryConnect = async () => {
+      await f(), n.error = "", n.status = "scanned", e();
+    };
+  }), ne = c(() => {
+    D(!1);
+  }), G = y.some((e) => e.provider === r.EMAIL), U = ve({ baseUrl: Y }), te = c(() => {
+    if (O && y.some((e) => e.name === r.EMAIL) && j.some((e) => e.name === r.EMAIL)) {
+      const e = N(r.EMAIL);
+      e.state.status === "idle" && (localStorage.setItem(p, "email"), e.state.reset(), e.state.magicToken = O, i.chooseMethod = r.EMAIL, z(e), K());
     }
   });
-  le(() => {
+  ce(() => {
     const e = [];
-    if (W) {
-      const o = j(r.EMAIL);
-      o && o.baseUrl === F.baseUrl ? e.push(o) : e.push(F);
+    if (G) {
+      const t = N(r.EMAIL);
+      t && t.baseUrl === U.baseUrl ? e.push(t) : e.push(U);
     }
-    z(e), i.retryConnect = D, setTimeout(() => {
-      X();
+    X(e), i.retryConnect = S, setTimeout(() => {
+      te();
     }, 100);
-  }, [W]);
-  const G = y.map((e) => {
-    if (e.provider === r.WALLET) {
-      if (w.mobile.any)
-        return /* @__PURE__ */ s(
-          he,
-          {
-            ref: _,
-            tokenState: n,
-            sx: [m === "small" ? { p: 1 } : { p: 2 }],
-            locale: k,
-            tokenKey: U,
-            disableSwitchApp: P,
-            onClick: async () => {
-              localStorage.setItem(d, "wallet"), n.reset(), await f(), n.status = "created", i.chooseMethod = "wallet";
-              const o = _.current?.connect;
-              i.retryConnect = () => {
-                o(D);
-              };
-            }
-          },
-          r.WALLET
-        );
-      if ((Y || O) && (!w.mobile.any || O))
-        return /* @__PURE__ */ s(
-          ue,
-          {
-            ref: M,
-            tokenState: n,
-            webWalletUrl: E,
-            sx: [m === "small" ? { p: 1 } : { p: 2 }],
-            disableSwitchApp: P,
-            onClick: () => {
-              localStorage.setItem(d, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
-              const o = M.current.connect;
-              i.retryConnect = async () => {
-                await f(), n.error = "", n.status = "scanned", o();
-              };
-            }
-          },
-          r.WALLET
-        );
-    }
+  }, [G]);
+  const q = y.map((e) => {
+    if (e.provider === r.WALLET)
+      return x.mobile.any && !A ? /* @__PURE__ */ l(
+        ue,
+        {
+          ref: I,
+          tokenState: n,
+          sx: [m === "small" ? { p: 1 } : { p: 2 }],
+          locale: W,
+          tokenKey: _,
+          disableSwitchApp: L,
+          onClick: B
+        },
+        r.WALLET
+      ) : /* @__PURE__ */ l(
+        fe,
+        {
+          ref: C,
+          tokenState: n,
+          webWalletUrl: P,
+          sx: [m === "small" ? { p: 1 } : { p: 2 }],
+          disableSwitchApp: L,
+          autoConnect: !1,
+          onClick: () => {
+            D(!0);
+          }
+        },
+        r.WALLET
+      );
     if (e.provider === r.PASSKEY)
-      return C === "none" ? null : /* @__PURE__ */ s(
-        Ae,
+      return w === "none" ? null : /* @__PURE__ */ l(
+        be,
         {
-          ref: b,
-          onSuccess: x,
-          onError: A,
+          ref: R,
+          onSuccess: M,
+          onError: v,
           tokenState: n,
-          behavior: C,
+          behavior: w,
           sx: [m === "small" ? { p: 1 } : { p: 2 }],
           onClick: () => {
-            localStorage.setItem(d, "passkey");
-            const o = b.current.connect;
+            localStorage.setItem(p, "passkey");
+            const t = R.current.connect;
             i.chooseMethod = "passkey", i.retryConnect = () => {
-              R.verifying = !0, i.chooseMethod = "passkey", o();
+              T.verifying = !0, i.chooseMethod = "passkey", t();
             };
           },
           slotProps: {
             icon: {
               sx: {
-                fontSize: h,
+                fontSize: g,
                 "& svg": {
-                  fontSize: h,
+                  fontSize: g,
                   width: "1em",
                   height: "1em"
                 }
@@ -162,32 +175,32 @@ function ve({
         r.PASSKEY
       );
     if (e.provider === r.EMAIL) {
-      const o = S.find((c) => c.name === r.EMAIL);
-      return o ? o?.renderListItem({
-        key: o.name,
+      const t = j.find((a) => a.name === r.EMAIL);
+      return t ? t?.renderListItem({
+        key: t.name,
         sx: [m === "small" ? { p: 1 } : { p: 2 }]
         // forceUpdate,
       }) : null;
     }
-    return e.type === "oauth" ? /* @__PURE__ */ s(
-      ge,
+    return e.type === "oauth" ? /* @__PURE__ */ l(
+      ye,
       {
-        title: te[e.provider],
-        icon: /* @__PURE__ */ s(
-          ae,
+        title: le[e.provider],
+        icon: /* @__PURE__ */ l(
+          de,
           {
             provider: e.provider,
             sx: {
               transform: "scale(0.95)",
-              width: h,
-              height: h,
+              width: g,
+              height: g,
               color: "text.primary"
             }
           }
         ),
         onClick: () => {
-          N(e), i.retryConnect = () => {
-            N(e);
+          F(e), i.retryConnect = () => {
+            F(e);
           };
         },
         sx: [m === "small" ? { p: 1.2 } : { p: 2 }]
@@ -195,27 +208,42 @@ function ve({
       e.provider
     ) : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ s(p, { className: "did-connect__choose", sx: ce({ flex: 1 }, B?.root?.sx), children: /* @__PURE__ */ s(
-    p,
+  return /* @__PURE__ */ l(h, { className: "did-connect__choose", sx: me({ flex: 1 }, V?.root?.sx), children: /* @__PURE__ */ l(
+    h,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         gap: 2
       },
-      children: /* @__PURE__ */ oe(
-        p,
+      children: /* @__PURE__ */ ie(
+        h,
         {
           sx: [
             {
               display: "flex",
               flexDirection: "column",
-              gap: 1.5
+              ...A && !x.mobile.any ? { alignItems: "center", gap: 0 } : { gap: 1.5 }
             }
           ],
           children: [
-            /* @__PURE__ */ s(
-              p,
+            A && !x.mobile.any ? /* @__PURE__ */ l(
+              Le,
+              {
+                qrcode: Z,
+                tokenState: n,
+                webWalletUrl: P,
+                size: m,
+                disableSwitchApp: L,
+                tokenKey: _,
+                walletLoginRef: I,
+                webLoginRef: C,
+                onMobileLoginClick: B,
+                onWebLoginClick: oe,
+                onBack: ne
+              }
+            ) : /* @__PURE__ */ l(
+              h,
               {
                 sx: {
                   display: "grid",
@@ -260,8 +288,8 @@ function ve({
                     }
                   }
                 },
-                children: G.length > 0 ? G : /* @__PURE__ */ s(
-                  de,
+                children: q.length > 0 ? q : /* @__PURE__ */ l(
+                  he,
                   {
                     className: "arc-login-item",
                     sx: {
@@ -269,35 +297,36 @@ function ve({
                         textAlign: "center"
                       }
                     },
-                    children: Q("noAuthenticationProvider")
+                    children: ee("noAuthenticationProvider")
                   }
                 )
               }
             ),
-            q.map((e) => e || null)
+            H.map((e) => e || null)
           ]
         }
       )
     }
   ) });
 }
-ve.propTypes = {
-  onSuccess: t.func,
-  onError: t.func,
-  size: t.oneOf(["small", "normal", "large"]),
-  tokenState: t.object.isRequired,
-  webWalletUrl: t.string,
-  tokenKey: t.string.isRequired,
-  passkeyBehavior: t.oneOf(["none", "both", "only-existing", "only-new"]),
-  onReset: t.func,
-  providerList: t.array,
-  slotProps: t.object,
-  disableSwitchApp: t.bool,
-  forceUpdate: t.func,
-  magicToken: t.string,
-  baseUrl: t.string,
-  customItems: t.arrayOf(t.node)
+_e.propTypes = {
+  onSuccess: o.func,
+  onError: o.func,
+  size: o.oneOf(["small", "normal", "large"]),
+  tokenState: o.object.isRequired,
+  webWalletUrl: o.string,
+  tokenKey: o.string.isRequired,
+  passkeyBehavior: o.oneOf(["none", "both", "only-existing", "only-new"]),
+  onReset: o.func,
+  providerList: o.array,
+  slotProps: o.object,
+  disableSwitchApp: o.bool,
+  forceUpdate: o.func,
+  magicToken: o.string,
+  baseUrl: o.string,
+  customItems: o.arrayOf(o.node),
+  qrcode: o.node
 };
 export {
-  ve as default
+  _e as default
 };

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

@@ -1,36 +1,37 @@
 import { jsx as m } from "react/jsx-runtime";
 import n from "prop-types";
-import { CircularProgress as D } from "@mui/material";
-import { useReactive as E, useCreation as T, useMemoizedFn as a } from "ahooks";
-import W from "@arcblock/bridge";
-import { useBrowser as _ } from "@arcblock/react-hooks";
-import N from "lodash/noop";
-import { useImperativeHandle as q } from "react";
-import { mergeSx as F } from "@arcblock/ux/lib/Util/style";
-import M from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { LOGIN_PROVIDER_ICON_SIZE as p, LOGIN_PROVIDER as j } from "@arcblock/ux/lib/Util/constant";
-import { useStateContext as z } from "../../contexts/state.js";
-import G from "./login-method-item.js";
+import { CircularProgress as T } from "@mui/material";
+import { useReactive as E, useCreation as W, useMemoizedFn as a } from "ahooks";
+import _ from "@arcblock/bridge";
+import { useBrowser as N } from "@arcblock/react-hooks";
+import q from "lodash/noop";
+import { useImperativeHandle as F } from "react";
+import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
+import j from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER_ICON_SIZE as p, LOGIN_PROVIDER as z } from "@arcblock/ux/lib/Util/constant";
+import { useStateContext as G } from "../../contexts/state.js";
+import J from "./login-method-item.js";
 import { logger as b } from "../../../utils.js";
-import J from "../../hooks/auth-url.js";
-function K({
-  ref: w = null,
+import K from "../../hooks/auth-url.js";
+function V({
+  isTablet: w = !1,
+  ref: C = null,
   tokenState: e,
-  locale: C,
-  tokenKey: P,
-  onClick: y = N,
-  disableSwitchApp: R = !1,
+  locale: P,
+  tokenKey: y,
+  onClick: R = q,
+  disableSwitchApp: A = !1,
   ...f
 }) {
   const l = E({
     loading: !1
-  }), { isWalletWebview: d } = z(), A = "DID Wallet", c = _(), h = new URL(window.location.href), L = J({ disableSwitchApp: R, tokenState: e }), u = T(() => {
+  }), { isWalletWebview: d } = G(), L = "DID Wallet", c = N(), h = new URL(window.location.href), x = K({ disableSwitchApp: A, tokenState: e }), u = W(() => {
     if (!e.url)
       return "";
     h.searchParams.set("tokenKey", e.token);
-    const o = new URL(L);
-    c.wallet || (o.searchParams.set("callback", encodeURIComponent(h)), o.searchParams.set("callback_delay", 1500)), o.searchParams.set("locale", C);
-    const g = new TextEncoder(), v = o.href.length;
+    const o = new URL(x);
+    c.wallet || (o.searchParams.set("callback", encodeURIComponent(h)), o.searchParams.set("callback_delay", 1500)), o.searchParams.set("locale", P);
+    const g = new TextEncoder(), D = o.href.length;
     let r = "", i = "";
     try {
       if (e.appInfo) {
@@ -41,41 +42,41 @@ function K({
         const t = g.encode(JSON.stringify(e.memberAppInfo));
         i = btoa(String.fromCharCode(...t));
       }
-      if (v + 8 + r.length + 14 + i.length > 2e3)
+      if (D + 8 + r.length + 14 + i.length > 2e3)
         throw b.warn("URL too long, drop appInfo & memberAppInfo", { appInfo: r, memberAppInfo: i }), new Error("URL too long");
       i ? r && (o.searchParams.set("appInfo", r), o.searchParams.set("memberAppInfo", i)) : r && o.searchParams.set("appInfo", r);
     } catch (t) {
       b.warn("Failed to convert appInfo & memberAppInfo", t);
     }
     return o.href.replace(/^https?:\/\//, "abt://");
-  }, [P, e.token, e.appInfo, e.memberAppInfo, e.url]), x = a(() => {
+  }, [y, e.token, e.appInfo, e.memberAppInfo, e.url]), O = a(() => {
     l.loading = !0, setTimeout(() => {
-      W.call("authAction", { action: "auth", deepLink: u });
+      _.call("authAction", { action: "auth", deepLink: u });
     }, 600), setTimeout(() => {
       l.loading = !1;
     }, 2e3);
-  }), O = a(() => {
+  }), U = a(() => {
     e.checking = !0, e.status = "scanned";
   }), s = {};
   !d && c.mobile.any && (s.component = "a", s.href = u), e.url || (s.sx = {
     cursor: "not-allowed"
   });
   const I = a((o) => {
-    e.url && (d ? x() : c.mobile.any ? O() : o());
-  }), U = a(() => {
-    I(y);
+    e.url && (d ? O() : c.mobile.any || w ? U() : o());
+  }), v = a(() => {
+    I(R);
   });
-  return q(w, () => ({
+  return F(C, () => ({
     connect: I
   })), /* @__PURE__ */ m(
-    G,
+    J,
     {
       ...f,
       ...s,
-      sx: F(f?.sx, s?.sx),
-      title: A,
+      sx: M(f?.sx, s?.sx),
+      title: L,
       icon: l.loading || !e.url ? /* @__PURE__ */ m(
-        D,
+        T,
         {
           color: "primary",
           size: p,
@@ -86,9 +87,9 @@ function K({
           }
         }
       ) : /* @__PURE__ */ m(
-        M,
+        j,
         {
-          provider: j.DID_WALLET,
+          provider: z.DID_WALLET,
           sx: {
             width: p,
             height: p,
@@ -97,18 +98,19 @@ function K({
         }
       ),
       iconScale: 1,
-      onClick: U
+      onClick: v
     }
   );
 }
-K.propTypes = {
+V.propTypes = {
   tokenState: n.object.isRequired,
   tokenKey: n.string.isRequired,
   locale: n.string.isRequired,
   onClick: n.func,
   disableSwitchApp: n.bool,
-  ref: n.any
+  ref: n.any,
+  isTablet: n.bool
 };
 export {
-  K as default
+  V as default
 };