@blocklet/ui-react 2.11.3 → 2.11.5

package/lib/UserCenter/components/passport.js

@@ -57,7 +57,7 @@ export default function Passport({ user, ...rest }) {
         gridTemplateColumns: {
           xs: "repeat(2, 1fr)",
           sm: "repeat(3, 1fr)",
-          md: "repeat(2, 1fr)"
+          md: "repeat(4, 1fr)"
         },
         gap: 2.5,
         ...rest.sx

package/lib/UserCenter/components/third-party-login/third-party-item.js

@@ -55,6 +55,9 @@ export default function ThirdPartyItem({
             title: t("thirdPartyLogin.confirmUnbind", { name: title }),
             content: t("thirdPartyLogin.confirmUnbindDescription", { name: title }),
             confirmButtonText: t("common.confirm"),
+            confirmButtonProps: {
+              color: "error"
+            },
             cancelButtonText: t("common.cancel"),
             onConfirm(close) {
               unbindOAuth({

package/lib/UserCenter/components/user-center.js

@@ -14,7 +14,7 @@ import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
-import { getQuery, withQuery, joinURL } from "ufo";
+import { getQuery, withQuery, joinURL, withoutTrailingSlash } from "ufo";
 import { PROFILE_URL } from "@arcblock/ux/lib/Util/constant";
 import Footer from "../../Footer/index.js";
 import Header from "../../Header/index.js";
@@ -157,7 +157,7 @@ export default function UserCenter({
     }).filter((x) => isMyself || !x.isPrivate);
   }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
   const currentActiveTab = useCreation(() => {
-    return userCenterTabs.find((x) => x.value === currentTab);
+    return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
   const handleChangeTab = useMemoizedFn((value) => {
     const findTab = userCenterTabs.find((x) => x.value === value);
@@ -198,10 +198,6 @@ export default function UserCenter({
         Box,
         {
           sx: {
-            width: {
-              sx: "100%",
-              md: 420
-            },
             maxWidth: "100%",
             position: "relative"
           },
@@ -322,7 +318,7 @@ export default function UserCenter({
                     orientation: isMobile ? "horizontal" : "vertical",
                     variant: "line",
                     tabs: userCenterTabs,
-                    current: currentTab,
+                    current: currentActiveTab?.value ?? currentTab,
                     onChange: handleChangeTab,
                     sx: {
                       width: isMobile ? "100%" : 180,

package/lib/UserSessions/components/user-sessions.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Datatable from "@arcblock/ux/lib/Datatable";
-import { useCreation, useMemoizedFn, useRequest } from "ahooks";
+import { useCreation, useMemoizedFn, useReactive, 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";
@@ -9,13 +9,14 @@ 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 { useContext } from "react";
+import PQueue from "p-queue";
+import { Box, Button, CircularProgress, Tooltip, Typography } from "@mui/material";
+import { memo, useContext, useEffect } from "react";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
 import { translations } from "../libs/locales.js";
-import { batchIp2Region } from "../libs/utils.js";
+import { ip2Region } from "../libs/utils.js";
 const parseUa = (ua) => {
   const parser = new UAParser(ua, {
     // eslint-disable-next-line no-useless-escape
@@ -24,6 +25,30 @@ const parseUa = (ua) => {
   const result = parser.getResult();
   return result;
 };
+const queue = new PQueue({ concurrency: 1 });
+const UserSessionIp = memo(({ userSession }) => {
+  const currentState = useReactive({
+    loading: true,
+    ipRegion: ""
+  });
+  const { t } = useLocaleContext();
+  useEffect(() => {
+    queue.add(async () => {
+      try {
+        currentState.ipRegion = await ip2Region(userSession.lastLoginIp);
+      } finally {
+        currentState.loading = false;
+      }
+    });
+  }, [currentState, userSession.lastLoginIp]);
+  return /* @__PURE__ */ jsx(Box, { children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { children: userSession.lastLoginIp || t("unknown") }),
+    currentState.loading ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit" }) }) : null
+  ] }) });
+});
 export default function UserSessions({
   user,
   showAction = true,
@@ -39,18 +64,9 @@ export default function UserSessions({
   const getData = useMemoizedFn(async () => {
     let data = user?.userSessions || [];
     try {
-      if (!data && session.user) {
+      if (!user?.userSessions && session.user) {
         data = await client.userSession.getMyLoginSessions();
       }
-      const ipIndexList = data?.map((x, index) => [index, x.lastLoginIp]).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);
@@ -67,20 +83,14 @@ export default function UserSessions({
   const safeData = useCreation(() => {
     return pageState.data || [];
   }, [pageState.data]);
-  const ipRegionMap = useCreation(() => {
-    return safeData.reduce(
-      (acc, x) => {
-        acc[x.lastLoginIp] = x.ipRegion;
-        return acc;
-      },
-      {}
-    );
-  }, [safeData]);
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t("logoutThisSession"),
       content: t("logoutThisSessionConfirm"),
       confirmButtonText: t("confirm"),
+      confirmButtonProps: {
+        color: "error"
+      },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
         await client.user.logout({ visitorId });
@@ -98,6 +108,9 @@ export default function UserSessions({
       title: t("logoutAllSession"),
       content: t("logoutAllSessionConfirm"),
       confirmButtonText: t("confirm"),
+      confirmButtonProps: {
+        color: "error"
+      },
       cancelButtonText: t("cancel"),
       onConfirm: async () => {
         const list = otherUserSessions.map((x) => {
@@ -210,10 +223,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { children: ipRegionMap[x.lastLoginIp] ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: ipRegionMap[x.lastLoginIp] }),
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: x.lastLoginIp || t("unknown") })
-          ] }) : /* @__PURE__ */ jsx(Typography, { children: x.lastLoginIp || t("unknown") }) });
+          return /* @__PURE__ */ jsx(UserSessionIp, { userSession: x });
         }
       }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.3",
-    "@arcblock/react-hooks": "^2.11.3",
+    "@arcblock/bridge": "^2.11.5",
+    "@arcblock/react-hooks": "^2.11.5",
     "@blocklet/did-space-react": "^0.5.83",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -47,6 +47,7 @@
     "is-url": "^1.2.4",
     "lodash": "^4.17.21",
     "p-all": "^5.0.0",
+    "p-queue": "^6.6.2",
     "p-wait-for": "^5.0.2",
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
@@ -56,9 +57,9 @@
     "ufo": "^1.5.3"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": "^2.9.79",
-    "@arcblock/ux": "^2.9.79",
-    "@blocklet/js-sdk": "^1.16.33",
+    "@arcblock/did-connect": "^2.11.3",
+    "@arcblock/ux": "^2.11.3",
+    "@blocklet/js-sdk": "^1.16.36",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.15.0",
@@ -80,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "f17cdd23c703c834a348dffca7786dbd0b0b40c3"
+  "gitHead": "ad0f1851be1f8ee0f655131ad3734fceb807f9de"
 }

package/src/UserCenter/components/passport.tsx

@@ -68,7 +68,7 @@ export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
         gridTemplateColumns: {
           xs: 'repeat(2, 1fr)',
           sm: 'repeat(3, 1fr)',
-          md: 'repeat(2, 1fr)',
+          md: 'repeat(4, 1fr)',
         },
         gap: 2.5,
         ...rest.sx,

package/src/UserCenter/components/third-party-login/third-party-item.tsx

@@ -71,6 +71,9 @@ export default function ThirdPartyItem({
             title: t('thirdPartyLogin.confirmUnbind', { name: title }),
             content: t('thirdPartyLogin.confirmUnbindDescription', { name: title }),
             confirmButtonText: t('common.confirm'),
+            confirmButtonProps: {
+              color: 'error',
+            },
             cancelButtonText: t('common.cancel'),
             onConfirm(close: () => void) {
               unbindOAuth({

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

@@ -15,7 +15,7 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import cloneDeep from 'lodash/cloneDeep';
-import { getQuery, withQuery, joinURL } from 'ufo';
+import { getQuery, withQuery, joinURL, withoutTrailingSlash } from 'ufo';
 import type { AxiosError } from 'axios';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
 
@@ -190,7 +190,7 @@ export default function UserCenter({
   }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
 
   const currentActiveTab = useCreation(() => {
-    return userCenterTabs.find((x) => x.value === currentTab);
+    return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
 
   const handleChangeTab = useMemoizedFn((value) => {
@@ -235,10 +235,6 @@ export default function UserCenter({
       return (
         <Box
           sx={{
-            width: {
-              sx: '100%',
-              md: 420,
-            },
             maxWidth: '100%',
             position: 'relative',
           }}>
@@ -364,7 +360,7 @@ export default function UserCenter({
               orientation={isMobile ? 'horizontal' : 'vertical'}
               variant="line"
               tabs={userCenterTabs}
-              current={currentTab}
+              current={currentActiveTab?.value ?? currentTab}
               onChange={handleChangeTab}
               sx={{
                 width: isMobile ? '100%' : 180,

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/no-unstable-nested-components */
 import Datatable from '@arcblock/ux/lib/Datatable';
-import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
+import { useCreation, useMemoizedFn, useReactive, 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';
@@ -10,8 +10,9 @@ 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, useContext } from 'react';
+import PQueue from 'p-queue';
+import { Box, Button, CircularProgress, Tooltip, Typography } from '@mui/material';
+import { memo, ReactElement, useContext, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
@@ -19,7 +20,7 @@ import UserSessionInfo from './user-session-info';
 import { User, SessionContext as TSessionContext } from '../../@types';
 import { client } from '../../libs/client';
 import { translations } from '../libs/locales';
-import { batchIp2Region } from '../libs/utils';
+import { ip2Region } from '../libs/utils';
 
 const parseUa = (ua: string) => {
   const parser = new UAParser(ua, {
@@ -30,6 +31,49 @@ const parseUa = (ua: string) => {
   return result;
 };
 
+const queue = new PQueue({ concurrency: 1 });
+
+const UserSessionIp = memo(({ userSession }: { userSession: any }) => {
+  const currentState = useReactive({
+    loading: true,
+    ipRegion: '',
+  });
+
+  const { t } = useLocaleContext();
+
+  useEffect(() => {
+    queue.add(async () => {
+      try {
+        currentState.ipRegion = await ip2Region(userSession.lastLoginIp);
+      } finally {
+        currentState.loading = false;
+      }
+    });
+  }, [currentState, userSession.lastLoginIp]);
+
+  return (
+    <Box>
+      {currentState.ipRegion ? (
+        <>
+          <Typography variant="body2">{currentState.ipRegion}</Typography>
+          <Typography variant="body2" color="grey">
+            {userSession.lastLoginIp || t('unknown')}
+          </Typography>
+        </>
+      ) : (
+        <>
+          <Typography>{userSession.lastLoginIp || t('unknown')}</Typography>
+          {currentState.loading ? (
+            <Typography variant="body2" color="grey" sx={{ textAlign: 'center' }}>
+              <CircularProgress size={12} color="inherit" />
+            </Typography>
+          ) : null}
+        </>
+      )}
+    </Box>
+  );
+});
+
 export default function UserSessions({
   user,
   showAction = true,
@@ -51,20 +95,9 @@ export default function UserSessions({
   const getData: () => Promise<(UserSession & { ipRegion?: string })[]> = useMemoizedFn(async () => {
     let data = (user?.userSessions || []) as (UserSession & { ipRegion?: string })[];
     try {
-      if (!data && session.user) {
-        // 依赖新版 js-sdk
+      if (!user?.userSessions && session.user) {
         data = await client.userSession.getMyLoginSessions();
       }
-      // FIXME: @zhanghan 优化获取 IP 信息的处理逻辑
-      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);
@@ -85,21 +118,14 @@ export default function UserSessions({
     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'),
+      confirmButtonProps: {
+        color: 'error',
+      },
       cancelButtonText: t('cancel'),
       onConfirm: async () => {
         await client.user.logout({ visitorId });
@@ -117,6 +143,9 @@ export default function UserSessions({
       title: t('logoutAllSession'),
       content: t('logoutAllSessionConfirm'),
       confirmButtonText: t('confirm'),
+      confirmButtonProps: {
+        color: 'error',
+      },
       cancelButtonText: t('cancel'),
       onConfirm: async () => {
         const list = otherUserSessions.map((x) => {
@@ -240,20 +269,7 @@ export default function UserSessions({
       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>
-          );
+          return <UserSessionIp userSession={x} />;
         },
       },
     },