@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/blocklet/storage/backups.js

@@ -0,0 +1,241 @@
+import Tag from '@arcblock/ux/lib/Tag';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, CircularProgress, Icon, Link, Tooltip, Typography } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { isEmpty, isNull, throttle } from 'lodash';
+import { useAsyncEffect } from 'ahooks';
+import dayjs from '@abtnode/util/lib/dayjs';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import { array, object } from 'prop-types';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+
+/**
+ * @description
+ * @param {{ blocklet: import('@abtnode/client').BlockletState }} { blocklet }
+ * @return {{backups: import('@abtnode/client').Backup[]}}
+ */
+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 useBackups({
+  blocklet,
+  loading,
+  progress
+}) {
+  const [backups, setBackups] = useState([]);
+  const {
+    api
+  } = useNodeContext();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const fetchBackups = useCallback(throttle(async () => {
+    const {
+      backups: data
+    } = await api.getBlockletBackups({
+      input: {
+        did: blocklet?.meta?.did
+      }
+    });
+    setBackups(data ?? []);
+  }, 2000), []);
+
+  // eslint-disable-next-line require-await
+  useAsyncEffect(async () => {
+    fetchBackups();
+  }, [blocklet?.meta?.did, progress, loading]);
+  return {
+    backups
+  };
+}
+
+/**
+ * @description
+ * @param {{
+ *  progress: any,
+ *  spaceGateways: Array<import('./connected').SpaceGateway>
+ * }} { progress, spaceGateways, ...rest }
+ * @return {*}
+ */
+function SpacesBackupRecords({
+  progress,
+  spaceGateways,
+  ...rest
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    backups
+  } = useBackups({
+    blocklet,
+    progress
+  });
+  const columns = [{
+    label: 'DID Spaces',
+    name: 'target',
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: index => {
+        // eslint-disable-next-line no-unused-vars
+        const {
+          targetUrl,
+          targetName
+        } = backups[index];
+        const spaceName = spaceGateways.find(spaceGateway => targetUrl?.includes(spaceGateway?.url))?.name || targetName || 'DID Space';
+        return /*#__PURE__*/_jsx(Link, {
+          fontSize: "16px",
+          href: targetUrl,
+          target: "_blank",
+          children: spaceName
+        });
+      }
+    }
+  }, {
+    label: t('common.strategy'),
+    name: 'strategy',
+    options: {
+      /**
+       * @param {0 | 1} strategy
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: strategy => {
+        const text = strategy === 0 ? t('common.auto') : t('common.manual');
+        return /*#__PURE__*/_jsx(Tag, {
+          children: text
+        });
+      }
+    }
+  }, {
+    label: t('common.startTime'),
+    name: 'createdAt',
+    options: {
+      /**
+       * @param {0 | 1} strategy
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: createdAt => {
+        return dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss');
+      }
+    }
+  }, {
+    label: t('common.endTime'),
+    name: 'updatedAt',
+    options: {
+      /**
+       * @param {string} updatedAt
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRender: updatedAt => {
+        if (isEmpty(updatedAt)) {
+          return '';
+        }
+        return dayjs(updatedAt).format('YYYY-MM-DD HH:mm:ss');
+      }
+    }
+  }, {
+    label: t('common.status'),
+    name: 'status',
+    options: {
+      /**
+       * @param {string} status
+       * @returns {React.ReactNode}
+       */
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite: index => {
+        const {
+          status,
+          message
+        } = backups?.[index] ?? {};
+        if (isNull(status)) {
+          return /*#__PURE__*/_jsxs(Typography, {
+            display: "inline-flex",
+            alignItems: "center",
+            fontSize: "14px",
+            children: [/*#__PURE__*/_jsx(CircularProgress, {
+              sx: {
+                marginRight: '4px'
+              },
+              size: "12px"
+            }), t('common.progress')]
+          });
+        }
+        const node = !status ? /*#__PURE__*/_jsx(Tag, {
+          type: "success",
+          children: t('common.succeeded')
+        }) : /*#__PURE__*/_jsxs(Box, {
+          display: "inline-flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Tag, {
+            type: "error",
+            children: t('common.failed')
+          }), " \xA0", /*#__PURE__*/_jsx(Tooltip, {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              flexShrink: 0
+            },
+            title: message,
+            children: /*#__PURE__*/_jsx(Icon, {
+              children: /*#__PURE__*/_jsx(HelpOutlineIcon, {
+                style: {
+                  width: '24px',
+                  height: '24px'
+                },
+                color: "error"
+              })
+            })
+          })]
+        });
+        return node;
+      }
+    }
+  }];
+  return /*#__PURE__*/_jsx(Box, {
+    ...rest,
+    children: backups?.length ? /*#__PURE__*/_jsx(Datatable, {
+      title: /*#__PURE__*/_jsx(Typography, {
+        fontSize: "1.2rem",
+        fontWeight: "bold",
+        children: t('storage.spaces.backup.records')
+      }),
+      data: backups,
+      columns: columns,
+      emptyNode: t('storage.spaces.record.emptyData', locale),
+      options: {
+        download: false,
+        filter: false,
+        print: false
+      }
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        height: "56px",
+        lineHeight: "56px",
+        alignItems: "center",
+        children: /*#__PURE__*/_jsx(Typography, {
+          fontSize: "1.2rem",
+          fontWeight: "bold",
+          children: t('storage.spaces.backup.records')
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        color: "#9397A1",
+        marginTop: "16px",
+        marginBottom: "24px",
+        children: t('storage.spaces.record.emptyData')
+      })]
+    })
+  });
+}
+SpacesBackupRecords.propTypes = {
+  progress: object.isRequired,
+  spaceGateways: array.isRequired
+};
+export default SpacesBackupRecords;

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

