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

package/es/blocklet/storage/item.js

@@ -0,0 +1,558 @@
+import { Box, Chip, LinearProgress, Typography } from '@mui/material';
+import React, { useEffect, useMemo, useState } from 'react';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import PropTypes from 'prop-types';
+import Toast from '@arcblock/ux/lib/Toast';
+import joinUrl from 'url-join';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import DidConnect from '@arcblock/did-connect/lib/Connect';
+import { useRequest } from 'ahooks';
+import { isEmpty } from 'lodash';
+import CheckIcon from '@mui/icons-material/Check';
+import styled from '@emotion/styled';
+var SpacesConnected = function SpacesConnected(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: "4",
+      cy: "4",
+      r: "4",
+      fill: "#25C99B"
+    })
+  });
+};
+SpacesConnected.defaultProps = {
+  width: "8",
+  height: "8",
+  viewBox: "0 0 8 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var SpaceDisconnected = function SpaceDisconnected(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("circle", {
+      cx: "4",
+      cy: "4",
+      r: "4",
+      fill: "#F16E6E"
+    })
+  });
+};
+SpaceDisconnected.defaultProps = {
+  width: "8",
+  height: "8",
+  viewBox: "0 0 8 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import DidAddress from '../../did-address';
+import SwitchControl from '../component/switch-control';
+import SpaceItemAction from './action';
+import { enableDebug } from '../../util/mode';
+import { axios } from '../../util/api';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+import useBlockletInfoForConnectDIDSpaces from '../../hooks/use-blocklet-info-for-connect-did-spaces';
+import { getDIDSpaceDidFromEndpoint, getSpaceBackupEndpoint, getSpaceNftDisplayUrlFromEndpoint, hasPermissionByEndpoint } from '../../util/spaces';
+import PreviewSpaceNft from './preview-nft';
+
+/**
+ * @description
+ * @param {{
+ *  spaceGateway: import('./connected').SpaceGateway
+ *  connected: boolean,
+ *  progress: any,
+ *  onDelete: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  onBackupNow: () => Promise<void>,
+ *  refreshSpaceGateways: () => void
+ * }} { spaceGateway }
+ */
+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 SpaceItem({
+  spaceGateway,
+  connected,
+  progress,
+  onDelete,
+  onBackupNow,
+  refreshSpaceGateways,
+  ...rest
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    api: nodeApi,
+    info: {
+      did: nodeDid
+    }
+  } = useNodeContext();
+  const {
+    appDid,
+    appName,
+    appDescription,
+    scopes,
+    appUrl,
+    referrer
+  } = useBlockletInfoForConnectDIDSpaces({
+    blocklet
+  });
+  const spaceBackupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet]);
+  const [authorizeConnect, setAuthorizeConnect] = useState({
+    open: false,
+    action: 'one-click-authorization',
+    checkTimeout: 1000 * 300,
+    messages: {
+      title: t('storage.spaces.authorize.title', {
+        appName
+      }, locale),
+      scan: t('storage.spaces.authorize.scan', {
+        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 {
+    data: hasPermission,
+    loading: hasPermissionLoading
+  } = useRequest(
+  // eslint-disable-next-line require-await
+  async () => {
+    if (!connected) {
+      return true;
+    }
+    return hasPermissionByEndpoint(spaceBackupEndpoint);
+  }, {
+    refreshDeps: [connected, spaceBackupEndpoint, authorizeConnect?.open, loading]
+  });
+  const shouldDisplayConnected = connected && hasPermission;
+  const shouldDisplayBackupStrategy = connected && !loading && hasPermission;
+  const shouldDisplayBackupProgress = connected && loading && hasPermission;
+  const shouldDisplayReconnectNow = connected && !hasPermission && !hasPermissionLoading && !loading;
+
+  /**
+   *
+   * @param {import('./connected').SpaceGateway} _spaceGateway
+   * @param {string} endpoint
+   * @return {Promise<void>}
+   */
+  const onConnect = async () => {
+    const alreadyAuthorize = await hasPermissionByEndpoint(spaceGateway?.endpoint);
+    if (alreadyAuthorize) {
+      await nodeApi.configBlocklet({
+        input: {
+          did: [blocklet.meta.did],
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT,
+            value: spaceGateway.endpoint
+          }]
+        }
+      });
+      Toast.success(t('storage.spaces.connect.switchToSpaceSucceeded', {
+        name: spaceGateway.name ? `(${spaceGateway.name})` : ''
+      }));
+      return;
+    }
+    setAuthorizeConnect(preValue => ({
+      ...preValue,
+      open: true,
+      prefix: joinUrl(spaceGateway.url, 'space/api/did'),
+      baseUrl: new URL(spaceGateway.url).origin,
+      checkFn: axios.create({
+        baseURL: joinUrl(spaceGateway.url, 'space')
+      }).get,
+      extraParams: {
+        appDid,
+        appName,
+        appDescription,
+        scopes,
+        appUrl,
+        referrer,
+        nodeDid
+      }
+    }));
+  };
+
+  /**
+   * @description
+   * @param {Record<string, any>} response
+   * @param {Function} decrypt
+   */
+  const onAuthorizeConnectSuccess = async (response, decrypt) => {
+    const endpoint = decrypt(response.endpoint);
+    const spaceDid = getDIDSpaceDidFromEndpoint(endpoint);
+    const space = response.space ? decrypt(response.space) : {};
+    if (spaceGateway.did && spaceDid !== spaceGateway.did) {
+      setAuthorizeConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      Toast.error(t('storage.spaces.gateway.switch.failedForMismatchSpace', {
+        name: space?.name ? space.name : ''
+      }));
+      return;
+    }
+    await nodeApi.updateBlockletSpaceGateway({
+      input: {
+        did: blocklet.meta.did,
+        where: {
+          url: spaceGateway?.url
+        },
+        spaceGateway: {
+          ...spaceGateway,
+          name: space.name ?? 'DID Space',
+          did: space.did ?? getDIDSpaceDidFromEndpoint(endpoint),
+          endpoint
+        }
+      }
+    });
+    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'
+    }));
+    setAuthorizeConnect(preValue => ({
+      ...preValue,
+      open: false
+    }));
+    refreshSpaceGateways();
+  };
+  const _onBackupNow = async () => {
+    try {
+      if (loading) {
+        return;
+      }
+      setLoading(true);
+      await onBackupNow();
+    } catch (error) {
+      console.error(error);
+      Toast.error(error.message);
+    } finally {
+      setLoading(true);
+    }
+  };
+  useEffect(() => {
+    if (progress?.completed) {
+      if (progress?.progress === 100) {
+        Toast.success(t('storage.spaces.backupSuccessfully'));
+      } else if (progress?.progress === -1) {
+        Toast.error(progress?.message);
+      }
+      setLoading(false);
+      progress.progress = 0;
+      progress.message = '';
+    } else if (progress.progress) {
+      setLoading(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress]);
+  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: shouldDisplayBackupProgress ? 'row' : '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
+          }), shouldDisplayConnected && /*#__PURE__*/_jsx(Chip, {
+            label: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(SpacesConnected, {
+                style: {
+                  marginRight: '4px'
+                }
+              }), t('storage.spaces.connected.tag')]
+            }),
+            variant: "outlined",
+            size: "small",
+            style: {
+              marginLeft: '20px',
+              fontWeight: 'bold'
+            }
+          }), shouldDisplayReconnectNow && /*#__PURE__*/_jsx(Chip, {
+            label: /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(SpaceDisconnected, {
+                style: {
+                  marginRight: '4px'
+                }
+              }), t('storage.spaces.disconnected.tag')]
+            }),
+            variant: "outlined",
+            size: "small",
+            style: {
+              marginLeft: '20px',
+              fontWeight: 'bold'
+            }
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "spaces-address",
+          display: shouldDisplayBackupProgress ? 'none' : '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__*/_jsxs(Box, {
+        className: "spaces-backup",
+        display: "flex",
+        alignItems: "center",
+        children: [shouldDisplayBackupStrategy && /*#__PURE__*/_jsxs(Box, {
+          className: "backup-strategy",
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            size: "small",
+            onClick: _onBackupNow,
+            children: t('storage.spaces.strategy.backupNow')
+          }), enableDebug && /*#__PURE__*/_jsx(SwitchControl, {
+            name: "enable-auto-backup",
+            title: "coming soon",
+            disabled: true,
+            labelProps: {
+              label: /*#__PURE__*/_jsx(Typography, {
+                sx: {
+                  marginRight: '8px',
+                  fontSize: '16px'
+                },
+                children: /*#__PURE__*/_jsx("span", {
+                  children: t('storage.spaces.strategy.autoBackup')
+                })
+              })
+            },
+            style: {
+              marginLeft: '64px'
+            }
+          })]
+        }), shouldDisplayBackupProgress && /*#__PURE__*/_jsxs(Box, {
+          className: "backup-progress",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          minWidth: "640px",
+          marginRight: "auto",
+          alignSelf: "end",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            color: "primary",
+            children: progress?.message
+          }), /*#__PURE__*/_jsxs(Box, {
+            sx: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            width: "100%",
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                width: '100%',
+                mr: 1
+              },
+              children: /*#__PURE__*/_jsx(LinearProgress, {
+                color: "primary",
+                variant: "determinate",
+                value: progress?.progress
+              })
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                minWidth: 35
+              },
+              children: /*#__PURE__*/_jsxs(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: [progress?.progress, "%"]
+              })
+            })]
+          })]
+        }), shouldDisplayReconnectNow && /*#__PURE__*/_jsx(Box, {
+          className: "backup-strategy",
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          children: /*#__PURE__*/_jsx(Button, {
+            color: "error",
+            variant: "contained",
+            size: "small",
+            onClick: onConnect,
+            children: t('storage.spaces.disconnected.reconnectNow')
+          })
+        }), /*#__PURE__*/_jsx(SpaceItemAction, {
+          sx: {
+            marginLeft: '16px',
+            marginRight: '16px'
+          },
+          spaceGateway: spaceGateway,
+          connected: connected,
+          onDelete: onDelete,
+          onConnect: onConnect,
+          enableSwitchToSpace: progress?.completed || isEmpty(progress?.message)
+        })]
+      })]
+    }), /*#__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
+    }, "get-endpoint"), /*#__PURE__*/_jsx(Box, {
+      className: `selected-container ${connected ? 'selected' : ''}`,
+      children: /*#__PURE__*/_jsx(CheckIcon, {
+        className: "selected-icon"
+      })
+    })]
+  });
+}
+SpaceItem.propTypes = {
+  spaceGateway: PropTypes.shape({
+    did: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    endpoint: PropTypes.string.isRequired,
+    protected: PropTypes.bool
+  }).isRequired,
+  connected: PropTypes.bool.isRequired,
+  progress: PropTypes.any.isRequired,
+  refreshSpaceGateways: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  onBackupNow: PropTypes.func
+};
+SpaceItem.defaultProps = {
+  onDelete: () => undefined,
+  onBackupNow: () => undefined
+};
+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;