@abtnode/ux 1.16.15-beta-ed0db59e → 1.16.15-beta-d464647a

package/es/blocklet/storage/action.js

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import { CircularProgress, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import PropTypes from 'prop-types';
 import ElectricBoltOutlinedIcon from '@mui/icons-material/ElectricBoltOutlined';
 import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import Toast from '@arcblock/ux/lib/Toast';
 import { getBackupFilesUrlFromEndpoint, getDIDSpaceUrlFromEndpoint } from '../../util/spaces';
 import DeleteDIDSpacesGateWay from './delete';
 
@@ -13,12 +14,12 @@ import DeleteDIDSpacesGateWay from './delete';
  * @description
  * @param {{
  *  spaceGateway: import('./connected').SpaceGateway,
- *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
- *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
- *  enableSwitchToSpace: boolean,
- *  connected: boolean
- * }} { spaceGateway, onDelete, ...rest }
- * @return {*}
+ *  onDelete: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  onConnect: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  enableSwitchToSpace: true | false,
+ *  connected: false | true
+ * } & import('@mui/material').IconButtonProps} { spaceGateway, onDelete, onConnect, enableSwitchToSpace, connected, ...rest }
+ * @return {React.Component}
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,6 +36,7 @@ function SpaceItemAction({
   const {
     t
   } = useLocaleContext();
+  const [loading, setLoading] = useState(false);
 
   /**
    * @description
@@ -45,9 +47,17 @@ function SpaceItemAction({
     event.preventDefault();
     setAnchorEl(open && event.currentTarget);
   };
-  const handleOnConnect = async e => {
-    handleOpen(e, false);
-    await onConnect(spaceGateway);
+  const handleOnSwitchSpace = async e => {
+    try {
+      setLoading(true);
+      handleOpen(e, false);
+      await onConnect(spaceGateway);
+    } catch (error) {
+      console.error(error);
+      Toast.error(error.message);
+    } finally {
+      setLoading(false);
+    }
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(IconButton, {
@@ -58,7 +68,9 @@ function SpaceItemAction({
       onClick: e => handleOpen(e, true),
       size: "small",
       ...rest,
-      children: /*#__PURE__*/_jsx(MoreVertIcon, {})
+      children: loading || spaceGateway?.loading ? /*#__PURE__*/_jsx(CircularProgress, {
+        size: "24px"
+      }) : /*#__PURE__*/_jsx(MoreVertIcon, {})
     }), /*#__PURE__*/_jsxs(Menu, {
       id: "simple-menu",
       anchorEl: anchorEl,
@@ -96,7 +108,7 @@ function SpaceItemAction({
           children: t('storage.spaces.strategy.viewBackupFiles')
         })]
       }), !connected && enableSwitchToSpace && /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: handleOnConnect,
+        onClick: handleOnSwitchSpace,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
           style: {
             minWidth: 24
@@ -119,7 +131,8 @@ SpaceItemAction.propTypes = {
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     protected: PropTypes.bool,
-    endpoint: PropTypes.string.isRequired
+    endpoint: PropTypes.string.isRequired,
+    loading: PropTypes.bool
   }).isRequired,
   connected: PropTypes.bool.isRequired,
   enableSwitchToSpace: PropTypes.bool,

package/es/blocklet/storage/backups.js

@@ -6,23 +6,20 @@ import React from 'react';
 import { isEmpty, isNull } from 'lodash';
 import dayjs from '@abtnode/util/lib/dayjs';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-import { array, object } from 'prop-types';
