@blocklet/ui-react 2.9.17 → 2.9.19

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

@@ -1,11 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { Box, CircularProgress, IconButton, Paper, Typography } from "@mui/material";
+import { Box, CircularProgress, Paper, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn, useMount, useRequest } from "ahooks";
-import { Icon } from "@iconify/react";
-import SettingsOutlineRoundedIcon from "@iconify-icons/material-symbols/settings-outline-rounded";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import Avatar from "@arcblock/ux/lib/Avatar";
 import Tabs from "@arcblock/ux/lib/Tabs";
 import Empty from "@arcblock/ux/lib/Empty";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
@@ -15,9 +12,8 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
 import cloneDeep from "lodash/cloneDeep";
 import { getQuery, withQuery } from "ufo";
-import Header from "../../Header/index.js";
+import { Header, Footer } from "../..//index.js";
 import { translations } from "../libs/locales.js";
-import banner from "../assets/banner.png";
 import UserInfo from "./user-info.js";
 import UserBasicInfo from "./user-basic-info.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../../blocklets.js";
@@ -29,7 +25,10 @@ export default function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false
+  autoPopupSetting = false,
+  hideFooter = false,
+  headerProps = {},
+  footerProps = {}
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -134,26 +133,6 @@ export default function UserCenter({
       });
     }
   });
-  const xsGridTemplateAreas = useCreation(() => {
-    return [
-      '"avatar settings"',
-      '"basicInfo basicInfo"',
-      userCenterTabs.length > 0 || !isMyself ? '"tabs tabs"' : null,
-      isMyself ? '"passport passport"' : null,
-      isMyself ? '"extraInfo extraInfo"' : null
-    ];
-  }, [userCenterTabs, isMyself]);
-  const mdGridTemplateAreas = useCreation(() => {
-    if (!isMyself) {
-      return ['"avatar"', '"basicInfo"', '"tabs"'];
-    }
-    return [
-      '"avatar settings"',
-      '"basicInfo extraInfo"',
-      userCenterTabs.length > 0 ? '"tabs extraInfo"' : null,
-      '"passport extraInfo"'
-    ];
-  }, [userCenterTabs, isMyself]);
   const openSettings = useMemoizedFn(() => {
     confirmApi.open({
       title: t("settings"),
@@ -196,77 +175,22 @@ export default function UserCenter({
       Box,
       {
         sx: {
-          maxWidth: 1200,
+          maxWidth: 880,
           margin: "0 auto",
-          px: 3,
-          pb: 3,
-          display: "grid",
+          p: 3,
+          display: "flex",
           gap: 2.5,
-          gridTemplateAreas: {
-            xs: xsGridTemplateAreas.filter(Boolean).join(" "),
-            md: mdGridTemplateAreas.filter(Boolean).join(" ")
-          },
-          gridTemplateRows: {
-            xs: "64px auto auto auto",
-            md: "64px auto 1fr"
-          },
-          gridTemplateColumns: {
-            xs: "1fr",
-            md: isMyself ? "1fr 300px" : "1fr"
-          }
+          flexDirection: "column"
         },
         children: [
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              src: userState.data?.avatar,
-              did: userState.data?.did,
-              size: 120,
-              variant: "circle",
-              shape: "circle",
-              style: {
-                border: "4px solid #fff",
-                transform: "translateY(-50%)",
-                borderRadius: "100%",
-                gridArea: "avatar",
-                backgroundColor: "#fff"
-              }
-            }
-          ) }),
-          isMyself ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                gridArea: "settings",
-                display: "flex",
-                justifyContent: "flex-end",
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  sx: {
-                    borderRadius: 2,
-                    color: colors.textBase,
-                    backgroundColor: "white",
-                    border: `1px solid ${colors.strokeBorderBase}`
-                  },
-                  disableFocusRipple: true,
-                  onClick: openSettings,
-                  children: /* @__PURE__ */ jsx(Icon, { icon: SettingsOutlineRoundedIcon })
-                }
-              )
-            }
-          ) : null,
           /* @__PURE__ */ jsx(
             UserBasicInfo,
             {
               isMyself,
               switchPassport: session.switchPassport,
-              user: userState.data,
-              sx: {
-                gridArea: "basicInfo"
-              }
+              switchProfile: session.switchProfile,
+              openSettings,
+              user: userState.data
             }
           ),
           userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
