@blocklet/ui-react 2.9.51 → 2.9.53

package/src/UserCenter/libs/locales.ts

@@ -41,6 +41,33 @@ export const translations = {
     myInfo: '我的信息',
     loginNow: '立即登录',
     viewAfterLogin: '登录后才可以查看',
+    sessionManagement: '会话管理',
+    storage: {
+      spaces: {
+        tips: '提示',
+        label: '请输入 DID Spaces 服务地址',
+        connectedWithName: '你已成功连接至 {name}',
+        gateway: {
+          delete: {
+            failed: '删除 DID Spaces 失败',
+          },
+        },
+        provideNFT: {
+          title: '请为 {appName} 出示 DID Spaces NFT',
+          scan: '使用你的 DID Wallet 扫描下面的二维码为应用 {appName} 出示 DID Spaces NFT',
+          success: '连接成功',
+        },
+        connect: {
+          useWallet: '使用 DID Wallet 连接',
+          useWalletReconnect: '使用 DID Wallet 重新连接',
+          providerForStorage: '请连接您的 DID Spaces',
+        },
+        connected: {
+          title: '已连接的 DID Spaces',
+          tag: '已连接',
+        },
+      },
+    },
   },
   en: {
     settings: 'Settings',
@@ -84,5 +111,32 @@ export const translations = {
     myInfo: 'My Info',
     loginNow: 'Login',
     viewAfterLogin: 'View after login',
+    sessionManagement: 'Session Management',
+    storage: {
+      spaces: {
+        tips: 'Tips',
+        label: 'Enter DID Spaces Gateway',
+        connectedWithName: 'You have successfully connected to {name}',
+        gateway: {
+          delete: {
+            failed: 'Delete gateway failed',
+          },
+        },
+        provideNFT: {
+          title: 'Please show the DID Spaces NFT for {appName}',
+          scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} show DID space NFT',
+          success: 'Connected successfully',
+        },
+        connect: {
+          useWallet: 'Connect with DID Wallet',
+          useWalletReconnect: 'Reconnect with DID Wallet',
+          providerForStorage: 'Please connect your DID Spaces',
+        },
+        connected: {
+          title: 'Connected DID Spaces',
+          tag: 'Connected',
+        },
+      },
+    },
   },
 };

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?',
+  },
+};

package/src/UserSessions/libs/utils.ts

@@ -0,0 +1,82 @@
+const RESERVED_IP = 'Reserved IP';
+const IP_REGION_CACHE = 'ip-region-cache';
+
+async function getIpRegionFromIpApi(ip: string): Promise<string> {
+  const url = `https://ipapi.co/${ip}/json/`;
+  const result = await fetch(url);
+  const data = await result.json();
+
+  let region = '';
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country_name, data.region, data.city].filter(Boolean).join('/');
+  }
+  return region;
+}
+async function getIpRegionFromIpSb(ip: string): Promise<string> {
+  const url = `https://api.ip.sb/geoip/${ip}`;
+  const result = await fetch(url);
+  const data = await result.json();
+
+  let region = '';
+  if (data.error) {
+    if (data.reserved) {
+      region = RESERVED_IP;
+    }
+  } else {
+    region = [data.country, data.region, data.city].filter(Boolean).join('/');
+  }
+  return region;
+}
+
+export async function ip2Region(ip: string): Promise<string> {
+  let region = '';
+  let ipRegionCache: Record<string, string> = {};
+  try {
+    const tmpCache = localStorage.getItem(IP_REGION_CACHE);
+    if (tmpCache) {
+      ipRegionCache = JSON.parse(tmpCache);
+    }
+  } catch {
+    ipRegionCache = {};
+  }
+  if (ipRegionCache[ip]) {
+    region = ipRegionCache[ip];
+  } else {
+    try {
+      region = await getIpRegionFromIpSb(ip);
+    } catch {
+      console.warn('Fail to get ip region from ip.sb');
+    }
+
+    if (!region) {
+      try {
+        region = await getIpRegionFromIpApi(ip);
+      } catch {
+        console.warn('Fail to get ip region from ip-api.co');
+      }
+    }
+  }
+
+  if (region) {
+    // NOTICE: 为了防止 cache 过大，将在 size 超过 100 时，删除最旧的数据
+    const ipList = Object.keys(ipRegionCache);
+    if (ipList.length > 100) {
+      delete ipRegionCache[ipList[0]];
+    }
+    if (ipRegionCache[ip]) {
+      delete ipRegionCache[ip];
+    }
+    ipRegionCache[ip] = region;
+    localStorage.setItem(IP_REGION_CACHE, JSON.stringify(ipRegionCache));
+  }
+  return region;
+}
+
+// eslint-disable-next-line require-await
+export async function batchIp2Region(ips: string[]): Promise<string[]> {
+  return Promise.all(ips.map((ip) => ip2Region(ip)));
+}

package/src/blocklets.js

@@ -28,30 +28,30 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
     return navigation;
   }
   // eslint-disable-next-line no-shadow
