DIDSpaceConnection
The DIDSpaceConnection component is a UI card designed to display key information about a connected DID Space. It provides a clear visual representation of the space's details, connection status, and can be customized with actions and additional footer content.
Key Features#
- Information Display: Shows the DID Space name, DID, and NFT avatar.
- Connection Status: Automatically fetches and displays the current connection status (e.g., Connected, Disconnected, or Unavailable with specific errors).
- Responsive Design: Adapts to different screen sizes, with an optional compact mode.
- Customization: Allows for custom action buttons and footer content to be added.
Props#
The component accepts the following props:
Prop | Type | Required | Default | Description |
|---|---|---|---|---|
|
| Yes | - | The API endpoint for the DID Space. Format: |
|
| No |
| If |
|
| No |
| If |
|
| No |
| A custom React node or a function returning a node to be displayed as an action button or menu. The function receives context about the space connection. |
|
| No |
| Customizes the footer. |
|
| No |
| An array of dependencies. A change in these dependencies will trigger a refresh of the space information. |
Type Definitions#
export type DIDSpaceConnectionAction = React.ReactNode | ((props: DIDSpaceConnectionContext) => React.ReactNode);
export type DIDSpaceConnectionFooter =
| false
| true
| React.ReactNode
| ((props: DIDSpaceConnectionContext & { originalFooter: React.ReactNode }) => React.ReactNode);
export interface DIDSpaceConnectionContext {
spaceGateway: DIDSpaceGateway;
spaceStatus: DIDSpaceStatus;
errorCode: number;
selected: boolean;
compat: boolean;
refresh: () => void;
}Usage#
Basic Usage#
To display a DID Space card, you only need to provide the endpoint. The selected prop is useful for visually indicating the currently active space.
import { DIDSpaceConnection } from '@blocklet/did-space-react';
export default function Demo() {
// The endpoint is typically obtained from the spaceGateway object after connection.
const endpoint = 'https://arcblock.did.space/app/api/space/z8mWaJ13n9aB7wE1F6gH2J3K4L5M6N7P8Q/app/z9pQrStUvXyZaBcDeFgHiJkLmNoPqRsTuVw/object/';
return (
<DIDSpaceConnection endpoint={endpoint} selected />
);
}Compact Layout#
For a more condensed view, especially in lists or on smaller screens, use the compat prop.
import { DIDSpaceConnection } from '@blocklet/did-space-react';
export default function Demo() {
const endpoint = 'https://arcblock.did.space/app/api/space/z8mWaJ13n9aB7wE1F6gH2J3K4L5M6N7P8Q/app/z9pQrStUvXyZaBcDeFgHiJkLmNoPqRsTuVw/object/';
return (
<DIDSpaceConnection endpoint={endpoint} selected compat />
);
}Customization#
Custom Actions#
The action prop allows you to add custom interactive elements. A common use case is to provide a reconnect button when the connection is lost, or a link to the space when it's connected. The prop can be a React node or a function that receives the connection context.
import { DIDSpaceConnection, DIDSpaceStatus } from '@blocklet/did-space-react';
import { Link, IconButton, Button } from '@mui/material';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
export default function Demo() {
const endpoint = 'https://arcblock.did.space/app/api/space/z8mWaJ13n9aB7wE1F6gH2J3K4L5M6N7P8Q/app/z9pQrStUvXyZaBcDeFgHiJkLmNoPqRsTuVw/object/';
return (
<DIDSpaceConnection
endpoint={endpoint}
selected
action={({ spaceGateway, spaceStatus, refresh }) => {
if (spaceStatus === DIDSpaceStatus.DISCONNECTED || spaceStatus === DIDSpaceStatus.UNAVAILABLE) {
return (
<Button size="small" onClick={() => refresh()} variant="outlined">
Reconnect
</Button>
);
}
return (
<IconButton
size="small"
LinkComponent={Link}
href={`${spaceGateway.url}/space/${spaceGateway.did}`}
target="_blank"
aria-label="Open DID Space"
>
<OpenInNewIcon />
</IconButton>
);
}}
/>
);
}Custom Footer#
The footer prop can be used to display additional information.
1. Displaying Default Audit Log#
Set footer to true to show the most recent audit log entry for the application within that space.
import { DIDSpaceConnection } from '@blocklet/did-space-react';
export default function Demo() {
const endpoint = 'https://arcblock.did.space/app/api/space/z8mWaJ13n9aB7wE1F6gH2J3K4L5M6N7P8Q/app/z9pQrStUvXyZaBcDeFgHiJkLmNoPqRsTuVw/object/';
return <DIDSpaceConnection endpoint={endpoint} selected footer />;
}2. Providing Custom Footer Content#
Pass a function to footer for more complex layouts. You can render the default audit log alongside your custom components by using the originalFooter property from the function's arguments.
import { DIDSpaceConnection } from '@blocklet/did-space-react';
import { Box, Typography } from '@mui/material';
export default function Demo() {
const endpoint = 'https://arcblock.did.space/app/api/space/z8mWaJ13n9aB7wE1F6gH2J3K4L5M6N7P8Q/app/z9pQrStUvXyZaBcDeFgHiJkLmNoPqRsTuVw/object/';
return (
<DIDSpaceConnection
endpoint={endpoint}
selected
footer={({ originalFooter, spaceGateway }) => (
<>
{/* Display the default audit log */}
{originalFooter}
{/* Display a custom message */}
<Box mt={1}>
<Typography variant="caption" color="text.secondary">
Owner: {spaceGateway.ownerDid}
</Typography>
</Box>
</>
)}
/>
);
}Connection Status#
The component automatically determines and displays the connection status of the DID Space. This is handled internally by making a HEAD request to the provided endpoint. The component will display an appropriate message for each status:
- Connected: The connection is active and available.
- Disconnected: The application is not authorized to access the space.
- Unavailable: The connection cannot be established due to issues like network errors, CORS blockage, subscription problems, or version incompatibility.
For error states, the component provides a tooltip with more details and a link to resolve the issue where applicable.
The following diagram illustrates the flow for determining the status.
This flow ensures that users are always presented with an accurate and actionable connection status.