@blocklet/ui-react 2.10.58 → 2.10.60

package/lib/UserCenter/components/storage/action.d.ts

@@ -0,0 +1,9 @@
+import { SpaceGateway, SpaceStatus } from '@blocklet/did-space-react';
+import { Session } from '../../../@types';
+declare function Action({ session, spaceGateway, spaceStatus, refresh, }: {
+    session: Session;
+    spaceGateway: SpaceGateway;
+    spaceStatus: SpaceStatus;
+    refresh: Function;
+}): import("react").JSX.Element;
+export default Action;

package/lib/UserCenter/components/storage/action.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReConnect, SpaceStatus } from "@blocklet/did-space-react";
+import { IconButton, Link, Stack } from "@mui/material";
+import Toast from "@arcblock/ux/lib/Toast";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import { getSpaceHomeUrl } from "../../../libs/spaces.js";
+import { formatAxiosError } from "../../libs/utils.js";
+function Action({
+  session,
+  spaceGateway,
+  spaceStatus,
+  refresh
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+    spaceStatus === SpaceStatus.DISCONNECTED && /* @__PURE__ */ jsx(
+      ReConnect,
+      {
+        variant: "outlined",
+        session,
+        spaceDid: session.user?.didSpace?.did,
+        spaceGatewayUrl: session.user?.didSpace?.url,
+        onConnected: async () => {
+          await refresh();
+        },
+        onError: (error) => {
+          console.error(error);
+          Toast.error(formatAxiosError(error));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(IconButton, { size: "small", LinkComponent: Link, href: getSpaceHomeUrl(spaceGateway.endpoint), target: "_blank", children: /* @__PURE__ */ jsx(OpenInNewIcon, {}) })
+  ] });
+}
+export default Action;

package/lib/UserCenter/components/storage/connected.js

@@ -1,13 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, IconButton, Link, Typography } from "@mui/material";
-import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import SpaceCard from "@blocklet/did-space-react/lib/components/SpaceCard";
-import { getSpaceHomeUrl } from "../../../libs/spaces.js";
+import { Box, Typography } from "@mui/material";
+import { SpaceCard, SessionConnectTo } from "@blocklet/did-space-react";
+import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
+import Action from "./action.js";
 function Connected({ spaceGateway }) {
   const { t } = useLocaleContext();
+  const { updateSpaceGateway, session } = useConfigUserSpaceContext();
   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: "16px", fontWeight: "bold", children: t("storage.spaces.connected.title") }) }),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: "12px", children: [
+      /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: "bold", children: t("storage.spaces.connected.title") }),
+      /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway })
+    ] }),
     /* @__PURE__ */ jsx(Box, { children: spaceGateway && /* @__PURE__ */ jsx(
       SpaceCard,
       {
@@ -15,16 +19,7 @@ function Connected({ spaceGateway }) {
         endpoint: spaceGateway.endpoint,
         deps: [spaceGateway],
         selected: true,
-        action: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size: "small",
-            LinkComponent: Link,
-            href: getSpaceHomeUrl(spaceGateway.endpoint),
-            target: "_blank",
-            children: /* @__PURE__ */ jsx(OpenInNewIcon, {})
-          }
-        )
+        action: (props) => /* @__PURE__ */ jsx(Action, { session, ...props })
       },
       spaceGateway.endpoint
     ) })

package/lib/UserCenter/components/storage/disconnect.js

@@ -1,23 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { SessionConnectTo } from "@blocklet/did-space-react";
 import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
+import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
 function Disconnect() {
   const { t } = useLocaleContext();
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      minHeight: "40vh",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      alignContent: "center",
-      children: [
-        /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { width: 200, height: 250 } }),
-        /* @__PURE__ */ jsx(Typography, { marginTop: "24px", marginBottom: "24px", children: t("storage.spaces.connect.providerForStorage") })
-      ]
-    }
-  ) });
+  const { updateSpaceGateway, session } = useConfigUserSpaceContext();
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", alignContent: "center", children: [
+    /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { width: 200, height: 250 } }),
+    /* @__PURE__ */ jsx(Typography, { sx: { mt: 1, mb: 2 }, children: t("storage.spaces.connect.providerForStorage") }),
+    /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway }) })
+  ] });
 }
 export default Disconnect;

package/lib/UserCenter/components/storage/index.js

@@ -1,22 +1,18 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import Center from "@arcblock/ux/lib/Center";
 import { LocaleProvider } from "@arcblock/ux/lib/Locale/context";
 import styled from "@emotion/styled";
 import { Box, CircularProgress } from "@mui/material";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
