@arcblock/ux 2.11.50 → 2.12.0

package/lib/CloseButton/index.d.ts

@@ -0,0 +1,5 @@
+import type { SxProps } from '@mui/material';
+export default function CloseButton({ onClose, sx }: {
+    onClose?: () => void;
+    sx?: SxProps;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/CloseButton/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Icon } from '@iconify/react';
+import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
+import noop from 'lodash/noop';
+import { temp as colors } from '../Colors';
+import { mergeSx } from '../Util/style';
+export default function CloseButton({
+  onClose = noop,
+  sx
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    onClick: onClose,
+    sx: mergeSx({
+      fontSize: 0,
+      cursor: 'pointer',
+      color: colors.foregroundsFgSubtile,
+      transition: 'transform 0.25s ease-in-out 0s',
+      transformOrigin: 'center',
+      '&:hover': {
+        transform: 'rotate(90deg)'
+      }
+    }, sx),
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: CloseRoundedIcon,
+      fontSize: 20
+    })
+  });
+}

package/lib/Colors/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './themes/default';
 export { default as temp } from './themes/temp';
+export { default as didConnectColors } from './themes/did-connect';

package/lib/Colors/index.js

@@ -1,3 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './themes/default';
-export { default as temp } from './themes/temp';
+export { default as temp } from './themes/temp';
+export { default as didConnectColors } from './themes/did-connect';

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

@@ -0,0 +1,55 @@
+declare const colors: {
+    background: {
+        overlay: string;
+        default: string;
+        paper0: string;
+        paper1: string;
+        paper2: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disable: string;
+        hint: string;
+    };
+    state: {
+        hover: string;
+        selected: string;
+        item: string;
+        itemSelected: string;
+    };
+    primary: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    secondary: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    error: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    warning: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    info: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    success: {
+        main: string;
+        light: string;
+        dark: string;
+    };
+    divider: {
+        main: string;
+    };
+};
+export default colors;

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

@@ -0,0 +1,55 @@
+const colors = {
+  background: {
+    overlay: 'rgba(15, 23, 42, 0.5)',
+    default: 'white',
+    paper0: 'white',
+    paper1: '#FAFAFA',
+    paper2: '#F4F4F5'
+  },
+  text: {
+    primary: '#18181B',
+    secondary: '#71717B',
+    disable: '#D4D4D8',
+    hint: '#D4D4D8'
+  },
+  state: {
+    hover: '#FAFAFA',
+    selected: '#F4F4F5',
+    item: '#F4F4F5',
+    itemSelected: '#E4E4E7'
+  },
+  primary: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC'
+  },
+  secondary: {
+    main: '#615FFF',
+    light: '#7C86FF',
+    dark: '#4F39F6'
+  },
+  error: {
+    main: '#FB2C36',
+    light: '#FF6467',
+    dark: '#E7000B'
+  },
+  warning: {
+    main: '#FF6900',
+    light: '#FF8904',
+    dark: '#F54900'
+  },
+  info: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC'
+  },
+  success: {
+    main: '#00C950',
+    light: '#05DF72',
+    dark: '#00A63E'
+  },
+  divider: {
+    main: '#F4F4F5'
+  }
+};
+export default colors;

package/lib/RelativeTime/index.js

@@ -31,6 +31,7 @@ dayjs.updateLocale('zh-cn', {
     yy: '%d 年'
   }
 });
+// FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 export default function RelativeTime({
   value,

package/lib/SessionUser/components/quick-login-item.d.ts

