@blocklet/did-space-react 0.5.57 → 0.5.59

package/lib/components/auth-connect-to/base-auth.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const material = require('@mui/material');
+const DidConnect = require('@arcblock/did-connect/lib/Connect');
+const constant = require('@arcblock/ux/lib/Util/constant');
+const ufo = require('ufo');
+const jsSdk = require('@blocklet/js-sdk');
+const useLocale = require('../../hooks/use-locale.js');
+const constants = require('../../libs/constants.js');
+
+function BaseAuth({ open, extraParams, onSuccess, onClose, ...rest }) {
+  const { t, locale } = useLocale();
+  const finalExtraParams = {
+    appPid: window.blocklet?.appPid,
+    appDid: window.blocklet?.appId,
+    appName: window.blocklet?.appName,
+    appDescription: window.blocklet?.appDescription,
+    appUrl: window.blocklet?.appUrl,
+    referrer: window.location.href,
+    scopes: constants.AUTHORIZE.DEFAULT_SCOPE,
+    ...extraParams
+  };
+  const {
+    action = "connect-to-did-spaces",
+    prefix = "/api/did",
+    baseUrl = ufo.joinURL(window.location.origin, constant.RELAY_SOCKET_PREFIX),
+    checkFn = jsSdk.createAxios({ baseURL: ufo.joinURL(window.location.origin, constant.RELAY_SOCKET_PREFIX) }).get,
+    webWalletUrl = window.blocklet?.webWalletUrl,
+    checkTimeout = 1e3 * 300,
+    messages = {
+      title: t("storage.spaces.provideNFT.title", { appName: finalExtraParams.appName }),
+      scan: t("storage.spaces.provideNFT.scan", { appName: finalExtraParams.appName }),
+      confirm: "",
+      success: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { gutterBottom: true, children: t("storage.spaces.provideNFT.success") })
+    },
+    ...restOptions
+  } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DidConnect,
+    {
+      ...restOptions,
+      open,
+      action,
+      prefix,
+      baseUrl,
+      checkFn,
+      webWalletUrl,
+      messages,
+      checkTimeout,
+      extraParams: finalExtraParams,
+      forceConnected: false,
+      saveConnect: false,
+      popup: true,
+      locale,
+      onSuccess,
+      onClose
+    }
+  );
+}
+
+exports.BaseAuth = BaseAuth;

package/lib/components/auth-connect-to/gateway-auth.d.ts

@@ -0,0 +1,5 @@
+import type { GatewayAuthOptions } from '../../types';
+export interface GatewayAuthProps extends GatewayAuthOptions {
+    open: boolean;
+}
+export declare function GatewayAuth({ open, spaceDid, spaceGatewayUrl, extraParams, onSuccess, onClose, }: GatewayAuthProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/auth-connect-to/gateway-auth.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const ufo = require('ufo');
+const jsSdk = require('@blocklet/js-sdk');
+const material = require('@mui/material');
+const useLocale = require('../../hooks/use-locale.js');
+const baseAuth = require('./base-auth.js');
+
+function GatewayAuth({
+  open,
+  spaceDid,
+  spaceGatewayUrl,
+  extraParams = {},
+  onSuccess,
+  onClose
+}) {
+  const { t } = useLocale();
+  if (!spaceGatewayUrl || !spaceDid) {
+    return null;
+  }
+  const { appName = window.blocklet?.appName } = extraParams;
+  const prefix = ufo.joinURL(spaceGatewayUrl, "space/api/did");
+  const baseUrl = new URL(spaceGatewayUrl).origin;
+  const checkFn = jsSdk.createAxios({ baseURL: ufo.joinURL(spaceGatewayUrl, "space") }).get;
+  const messages = {
+    title: t("storage.spaces.authorize.title", { appName }),
+    scan: t("storage.spaces.authorize.scan", { appName }),
+    confirm: "",
+    success: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { gutterBottom: true, children: t("storage.spaces.authorize.success") })
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    baseAuth.BaseAuth,
+    {
+      open,
+      action: "one-click-authorization",
+      prefix,
+      baseUrl,
+      checkFn,
+      messages,
+      extraParams: {
+        ...extraParams,
+        spaceDid
+      },
+      onSuccess,
+      onClose
+    }
+  );
+}
+
+exports.GatewayAuth = GatewayAuth;

package/lib/components/auth-connect-to/index.d.ts