@@ -326,41 +250,28 @@ export default function UserCenter({
             }
           ) : null,
           isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  gridArea: "passport"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: "Passport" }),
-                  /* @__PURE__ */ jsx(Passport, { user: userState.data })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                sx: {
-                  gridArea: "extraInfo"
-                },
-                children: /* @__PURE__ */ jsx(
-                  UserInfo,
-                  {
-                    user: userState.data,
-                    sx: {
-                      padding: 3,
-                      borderRadius: 3
-                    }
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: t("passport") }),
+              /* @__PURE__ */ jsx(Passport, { user: userState.data })
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontWeight: "bold", mb: 1.5 }, children: t("userInfo") }),
+              /* @__PURE__ */ jsx(
+                UserInfo,
+                {
+                  user: userState.data,
+                  sx: {
+                    padding: 3,
+                    borderRadius: 3
                   }
-                )
-              }
-            )
+                }
+              )
+            ] })
           ] }) : null
         ]
       }
     );
-  }, [userState, userCenterTabs, mdGridTemplateAreas, xsGridTemplateAreas]);
+  }, [userState, userCenterTabs]);
   if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
     window.location.replace(formattedBlocklet?.navigation?.userCenter[0]?.link);
     return null;
@@ -370,27 +281,17 @@ export default function UserCenter({
     {
       sx: {
         backgroundColor: colors.backgroundsBgSubtitle,
-        minHeight: "100vh"
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsx(Header, {}),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              pt: {
-                xs: `${400 / 1280 * 100}%`,
-                sm: `${300 / 1280 * 100}%`,
-                md: `${200 / 1280 * 100}%`
-              },
-              backgroundImage: `url(${banner})`,
-              backgroundSize: "cover",
-              minHeight: "60px"
-            }
-          }
-        ),
-        content,
-        confirmHolder
+        /* @__PURE__ */ jsx(Header, { ...headerProps }),
+        /* @__PURE__ */ jsxs(Box, { flex: 1, children: [
+          content,
+          confirmHolder
+        ] }),
+        hideFooter ? null : /* @__PURE__ */ jsx(Footer, { ...footerProps })
       ]
     }
   );

package/es/UserCenter/components/user-info-item.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BoxProps } from '@mui/material';
 type TUserInfoItemProps = {
     data: {
         icon: any;
@@ -6,5 +7,5 @@ type TUserInfoItemProps = {
         content: any;
     };
 };
-export default function UserInfoItem({ data }: TUserInfoItemProps): import("react").JSX.Element;
+export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & BoxProps): import("react").JSX.Element;
 export {};

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

