@arcblock/ux 2.11.50 → 2.12.1

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;
+};