@blocklet/ui-react 2.9.23 → 2.9.25

package/es/UserCenter/libs/locales.d.ts

@@ -6,6 +6,8 @@ export declare const translations: {
         notification: string;
         email: string;
         lastLogin: string;
+        lastLoginAt: string;
+        lastLoginIp: string;
         createdAt: string;
         registerFrom: string;
         unknown: string;
@@ -36,6 +38,7 @@ export declare const translations: {
         currentPassport: string;
         switchProfile: string;
         userInfo: string;
+        myInfo: string;
     };
     en: {
         settings: string;
@@ -44,6 +47,8 @@ export declare const translations: {
         notification: string;
         email: string;
         lastLogin: string;
+        lastLoginAt: string;
+        lastLoginIp: string;
         createdAt: string;
         registerFrom: string;
         unknown: string;
@@ -74,5 +79,6 @@ export declare const translations: {
         currentPassport: string;
         switchProfile: string;
         userInfo: string;
+        myInfo: string;
     };
 };

package/es/UserCenter/libs/locales.js

@@ -6,6 +6,8 @@ export const translations = {
     notification: "\u901A\u77E5",
     email: "\u90AE\u7BB1\u5730\u5740",
     lastLogin: "\u4E0A\u6B21\u767B\u5F55",
+    lastLoginAt: "\u4E0A\u6B21\u767B\u5F55\u65F6\u95F4",
+    lastLoginIp: "\u4E0A\u6B21\u767B\u5F55\u5730\u5740",
     createdAt: "\u521B\u5EFA\u65F6\u95F4",
     registerFrom: "\u6CE8\u518C\u6765\u6E90",
     unknown: "\u672A\u77E5",
@@ -35,7 +37,8 @@ export const translations = {
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
     switchProfile: "\u5207\u6362",
-    userInfo: "\u4E2A\u4EBA\u4FE1\u606F"
+    userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
+    myInfo: "\u6211\u7684\u4FE1\u606F"
   },
   en: {
     settings: "Settings",
@@ -44,6 +47,8 @@ export const translations = {
     notification: "Notification",
     email: "Email",
     lastLogin: "Last Login & IP",
+    lastLoginAt: "Last Login",
+    lastLoginIp: "Last IP",
     createdAt: "Created At",
     registerFrom: "Register From",
     unknown: "Unknown",
@@ -73,6 +78,7 @@ export const translations = {
     toPublic: 'Public "{name}" page',
     currentPassport: "Passport currently in use",
     switchProfile: "Switch",
-    userInfo: "User Info"
+    userInfo: "User Info",
+    myInfo: "My Info"
   }
 };

package/lib/Footer/index.js

@@ -11,6 +11,8 @@ var _Theme = require("@arcblock/ux/lib/Theme");
 var _reactErrorBoundary = require("react-error-boundary");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _ErrorBoundary = require("@arcblock/ux/lib/ErrorBoundary");
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _omit = _interopRequireDefault(require("lodash/omit"));
 var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
 var _internalFooter = _interopRequireDefault(require("./internal-footer"));
 var _utils = require("../utils");
@@ -73,7 +75,8 @@ function Footer({
     theme: themeOverrides,
     children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StyledInternalFooter, {
       ...props,
-      ...rest,
+      ...(0, _omit.default)(rest, ["bordered"]),
+      $bordered: rest?.bordered,
       $bgcolor: theme?.background?.footer
     })
   });
@@ -88,7 +91,9 @@ Footer.defaultProps = {
   theme: null
 };
 const StyledInternalFooter = (0, _Theme.styled)(_internalFooter.default)`
-  border-top: 1px solid #eee;
+  ${({
+  $bordered
+}) => `border-top: 1px solid ${$bordered ? _Colors.temp.strokeSep : "#eee"};`}
   color: ${props => props.theme.palette.grey[600]};
   ${({
   $bgcolor

package/lib/Header/index.js

@@ -13,6 +13,8 @@ var _Theme = require("@arcblock/ux/lib/Theme");
 var _Header = require("@arcblock/ux/lib/Header");
 var _NavMenu = _interopRequireDefault(require("@arcblock/ux/lib/NavMenu"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Colors = require("@arcblock/ux/lib/Colors");
+var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _overridableThemeProvider = _interopRequireDefault(require("../common/overridable-theme-provider"));
 var _types = require("../types");
@@ -119,7 +121,8 @@ function Header({
         alt: "logo"
       }),
       addons: headerAddons,
-      ...rest,
+      ...(0, _omit.default)(rest, ["bordered"]),
+      $bordered: rest?.bordered,
       $bgcolor: theme?.background?.header,
       children: !navItems?.length ? null : ({
         isMobile
@@ -163,6 +166,9 @@ const StyledUxHeader = (0, _Theme.styled)(_Header.ResponsiveHeader)`
   .header-logo {
     min-width: 44px;
   }
+  ${({
+  $bordered
+}) => $bordered ? `border-bottom: 1px solid ${_Colors.temp.strokeSep};` : ""}
   ${props => props.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;

package/lib/UserCenter/components/passport.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { StackProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
 export default function Passport({ user, ...rest }: {
     user: User;
-} & StackProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/passport.js

@@ -51,20 +51,27 @@ function Passport({
     return theme?.palette?.primary?.main || _Colors.temp.textBase;
   }, [theme?.palette?.primary?.main]);
   if (passports.length === 0) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-      children: t("noPassport")
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+        children: t("noPassport")
+      })
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-    direction: "row",
-    spacing: 3,
-    flexWrap: "wrap",
-    useFlexGap: true,
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     ...rest,
+    sx: {
+      display: "grid",
+      gridTemplateColumns: {
+        xs: "repeat(2, 1fr)",
+        sm: "repeat(3, 1fr)",
+        md: "repeat(2, 1fr)"
+      },
+      gap: 2.5,
+      ...rest.sx
+    },
     children: passports.map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)(_Passport.default, {
       passport: x,
       user,
-      width: 200,
       color: window.blocklet.passportColor,
       createPassportSvg: _utils.createPassportSvg,
       title: currentRole && currentRole.role === x.role ? t("currentPassport") : "",
@@ -79,8 +86,8 @@ function Passport({
           px: 2,
           display: "flex",
           justifyContent: "center",
-          backgroundColor: "white",
-          boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important"
+          backgroundColor: _Colors.temp.backgroundsBgComponent,
+          boxShadow: currentRole && currentRole.role === x.role ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important` : "unset"
         },
         ".passport-item__body": {
           marginLeft: "0 !important"

package/lib/UserCenter/components/user-basic-info.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
-export default function UserBasicInfo({ user, isMyself, switchPassport, switchProfile, openSettings, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, openSettings, ...rest }: {
     user: User;
-    isMyself: boolean;
+    isMyself?: boolean;
+    showFullDid?: boolean;
     switchPassport: () => void;
     switchProfile: () => void;
     openSettings: () => void;

package/lib/UserCenter/components/user-basic-info.js

@@ -22,6 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function UserBasicInfo({
   user,
   isMyself = true,
+  showFullDid = true,
   switchPassport,
   switchProfile,
   openSettings,
@@ -53,6 +54,7 @@ function UserBasicInfo({
         backgroundColor: "#fff",
         position: "relative",
         overflow: "hidden",
+        mb: 1.5,
         ...(isMyself ? {
           cursor: "pointer",
           "&:hover": {
@@ -77,7 +79,7 @@ function UserBasicInfo({
       },
       onClick: isMyself ? switchProfile : _noop.default
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-      variant: "h5",
+      variant: "h6",
       sx: {
         fontWeight: "bold",
         display: "flex",
@@ -95,7 +97,7 @@ function UserBasicInfo({
           fontSize: "12px",
           color: _Colors.temp.textBase,
           borderColor: _Colors.temp.strokeBorderStrong,
-          backgroundColor: "white",
+          backgroundColor: "transparent",
           textTransform: "capitalize",
           pr: 1,
           pl: 0.5,
@@ -116,7 +118,9 @@ function UserBasicInfo({
       }) : null]
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
       did: user.did,
-      copyable: false
+      copyable: false,
+      compact: !showFullDid,
+      responsive: !showFullDid
     }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
       sx: {
         borderRadius: 2,
@@ -124,14 +128,7 @@ function UserBasicInfo({
         backgroundColor: "white",
         border: `1px solid ${_Colors.temp.strokeBorderBase}`,
         position: "absolute",
-        bottom: {
-          xs: "unset",
-          md: 0
-        },
-        top: {
-          xs: 0,
-          md: "unset"
-        },
+        top: 0,
         right: 0
       },
       disableFocusRipple: true,

package/lib/UserCenter/components/user-center.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import type { PaperProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, }: {
     readonly children: any;
     readonly currentTab: string;
-    readonly contentProps?: PaperProps;
+    readonly contentProps?: BoxProps;
     readonly disableAutoRedirect?: boolean;
     readonly autoPopupSetting?: boolean;
     readonly hideFooter?: boolean;

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

@@ -155,9 +155,6 @@ function UserCenter({
         settings: {
           userCenterTabs
         },
-        sx: {
-          mt: -2
-        },
         onSave: async () => {
           await privacyState.runAsync();
           return privacyState.data;
@@ -186,116 +183,144 @@ function UserCenter({
         error: formatError
       });
     }
-    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        maxWidth: 880,
-        margin: "0 auto",
-        p: 3,
-        display: "flex",
-        gap: 2.5,
-        flexDirection: "column"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
-        isMyself,
-        switchPassport: session.switchPassport,
-        switchProfile: session.switchProfile,
-        openSettings,
-        user: userState.data
-      }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-          gridArea: "tabs",
-          overflow: "auto",
-          padding: "1px"
+          flex: 1
         },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
-          variant: "card",
-          tabs: userCenterTabs,
-          current: currentTab,
-          onChange: handleChangeTab
-        }), !privacyState.data || privacyState.loading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        children: [userState?.data?.fullName ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "h4",
+          sx: {
+            py: 1.5,
+            fontWeight: 700,
+            display: {
+              xs: "none",
+              md: "block"
+            }
+          },
+          children: userState.data.fullName
+        }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+          isMyself,
+          switchPassport: session.switchPassport,
+          switchProfile: session.switchProfile,
+          openSettings,
+          user: userState.data,
+          showFullDid: false,
+          sx: {
+            display: {
+              md: "none",
+              xs: "block"
+            },
+            mb: 1.5
+          }
+        }), userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           sx: {
-            height: "100%",
-            minWidth: "160px",
-            minHeight: "160px",
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
+            overflow: "auto",
+            padding: "1px"
           },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Tabs.default, {
+            variant: "line",
+            tabs: userCenterTabs,
+            current: currentTab,
+            onChange: handleChangeTab,
             sx: {
-              color: _Colors.temp.primary100
+              mb: 1.5
             }
-          })
-        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
-            variant: "outlined",
+          }), !privacyState.data || privacyState.loading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
-              mt: 2,
-              borderRadius: 2,
-              p: 2
+              height: "100%",
+              minWidth: "160px",
+              minHeight: "160px",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
             },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
-              children: t("underProtected")
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              sx: {
+                color: _Colors.temp.primary100
+              }
             })
           }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-            children: children && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
-              ...contentProps,
-              variant: "outlined",
-              sx: {
-                mt: 2,
-                borderRadius: 2,
-                p: 2,
-                ...contentProps?.sx
-              },
-              children
+            children: currentActiveTab?.protected && !isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
+                children: t("underProtected")
+              })
+            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: children && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+                ...contentProps,
+                children
+              })
             })
-          })
-        })]
-      }) : null, !isMyself && userCenterTabs.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          gridArea: "tabs",
-          overflow: "auto",
-          padding: "1px"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
-          variant: "outlined",
+          })]
+        }) : null, userCenterTabs.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           sx: {
-            borderRadius: 2,
-            p: 2
+            display: {
+              xs: isMyself ? "none" : "block",
+              md: "block"
+            },
+            py: 3
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Empty.default, {
             children: t("emptyContent")
           })
-        })
-      }) : null, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h6",
-            sx: {
-              fontWeight: 600,
-              mb: 1.5
-            },
-            children: t("passport")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
-            user: userState.data
-          })]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h6",
-            sx: {
-              fontWeight: 600,
-              mb: 1.5
-            },
-            children: t("userInfo")
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
-            user: userState.data,
-            sx: {
-              padding: 3,
-              borderRadius: 3
+        }) : null]
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          display: {
+            xs: "none",
+            md: "block"
+          },
+          width: "1px",
+          my: -3,
+          backgroundColor: _Colors.temp.strokeSep
+        }
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          width: {
+            sx: "100%",
+            md: 400
+          },
+          maxWidth: "100%",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2.5
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_userBasicInfo.default, {
+          isMyself,
+          switchPassport: session.switchPassport,
+          switchProfile: session.switchProfile,
+          openSettings,
+          user: userState.data,
+          sx: {
+            display: {
+              xs: "none",
+              md: "block"
             }
+          }
+        }), isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontWeight: 600,
+                mb: 1.5
+              },
+              children: t("myInfo")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfo.default, {
+              user: userState.data
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontWeight: 600,
+                mb: 1.5
+              },
+              children: t("passport")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_passport.default, {
+              user: userState.data
+            })]
           })]
-        })]
-      }) : null]
+        }) : null]
+      })]
     });
   }, [userState, userCenterTabs]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
@@ -310,11 +335,26 @@ function UserCenter({
       flexDirection: "column"
     },
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_.Header, {
+      bordered: true,
       ...headerProps
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       flex: 1,
+      sx: {
+        width: "100%",
+        maxWidth: 1200,
+        margin: "0 auto",
+        p: 3,
+        display: "flex",
+        alignItems: "stretch",
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        },
+        gap: 2.5
+      },
       children: [content, confirmHolder]
     }), hideFooter ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_.Footer, {
+      bordered: true,
       ...footerProps
     })]
   });

package/lib/UserCenter/components/user-info-item.js

@@ -14,33 +14,25 @@ function UserInfoItem({
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     ...rest,
     sx: {
-      display: "grid",
-      gridTemplateColumns: "auto 1fr",
-      gridTemplateAreas: `"icon title" ". content"`,
+      display: "flex",
       alignItems: "center",
-      rowGap: 0.75,
-      columnGap: 1,
+      justifyContent: "space-between",
       ...rest.sx
     },
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
       sx: {
-        gridArea: "icon",
         display: "flex",
-        alignItems: "center"
-      },
-      children: data.icon
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      sx: {
+        alignItems: "center",
         color: _Colors.temp.textBase,
-        gridArea: "title",
-        fontSize: "14px"
+        fontSize: "14px",
+        gap: 1,
+        fontWeight: 500
       },
-      children: data.title
+      children: [data.icon, data.title]
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       sx: {
         color: _Colors.temp.textSubtitle,
         whiteSpace: "pre-wrap",
-        gridArea: "content",
         fontSize: "14px"
       },
       children: data.content

package/lib/UserCenter/components/user-info.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { PaperProps } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import type { User } from '../../@types';
 export default function UserInfo({ user, ...rest }: {
     user: User;
-} & PaperProps): import("react").JSX.Element;
+} & BoxProps): import("react").JSX.Element;

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

@@ -12,6 +12,7 @@ var _mailOutlineRounded = _interopRequireDefault(require("@iconify-icons/materia
 var _scheduleOutlineRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/schedule-outline-rounded"));
 var _moreTimeRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/more-time-rounded"));
 var _captivePortalRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/captive-portal-rounded"));
+var _settingsInputAntennaRounded = _interopRequireDefault(require("@iconify-icons/material-symbols/settings-input-antenna-rounded"));
 var _RelativeTime = _interopRequireDefault(require("@arcblock/ux/lib/RelativeTime"));
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
@@ -49,15 +50,20 @@ function UserInfo({
       fontSize: 16,
       icon: _scheduleOutlineRounded.default
     }),
-    title: t("lastLogin"),
-    content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: user?.lastLoginAt || user?.lastLoginIp ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [user?.lastLoginAt ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
-          locale,
-          value: user?.lastLoginAt
-        }) : null, user?.lastLoginAt && user?.lastLoginIp ? /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}) : null, user?.lastLoginIp]
-      }) : t("unknown")
-    })
+    title: t("lastLoginAt"),
+    content: user?.lastLoginAt ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_RelativeTime.default, {
+      locale,
+      value: user?.lastLoginAt,
+      relativeRange: 3 * 86400 * 1e3
+    }) : t("unknown")
+  });
+  userInfoListData.push({
+    icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
+      fontSize: 16,
+      icon: _settingsInputAntennaRounded.default
+    }),
+    title: t("lastLoginIp"),
+    content: user?.lastLoginIp || t("unknown")
   });
   userInfoListData.push({
     icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_react.Icon, {
@@ -78,17 +84,12 @@ function UserInfo({
     title: t("registerFrom"),
     content: readableProvider
   });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
-    variant: "outlined",
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     ...rest,
     sx: {
       display: "flex",
-      flexDirection: {
-        xs: "column",
-        md: "row"
-      },
-      alignItems: "flex-start",
-      gap: 3,
+      flexDirection: "column",
+      gap: 1.5,
       ...rest?.sx
     },
     children: userInfoListData.map(item => /* @__PURE__ */(0, _jsxRuntime.jsx)(_userInfoItem.default, {