-import useBackups from '../../hooks/use-backups';
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 
 /**
+ *
  * @description
  * @param {{
  *  progress: any,
- *  spaceGateways: Array<import('./connected').SpaceGateway>
- * }} { progress, spaceGateways, ...rest }
- * @return {*}
+ * } & import('@mui/material').BoxProps} { progress, ...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 SpacesBackupRecords({
-  progress,
-  spaceGateways,
   ...rest
 }) {
   const {
@@ -30,10 +27,9 @@ function SpacesBackupRecords({
     locale
   } = useLocaleContext();
   const {
+    spaceGateways,
     backups
-  } = useBackups({
-    progress
-  });
+  } = useBlockletStorageContext();
   const columns = [{
     label: 'DID Spaces',
     name: 'target',
@@ -200,8 +196,5 @@ function SpacesBackupRecords({
     })
   });
 }
-SpacesBackupRecords.propTypes = {
-  progress: object.isRequired,
-  spaceGateways: array.isRequired
-};
+SpacesBackupRecords.propTypes = {};
 export default SpacesBackupRecords;

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

@@ -1,50 +1,42 @@
 import { Box, CircularProgress, DialogContentText, TextField, Typography } from '@mui/material';
-import React, { useMemo, useState } from 'react';
+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 { 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 { PROD_DID_SPACES } from '@abtnode/constant';
 import { useBlockletContext } from '../../contexts/blocklet';
 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 { getDIDSpaceDidFromEndpoint, getSpaceBackupEndpoint, isValidSpaceGatewayUrl } from '../../util/spaces';
+import { getDIDSpaceDidFromEndpoint, isValidSpaceGatewayUrl } from '../../util/spaces';
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 /**
  * @description
- * @param {{
- *  spaceGateways?: Array<import('./connected').SpaceGateway>,
- *  refreshSpaceGateways: () => void,
- * }} { spaceGateways, refreshSpaceGateways, ...rest }
+ * @param {{}} { ...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({
-  spaceGateways,
-  refreshSpaceGateways,
   ...rest
 }) {
   const {
     blocklet
   } = useBlockletContext();
   const {
-    info,
-    api: nodeApi
+    info
   } = 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);
@@ -53,6 +45,10 @@ function ConnectTo({
     blocklet
   });
   const webWalletUrl = getWebWalletUrl(info);
+  const {
+    spaceGateways,
+    addSpaceGateway
+  } = useBlockletStorageContext();
   const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
     open: false,
     action: 'one-click-authorization',
@@ -108,19 +104,11 @@ function ConnectTo({
       }));
     }
   });
-  const onAuthorizeConnectSuccess = (response, decrypt) => {
-    setTimeout(async () => {
-      setAuthorizeConnect(preValue => ({
-        ...preValue,
-        open: false
-      }));
-      setAuthorizeFromNftConnect(preValue => ({
-        ...preValue,
-        open: false
-      }));
+  const onAuthorizeConnectSuccess = async (response, decrypt) => {
+    try {
       const endpoint = decrypt(response.endpoint);
       const space = response.space ? decrypt(response.space) : {};
-      await addSpaceGateway({
+      await addSpaceGatewayNow({
         endpoint,
         // name 默认为 DID Space，兼容旧版本的 DID Spaces
         ...{
@@ -129,7 +117,18 @@ function ConnectTo({
         },
         ...space
       });
-    }, 0);
+      setAuthorizeConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+      setAuthorizeFromNftConnect(preValue => ({
+        ...preValue,
+        open: false
+      }));
+    } catch (error) {
+      console.error(error);
+      toast.error(formatError(error));
+    }
   };
 
   /**
@@ -141,7 +140,7 @@ function ConnectTo({
    * }} {endpoint, name, did}
    * @returns {Promise<void>}
    */
-  const addSpaceGateway = async ({
+  const addSpaceGatewayNow = async ({
     endpoint,
     name,
     did
@@ -168,27 +167,10 @@ function ConnectTo({
       url: normalizeUrl,
       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
-          }]
-        }
-      });
-    }
+    await addSpaceGateway(spaceGateway, endpoint);
     toast.success(t('storage.spaces.connectedWithName', {
       name: spaceGateway?.name ?? 'DID Spaces'
     }));
-    refreshSpaceGateways();
   };
   const handleUseWalletConnect = () => {
     setAuthorizeFromNftConnect(preValue => ({
@@ -364,12 +346,6 @@ function ConnectTo({
     })]
   });
 }