@@ -0,0 +1,18 @@
+import { type BaseConnectToProps } from '../base-connect-to';
+import { GatewayAuth, type GatewayAuthProps } from './gateway-auth';
+import { BaseAuth, type BaseAuthProps } from './base-auth';
+import { BaseAuthOptions } from '../../types';
+export interface Options extends BaseAuthOptions, Record<string, any> {
+}
+export interface AuthConnectToProps extends BaseConnectToProps {
+    options?: Options;
+    onSuccess?: (response: Record<string, string>, decrypt: Function) => Promise<void>;
+}
+/** Space 连接组件, 内置 Auth 验证流程 */
+export declare function AuthConnectTo({ options, onSuccess, ...rest }: AuthConnectToProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AuthConnectTo {
+    var WalletAuth: typeof BaseAuth;
+    var GatewayAuth: typeof import("./gateway-auth").GatewayAuth;
+}
+export { BaseAuth as WalletAuth, type BaseAuthProps as WalletAuthProps };
+export { GatewayAuth, type GatewayAuthProps };

package/lib/components/auth-connect-to/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const index = require('../base-connect-to/index.js');
+const gatewayAuth = require('./gateway-auth.js');
+const baseAuth = require('./base-auth.js');
+
+function AuthConnectTo({ options, onSuccess, ...rest }) {
+  const [walletOptions, setWalletOptions] = React.useState({
+    open: false
+  });
+  const [gatewayOptions, setGatewayOptions] = React.useState({
+    open: false,
+    spaceDid: "",
+    spaceGatewayUrl: ""
+  });
+  const onWalletClick = () => setWalletOptions((pre) => ({ ...pre, open: true }));
+  const onGatewayConfirm = ({ spaceDid, spaceGatewayUrl }) => {
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: true,
+      spaceDid,
+      spaceGatewayUrl
+    }));
+  };
+  const handleSuccess = async (response, decrypt) => {
+    await onSuccess?.(response, decrypt);
+    setWalletOptions((pre) => ({
+      ...pre,
+      open: false
+    }));
+    setGatewayOptions((pre) => ({
+      ...pre,
+      open: false
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.BaseConnectTo, { ...rest, onWalletClick, onGatewayConfirm }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      baseAuth.BaseAuth,
+      {
+        ...options,
+        ...walletOptions,
+        onSuccess: handleSuccess,
+        onClose: () => setWalletOptions((pre) => ({ ...pre, open: false }))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      gatewayAuth.GatewayAuth,
+      {
+        ...options,
+        ...gatewayOptions,
+        onSuccess: handleSuccess,
+        onClose: () => setGatewayOptions((pre) => ({ ...pre, open: false }))
+      }
+    )
+  ] });
+}
+AuthConnectTo.WalletAuth = baseAuth.BaseAuth;
+AuthConnectTo.GatewayAuth = gatewayAuth.GatewayAuth;
+
+exports.GatewayAuth = gatewayAuth.GatewayAuth;
+exports.WalletAuth = baseAuth.BaseAuth;
+exports.AuthConnectTo = AuthConnectTo;

package/lib/components/base-connect-to/index.d.ts

