@abtnode/ux 1.16.19-beta-710018ca → 1.16.19-beta-ba354e01

package/es/blocklet/component/add-component-core.js

@@ -38,7 +38,8 @@ import Agreement from '../agreement';
 import InstallFromUrl from '../install-from-url';
 import SelectStore from './select-store';
 import BlockletList from './store-blocklet-list';
-import SpaceConnector from './space-connector';
+import DidSpace from './did-space';
+import { ConfigSpaceProvider } from '../../contexts/config-space';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -108,7 +109,7 @@ const StepContent = /*#__PURE__*/forwardRef(({
     component: "div",
     className: isMobile ? 'mobileStyle' : '',
     sx: {
-      height: '100%'
+      height: 'calc(100% - 56px)'
     },
     children: /*#__PURE__*/_jsx(Layout, {
       locale: locale,
@@ -138,19 +139,22 @@ StepContent.propTypes = {
 StepContent.defaultProps = {
   meta: null
 };
-const postInstalledMessage = componentDid => {
+const postInstalledMessage = (componentDid, timeout = 1000) => {
   // send event to parent window
-  window.parent.postMessage({
-    event: 'component.installed',
-    componentDid
-  }, '*');
+  setTimeout(() => {
+    window.parent.postMessage({
+      event: 'component.installed',
+      componentDid
+    }, '*');
+  }, timeout);
 };
 export default function AddComponentCore({
   onClose,
   mode,
   stores,
   resourceType,
-  storageKey
+  storageKey,
+  inDialog
 }) {
   const {
     t,
@@ -234,6 +238,12 @@ export default function AddComponentCore({
     }
   }, [activeStep]); // eslint-disable-line
 
+  const refreshDidSpaceEndpoint = () => {
+    const didSpaceEndpoint = getDIDSpaceEndpoint(blocklet) ?? '';
+    updateParams({
+      didSpaceEndpoint
+    });
+  };
   const getComponentName = () => {
     if (component?.current?.meta) {
       return getDisplayName(component.current);
@@ -294,6 +304,11 @@ export default function AddComponentCore({
         break;
       default:
     }
+    const didSpaceEndpoint = getDIDSpaceEndpoint(blocklet);
+    updateParams(p => ({
+      ...p,
+      didSpaceEndpoint
+    }));
   }), [blocklet?.meta?.did]);
   useSubscription(BlockletEvents.downloadFailed, createBlockletEventHandler(() => {
     setInstallErrorResult(t('blocklet.component.installComponentError'));
@@ -937,35 +952,31 @@ export default function AddComponentCore({
     }),
     disabled: params.didSpaceCapability === 'required' && !params.didSpaceEndpoint,
     body: () => {
-      return /*#__PURE__*/_jsxs(TypographyWrapper, {
-        component: "div",
-        children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
-          title: t('blocklet.component.didSpaceConfig'),
-          subTitle: t('blocklet.component.didSpaceConfigTip')
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            mt: '36px',
-            '& > div': {
-              maxWidth: 'unset !important',
-              '& .MuiAutocomplete-root': {
-                maxWidth: 'unset !important'
-              }
-            }
-          },
-          children: /*#__PURE__*/_jsx(SpaceConnector, {
+      return /*#__PURE__*/_jsx(ConfigSpaceProvider, {
+        children: /*#__PURE__*/_jsxs(TypographyWrapper, {
+          component: "div",
+          children: [/*#__PURE__*/_jsx(PageHeaderWrapper, {
+            title: t('blocklet.component.didSpaceConfig'),
+            subTitle: t('blocklet.component.didSpaceConfigTip')
+          }), /*#__PURE__*/_jsx(Box, {
             sx: {
-              '& .MuiFormHelperText-root': {
-                wordBreak: 'break-all'
+              mt: '36px',
+              '& > div': {
+                maxWidth: 'unset !important',
+                '& .MuiAutocomplete-root': {
+                  maxWidth: 'unset !important'
+                }
               }
             },
-            helperText: params.didSpaceEndpoint && t('blocklet.component.didSpaceConnected', {
-              endpoint: params.didSpaceEndpoint
-            }),
-            onConnect: () => {
-              onNext();
-            }
-          })
-        })]
+            children: /*#__PURE__*/_jsx(DidSpace, {
+              blockletMeta: component.current.meta,
+              onNext: () => {
+                onNext();
+              },
+              onEndpointUpdate: refreshDidSpaceEndpoint
+            })
+          })]
+        })
       });
     },
     cancel: t('common.pre'),
@@ -1032,7 +1043,7 @@ export default function AddComponentCore({
       height: window.innerHeight
     } : {
       width: '100%',
-      height: mode === 'embed' ? '100vh' : '72vh'
+      height: inDialog ? '72vh' : '100vh'
     },
     children: [/*#__PURE__*/_jsx(StepProvider, {
       steps: steps,
@@ -1092,6 +1103,7 @@ export default function AddComponentCore({
 AddComponentCore.propTypes = {
   onClose: PropTypes.func,
   mode: PropTypes.oneOf(['normal', 'embed']),
+  inDialog: PropTypes.bool,
   stores: PropTypes.arrayOf(PropTypes.string),
   resourceType: PropTypes.string,
   storageKey: PropTypes.string
@@ -1101,7 +1113,8 @@ AddComponentCore.defaultProps = {
   mode: 'normal',
   stores: [],
   resourceType: '',
-  storageKey: ''
+  storageKey: '',
+  inDialog: true
 };
 const Wrapper = styled(Box)`
   .action-bar {

package/es/blocklet/component/button.js

@@ -0,0 +1,12 @@
+import Button from '@arcblock/ux/lib/Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StyledButton({
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Button, {
+    className: "bottom-button",
+    variant: "contained",
+    color: "primary",
+    ...props
+  });
+}

package/es/blocklet/component/did-space/connect-to.js

@@ -0,0 +1,355 @@
+import { Box, CircularProgress, DialogContentText, TextField, Typography } from '@mui/material';
+import React, { 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 'url-join';
+import toast from '@arcblock/ux/lib/Toast';
+import SplitButton from '@arcblock/ux/lib/SplitButton';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Alert from '@arcblock/ux/lib/Alert';
+import { func } from 'prop-types';
+import { PROD_DID_SPACES } from '@abtnode/constant';
+import useBlockletInfoForConnectDIDSpaces from '../../../hooks/use-blocklet-info-for-connect-did-spaces';
+import { extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../../util/spaces';
+import { formatError, getWebWalletUrl } from '../../../../lib/util';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import { useConfigSpaceContext } from '../../../contexts/config-space';
+import { useNodeContext } from '../../../contexts/node';
+import { axios } from '../../../util/api';
+
+/**
+ * @typedef {import('../../../contexts/config-space').SpaceGateway} SpaceGateway
+ */
+
+/**
+ * @FIXME: 后续可以思考一下，refactor 一下
+ * @description
+ * @param {{
+ *  onConnect(spaceGateway: SpaceGateway): void | Promise<void>,
+ * }} { onConnect, ...rest }
+ * @return {React.Component}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function ConnectTo({
+  onConnect,
+  ...rest
+}) {
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    info
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const blockletInfo = useBlockletInfoForConnectDIDSpaces({
+    blocklet
+  });
+  const webWalletUrl = getWebWalletUrl(info);
+  const {
+    storageEndpoint
+  } = useConfigSpaceContext();
+  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    prefix: joinUrl(PROD_DID_SPACES.CORE_URL, 'space/api/did'),
+    baseUrl: new URL(PROD_DID_SPACES.CORE_URL).origin,
+    checkFn: axios.create({
+      baseURL: joinUrl(PROD_DID_SPACES.CORE_URL, 'space')
+    }).get,
+    messages: {
+      title: t('storage.spaces.provideNFT.title', {
+        appName: blockletInfo.appName
+      }, locale),
+      scan: t('storage.spaces.provideNFT.scan', {
+        appName: blockletInfo.appName
+      }, locale),
+      confirm: '',
+      success: /*#__PURE__*/_jsx(Typography, {
+        gutterBottom: true,
+        children: t('storage.spaces.provideNFT.success')
+      })
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+    }
+  });
+  const [authorizeConnect, setAuthorizeConnect] = useState({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    messages: {
+      title: t('storage.spaces.authorize.title', {
+        appName: blockletInfo.appName
+      }, locale),
+      scan: t('storage.spaces.authorize.scan', {
+        appName: blockletInfo.appName
+      }, locale),
+      confirm: '',
+      success: /*#__PURE__*/_jsx(Typography, {
+        gutterBottom: true,
+        children: t('storage.spaces.authorize.success')
+      })
+    },
+    onClose: () => {
+      // eslint-disable-next-line no-shadow
+      setAuthorizeConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+    }
+  });
+  const onAuthorizeConnectSuccess = (response, decrypt) => {
+    setTimeout(async () => {
+      setAuthorizeConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      setUrl(null);
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      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
+        ...{
+          did: getDIDSpaceDidFromEndpoint(endpoint),
+          name: 'DID Space'
+        },
+        ...space
+      });
+    }, 0);
+  };
+
+  /**
+   *
+   * @param {} {endpoint, name, did}
+   * @returns {Promise<void>}
+   */
+  const updateSpaceGateway = async ({
+    did,
+    name,
+    endpoint
+  }) => {
+    const spaceGatewayUrl = await getSpaceGatewayUrl(endpoint);
+    if (!(await isValidSpaceGatewayUrl(spaceGatewayUrl))) {
+      toast.error(t('storage.spaces.gateway.add.invalidUrl'));
+      return;
+    }
+
+    /** @type {SpaceGateway} */
+    const spaceGateway = {
+      name,
+      did,
+      url: spaceGatewayUrl,
+      endpoint
+    };
+    await onConnect(spaceGateway);
+    toast.success(t('storage.spaces.connectedWithName', {
+      name: spaceGateway.name
+    }));
+  };
+  const handleUseWalletConnect = () => {
+    setAuthorizeFromNftConnect(preValue => ({
+      ...preValue,
+      open: true,
+      extraParams: {
+        appDid: blockletInfo.appDid,
+        appName: blockletInfo.appName,
+        appDescription: blockletInfo.appDescription,
+        scopes: blockletInfo.scopes,
+        appUrl: blockletInfo.appUrl,
+        referrer: blockletInfo.referrer,
+        nodeDid: info.did
+      }
+    }));
+  };
+  const handleUseSpaceGatewayConnect = async () => {
+    try {
+      setLoading(true);
+      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(didSpacesCoreUrl, 'space/api/did'),
+        baseUrl: new URL(didSpacesCoreUrl).origin,
+        checkFn: axios.create({
+          baseURL: joinUrl(didSpacesCoreUrl, 'space')
+        }).get,
+        extraParams: {
+          appDid: blockletInfo.appDid,
+          appName: blockletInfo.appName,
+          appDescription: blockletInfo.appDescription,
+          scopes: blockletInfo.scopes,
+          appUrl: blockletInfo.appUrl,
+          referrer: blockletInfo.referrer,
+          nodeDid: info.did,
+          spaceDid
+        }
+      }));
+      setOpen(false);
+    } catch (err) {
+      const _errorMessage = `${t('storage.spaces.gateway.add.failed', locale)}: ${formatError(err)}`;
+      setErrorMessage(_errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsx(SplitButton, {
+      color: "primary",
+      style: {
+        textTransform: 'none !important',
+        fontSize: '1rem'
+      },
+      size: "small",
+      onClick: handleUseWalletConnect,
+      variant: "outlined",
+      menu: [/*#__PURE__*/_jsx(SplitButton.Item, {
+        sx: {
+          textTransform: 'none'
+        },
+        onClick: () => setOpen(true),
+        size: "small",
+        ...rest,
+        children: storageEndpoint ? t('storage.spaces.connect.useSpaceGatewayReconnect') : t('storage.spaces.connect.useSpaceGateway')
+      }, "1")],
+      children: /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontWeight: 'bold',
+          textTransform: 'none'
+        },
+        children: storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')
+      })
+    }), /*#__PURE__*/_jsx(DidConnect, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeFromNftConnect.prefix,
+      open: authorizeFromNftConnect.open,
+      popup: true,
+      action: authorizeFromNftConnect.action,
+      webWalletUrl: webWalletUrl,
+      baseUrl: authorizeFromNftConnect.baseUrl,
+      checkFn: authorizeFromNftConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeFromNftConnect.onClose,
+      checkTimeout: authorizeFromNftConnect.checkTimeout,
+      extraParams: authorizeFromNftConnect.extraParams,
+      messages: authorizeFromNftConnect.messages,
+      locale: locale
+    }), /*#__PURE__*/_jsx(DidConnect, {
+      forceConnected: false,
+      saveConnect: false,
+      prefix: authorizeConnect.prefix,
+      open: authorizeConnect.open,
+      popup: true,
+      action: authorizeConnect.action,
+      baseUrl: authorizeConnect.baseUrl,
+      checkFn: authorizeConnect.checkFn,
+      onSuccess: onAuthorizeConnectSuccess,
+      onClose: authorizeConnect.onClose,
+      checkTimeout: authorizeConnect.checkTimeout,
+      extraParams: authorizeConnect.extraParams,
+      messages: authorizeConnect.messages,
+      locale: locale
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      title: t('storage.spaces.gateway.add.title'),
+      fullWidth: true,
+      maxWidth: "md",
+      open: open,
+      onClose: () => setOpen(false),
+      PaperProps: {
+        style: {
+          minHeight: 'auto'
+        }
+      },
+      actions: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: e => {
+            e.stopPropagation();
+            setOpen(false);
+          },
+          color: "inherit",
+          children: t('common.cancel')
+        }), /*#__PURE__*/_jsxs(Button, {
+          onClick: handleUseSpaceGatewayConnect,
+          color: "primary",
+          disabled: loading || !url,
+          variant: "contained",
+          autoFocus: true,
+          children: [loading && /*#__PURE__*/_jsx(CircularProgress, {
+            size: 16
+          }), t('common.confirm')]
+        })]
+      }),
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          paddingTop: 12,
+          overflowY: 'hidden'
+        },
+        children: /*#__PURE__*/_jsx(DialogContentText, {
+          component: "div",
+          children: /*#__PURE__*/_jsx(Typography, {
+            component: "div",
+            children: /*#__PURE__*/_jsx(TextField, {
+              label: t('storage.spaces.gateway.add.label'),
+              autoComplete: "off",
+              variant: "outlined",
+              name: "url",
+              fullWidth: true,
+              value: url,
+              onChange: e => {
+                setErrorMessage(null);
+                setUrl(e.target.value);
+              },
+              disabled: loading,
+              onKeyPress: async e => {
+                if (e.key === 'Enter') {
+                  await handleUseSpaceGatewayConnect();
+                }
+              },
+              autoFocus: true
+            })
+          })
+        })
+      }), Boolean(errorMessage) && /*#__PURE__*/_jsx(Alert, {
+        type: "error",
+        style: {
+          width: '100%'
+        },
+        children: errorMessage
+      })]
+    })]
+  });
+}
+ConnectTo.propTypes = {
+  onConnect: func
+};
+ConnectTo.defaultProps = {
+  onConnect: () => undefined
+};
+export default ConnectTo;

package/es/blocklet/component/did-space/connected.js

@@ -0,0 +1,42 @@
+import { Box, Typography } from '@mui/material';
+import React from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import SpaceItem from './item';
+import { useConfigSpaceContext } from '../../../contexts/config-space';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Connected() {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    spaceGateway,
+    settingStorageEndpoint
+  } = useConfigSpaceContext();
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    flexDirection: "column",
+    children: [/*#__PURE__*/_jsx(Box, {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "12px",
+      children: /*#__PURE__*/_jsx(Typography, {
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t('storage.spaces.connected.title')
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(SpaceItem, {
+        style: {
+          marginTop: '12px'
+        },
+        spaceGateway: spaceGateway,
+        connected: true,
+        onDisconnect: () => settingStorageEndpoint(null)
+      }, spaceGateway.endpoint)
+    })]
+  });
+}
+export default Connected;

package/es/blocklet/component/did-space/delete.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+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 formatError from '@abtnode/util/lib/format-error';
+
+/**
+ * @typedef {import('../../../contexts/config-space').SpaceGateway} SpaceGateway
+ */
+
+/**
+ *
+ *
+ * @export
+ * @param {{
+ *  spaceGateway: SpaceGateway,
+ *  onDeleteSpace: (spaceGateway: SpaceGateway) => Promise<void> | void
+ * }} { spaceGateway, onDelete }
+ * @return {React.Component}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function SpaceDelete({
+  spaceGateway,
+  onDeleteSpace
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  /**
+   * @description
+   * @param {React.MouseEvent} e
+   */
+  const handleOpen = (e, bool) => {
+    e?.stopPropagation();
+    setOpen(bool);
+  };
+
+  /**
+   * @description
+   * @param {React.MouseEvent} e
+   */
+  const handleOnDelete = async e => {
+    try {
+      e?.stopPropagation();
+      setLoading(true);
+      await onDeleteSpace(spaceGateway);
+      setOpen(false);
+    } catch (error) {
+      console.error(error);
+      toast.error(`${t('storage.spaces.gateway.delete.failed')}: ${formatError(error)}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      size: "small",
+      onClick: e => handleOpen(e, true),
+      children: /*#__PURE__*/_jsx(DeleteOutlineIcon, {})
+    }), /*#__PURE__*/_jsx(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 => handleOpen(e, false)
+    })]
+  });
+}
+SpaceDelete.propTypes = {
+  onDeleteSpace: PropTypes.func,
+  spaceGateway: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    protected: PropTypes.bool
+  }).isRequired
+};
+SpaceDelete.defaultProps = {
+  onDeleteSpace: () => undefined
+};
+export default SpaceDelete;