@blocklet/ui-react 2.9.18 → 2.9.19

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/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.19",
   "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.19",
+    "@arcblock/ux": "^2.9.19",
     "@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": "409ab4e9bc7a641c7d3f64dfebe05d8ea3cfe2da"
 }

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,

package/src/UserCenter/components/storage/connect-to.tsx

@@ -0,0 +1,117 @@
+import { Box, Typography } from '@mui/material';
+import { useState } from 'react';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { joinURL } from 'ufo';
+import toast from '@arcblock/ux/lib/Toast';
+import { func, string } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import {axios} from '../../libs/api';
+import { SpaceGateway } from '../../../contexts/config-user-space';
+
+function ConnectTo({ onConnect, storageEndpoint, ...rest }: { onConnect: (spaceGateway: SpaceGateway) => Promise<void>, storageEndpoint: string}) {
+  const { t, locale } = useLocaleContext();
+
+  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
+    open: false,
+    action: 'connect-to-did-spaces-for-user',
+    checkTimeout: 1000 * 300,
+    prefix: '/api/did',
+    // @ts-expect-error
+    checkFn: axios.create({ baseURL: 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: <Typography gutterBottom>{t('storage.spaces.provideNFT.success')}</Typography>,
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeFromNftConnect((preValue) => ({
+        ...preValue,
+        open: false,
+      }));
+    },
+  });
+
+
+  const updateSpaceGateway = async (spaceGateway: SpaceGateway) => {
+    await onConnect(spaceGateway);
+    toast.success(t('storage.spaces.connectedWithName', { name: spaceGateway.name }));
+  };
+
+  const onAuthorizeConnectSuccess = (response: Record<string, string>, decrypt: Function) => {
+    setTimeout(async () => {
+      setAuthorizeFromNftConnect((preValue) => ({
+        ...preValue,
+        open: false,
+      }));
+
+      if (!isEmpty(response.spaceGateway)) {
+        await updateSpaceGateway(decrypt(response.spaceGateway));
+        return;
+      }
+
+      const endpoint = decrypt(response.endpoint);
+      const space = response.space ? decrypt(response.space) : {};
+
+      // eslint-disable-next-line no-use-before-define
+      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 (
+    <Box>
+      <Button  
+        color="primary"
+        style={{ textTransform: 'none !important', fontSize: '1rem' }}
+        size="small"
+        onClick={handleUseWalletConnect}
+        variant="outlined">
+          {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
+      </Button>
+
+      {/* 为了获取 DID Spaces Url */}
+      <DidConnect
+        forceConnected={false}
+        saveConnect={false}
+        prefix={authorizeFromNftConnect.prefix}
+        open={authorizeFromNftConnect.open}
+        popup
+        action={authorizeFromNftConnect.action}
+        checkFn={authorizeFromNftConnect.checkFn}
+        onSuccess={onAuthorizeConnectSuccess}
+        onClose={authorizeFromNftConnect.onClose}
+        checkTimeout={authorizeFromNftConnect.checkTimeout}
+        extraParams={authorizeFromNftConnect.extraParams}
+        messages={authorizeFromNftConnect.messages}
+        locale={locale}
+      />
+
+    </Box>
+  );
+}
+
+export default ConnectTo;

package/src/UserCenter/components/storage/connected.tsx

@@ -0,0 +1,29 @@
+import { Box, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import SpaceItem from './item';
+import { SettingStorageEndpoint, SpaceGateway } from '../../../contexts/config-user-space';
+
+function Connected({ spaceGateway, settingStorageEndpoint }: {spaceGateway: SpaceGateway | undefined, settingStorageEndpoint: SettingStorageEndpoint }) {
+  const { t } = useLocaleContext();
+
+  return (
+    <Box display="flex" flexDirection="column">
+      <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between" marginBottom="12px">
+        <Typography fontSize="1.2rem" fontWeight="bold">
+          {t('storage.spaces.connected.title')}
+        </Typography>
+      </Box>
+      <Box>
+        <SpaceItem
+          style={{ marginTop: '12px' }}
+          key={spaceGateway?.endpoint}
+          spaceGateway={spaceGateway as SpaceGateway}
+          connected
+          onDisconnect={() => settingStorageEndpoint(undefined)}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default Connected;

package/src/UserCenter/components/storage/delete.tsx

@@ -0,0 +1,66 @@
+import  React, { useState } from 'react';
+import { IconButton } from '@mui/material';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Confirm from '@arcblock/ux/lib/Dialog/confirm';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import toast from '@arcblock/ux/lib/Toast';
+import { SpaceGateway } from '../../../contexts/config-user-space';
+
+function SpaceDelete({ spaceGateway, onDeleteSpace }: {spaceGateway: SpaceGateway, onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void> }) {
+  const { t } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleOpen = (e: React.MouseEvent, bool: boolean) => {
+    e?.stopPropagation();
+    setOpen(bool);
+  };
+
+  const handleOnDelete = async (e: React.MouseEvent) => {
+    try {
+      e?.stopPropagation();
+      setLoading(true);
+      await onDeleteSpace(spaceGateway);
+      setOpen(false);
+    } catch (error: any) {
+      console.error(error);
+      toast.error(`${t('storage.spaces.gateway.delete.failed')}: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <IconButton size="small" onClick={(e) => handleOpen(e, true)}>
+        <DeleteOutlineIcon />
+      </IconButton>
+
+      <Confirm
+        title={t('common.delConfirmDescription', {
+          data: `${spaceGateway?.name}`,
+        })}
+        open={open}
+        confirmButton={{
+          text: t('common.confirm'),
+          props: {
+            variant: 'contained',
+            color: 'error',
+            loading,
+          },
+        }}
+        cancelButton={{
+          text: t('common.cancel'),
+          props: {
+            variant: 'contained',
+            color: 'primary',
+          },
+        }}
+        onConfirm={handleOnDelete}
+        onCancel={(e: React.MouseEvent) => handleOpen(e, false)}
+      />
+    </>
+  );
+}
+
+export default SpaceDelete;

package/src/UserCenter/components/storage/disconnect.tsx

@@ -0,0 +1,27 @@
+import { Box, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+// @ts-expect-error
+import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
+
+function Disconnect() {
+  const { t } = useLocaleContext();
+
+  return (
+    <Box>
+      <Box
+        minHeight="40vh"
+        display="flex"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        alignContent="center">
+        <EmptySpacesNFT style={{ width: 200, height: 250 }} />
+        <Typography marginTop="24px" marginBottom="24px">
+          {t('storage.spaces.connect.providerForStorage')}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+export default Disconnect;