Skip to main content

Address

The Address component is a specialized UI element designed to display Decentralized Identifier (DID) addresses in a clean, readable, and user-friendly format. It intelligently handles the long strings typical of DIDs by providing options for shortening and easy copying, enhancing the overall user experience.

This component is a simple re-export from @arcblock/ux/lib/Address, providing a consistent way to display addresses within the DID Connect ecosystem.

How to Import

To use the Address component, import it from its specific module path within the library.

Import

javascript
import Address from '@arcblock/did-connect-react/lib/Address';

Basic Usage

Simply pass the DID string as a child to the component to render the full address.

Basic Address Display

jsx
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserProfile() {
  const userDid = 'z1Zg2a5Vw2fA2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t';

  return (
    <div>
      <h4>User DID:</h4>
      <Address>{userDid}</Address>
    </div>
  );
}

Features

The Address component includes several helpful features to improve usability.

Shortening

Long DIDs can clutter the UI. Use the shorten prop to display a truncated version of the address, showing only the beginning and end characters. This is essential for lists or compact profile views.

Copy to Clipboard

By adding the copyable prop, the component will render a copy icon next to the address. Clicking this icon copies the full DID to the user's clipboard, providing a convenient one-click action.

Props

The Address component accepts the following props:

  • children string (required) — The DID address string that you want to display.
  • shorten boolean (default: false) — If true, the address will be shortened to a more compact format (e.g., z1Zg2a...s0t).
  • copyable boolean (default: false) — If true, a copy icon is displayed, allowing users to copy the full address to their clipboard with a single click.
  • responsive boolean (default: true) — When true, the component will automatically shorten the address based on the available width, ensuring it fits within its container without breaking the layout.

Examples

Here are some common use cases for the Address component.

Shortened and Copyable Address

This is the most common configuration, providing a compact and functional display suitable for most UIs.

Shortened and Copyable

jsx
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';

function UserCard({ did }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <span>DID:</span>
      <Address shorten copyable>
        {did}
      </Address>
    </div>
  );
}

Usage with Avatar

The Address component works great alongside the Avatar component to build user profile elements.

Profile Header

jsx
import React from 'react';
import Address from '@arcblock/did-connect-react/lib/Address';
import Avatar from '@arcblock/did-connect-react/lib/Avatar';
import { useSession } from '@arcblock/did-connect-react';

function ProfileHeader() {
  const { session } = useSession();

  if (!session.user) {
    return <p>Please log in.</p>;
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <Avatar did={session.user.did} />
      <div>
        <strong>{session.user.name}</strong>
        <Address shorten copyable>
          {session.user.did}
        </Address>
      </div>
    </div>
  );
}

Now that you know how to display user addresses, you might want to learn how to display their profile pictures. Check out the Avatar component documentation for more details.