@blocklet/ui-react 2.9.18 → 2.9.20

package/lib/UserCenter/components/storage/item.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _spaceConnected = _interopRequireDefault(require("./icons/space-connected.svg?react"));
+var _DID = _interopRequireDefault(require("@arcblock/ux/lib/DID"));
+var _previewNft = _interopRequireDefault(require("./preview-nft"));
+var _useMobile = _interopRequireDefault(require("../../../hooks/use-mobile"));
+var _spaces = require("../../../libs/spaces");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SpaceItem({
+  spaceGateway,
+  connected,
+  onDisconnect,
+  ...rest
+}) {
+  const isMobile = (0, _useMobile.default)({});
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const handleOnDisconnect = async () => {
+    try {
+      await onDisconnect();
+      _Toast.default.success(t("storage.spaces.gateway.delete.succeeded", {
+        name: spaceGateway.name
+      }));
+    } catch (error) {
+      console.error(error);
+      _Toast.default.error(error.message);
+    }
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(BoxContainer, {
+    style: {
+      position: "relative"
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        backgroundColor: connected ? "#F0FDFF" : "inherit",
+        "&:hover": {
+          backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
+        },
+        borderRadius: "8px"
+      },
+      display: "flex",
+      padding: "12px 20px",
+      ...rest,
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        display: "flex",
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_previewNft.default, {
+          alt: spaceGateway.did,
+          src: (0, _spaces.getSpaceNftDisplayUrlFromEndpoint)(spaceGateway.endpoint)
+        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        className: "spaces-info",
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        sx: {
+          marginLeft: "20px",
+          padding: "0px 0px"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          className: "spaces-info",
+          display: "flex",
+          maxWidth: "360px",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: connected ? "primary" : "inherit",
+            fontSize: "1rem",
+            fontWeight: "bold",
+            children: spaceGateway.name
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+            label: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_spaceConnected.default, {
+                style: {
+                  marginRight: "4px"
+                }
+              }), t("storage.spaces.connected.tag")]
+            }),
+            variant: "outlined",
+            size: "small",
+            style: {
+              marginLeft: isMobile ? void 0 : "20px",
+              fontWeight: "bold"
+            }
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "spaces-address",
+          display: "flex",
+          color: "#9397A1",
+          marginTop: "8px",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              display: "inline-flex",
+              alignItems: "center",
+              fontSize: "14px"
+            },
+            color: "#9397A1",
+            children: spaceGateway.did && /* @__PURE__ */(0, _jsxRuntime.jsx)(_DID.default, {
+              copyable: false,
+              size: 14,
+              compact: true,
+              responsive: false,
+              did: spaceGateway.did
+            })
+          })
+        })]
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      className: "selected-container selected",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Check.default, {
+        className: "selected-icon"
+      })
+    })]
+  });
+}
+const BoxContainer = (0, _styled.default)(_material.Box)`
+  .selected-container {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    display: flex;
+    -webkit-box-pack: end;
+    justify-content: flex-end;
+    align-items: flex-end;
+    width: 32px;
+    height: 32px;
+    border-radius: 0px 0px 8px;
+    color: rgb(255, 255, 255);
+    overflow: hidden;
+    transition: all 0.4s ease 0s;
+
+    &::after {
+      position: absolute;
+      z-index: 0;
+      left: 60px;
+      top: 60px;
+      display: block;
+      width: 0px;
+      height: 0px;
+      border-width: 16px;
+      border-style: solid;
+      border-color: transparent #1dc1c7 #1dc1c7 transparent;
+      transition: all 0.1s ease 0s;
+      content: '';
+    }
+
+    .selected-icon {
+      visibility: hidden;
+      width: 60%;
+      height: 60%;
+      position: relative;
+      z-index: 2;
+      margin: 0px 1px 1px 0px;
+      font-size: 16px;
+      transition: all 0.2s ease 0s;
+    }
+  }
+
+  .selected-container.selected {
+    &::after {
+      left: 0px;
+      top: 0px;
+    }
+
+    .selected-icon {
+      visibility: visible;
+    }
+  }
+`;
+module.exports = SpaceItem;

package/lib/UserCenter/components/storage/preview-nft.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function PreviewSpaceNft({ src, alt }: {
+    src: string;
+    alt: string;
+}): import("react").JSX.Element;
+export default PreviewSpaceNft;

