@abtnode/ux 1.16.19-beta-7d3ef675 → 1.16.19-beta-ba354e01

package/es/blocklet/component/step-actions.js

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from './button';
+import useMobile from '../../hooks/use-mobile';
+import { hasRequiredSteps } from '../../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function StepActions({
+  blocklet,
+  onStartNow,
+  children,
+  disabled
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isMobile = useMobile();
+  if (!blocklet || hasRequiredSteps(blocklet.meta)) {
+    return /*#__PURE__*/_jsx(Center, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(Between, {
+    isMobile: isMobile,
+    children: [/*#__PURE__*/_jsx(Button, {
+      className: "start-now",
+      variant: "contained",
+      color: "primary",
+      disabled: disabled,
+      onClick: () => onStartNow(),
+      children: t('setup.startNow')
+    }), /*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      children: children
+    })]
+  });
+}
+StepActions.propTypes = {
+  blocklet: PropTypes.object,
+  onStartNow: PropTypes.func,
+  children: PropTypes.any,
+  disabled: PropTypes.bool
+};
+StepActions.defaultProps = {
+  blocklet: null,
+  onStartNow: () => {},
+  children: null,
+  disabled: false
+};
+const Center = styled(Box)`
+  width: 100%;
+  margin-top: auto;
+  padding-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .bottom-button {
+    min-width: 200px;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    .bottom-button {
+      width: 100%;
+    }
+  }
+`;
+const Between = styled(Box)`
+  padding-top: 24px;
+  margin-top: auto;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .start-now {
+    min-width: 140px;
+  }
+  .bottom-button {
+    min-width: 120px;
+  }
+  ${props => props.theme.breakpoints.down('lg')} {
+    width: 100%;
+  }
+
+  ${props => props.theme.breakpoints.down('md')} {
+    .start-now {
+      min-width: inherit;
+    }
+    .bottom-button {
+      min-width: 100px;
+    }
+  }
+
+  ${props => props.isMobile} {
+    justify-content: space-between;
+    gap: '32px',
+  }}
+`;

package/es/blocklet/publish/create-release.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, lazy, useRef } from 'react';
+import { useState, useEffect, lazy, useRef, useCallback } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import useSetState from 'react-use/lib/useSetState';
@@ -179,7 +179,7 @@ export default function CreateRelease({
       Toast.error(formatError(err));
     });
   };
-  const getData = () => {
+  const getData = useCallback(() => {
     if (mode === 'edit') {
       if (!releaseId) {
         Toast.error('Empty release id');
@@ -190,11 +190,11 @@ export default function CreateRelease({
     if (mode === 'create') {
       getProject();
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, releaseId]);
   useEffect(() => {
     getData();
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
+  }, [getData]);
   const onRelease = status => {
     const errors = validateParams(params, status, t);
     if (errors) {
@@ -234,15 +234,16 @@ export default function CreateRelease({
       setCreateLoading(false);
       setLoading(false);
       if (status === 'draft') {
-        Toast.success('Save draft success');
-        if (mode === 'create') {
-          const id = res?.release?.id;
-          navigate(`../${projectId}/${id}`, {
-            replace: true
-          });
-        }
+        Toast.success(t('blocklet.publish.saveDraftSuccess'));
+      } else {
+        Toast.success(t('blocklet.publish.createReleaseSuccess'));
+      }
+      if (mode === 'create') {
+        const id = res?.release?.id;
+        navigate(`../${projectId}/${id}`, {
+          replace: true
+        });
       } else {
-        Toast.success('Create Release success');
         getRelease();
       }
     }).catch(err => {

package/es/blocklet/publish/project-list.js

@@ -66,6 +66,7 @@ export default function ProjectList() {
       setLoading(false);
       getProjects();
       Toast.success(t('common.removeSuccess'));
+      setDeleteConfirm(null);
     }).catch(err => {
       setLoading(false);
       Toast.error(err.message);

package/es/blocklet/publish/release-list.js

@@ -98,6 +98,7 @@ export default function ReleaseList() {
       setLoading(false);
       getReleases();
       Toast.success(t('common.removeSuccess'));
+      setDeleteConfirm(null);
     }).catch(err => {
       setLoading(false);
       Toast.error(err.message);

package/es/blocklet/publish/tree.js

@@ -11,6 +11,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Icon } from '@iconify/react';
+import Images from '../../images';
 
 // BFS algorithm to find node by his ID
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -147,6 +148,9 @@ export default function Tree({
         }), !!node.description && /*#__PURE__*/_jsx(Box, {
           className: "description",
           children: node.description
+        }), !!node.images?.length && /*#__PURE__*/_jsx(Images, {
+          className: "images",
+          data: node.images
         })]
       })
     }),

