UserCenter

The UserCenter component is a comprehensive, pre-built interface that provides a complete user profile and settings management page. It integrates various functionalities, including user information display, passport management, privacy controls, notification settings, and DID storage management, offering a centralized hub for users.

This component is designed to be highly extensible, allowing developers to add custom tabs and content through the blocklet's metadata, ensuring a consistent user experience across different applications.

Basic Usage#

To use the UserCenter, you need to provide the currentTab prop, which determines which section is active. This is typically derived from the application's router.

import React from 'react';
import { UserCenter } from '@blocklet/ui-react';

export default function ProfilePage() {
  // In a real application, you would get this value from your router.
  // For example, if the URL is /profile/settings, currentTab would be '/profile/settings'.
  const currentTab = '/profile/nfts';

  return <UserCenter currentTab={currentTab} />;
}

Props#

The UserCenter component accepts several props to customize its behavior and appearance.

Core Features#

The UserCenter is composed of several key sections and components that provide a rich user experience out of the box.

Default Tabs#

By default, the UserCenter includes the following tabs for every user:

Tab	Description	Visibility
NFTs	Displays the user's NFT collections.	Public
Social Activity	Shows the user's followers and following lists if social features are enabled.	Public
Settings	Access to profile, privacy, notification, and session management.	Owner Only
Storage	Interface for managing connections to DID Spaces for decentralized storage.	Owner Only

User Profile (UserBasicInfo)#

The UserBasicInfo component is a dedicated section (typically a sidebar on desktop) that displays essential user details:

• Avatar and Name: Shows the user's profile picture and full name. The owner can click the avatar to open the profile switcher.
• DID: Displays the user's Decentralized Identifier, with options to copy it or view its QR code.
• Social Actions: For public profiles, it shows "Follow" or "Unfollow" buttons.
• Metadata: Displays user-provided information such as bio, location, and social links.
• Private Information: For the owner, it shows private details like email and phone number.

Passport Management#

On the main profile tab (NFTs), the currently logged-in user will see a section dedicated to their DID Passports. This area lists all associated passports, indicating their status (e.g., active, revoked) and highlighting the one currently in use.

Settings#

The "Settings" tab is a comprehensive panel available only to the user who owns the profile. It is organized into several sub-sections:

• Common Settings: Allows users to update their public profile information like name, bio, and social links.
• Notification Management: Configure how to receive notifications (Wallet, Email, Push) and manage webhooks.
• Third-Party Login: Manage connections to other identity providers like Google, GitHub, or Passkeys.
• Privacy Management: Control the visibility of different tabs on the user profile, making them public or private.
• Session Management: View and revoke active login sessions across different devices.
• Danger Zone: For non-owner roles, provides an option to delete their own account.

Customization#

You can extend the UserCenter by adding new tabs through your blocklet's configuration.

1. Define Custom Tabs in blocklet.yml
   Add entries to the navigation.userCenter array in your blocklet.yml file. Each entry represents a new tab.
   

   blocklet.yml

   navigation:
     - title: User Center
       role: guest
       userCenter:
         - title: My Activity
           link: /profile/activity
           icon: 'material-symbols:history'
           # Set to true if this tab should only be visible to the profile owner
           private: false

2. Render Content for the Custom Tab
   In your component, pass a child element that will be rendered when the currentTab prop matches the link you defined.
   

   MyActivity.js

   import React from 'react';
   import { UserCenter } from '@blocklet/ui-react';
   
   function MyActivityComponent() {
     return <div>This is the custom activity content.</div>;
   }
   
   export default function ProfilePageWithActivity() {
     // This value would come from your router, e.g., '/profile/activity'
     const currentTab = '/profile/activity';
   
     return (
       <UserCenter currentTab={currentTab}>
         {currentTab === '/profile/activity' && <MyActivityComponent />}
       </UserCenter>
     );
   }

This approach allows you to seamlessly integrate application-specific pages into the standard UserCenter layout.