@@ -0,0 +1,10 @@
+import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
+export interface BaseConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+    onWalletClick?: () => void;
+    onGatewayConfirm?: (params: {
+        spaceDid: string;
+        spaceGatewayUrl: string;
+    }) => void;
+}
+/** 基础连接按钮组件，只负责前端 ux */
+export declare function BaseConnectTo({ style, onWalletClick, onGatewayConfirm, ...rest }: BaseConnectToProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/{ConnectTo → base-connect-to}/index.js

@@ -4,20 +4,23 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const did = require('@arcblock/did');
 const material = require('@mui/material');
+const HelpOutlineIcon = require('@mui/icons-material/HelpOutline');
 const Button = require('@arcblock/ux/lib/Button');
 const SplitButton = require('@arcblock/ux/lib/SplitButton');
 const Dialog = require('@arcblock/ux/lib/Dialog');
+const ufo = require('ufo');
+const constants = require('../../libs/constants.js');
 const util = require('../../libs/util.js');
 const gateway = require('../../libs/gateway.js');
 const useLocale = require('../../hooks/use-locale.js');
 
-function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
-  const { t } = useLocale();
+function BaseConnectTo({ style, onWalletClick, onGatewayConfirm, ...rest }) {
+  const { t, locale } = useLocale();
   const [url, setUrl] = React.useState("");
   const [loading, setLoading] = React.useState(false);
   const [open, setOpen] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState("");
-  const handleUseSpaceGatewayConnect = async () => {
+  const onGatewayChange = async () => {
     try {
       setLoading(true);
       const spaceGatewayUrl = await gateway.getSpaceGatewayUrl(url);
@@ -26,7 +29,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
       if (!did.isValid(spaceDid) || !await gateway.isValidSpaceGatewayUrl(didSpacesCoreUrl)) {
         throw new Error(t("storage.spaces.gateway.add.invalidUrl"));
       }
-      onGatewayConnect?.({
+      onGatewayConfirm?.({
         spaceDid,
         spaceGatewayUrl: didSpacesCoreUrl
       });
@@ -38,7 +41,7 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
       setLoading(false);
     }
   };
-  const openGatewayInput = () => {
+  const onGatewayClick = () => {
     setErrorMessage("");
     setUrl("");
     setOpen(true);
@@ -55,19 +58,18 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
               sx: {
                 textTransform: "none"
               },
-              onClick: openGatewayInput,
               size: "small",
-              ...rest,
+              onClick: onGatewayClick,
               children: t("storage.spaces.connect.useSpaceGateway")
             },
             "1"
           )
         ],
-        onClick: onWalletConnect,
         color: "primary",
         style: { textTransform: "none !important", fontSize: "1rem", ...style },
         size: "small",
         ...rest,
+        onClick: onWalletClick,
         children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontWeight: "bold", textTransform: "none" }, children: t("storage.spaces.connect.useWallet") })
       }
     ),
@@ -93,20 +95,10 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
               children: t("common.cancel")
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              onClick: handleUseSpaceGatewayConnect,
-              color: "primary",
-              disabled: loading || !url,
-              variant: "contained",
-              autoFocus: true,
-              children: [
-                loading && /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16 }),
-                t("common.confirm")
-              ]
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: onGatewayChange, color: "primary", disabled: loading || !url, variant: "contained", autoFocus: true, children: [
+            loading && /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 16 }),
+            t("common.confirm")
+          ] })
         ] }),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingTop: 12, overflowY: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.DialogContentText, { component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "div", children: /* @__PURE__ */ jsxRuntime.jsx(
           material.TextField,
@@ -126,10 +118,24 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
             helperText: errorMessage,
             onKeyDown: async (e) => {
               if (e.key === "Enter") {
-                await handleUseSpaceGatewayConnect();
+                await onGatewayChange();
               }
             },
-            autoFocus: true
+            autoFocus: true,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: t("storage.spaces.connect.howToGetGatewayUrl"), placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(material.Link, { href: ufo.withQuery(constants.copyGatewayPageUrl, { locale }), target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(
+                HelpOutlineIcon,
+                {
+                  sx: {
+                    ml: 0.5,
+                    color: "text.secondary",
+                    cursor: "pointer",
+                    fontSize: "18px",
+                    verticalAlign: "-2px"
+                  }
+                }
+              ) }) })
+            }
           }
         ) }) }) })
       }
@@ -137,4 +143,4 @@ function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
   ] });
 }
 
-module.exports = ConnectTo;
+exports.BaseConnectTo = BaseConnectTo;

package/{es/components/PreviewNFT → lib/components/preview-space-nft}/index.d.ts

