@arcblock/ux 2.12.5 → 2.12.6

package/lib/Colors/themes/did-connect.d.ts

@@ -5,6 +5,7 @@ declare const colors: {
         paper0: string;
         paper1: string;
         paper2: string;
+        paper3: string;
     };
     text: {
         primary: string;
@@ -50,6 +51,8 @@ declare const colors: {
     };
     divider: {
         main: string;
+        light: string;
+        dark: string;
     };
 };
 export default colors;

package/lib/Colors/themes/did-connect.js

@@ -4,7 +4,8 @@ const colors = {
     default: 'white',
     paper0: 'white',
     paper1: '#FAFAFA',
-    paper2: '#F4F4F5'
+    paper2: '#F4F4F5',
+    paper3: '#F0F0F1'
   },
   text: {
     primary: '#18181B',
@@ -49,7 +50,9 @@ const colors = {
     dark: '#00A63E'
   },
   divider: {
-    main: '#F4F4F5'
+    main: 'rgba(18, 22, 24, 0.06)',
+    light: '#F4F4F5',
+    dark: '#D4D4D5'
   }
 };
 export default colors;

package/lib/Header/header.js

@@ -99,7 +99,6 @@ function Header({
 }
 const Root = styled(Box)`
   position: relative;
-  z-index: ${props => props.theme.zIndex.appBar};
   font-size: 14px;
   background: ${props => props.theme.palette.common.white};
   .header-container {

package/lib/Locale/selector.js

@@ -86,13 +86,20 @@ export default function LocaleSelector(props) {
           children: languages.find(x => x.code === locale)?.name
         }) : '']
       })
-    }), /*#__PURE__*/_jsx(StyledPopper, {
+    }), /*#__PURE__*/_jsx(Popper, {
       open: open,
       anchorEl: anchorEl.current,
       ...popperProps,
-      disablePortal: true,
-      children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Box, {
         className: "locales",
+        sx: {
+          background: getBackground({
+            ...popperProps,
+            theme
+          }),
+          boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+          borderRadius: 2
+        },
         children: /*#__PURE__*/_jsx(ClickAwayListener, {
           onClickAway: onClose,
           children: /*#__PURE__*/_jsx(MenuList, {
@@ -102,9 +109,32 @@ export default function LocaleSelector(props) {
             }) => /*#__PURE__*/_jsxs(MenuItem, {
               className: "locale-item",
               onClick: () => onSelect(code),
-              children: [/*#__PURE__*/_jsx(IconifyIcon, {
+              sx: {
+                fontSize: 16,
+                fontStyle: 'normal',
+                fontStretch: 'normal',
+                lineHeight: 'normal',
+                letterSpacing: '2px',
+                textAlign: 'center',
+                color: getColor({
+                  ...popperProps,
+                  theme
+                }),
+                cursor: 'pointer',
+                display: 'flex',
+                padding: '16px',
+                alignItems: 'center'
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                component: IconifyIcon,
                 icon: CheckIcon,
-                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon'
+                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
+                sx: [code === locale ? {
+                  visibility: 'visible'
+                } : {}, {
+                  visibility: 'hidden',
+                  marginRight: 0.5
+                }]
               }), name]
             }, code))
           })
@@ -131,40 +161,11 @@ const Div = styled('div', {
       color: ${props => getColor(props)};
     }
   }
-
-  .locales {
-    background: ${props => getBackground(props)};
-    box-shadow:
-      0px 8px 16px 0px ${colors.gray6},
-      0px 0px 0px 1px ${colors.gray6};
-    border-radius: 8px;
-  }
-
-  .locale-item {
-    font-size: 16px;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: normal;
-    letter-spacing: 2px;
-    text-align: center;
-    color: ${props => getColor(props)};
-    cursor: pointer;
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    .check-icon {
-      visibility: hidden;
-      margin-right: 4px;
-    }
-    .check-icon-visible {
-      visibility: visible;
-    }
-  }
 `;
 const StyledPopper = styled(Popper)`
   z-index: ${({
   theme
 }) => {
-  return theme.zIndex.tooltip + 10;
+  return theme.zIndex.modal + 1;
 }};
 `;

package/lib/SessionUser/components/quick-login-item.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DID from '@arcblock/ux/lib/DID';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
-import { Box, Chip, Typography } from '@mui/material';
+import { Box, Chip, Typography, useMediaQuery } from '@mui/material';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import noop from 'lodash/noop';
 import Avatar from '../../Avatar';
@@ -12,6 +12,7 @@ export default function QuickLoginItem({
   locale = 'en',
   onClick = noop
 }) {
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
@@ -52,6 +53,7 @@ export default function QuickLoginItem({
           overflow: 'hidden'
         },
         children: [/*#__PURE__*/_jsxs(Typography, {
+          component: Box,
           sx: {
             fontSize: '16px',
             fontWeight: 500,
@@ -106,7 +108,7 @@ export default function QuickLoginItem({
           children: userSession.user.email
         })]
       })]
-    }), userSession.updatedAt && /*#__PURE__*/_jsx(Box, {
+    }), userSession.updatedAt && !isMobile && /*#__PURE__*/_jsx(Box, {
       component: "span",
       sx: {
         color: colors.textMuted,

package/lib/SessionUser/components/un-login.js

@@ -2,16 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, CircularProgress, Divider, Fade, IconButton, LinearProgress, MenuItem, MenuList, Paper, Popper } from '@mui/material';
 import { Icon } from '@iconify/react';
 import UserIcon from '@iconify-icons/tabler/user';
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
-import DIDWalletIcon from '@arcblock/icons/lib/DidWallet';
+import DidBrandLogo from '@arcblock/icons/lib/DidBrandLogo';
+import { useBrowser } from '@arcblock/react-hooks';
+import { joinURL } from 'ufo';
 import { temp as colors, didConnectColors } from '../../Colors';
 import CloseButton from '../../CloseButton';
 import { translate } from '../../Locale/util';
 import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
+import { getFederatedEnabled, getMaster } from '../../Util/federated';
 export default function UnLogin({
   session,
   onLogin = noop,
@@ -22,12 +25,14 @@ export default function UnLogin({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const browser = useBrowser();
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false,
     userSessions: [],
-    loadingSessionId: null
+    loadingSessionId: null,
+    loadAppLogoError: false
   });
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
@@ -38,13 +43,24 @@ export default function UnLogin({
     }
     session.login(onLogin);
   });
+  const blocklet = window?.blocklet;
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const master = getMaster(blocklet);
+  const loginApp = federatedEnabled && master ? master : blocklet;
+  const loginAppName = loginApp?.appName || 'DID Connect';
+  const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80');
   useEffect(() => {
-    const timer = setTimeout(async () => {
-      currentState.userSessions = await session.getUserSessions();
-      if (currentState.userSessions.length > 0) {
-        currentState.open = true;
-      }
-    }, 1500);
+    let timer;
+
+    // NOTICE: ArcSphere 中使用原生的快捷登录
+    if (!browser.arcSphere) {
+      timer = setTimeout(async () => {
+        currentState.userSessions = await session.getUserSessions();
+        if (currentState.userSessions.length > 0) {
+          currentState.open = true;
+        }
+      }, 1500);
+    }
     return () => {
       clearTimeout(timer);
     };
@@ -96,15 +112,9 @@ export default function UnLogin({
       })
     }), /*#__PURE__*/_jsx(Popper, {
       open: currentState.open,
-      anchorEl: userAnchorRef.current
-      // @ts-expect-error
-      ,
-      dark: dark,
+      anchorEl: userAnchorRef.current,
       transition: true,
       placement: "bottom-end",
-      sx: {
-        zIndex: 1100
-      },
       modifiers: [{
         name: 'offset',
         options: {
@@ -129,21 +139,39 @@ export default function UnLogin({
             sx: {
               display: 'flex',
               alignItems: 'center',
-              gap: 2,
+              gap: 1,
               p: 2,
               borderBottom: '1px solid #eee'
             },
-            children: [/*#__PURE__*/_jsx(DIDWalletIcon, {
-              width: 24,
-              height: 24
+            children: [loginAppLogo && !currentState.loadAppLogoError ? /*#__PURE__*/_jsx("img", {
+              src: loginAppLogo,
+              height: 20,
+              style: {
+                maxWidth: 100
+              },
+              onError: () => {
+                currentState.loadAppLogoError = true;
+              },
+              alt: "Login App Logo"
+            }) : /*#__PURE__*/_jsx(DidBrandLogo, {
+              height: 24,
+              width: 24
             }), /*#__PURE__*/_jsx(Typography, {
               fontSize: "auto",
               sx: {
                 fontSize: '16',
                 flex: 1,
-                color: didConnectColors.text.secondary
+                color: didConnectColors.text.secondary,
+                // 最多展示三行
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: 'vertical'
               },
-              children: t('useQuickLogin')
+              children: t('useQuickLogin', {
+                name: loginAppName
+              })
             }), /*#__PURE__*/_jsx(CloseButton, {
               onClose: () => onTogglePopper(false)
             })]
@@ -154,7 +182,7 @@ export default function UnLogin({
             },
             children: currentState.userSessions.map((userSessionItem, index) => {
               const isLoading = currentState.loadingSessionId === userSessionItem.id;
-              return /*#__PURE__*/_jsxs(_Fragment, {
+              return /*#__PURE__*/_jsxs(Fragment, {
                 children: [/*#__PURE__*/_jsxs(MenuItem, {
                   sx: {
                     overflow: 'hidden',
@@ -185,8 +213,8 @@ export default function UnLogin({
                     my: '0px !important',
                     borderColor: '#e4e4e7'
                   }
-                }) : null]
-              });
+                }, `${userSessionItem.id}-divider`) : null]
+              }, `${userSessionItem.id}-root`);
             })
           })]
         })

package/lib/SessionUser/libs/translation.js

@@ -11,7 +11,7 @@ export const translations = {
     logout: 'Sign Out',
     addAnotherAccount: 'Add another account',
     disconnected: 'Disconnected',
-    useQuickLogin: 'Use DID Connect account to login quickly'
+    useQuickLogin: 'Use {name} account to login'
   },
   zh: {
     connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
@@ -23,6 +23,6 @@ export const translations = {
     logout: '退出登录',
     addAnotherAccount: '添加账户',
     disconnected: '未连接',
-    useQuickLogin: '使用 DID Connect 账号快速登录'
+    useQuickLogin: '使用 {name} 账号登录'
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.5",
+  "version": "2.12.6",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "3999edcf6f4b5fd30f3c5d27b27f85e0051315b4",
+  "gitHead": "7b92b4bc17fc44c8c331c61a4e41da117340329a",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.5",
-    "@arcblock/nft-display": "^2.12.5",
-    "@arcblock/react-hooks": "^2.12.5",
+    "@arcblock/icons": "^2.12.6",
+    "@arcblock/nft-display": "^2.12.6",
+    "@arcblock/react-hooks": "^2.12.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Colors/themes/did-connect.ts

@@ -5,6 +5,7 @@ const colors = {
     paper0: 'white',
     paper1: '#FAFAFA',
     paper2: '#F4F4F5',
+    paper3: '#F0F0F1',
   },
   text: {
     primary: '#18181B',
@@ -49,7 +50,9 @@ const colors = {
     dark: '#00A63E',
   },
   divider: {
-    main: '#F4F4F5',
+    main: 'rgba(18, 22, 24, 0.06)',
+    light: '#F4F4F5',
+    dark: '#D4D4D5',
   },
 };
 

package/src/Header/header.tsx

@@ -99,7 +99,6 @@ function Header({
 
 const Root = styled(Box)`
   position: relative;
-  z-index: ${(props) => props.theme.zIndex.appBar};
   font-size: 14px;
   background: ${(props) => props.theme.palette.common.white};
   .header-container {

package/src/Locale/selector.tsx

@@ -94,23 +94,53 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
         </Box>
       </ButtonComponent>
 
-      <StyledPopper open={open} anchorEl={anchorEl.current} {...popperProps} disablePortal>
-        <div className="locales">
+      <Popper open={open} anchorEl={anchorEl.current} {...popperProps}>
+        <Box
+          className="locales"
+          sx={{
+            background: getBackground({ ...popperProps, theme }),
+            boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+            borderRadius: 2,
+          }}>
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
               {languages.map(({ code, name }) => (
-                <MenuItem key={code} className="locale-item" onClick={() => onSelect(code)}>
-                  <IconifyIcon
+                <MenuItem
+                  key={code}
+                  className="locale-item"
+                  onClick={() => onSelect(code)}
+                  sx={{
+                    fontSize: 16,
+                    fontStyle: 'normal',
+                    fontStretch: 'normal',
+                    lineHeight: 'normal',
+                    letterSpacing: '2px',
+                    textAlign: 'center',
+                    color: getColor({ ...popperProps, theme }),
+                    cursor: 'pointer',
+                    display: 'flex',
+                    padding: '16px',
+                    alignItems: 'center',
+                  }}>
+                  <Box
+                    component={IconifyIcon}
                     icon={CheckIcon}
                     className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
+                    sx={[
+                      code === locale ? { visibility: 'visible' } : {},
+                      {
+                        visibility: 'hidden',
+                        marginRight: 0.5,
+                      },
+                    ]}
                   />
                   {name}
                 </MenuItem>
               ))}
             </MenuList>
           </ClickAwayListener>
-        </div>
-      </StyledPopper>
+        </Box>
+      </Popper>
     </Div>
   );
 }
@@ -137,39 +167,10 @@ const Div = styled('div', {
       color: ${(props) => getColor(props)};
     }
   }
-
-  .locales {
-    background: ${(props) => getBackground(props)};
-    box-shadow:
-      0px 8px 16px 0px ${colors.gray6},
-      0px 0px 0px 1px ${colors.gray6};
-    border-radius: 8px;
-  }
-
-  .locale-item {
-    font-size: 16px;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: normal;
-    letter-spacing: 2px;
-    text-align: center;
-    color: ${(props) => getColor(props)};
-    cursor: pointer;
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    .check-icon {
-      visibility: hidden;
-      margin-right: 4px;
-    }
-    .check-icon-visible {
-      visibility: visible;
-    }
-  }
 `;
 
 const StyledPopper = styled(Popper)`
   z-index: ${({ theme }) => {
-    return theme.zIndex.tooltip + 10;
+    return theme.zIndex.modal + 1;
   }};
 `;

package/src/SessionUser/components/logged-in.tsx

@@ -19,11 +19,10 @@ import AccountCircleOffOutlineRoundedIcon from '@iconify-icons/material-symbols/
 import InviteIcon from '@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded';
 import Copy from 'copy-to-clipboard';
 import noop from 'lodash/noop';
-import bridge from '@arcblock/bridge';
 
 import Toast from '../../Toast';
 import DidAvatar from '../../Avatar';
-import { getUserAvatar, getVisitorId } from '../../Util';
+import { getUserAvatar } from '../../Util';
 import UserInfo from './user-info';
 import { temp as colors } from '../../Colors';
 import { DASHBOARD_URL, PROFILE_URL } from '../../Util/constant';

package/src/SessionUser/components/quick-login-item.tsx

@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import DID from '@arcblock/ux/lib/DID';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import WalletOSIcon from '@arcblock/ux/lib/WalletOSIcon';
-import { Box, Chip, Typography } from '@mui/material';
+import { Box, Chip, Typography, useMediaQuery } from '@mui/material';
+import type { Theme } from '@mui/material';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import noop from 'lodash/noop';
 
@@ -32,6 +33,7 @@ export default function QuickLoginItem({
     updatedAt: string;
   };
 }) {
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
 
   return (
@@ -65,6 +67,7 @@ export default function QuickLoginItem({
         <Avatar src={userSession.user.avatar} did={userSession.user.did} size={44} variant="circle" shape="circle" />
         <Box sx={{ flex: 1, overflow: 'hidden' }}>
           <Typography
+            component={Box}
             sx={{
               fontSize: '16px',
               fontWeight: 500,
@@ -120,7 +123,7 @@ export default function QuickLoginItem({
           )}
         </Box>
       </Box>
-      {userSession.updatedAt && (
+      {userSession.updatedAt && !isMobile && (
         <Box component="span" sx={{ color: colors.textMuted, fontSize: '12px', flexShrink: 0 }}>
           {/* @ts-ignore */}
           <RelativeTime value={userSession.updatedAt} locale={locale} />

package/src/SessionUser/components/un-login.tsx

@@ -12,10 +12,12 @@ import {
 } from '@mui/material';
 import { Icon } from '@iconify/react';
 import UserIcon from '@iconify-icons/tabler/user';
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
-import DIDWalletIcon from '@arcblock/icons/lib/DidWallet';
+import DidBrandLogo from '@arcblock/icons/lib/DidBrandLogo';
+import { useBrowser } from '@arcblock/react-hooks';
+import { joinURL } from 'ufo';
 
 import { Session } from '../../type';
 import { temp as colors, didConnectColors } from '../../Colors';
@@ -24,6 +26,7 @@ import { translate } from '../../Locale/util';
 import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
+import { getFederatedEnabled, getMaster } from '../../Util/federated';
 
 export interface UnLoginProps {
   session: Session;
@@ -37,12 +40,15 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const browser = useBrowser();
+
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
   const currentState = useReactive({
     open: false,
     userSessions: [] as Session[],
     loadingSessionId: null,
+    loadAppLogoError: false,
   });
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
@@ -54,13 +60,28 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
     session.login(onLogin);
   });
 
+  const blocklet = window?.blocklet;
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const master = getMaster(blocklet);
+  const loginApp = federatedEnabled && master ? master : blocklet;
+  const loginAppName = loginApp?.appName || 'DID Connect';
+  const loginAppLogo = joinURL(
+    loginApp?.appUrl || '/',
+    loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80'
+  );
+
   useEffect(() => {
-    const timer = setTimeout(async () => {
-      currentState.userSessions = await session.getUserSessions();
-      if (currentState.userSessions.length > 0) {
-        currentState.open = true;
-      }
-    }, 1500);
+    let timer: NodeJS.Timeout;
+
+    // NOTICE: ArcSphere 中使用原生的快捷登录
+    if (!browser.arcSphere) {
+      timer = setTimeout(async () => {
+        currentState.userSessions = await session.getUserSessions();
+        if (currentState.userSessions.length > 0) {
+          currentState.open = true;
+        }
+      }, 1500);
+    }
 
     return () => {
       clearTimeout(timer);
@@ -106,11 +127,8 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
       <Popper
         open={currentState.open}
         anchorEl={userAnchorRef.current}
-        // @ts-expect-error
-        dark={dark}
         transition
         placement="bottom-end"
-        sx={{ zIndex: 1100 }}
         modifiers={[
           {
             name: 'offset',
@@ -135,19 +153,39 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
-                  gap: 2,
+                  gap: 1,
                   p: 2,
                   borderBottom: '1px solid #eee',
                 }}>
-                <DIDWalletIcon width={24} height={24} />
+                {loginAppLogo && !currentState.loadAppLogoError ? (
+                  <img
+                    src={loginAppLogo}
+                    height={20}
+                    style={{
+                      maxWidth: 100,
+                    }}
+                    onError={() => {
+                      currentState.loadAppLogoError = true;
+                    }}
+                    alt="Login App Logo"
+                  />
+                ) : (
+                  <DidBrandLogo height={24} width={24} />
+                )}
                 <Typography
                   fontSize="auto"
                   sx={{
                     fontSize: '16',
                     flex: 1,
                     color: didConnectColors.text.secondary,
+                    // 最多展示三行
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: 'vertical',
                   }}>
-                  {t('useQuickLogin')}
+                  {t('useQuickLogin', { name: loginAppName })}
                 </Typography>
                 <CloseButton onClose={() => onTogglePopper(false)} />
               </Box>
@@ -156,7 +194,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                   const isLoading = currentState.loadingSessionId === userSessionItem.id;
 
                   return (
-                    <>
+                    <Fragment key={`${userSessionItem.id}-root`}>
                       <MenuItem
                         key={userSessionItem.id}
                         sx={{
@@ -185,6 +223,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                       </MenuItem>
                       {index < currentState.userSessions.length - 1 ? (
                         <Divider
+                          key={`${userSessionItem.id}-divider`}
                           sx={{
                             mx: 2,
                             my: '0px !important',
@@ -192,7 +231,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
                           }}
                         />
                       ) : null}
-                    </>
+                    </Fragment>
                   );
                 })}
               </MenuList>

package/src/SessionUser/libs/translation.ts

@@ -13,7 +13,7 @@ export const translations: Translations = {
     logout: 'Sign Out',
     addAnotherAccount: 'Add another account',
     disconnected: 'Disconnected',
-    useQuickLogin: 'Use DID Connect account to login quickly',
+    useQuickLogin: 'Use {name} account to login',
   },
   zh: {
     connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
@@ -25,6 +25,6 @@ export const translations: Translations = {
     logout: '退出登录',
     addAnotherAccount: '添加账户',
     disconnected: '未连接',
-    useQuickLogin: '使用 DID Connect 账号快速登录',
+    useQuickLogin: '使用 {name} 账号登录',
   },
 };