@blocklet/ui-react 2.9.52 → 2.9.54

package/src/UserCenter/components/storage/connect-to.tsx

@@ -5,12 +5,17 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import DidConnect from '@arcblock/did-connect/lib/Connect';
 import { joinURL } from 'ufo';
 import toast from '@arcblock/ux/lib/Toast';
-import { func, string } from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
-import {axios} from '../../libs/api';
+import { axios } from '../../libs/api';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 
-function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceGateway: SpaceGateway) => Promise<void>, storageEndpoint: string}) {
+function ConnectTo({
+  onConnect,
+  storageEndpoint,
+}: {
+  onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
+  storageEndpoint: string;
+}) {
   const { t, locale } = useLocaleContext();
 
   const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
@@ -18,8 +23,11 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
     action: 'connect-to-did-spaces-for-user',
     checkTimeout: 1000 * 300,
     prefix: '/api/did',
-    // @ts-expect-error
-    checkFn: axios.create({ baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : '/') }).get,
+    checkFn: axios.create({
+      // FIXME: @jianchao 检查 env 的使用是否正确
+      // @ts-ignore
+      baseURL: joinURL(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : '/'),
+    }).get,
     extraParams: {},
     messages: {
       title: t('storage.spaces.provideNFT.title', { appName: window.blocklet.appName }, locale),
@@ -36,7 +44,6 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
     },
   });
 