package/es/blocklet/resource-type.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import uniq from 'lodash/uniq';
+import upperFirst from 'lodash/upperFirst';
+import Box from '@mui/material/Box';
+import Tag from '@arcblock/ux/lib/Tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ResourceType({
+  blocklet,
+  ...rest
+}) {
+  const types = useMemo(() => {
+    return uniq((blocklet?.meta?.resources || []).map(x => upperFirst(x.split('.').slice(-1)[0])).filter(Boolean));
+  }, [blocklet]);
+  const style = {
+    color: '#FFF',
+    backgroundColor: '#5B9BD5',
+    marginRight: '4px'
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    mr: "-4px",
+    ...rest,
+    children: types.map(x => /*#__PURE__*/_jsx(Tag, {
+      type: "custom",
+      style: style,
+      children: x
+    }, x))
+  });
+}
+ResourceType.propTypes = {
+  blocklet: PropTypes.object.isRequired
+};
+ResourceType.defaultProps = {};

package/es/blocklet/storage/connect-to.js

@@ -14,7 +14,7 @@ import { axios } from '../../util/api';
 import { formatError, getWebWalletUrl } from '../../util';
 import { useNodeContext } from '../../contexts/node';
 import useBlockletInfoForConnectDIDSpaces from '../../hooks/use-blocklet-info-for-connect-did-spaces';