@@ -0,0 +1,19 @@
+export default function QuickLoginItem({ userSession, locale, onClick, }: {
+    onClick?: () => void;
+    locale?: string;
+    userSession: {
+        user: {
+            avatar: string;
+            did: string;
+            fullName: string;
+            role: string;
+            roleTitle: string;
+            email: string;
+        };
+        extra: {
+            walletOS: string;
+            provider: string;
+        };
+        updatedAt: string;
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,122 @@
+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 { temp as colors } from '@arcblock/ux/lib/Colors';
+import noop from 'lodash/noop';
+import Avatar from '../../Avatar';
+import { getSourceProvider } from '../libs/utils';
+export default function QuickLoginItem({
+  userSession,
+  locale = 'en',
+  onClick = noop
+}) {
+  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      borderRadius: 2,
+      p: 2,
+      transition: 'background-color 0.5s',
+      '&:hover, &:active': {
+        backgroundColor: colors.backgroundsBgSubtileHover
+      },
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: colors.surfacePrimarySubtitle
+      },
+      width: '100%',
+      backgroundColor: 'white'
+    },
+    onClick: onClick,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1.5,
+        flex: 1,
+        overflow: 'hidden'
+      },
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        src: userSession.user.avatar,
+        did: userSession.user.did,
+        size: 44,
+        variant: "circle",
+        shape: "circle"
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          flex: 1,
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/_jsxs(Typography, {
+          sx: {
+            fontSize: '16px',
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            color: colors.textBase
+          },
+          children: [userSession.user.fullName, /*#__PURE__*/_jsx(Chip, {
+            label: userSession.user?.roleTitle || userSession.user?.role,
+            size: "small",
+            variant: "outlined",
+            sx: () => ({
+              height: 'auto',
+              fontWeight: 'bold',
+              fontSize: '12px',
+              borderColor: colors.lineBorderStrong,
+              color: colors.textSubtitle
+            })
+          })]
+        }), isRawWalletAccount ? /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5
+          },
+          children: [/*#__PURE__*/_jsx(WalletOSIcon, {
+            provider: userSession?.extra?.provider,
+            walletOS: userSession?.extra?.walletOS,
+            color: colors.textSubtitle
+          }), /*#__PURE__*/_jsx(DID
+          // @ts-ignore
+          , {
+            locale: locale,
+            did: userSession.user.did,
+            size: 12,
+            sx: {
+              lineHeight: 1,
+              fontSize: '12px',
+              mt: 0.5,
+              '& span.arc-avatar-did-motif': {
+                display: 'none !important'
+              }
+            },
+            compact: true
+          })]
+        }) : /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: '12px',
+            color: colors.textSubtitle
+          },
+          children: userSession.user.email
+        })]
+      })]
+    }), userSession.updatedAt && /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        color: colors.textMuted,
+        fontSize: '12px',
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/_jsx(RelativeTime, {
+        value: userSession.updatedAt,
+        locale: locale
+      })
+    })]
+  });
+}

package/lib/SessionUser/components/un-login.d.ts

@@ -4,5 +4,6 @@ export interface UnLoginProps {
     onLogin?: () => void;
     size?: number;
     dark?: false | true;
+    locale?: string;
 }
-export default function UnLogin({ session, onLogin, size, dark }: UnLoginProps): import("react/jsx-runtime").JSX.Element;
+export default function UnLogin({ session, onLogin, size, dark, locale }: UnLoginProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,53 +1,196 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, CircularProgress, IconButton } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
+import DIDWalletIcon from '@arcblock/icons/lib/DidWallet';
+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';
 export default function UnLogin({
   session,
   onLogin = noop,
   size = 24,
-  dark = false
+  dark = false,
+  locale = 'en'
 }) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+    userSessions: [],
+    loadingSessionId: null
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
   const _onLogin = useMemoizedFn(() => {
     if (isFirstLoading) {
       return;
     }
     session.login(onLogin);
   });