-
   const updateSpaceGateway = async (spaceGateway: SpaceGateway) => {
     await onConnect(spaceGateway);
     toast.success(t('storage.spaces.connectedWithName', { name: spaceGateway.name }));
@@ -73,24 +80,24 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
       open: true,
       extraParams: {
         appDid: window.blocklet.appId,
-        appName:  window.blocklet.appName,
+        appName: window.blocklet.appName,
         appDescription: window.blocklet.appDescription,
         scopes: 'list:object read:object write:object',
         appUrl: window.blocklet.appUrl,
-        referrer: window.location.href
+        referrer: window.location.href,
       },
     }));
   };
 
   return (
     <Box>
-      <Button  
+      <Button
         color="primary"
         style={{ textTransform: 'none !important', fontSize: '1rem' }}
         size="small"
         onClick={handleUseWalletConnect}
         variant="outlined">
-          {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
+        {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
       </Button>
 
       {/* 为了获取 DID Spaces Url */}
@@ -109,7 +116,6 @@ function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceG
         messages={authorizeFromNftConnect.messages}
         locale={locale}
       />
-
     </Box>
   );
 }

package/src/UserCenter/components/storage/delete.tsx

@@ -1,4 +1,4 @@
-import  React, { useState } from 'react';
+import React, { useState } from 'react';
 import { IconButton } from '@mui/material';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import Confirm from '@arcblock/ux/lib/Dialog/confirm';
@@ -6,7 +6,13 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import toast from '@arcblock/ux/lib/Toast';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 
-function SpaceDelete({ spaceGateway, onDeleteSpace }: {spaceGateway: SpaceGateway, onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void> }) {
+function SpaceDelete({
+  spaceGateway,
+  onDeleteSpace,
+}: {
+  spaceGateway: SpaceGateway;
+  onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void>;
+}) {
   const { t } = useLocaleContext();
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);

package/src/UserCenter/components/storage/item.tsx

@@ -1,12 +1,11 @@
 import { Box, BoxProps, Chip, Typography } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import toast from '@arcblock/ux/lib/Toast';
 import CheckIcon from '@mui/icons-material/Check';
 import styled from '@emotion/styled';
+import DidAddress from '@arcblock/ux/lib/DID';
+
 // @ts-expect-error
 import SpacesConnectedSvg from './icons/space-connected.svg?react';
-import DidAddress from '@arcblock/ux/lib/DID';
-import PropTypes, { bool, func } from 'prop-types';
 import PreviewSpaceNft from './preview-nft';
 import { SpaceGateway } from '../../../contexts/config-user-space';
 import useMobile from '../../../hooks/use-mobile';

package/src/UserCenter/components/storage/preview-nft.tsx

@@ -5,7 +5,7 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 // @ts-expect-error
 import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
 
-function PreviewSpaceNft({ src, alt }: {src: string, alt: string}) {
+function PreviewSpaceNft({ src, alt }: { src: string; alt: string }) {
   const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
   const [open, setOpen] = useState(false);
 

package/src/UserCenter/components/user-center.tsx

@@ -16,17 +16,19 @@ import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import cloneDeep from 'lodash/cloneDeep';
 import { getQuery, withQuery } from 'ufo';
 import type { AxiosError } from 'axios';
+import type { UserPublicInfo } from '@blocklet/js-sdk';
 
-import { Header, Footer } from '../../';
+import Footer from '../../Footer';
+import Header from '../../Header';
 import { translations } from '../libs/locales';
 import UserInfo from './user-info';
 import UserBasicInfo from './user-basic-info';
-import type { SessionContext as TSessionContext, UserCenterTab } from '../../@types';
+import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
 import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
 import Passport from './passport';
 import Settings from './settings';
-import { client } from '../libs/client';
+import { client } from '../../libs/client';
 
 export default function UserCenter({
   children,
@@ -37,7 +39,7 @@ export default function UserCenter({
   hideFooter = false,
   headerProps = {},
   footerProps = {},
-  userDid,
+  userDid = undefined,
   stickySidebar = false,
 }: {
   readonly children: any;
@@ -46,8 +48,9 @@ export default function UserCenter({
   readonly disableAutoRedirect?: boolean;
   readonly autoPopupSetting?: boolean;
   readonly hideFooter?: boolean;
-  readonly headerProps?: object;
-  readonly footerProps?: object;
+  // FIXME: @zhanghan 将 header 和 footer 改为 ts 后，去掉这个 any
+  readonly headerProps?: any;
+  readonly footerProps?: any;
   readonly userDid?: string;
   readonly stickySidebar?: boolean;
 }) {
@@ -81,14 +84,15 @@ export default function UserCenter({
     return false;
   }, [currentDid, session?.user?.did]);
 
-  const userState = useRequest(
+  const userState = useRequest<UserPublicInfo | User | undefined, []>(
+    // eslint-disable-next-line consistent-return
     async () => {
       await pWaitFor(() => session?.initialized);
       if (isMyself) {
-        return session.user;
+        return session.user as User;
       }
       if (currentDid) {
-        return await client.user.getUserPublicInfo({ did: currentDid });
+        return client.user.getUserPublicInfo({ did: currentDid });
       }
     },
     {
@@ -114,6 +118,7 @@ export default function UserCenter({
     sx: {
       '.MuiDialog-paper': {
         borderRadius: 2,
+        maxWidth: 1200,
       },
       '.ux-dialog_title': {
         fontWeight: 600,
@@ -174,7 +179,7 @@ export default function UserCenter({
       title: t('settings'),
       content: (
         <Settings
-          user={userState.data}
+          user={userState.data as User}
           settings={{
             userCenterTabs,
           }}
@@ -258,7 +263,7 @@ export default function UserCenter({
             switchPassport={session.switchPassport}
             switchProfile={session.switchProfile}
             openSettings={openSettings}
-            user={userState.data}
+            user={userState.data as User}
             showFullDid={false}
             sx={{
               display: {
@@ -294,12 +299,14 @@ export default function UserCenter({
                   <CircularProgress sx={{ color: colors.primary100 }} />
                 </Box>
               ) : (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
                 <>
                   {currentActiveTab?.protected && !isMyself ? (
                     <Box>
                       <Empty>{t('underProtected')}</Empty>
                     </Box>
                   ) : (
+                    // eslint-disable-next-line react/jsx-no-useless-fragment
                     <>{children && <Box {...contentProps}>{children}</Box>}</>
                   )}
                 </>
@@ -355,7 +362,7 @@ export default function UserCenter({
               switchPassport={session.switchPassport}
               switchProfile={session.switchProfile}
               openSettings={openSettings}
-              user={userState.data}
+              user={userState.data as User}
               sx={{
                 display: {
                   xs: 'none',
@@ -368,11 +375,11 @@ export default function UserCenter({
               <>
                 <Box>
                   <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
-                  <UserInfo user={userState.data} />
+                  <UserInfo user={userState.data as User} />
                 </Box>
                 <Box>
                   <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                  <Passport user={userState.data} />
+                  <Passport user={userState.data as User} />
                 </Box>
               </>
             ) : null}

package/src/UserCenter/components/webhook-item.tsx

@@ -6,7 +6,6 @@ import {
   InputAdornment,
   MenuItem,
   Select,
-  Stack,
   TextField,
   Typography,
 } from '@mui/material';
@@ -75,6 +74,7 @@ export default function WebhookItem({
     onCancel();
   });
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const _onTest = useMemoizedFn(async (data) => {
     currentState.loading = true;
     await onTest(data);

package/src/UserCenter/libs/locales.ts

@@ -41,6 +41,7 @@ export const translations = {
     myInfo: '我的信息',
     loginNow: '立即登录',
     viewAfterLogin: '登录后才可以查看',
+    sessionManagement: '会话管理',
     storage: {
       spaces: {
         tips: '提示',
@@ -110,6 +111,7 @@ export const translations = {
     myInfo: 'My Info',
     loginNow: 'Login',
     viewAfterLogin: 'View after login',
+    sessionManagement: 'Session Management',
     storage: {
       spaces: {
         tips: 'Tips',

package/src/UserSessions/components/user-session-info.tsx

@@ -0,0 +1,52 @@
+import { Box, Chip, Typography } from '@mui/material';
+import Avatar from '@arcblock/ux/lib/Avatar';
+import { useCreation } from 'ahooks';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+
+import { User } from '../../@types';
+
+export default function UserSessionInfo({ user, sessionUser }: { readonly user: User; readonly sessionUser: any }) {
+  const currentRole = useCreation(() => {
+    return (user?.passports || [])?.find((item) => item.name === sessionUser.role);
+  }, [user?.passports, sessionUser?.role]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+      }}>
+      <Avatar size={40} variant="circle" shape="circle" src={sessionUser.avatar} did={sessionUser.did} />
+      <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+          }}>
+          <Typography sx={{ whiteSpace: 'normal', wordBreak: 'break-all' }}>{sessionUser.fullName}</Typography>
+          <Chip
+            label={currentRole?.title || currentRole?.name || 'Guest'}
+            size="small"
+            variant="outlined"
+            sx={{
+              flexShrink: 0,
+              fontWeight: 'bold',
+              fontSize: '12px',
+              color: colors.textBase,
+              borderColor: colors.strokeBorderStrong,
+              backgroundColor: 'transparent',
+              textTransform: 'capitalize',
+              pr: 1,
+              pl: 0.5,
+            }}
+          />
+        </Box>
+        <Typography variant="body2" color="grey">
+          {sessionUser.email}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/UserSessions/components/user-sessions.tsx

@@ -0,0 +1,276 @@
+/* eslint-disable react/no-unstable-nested-components */
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RelativeTime from '@arcblock/ux/lib/RelativeTime';
+import sortBy from 'lodash/sortBy';
+import UAParser from 'ua-parser-js';
+import { getVisitorId } from '@arcblock/ux/lib/Util';
+import { useConfirm } from '@arcblock/ux/lib/Dialog';
+import pAll from 'p-all';
+import { Box, Button, Tooltip, Typography } from '@mui/material';
+import { ReactElement } from 'react';
+import { UserSession } from '@blocklet/js-sdk';
+
+import UserSessionInfo from './user-session-info';
+import { User } from '../../@types';
+import { client } from '../../libs/client';
+import { translations } from '../libs/locales';
+import { batchIp2Region } from '../libs/utils';
+
+const parseUa = (ua: string) => {
+  const parser = new UAParser(ua, {
+    // eslint-disable-next-line no-useless-escape
+    browser: [[/(ArcWallet)\/([\w\.]+)/i], [UAParser.BROWSER.NAME, UAParser.BROWSER.VERSION]],
+  });
+  const result = parser.getResult();
+  return result;
+};
+
+export default function UserSessions({
+  user,
+  showAction = true,
+  showUser = true,
+}: {
+  readonly user: User & {
+    userSessions?: any[];
+  };
+  readonly showAction?: boolean;
+  readonly showUser?: boolean;
+}) {
+  const currentVisitorId = getVisitorId();
+  const { locale } = useLocaleContext();
+  const { confirmApi, confirmHolder } = useConfirm();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const getData: () => Promise<(UserSession & { ipRegion?: string })[]> = useMemoizedFn(async () => {
+    let data = user?.userSessions as (UserSession & { ipRegion?: string })[];
+    if (!data) {
+      data = await client.userSession.getUserSessions({ did: user.did });
+    }
+    try {
+      const ipIndexList = data?.map((x, index) => [index, x.lastLoginIp] as [number, string]).filter((x) => !!x[1]);
+      const ipList = ipIndexList?.map((x) => x[1]);
+      const result = await batchIp2Region(ipList);
+      for (let index = 0; index < result.length; index++) {
+        const x = result[index];
+        const ipIndexItem = ipIndexList[index];
+        const dataItem = data[ipIndexItem[0]];
+        dataItem.ipRegion = x;
+      }
+    } catch (e) {
+      console.warn('Failed to convert ip to region');
+      console.error(e);
+    }
+
+    const now = new Date().getTime();
+    return sortBy(data, (x) => {
+      if (x.visitorId === currentVisitorId) {
+        return -1;
+      }
+      return now - new Date(x.updatedAt).getTime();
+    });
+  });
+
+  const pageState = useRequest(getData);
+
+  const safeData = useCreation(() => {
+    return pageState.data || [];
+  }, [pageState.data]);
+
+  const ipRegionMap = useCreation(() => {
+    return safeData.reduce((acc, x) => {
+      acc[x.lastLoginIp] = x.ipRegion;
+      return acc;
+    }, {} as { [key: string]: string | undefined });
+  }, [safeData]);
+
+  const logout = useMemoizedFn(({ visitorId }) => {
+    confirmApi.open({
+      title: t('logoutThisSession'),
+      content: t('logoutThisSessionConfirm'),
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      onConfirm: async () => {
+        await client.user.logout({ visitorId });
+        pageState.refresh();
+        confirmApi.close();
+      },
+    });
+  });
+  const otherUserSessions = useCreation(() => {
+    const list = safeData.filter((x) => x.visitorId !== currentVisitorId);
+    return list;
+  }, [safeData]);
+  const logoutAll = useMemoizedFn(() => {
+    confirmApi.open({
+      title: t('logoutAllSession'),
+      content: t('logoutAllSessionConfirm'),
+      confirmButtonText: t('confirm'),
+      cancelButtonText: t('cancel'),
+      onConfirm: async () => {
+        const list = otherUserSessions.map((x) => {
+          return () => client.user.logout({ visitorId: x.visitorId });
+        });
+        await pAll(list, {
+          concurrency: 3,
+          stopOnError: false,
+        });
+        pageState.refresh();
+        confirmApi.close();
+      },
+    });
+  });
+  const customButtons: ReactElement[] = [];
+  if (showAction) {
+    customButtons.push(
+      <Tooltip key="logoutAll" title={t('logoutAllTips')}>
+        <Button
+          sx={{ ml: 0.5 }}
+          size="small"
+          variant="contained"
+          color="error"
+          onClick={logoutAll}
+          disabled={otherUserSessions.length === 0}>
+          {t('logoutAll')}
+        </Button>
+      </Tooltip>
+    );
+  }
+  const tableOptions = useCreation(() => {
+    return {
+      // viewColumns: false,
+      search: false,
+      sort: false,
+      download: false,
+      filter: false,
+      print: false,
+      expandableRowsOnClick: false,
+      searchDebounceTime: 600,
+    };
+  }, []);
+  const columns = [
+    {
+      label: t('platform'),
+      name: 'platform',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          const result = parseUa(x.ua);
+          return <Box>{[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}</Box>;
+        },
+      },
+    },
+    {
+      label: t('deviceType'),
+      name: 'deviceType',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          const result = parseUa(x.ua);
+          return <Box>{[result.browser?.name, result.browser?.version].filter(Boolean).join('/') || t('unknown')}</Box>;
+        },
+      },
+    },
+    {
+      label: t('walletOS'),
+      name: 'walletOS',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return <Box>{x.extra?.walletOS || t('unknown')}</Box>;
+        },
+      },
+    },
+    showUser && {
+      label: t('user'),
+      name: 'user',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return <UserSessionInfo sessionUser={x.user} user={user} />;
+        },
+      },
+    },
+    {
+      label: t('updatedAt'),
+      name: 'updatedAt',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return <RelativeTime value={x.updatedAt} relativeRange={3 * 86400 * 1000} locale={locale} />;
+        },
+      },
+    },
+    {
+      label: t('lastLoginIp'),
+      name: 'lastLoginIp',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return (
+            <Box>
+              {ipRegionMap[x.lastLoginIp] ? (
+                <>
+                  <Typography variant="body2">{ipRegionMap[x.lastLoginIp]}</Typography>
+                  <Typography variant="body2" color="grey">
+                    {x.lastLoginIp || t('unknown')}
+                  </Typography>
+                </>
+              ) : (
+                <Typography>{x.lastLoginIp || t('unknown')}</Typography>
+              )}
+            </Box>
+          );
+        },
+      },
+    },
+    showAction && {
+      label: t('actions'),
+      name: 'actions',
+      options: {
+        customBodyRenderLite: (rawIndex: number) => {
+          const x = safeData[rawIndex];
+          return (
+            <Box>
+              <Button
+                sx={{
+                  whiteSpace: 'nowrap',
+                  fontSize: '12px',
+                  px: 1,
+                }}
+                disabled={currentVisitorId === x.visitorId}
+                variant="outlined"
+                size="small"
+                color="error"
+                onClick={() => logout({ visitorId: x.visitorId })}>
+                {currentVisitorId === x.visitorId ? t('currentSession') : t('logout')}
+              </Button>
+            </Box>
+          );
+        },
+      },
+    },
+  ].filter(Boolean);
+  return (
+    <Box
+      sx={{
+        '.MuiTableCell-head': {
+          whiteSpace: 'nowrap',
+          fontWeight: 'bold',
+        },
+      }}>
+      {confirmHolder}
+      <Datatable
+        locale={locale}
+        data={safeData}
+        columns={columns}
+        customButtons={customButtons}
+        options={tableOptions}
+        loading={pageState.loading}
+      />
+    </Box>
+  );
+}

package/src/UserSessions/index.tsx

@@ -0,0 +1 @@
+export { default as UserSessions } from './components/user-sessions';

package/src/UserSessions/libs/locales.ts

@@ -0,0 +1,52 @@
+export const translations = {
+  zh: {
+    confirm: '确认',
+    cancel: '取消',
+    visitorId: '设备标识',
+    deviceType: '设备类型',
+    platform: '操作系统',
+    walletOS: '钱包类型',
+    role: '角色',
+    fullname: '姓名',
+    email: '邮箱',
+    avatar: '头像',
+    user: '用户',
+    updatedAt: '最近活动时间',
+    lastLoginIp: '最近活动地址',
+    actions: '操作',
+    logoutAll: '注销所有会话',
+    logoutAllTips: '不会注销当前会话',
+    logout: '注销',
+    currentSession: '当前会话',
+    unknown: '未知',
+    logoutThisSession: '注销指定会话',
+    logoutThisSessionConfirm: '确定要注销此会话吗?',
+    logoutAllSession: '注销所有会话',
+    logoutAllSessionConfirm: '确定要注销所有会话吗?',
+  },
+  en: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    visitorId: 'Device ID',
+    deviceType: 'Device Type',
+    platform: 'Platform',
+    walletOS: 'Wallet OS',
+    role: 'Role',
+    fullname: 'Fullname',
+    email: 'Email',
+    avatar: 'Avatar',
+    user: 'User',
+    updatedAt: 'Last Active Time',
+    actions: 'Actions',
+    lastLoginIp: 'Last Login IP',
+    logoutAll: 'Logout all',
+    logoutAllTips: 'Will not logout current session',
+    logout: 'Logout',
+    currentSession: 'Current Session',
+    unknown: 'Unknown',
+    logoutThisSession: 'Logout this session',
+    logoutThisSessionConfirm: 'Are you sure to logout this session?',
+    logoutAllSession: 'Logout all sessions',
+    logoutAllSessionConfirm: 'Are you sure to logout all sessions?',
+  },
+};