@arcblock/did-connect-react 3.3.0 → 3.3.2

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const o = "3.3.0", 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.0",
+  "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.0",
+    "@arcblock/bridge": "3.3.2",
     "@arcblock/did": "^1.27.16",
-    "@arcblock/icons": "3.3.0",
-    "@arcblock/react-hooks": "3.3.0",
+    "@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": "d23472b198c0bf05d452976ebefedab5cb6d047f"
+  "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)',
             }}
           />

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

@@ -7,7 +7,7 @@ import noop from 'lodash/noop';
 import omit from 'lodash/omit';
 import { useImperativeHandle } from 'react';
 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 LoginMethodItem from './login-method-item';
 import { useStateContext } from '../../contexts/state';
@@ -116,7 +116,7 @@ export default function WebLoginItem({
         currentState.loading || !tokenState.url ? (
           <CircularProgress
             color="primary"
-            size={24}
+            size={LOGIN_PROVIDER_ICON_SIZE}
             sx={{
               '& svg': {
                 transform: 'scale(0.75)',
@@ -125,12 +125,12 @@ export default function WebLoginItem({
           />
         ) : (
           <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)',
             }}
+            provider={LOGIN_PROVIDER.DID_WALLET}
           />
         )
       }

package/src/Connect/index.jsx

@@ -482,9 +482,9 @@ function Connect({
           mode === 'drawer' ? '100%' : hideQRCode || showStatus ? DID_CONNECT_SMALL_WIDTH : DID_CONNECT_MEDIUM_WIDTH,
         transition: 'width 0.2s ease-in-out',
         margin: 'auto',
-        p: isSmallView ? 2 : 3,
+        p: 3,
         pb: 0,
-        gap: 2,
+        gap: 2.5,
       }}>
       <Box data-did-auth-url={state.url} sx={{ display: 'none' }} />
       <DIDConnectTitle

package/src/Connect/plugins/email/list-item.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { useMemoizedFn } from 'ahooks';
-import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import mailFilledIcon from '@iconify-icons/tabler/mail-filled';
 import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
 import { GA_LAST_LOGIN_METHOD } from '@arcblock/ux/lib/withTracker/constant';
 
@@ -22,7 +22,7 @@ export default function EmailListItem({ ...rest }) {
     <LoginMethodItem
       {...rest}
       title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
-      icon={mailOutlineRoundedIcon}
+      icon={mailFilledIcon}
       onClick={handleConnect}
     />
   );

package/src/Passkey/context.jsx

@@ -204,6 +204,7 @@ function PasskeyProvider({
       return result;
     } catch (err) {
       // Check if this is a WebAuthn specific error
+      console.error('passkey.create.error', err);
       if (err.name) {
         throw new Error(getWebAuthnErrorMessage(err, t('createPasskeyFailed'), t));
       }
@@ -232,6 +233,7 @@ function PasskeyProvider({
       return result;
     } catch (err) {
       // Check if this is a WebAuthn specific error
+      console.error('passkey.auth.error', err);
       if (err.name) {
         throw new Error(getWebAuthnErrorMessage(err, t('verifyPasskeyFailed'), t));
       }
@@ -333,6 +335,7 @@ function PasskeyProvider({
       return result;
     } catch (err) {
       // Use the WebAuthn specific error handler if the error has a name property (WebAuthn errors do)
+      console.error('passkey.login.error', err);
       const errMsg = getWebAuthnErrorMessage(err, t('verifyPasskeyFailed'), t);
       state.baseUrl = backupBaseUrl;
       throw new Error(errMsg);