-import { extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, isValidSpaceGatewayUrl } from '../../util/spaces';
+import { extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../util/spaces';
 import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 /**
  * @description
@@ -148,12 +148,8 @@ function ConnectTo({
     name,
     did
   }) => {
-    let normalizeUrl = endpoint?.replace(/\/api\/.+/, '')?.trim()?.replace(/\/$/, '');
-    if (!normalizeUrl.startsWith('http')) {
-      // eslint-disable-next-line no-param-reassign
-      normalizeUrl = `https://${normalizeUrl}`;
-    }
-    if (!(await isValidSpaceGatewayUrl(normalizeUrl))) {
+    const spaceGatewayUrl = await getSpaceGatewayUrl(endpoint);
+    if (!(await isValidSpaceGatewayUrl(spaceGatewayUrl))) {
       toast.error(t('storage.spaces.gateway.add.invalidUrl'));
       return;
     }
@@ -167,7 +163,7 @@ function ConnectTo({
     const spaceGateway = {
       name,
       did,
-      url: normalizeUrl,
+      url: spaceGatewayUrl,
       endpoint
     };
     await addSpaceGateway(spaceGateway, endpoint);
@@ -193,19 +189,19 @@ function ConnectTo({
   const handleUseSpaceGatewayConnect = async () => {
     try {
       setLoading(true);
-      const tempUrl = url.startsWith('http') ? url : `https://${url}`;
-      const fullUrl = extraDIDSpacesCoreUrl(tempUrl);
-      const spaceDid = new URL(tempUrl).searchParams.get('spaceDid');
-      if (!(await isValidSpaceGatewayUrl(fullUrl))) {
+      const spaceGatewayUrl = await getSpaceGatewayUrl(url);
+      const didSpacesCoreUrl = extraDIDSpacesCoreUrl(spaceGatewayUrl);
+      const spaceDid = new URL(spaceGatewayUrl).searchParams.get('spaceDid');
+      if (!(await isValidSpaceGatewayUrl(didSpacesCoreUrl))) {
         throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
       }
       setAuthorizeConnect(preValue => ({
         ...preValue,
         open: true,
-        prefix: joinUrl(fullUrl, 'space/api/did'),
-        baseUrl: new URL(fullUrl).origin,
+        prefix: joinUrl(didSpacesCoreUrl, 'space/api/did'),
+        baseUrl: new URL(didSpacesCoreUrl).origin,
         checkFn: axios.create({
-          baseURL: joinUrl(fullUrl, 'space')
+          baseURL: joinUrl(didSpacesCoreUrl, 'space')
         }).get,
         extraParams: {
           appDid: blockletInfo.appDid,

package/es/contexts/config-space.js

@@ -0,0 +1,160 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { node } from 'prop-types';
+import { isEmpty, merge } from 'lodash';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import { useAsyncEffect } from 'ahooks';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from './node';
+import { getSpaceGateway, getSpaceNameByEndpoint } from '../util/spaces';
+import { useBlockletContext } from './blocklet';
+import useStorageEndpoint from '../hooks/use-storage-endpoint';
+
+/**
+ * @typedef {{
+ *  did: string,
+ *  url: string,
+ *  name: string,
+ *  endpoint: string,
+ * }} SpaceGateway
+ */
+
+/**
+ * @typedef {{
+ *  loading: boolean,
+ *  spaceGateway: SpaceGateway,
+ *  deleteSpaceGateway: (spaceGateway: SpaceGateway) => void | Promise<void>,
+ *  updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => void | Promise<void>,
+ *  storageEndpoint: string,
+ *  settingStorageEndpoint: (endpoint: string) => void | Promise<void>,
+ *  hasStorageEndpoint: boolean,
+ * }} ConfigSpaceContextType
+ */
+
+/** @type {import('react').Context<ConfigSpaceContextType>} */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ConfigSpaceContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = ConfigSpaceContext;
+
+/**
+ * @description
+ * @param {{
+ *  children: React.ReactNode,
+ * }} { children }
+ * @return {any}
+ */
+function ConfigSpaceProvider({
+  children
+}) {
+  const [loading, setLoading] = useState(false);
+  const [spaceGateway, setSpaceGateway] = useState(null);
+  /**
+   *  @type {{
+   *    blocklet: import('@abtnode/client').BlockletState,
+   *    actions: { refreshBlocklet: Function }
+   *  }}
+   */
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const {
+    storageEndpoint
+  } = useStorageEndpoint();
+  const {
+    api: nodeApi
+  } = useNodeContext();
+  useAsyncEffect(async () => {
+    try {
+      setLoading(true);
+      if (isEmpty(storageEndpoint)) {
+        setSpaceGateway(null);
+        return;
+      }
+      const $spaceGateway = await getSpaceGateway(storageEndpoint);
+      setSpaceGateway($spaceGateway);
+    } catch (error) {
+      console.error(error);
+      Toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [storageEndpoint]);
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   */
+  const deleteSpaceGateway = () => {
+    setSpaceGateway(null);
+    refreshBlocklet();
+  };
+
+  /**
+   * @description
+   * @param {SpaceGateway} x
+   */
+  const updateSpaceGateway = async x => {
+    setSpaceGateway(x);
+    // eslint-disable-next-line no-use-before-define
+    await settingStorageEndpoint(x.endpoint);
+    refreshBlocklet();
+  };
+
+  /**
+   * @description
+   * @param {string} endpoint
+   */
+  const settingStorageEndpoint = async endpoint => {
+    await nodeApi.configBlocklet({
+      input: {
+        did: [blocklet.meta.did],
+        configs: [{
+          key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT,
+          value: endpoint
+        }]
+      }
+    });
+    refreshBlocklet();
+  };
+  useEffect(() => {
+    async function syncSpaceGateway() {
+      if (!spaceGateway) {
+        return;
+      }
+      const name = await getSpaceNameByEndpoint(spaceGateway.endpoint, spaceGateway.name);
+      const latestSpaceGateway = merge(spaceGateway, {
+        name
+      });
+      setSpaceGateway(latestSpaceGateway);
+    }
+    syncSpaceGateway();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      loading,
+      spaceGateway,
+      deleteSpaceGateway,
+      updateSpaceGateway,
+      storageEndpoint,
+      settingStorageEndpoint,
+      hasStorageEndpoint
+    },
+    children: children
+  });
+}
+ConfigSpaceProvider.propTypes = {
+  children: node.isRequired
+};
+ConfigSpaceProvider.defaultProps = {};
+function useConfigSpaceContext() {
+  const res = useContext(ConfigSpaceContext);
+  return res;
+}
+export { ConfigSpaceContext, ConfigSpaceProvider, Consumer as ConfigSpaceConsumer, useConfigSpaceContext };

package/es/hooks/use-mobile.js

@@ -0,0 +1,17 @@
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+
+/**
+ * @description
+ * @export
+ * @param {{ key: string | import('@mui/material').Breakpoint }} [{ key }={ key: 'md' }]
+ * @return {*}
+ */
+export default function useMobile({
+  key
+} = {
+  key: 'sm'
+}) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/es/hooks/use-storage-endpoint.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { useBlockletContext } from '../contexts/blocklet';
+import { getDIDSpaceEndpoint } from '../util/spaces';
+
+/**
+ * @description
+ * @export
+ * @return {{
+ *  storageEndpoint: string
+ * }}
+ */
+export default function useStorageEndpoint() {
+  const [storageEndpoint, setStorageEndpoint] = useState(null);
+  const {
+    blocklet
+  } = useBlockletContext();
+  useEffect(() => {
+    setStorageEndpoint(getDIDSpaceEndpoint(blocklet));
+  }, [blocklet]);
+  return {
+    storageEndpoint
+  };
+}

package/es/images.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Images({
+  data,
+  ...props
+}) {
+  if (!data || !data.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(StyledBox, {
+    ...props,
+    children: data.map(item => /*#__PURE__*/_jsx("a", {
+      href: item.url,
+      target: "_blank",
+      rel: "noreferrer",
+      children: /*#__PURE__*/_jsx("img", {
+        src: item.url,
+        alt: item.alt || ''
+      })
+    }, item.url))
+  });
+}
+Images.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    url: PropTypes.string,
+    alt: PropTypes.string
+  }))
+};
+Images.defaultProps = {
+  data: []
+};
+const StyledBox = styled(Box)`
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-bottom: -12px;
+  a {
+    display: flex;
+  }
+  img {
+    height: 128px;
+    cursor: pointer;
+    margin-right: 12px;
+    margin-bottom: 12px;
+  }
+`;

