@arcblock/did-connect-react 3.4.0 → 3.4.2

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

@@ -1,35 +1,41 @@
-import { jsxs as t, jsx as e, Fragment as g } from "react/jsx-runtime";
-import { useTheme as y, Box as r, Tooltip as u, Typography as s } from "@mui/material";
-import { Icon as c } from "@iconify/react";
-import { isValidElement as _ } from "react";
+import { jsxs as i, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { useTheme as b, Box as t, Tooltip as _, Typography as a } from "@mui/material";
+import { Icon as p } from "@iconify/react";
+import { isValidElement as I } from "react";
 import o from "prop-types";
-import { mergeSx as m } from "@arcblock/ux/lib/Util/style";
-import { LOGIN_PROVIDER_ICON_SIZE as p } from "@arcblock/ux/lib/Util/constant";
-import I from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
-function b({
-  title: n,
-  description: a = null,
-  icon: i,
-  iconScale: d = 0.95,
-  slotProps: f = {},
-  mode: h = "normal",
-  ...l
+import S from "lodash/noop";
+import { mergeSx as d } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER_ICON_SIZE as f } from "@arcblock/ux/lib/Util/constant";
+import N from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
+function R({
+  isLatest: r = !1,
+  title: l,
+  description: s = null,
+  icon: n,
+  iconScale: h = 0.95,
+  slotProps: g = {},
+  mode: x = "normal",
+  t: y = S,
+  ...c
 }) {
-  const x = y();
-  return /* @__PURE__ */ t(
-    r,
+  const m = b();
+  return /* @__PURE__ */ i(
+    t,
     {
-      ...l,
+      ...c,
       className: "arc-login-item",
-      sx: m(
+      sx: d(
         {
+          position: "relative",
           display: "flex",
           alignItems: "center",
           gap: 1,
           cursor: "pointer",
           p: 1.2,
           borderRadius: 1,
-          backgroundColor: "grey.50",
+          backgroundColor: r ? "grey.100" : "grey.50",
+          border: r ? "1px solid" : "none",
+          borderColor: r ? "grey.100" : "transparent",
           textDecoration: "none",
           transition: "background-color 0.5s",
           "&:hover, &:active, &.did-connect__choose-item__active": {
@@ -48,40 +54,40 @@ function b({
             }
           }
         },
-        l?.sx
+        c?.sx
       ),
       children: [
-        /* @__PURE__ */ e(u, { title: n, children: /* @__PURE__ */ e(
-          r,
+        /* @__PURE__ */ e(_, { title: l, children: /* @__PURE__ */ e(
+          t,
           {
             className: "arc-login-item__icon",
-            sx: m(
+            sx: d(
               {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
                 color: "text.primary"
               },
-              f?.icon?.sx
+              g?.icon?.sx
             ),
-            children: _(i) ? i : /* @__PURE__ */ e(
-              r,
+            children: I(n) ? n : /* @__PURE__ */ e(
+              t,
               {
-                component: c,
-                icon: i,
+                component: p,
+                icon: n,
                 sx: {
-                  transform: `scale(${d})`,
-                  width: p,
-                  height: p
+                  transform: `scale(${h})`,
+                  width: f,
+                  height: f
                 }
               }
             )
           }
         ) }),
-        h === "normal" ? /* @__PURE__ */ t(g, { children: [
-          /* @__PURE__ */ t(r, { className: "arc-login-item__body", sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
+        x === "normal" ? /* @__PURE__ */ i(u, { children: [
+          /* @__PURE__ */ i(t, { className: "arc-login-item__body", sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
             /* @__PURE__ */ e(
-              s,
+              a,
               {
                 sx: {
                   fontSize: 14,
@@ -89,28 +95,36 @@ function b({
                   color: "text.primary",
                   whiteSpace: "nowrap"
                 },
-                children: n
+                children: l
               }
             ),
-            a ? /* @__PURE__ */ e(
-              s,
+            s ? /* @__PURE__ */ e(
+              a,
               {
                 sx: {
                   color: "text.secondary",
                   fontSize: 12,
                   lineHeight: 1
                 },
-                children: a
+                children: s
               }
             ) : null
           ] }),
-          /* @__PURE__ */ e(
-            c,
+          r ? /* @__PURE__ */ e(
+            a,
+            {
+              component: "span",
+              className: "latest-badge",
+              style: { color: m.palette.text.secondary, fontSize: 11 },
+              children: y("lastUsed")
+            }
+          ) : /* @__PURE__ */ e(
+            p,
             {
               className: "other-item-icon",
-              icon: I,
+              icon: N,
               fontSize: "1.3rem",
-              color: x.palette.primary.main
+              color: m.palette.primary.main
             }
           )
         ] }) : null
@@ -118,14 +132,16 @@ function b({
     }
   );
 }
-b.propTypes = {
+R.propTypes = {
   title: o.string.isRequired,
   description: o.string,
   icon: o.any.isRequired,
   iconScale: o.number,
   slotProps: o.object,
-  mode: o.oneOf(["mini", "simple", "normal"])
+  mode: o.oneOf(["mini", "simple", "normal"]),
+  isLatest: o.bool,
+  t: o.func
 };
 export {
-  b as default
+  R as default
 };

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

@@ -1,34 +1,36 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import e from "prop-types";
-import { useRef as a, useImperativeHandle as l } from "react";
-import { useMemoizedFn as d } from "ahooks";
-import y from "../../../Passkey/actions.js";
-import { getAppId as A } from "../../../utils.js";
-import { useStateContext as P } from "../../contexts/state.js";
-function x({ ref: t = null, onSuccess: p, tokenState: o, behavior: n = "none", ...c }) {
-  const { extraParams: r } = P(), s = a(null), i = d(
-    (m) => p(
+import { useRef as l, useImperativeHandle as d } from "react";
+import { useMemoizedFn as y } from "ahooks";
+import { LOGIN_PROVIDER as P } from "@arcblock/ux/lib/Util/constant";
+import A from "../../../Passkey/actions.js";
+import { getAppId as I } from "../../../utils.js";
+import { useStateContext as R } from "../../contexts/state.js";
+function x({ ref: p = null, onSuccess: i, tokenState: o, behavior: n = "none", ...c }) {
+  const { extraParams: r, lastLoginMethod: t } = R(), s = l(null), m = y(
+    (f) => i(
       {
-        ...m,
+        ...f,
         encrypted: !1
       },
       (u) => u,
       {
         sourceAppPid: r?.sourceAppPid,
-        connected_app: A(o.appInfo, o.memberAppInfo)
+        connected_app: I(o.appInfo, o.memberAppInfo)
       }
     )
   );
-  return l(t, () => ({
+  return d(p, () => ({
     connect: s.current.click
-  })), n === "none" ? null : /* @__PURE__ */ f(
-    y,
+  })), n === "none" ? null : /* @__PURE__ */ a(
+    A,
     {
       ...c,
       ref: s,
+      isLatest: t && t === P.PASSKEY,
       action: o.action,
       behavior: n,
-      onSuccess: i,
+      onSuccess: m,
       extraParams: r
     }
   );

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

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