-ConnectTo.propTypes = {
-  spaceGateways: array,
-  refreshSpaceGateways: func
-};
-ConnectTo.defaultProps = {
-  spaceGateways: [],
-  refreshSpaceGateways: () => undefined
-};
+ConnectTo.propTypes = {};
+ConnectTo.defaultProps = {};
 export default ConnectTo;

package/es/blocklet/storage/connected.js

@@ -1,77 +1,14 @@
 import { Box, CircularProgress, Typography } from '@mui/material';
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useAsyncEffect } from 'ahooks';
 import toast from '@arcblock/ux/lib/Toast';
 import ConnectTo from './connect-to';
 import SpaceItem from './item';
 import SpacesBackupRecords from './backups';
 import { useBlockletContext } from '../../contexts/blocklet';
 import { useNodeContext } from '../../contexts/node';
-import { getSpaceBackupEndpoint } from '../../util/spaces';
-import useBackupProgress from '../../hooks/use-backup-progress';
-import { updateSpaceGatewaysFromDIDSpaces } from '../../util/space-gateway';
 import DiskInfo from '../disk-info';
-import { formatError } from '../../util';
-
-/**
- * @description
- * @param {{
- *  blockletDid: string,
- *  setLoading: (bool: boolean) => void,
- *  refreshBlocklet: Function
- * }} { blockletDid, setLoading = () => undefined, refreshBlocklet }
- * @return {{
- *  spaceGateways: Array<SpaceGateway>
- *  refreshSpaceGateways: Function
- * }} {spaceGateways}
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function useSpaceGateways({
-  blockletDid,
-  setLoading = () => undefined
-}) {
-  const [refresh, setRefresh] = useState(false);
-  const [spaceGateways, setSpaceGateways] = useState([]);
-  const {
-    api: nodeApi
-  } = useNodeContext();
-  const refreshSpaceGateways = () => {
-    setRefresh(x => !x);
-  };
-  useAsyncEffect(async () => {
-    try {
-      if (!blockletDid) {
-        setSpaceGateways([]);
-        return;
-      }
-      setLoading(true);
-      const {
-        spaceGateways: _spaceGateways
-      } = await nodeApi.getBlockletSpaceGateways({
-        input: {
-          did: blockletDid
-        }
-      });
-      const latestSpaceGateways = await updateSpaceGatewaysFromDIDSpaces({
-        blockletDid,
-        nodeApi,
-        spaceGateways: _spaceGateways
-      });
-      setSpaceGateways(latestSpaceGateways ?? []);
-    } catch (error) {
-      console.error(error);
-      toast.error(formatError(error));
-    } finally {
-      setLoading(false);
-    }
-  }, [blockletDid, refresh]);
-  return {
-    refreshSpaceGateways,
-    spaceGateways
-  };
-}
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 
 /**
  * @typedef {{
@@ -80,37 +17,29 @@ function useSpaceGateways({
  *  url: string,
  *  endpoint: string
  *  protected?: boolean,
+ *  loading?: boolean,
  * }} SpaceGateway
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function Connected() {
   const {
     t
   } = useLocaleContext();
   /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
-    blocklet,
-    actions: {
-      refreshBlocklet
-    }
+    blocklet
   } = useBlockletContext();
   const {
     api: nodeApi
   } = useNodeContext();
-  const backupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet]);
-  const progress = useBackupProgress({
-    appDid: blocklet?.appDid
-  });
-  const [loading, setLoading] = useState(false);
   const {
     spaceGateways,
-    refreshSpaceGateways
-  } = useSpaceGateways({
-    blockletDid: blocklet?.meta?.did,
-    setLoading,
-    refreshBlocklet
-  });
-  const shouldShowLoading = loading && !spaceGateways?.length;
+    spaceGatewaysLoading,
+    deleteSpaceGateway,
+    spaceGatewayIsSelected
+  } = useBlockletStorageContext();
+  const shouldShowLoading = spaceGatewaysLoading && !spaceGateways?.length;
 
   /**
    *
@@ -118,23 +47,10 @@ function Connected() {
    * @param {SpaceGateway} spaceGateway
    */
   const onDeleteGateway = async spaceGateway => {
-    if (!spaceGateway) {
-      return;
-    }
-    if (spaceGateway.endpoint === backupEndpoint) {
-      toast.warning(t('storage.spaces.gateway.delete.failedForConnected'));
-      return;
-    }
-    await nodeApi.deleteBlockletSpaceGateway({
-      input: {
-        did: blocklet.meta.did,
-        spaceGatewayDid: spaceGateway?.did
-      }
-    });
+    await deleteSpaceGateway(spaceGateway);
     toast.success(t('storage.spaces.gateway.delete.succeeded', {
       name: `(${spaceGateway.name})`
     }));
-    refreshSpaceGateways();
   };
   const onBackupNow = async () => {
     await nodeApi.backupBlocklet({
@@ -157,34 +73,27 @@ function Connected() {
         fontSize: "1.2rem",
         fontWeight: "bold",
         children: t('storage.spaces.connected.title')
-      }), /*#__PURE__*/_jsx(ConnectTo, {
-        spaceGateways: spaceGateways,
-        refreshSpaceGateways: refreshSpaceGateways
-      })]
+      }), /*#__PURE__*/_jsx(ConnectTo, {})]
     }), /*#__PURE__*/_jsx(Box, {
       children: shouldShowLoading ? /*#__PURE__*/_jsx(Box, {
         display: "flex",
         justifyContent: "center",
         children: /*#__PURE__*/_jsx(CircularProgress, {})
-      }) : spaceGateways.map((spaceGateway, index) => {
+      }) : spaceGateways.map(x => {
         return /*#__PURE__*/_jsx(SpaceItem, {
           style: {
             marginTop: '12px'
           },
-          spaceGateway: spaceGateway,
-          connected: spaceGateways.findIndex(s => s.endpoint === backupEndpoint) === index,
+          spaceGateway: x,
+          connected: spaceGatewayIsSelected(x),
           onDelete: onDeleteGateway,
-          onBackupNow: onBackupNow,
-          progress: progress,
-          refreshSpaceGateways: refreshSpaceGateways
-        }, spaceGateway.endpoint);
+          onBackupNow: onBackupNow
+        }, x.endpoint);
       })
     }), /*#__PURE__*/_jsx(SpacesBackupRecords, {
       sx: {
         marginTop: '24px'
-      },
-      spaceGateways: spaceGateways,
-      progress: progress
+      }
     }), /*#__PURE__*/_jsx(Typography, {
       fontSize: "1.2rem",
       fontWeight: "bold",

package/es/blocklet/storage/delete.js

@@ -92,7 +92,8 @@ function DeleteDIDSpacesGateWay({
         props: {
           variant: 'contained',
           color: 'primary'
-        }
+        },
+        loading
       },
       onConfirm: handleOnDelete,
       onCancel: e => helpOpen(e, false)

package/es/blocklet/storage/index.js

@@ -1,16 +1,13 @@
-import React, { useMemo } from 'react';
-import { useBlockletContext } from '../../contexts/blocklet';
-import { getSpaceBackupEndpoint } from '../../util/spaces';
+import React from 'react';
 import Disconnect from './disconnect';
 import Connected from './connected';
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 import { jsx as _jsx } from "react/jsx-runtime";
 function NewStorage() {
-  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
-    blocklet
-  } = useBlockletContext();
-  const endpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet]);
-  if (endpoint) {
+    backupEndpoint
+  } = useBlockletStorageContext();
+  if (backupEndpoint) {
     return /*#__PURE__*/_jsx(Connected, {});
   }
   return /*#__PURE__*/_jsx(Disconnect, {});