Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

Getting Started

This guide will walk you through the installation and a basic implementation of @blocklet/did-space-react. You'll learn how to add a connection button and display the connected DID Space information.

Installation#

First, add the package to your project using npm or your preferred package manager.

npm install @blocklet/did-space-react

Basic Usage#

Here is a minimal example of how to use DIDSpaceConnect and DIDSpaceConnection together. This setup displays a button to connect to a DID Space. After a successful connection, it will show a card with the space's details, and the button remains available to connect to a different space.

import React, { useState } from 'react';
import { DIDSpaceConnect, DIDSpaceConnection, type DIDSpaceGateway } from '@blocklet/did-space-react';
import Toast from '@arcblock/ux/lib/Toast';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function App() {
const [spaceGateway, setSpaceGateway] = useState<DIDSpaceGateway | null>(null);

const handleSuccess = async ({ spaceGateway: newSpaceGateway }: { spaceGateway: DIDSpaceGateway }) => {
try {
// Store the spaceGateway object to display its information
setSpaceGateway(newSpaceGateway);
Toast.success('Successfully connected to DID Space.');
} catch (error) {
console.error(error);
const message = error instanceof Error ? error.message : 'An error occurred during connection.';
Toast.error(message);
}
};

return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
<Box>
<Typography variant="body1" gutterBottom>
Click the button below to connect to a DID Space. You can use it again to switch to a different space.
</Typography>
<DIDSpaceConnect onSuccess={handleSuccess} />
</Box>

{spaceGateway && (
<Box>
<Typography variant="h6" component="h3" gutterBottom>
Connected Space Information
</Typography>
<DIDSpaceConnection
endpoint={spaceGateway.endpoint}
selected
/>
</Box>
)}
</Box>
);
}

How It Works#

  1. State Management: We use the useState hook to store the spaceGateway object, which holds the details of the connected DID Space. It's initialized to null.
  2. Connection Button: The DIDSpaceConnect component is rendered to handle the connection flow. When a user clicks it and successfully connects, its onSuccess callback is triggered.
  3. Updating State: The onSuccess handler receives the spaceGateway object and updates the component's state using setSpaceGateway. This triggers a re-render.
  4. Displaying Information: The DIDSpaceConnection component is conditionally rendered. It only appears if the spaceGateway state is not null. It receives the endpoint from the state and uses it to fetch and display the space's details.
  5. Switching Spaces: Because DIDSpaceConnect remains visible, the user can initiate a new connection at any time. A successful connection will update the state with the new spaceGateway object, and the DIDSpaceConnection card will automatically update to show the new space's information.

Next Steps#

Now that you have a basic setup, you can explore the components in more detail to customize their appearance and behavior.

previous
Overview
next
Components