package/lib/UserCenter/components/storage/preview-nft.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _reactPlaceholder = _interopRequireDefault(require("react-placeholder"));
+var _material = require("@mui/material");
+var _CloseOutlined = _interopRequireDefault(require("@mui/icons-material/CloseOutlined"));
+var _emptySpacesNft = _interopRequireDefault(require("./icons/empty-spaces-nft.svg?react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function PreviewSpaceNft({
+  src,
+  alt
+}) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = (0, _react.useState)(false);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactPlaceholder.default, {
+      ready: showEmptySpaceNFT,
+      customPlaceholder:
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */
+      (0, _jsxRuntime.jsx)("img", {
+        style: {
+          cursor: "pointer"
+        },
+        alt,
+        src,
+        width: "58px",
+        height: "58px",
+        onError: () => setShowEmptySpaceNFT(true),
+        onClick: handleOpen
+      }),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
+        style: {
+          cursor: "pointer",
+          width: "58px",
+          height: "58px"
+        },
+        onClick: handleOpen
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Dialog, {
+      open,
+      onClose: handleClose,
+      "aria-labelledby": "preview-space-nft-display",
+      "aria-describedby": "preview space nft display",
+      fullWidth: true,
+      maxWidth: "md",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.DialogContent, {
+        style: {
+          padding: "8px 8px",
+          backgroundColor: "rgba(0,0,0,0.8)"
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
+          color: "inherit",
+          onClick: handleClose,
+          "aria-label": "close",
+          style: {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            color: "white"
+          },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_CloseOutlined.default, {})
+        }), showEmptySpaceNFT ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_emptySpacesNft.default, {
+          style: {
+            width: "100%",
+            height: "75vh"
+          }
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)("img", {
+          src,
+          alt: "",
+          style: {
+            width: "100%",
+            height: "75vh",
+            objectFit: "contain"
+          }
+        })]
+      })
+    })]
+  });
+}
+module.exports = PreviewSpaceNft;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PaperProps } from '@mui/material';
-export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, }: {
+export default function UserCenter({ children, currentTab, contentProps, disableAutoRedirect, autoPopupSetting, hideFooter, headerProps, footerProps, userDid, }: {
     readonly children: any;
     readonly currentTab: string;
     readonly contentProps?: PaperProps;
@@ -9,4 +9,5 @@ export default function UserCenter({ children, currentTab, contentProps, disable
     readonly hideFooter?: boolean;
     readonly headerProps?: object;
     readonly footerProps?: object;
+    readonly userDid?: string;
 }): import("react").JSX.Element | null;

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

@@ -35,7 +35,8 @@ function UserCenter({
   autoPopupSetting = false,
   hideFooter = false,
   headerProps = {},
-  footerProps = {}
+  footerProps = {},
+  userDid
 }) {
   const {
     locale
@@ -46,6 +47,9 @@ function UserCenter({
   const sessionCtx = (0, _react.useContext)(_Session.SessionContext);
   const session = sessionCtx?.session;
   const currentDid = (0, _ahooks.useCreation)(() => {
+    if (userDid) {
+      return userDid;
+    }
     const currentUrl = window.location.href;
     const query = (0, _ufo.getQuery)(currentUrl);
     if (query?.did) {
@@ -55,7 +59,7 @@ function UserCenter({
       return query.did;
     }
     return session?.user?.did;
-  }, [session?.user?.did]);
+  }, [session?.user?.did, userDid]);
   const isMyself = (0, _ahooks.useCreation)(() => {
     if (session?.user) {
       return currentDid === session?.user?.did;
@@ -266,9 +270,9 @@ function UserCenter({
       }) : null, isMyself ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h5",
+            variant: "h6",
             sx: {
-              fontWeight: "bold",
+              fontWeight: 600,
               mb: 1.5
             },
             children: t("passport")
@@ -277,9 +281,9 @@ function UserCenter({
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "h5",
+            variant: "h6",
             sx: {
-              fontWeight: "bold",
+              fontWeight: 600,
               mb: 1.5
             },
             children: t("userInfo")

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

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

package/lib/UserCenter/libs/api.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.api = void 0;
+Object.defineProperty(exports, "axios", {
+  enumerable: true,
+  get: function () {
+    return _axios.default;
+  }
+});
+var _axios = _interopRequireDefault(require("axios"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+_axios.default.defaults.timeout = 10 * 1e3;
+const api = exports.api = _axios.default.create();

package/lib/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;
@@ -57,6 +58,7 @@ export declare const translations: {
         emptyField: string;
         notificationManagement: string;
         privacyManagement: string;
+        storageManagement: string;
         emptyContent: string;
         underProtected: string;
         noUserFound: string;

package/lib/UserCenter/libs/locales.js

@@ -29,6 +29,7 @@ const translations = exports.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"
@@ -63,6 +64,7 @@ const translations = exports.translations = {
     emptyField: "Empty field",
     notificationManagement: "Notification",
     privacyManagement: "Privacy",
+    storageManagement: "Storage",
     emptyContent: "Empty",
     underProtected: "This page has protected privacy",
     noUserFound: "No user found",

package/lib/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/lib/contexts/config-user-space.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfigUserSpaceContext = exports.ConfigUserSpaceConsumer = void 0;
+exports.ConfigUserSpaceProvider = ConfigUserSpaceProvider;
+exports.useConfigUserSpaceContext = useConfigUserSpaceContext;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Session = require("@arcblock/did-connect/lib/Session");
+const ConfigUserSpaceContext = exports.ConfigUserSpaceContext = (0, _react.createContext)({});
+const {
+  Provider,
+  Consumer
+} = ConfigUserSpaceContext;
+exports.ConfigUserSpaceConsumer = Consumer;
+function ConfigUserSpaceProvider({
+  children
+}) {
+  const [loading] = (0, _react.useState)(false);
+  const {
+    session
+  } = (0, _react.useContext)(_Session.SessionContext);
+  const {
+    user
+  } = session;
+  const [spaceGateway, setSpaceGateway] = (0, _react.useState)();
+  const storageEndpoint = (0, _react.useMemo)(() => {
+    return user?.didSpace?.endpoint;
+  }, [user?.didSpace]);
+  (0, _react.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__ */(0, _jsxRuntime.jsx)(Provider, {
+    value: {
+      loading,
+      spaceGateway,
+      deleteSpaceGateway,
+      updateSpaceGateway,
+      storageEndpoint,
+      settingStorageEndpoint,
+      hasStorageEndpoint
+    },
+    children
+  });
+}
+function useConfigUserSpaceContext() {
+  const res = (0, _react.useContext)(ConfigUserSpaceContext);
+  return res;
+}

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

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

package/lib/hooks/use-mobile.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = useMobile;
+var _material = require("@mui/material");
+function useMobile({
+  key = "sm"
+}) {
+  const theme = (0, _material.useTheme)();
+  return (0, _material.useMediaQuery)(theme.breakpoints.down(key));
+}

package/lib/libs/spaces.d.ts

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

package/lib/libs/spaces.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSpaceNftDisplayUrlFromEndpoint = getSpaceNftDisplayUrlFromEndpoint;
+var _ufo = require("ufo");
+function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
+  const prefix = endpoint.replace(/\/api\/space\/.+/, "");
+  const strArray = endpoint.replace(/\/$/, "").split("/");
+  const spaceDid = strArray.at(-4);
+  return (0, _ufo.joinURL)(prefix, `/api/space/nft/display?spaceDid=${spaceDid}`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.18",
+  "version": "2.9.20",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "1.16.23-beta-aeb9f5bd",
-    "@arcblock/did-connect": "^2.9.18",
-    "@arcblock/ux": "^2.9.18",
+    "@arcblock/did-connect": "^2.9.20",
+    "@arcblock/ux": "^2.9.20",
     "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -77,7 +77,9 @@
     "iconify-icon": "^1.0.8",
     "iconify-icons-material-symbols-400": "^0.0.1",
     "is-url": "^1.2.4",
+    "lodash": "^4.17.21",
     "react-error-boundary": "^3.1.4",
+    "react-placeholder": "^4.1.0",
     "ufo": "^1.3.2"
   },
   "peerDependencies": {
@@ -96,5 +98,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "435fbdda42f68b81af5b09ce49fc874142d17e74"
+  "gitHead": "56354c3f25c0d62ae39d79f07c648a7c0d9e66f7"
 }

package/src/@types/index.ts

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

package/src/UserCenter/components/settings.tsx

@@ -4,11 +4,12 @@ import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-
+import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import { translations } from '../libs/locales';
 import Notification from './notification';
 import Privacy from './privacy';
 import { User, UserCenterTab } from '../../@types';
+import DidSpace from './storage';
 
 export default function Settings({
   user,
@@ -48,7 +49,12 @@ export default function Settings({
         value: 'privacy',
         content: <Privacy configList={privacyConfigList} onSave={onSave} />,
       },
-    ];
+      user?.didSpace?.endpoint && {
+        label: t('storageManagement'),
+        value: 'storage',
+        content:  <ConfigUserSpaceProvider><DidSpace /></ConfigUserSpaceProvider>,
+      },
+    ].filter(Boolean);
   }, [user, privacyConfigList]);
   const currentState = useReactive({
     tab: tabs[0].value,