@blocklet/did-space-react 0.5.57

package/lib/locales/zh.d.ts

@@ -0,0 +1,2 @@
+declare const _default: unknown;
+export default _default;

package/lib/locales/zh.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const flat = require('flat');
+
+const zh = flat.flatten({
+  common: {
+    open: "\u6253\u5F00",
+    delete: "\u5220\u9664",
+    confirm: "\u786E\u8BA4",
+    cancel: "\u53D6\u6D88",
+    error: "\u9519\u8BEF"
+  },
+  storage: {
+    spaces: {
+      connect: {
+        useSpaceGateway: "\u4F7F\u7528 DID Spaces \u7F51\u5173\u8FDE\u63A5",
+        useWallet: "\u4F7F\u7528 DID Wallet \u8FDE\u63A5"
+      },
+      connected: {
+        tag: "\u5DF2\u8FDE\u63A5"
+      },
+      disconnected: {
+        tag: "\u8FDE\u63A5\u5DF2\u65AD\u5F00"
+      },
+      expired: {
+        guide: "\u9700\u8981\u6CE8\u610F"
+      },
+      gateway: {
+        add: {
+          title: "\u6DFB\u52A0 DID Spaces",
+          label: "\u8F93\u5165 DID Spaces \u7684\u5730\u5740",
+          invalidUrl: "\u65E0\u6548\u7684 DID Spaces \u7F51\u5173\u5730\u5740"
+        }
+      }
+    }
+  }
+});
+
+module.exports = zh;

package/lib/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/lib/types/index.js

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

package/package.json

