@arcblock/did-connect-react 3.3.5 → 3.3.7

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

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

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

@@ -1,32 +1,32 @@
-import { jsxs as c, Fragment as f, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, Fragment as d, 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 { LOGIN_PROVIDER as p } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as C, getWebWalletUrl as k } 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";
+import P from "./web-login-item.js";
+import v from "../back-button.js";
+import { useStateContext as B } from "../../contexts/state.js";
 function E({
-  qrcode: p,
+  qrcode: u,
   tokenState: r,
-  webWalletUrl: n = C(),
+  webWalletUrl: n = k(),
   size: l = "small",
   disableSwitchApp: m = !1,
-  tokenKey: u,
-  walletLoginRef: b = null,
-  webLoginRef: x = null,
-  onMobileLoginClick: g,
-  onWebLoginClick: h,
-  onBack: L
+  tokenKey: b,
+  walletLoginRef: x = null,
+  webLoginRef: g = null,
+  onMobileLoginClick: h,
+  onWebLoginClick: L,
+  onBack: s
 }) {
-  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: [
+  const { locale: w } = B(), i = j(), y = C(n), a = W(), c = q(() => i.mobile.tablet || !i.mobile.any && window?.navigator?.maxTouchPoints > 0, [i.mobile.tablet, i.mobile.any]);
+  return /* @__PURE__ */ f(d, { children: [
+    u,
+    /* @__PURE__ */ f(t, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }, children: [
       /* @__PURE__ */ e(t, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
         R,
         {
@@ -57,37 +57,37 @@ function E({
               }
             }
           },
-          children: a ? /* @__PURE__ */ e(
+          children: c ? /* @__PURE__ */ e(
             T,
             {
-              ref: b,
+              ref: x,
               tokenState: r,
-              isTablet: a,
+              isTablet: c,
               sx: [l === "small" ? { p: 1 } : { p: 2 }],
               locale: w,
-              tokenKey: u,
+              tokenKey: b,
               disableSwitchApp: m,
-              onClick: g
+              onClick: h
             },
-            d.WALLET
+            p.WALLET
           ) : (
             // eslint-disable-next-line react/jsx-no-useless-fragment
-            /* @__PURE__ */ e(f, { children: (y || s) && (!i.mobile.any || s) ? /* @__PURE__ */ e(
-              B,
+            /* @__PURE__ */ e(d, { children: (y || a) && (!i.mobile.any || a) ? /* @__PURE__ */ e(
+              P,
               {
-                ref: x,
+                ref: g,
                 tokenState: r,
                 webWalletUrl: n,
                 sx: [l === "small" ? { p: 1 } : { p: 2 }],
                 disableSwitchApp: m,
-                onClick: h
+                onClick: L
               },
-              d.WALLET
+              p.WALLET
             ) : null })
           )
         }
       ),
-      /* @__PURE__ */ e(P, { variant: "text", onClick: L })
+      s && /* @__PURE__ */ e(v, { variant: "text", onClick: s })
     ] })
   ] });
 }

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.3.5",
+  "version": "3.3.7",
   "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.3.5",
+    "@arcblock/bridge": "3.3.7",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.5",
-    "@arcblock/react-hooks": "3.3.5",
+    "@arcblock/icons": "3.3.7",
+    "@arcblock/react-hooks": "3.3.7",
     "@arcblock/ws": "^1.27.16",
     "@blocklet/constant": "^1.17.6",
     "@fontsource/lexend": "^5.2.9",
@@ -81,5 +81,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "757fbba540967c8552f9c30fc64fdce00a8be222"
+  "gitHead": "cd0e3b812192ce054be488bcb60ed3f44e81fdff"
 }

package/src/Connect/components/login-item/connect-provider-list.jsx

@@ -3,7 +3,7 @@ import { Box } from '@mui/material';
 import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 import { getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
-import { useMemoizedFn } from 'ahooks';
+import { useMemoizedFn, useCreation } from 'ahooks';
 import Cookie from 'js-cookie';
 import { getCookieOptions } from '@arcblock/ux/lib/Util';
 import { useEffect, useRef } from 'react';
@@ -153,6 +153,16 @@ export default function ConnectProviderList({
     setShowWalletOptions(false);
   });
 
+  const onlyWalletProvider = useCreation(() => {
+    return providerList.length === 1 && providerList[0].provider === LOGIN_PROVIDER.WALLET;
+  }, [providerList]);
+
+  useEffect(() => {
+    if (onlyWalletProvider && !browser.mobile.any && !showWalletOptions) {
+      setShowWalletOptions(true);
+    }
+  }, [onlyWalletProvider, browser.mobile.any, setShowWalletOptions, showWalletOptions]);
+
   const showEmailLogin = providerList.some((p) => p.provider === LOGIN_PROVIDER.EMAIL);
 
   const emailPlugin = useEmailPlugin({ baseUrl });
@@ -339,7 +349,7 @@ export default function ConnectProviderList({
               webLoginRef={webLoginRef}
               onMobileLoginClick={handleMobileLoginClick}
               onWebLoginClick={handleWebLoginClick}
-              onBack={handleWalletLoginBack}
+              onBack={onlyWalletProvider ? undefined : handleWalletLoginBack}
             />
           ) : (
             <Box

package/src/Connect/components/login-item/wallet-login-options.jsx

@@ -95,7 +95,7 @@ export default function WalletLoginOptions({
           )}
         </Box>
 
-        <BackButton variant="text" onClick={onBack} />
+        {onBack && <BackButton variant="text" onClick={onBack} />}
       </Box>
     </>
   );