@blocklet/did-space-react 0.5.57

package/es/types/index.d.ts

@@ -0,0 +1,31 @@
+export type $TSFixMe = any;
+export interface AuthorizeConnect {
+    prefix?: string;
+    baseUrl?: string;
+    open: boolean;
+    action: string;
+    checkTimeout: number;
+    messages: {
+        title: string;
+        scan: string;
+        confirm: string;
+        success: React.ReactNode;
+    };
+    extraParams?: Record<string, any>;
+    checkFn?: Function;
+    onClose?: Function;
+}
+export declare enum SpaceStatus {
+    UNKNOWN = "unknown",
+    CONNECTED = "connected",
+    DISCONNECTED = "disconnected",
+    EXPIRED = "expired"
+}
+export interface SpaceGateway {
+    did: string;
+    name: string;
+    url: string;
+    endpoint: string;
+    protected?: boolean;
+    loading?: boolean;
+}

package/es/types/index.js

@@ -0,0 +1,9 @@
+var SpaceStatus = /* @__PURE__ */ ((SpaceStatus2) => {
+  SpaceStatus2["UNKNOWN"] = "unknown";
+  SpaceStatus2["CONNECTED"] = "connected";
+  SpaceStatus2["DISCONNECTED"] = "disconnected";
+  SpaceStatus2["EXPIRED"] = "expired";
+  return SpaceStatus2;
+})(SpaceStatus || {});
+
+export { SpaceStatus };

package/lib/components/ConnectTo/connect-to.stories.d.ts

@@ -0,0 +1,10 @@
+import Basic from './stories/basic';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export { Basic };

package/lib/components/ConnectTo/index.d.ts

@@ -0,0 +1,10 @@
+import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
+export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+    onWalletConnect?: () => void;
+    onGatewayConnect?: (params: {
+        spaceDid: string;
+        spaceGatewayUrl: string;
+    }) => void;
+}
+declare function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps): import("react/jsx-runtime").JSX.Element;
+export default ConnectTo;

package/lib/components/ConnectTo/index.js

@@ -0,0 +1,140 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const did = require('@arcblock/did');
+const material = require('@mui/material');
+const Button = require('@arcblock/ux/lib/Button');
+const SplitButton = require('@arcblock/ux/lib/SplitButton');
+const Dialog = require('@arcblock/ux/lib/Dialog');
+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();
+  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 () => {
+    try {
+      setLoading(true);
+      const spaceGatewayUrl = await gateway.getSpaceGatewayUrl(url);
+      const didSpacesCoreUrl = util.extraDIDSpacesCoreUrl(spaceGatewayUrl);
+      const spaceDid = util.getSpaceDidFromGatewayUrl(url);
+      if (!did.isValid(spaceDid) || !await gateway.isValidSpaceGatewayUrl(didSpacesCoreUrl)) {
+        throw new Error(t("storage.spaces.gateway.add.invalidUrl"));
+      }
+      onGatewayConnect?.({
+        spaceDid,
+        spaceGatewayUrl: didSpacesCoreUrl
+      });
+      setOpen(false);
+    } catch (err) {
+      console.error(err);
+      setErrorMessage(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const openGatewayInput = () => {
+    setErrorMessage("");
+    setUrl("");
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SplitButton,
+      {
+        menu: [
+          // @ts-expect-error
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SplitButton.Item,
+            {
+              sx: {
+                textTransform: "none"
+              },
+              onClick: openGatewayInput,
+              size: "small",
+              ...rest,
+              children: t("storage.spaces.connect.useSpaceGateway")
+            },
+            "1"
+          )
+        ],
+        onClick: onWalletConnect,
+        color: "primary",
+        style: { textTransform: "none !important", fontSize: "1rem", ...style },
+        size: "small",
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { fontWeight: "bold", textTransform: "none" }, children: t("storage.spaces.connect.useWallet") })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Dialog,
+      {
+        title: t("storage.spaces.gateway.add.title"),
+        fullWidth: true,
+        maxWidth: "md",
+        open,
+        onClose: () => setOpen(false),
+        PaperProps: { style: { minHeight: "auto" } },
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+              },
+              color: "inherit",
+              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")
+              ]
+            }
+          )
+        ] }),
+        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,
+          {
+            label: t("storage.spaces.gateway.add.label"),
+            autoComplete: "off",
+            variant: "outlined",
+            name: "url",
+            fullWidth: true,
+            value: url,
+            onChange: (e) => {
+              setErrorMessage("");
+              setUrl(e.target.value);
+            },
+            disabled: loading,
+            error: Boolean(errorMessage),
+            helperText: errorMessage,
+            onKeyDown: async (e) => {
+              if (e.key === "Enter") {
+                await handleUseSpaceGatewayConnect();
+              }
+            },
+            autoFocus: true
+          }
+        ) }) }) })
+      }
+    )
+  ] });
+}
+
+module.exports = ConnectTo;