@@ -0,0 +1,373 @@
+import { Box, CircularProgress, DialogContentText, TextField, Typography } from '@mui/material';
+import React, { useMemo, 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 isUrl from 'is-url';
+import toast from '@arcblock/ux/lib/Toast';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import SplitButton from '@arcblock/ux/lib/SplitButton';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Alert from '@arcblock/ux/lib/Alert';
+import { array, func } from 'prop-types';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { axios } from '../../util/api';
+import { formatError, getPathPrefix, getWebWalletUrl } from '../../util';
+import { useNodeContext } from '../../contexts/node';
+import useBlockletInfoForConnectDIDSpaces from '../../hooks/use-blocklet-info-for-connect-did-spaces';
+import { getDIDSpaceDidFromEndpoint, getSpaceBackupEndpoint, isValidSpaceGatewayUrl } from '../../util/spaces';
+/**
+ * @description
+ * @param {{
+ *  spaceGateways?: Array<import('./connected').SpaceGateway>,
+ *  refreshSpaceGateways: () => void,
+ * }} { spaceGateways, refreshSpaceGateways, ...rest }
+ * @return {*}
+ */
+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({
+  spaceGateways,
+  refreshSpaceGateways,
+  ...rest
+}) {
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    info,
+    api: nodeApi
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const spaceBackupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet]);
+  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 [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
+    open: false,
+    action: 'get-did-spaces-endpoint',
+    checkTimeout: 1000 * 300,
+    checkFn: axios.create({
+      baseURL: joinUrl(window.location.origin, getPathPrefix())
+    }).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
+      }));
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      const endpoint = decrypt(response.endpoint);
+      const space = response.space ? decrypt(response.space) : {};
+      await addSpaceGateway({
+        endpoint,
+        // name 默认为 DID Space，兼容旧版本的 DID Spaces
+        ...{
+          did: getDIDSpaceDidFromEndpoint(endpoint),
+          name: 'DID Space'
+        },
+        ...space
+      });
+    }, 0);
+  };
+
+  /**
+   *
+   * @param {{
+   *  endpoint: string,
+   *  name: string,
+   *  did: string,
+   * }} {endpoint, name, did}
+   * @returns {Promise<void>}
+   */
+  const addSpaceGateway = async ({
+    endpoint,
+    name,
+    did
+  }) => {
+    let _url = endpoint?.replace(/\/api\/.+/, '')?.trim()?.replace(/\/$/, '');
+    if (!_url.startsWith('http')) {
+      // eslint-disable-next-line no-param-reassign
+      _url = `https://${_url}`;
+    }
+    if (!isUrl(_url)) {
+      toast.error(t('storage.spaces.gateway.add.invalidUrl'));
+      return;
+    }
+    const duplicate = spaceGateways.some(s => s.endpoint === endpoint);
+    if (duplicate) {
+      toast.error(t('storage.spaces.gateway.add.duplicate', {
+        name
+      }));
+      return;
+    }
+    const spaceGateway = {
+      name,
+      did,
+      url: _url,
+      endpoint
+    };
+    await nodeApi.addBlockletSpaceGateway({
+      input: {
+        did: blocklet.meta.did,
+        spaceGateway
+      }
+    });
+    if (spaceBackupEndpoint !== endpoint) {
+      await nodeApi.configBlocklet({
+        input: {
+          did: [blocklet.meta.did],
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT,
+            value: endpoint
+          }]
+        }
+      });
+    }
+    toast.success(t('storage.spaces.connectedWithName', {
+      name: spaceGateway?.name ?? 'DID Spaces'
+    }));
+    refreshSpaceGateways();
+  };
+  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 fullUrl = url.startsWith('http') ? url : `https://${url}`;
+      if (!(await isValidSpaceGatewayUrl(fullUrl))) {
+        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,
+        checkFn: axios.create({
+          baseURL: joinUrl(fullUrl, 'space')
+        }).get,
+        extraParams: {
+          appDid: blockletInfo.appDid,
+          appName: blockletInfo.appName,
+          appDescription: blockletInfo.appDescription,
+          scopes: blockletInfo.scopes,
+          appUrl: blockletInfo.appUrl,
+          referrer: blockletInfo.referrer,
+          nodeDid: info.did
+        }
+      }));
+      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,
+      menu: [/*#__PURE__*/_jsx(SplitButton.Item, {
+        sx: {
+          textTransform: 'none'
+        },
+        onClick: () => setOpen(true),
+        size: "small",
+        ...rest,
+        children: t('storage.spaces.connect.useSpaceGateway')
+      }, "1")],
+      children: /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontWeight: 'bold',
+          textTransform: 'none'
+        },
+        children: 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 = {
+  spaceGateways: array,
+  refreshSpaceGateways: func
+};
+ConnectTo.defaultProps = {
+  spaceGateways: [],
+  refreshSpaceGateways: () => undefined
+};
+export default ConnectTo;