useDid | ArcBlock

The useDid hook is a convenient utility for easily extracting and working with specific DID-related information from the session.user object. It simplifies parsing the user object to get commonly needed data like the permanent DID, wallet information, and connected accounts without manual processing.

This hook should be used within a component that is a child of the SessionProvider to ensure it has access to the session context.

How to Use

To use the hook, import it along with useSession. Call useSession to get the current session state, and then pass the session object to useDid.

Basic Usage

import { useSession } from '@arcblock/did-connect-react';
import { useDid } from '@arcblock/did-connect-react/lib/User';

function UserProfile() {
  const { session } = useSession();
  const {
    did,
    walletDid,
    connectedDids,
    sourceProvider,
    connectedAccounts,
  } = useDid({ session });

  if (!session.user) {
    return <p>Please log in to view your DID information.</p>;
  }

  return (
    <div>
      <h2>User DID Information</h2>
      <p><strong>Permanent DID:</strong> {did}</p>
      <p><strong>Wallet DID:</strong> {walletDid || 'N/A'}</p>
      <p><strong>Login Method:</strong> {sourceProvider}</p>
      <h3>Connected Accounts ({connectedAccounts.length})</h3>
      <ul>
        {connectedAccounts.map((account) => (
          <li key={account.did}>
            {account.provider}: {account.did}
          </li>
        ))}
      </ul>
    </div>
  );
}

Parameters

The useDid hook accepts a single object as its parameter.

options object (required)
- session object (required) — The session object obtained from the useSession hook. The hook will only compute data when session.user is present.
  - user object — The user object provided by the session context after a successful login.

Return Value

The hook returns a state object containing various pieces of derived DID information. This object will be updated whenever the session.user object changes.

did string — The user's permanent DID. This is an alias for permanentDid.
wallet object — The connected account object where the provider is 'wallet'. Returns undefined if no wallet is connected.
- did string — The DID of the wallet account.
- provider string — The provider name, which will be 'wallet'.
walletDid string — The DID of the user's connected wallet. Returns undefined if no wallet is connected.
permanentDid string — The user's permanent DID, which is the primary identifier from user.did.
connectedDids string[] — An array of all DIDs from the user's connected accounts.
connectedAccounts object[] — The full array of connected account objects.
- did string — The DID of the connected account.
- provider string — The provider of the account (e.g., 'wallet', 'github').
sourceProvider string — The provider the user originally used to log in (e.g., 'wallet', 'github'). Defaults to 'wallet'.
sourceProviders string[] — An array of all provider names from the user's connected accounts.

Standalone Helper Functions

The useDid hook is built on a set of exported helper functions. If you don't need the reactive state management of a hook and just want to extract a specific piece of information from a user object, you can import and use these functions directly.

Function	Description
`getPermanentDid(user)`	Extracts the permanent DID from the user object.
`getWalletDid(user)`	Extracts the DID of the connected wallet.
`getConnectedAccounts(user)`	Retrieves the array of connected accounts.
`getConnectedDids(user)`	Retrieves an array of DIDs from all connected accounts.
`getSourceProvider(user)`	Gets the provider used for the initial login.
`getSourceProviders(user)`	Gets an array of all connected provider names.
`getWallet(user)`	Finds and returns the complete wallet account object.

Example: Using a Helper Function

Direct Function Usage

import { getWalletDid } from '@arcblock/did-connect-react/lib/User/use-did';
import { useSession } from '@arcblock/did-connect-react';

// This approach can be useful inside event handlers or other non-React functions
function handleUserAction() {
  const { session } = useSession();
  if (session.user) {
    const walletDid = getWalletDid(session.user);
    console.log('User Wallet DID:', walletDid);
  }
}