@@ -1,17 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
-export default function UserInfoItem({ data }) {
+export default function UserInfoItem({ data, ...rest }) {
   return /* @__PURE__ */ jsxs(
     Box,
     {
+      ...rest,
       sx: {
         display: "grid",
         gridTemplateColumns: "auto 1fr",
         gridTemplateAreas: `"icon title" ". content"`,
         alignItems: "center",
         rowGap: 0.75,
-        columnGap: 1
+        columnGap: 1,
+        ...rest.sx
       },
       children: [
         /* @__PURE__ */ jsx(

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

@@ -58,11 +58,15 @@ export default function UserInfo({
       ...rest,
       sx: {
         display: "flex",
-        flexDirection: "column",
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        },
+        alignItems: "flex-start",
         gap: 3,
         ...rest?.sx
       },
-      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item }, item.title))
+      children: userInfoListData.map((item) => /* @__PURE__ */ jsx(UserInfoItem, { data: item, sx: { flex: 1 } }, item.title))
     }
   );
 }

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

@@ -0,0 +1,3 @@
+import axios from 'axios';
+declare const api: import("axios").AxiosInstance;
+export { axios, api };

package/es/UserCenter/libs/api.js

@@ -0,0 +1,4 @@
+import axios from "axios";
+axios.defaults.timeout = 10 * 1e3;
+const api = axios.create();
+export { axios, api };

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

@@ -23,6 +23,7 @@ export declare const translations: {
         noUserFound: string;
         notificationManagement: string;
         privacyManagement: string;
+        storageManagement: string;
         webhook: {
             url: string;
             slack: string;
@@ -33,6 +34,8 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        switchProfile: string;
+        userInfo: string;
     };
     en: {
         settings: string;
@@ -55,6 +58,7 @@ export declare const translations: {
         emptyField: string;
         notificationManagement: string;
         privacyManagement: string;
+        storageManagement: string;
         emptyContent: string;
         underProtected: string;
         noUserFound: string;
@@ -68,5 +72,7 @@ export declare const translations: {
         };
         toPublic: string;
         currentPassport: string;
+        switchProfile: string;
+        userInfo: string;
     };
 };

package/es/UserCenter/libs/locales.js

@@ -23,6 +23,7 @@ export const translations = {
     noUserFound: "\u672A\u627E\u5230\u6307\u5B9A\u7684\u7528\u6237",
     notificationManagement: "\u901A\u77E5\u7BA1\u7406",
     privacyManagement: "\u9690\u79C1\u7BA1\u7406",
+    storageManagement: "\u5B58\u50A8\u7BA1\u7406",
     webhook: {
       url: "\u81EA\u5B9A\u4E49URL",
       slack: "Slack"
@@ -32,7 +33,9 @@ export const translations = {
       invalid: "\u65E0\u6548"
     },
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
-    currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1"
+    currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
+    switchProfile: "\u5207\u6362",
+    userInfo: "\u4E2A\u4EBA\u4FE1\u606F"
   },
   en: {
     settings: "Settings",
@@ -55,6 +58,7 @@ export const translations = {
     emptyField: "Empty field",
     notificationManagement: "Notification",
     privacyManagement: "Privacy",
+    storageManagement: "Storage",
     emptyContent: "Empty",
     underProtected: "This page has protected privacy",
     noUserFound: "No user found",
@@ -67,6 +71,8 @@ export const translations = {
       invalid: "Invalid"
     },
     toPublic: 'Public "{name}" page',
-    currentPassport: "Passport currently in use"
+    currentPassport: "Passport currently in use",
+    switchProfile: "Switch",
+    userInfo: "User Info"
   }
 };

package/es/contexts/config-user-space.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export interface SpaceGateway {
+    did: string;
+    name: string;
+    url: string;
+    endpoint: string;
+}
+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>;
+    storageEndpoint: string;
+    settingStorageEndpoint: SettingStorageEndpoint;
+    hasStorageEndpoint: boolean;
+}
+declare const ConfigUserSpaceContext: import("react").Context<ConfigUserSpaceContextType>;
+declare const Consumer: import("react").Consumer<ConfigUserSpaceContextType>;
+declare function ConfigUserSpaceProvider({ children }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+declare function useConfigUserSpaceContext(): ConfigUserSpaceContextType;
+export { ConfigUserSpaceContext, ConfigUserSpaceProvider, Consumer as ConfigUserSpaceConsumer, useConfigUserSpaceContext, };

package/es/contexts/config-user-space.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useEffect } from "react";
+import { SessionContext } from "@arcblock/did-connect/lib/Session";
+const ConfigUserSpaceContext = createContext({});
+const { Provider, Consumer } = ConfigUserSpaceContext;
+function ConfigUserSpaceProvider({ children }) {
+  const [loading] = useState(false);
+  const { session } = useContext(SessionContext);
+  const { user } = session;
+  const [spaceGateway, setSpaceGateway] = useState();
+  const storageEndpoint = useMemo(() => {
+    return user?.didSpace?.endpoint;
+  }, [user?.didSpace]);
+  useEffect(() => {
+    setSpaceGateway(user?.didSpace);
+  }, [user?.didSpace]);
+  const deleteSpaceGateway = async () => {
+    setSpaceGateway(void 0);
+  };
+  const updateSpaceGateway = async (x) => {
+    setSpaceGateway(x);
+    session.refresh();
+    await settingStorageEndpoint(x.endpoint);
+  };
+  const settingStorageEndpoint = (endpoint) => {
+  };
+  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
+  return /* @__PURE__ */ jsx(
+    Provider,
+    {
+      value: {
+        loading,
+        spaceGateway,
+        deleteSpaceGateway,
+        updateSpaceGateway,
+        storageEndpoint,
+        settingStorageEndpoint,
+        hasStorageEndpoint
+      },
+      children
+    }
+  );
+}
+function useConfigUserSpaceContext() {
+  const res = useContext(ConfigUserSpaceContext);
+  return res;
+}
+export {
+  ConfigUserSpaceContext,
+  ConfigUserSpaceProvider,
+  Consumer as ConfigUserSpaceConsumer,
+  useConfigUserSpaceContext
+};

package/es/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { Breakpoint } from '@mui/material';
+export default function useMobile({ key }: {
+    key?: number | Breakpoint;
+}): boolean;

package/es/hooks/use-mobile.js

@@ -0,0 +1,5 @@
+import { useTheme, useMediaQuery } from "@mui/material";
+export default function useMobile({ key = "sm" }) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/es/libs/spaces.d.ts

@@ -0,0 +1 @@
+export declare function getSpaceNftDisplayUrlFromEndpoint(endpoint: string): string;

package/es/libs/spaces.js

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

package/lib/@types/index.d.ts

@@ -15,6 +15,7 @@ export type User = {
     lastLoginIp?: string;
     createdAt?: string;
     passports?: any[];
+    didSpace: Record<string, any>;
 };
 export type UserCenterTab = {
     value: string;
@@ -32,6 +33,7 @@ export type Session = {
     switchDid: any;
     switchProfile: any;
     switchPassport: any;
+    refresh: Function;
 };
 export type WebhookType = 'slack' | 'api';
 export type WebhookItemData = {

package/lib/Dashboard/index.js

@@ -53,6 +53,8 @@ function Dashboard({
       title: item.title,
       url: item.link,
       icon: item.icon ? /* @__PURE__ */(0, _jsxRuntime.jsx)("iconify-icon", {
+        height: "100%",
+        width: "100%",
         icon: item.icon
       }) : null,
       // https://github.com/ArcBlock/ux/issues/755#issuecomment-1208692620

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BoxProps } from '@mui/material';
 import { User, UserCenterTab } from '../../@types';
 export default function Settings({ user, settings, onSave, ...rest }: {
@@ -7,4 +6,4 @@ export default function Settings({ user, settings, onSave, ...rest }: {
     settings: {
         userCenterTabs: UserCenterTab[];
     };
-} & BoxProps): import("react").JSX.Element | undefined;
+} & BoxProps): any;

package/lib/UserCenter/components/settings.js

@@ -10,9 +10,11 @@ var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _util = require("@arcblock/ux/lib/Locale/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _configUserSpace = require("../../contexts/config-user-space");
 var _locales = require("../libs/locales");
 var _notification = _interopRequireDefault(require("./notification"));
 var _privacy = _interopRequireDefault(require("./privacy"));
+var _storage = _interopRequireDefault(require("./storage"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Settings({
   user,
@@ -50,7 +52,13 @@ function Settings({
         configList: privacyConfigList,
         onSave
       })
-    }];
+    }, user?.didSpace?.endpoint && {
+      label: t("storageManagement"),
+      value: "storage",
+      content: /* @__PURE__ */(0, _jsxRuntime.jsx)(_configUserSpace.ConfigUserSpaceProvider, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_storage.default, {})
+      })
+    }].filter(Boolean);
   }, [user, privacyConfigList]);
   const currentState = (0, _ahooks.useReactive)({
     tab: tabs[0].value

package/lib/UserCenter/components/storage/connect-to.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SpaceGateway } from '../../../contexts/config-user-space';
+declare function ConnectTo({ onConnect, storageEndpoint, ...rest }: {
+    onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
+    storageEndpoint: string;
+}): import("react").JSX.Element;
+export default ConnectTo;