@@ -0,0 +1,134 @@
+{
+  "name": "@blocklet/did-space-react",
+  "version": "0.5.57",
+  "description": "Reusable react components for did space",
+  "keywords": [
+    "react",
+    "components",
+    "did-space"
+  ],
+  "author": "wangshijun<wangshijun2010@gmail.com>",
+  "homepage": "https://github.com/ArcBlock/did-spaces#readme",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArcBlock/did-spaces.git"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "build": "unbuild && node tools/auto-exports.js && npm run cpfiles && node tools/build-types.js",
+    "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
+    "precommit": "CI=1 npm run lint",
+    "prepush": "CI=1 npm run lint",
+    "prepublish": "npm run build",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "cpfiles": "copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/"
+  },
+  "bugs": {
+    "url": "https://github.com/ArcBlock/did-spaces/issues"
+  },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/hooks/*": {
+      "import": "./es/hooks/*.js",
+      "require": "./lib/hooks/*.js"
+    },
+    "./lib/components/ConnectTo": {
+      "import": "./es/components/ConnectTo/index.js",
+      "require": "./lib/components/ConnectTo/index.js"
+    },
+    "./lib/components/PreviewNFT": {
+      "import": "./es/components/PreviewNFT/index.js",
+      "require": "./lib/components/PreviewNFT/index.js"
+    },
+    "./lib/components/SpaceCard": {
+      "import": "./es/components/SpaceCard/index.js",
+      "require": "./lib/components/SpaceCard/index.js"
+    },
+    "./lib/icons": {
+      "import": "./es/icons/index.js",
+      "require": "./lib/icons/index.js"
+    },
+    "./lib/locales": {
+      "import": "./es/locales/index.js",
+      "require": "./lib/locales/index.js"
+    },
+    "./lib/types": {
+      "import": "./es/types/index.js",
+      "require": "./lib/types/index.js"
+    }
+  },
+  "dependencies": {
+    "@abtnode/util": "1.16.32",
+    "@arcblock/did": "^1.18.135",
+    "@arcblock/ux": "^2.10.33",
+    "@blocklet/js-sdk": "1.16.32",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.6",
+    "@mui/system": "^5.16.6",
+    "@ocap/util": "^1.18.135",
+    "ahooks": "^3.8.0",
+    "axios": "^1.7.5",
+    "flat": "^5.0.2",
+    "is-url": "^1.2.4",
+    "lodash": "^4.17.21",
+    "p-wait-for": "3",
+    "react-error-boundary": "^4.0.13",
+    "ufo": "^1.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@abtnode/client": "^1.16.32",
+    "@arcblock/eslint-config-ts": "^0.3.2",
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-vite": "^7.6.20",
+    "@storybook/test": "^7.6.20",
+    "@svgr/rollup": "^8.1.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-legacy": "^5.4.1",
+    "@vitest/coverage-v8": "^2.1.2",
+    "babel-plugin-inline-react-svg": "^2.0.2",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.0",
+    "glob": "^10.4.5",
+    "prettier": "^2.8.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "storybook": "^7.6.20",
+    "type-fest": "^4.23.0",
+    "typescript": "~5.5.4",
+    "unbuild": "^2.0.0",
+    "vite": "^5.4.8",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vitest": "^2.1.2"
+  },
+  "gitHead": "4ead6cc11feaff06936aba21cf3919e01cd12e97"
+}

package/src/components/ConnectTo/connect-to.stories.tsx

@@ -0,0 +1,11 @@
+import Basic from './stories/basic';
+
+export default {
+  title: 'Connect/ConnectTo',
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export { Basic };

package/src/components/ConnectTo/index.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+import { isValid as isValidDid } from '@arcblock/did';
+import { CircularProgress, DialogContentText, TextField, Typography } from '@mui/material';
+import Button from '@arcblock/ux/lib/Button';
+import SplitButton, { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
+import Dialog from '@arcblock/ux/lib/Dialog';
+
+import { extraDIDSpacesCoreUrl, getSpaceDidFromGatewayUrl } from '../../libs/util';
+import { getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../libs/gateway';
+import useLocale from '../../hooks/use-locale';
+
+export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+  onWalletConnect?: () => void;
+  onGatewayConnect?: (params: { spaceDid: string; spaceGatewayUrl: string }) => void;
+}
+
+function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps) {
+  const { t } = useLocale();
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleUseSpaceGatewayConnect = async () => {
+    try {
+      setLoading(true);
+
+      const spaceGatewayUrl = await getSpaceGatewayUrl(url);
+      const didSpacesCoreUrl = extraDIDSpacesCoreUrl(spaceGatewayUrl);
+      const spaceDid = getSpaceDidFromGatewayUrl(url);
+
+      if (!isValidDid(spaceDid!) || !(await isValidSpaceGatewayUrl(didSpacesCoreUrl))) {
+        throw new Error(t('storage.spaces.gateway.add.invalidUrl'));
+      }
+
+      onGatewayConnect?.({
+        spaceDid: spaceDid!,
+        spaceGatewayUrl: didSpacesCoreUrl,
+      });
+      setOpen(false);
+    } catch (err) {
+      console.error(err);
+      setErrorMessage((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openGatewayInput = () => {
+    setErrorMessage('');
+    setUrl('');
+    setOpen(true);
+  };
+
+  return (
+    <>
+      <SplitButton
+        menu={[
+          // @ts-expect-error
+          <SplitButton.Item
+            sx={{
+              textTransform: 'none',
+            }}
+            key="1"
+            onClick={openGatewayInput}
+            size="small"
+            {...rest}
+          >
+            {t('storage.spaces.connect.useSpaceGateway')}
+          </SplitButton.Item>,
+        ]}
+        onClick={onWalletConnect}
+        color="primary"
+        // @ts-expect-error
+        style={{ textTransform: 'none !important', fontSize: '1rem', ...style }}
+        size="small"
+        {...rest}
+      >
+        <Typography sx={{ fontWeight: 'bold', textTransform: 'none' }}>
+          {t('storage.spaces.connect.useWallet')}
+        </Typography>
+      </SplitButton>
+      <Dialog
+        title={t('storage.spaces.gateway.add.title')}
+        fullWidth
+        maxWidth="md"
+        open={open}
+        onClose={() => setOpen(false)}
+        PaperProps={{ style: { minHeight: 'auto' } }}
+        actions={
+          <>
+            <Button
+              variant="outlined"
+              onClick={(e) => {
+                e.stopPropagation();
+                setOpen(false);
+              }}
+              color="inherit"
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              onClick={handleUseSpaceGatewayConnect}
+              color="primary"
+              disabled={loading || !url}
+              variant="contained"
+              autoFocus
+            >
+              {loading && <CircularProgress size={16} />}
+              {t('common.confirm')}
+            </Button>
+          </>
+        }
+      >
+        <div style={{ paddingTop: 12, overflowY: 'hidden' }}>
+          <DialogContentText component="div">
+            <Typography component="div">
+              <TextField
+                label={t('storage.spaces.gateway.add.label')}
+                autoComplete="off"
+                variant="outlined"
+                name="url"
+                fullWidth
+                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
+              />
+            </Typography>
+          </DialogContentText>
+        </div>
+      </Dialog>
+    </>
+  );
+}
+
+export default ConnectTo;

package/src/components/PreviewNFT/index.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, IconButton } from '@mui/material';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { EmptySpacesNFT } from '../../icons';
+
+function PreviewSpaceNft({ src, width = '58px', height = '58px' }: { src: string; width?: string; height?: string }) {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <div style={{ position: 'relative' }} onClick={handleOpen}>
+        <object data={src} width={width} height={height}>
+          <EmptySpacesNFT viewBox="0 0 228 258" style={{ cursor: 'pointer', width: '64px', height: '64px' }} />
+        </object>
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: '1',
+            cursor: 'pointer',
+          }}
+          onClick={handleOpen}
+        />
+      </div>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="preview-space-nft-display"
+        aria-describedby="preview space nft display"
+        fullWidth
+        maxWidth="md"
+      >
+        <DialogContent style={{ padding: '8px 8px', backgroundColor: 'rgba(0,0,0,0.8)' }}>
+          <IconButton
+            color="inherit"
+            onClick={handleClose}
+            aria-label="close"
+            style={{ position: 'absolute', top: 8, right: 8, color: 'white' }}
+          >
+            <CloseOutlinedIcon />
+          </IconButton>
+          (
+          <object
+            data={src}
+            style={{
+              width: '100%',
+              height: '75vh',
+              objectFit: 'contain',
+            }}
+          >
+            <EmptySpacesNFT
+              viewBox="0 0 228 258"
+              style={{
+                width: '100%',
+                height: '75vh',
+              }}
+            />
+          </object>
+          )
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export default PreviewSpaceNft;

package/src/components/SpaceCard/index.tsx

@@ -0,0 +1,230 @@
+import isUndefined from 'lodash/isUndefined';
+import { joinURL, withQuery } from 'ufo';
+import { Box, BoxProps, Link, Stack } from '@mui/material';
+import DidAddress from '@arcblock/ux/lib/DID';
+import { styled } from '@arcblock/ux/lib/Theme';
+
+import { useEffect, useRef, useState } from 'react';
+import useMobile from '../../hooks/use-mobile';
+import useSpaceInfo from '../../hooks/use-space-info';
+import useLocale from '../../hooks/use-locale';
+import {
+  classNames,
+  getDIDSpaceDidFromEndpoint,
+  getDIDSpaceUrlFromEndpoint,
+  getSpaceGatewayUrlFromEndpoint,
+  getSpaceNftDisplayUrlFromEndpoint,
+} from '../../libs/util';
+import { SpaceGateway, SpaceStatus } from '../../types';
+import { SpacesConnected, SpaceDisconnected, SpaceConnectError } from '../../icons';
+import PreviewNft from '../PreviewNFT';
+
+function Status({
+  spaceUrl,
+  status,
+  refresh,
+  sx,
+  ...rest
+}: { spaceUrl: string; status: SpaceStatus; refresh: () => void } & BoxProps) {
+  const { t } = useLocale();
+  const iconStyle = { marginLeft: '8px', marginRight: '4px' };
+
+  // error
+  let icon: React.ReactNode = null;
+  let text: React.ReactNode = null;
+
+  if (status === SpaceStatus.CONNECTED) {
+    icon = <SpacesConnected style={iconStyle} />;
+    text = <span style={{ color: '#047857' }}>{t('storage.spaces.connected.tag')}</span>;
+  }
+
+  if (status === SpaceStatus.DISCONNECTED) {
+    icon = <SpaceDisconnected style={iconStyle} />;
+    text = <span style={{ color: '#626a77' }}>{t('storage.spaces.disconnected.tag')}</span>;
+  }
+
+  if (status === SpaceStatus.EXPIRED) {
+    icon = <SpaceConnectError style={iconStyle} />;
+    text = (
+      <Box component="span" sx={{ display: 'flex', alignItems: 'center', color: 'error.main' }}>
+        <span>{t('storage.spaces.expired.guide')}</span>
+        <Link
+          href={withQuery(joinURL(spaceUrl, 'overview'), { guide: 1 })}
+          target="_blank"
+          underline="always"
+          color="error"
+          sx={{ ml: 0.5 }}
+        >
+          [{t('common.open')}]
+        </Link>
+      </Box>
+    );
+  }
+
+  // 如果 Space 为 Error 状态，则在页面重新可见时刷新 Space 状态（此时 error 可能已经在外部处理了）
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refresh();
+      }
+    };
+    if (status === SpaceStatus.EXPIRED) {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    } else {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }
+
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+  }, [status, refresh]);
+
+  return (
+    <Box
+      component="span"
+      sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', fontSize: 14, ...sx }}
+      {...rest}
+    >
+      {icon} {text}
+    </Box>
+  );
+}
+
+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; // 形如 ${domain}/app/api/space/${spaceDid}/app/${appDid}/object/
+  selected?: boolean;
+  compat?: boolean;
+  action?: Action;
+  deps?: any[];
+}
+
+function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }: SpaceCardProps) {
+  const isMobile = useMobile();
+  let isCompact = compat;
+
+  if (isUndefined(isCompact)) {
+    isCompact = isMobile;
+  }
+
+  const spaceDid = getDIDSpaceDidFromEndpoint(endpoint);
+  const spaceUrl = getDIDSpaceUrlFromEndpoint(endpoint);
+  const gatewayUrl = getSpaceGatewayUrlFromEndpoint(endpoint);
+  const [refreshSpaceInfo, setRefreshSpaceInfo] = 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 = useRef(SpaceStatus.UNKNOWN);
+  if (spaceInfo && !loading) {
+    if (!isAvailable) {
+      spaceStatus.current = SpaceStatus.EXPIRED;
+    } else if (hasPermission) {
+      spaceStatus.current = SpaceStatus.CONNECTED;
+    } else {
+      spaceStatus.current = 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 (
+    <BoxContainer
+      className={classNames(className, {
+        selected,
+        error: spaceStatus.current === SpaceStatus.EXPIRED || spaceStatus.current === SpaceStatus.DISCONNECTED,
+      })}
+      {...rest}
+    >
+      <Box display="flex" alignItems="center">
+        <PreviewNft src={getSpaceNftDisplayUrlFromEndpoint(endpoint)} width="72px" height="72px" />
+        <Stack ml={2} flex={1} spacing={1} minWidth={0}>
+          <Box display="flex" alignItems="center" sx={{ whiteSpace: 'nowrap' }}>
+            <Box className="space-name">{spaceName}</Box>
+            {!isCompact && selected && (
+              <Status spaceUrl={spaceUrl} status={spaceStatus.current} refresh={refresh} sx={{ mr: 1 }} />
+            )}
+          </Box>
+          <DidAddress
+            copyable={false}
+            size={14}
+            compact
+            responsive={false}
+            did={spaceDid}
+            sx={{
+              '.did-address-text': {
+                color: 'text.secondary',
+              },
+            }}
+          />
+        </Stack>
+        {!isCompact && renderAction()}
+      </Box>
+      {isCompact && (
+        <Box display="flex" alignItems="center" marginTop={0.5}>
+          {selected && <Status spaceUrl={spaceUrl} status={spaceStatus.current} refresh={refresh} flex={1} />}
+          <Box flex={1} />
+          {renderAction()}
+        </Box>
+      )}
+    </BoxContainer>
+  );
+}
+
+const BoxContainer = styled(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;
+  }
+`;
+
+export default SpaceCard;