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

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

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

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

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.

Avatar
Button