@blocklet/ui-react 2.9.18 → 2.9.19

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

@@ -0,0 +1,147 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Chip, Typography } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import toast from "@arcblock/ux/lib/Toast";
+import CheckIcon from "@mui/icons-material/Check";
+import styled from "@emotion/styled";
+import SpacesConnectedSvg from "./icons/space-connected.svg?react";
+import DidAddress from "@arcblock/ux/lib/DID";
+import PreviewSpaceNft from "./preview-nft.js";
+import useMobile from "../../../hooks/use-mobile.js";
+import { getSpaceNftDisplayUrlFromEndpoint } from "../../../libs/spaces.js";
+function SpaceItem({ spaceGateway, connected, onDisconnect, ...rest }) {
+  const isMobile = useMobile({});
+  const { t } = useLocaleContext();
+  const handleOnDisconnect = async () => {
+    try {
+      await onDisconnect();
+      toast.success(t("storage.spaces.gateway.delete.succeeded", { name: spaceGateway.name }));
+    } catch (error) {
+      console.error(error);
+      toast.error(error.message);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    BoxContainer,
+    {
+      style: {
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              backgroundColor: connected ? "#F0FDFF" : "inherit",
+              "&:hover": {
+                backgroundColor: connected ? "#F0FDFF" : "#FBFBFB"
+              },
+              borderRadius: "8px"
+            },
+            display: "flex",
+            padding: "12px 20px",
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(PreviewSpaceNft, { alt: spaceGateway.did, src: getSpaceNftDisplayUrlFromEndpoint(spaceGateway.endpoint) }) }),
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  className: "spaces-info",
+                  display: "flex",
+                  flexGrow: 1,
+                  flexDirection: "column",
+                  sx: { marginLeft: "20px", padding: "0px 0px" },
+                  children: [
+                    /* @__PURE__ */ jsxs(Box, { className: "spaces-info", display: "flex", maxWidth: "360px", alignItems: "center", children: [
+                      /* @__PURE__ */ jsx(Typography, { color: connected ? "primary" : "inherit", fontSize: "1rem", fontWeight: "bold", children: spaceGateway.name }),
+                      /* @__PURE__ */ jsx(
+                        Chip,
+                        {
+                          label: /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(SpacesConnectedSvg, { style: { marginRight: "4px" } }),
+                            t("storage.spaces.connected.tag")
+                          ] }),
+                          variant: "outlined",
+                          size: "small",
+                          style: { marginLeft: isMobile ? void 0 : "20px", fontWeight: "bold" }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(Box, { className: "spaces-address", display: "flex", color: "#9397A1", marginTop: "8px", children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: {
+                          display: "inline-flex",
+                          alignItems: "center",
+                          fontSize: "14px"
+                        },
+                        color: "#9397A1",
+                        children: spaceGateway.did && /* @__PURE__ */ jsx(DidAddress, { copyable: false, size: 14, compact: true, responsive: false, did: spaceGateway.did })
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { className: "selected-container selected", children: /* @__PURE__ */ jsx(CheckIcon, { className: "selected-icon" }) })
+      ]
+    }
+  );
+}
+const BoxContainer = styled(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;
+    }
+  }
+`;
+export default SpaceItem;

package/es/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/es/UserCenter/components/storage/preview-nft.js

@@ -0,0 +1,80 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ReactPlaceholder from "react-placeholder";
+import { Dialog, DialogContent, IconButton } from "@mui/material";
+import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
+import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
+function PreviewSpaceNft({ src, alt }) {
+  const [showEmptySpaceNFT, setShowEmptySpaceNFT] = useState(false);
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ReactPlaceholder,
+      {
+        ready: showEmptySpaceNFT,
+        customPlaceholder: (
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: { cursor: "pointer" },
+              alt,
+              src,
+              width: "58px",
+              height: "58px",
+              onError: () => setShowEmptySpaceNFT(true),
+              onClick: handleOpen
+            }
+          )
+        ),
+        children: /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { cursor: "pointer", width: "58px", height: "58px" }, onClick: handleOpen })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        "aria-labelledby": "preview-space-nft-display",
+        "aria-describedby": "preview space nft display",
+        fullWidth: true,
+        maxWidth: "md",
+        children: /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "inherit",
+              onClick: handleClose,
+              "aria-label": "close",
+              style: { position: "absolute", top: 8, right: 8, color: "white" },
+              children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
+            }
+          ),
+          showEmptySpaceNFT ? /* @__PURE__ */ jsx(
+            EmptySpacesNFT,
+            {
+              style: {
+                width: "100%",
+                height: "75vh"
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: "",
+              style: {
+                width: "100%",
+                height: "75vh",
+                objectFit: "contain"
+              }
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+export default PreviewSpaceNft;

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

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/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;

package/lib/UserCenter/components/storage/connect-to.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _react = require("react");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Connect = _interopRequireDefault(require("@arcblock/did-connect/lib/Connect"));
+var _ufo = require("ufo");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _api = require("../../libs/api");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ConnectTo({
+  onConnect,
+  storageEndpoint,
+  ...rest
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = (0, _react.useState)({
+    open: false,
+    action: "connect-to-did-spaces-for-user",
+    checkTimeout: 1e3 * 300,
+    prefix: "/api/did",
+    // @ts-expect-error
+    checkFn: _api.axios.create({
+      baseURL: (0, _ufo.joinURL)(window.location.origin, window.env && window.env.apiPrefix ? window.env.apiPrefix : "/")
+    }).get,
+    extraParams: {},
+    messages: {
+      title: t("storage.spaces.provideNFT.title", {
+        appName: window.blocklet.appName
+      }, locale),
+      scan: t("storage.spaces.provideNFT.scan", {
+        appName: window.blocklet.appName
+      }, locale),
+      confirm: "",
+      success: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        gutterBottom: true,
+        children: t("storage.spaces.provideNFT.success")
+      })
+    },
+    onClose: () => {
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+    }
+  });
+  const updateSpaceGateway = async spaceGateway => {
+    await onConnect(spaceGateway);
+    _Toast.default.success(t("storage.spaces.connectedWithName", {
+      name: spaceGateway.name
+    }));
+  };
+  const onAuthorizeConnectSuccess = (response, decrypt) => {
+    setTimeout(async () => {
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      if (!(0, _isEmpty.default)(response.spaceGateway)) {
+        await updateSpaceGateway(decrypt(response.spaceGateway));
+        return;
+      }
+      const endpoint = decrypt(response.endpoint);
+      const space = response.space ? decrypt(response.space) : {};
+      await updateSpaceGateway({
+        endpoint,
+        // name 默认为 DID Space，兼容旧版本的 DID Spaces
+        ...{
+          name: "DID Space"
+        },
+        ...space
+      });
+    }, 0);
+  };
+  const handleUseWalletConnect = () => {
+    setAuthorizeFromNftConnect(preValue => ({
+      ...preValue,
+      open: true,
+      extraParams: {
+        appDid: window.blocklet.appId,
+        appName: window.blocklet.appName,
+        appDescription: window.blocklet.appDescription,
+        scopes: "list:object read:object write:object",
+        appUrl: window.blocklet.appUrl,
+        referrer: window.location.href
+      }
+    }));
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+      color: "primary",
+      style: {
+        textTransform: "none !important",
+        fontSize: "1rem"
+      },
+      size: "small",
+      onClick: handleUseWalletConnect,
+      variant: "outlined",
+      children: storageEndpoint ? t("storage.spaces.connect.useWalletReconnect") : t("storage.spaces.connect.useWallet")
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Connect.default, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeFromNftConnect.prefix,
+      open: authorizeFromNftConnect.open,
+      popup: true,
+      action: authorizeFromNftConnect.action,
+      checkFn: authorizeFromNftConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeFromNftConnect.onClose,
+      checkTimeout: authorizeFromNftConnect.checkTimeout,
+      extraParams: authorizeFromNftConnect.extraParams,
+      messages: authorizeFromNftConnect.messages,
+      locale
+    })]
+  });
+}
+module.exports = ConnectTo;

package/lib/UserCenter/components/storage/connected.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
+declare function Connected({ spaceGateway, settingStorageEndpoint }: {
+    spaceGateway: SpaceGateway | undefined;
+    settingStorageEndpoint: SettingStorageEndpoint;
+}): import("react").JSX.Element;
+export default Connected;

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

@@ -0,0 +1,45 @@
+"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 _item = _interopRequireDefault(require("./item"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Connected({
+  spaceGateway,
+  settingStorageEndpoint
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    display: "flex",
+    flexDirection: "column",
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "12px",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t("storage.spaces.connected.title")
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_item.default, {
+        style: {
+          marginTop: "12px"
+        },
+        spaceGateway,
+        connected: true,
+        onDisconnect: () => settingStorageEndpoint(void 0)
+      }, spaceGateway?.endpoint)
+    })]
+  });
+}
+module.exports = Connected;

package/lib/UserCenter/components/storage/delete.d.ts

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