package/es/locales/en.js

@@ -638,6 +638,8 @@ module.exports = {
       createRelease: 'Create a new release',
       deleteReleaseTip: 'The release cannot be recovered after deletion',
       createBlockletDid: 'Create from DID Wallet',
+      createReleaseSuccess: 'Release created successfully',
+      saveDraftSuccess: 'Draft saved successfully',
       connect: {
         title: 'Create Blocklet DID',
         scan: 'Scan the QR code below to generate Blocklet DID',

package/es/locales/zh.js

@@ -645,6 +645,8 @@ module.exports = {
       createRelease: '创建新的发布',
       deleteReleaseTip: '此发布删除后不可恢复，是否继续？',
       createBlockletDid: '通过 DID 钱包创建',
+      createReleaseSuccess: '发布成功',
+      saveDraftSuccess: '保存成功',
       connect: {
         title: '创建 Blocklet DID',
         scan: '扫描下面的二维码来生成 Blocklet DID',

package/es/util/index.js

@@ -615,4 +615,8 @@ export const getSubscriptionURL = async ({
 };
 export const nanoid = (length = 16) => [...Array(length)].map(() => Math.random().toString(36)[2]).join('');
 export const getSystemDomains = domains => domains.filter(x => x.isProtected);
-export const getLogoHash = logo => encodeURIComponent((logo || '').split('/').slice(-1)[0].slice(0, 7));
+export const getLogoHash = logo => encodeURIComponent((logo || '').split('/').slice(-1)[0].slice(0, 7));
+const hasRequiredEnvironments = meta => (meta.environments || []).some(x => x.required);
+export const hasRequiredSteps = meta => {
+  return !!meta.requirements?.fuels?.length || hasRequiredEnvironments(meta);
+};

package/es/util/spaces.js

@@ -1,11 +1,15 @@
 import isUrl from 'is-url';
 import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
-import { isObject } from 'lodash';
+import { isObject, isString } from 'lodash';
 import { joinURL } from 'ufo';
 import { api } from './api';
 
 /* eslint-disable import/prefer-default-export */
 
+/**
+ * @typedef {import('../contexts/config-space').SpaceGateway} SpaceGateway
+ */
+
 /**
  * @FIXME 希望之后放在 sdk 中 @jianchao
  * @description
@@ -82,7 +86,7 @@ export function getSpaceBackupEndpoint(environments) {
  * @description
  * @export
  * @param {string} endpoint
- * @return {boolean}
+ * @return {string}
  */
 export function getSpaceGatewayFromEndpoint(endpoint) {
   return endpoint?.replace(/\/api\/space\/.+/, '');
@@ -134,7 +138,11 @@ export async function isValidSpaceGatewayUrl(spaceGatewayUrl) {
  * @param {string} endpoint
  * @return {Promise<string >}
  */
-export async function getSpaceNameByEndpoint(endpoint) {
+export async function getSpaceNameByEndpoint(endpoint, {
+  timeout
+} = {
+  timeout: 3000
+}) {
   try {
     if (!isUrl(endpoint)) {
       return '';
@@ -142,7 +150,7 @@ export async function getSpaceNameByEndpoint(endpoint) {
     const {
       headers
     } = await api.head(endpoint, {
-      timeout: 3000
+      timeout
     });
     const spaceName = headers['x-space-name'];
     return spaceName ? decodeURIComponent(spaceName) : '';
@@ -171,4 +179,57 @@ export function getSpaceNftDisplayUrlFromEndpoint(endpoint) {
  */
 export const getDIDSpaceEndpoint = blocklet => {
   return blocklet?.configs?.find(item => item.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SPACE_ENDPOINT)?.value || null;
-};
+};
+
+/**
+ * @description
+ * @export
+ * @param {string} endpoint
+ * @returns {Promise<SpaceGateway>}
+ */
+export async function getSpaceGateway(endpoint) {
+  /** @type {SpaceGateway} */
+  const spaceGateway = {};
+  spaceGateway.did = getDIDSpaceDidFromEndpoint(endpoint);
+  spaceGateway.name = await getSpaceNameByEndpoint(endpoint);
+  spaceGateway.url = getSpaceGatewayFromEndpoint(endpoint);
+  spaceGateway.endpoint = endpoint;
+  return spaceGateway;
+}
+
+/**
+ * @description
+ * @export
+ * @param {string} anyUrl
+ * @param {{
+ *  timeout: number,
+ *  withSearchParams: true | false,
+ * }} options
+ * @returns {Promise<string>}
+ */
+export async function getSpaceGatewayUrl(anyUrl, options = {
+  timeout: 30000,
+  withSearchParams: true
+}) {
+  if (!isString(anyUrl)) {
+    throw new Error(`url(${anyUrl}) must be a string`);
+  }
+  const url = anyUrl.startsWith('http') ? anyUrl : `https://${anyUrl}`;
+  const u = new URL(url);
+
+  /** @type {{ data: import('@blocklet/sdk').WindowBlocklet }} */
+  const {
+    data: blockletMeta
+  } = await api.get(joinURL(u.origin, '/__blocklet__.js?type=json'), {
+    timeout: options.timeout
+  });
+
+  /** @type {string} */
+  const mountPoint = blockletMeta.componentMountPoints.findLast(x => x.did === 'z8iZnaYxnkMD5AKRjTKiCb8pQr1ut8UantAcf')?.mountPoint;
+  if (!mountPoint) {
+    throw new Error(`MountPoint(${mountPoint}) not found`);
+  }
+  const didSpacesCoreUrl = joinURL(u.origin, mountPoint);
+  const spaceGatewayUrl = options.withSearchParams && u.searchParams.get('spaceDid') ? joinURL(didSpacesCoreUrl, `?spaceDid=${u.searchParams.get('spaceDid')}`) : didSpacesCoreUrl;
+  return spaceGatewayUrl;
+}