-  return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsx(IconButton, {
-      ref: userAnchorRef,
-      onClick: _onLogin,
-      "data-cy": "sessionManager-login",
-      className: "arc-session-user-unlogin",
-      size: "medium",
-      "aria-label": "Login button",
-      children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-        width: size,
-        height: size,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        children: /*#__PURE__*/_jsx(CircularProgress, {
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      currentState.userSessions = await session.getUserSessions();
+      if (currentState.userSessions.length > 0) {
+        currentState.open = true;
+      }
+    }, 1500);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleLogin = useMemoizedFn(async userSession => {
+    currentState.loadingSessionId = userSession.id;
+    try {
+      await session.loginUserSession({
+        ...userSession,
+        appPid: blocklet?.appPid
+      });
+    } catch (err) {
+      console.error('session.loginUserSession.error', err);
+    } finally {
+      currentState.loadingSessionId = null;
+    }
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(IconButton, {
+        ref: userAnchorRef,
+        onClick: _onLogin,
+        "data-cy": "sessionManager-login",
+        className: "arc-session-user-unlogin",
+        size: "medium",
+        "aria-label": "Login button",
+        children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
+          width: size,
+          height: size,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          children: /*#__PURE__*/_jsx(CircularProgress, {
+            style: {
+              width: size - 4,
+              height: size - 4,
+              color: dark ? '#fff' : ''
+            }
+          })
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: UserIcon,
+          fontSize: size,
+          color: dark ? '#fff' : 'inherit',
           style: {
-            width: size - 4,
-            height: size - 4,
-            color: dark ? '#fff' : ''
+            transform: 'scale(1.25)'
           }
         })
-      }) : /*#__PURE__*/_jsx(Icon, {
-        icon: UserIcon,
-        fontSize: size,
-        color: dark ? '#fff' : 'inherit',
-        style: {
-          transform: 'scale(1.25)'
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: currentState.open,
+      anchorEl: userAnchorRef.current
+      // @ts-expect-error
+      ,
+      dark: dark,
+      transition: true,
+      placement: "bottom-end",
+      sx: {
+        zIndex: 1100
+      },
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 10] // [水平偏移, 垂直偏移]
         }
+      }],
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        children: /*#__PURE__*/_jsxs(Paper, {
+          variant: "outlined",
+          sx: {
+            borderRadius: 2,
+            width: 400,
+            maxWidth: '90vw',
+            borderColor: colors.lineStep,
+            border: '0 !important',
+            boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`
+          },
+          children: [/*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+              p: 2,
+              borderBottom: '1px solid #eee'
+            },
+            children: [/*#__PURE__*/_jsx(DIDWalletIcon, {
+              width: 24,
+              height: 24
+            }), /*#__PURE__*/_jsx(Typography, {
+              fontSize: "auto",
+              sx: {
+                fontSize: '16',
+                flex: 1,
+                color: didConnectColors.text.secondary
+              },
+              children: t('useQuickLogin')
+            }), /*#__PURE__*/_jsx(CloseButton, {
+              onClose: () => onTogglePopper(false)
+            })]
+          }), /*#__PURE__*/_jsx(MenuList, {
+            sx: {
+              p: 0,
+              overflow: 'hidden'
+            },
+            children: currentState.userSessions.map((userSessionItem, index) => {
+              const isLoading = currentState.loadingSessionId === userSessionItem.id;
+              return /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsxs(MenuItem, {
+                  sx: {
+                    overflow: 'hidden',
+                    position: 'relative',
+                    p: 0,
+                    '&:hover': {
+                      backgroundColor: `${colors.surfacePrimarySubtitle} !important`
+                    }
+                  },
+                  onClick: () => {
+                    handleLogin(userSessionItem);
+                  },
+                  children: [isLoading && /*#__PURE__*/_jsx(LinearProgress, {
+                    sx: {
+                      height: '2px',
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0
+                    }
+                  }), /*#__PURE__*/_jsx(QuickLoginItem, {
+                    userSession: userSessionItem,
+                    locale: locale
+                  })]
+                }, userSessionItem.id), index < currentState.userSessions.length - 1 ? /*#__PURE__*/_jsx(Divider, {
+                  sx: {
+                    mx: 2,
+                    my: '0px !important',
+                    borderColor: '#e4e4e7'
+                  }
+                }) : null]
+              });
+            })
+          })]
+        })
       })
-    })
+    })]
   });
 }

package/lib/SessionUser/index.js

@@ -23,6 +23,7 @@ export default function SessionUser({
   }
   return /*#__PURE__*/_jsx(UnLogin, {
     session: session,
+    locale: locale,
     size: size
   });
 }

package/lib/SessionUser/libs/translation.js

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

package/lib/Typography/index.js

@@ -95,7 +95,9 @@ export default function Typography({
       ...rest,
       sx: {
         ...sx,
-        fontSize: `${state.fontSize}px !important`,
+        ...(state.fontSize ? {
+          fontSize: `${state.fontSize}px !important`
+        } : {}),
         position: 'fixed',
         top: -1000,
         left: -1000
@@ -107,7 +109,9 @@ export default function Typography({
     ...rest,
     sx: {
       ...sx,
-      fontSize: `${state.fontSize}px !important`
+      ...(state.fontSize ? {
+        fontSize: `${state.fontSize}px !important`
+      } : {})
     },
     children: children
   });

package/lib/Util/style.d.ts

@@ -0,0 +1,2 @@
+import type { SxProps } from '@mui/material';
+export declare const mergeSx: (...sxList: Array<SxProps | undefined | null>) => SxProps;

package/lib/Util/style.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+
+export const mergeSx = (...sxList) => {
+  const mergedSx = sxList.reduce((acc, sx) => {
+    if (!sx) {
+      return acc;
+    }
+    if (Array.isArray(sx)) {
+      return acc.concat(sx);
+    }
+    return acc.concat([sx]);
+  }, []);
+  return mergedSx;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.11.50",
+  "version": "2.12.0",
   "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": "f969739a55ab3a6c178b15b8e2aa736ef4956fd0",
+  "gitHead": "ce9042b3a31a06b60ab4d3b923e8b5903bbbf106",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.11.50",
-    "@arcblock/nft-display": "^2.11.50",
-    "@arcblock/react-hooks": "^2.11.50",
+    "@arcblock/icons": "^2.12.0",
+    "@arcblock/nft-display": "^2.12.0",
+    "@arcblock/react-hooks": "^2.12.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/CloseButton/index.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@mui/material';
+import type { SxProps } from '@mui/material';
+import { Icon } from '@iconify/react';
+import CloseRoundedIcon from '@iconify-icons/material-symbols/close-rounded';
+import noop from 'lodash/noop';
+
+import { temp as colors } from '../Colors';
+import { mergeSx } from '../Util/style';
+
+export default function CloseButton({ onClose = noop, sx }: { onClose?: () => void; sx?: SxProps }) {
+  return (
+    <Box
+      onClick={onClose}
+      sx={mergeSx(
+        {
+          fontSize: 0,
+          cursor: 'pointer',
+          color: colors.foregroundsFgSubtile,
+          transition: 'transform 0.25s ease-in-out 0s',
+          transformOrigin: 'center',
+          '&:hover': {
+            transform: 'rotate(90deg)',
+          },
+        },
+        sx
+      )}>
+      <Icon icon={CloseRoundedIcon} fontSize={20} />
+    </Box>
+  );
+}

package/src/Colors/index.ts

@@ -1,3 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './themes/default';
 export { default as temp } from './themes/temp';
+export { default as didConnectColors } from './themes/did-connect';

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

@@ -0,0 +1,56 @@
+const colors = {
+  background: {
+    overlay: 'rgba(15, 23, 42, 0.5)',
+    default: 'white',
+    paper0: 'white',
+    paper1: '#FAFAFA',
+    paper2: '#F4F4F5',
+  },
+  text: {
+    primary: '#18181B',
+    secondary: '#71717B',
+    disable: '#D4D4D8',
+    hint: '#D4D4D8',
+  },
+  state: {
+    hover: '#FAFAFA',
+    selected: '#F4F4F5',
+    item: '#F4F4F5',
+    itemSelected: '#E4E4E7',
+  },
+  primary: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC',
+  },
+  secondary: {
+    main: '#615FFF',
+    light: '#7C86FF',
+    dark: '#4F39F6',
+  },
+  error: {
+    main: '#FB2C36',
+    light: '#FF6467',
+    dark: '#E7000B',
+  },
+  warning: {
+    main: '#FF6900',
+    light: '#FF8904',
+    dark: '#F54900',
+  },
+  info: {
+    main: '#2B7FFF',
+    light: '#51A2FF',
+    dark: '#155DFC',
+  },
+  success: {
+    main: '#00C950',
+    light: '#05DF72',
+    dark: '#00A63E',
+  },
+  divider: {
+    main: '#F4F4F5',
+  },
+};
+
+export default colors;

package/src/RelativeTime/index.tsx

@@ -32,6 +32,7 @@ dayjs.updateLocale('zh-cn', {
     yy: '%d 年',
   },
 });
+// FIXME: @@ 此处不能真正的将 relativeTime 设置为支持中文
 setDateTool(dayjs);
 
 export interface RelativeTimeProps {

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

@@ -0,0 +1,131 @@
+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 { temp as colors } from '@arcblock/ux/lib/Colors';
+import noop from 'lodash/noop';
+
+import Avatar from '../../Avatar';
+import { getSourceProvider } from '../libs/utils';
+
+export default function QuickLoginItem({
+  userSession,
+  locale = 'en',
+  onClick = noop,
+}: {
+  onClick?: () => void;
+  locale?: string;
+  userSession: {
+    user: {
+      avatar: string;
+      did: string;
+      fullName: string;
+      role: string;
+      roleTitle: string;
+      email: string;
+    };
+    extra: {
+      walletOS: string;
+      provider: string;
+    };
+    updatedAt: string;
+  };
+}) {
+  const isRawWalletAccount = getSourceProvider(userSession?.user) === 'wallet';
+
+  return (
+    <Box
+      sx={{
+        borderRadius: 2,
+        p: 2,
+        transition: 'background-color 0.5s',
+        '&:hover, &:active': {
+          backgroundColor: colors.backgroundsBgSubtileHover,
+        },
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: colors.surfacePrimarySubtitle,
+        },
+        width: '100%',
+        backgroundColor: 'white',
+      }}
+      onClick={onClick}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          flex: 1,
+          overflow: 'hidden',
+        }}>
+        <Avatar src={userSession.user.avatar} did={userSession.user.did} size={44} variant="circle" shape="circle" />
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
+          <Typography
+            sx={{
+              fontSize: '16px',
+              fontWeight: 500,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+              color: colors.textBase,
+            }}>
+            {userSession.user.fullName}
+            <Chip
+              label={userSession.user?.roleTitle || userSession.user?.role}
+              size="small"
+              variant="outlined"
+              sx={() => ({
+                height: 'auto',
+                fontWeight: 'bold',
+                fontSize: '12px',
+                borderColor: colors.lineBorderStrong,
+                color: colors.textSubtitle,
+              })}
+            />
+          </Typography>
+          {isRawWalletAccount ? (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
+              }}>
+              <WalletOSIcon
+                provider={userSession?.extra?.provider}
+                walletOS={userSession?.extra?.walletOS}
+                color={colors.textSubtitle}
+              />
+              <DID
+                // @ts-ignore
+                locale={locale}
+                did={userSession.user.did}
+                size={12}
+                sx={{
+                  lineHeight: 1,
+                  fontSize: '12px',
+                  mt: 0.5,
+                  '& span.arc-avatar-did-motif': {
+                    display: 'none !important',
+                  },
+                }}
+                compact
+              />
+            </Box>
+          ) : (
+            <Typography sx={{ fontSize: '12px', color: colors.textSubtitle }}>{userSession.user.email}</Typography>
+          )}
+        </Box>
+      </Box>
+      {userSession.updatedAt && (
+        <Box component="span" sx={{ color: colors.textMuted, fontSize: '12px', flexShrink: 0 }}>
+          {/* @ts-ignore */}
+          <RelativeTime value={userSession.updatedAt} locale={locale} />
+        </Box>
+      )}
+    </Box>
+  );
+}

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

@@ -1,22 +1,52 @@
-import { Box, CircularProgress, IconButton } from '@mui/material';
+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 { useRef } from 'react';
-import { useMemoizedFn } from 'ahooks';
+import { useEffect, useRef } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
+import DIDWalletIcon from '@arcblock/icons/lib/DidWallet';
 
 import { Session } from '../../type';
+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';
 
 export interface UnLoginProps {
   session: Session;
   onLogin?: () => void;
   size?: number;
   dark?: false | true;
+  locale?: string;
 }
 
-export default function UnLogin({ session, onLogin = noop, size = 24, dark = false }: UnLoginProps) {
+export default function UnLogin({ session, onLogin = noop, size = 24, dark = false, locale = 'en' }: UnLoginProps) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
+  const currentState = useReactive({
+    open: false,
+    userSessions: [] as Session[],
+    loadingSessionId: null,
+  });
+  const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
+    currentState.open = value;
+  });
   const _onLogin = useMemoizedFn(() => {
     if (isFirstLoading) {
       return;
@@ -24,28 +54,152 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
     session.login(onLogin);
   });
 
+  useEffect(() => {
+    const timer = setTimeout(async () => {
+      currentState.userSessions = await session.getUserSessions();
+      if (currentState.userSessions.length > 0) {
+        currentState.open = true;
+      }
+    }, 1500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleLogin = useMemoizedFn(async (userSession) => {
+    currentState.loadingSessionId = userSession.id;
+    try {
+      await session.loginUserSession({ ...userSession, appPid: blocklet?.appPid });
+    } catch (err) {
+      console.error('session.loginUserSession.error', err);
+    } finally {
+      currentState.loadingSessionId = null;
+    }
+  });
+
   return (
-    <Box>
-      <IconButton
-        ref={userAnchorRef}
-        onClick={_onLogin}
-        data-cy="sessionManager-login"
-        className="arc-session-user-unlogin"
-        size="medium"
-        aria-label="Login button">
-        {isFirstLoading ? (
-          <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
-            <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
-          </Box>
-        ) : (
-          <Icon
-            icon={UserIcon}
-            fontSize={size}
-            color={dark ? '#fff' : 'inherit'}
-            style={{ transform: 'scale(1.25)' }}
-          />
+    <>
+      <Box>
+        <IconButton
+          ref={userAnchorRef}
+          onClick={_onLogin}
+          data-cy="sessionManager-login"
+          className="arc-session-user-unlogin"
+          size="medium"
+          aria-label="Login button">
+          {isFirstLoading ? (
+            <Box width={size} height={size} display="flex" justifyContent="center" alignItems="center">
+              <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
+            </Box>
+          ) : (
+            <Icon
+              icon={UserIcon}
+              fontSize={size}
+              color={dark ? '#fff' : 'inherit'}
+              style={{ transform: 'scale(1.25)' }}
+            />
+          )}
+        </IconButton>
+      </Box>
+      <Popper
+        open={currentState.open}
+        anchorEl={userAnchorRef.current}
+        // @ts-expect-error
+        dark={dark}
+        transition
+        placement="bottom-end"
+        sx={{ zIndex: 1100 }}
+        modifiers={[
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 10], // [水平偏移, 垂直偏移]
+            },
+          },
+        ]}>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps}>
+            <Paper
+              variant="outlined"
+              sx={{
+                borderRadius: 2,
+                width: 400,
+                maxWidth: '90vw',
+                borderColor: colors.lineStep,
+                border: '0 !important',
+                boxShadow: `0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6}`,
+              }}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 2,
+                  p: 2,
+                  borderBottom: '1px solid #eee',
+                }}>
+                <DIDWalletIcon width={24} height={24} />
+                <Typography
+                  fontSize="auto"
+                  sx={{
+                    fontSize: '16',
+                    flex: 1,
+                    color: didConnectColors.text.secondary,
+                  }}>
+                  {t('useQuickLogin')}
+                </Typography>
+                <CloseButton onClose={() => onTogglePopper(false)} />
+              </Box>
+              <MenuList sx={{ p: 0, overflow: 'hidden' }}>
+                {currentState.userSessions.map((userSessionItem, index) => {
+                  const isLoading = currentState.loadingSessionId === userSessionItem.id;
+
+                  return (
+                    <>
+                      <MenuItem
+                        key={userSessionItem.id}
+                        sx={{
+                          overflow: 'hidden',
+                          position: 'relative',
+                          p: 0,
+                          '&:hover': {
+                            backgroundColor: `${colors.surfacePrimarySubtitle} !important`,
+                          },
+                        }}
+                        onClick={() => {
+                          handleLogin(userSessionItem);
+                        }}>
+                        {isLoading && (
+                          <LinearProgress
+                            sx={{
+                              height: '2px',
+                              position: 'absolute',
+                              top: 0,
+                              left: 0,
+                              right: 0,
+                            }}
+                          />
+                        )}
+                        <QuickLoginItem userSession={userSessionItem as unknown as any} locale={locale} />
+                      </MenuItem>
+                      {index < currentState.userSessions.length - 1 ? (
+                        <Divider
+                          sx={{
+                            mx: 2,
+                            my: '0px !important',
+                            borderColor: '#e4e4e7',
+                          }}
+                        />
+                      ) : null}
+                    </>
+                  );
+                })}
+              </MenuList>
+            </Paper>
+          </Fade>
         )}
-      </IconButton>
-    </Box>
+      </Popper>
+    </>
   );
 }

package/src/SessionUser/index.tsx

@@ -22,5 +22,5 @@ export default function SessionUser({ session, onBindWallet = noop, locale = 'en
       <LoggedIn isBlocklet={isBlocklet} session={session} onBindWallet={onBindWallet} locale={locale} size={size} />
     );
   }
-  return <UnLogin session={session} size={size} />;
+  return <UnLogin session={session} locale={locale} size={size} />;
 }

package/src/SessionUser/libs/translation.ts

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

package/src/Typography/index.tsx

@@ -98,7 +98,7 @@ export default function Typography({
         {...rest}
         sx={{
           ...sx,
-          fontSize: `${state.fontSize}px !important`,
+          ...(state.fontSize ? { fontSize: `${state.fontSize}px !important` } : {}),
           position: 'fixed',
           top: -1000,
           left: -1000,
@@ -112,7 +112,7 @@ export default function Typography({
       {...rest}
       sx={{
         ...sx,
-        fontSize: `${state.fontSize}px !important`,
+        ...(state.fontSize ? { fontSize: `${state.fontSize}px !important` } : {}),
       }}>
       {children}
     </MuiTypography>

package/src/Util/style.ts

@@ -0,0 +1,17 @@
+/* eslint-disable import/prefer-default-export */
+import type { SxProps } from '@mui/material';
+
+export const mergeSx = (...sxList: Array<SxProps | undefined | null>) => {
+  const mergedSx = sxList.reduce((acc, sx) => {
+    if (!sx) {
+      return acc;
+    }
+
+    if (Array.isArray(sx)) {
+      return acc.concat(sx);
+    }
+
+    return acc.concat([sx]);
+  }, [] as SxProps[]);
+  return mergedSx as SxProps;
+};