-  const getTitle = (title, locale) => {
+  const getTitle = (title, _locale) => {
     if (typeof title === 'string') {
       return title;
     }
     if (typeof title === 'object') {
-      return title[locale] || title?.en || title?.zh;
+      return title[_locale] || title?.en || title?.zh;
     }
     return title;
   };
   // eslint-disable-next-line no-shadow
-  const getLink = (link, locale) => {
+  const getLink = (link, _locale) => {
     if (typeof link === 'string') {
       // http[s] 开头的 url
       if (isUrl(link)) {
         const url = new URL(link);
-        url.searchParams.set('locale', locale);
+        url.searchParams.set('locale', _locale);
         return url.href;
       }
       const url = new URL(link, window.location.origin);
-      url.searchParams.set('locale', locale);
+      url.searchParams.set('locale', _locale);
       return url.pathname + url.search;
     }
     if (typeof link === 'object') {
-      return link[locale] || link?.en || link?.zh;
+      return link[_locale] || link?.en || link?.zh;
     }
     return link;
   };

package/src/common/header-addons.jsx

@@ -9,7 +9,7 @@ import SessionUser from '@arcblock/ux/lib/SessionUser';
 import SessionBlocklet from '@arcblock/ux/lib/SessionBlocklet';
 import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { sessionManagerProps } from '../types';
+import { SessionManagerProps } from '../types';
 import { getLocalizedNavigation, filterNavByRole } from '../blocklets';
 
 // eslint-disable-next-line no-shadow
@@ -81,7 +81,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.func: 可以把自定义 addons 插在 session-manager 或 locale-selector (如果存在的话) 前/中/后
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  sessionManagerProps,
+  sessionManagerProps: SessionManagerProps,
 };
 
 HeaderAddons.defaultProps = {

package/src/contexts/config-user-space.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo, useState, useEffect } from 'react';
-import { SessionContext as TSessionContext } from '../@types';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
+import { SessionContext as TSessionContext } from '../@types';
 
 export interface SpaceGateway {
   did: string;
@@ -12,13 +12,13 @@ export interface SpaceGateway {
 
 export interface SettingStorageEndpoint {
   (endpoint: string | undefined): void | Promise<void>;
-} 
+}
 
 interface ConfigUserSpaceContextType {
   loading: boolean;
   spaceGateway: SpaceGateway | undefined;
   deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
-  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) =>  Promise<void>;
+  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
   storageEndpoint: string;
   settingStorageEndpoint: SettingStorageEndpoint;
   hasStorageEndpoint: boolean;
@@ -27,9 +27,9 @@ interface ConfigUserSpaceContextType {
 const ConfigUserSpaceContext = createContext<ConfigUserSpaceContextType>({} as ConfigUserSpaceContextType);
 const { Provider, Consumer } = ConfigUserSpaceContext;
 
-function ConfigUserSpaceProvider({ children }: {children: React.ReactNode }) {
+function ConfigUserSpaceProvider({ children }: { children: React.ReactNode }) {
   const [loading] = useState(false);
-  const {session} = useContext<TSessionContext>(SessionContext);
+  const { session } = useContext<TSessionContext>(SessionContext);
   const { user } = session;
 
   const [spaceGateway, setSpaceGateway] = useState<SpaceGateway | undefined>();
@@ -38,13 +38,17 @@ function ConfigUserSpaceProvider({ children }: {children: React.ReactNode }) {
   }, [user?.didSpace]);
 
   useEffect(() => {
-    setSpaceGateway(user?.didSpace as SpaceGateway)
-  }, [user?.didSpace])
+    setSpaceGateway(user?.didSpace as SpaceGateway);
+  }, [user?.didSpace]);
 
+  // eslint-disable-next-line require-await
   const deleteSpaceGateway = async (): Promise<void> => {
     setSpaceGateway(undefined);
   };
- 
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const settingStorageEndpoint = (endpoint: string | undefined) => {};
+
   const updateSpaceGateway = async (x: SpaceGateway) => {
     setSpaceGateway(x);
     session.refresh();
@@ -52,9 +56,6 @@ function ConfigUserSpaceProvider({ children }: {children: React.ReactNode }) {
     await settingStorageEndpoint(x.endpoint);
   };
 
-
-  const settingStorageEndpoint =  (endpoint: string | undefined) => {};
-
   const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
 
   return (

package/src/index.ts

@@ -11,3 +11,4 @@ export { default as ComponentInstaller } from './ComponentInstaller';
 // @ts-ignore
 export { default as useComponentInstaller } from './ComponentInstaller/use-component-installed';
 export * from './UserCenter';
+export * from './UserSessions';

package/src/{UserCenter/libs → libs}/client.ts

@@ -1,3 +1,4 @@
 import { BlockletSDK } from '@blocklet/js-sdk';
 
+// eslint-disable-next-line import/prefer-default-export
 export const client = new BlockletSDK();

package/src/libs/spaces.tsx

@@ -1,4 +1,4 @@
-import { joinURL } from "ufo";
+import { joinURL } from 'ufo';
 
 export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
   const prefix = endpoint.replace(/\/api\/space\/.+/, '');
@@ -7,4 +7,4 @@ export function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string {
   const spaceDid = strArray.at(-4);
 
   return joinURL(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
-}
+}