Skip to main content

UI Components

The @arcblock/did-connect-react library includes a set of pre-styled, supplementary UI components designed to help you display DID-related information consistently and beautifully. These components work seamlessly with the core connection flow and are built upon the robust @arcblock/ux and @mui/material libraries, ensuring a cohesive look and feel in your application.

This section provides an overview of these components. Click on any card to view detailed documentation, including properties and usage examples.

Avatar

A component designed to display a user's avatar, which is automatically derived from their DID.

Address

Used for displaying a user's DID address in a formatted and optionally shortened manner for better readability.

Button

A pre-styled button, specifically the `ConnectButton`, for initiating the DID Connect flow with a consistent design.

Logo

A simple component to display the official DID Connect logo, useful for branding and UI consistency.

Combined Usage Example

These components are designed to be composed together to build user interfaces. Here is an example of how you might use Avatar, Address, and ConnectButton to create a simple user profile display.

Combined UI Example

javascript
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import Address from '@arcblock/did-connect-react/lib/Address';
import ConnectButton from '@arcblock/did-connect-react/lib/Button';
import { Box, Typography, Paper } from '@mui/material';

function UserDisplay({ userDid, userName }) {
  if (!userDid) {
    return <ConnectButton />;
  }

  return (
    <Paper elevation={2} sx={{ padding: '16px', display: 'flex', alignItems: 'center', gap: '16px' }}>
      <Avatar size={60} did={userDid} />
      <Box>
        <Typography variant="h6" component="div">{userName || 'Anonymous'}</Typography>
        <Address variant="body2" color="text.secondary">{userDid}</Address>
      </Box>
    </Paper>
  );
}

// Example usage:
// <UserDisplay userDid="z123..." userName="Alice" />
// <UserDisplay userDid={null} />

This example demonstrates how easily you can construct a common UI pattern for logged-in and logged-out states using the provided components.

Next Steps

After familiarizing yourself with the UI components, you may want to explore the library's Hooks for more programmatic control over the authentication flow and session data.