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

Reusable DID Space Components

XianLing
2025年1月3日 · edited
B
Blogs
cover

Connecting to a DID Space is the initial step for Blocklet applications to utilize the DID Spaces service. To streamline this process, we offer a specialized component library: @blocklet/did-space-react; the library is designed to assist developers in establishing and displaying DID Space connections.

Overview#

This component library mainly provides:

  1. <DIDSpaceConnect> component: This component allows you to easily create a button on the page to connect to DID Space. After successfully connecting to DID Space by clicking the button, the system will return a spaceGateway object, which contains information such as the name of the DID Space, DID, site URL, etc. Developers can choose how to store this object according to their needs. For code examples, please refer to the Demo.
  2. <DIDSpaceConnection> component: This component displays the basic information and connection status of the connected DID Space. For code examples, refer to the Demo.

Demo Case#

Connect to DID Space through the wallet#

Using the Blocklet Server control panel as an example, click on the Connect with DID Wallet feature provided by the <DIDSpaceConnect> component:

image.png

Then select the target DID Space from the NFTs displayed in the wallet:

image.png

Finally, use the <DIDSpaceConnection> component to display the connected DID Space:

image.png

Connect to DID Space through the gateway address#

The <DIDSpaceConnect> component also supports initiating targeted connections through the DID Space gateway address, avoiding the hassle of selecting from numerous NFTs when connecting through the DID Wallet.

First, click on the Connect using the DID Spaces gateway feature:

image.png

Then enter the DID Space gateway address (if you don't know how to obtain the DID Space gateway address, you can refer to the Tutorial):

image.png

During the connection process, only the NFT of the target DID Space will be displayed:

image.png

Finally, complete the connection and use the <DIDSpaceConnection> component to display:

image.png

DID Space Connection Status Description#

  • Connected: A green connected status signifies that the DID Space is operating smoothly, allowing for actions like backup and data entry:

image.png

  • Disconnected: The gray disconnected status indicates that the connection to the DID Space has been interrupted and requires reconnection:

image.png

  • Connection error: A red error status indicates that this DID Space is unavailable. Users should address the issue by following the provided prompts:

image.png

DID Space Common Exception Status#

  • Insufficient Usage: In DID Space that have usage limits, such as those that are automatically created for wallet accounts, a notice will be displayed when the storage unit has been fully utilized:

image.png

  • Subscription Expired: If the subscription for a paid enterprise DID Space has expired, a notification will appear stating that the subscription has lapsed:

image.png

  • Overdue Invoice: For the enterprise version of DID Space, if there are overdue invoices, a notification will alert you about the overdue status:

image.png

  • Version Incompatibility: Users with older versions of DID Space will receive a prompt to upgrade; without upgrading, they will be unable to perform backups and other operations:

image.png

  • CORS Interception: If you encounter a CORS interception error, it typically relates to the security settings of DID Spaces. For detailed solutions, please consult the relevant documentation.

image.png

  • Network Error: If there are issues with the network connection, server failures, or the target DID Space service is unavailable, the system will display a network error message:

image.png

Additional Enhancements#

Application Launch Process#

For applications requiring a connection to DID Spaces, the installation process has been streamlined with the latest DID Space connection components:

image.png

Dashboard#

DID Spaces has been elevated to a top-level menu, making it easier for administrators to manage DID Space connections.

The Backup tab is used to set up the backup and restoration of DID Spaces:

image.png

The Storage tab is designated for setting up DID Spaces to store application business data:

image.png

Profile#

The Profile page now incorporates the latest DID Space component to support session-level DID Spaces configuration, enabling users to manage their connections more effectively:

image.png

Session Management#

The user menu now presents connected session-level DID Spaces, allowing users to view and switch between them at any time conveniently:

image.png

Join our Bug Bounty program to help us enhance our services.#

If you have any needs, suggestions, or questions while using the service, please visit the ArcBlock Community to share your feedback, and we will do our best to assist you. You can also join our Bug Bounty program to help us enhance the product experience of DID Spaces.

Listen to the audio summary#


你获得 0 积分