package/lib/components/PreviewNFT/index.d.ts

@@ -0,0 +1,6 @@
+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/index.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const material = require('@mui/material');
+const CloseOutlinedIcon = require('@mui/icons-material/CloseOutlined');
+const emptySpaceNft = require('../../icons/empty-space-nft.svg.js');
+
+function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, onClick: handleOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("object", { data: src, width, height, children: /* @__PURE__ */ jsxRuntime.jsx(emptySpaceNft, { viewBox: "0 0 228 258", style: { cursor: "pointer", width: "64px", height: "64px" } }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: "1",
+            cursor: "pointer"
+          },
+          onClick: handleOpen
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Dialog,
+      {
+        open,
+        onClose: handleClose,
+        "aria-labelledby": "preview-space-nft-display",
+        "aria-describedby": "preview space nft display",
+        fullWidth: true,
+        maxWidth: "md",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(material.DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              color: "inherit",
+              onClick: handleClose,
+              "aria-label": "close",
+              style: { position: "absolute", top: 8, right: 8, color: "white" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseOutlinedIcon, {})
+            }
+          ),
+          "(",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "object",
+            {
+              data: src,
+              style: {
+                width: "100%",
+                height: "75vh",
+                objectFit: "contain"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                emptySpaceNft,
+                {
+                  viewBox: "0 0 228 258",
+                  style: {
+                    width: "100%",
+                    height: "75vh"
+                  }
+                }
+              )
+            }
+          ),
+          ")"
+        ] })
+      }
+    )
+  ] });
+}
+
+module.exports = PreviewSpaceNft;

package/lib/components/SpaceCard/index.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps } from '@mui/material';
+import { SpaceGateway, SpaceStatus } from '../../types';
+export type Action = React.ReactNode | ((props: {
+    spaceGateway: SpaceGateway;
+    spaceStatus: SpaceStatus;
+    selected: boolean;
+    compat: boolean;
+    refresh: () => void;
+}) => React.ReactNode);
+export interface SpaceCardProps extends BoxProps {
+    endpoint: string;
+    selected?: boolean;
+    compat?: boolean;
+    action?: Action;
+    deps?: any[];
+}
+declare function SpaceCard({ endpoint, selected, compat, action, className, deps, ...rest }: SpaceCardProps): import("react/jsx-runtime").JSX.Element;
+export default SpaceCard;

package/lib/components/SpaceCard/index.js

