@arcblock/did-connect-react 3.3.1 → 3.3.2

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

@@ -1,68 +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 R, useMemoizedFn as c, useCreation as p } from "ahooks";
-import { detectWalletExtension as w, openWebWallet as L } from "@arcblock/ux/lib/Util";
-import { mergeSx as v } from "@arcblock/ux/lib/Util/style";
-import y from "lodash/noop";
-import A from "lodash/omit";
-import { useImperativeHandle as P } from "react";
-import E from "@arcblock/ux/lib/DIDConnect/provider-icon";
-import { LOGIN_PROVIDER as T } from "@arcblock/ux/lib/Util/constant";
-import _ from "./login-method-item.js";
-import { useStateContext as O } from "../../contexts/state.js";
-import { EXT_DOWNLOAD_URL as d } from "../../../constant.js";
+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: x = null,
+  ref: g = null,
   tokenState: o,
-  locale: g = "en",
+  locale: x = "en",
   webWalletUrl: b,
-  onClick: I = y,
+  onClick: D = O,
   disableSwitchApp: h = !1,
-  ...a
+  ...f
 }) {
-  const { browserBrand: i } = O(), l = w(), t = R({
+  const { browserBrand: i } = N(), l = _(), t = L({
     loading: !1
-  }), D = U({ disableSwitchApp: h, tokenState: o }), f = c(() => {
-    t.loading = !0, L({
+  }), W = U({ disableSwitchApp: h, tokenState: o }), u = d(() => {
+    t.loading = !0, w({
       webWalletUrl: b,
-      url: D,
-      locale: g,
+      url: W,
+      locale: x,
       appInfo: o.appInfo,
       memberAppInfo: o.memberAppInfo
     })?.type === "web" ? t.loading = !1 : setTimeout(() => {
       t.loading = !1;
     }, 3e3);
-  }), s = c((e) => {
-    o.url && (I(e), e?.preventDefault(), f());
+  }), s = d((e) => {
+    o.url && (D(e), e?.preventDefault(), u());
   });
-  P(x, () => ({
-    connect: f
+  v(g, () => ({
+    connect: u
   }));
-  const n = p(() => i === "edge" ? d.edge : i === "chrome" ? d.chrome : null, [i]), u = p(() => {
+  const n = p(() => i === "edge" ? I.edge : i === "chrome" ? I.chrome : null, [i]), c = p(() => {
     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 = {
       cursor: "not-allowed"
     }), e;
-  }, [s, o.url]), W = p(() => l || n ? "DID Wallet (Extension)" : "DID Wallet (Web)", [l, n]);
+  }, [s, o.url]), R = p(() => l || n ? "DID Wallet (Extension)" : "DID Wallet (Web)", [l, n]);
   return /* @__PURE__ */ m(
-    _,
+    T,
     {
-      ...a,
-      sx: v(
+      ...f,
+      sx: E(
         {
           textDecoration: "none"
         },
-        a?.sx,
-        u.sx
+        f?.sx,
+        c.sx
       ),
-      title: W,
+      title: R,
       icon: t.loading || !o.url ? /* @__PURE__ */ m(
         C,
         {
           color: "primary",
-          size: 24,
+          size: a,
           sx: {
             "& svg": {
               transform: "scale(0.75)"
@@ -70,17 +70,17 @@ function j({
           }
         }
       ) : /* @__PURE__ */ m(
-        E,
+        A,
         {
-          width: "24px",
-          height: "24px",
-          provider: T.DID_WALLET,
-          style: {
+          sx: {
+            width: a,
+            height: a,
             transform: "scale(0.9)"
-          }
+          },
+          provider: y.DID_WALLET
         }
       ),
-      ...A(u, "sx")
+      ...P(c, "sx")
     }
   );
 }

package/lib/Connect/index.js

@@ -2,11 +2,11 @@ import { jsx as t, jsxs as p, Fragment as Le } from "react/jsx-runtime";
 import { use as Be, useRef as re, useState as Fe, useEffect as ne } from "react";
 import e from "prop-types";
 import { Box as i, Skeleton as Ne, Divider as je } from "@mui/material";
-import { useUpdate as He, useSize as Ve, useCreation as d, useMount as ie, useMemoizedFn as z, useDebounceFn as qe, usePrevious as Ye, useUpdateEffect as Ge } from "ahooks";
+import { useUpdate as He, useSize as Ve, useCreation as d, useMount as ie, useMemoizedFn as U, useDebounceFn as qe, usePrevious as Ye, useUpdateEffect as Ge } from "ahooks";
 import b from "lodash/noop";
 import Ke from "lodash/isUndefined";
 import Qe from "@arcblock/ux/lib/CloseButton";
-import { LOGIN_PROVIDER as Xe, OAUTH_PROVIDER as L, DID_CONNECT_MEDIUM_WIDTH as M, LOGIN_PROVIDER_NAME as Je, DID_CONNECT_SMALL_WIDTH as Ze } from "@arcblock/ux/lib/Util/constant";
+import { LOGIN_PROVIDER as Xe, OAUTH_PROVIDER as M, DID_CONNECT_MEDIUM_WIDTH as z, LOGIN_PROVIDER_NAME as Je, DID_CONNECT_SMALL_WIDTH as Ze } from "@arcblock/ux/lib/Util/constant";
 import $e from "@arcblock/ux/lib/QRCode";
 import { withUxTheme as et, withContainer as tt, DIDConnectFooter as ot } from "@arcblock/ux/lib/DIDConnect";
 import { useTheme as rt } from "@arcblock/ux/lib/Theme";
@@ -41,31 +41,31 @@ function se({
   checkInterval: I = xt,
   checkTimeout: v = gt * 1e3,
   prefix: D = bt,
-  tokenKey: B = "_t_",
-  locale: F = "en",
+  tokenKey: L = "_t_",
+  locale: B = "en",
   encKey: ae = "_ek_",
   autoConnect: le = !0,
-  forceConnected: N = !0,
+  forceConnected: F = !0,
   saveConnect: ue = !0,
   useSocket: de = !0,
-  allowWallet: j = !0,
+  allowWallet: N = !0,
   provider: fe = "",
   messages: u = {},
-  passkeyBehavior: H = "none",
+  passkeyBehavior: j = "none",
   webWalletUrl: me = It(),
-  enabledConnectTypes: pe = ["web", "mobile", ...Object.keys(L)],
-  extraContent: V = null,
+  enabledConnectTypes: pe = ["web", "mobile", ...Object.keys(M)],
+  extraContent: H = null,
   disableSwitchApp: T = !1,
-  magicToken: q = void 0,
+  magicToken: V = void 0,
   customItems: he = [],
   onClose: P = b,
-  onError: Y = b,
+  onError: q = b,
   onSuccess: _ = b,
-  onRecreateSession: G = b,
+  onRecreateSession: Y = b,
   setColor: xe = b
 }) {
-  const R = rt(), K = He(), be = Be(ct), ge = St(be?.session?.user), {
-    t: Q,
+  const R = rt(), G = He(), be = Be(ct), ge = St(be?.session?.user), {
+    t: K,
     staticState: Ce,
     connectState: s,
     extraParams: ye,
@@ -73,9 +73,9 @@ function se({
     currentAppColor: O,
     // 插件相关
     selectedPlugin: c,
-    blocklet: X,
+    blocklet: Q,
     masterBlocklet: we
-  } = lt(), { state: o, generate: J, cancelWhenScanned: Se } = ft({
+  } = lt(), { state: o, generate: X, cancelWhenScanned: Se } = ft({
     action: w,
     baseUrl: h,
     checkFn: S,
@@ -83,23 +83,23 @@ function se({
     checkTimeout: v,
     extraParams: ye,
     prefix: D,
-    onError: Y,
+    onError: q,
     onSuccess: _,
-    locale: F,
-    tokenKey: B,
+    locale: B,
+    tokenKey: L,
     encKey: ae,
     autoConnect: le,
-    forceConnected: N === !0 ? ge || !0 : N,
+    forceConnected: F === !0 ? ge || !0 : F,
     saveConnect: ue,
     useSocket: de,
     provider: fe
-  }), A = re(!1), Z = re(null), x = Ve(Z), W = d(() => x ? x.width < M - 50 : !0, [x, x?.width]), [$, Ie] = Fe(!1);
+  }), A = re(!1), J = re(null), x = Ve(J), Z = d(() => x ? x.width < z - 50 : !0, [x, x?.width]), [$, Ie] = Fe(!1);
   ie(() => {
-    Ie(x?.width < M - 50);
+    Ie(x?.width < z - 50);
   });
   const { oauthState: a, setBaseUrl: ve } = mt(), { passkeyState: l, setTargetAppPid: De } = ht();
   ie(() => {
-    ve(h), De(X?.appPid), o.reset(), a.reset(), l.reset();
+    ve(h), De(Q?.appPid), o.reset(), a.reset(), l.reset();
   }), ne(() => {
     xe(O);
   }, [O]);
@@ -114,12 +114,12 @@ function se({
     a.error,
     l.error,
     c?.state?.error
-  ]), C = d(() => k.includes(l.status) || k.includes(a.status) || k.includes(o.status) || k.includes(c?.state?.computedStatus), [o.status, a.status, l.status, c?.state?.computedStatus]), ee = z(async () => {
-    G(), a.reset(), l.reset(), await J(!1);
-  }), Pe = z(() => {
+  ]), C = d(() => k.includes(l.status) || k.includes(a.status) || k.includes(o.status) || k.includes(c?.state?.computedStatus), [o.status, a.status, l.status, c?.state?.computedStatus]), ee = U(async () => {
+    Y(), a.reset(), l.reset(), await X(!1);
+  }), Pe = U(() => {
     s?.retryConnect();
-  }), _e = z(() => {
-    G(), a.reset(), l.reset(), c?.state?.reset(), Ce.current.cancelCount++, Se();
+  }), _e = U(() => {
+    Y(), a.reset(), l.reset(), c?.state?.reset(), Ce.current.cancelCount++, Se();
   }), { run: Re } = qe(
     () => {
       A.current || o.status === "timeout" && (A.current = !0, o.reset(), ee(), A.current = !1);
@@ -130,14 +130,14 @@ function se({
   const Oe = d(() => Je[s.chooseMethod] || "DID Wallet", [s.chooseMethod]), { providerList: Ae, hideQRCode: m, hideChooseList: n } = kt({
     action: o.action,
     sourceAppPid: s?.sourceAppPid,
-    allowWallet: j,
-    passkeyBehavior: H,
+    allowWallet: N,
+    passkeyBehavior: j,
     mode: f,
-    blocklet: s?.sourceAppPid ? we : X,
-    isSmallView: W
+    blocklet: s?.sourceAppPid ? we : Q,
+    isSmallView: Z
   }), We = Ye(s?.sourceAppPid);
   Ge(() => {
-    Ke(We) || J();
+    Ke(We) || X();
   }, [s?.sourceAppPid]);
   const r = (y) => {
     const Me = R.spacing(y);
@@ -173,12 +173,12 @@ function se({
           onRetry: Pe,
           onClose: P,
           messages: Te,
-          locale: F,
+          locale: B,
           className: "did-connect__auth-status auth-status",
           loadingIcon: s.chooseMethod ? /* @__PURE__ */ t(nt, { provider: s.chooseMethod, sx: { color: "text.primary" } }) : null,
           chooseMethod: Oe,
           hideRetry: s.chooseMethod === "email",
-          hideBack: !!q
+          hideBack: !!V
         }
       ) })
     }
@@ -237,7 +237,7 @@ function se({
         )
       }
     );
-  }, [oe, n]), ze = d(() => n ? "column-reverse" : !m && $ ? "column" : "row", [n, $, m]), E = /* @__PURE__ */ p(
+  }, [oe, n]), ze = d(() => n ? "column-reverse" : !m && $ ? "column" : "row", [n, $, m]), W = /* @__PURE__ */ p(
     i,
     {
       className: "did-connect__body",
@@ -247,7 +247,7 @@ function se({
         justifyContent: "center",
         alignItems: "stretch",
         flex: 1,
-        gap: !m && W ? 0 : 1.5,
+        gap: !m && Z ? 0 : 1.5,
         overflow: "visible",
         px: n ? 2 : 0
       },
@@ -288,11 +288,11 @@ function se({
                           textAlign: "center"
                         },
                         children: [
-                          Q("scanWithWallet1"),
+                          K("scanWithWallet1"),
                           " ",
                           /* @__PURE__ */ t(yt, {}),
                           " ",
-                          Q("scanWithWallet2")
+                          K("scanWithWallet2")
                         ]
                       }
                     )
@@ -333,20 +333,20 @@ function se({
                       sx: [C ? { display: "none" } : {}]
                     }
                   },
-                  allowWallet: j,
+                  allowWallet: N,
                   size: m && f !== "dialog" ? "normal" : "small",
                   tokenState: o,
                   messages: u,
-                  tokenKey: B,
+                  tokenKey: L,
                   onSuccess: _,
-                  passkeyBehavior: H,
+                  passkeyBehavior: j,
                   webWalletUrl: me,
-                  extraContent: V,
+                  extraContent: H,
                   enabledConnectTypes: pe,
                   onReset: ee,
                   disableSwitchApp: T,
-                  forceUpdate: K,
-                  magicToken: q,
+                  forceUpdate: G,
+                  magicToken: V,
                   baseUrl: h,
                   customItems: he,
                   providerList: Ae
@@ -358,16 +358,16 @@ function se({
       ]
     }
   );
-  let U = E;
-  return c ? U = c.renderPlaceholder({
-    fallback: E,
-    forceUpdate: K,
+  let E = W;
+  return c ? E = c.renderPlaceholder({
+    fallback: W,
+    forceUpdate: G,
     onSuccess: _,
-    onError: Y
-  }) : U = E, /* @__PURE__ */ p(
+    onError: q
+  }) : E = W, /* @__PURE__ */ p(
     i,
     {
-      ref: Z,
+      ref: J,
       className: "did-connect__root",
       sx: {
         backgroundColor: "background.default",
@@ -378,13 +378,13 @@ function se({
         maxWidth: "100%",
         width: (
           // eslint-disable-next-line no-nested-ternary
-          f === "drawer" ? "100%" : m || C ? Ze : M
+          f === "drawer" ? "100%" : m || C ? Ze : z
         ),
         transition: "width 0.2s ease-in-out",
         margin: "auto",
-        p: W ? 2 : 3,
+        p: 3,
         pb: 0,
-        gap: 2
+        gap: 2.5
       },
       children: [
         /* @__PURE__ */ t(i, { "data-did-auth-url": o.url, sx: { display: "none" } }),
@@ -393,11 +393,11 @@ function se({
           {
             title: u.title,
             description: u.scan,
-            extraContent: V,
+            extraContent: H,
             disableSwitchApp: T
           }
         ),
-        /* @__PURE__ */ t(dt, { initHeight: 72, children: U }),
+        /* @__PURE__ */ t(dt, { initHeight: 72, children: E }),
         /* @__PURE__ */ t(ot, { currentAppInfo: ke, currentAppColor: O }),
         Ee
       ]
@@ -423,10 +423,10 @@ se.propTypes = {
   useSocket: e.bool,
   extraContent: e.any,
   passkeyBehavior: e.oneOf(["none", "both", "only-existing", "only-new"]),
-  enabledConnectTypes: e.arrayOf(e.oneOf(["web", "mobile", ...Object.keys(L)])),
+  enabledConnectTypes: e.arrayOf(e.oneOf(["web", "mobile", ...Object.keys(M)])),
   webWalletUrl: e.string,
   allowWallet: e.bool,
-  provider: e.oneOf([Xe.WALLET, ...Object.keys(L), ""]),
+  provider: e.oneOf([Xe.WALLET, ...Object.keys(M), ""]),
   hideCloseButton: e.bool,
   disableSwitchApp: e.bool,
   onClose: e.func,

package/lib/Connect/plugins/email/list-item.js

@@ -1,24 +1,24 @@
 import { jsx as s } from "react/jsx-runtime";
 import c from "prop-types";
 import { useMemoizedFn as l } from "ahooks";
-import p from "@iconify-icons/material-symbols/mail-outline-rounded";
+import p from "@iconify-icons/tabler/mail-filled";
 import { LOGIN_PROVIDER as o, LOGIN_PROVIDER_NAME as a } from "@arcblock/ux/lib/Util/constant";
-import { GA_LAST_LOGIN_METHOD as u } from "@arcblock/ux/lib/withTracker/constant";
-import I from "../../components/login-item/login-method-item.js";
-import { useStateContext as f } from "../../contexts/state.js";
+import { GA_LAST_LOGIN_METHOD as I } from "@arcblock/ux/lib/withTracker/constant";
+import f from "../../components/login-item/login-method-item.js";
+import { useStateContext as u } from "../../contexts/state.js";
 function L({ ...e }) {
-  const { setSelectedPlugin: n, getPlugin: i, connectState: r } = f(), m = l(() => {
-    localStorage.setItem(u, "email");
-    const t = i(o.EMAIL);
-    t.state.reset(), t.state.status = "creating", r.chooseMethod = o.EMAIL, n(t);
+  const { setSelectedPlugin: i, getPlugin: r, connectState: m } = u(), n = l(() => {
+    localStorage.setItem(I, "email");
+    const t = r(o.EMAIL);
+    t.state.reset(), t.state.status = "creating", m.chooseMethod = o.EMAIL, i(t);
   });
   return /* @__PURE__ */ s(
-    I,
+    f,
     {
       ...e,
       title: a[o.EMAIL],
       icon: p,
-      onClick: m
+      onClick: n
     }
   );
 }

package/lib/package.json.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/did-connect-react",
-  "version": "3.3.1",
+  "version": "3.3.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.3.1",
+    "@arcblock/bridge": "3.3.2",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.1",
-    "@arcblock/react-hooks": "3.3.1",
+    "@arcblock/icons": "3.3.2",
+    "@arcblock/react-hooks": "3.3.2",
     "@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": "39aec3e1aef080ae289918120dc12629940a75b4"
+  "gitHead": "0a3aee5692710315a10f418105054a7241301020"
 }

package/src/Connect/components/did-connect-title.jsx

@@ -53,6 +53,7 @@ export default function DIDConnectTitle({ title, description, extraContent = nul
         sx={{
           color: 'text.secondary',
           fontFamily: 'Lexend',
+          fontSize: 13,
         }}>
         {description}
         {extraContent ? (

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
 import { getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
 import { useMemoizedFn } from 'ahooks';
@@ -229,8 +229,8 @@ export default function ConnectChooseList({
                           provider={item.provider}
                           sx={{
                             transform: 'scale(0.95)',
-                            width: 24,
-                            height: 24,
+                            width: LOGIN_PROVIDER_ICON_SIZE,
+                            height: LOGIN_PROVIDER_ICON_SIZE,
                             color: 'text.primary',
                           }}
                         />
@@ -266,9 +266,9 @@ export default function ConnectChooseList({
                   slotProps={{
                     icon: {
                       sx: {
-                        fontSize: 24,
+                        fontSize: LOGIN_PROVIDER_ICON_SIZE,
                         '& svg': {
-                          fontSize: 24,
+                          fontSize: LOGIN_PROVIDER_ICON_SIZE,
                           width: '1em',
                           height: '1em',
                         },

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
-import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 import { checkSameProtocol, getWebWalletUrl } from '@arcblock/ux/lib/Util/wallet';
 import noop from 'lodash/noop';
 import { useMemoizedFn } from 'ahooks';
@@ -237,9 +237,9 @@ export default function ConnectProviderList({
             slotProps={{
               icon: {
                 sx: {
-                  fontSize: 24,
+                  fontSize: LOGIN_PROVIDER_ICON_SIZE,
                   '& svg': {
-                    fontSize: 24,
+                    fontSize: LOGIN_PROVIDER_ICON_SIZE,
                     width: '1em',
                     height: '1em',
                   },
@@ -272,8 +272,8 @@ export default function ConnectProviderList({
                 provider={item.provider}
                 sx={{
                   transform: 'scale(0.95)',
-                  width: 24,
-                  height: 24,
+                  width: LOGIN_PROVIDER_ICON_SIZE,
+                  height: LOGIN_PROVIDER_ICON_SIZE,
                   color: 'text.primary',
                 }}
               />
@@ -284,7 +284,7 @@ export default function ConnectProviderList({
                 handleLoginOAuth(item);
               };
             }}
-            sx={[size === 'small' ? { p: 1 } : { p: 2 }]}
+            sx={[size === 'small' ? { p: 1.2 } : { p: 2 }]}
           />
         );
       }
@@ -313,10 +313,14 @@ export default function ConnectProviderList({
             sx={{
               display: 'grid',
               gridTemplateColumns: 'repeat(12, 1fr)' /* 灵活的12列基础网格 */,
-              gap: 1.25,
+              gap: 1.5,
               '.arc-login-item:nth-child(-n+3)': {
                 gridColumn: 'span 12',
               },
+              // 当登录项大于等于 5 时，第三个登录项增加一个 marginBottom，用于分割独占一行的和一行多个的登录项
+              '.arc-login-item:nth-child(3):nth-last-child(n+3)': {
+                mb: 1,
+              },
               '.arc-login-item:nth-child(4):last-child': {
                 gridColumn: 'span 12',
               },

package/src/Connect/components/login-item/login-method-item.jsx

@@ -3,6 +3,7 @@ import { Icon } from '@iconify/react';
 import { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
+import { LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
 
 export default function LoginMethodItem({
@@ -26,7 +27,7 @@ export default function LoginMethodItem({
           alignItems: 'center',
           gap: 1,
           cursor: 'pointer',
-          p: 1,
+          p: 1.2,
           borderRadius: 1,
           backgroundColor: 'grey.50',
           textDecoration: 'none',
@@ -69,8 +70,8 @@ export default function LoginMethodItem({
               icon={icon}
               sx={{
                 transform: `scale(${iconScale})`,
-                width: 24,
-                height: 24,
+                width: LOGIN_PROVIDER_ICON_SIZE,
+                height: LOGIN_PROVIDER_ICON_SIZE,
               }}
             />
           )}

package/src/Connect/components/login-item/mobile-login-item.jsx

@@ -7,7 +7,7 @@ import noop from 'lodash/noop';
 import { useImperativeHandle } from 'react';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
-import { LOGIN_PROVIDER } from '@arcblock/ux/lib/Util/constant';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_ICON_SIZE } from '@arcblock/ux/lib/Util/constant';
 
 import { useStateContext } from '../../contexts/state';
 import LoginMethodItem from './login-method-item';
@@ -145,7 +145,7 @@ export default function MobileLoginItem({
         currentState.loading || !tokenState.url ? (
           <CircularProgress
             color="primary"
-            size={24}
+            size={LOGIN_PROVIDER_ICON_SIZE}
             sx={{
               '& svg': {
                 transform: 'scale(0.75)',
@@ -154,10 +154,10 @@ export default function MobileLoginItem({
           />
         ) : (
           <ProviderIcon
-            width="24px"
-            height="24px"
             provider={LOGIN_PROVIDER.DID_WALLET}
-            style={{
+            sx={{
+              width: LOGIN_PROVIDER_ICON_SIZE,
+              height: LOGIN_PROVIDER_ICON_SIZE,
               transform: 'scale(0.9)',
             }}
           />