@@ -1,6 +1,5 @@
-declare function PreviewSpaceNft({ src, width, height }: {
+export declare function PreviewSpaceNft({ src, width, height, }: {
     src: string;
     width?: string;
     height?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export default PreviewSpaceNft;

package/lib/components/{PreviewNFT → preview-space-nft}/index.js

@@ -4,9 +4,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const material = require('@mui/material');
 const CloseOutlinedIcon = require('@mui/icons-material/CloseOutlined');
+require('../../icons/index.js');
 const emptySpaceNft = require('../../icons/empty-space-nft.svg.js');
 
-function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
+function PreviewSpaceNft({
+  src,
+  width = "58px",
+  height = "58px"
+}) {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -78,4 +83,4 @@ function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
   ] });
 }
 
-module.exports = PreviewSpaceNft;
+exports.PreviewSpaceNft = PreviewSpaceNft;

package/lib/components/session-connect-to/index.d.ts

@@ -0,0 +1,16 @@
+import { SpaceGateway } from '../../types';
+import { BaseConnectToProps } from '../base-connect-to';
+import { ReConnect, type ReConnectProps } from './re-connect';
+export interface SessionConnectToProps extends Omit<BaseConnectToProps, 'onError'> {
+    session: {
+        refresh: Function;
+    };
+    onConnected?: (spaceGateway: SpaceGateway) => Promise<void>;
+    onError?: (error: Error) => void;
+}
+/** 会话连接组件，会将 spaceGateway 信息存储于 users 表 */
+export declare function SessionConnectTo({ session, onConnected, onError, ...rest }: SessionConnectToProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SessionConnectTo {
+    var ReConnect: typeof import("./re-connect").ReConnect;
+}
+export { ReConnect, type ReConnectProps };

package/lib/components/session-connect-to/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const jsSdk = require('@blocklet/js-sdk');
+const util = require('../../libs/util.js');
+const index = require('../auth-connect-to/index.js');
+const reConnect = require('./re-connect.js');
+
+function SessionConnectTo({ session, onConnected, onError, ...rest }) {
+  const options = {
+    action: "connect-to-did-spaces-for-user"
+  };
+  const onSuccess = async (response, decrypt) => {
+    try {
+      const spaceGateway = util.decryptSpaceGateway(response, decrypt);
+      await new jsSdk.BlockletSDK().user.updateDidSpace({ spaceGateway });
+      session.refresh();
+      await onConnected?.(spaceGateway);
+    } catch (err) {
+      console.error(err);
+      onError?.(err);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(index.AuthConnectTo, { ...rest, options, onSuccess });
+}
+SessionConnectTo.ReConnect = reConnect.ReConnect;
+
+exports.ReConnect = reConnect.ReConnect;
+exports.SessionConnectTo = SessionConnectTo;

package/lib/components/session-connect-to/re-connect.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from '@mui/material';
+import { SpaceGateway } from '../../types';
+export interface ReConnectProps extends Omit<ButtonProps, 'onClick' | 'onError'> {
+    session: {
+        refresh: Function;
+    };
+    spaceDid: string;
+    spaceGatewayUrl: string;
+    onConnected?: (spaceGateway: SpaceGateway) => Promise<void>;
+    onError?: (error: Error) => void;
+}
+/** 用于 DApp 重新连接 Space */
+export declare function ReConnect({ session, spaceDid, spaceGatewayUrl, onConnected, onError, ...rest }: ReConnectProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/session-connect-to/re-connect.js

@@ -0,0 +1,53 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const material = require('@mui/material');
+const React = require('react');
+const jsSdk = require('@blocklet/js-sdk');
+const useLocale = require('../../hooks/use-locale.js');
+const util = require('../../libs/util.js');
+const gatewayAuth = require('../auth-connect-to/gateway-auth.js');
+
+function ReConnect({ session, spaceDid, spaceGatewayUrl, onConnected, onError, ...rest }) {
+  const { t } = useLocale();
+  const [authOptions, setAuthOptions] = React.useState({
+    open: false,
+    spaceDid,
+    spaceGatewayUrl
+  });
+  const onSuccess = async (response, decrypt) => {
+    try {
+      const spaceGateway = util.decryptSpaceGateway(response, decrypt);
+      await new jsSdk.BlockletSDK().user.updateDidSpace({ spaceGateway });
+      session.refresh();
+      await onConnected?.(spaceGateway);
+    } catch (err) {
+      console.error(err);
+      onError?.(err);
+    } finally {
+      setAuthOptions((pre) => ({ ...pre, open: false }));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Button,
+    {
+      ...rest,
+      onClick: () => {
+        setAuthOptions((pre) => ({ ...pre, open: true }));
+      },
+      children: [
+        t("storage.spaces.connect.reconnect"),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gatewayAuth.GatewayAuth,
+          {
+            ...authOptions,
+            onSuccess,
+            onClose: () => setAuthOptions((pre) => ({ ...pre, open: false }))
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.ReConnect = ReConnect;

package/lib/components/{SpaceCard → space-card}/index.d.ts

@@ -14,5 +14,4 @@ export interface SpaceCardProps extends BoxProps {
     action?: Action;
     deps?: any[];
 }
-declare function SpaceCard({ endpoint, selected, compat, action, className, deps, ...rest }: SpaceCardProps): import("react/jsx-runtime").JSX.Element;
-export default SpaceCard;
+export declare function SpaceCard({ endpoint, selected, compat, action, className, deps, ...rest }: SpaceCardProps): import("react/jsx-runtime").JSX.Element;