@@ -0,0 +1,200 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const isUndefined = require('lodash/isUndefined');
+const ufo = require('ufo');
+const material = require('@mui/material');
+const DidAddress = require('@arcblock/ux/lib/DID');
+const Theme = require('@arcblock/ux/lib/Theme');
+const React = require('react');
+const useMobile = require('../../hooks/use-mobile.js');
+const useSpaceInfo = require('../../hooks/use-space-info.js');
+const useLocale = require('../../hooks/use-locale.js');
+const util = require('../../libs/util.js');
+const index = require('../../types/index.js');
+const spaceConnected = require('../../icons/space-connected.svg.js');
+const spaceDisconnect = require('../../icons/space-disconnect.svg.js');
+const spaceConnectError = require('../../icons/space-connect-error.svg.js');
+const index$1 = require('../PreviewNFT/index.js');
+
+function Status({
+  spaceUrl,
+  status,
+  refresh,
+  sx,
+  ...rest
+}) {
+  const { t } = useLocale();
+  const iconStyle = { marginLeft: "8px", marginRight: "4px" };
+  let icon = null;
+  let text = null;
+  if (status === index.SpaceStatus.CONNECTED) {
+    icon = /* @__PURE__ */ jsxRuntime.jsx(spaceConnected, { style: iconStyle });
+    text = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#047857" }, children: t("storage.spaces.connected.tag") });
+  }
+  if (status === index.SpaceStatus.DISCONNECTED) {
+    icon = /* @__PURE__ */ jsxRuntime.jsx(spaceDisconnect, { style: iconStyle });
+    text = /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#626a77" }, children: t("storage.spaces.disconnected.tag") });
+  }
+  if (status === index.SpaceStatus.EXPIRED) {
+    icon = /* @__PURE__ */ jsxRuntime.jsx(spaceConnectError, { style: iconStyle });
+    text = /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "span", sx: { display: "flex", alignItems: "center", color: "error.main" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("storage.spaces.expired.guide") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Link,
+        {
+          href: ufo.withQuery(ufo.joinURL(spaceUrl, "overview"), { guide: 1 }),
+          target: "_blank",
+          underline: "always",
+          color: "error",
+          sx: { ml: 0.5 },
+          children: [
+            "[",
+            t("common.open"),
+            "]"
+          ]
+        }
+      )
+    ] });
+  }
+  React.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refresh();
+      }
+    };
+    if (status === index.SpaceStatus.EXPIRED) {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+    } else {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [status, refresh]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      component: "span",
+      sx: { display: "flex", alignItems: "center", color: "primary.main", fontSize: 14, ...sx },
+      ...rest,
+      children: [
+        icon,
+        " ",
+        text
+      ]
+    }
+  );
+}
+function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }) {
+  const isMobile = useMobile();
+  let isCompact = compat;
+  if (isUndefined(isCompact)) {
+    isCompact = isMobile;
+  }
+  const spaceDid = util.getDIDSpaceDidFromEndpoint(endpoint);
+  const spaceUrl = util.getDIDSpaceUrlFromEndpoint(endpoint);
+  const gatewayUrl = util.getSpaceGatewayUrlFromEndpoint(endpoint);
+  const [refreshSpaceInfo, setRefreshSpaceInfo] = React.useState(false);
+  const refresh = () => setRefreshSpaceInfo((p) => !p);
+  const { data: spaceInfo, loading } = useSpaceInfo({
+    endpoint,
+    deps: [refreshSpaceInfo].concat(deps ?? [])
+  });
+  const spaceName = spaceInfo?.spaceName ?? "";
+  const hasPermission = spaceInfo?.hasPermission ?? false;
+  const isAvailable = spaceInfo?.isAvailable ?? false;
+  const spaceStatus = React.useRef(index.SpaceStatus.UNKNOWN);
+  if (spaceInfo && !loading) {
+    if (!isAvailable) {
+      spaceStatus.current = index.SpaceStatus.EXPIRED;
+    } else if (hasPermission) {
+      spaceStatus.current = index.SpaceStatus.CONNECTED;
+    } else {
+      spaceStatus.current = index.SpaceStatus.DISCONNECTED;
+    }
+  }
+  const renderAction = () => {
+    if (loading)
+      return null;
+    if (typeof action === "function") {
+      return action({
+        spaceGateway: {
+          did: spaceDid,
+          name: spaceName,
+          url: gatewayUrl,
+          endpoint
+        },
+        spaceStatus: spaceStatus.current,
+        selected,
+        compat: isCompact,
+        refresh
+      });
+    }
+    return action;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BoxContainer,
+    {
+      className: util.classNames(className, {
+        selected,
+        error: spaceStatus.current === index.SpaceStatus.EXPIRED || spaceStatus.current === index.SpaceStatus.DISCONNECTED
+      }),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index$1, { src: util.getSpaceNftDisplayUrlFromEndpoint(endpoint), width: "72px", height: "72px" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { ml: 2, flex: 1, spacing: 1, minWidth: 0, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", sx: { whiteSpace: "nowrap" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "space-name", children: spaceName }),
+              !isCompact && selected && /* @__PURE__ */ jsxRuntime.jsx(Status, { spaceUrl, status: spaceStatus.current, refresh, sx: { mr: 1 } })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DidAddress,
+              {
+                copyable: false,
+                size: 14,
+                compact: true,
+                responsive: false,
+                did: spaceDid,
+                sx: {
+                  ".did-address-text": {
+                    color: "text.secondary"
+                  }
+                }
+              }
+            )
+          ] }),
+          !isCompact && renderAction()
+        ] }),
+        isCompact && /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", marginTop: 0.5, children: [
+          selected && /* @__PURE__ */ jsxRuntime.jsx(Status, { spaceUrl, status: spaceStatus.current, refresh, flex: 1 }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { flex: 1 }),
+          renderAction()
+        ] })
+      ]
+    }
+  );
+}
+const BoxContainer = Theme.styled(material.Box)`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  box-sizing: border-box;
+  position: relative;
+  border: 1px solid ${({ theme }) => theme.palette.grey["200"] || "#f8f8f8"};
+  border-radius: 8px;
+
+  &.selected {
+    border-color: ${({ theme }) => theme.palette.primary.main || "#3b82f6"};
+    &.error {
+      border-color: ${({ theme }) => theme.palette.error.main || "#d32f2f"};
+    }
+  }
+
+  .space-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+module.exports = SpaceCard;

package/lib/components/SpaceCard/space-card.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryFn } from '@storybook/react';
+import Basic from './stories/basic';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    decorators: ((Story: StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export { Basic };

package/lib/hooks/use-locale.d.ts

@@ -0,0 +1,5 @@
+declare function useLocale(): {
+    t: (this: any, key: any, data?: any) => any;
+    locale: any;
+};
+export default useLocale;

package/lib/hooks/use-locale.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const context = require('@arcblock/ux/lib/Locale/context');
+const util = require('@arcblock/ux/lib/Locale/util');
+const ahooks = require('ahooks');
+const index = require('../locales/index.js');
+
+function useLocale() {
+  const { locale } = context.useLocaleContext();
+  const t = ahooks.useMemoizedFn((key, data = {}) => {
+    return util.translate(index.translations, key, locale, "en", data);
+  });
+  return { t, locale };
+}
+
+module.exports = useLocale;

package/lib/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from '@mui/material/styles';
+export default function useMobile({ key }?: {
+    key: Breakpoint | number;
+}): boolean;

package/lib/hooks/use-mobile.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const styles = require('@mui/material/styles');
+const useMediaQuery = require('@mui/material/useMediaQuery');
+
+function useMobile({ key } = { key: "md" }) {
+  const theme = styles.useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}
+
+module.exports = useMobile;

package/lib/hooks/use-space-info.d.ts

@@ -0,0 +1,8 @@
+export default function useSpaceInfo({ endpoint, deps }: {
+    endpoint: string;
+    deps?: any[];
+}): import("ahooks/lib/useRequest/src/types").Result<{
+    spaceName: string;
+    hasPermission: boolean;
+    isAvailable: boolean;
+} | undefined, []>;

package/lib/hooks/use-space-info.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const isUrl = require('is-url');
+const ahooks = require('ahooks');
+const api = require('../libs/api.js');
+
+function useSpaceInfo({ endpoint, deps = [] }) {
+  return ahooks.useRequest(
+    async () => {
+      if (!isUrl(endpoint)) {
+        return void 0;
+      }
+      const { headers } = await api.head(endpoint, {
+        timeout: 5e3
+      });
+      const spaceName = headers["x-space-name"];
+      return {
+        spaceName: spaceName ? decodeURIComponent(spaceName) : "",
+        hasPermission: headers["x-listable"] === "true" && headers["x-readable"] === "true" && headers["x-writeable"] === "true",
+        isAvailable: headers["x-space-is-available"] === "true"
+      };
+    },
+    {
+      refreshDeps: [endpoint].concat(deps),
+      onError(error) {
+        console.error(error);
+      }
+    }
+  );
+}
+
+module.exports = useSpaceInfo;