-import ConnectTo from "./connect-to.js";
 import Connected from "./connected.js";
 import Disconnect from "./disconnect.js";
 import { translations } from "../../libs/locales.js";
 function DidSpace() {
-  const { spaceGateway, updateSpaceGateway, hasStorageEndpoint, loading, storageEndpoint } = useConfigUserSpaceContext();
+  const { spaceGateway, hasStorageEndpoint, loading } = useConfigUserSpaceContext();
   if (loading) {
     return /* @__PURE__ */ jsx(Center, { relative: "parent", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  return /* @__PURE__ */ jsx(LocaleProvider, { translations, children: /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway }) : /* @__PURE__ */ jsx(Disconnect, {}) }),
-    /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", paddingTop: "24px", children: /* @__PURE__ */ jsx(ConnectTo, { onConnect: updateSpaceGateway, storageEndpoint }) })
-  ] }) });
+  return /* @__PURE__ */ jsx(LocaleProvider, { translations, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Box, { maxWidth: "720px", children: hasStorageEndpoint ? /* @__PURE__ */ jsx(Connected, { spaceGateway }) : /* @__PURE__ */ jsx(Disconnect, {}) }) }) });
 }
 const Container = styled(Box)`
   height: 100%;

package/lib/contexts/config-user-space.d.ts

@@ -1,3 +1,4 @@
+import { Session } from '../../lib/@types';
 export interface SpaceGateway {
     did: string;
     name: string;
@@ -10,6 +11,7 @@ export interface SettingStorageEndpoint {
 interface ConfigUserSpaceContextType {
     loading: boolean;
     spaceGateway: SpaceGateway | undefined;
+    session: Session;
     deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
     updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
     storageEndpoint: string;

package/lib/contexts/config-user-space.js

@@ -21,7 +21,6 @@ function ConfigUserSpaceProvider({ children }) {
   };
   const updateSpaceGateway = async (x) => {
     setSpaceGateway(x);
-    session.refresh();
     await settingStorageEndpoint(x.endpoint);
   };
   const hasStorageEndpoint = Boolean(storageEndpoint && spaceGateway);
@@ -31,6 +30,7 @@ function ConfigUserSpaceProvider({ children }) {
       value: {
         loading,
         spaceGateway,
+        session,
         deleteSpaceGateway,
         updateSpaceGateway,
         storageEndpoint,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.10.58",
+  "version": "2.10.60",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,9 +32,9 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.10.58",
-    "@arcblock/react-hooks": "^2.10.58",
-    "@blocklet/did-space-react": "^0.5.58",
+    "@arcblock/bridge": "^2.10.60",
+    "@arcblock/react-hooks": "^2.10.60",
+    "@blocklet/did-space-react": "^0.5.59",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -80,5 +80,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b6bba35441efe81e5df2833a5ca5fb589ceea55b"
+  "gitHead": "fb4ccbae5428593bc9d7555e832f7743fbd9c71b"
 }

package/src/UserCenter/components/storage/action.tsx

@@ -0,0 +1,47 @@
+import { ReConnect, SpaceGateway, SpaceStatus } from '@blocklet/did-space-react';
+import { IconButton, Link, Stack } from '@mui/material';
+import Toast from '@arcblock/ux/lib/Toast';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { AxiosError } from 'axios';
+import { getSpaceHomeUrl } from '../../../libs/spaces';
+import { Session } from '../../../@types';
+import { formatAxiosError } from '../../libs/utils';
+
+function Action({
+  session,
+  spaceGateway,
+  spaceStatus,
+  refresh,
+}: {
+  session: Session;
+  spaceGateway: SpaceGateway;
+  spaceStatus: SpaceStatus;
+  refresh: Function;
+}) {
+  return (
+    <Stack direction="row" spacing={1}>
+      {/* 重新连接 */}
+      {spaceStatus === SpaceStatus.DISCONNECTED && (
+        <ReConnect
+          variant="outlined"
+          session={session}
+          spaceDid={session.user?.didSpace?.did}
+          spaceGatewayUrl={session.user?.didSpace?.url}
+          onConnected={async () => {
+            await refresh();
+          }}
+          onError={(error) => {
+            console.error(error);
+            Toast.error(formatAxiosError(error as AxiosError));
+          }}
+        />
+      )}
+      {/* 打开空间 */}
+      <IconButton size="small" LinkComponent={Link} href={getSpaceHomeUrl(spaceGateway.endpoint)} target="_blank">
+        <OpenInNewIcon />
+      </IconButton>
+    </Stack>
+  );
+}
+
+export default Action;

package/src/UserCenter/components/storage/connected.tsx

@@ -1,12 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, IconButton, Link, Typography } from '@mui/material';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import SpaceCard from '@blocklet/did-space-react/lib/components/SpaceCard';
-import { SpaceGateway } from '../../../contexts/config-user-space';
-import { getSpaceHomeUrl } from '../../../libs/spaces';
+import { Box, Typography } from '@mui/material';
+import { SpaceCard, SessionConnectTo } from '@blocklet/did-space-react';
+import { SpaceGateway, useConfigUserSpaceContext } from '../../../contexts/config-user-space';
+import Action from './action';
 
 function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined }) {
   const { t } = useLocaleContext();
+  const { updateSpaceGateway, session } = useConfigUserSpaceContext();
 
   return (
     <Box display="flex" flexDirection="column">
@@ -14,6 +14,7 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
         <Typography fontSize="16px" fontWeight="bold">
           {t('storage.spaces.connected.title')}
         </Typography>
+        <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
       </Box>
       <Box>
         {spaceGateway && (
@@ -23,15 +24,8 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
             endpoint={spaceGateway.endpoint}
             deps={[spaceGateway]}
             selected
-            action={
-              <IconButton
-                size="small"
-                LinkComponent={Link}
-                href={getSpaceHomeUrl(spaceGateway.endpoint)}
-                target="_blank">
-                <OpenInNewIcon />
-              </IconButton>
-            }
+            // eslint-disable-next-line react/no-unstable-nested-components
+            action={(props) => <Action session={session} {...props} />}
           />
         )}
       </Box>

package/src/UserCenter/components/storage/disconnect.tsx

@@ -1,24 +1,20 @@
 import { Box, Typography } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { SessionConnectTo } from '@blocklet/did-space-react';
 // @ts-expect-error
 import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
+import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';
 
 function Disconnect() {
   const { t } = useLocaleContext();
+  const { updateSpaceGateway, session } = useConfigUserSpaceContext();
 
   return (
-    <Box>
-      <Box
-        minHeight="40vh"
-        display="flex"
-        flexDirection="column"
-        justifyContent="center"
-        alignItems="center"
-        alignContent="center">
-        <EmptySpacesNFT style={{ width: 200, height: 250 }} />
-        <Typography marginTop="24px" marginBottom="24px">
-          {t('storage.spaces.connect.providerForStorage')}
-        </Typography>
+    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" alignContent="center">
+      <EmptySpacesNFT style={{ width: 200, height: 250 }} />
+      <Typography sx={{ mt: 1, mb: 2 }}>{t('storage.spaces.connect.providerForStorage')}</Typography>
+      <Box display="flex" alignItems="center" justifyContent="center">
+        <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
       </Box>
     </Box>
   );

package/src/UserCenter/components/storage/index.tsx

@@ -3,14 +3,12 @@ import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
 import styled from '@emotion/styled';
 import { Box, CircularProgress } from '@mui/material';
 import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';
-import ConnectTo from './connect-to';
 import Connected from './connected';
 import Disconnect from './disconnect';
 import { translations } from '../../libs/locales';
 
 function DidSpace() {
-  const { spaceGateway, updateSpaceGateway, hasStorageEndpoint, loading, storageEndpoint } =
-    useConfigUserSpaceContext();
+  const { spaceGateway, hasStorageEndpoint, loading } = useConfigUserSpaceContext();
 
   if (loading) {
     return (
@@ -24,9 +22,6 @@ function DidSpace() {
     <LocaleProvider translations={translations}>
       <Container>
         <Box maxWidth="720px">{hasStorageEndpoint ? <Connected spaceGateway={spaceGateway} /> : <Disconnect />}</Box>
-        <Box display="flex" alignItems="center" justifyContent="center" paddingTop="24px">
-          <ConnectTo onConnect={updateSpaceGateway} storageEndpoint={storageEndpoint} />
-        </Box>
       </Container>
     </LocaleProvider>
   );

package/src/contexts/config-user-space.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useMemo, useState, useEffect } from 'react';
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
 import { SessionContext as TSessionContext } from '../@types';
+import { Session } from '../../lib/@types';
 
 export interface SpaceGateway {
   did: string;
@@ -17,6 +18,7 @@ export interface SettingStorageEndpoint {
 interface ConfigUserSpaceContextType {
   loading: boolean;
   spaceGateway: SpaceGateway | undefined;
+  session: Session;
   deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>;
   updateSpaceGateway: (updateSpaceGateway: SpaceGateway) => Promise<void>;
   storageEndpoint: string;
@@ -51,7 +53,6 @@ function ConfigUserSpaceProvider({ children }: { children: React.ReactNode }) {
 
   const updateSpaceGateway = async (x: SpaceGateway) => {
     setSpaceGateway(x);
-    session.refresh();
     // eslint-disable-next-line no-use-before-define
     await settingStorageEndpoint(x.endpoint);
   };
@@ -63,6 +64,7 @@ function ConfigUserSpaceProvider({ children }: { children: React.ReactNode }) {
       value={{
         loading,
         spaceGateway,
+        session,
         deleteSpaceGateway,
         updateSpaceGateway,
         storageEndpoint,

package/lib/UserCenter/components/storage/connect-to.d.ts

@@ -1,6 +0,0 @@
-import { SpaceGateway } from '../../../contexts/config-user-space';
-declare function ConnectTo({ onConnect, storageEndpoint, }: {
-    onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
-    storageEndpoint: string;
-}): import("react").JSX.Element;
-export default ConnectTo;

package/lib/UserCenter/components/storage/connect-to.js

@@ -1,108 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Button, Typography } from "@mui/material";
-import { useState } from "react";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import DidConnect from "@arcblock/did-connect/lib/Connect";
-import { joinURL } from "ufo";
-import toast from "@arcblock/ux/lib/Toast";
-import isEmpty from "lodash/isEmpty";
-import { RELAY_SOCKET_PREFIX } from "@arcblock/ux/lib/Util/constant";
-import { axios } from "../../libs/api.js";
-function ConnectTo({
-  onConnect,
-  storageEndpoint
-}) {
-  const { t, locale } = useLocaleContext();
-  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
-    open: false,
-    action: "connect-to-did-spaces-for-user",
-    checkTimeout: 1e3 * 300,
-    prefix: "/api/did",
-    checkFn: axios.create({
-      baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX)
-    }).get,
-    extraParams: {},
-    messages: {
-      title: t("storage.spaces.provideNFT.title", { appName: window.blocklet.appName }, locale),
-      scan: t("storage.spaces.provideNFT.scan", { appName: window.blocklet.appName }, locale),
-      confirm: "",
-      success: /* @__PURE__ */ jsx(Typography, { gutterBottom: true, children: t("storage.spaces.provideNFT.success") })
-    },
-    onClose: () => {
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false
-      }));
-    }
-  });
-  const updateSpaceGateway = async (spaceGateway) => {
-    await onConnect(spaceGateway);
-    toast.success(t("storage.spaces.connectedWithName", { name: spaceGateway.name }));
-  };
-  const onAuthorizeConnectSuccess = (response, decrypt) => {
-    setTimeout(async () => {
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false
-      }));
-      if (!isEmpty(response.spaceGateway)) {
-        await updateSpaceGateway(decrypt(response.spaceGateway));
-        return;
-      }
-      const endpoint = decrypt(response.endpoint);
-      const space = response.space ? decrypt(response.space) : {};
-      await updateSpaceGateway({
-        endpoint,
-        // name 默认为 DID Space，兼容旧版本的 DID Spaces
-        ...{ name: "DID Space" },
-        ...space
-      });
-    }, 0);
-  };
-  const handleUseWalletConnect = () => {
-    setAuthorizeFromNftConnect((preValue) => ({
-      ...preValue,
-      open: true,
-      extraParams: {
-        appDid: window.blocklet.appId,
-        appName: window.blocklet.appName,
-        appDescription: window.blocklet.appDescription,
-        scopes: "list:object read:object write:object",
-        appUrl: window.blocklet.appUrl,
-        referrer: window.location.href
-      }
-    }));
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        color: "primary",
-        sx: { textTransform: "none !important", fontSize: "13px", paddingLeft: 0.75, paddingRight: 0.75 },
-        size: "small",
-        onClick: handleUseWalletConnect,
-        variant: "outlined",
-        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,
-        checkFn: authorizeFromNftConnect.checkFn,
-        onSuccess: onAuthorizeConnectSuccess,
-        onClose: authorizeFromNftConnect.onClose,
-        checkTimeout: authorizeFromNftConnect.checkTimeout,
-        extraParams: authorizeFromNftConnect.extraParams,
-        messages: authorizeFromNftConnect.messages,
-        locale
-      }
-    )
-  ] });
-}
-export default ConnectTo;

package/src/UserCenter/components/storage/connect-to.tsx

@@ -1,121 +0,0 @@
-import { Box, Button, Typography } from '@mui/material';
-import { useState } from 'react';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import DidConnect from '@arcblock/did-connect/lib/Connect';
-import { joinURL } from 'ufo';
-import toast from '@arcblock/ux/lib/Toast';
-import isEmpty from 'lodash/isEmpty';
-import { RELAY_SOCKET_PREFIX } from '@arcblock/ux/lib/Util/constant';
-import { axios } from '../../libs/api';
-import { SpaceGateway } from '../../../contexts/config-user-space';
-
-function ConnectTo({
-  onConnect,
-  storageEndpoint,
-}: {
-  onConnect: (spaceGateway: SpaceGateway) => Promise<void>;
-  storageEndpoint: string;
-}) {
-  const { t, locale } = useLocaleContext();
-
-  const [authorizeFromNftConnect, setAuthorizeFromNftConnect] = useState({
-    open: false,
-    action: 'connect-to-did-spaces-for-user',
-    checkTimeout: 1000 * 300,
-    prefix: '/api/did',
-    checkFn: axios.create({
-      baseURL: joinURL(window.location.origin, RELAY_SOCKET_PREFIX),
-    }).get,
-    extraParams: {},
-    messages: {
-      title: t('storage.spaces.provideNFT.title', { appName: window.blocklet.appName }, locale),
-      scan: t('storage.spaces.provideNFT.scan', { appName: window.blocklet.appName }, locale),
-      confirm: '',
-      success: <Typography gutterBottom>{t('storage.spaces.provideNFT.success')}</Typography>,
-    },
-    onClose: () => {
-      // eslint-disable-next-line no-shadow
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false,
-      }));
-    },
-  });
-
-  const updateSpaceGateway = async (spaceGateway: SpaceGateway) => {
-    await onConnect(spaceGateway);
-    toast.success(t('storage.spaces.connectedWithName', { name: spaceGateway.name }));
-  };
-
-  const onAuthorizeConnectSuccess = (response: Record<string, string>, decrypt: Function) => {
-    setTimeout(async () => {
-      setAuthorizeFromNftConnect((preValue) => ({
-        ...preValue,
-        open: false,
-      }));
-
-      if (!isEmpty(response.spaceGateway)) {
-        await updateSpaceGateway(decrypt(response.spaceGateway));
-        return;
-      }
-
-      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
-        ...{ name: 'DID Space' },
-        ...space,
-      });
-    }, 0);
-  };
-
-  const handleUseWalletConnect = () => {
-    setAuthorizeFromNftConnect((preValue) => ({
-      ...preValue,
-      open: true,
-      extraParams: {
-        appDid: window.blocklet.appId,
-        appName: window.blocklet.appName,
-        appDescription: window.blocklet.appDescription,
-        scopes: 'list:object read:object write:object',
-        appUrl: window.blocklet.appUrl,
-        referrer: window.location.href,
-      },
-    }));
-  };
-
-  return (
-    <Box>
-      <Button
-        color="primary"
-        sx={{ textTransform: 'none !important', fontSize: '13px', paddingLeft: 0.75, paddingRight: 0.75 }}
-        size="small"
-        onClick={handleUseWalletConnect}
-        variant="outlined">
-        {storageEndpoint ? t('storage.spaces.connect.useWalletReconnect') : t('storage.spaces.connect.useWallet')}
-      </Button>
-
-      {/* 为了获取 DID Spaces Url */}
-      <DidConnect
-        forceConnected={false}
-        saveConnect={false}
-        prefix={authorizeFromNftConnect.prefix}
-        open={authorizeFromNftConnect.open}
-        popup
-        action={authorizeFromNftConnect.action}
-        checkFn={authorizeFromNftConnect.checkFn}
-        onSuccess={onAuthorizeConnectSuccess}
-        onClose={authorizeFromNftConnect.onClose}
-        checkTimeout={authorizeFromNftConnect.checkTimeout}
-        extraParams={authorizeFromNftConnect.extraParams}
-        messages={authorizeFromNftConnect.messages}
-        locale={locale}
-      />
-    </Box>
-  );
-}
-
-export default ConnectTo;