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.

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

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.

useOAuth & usePasskey
Avatar