Hashgraph DID SDK: Running in the Browser Environment

This guide provides instructions on how to run the Hashgraph DID SDK in a browser environment. The SDK is designed to be used in a Node.js environment, but it can also be used in a browser environment.

Installation

The Hashgraph DID SDK can be installed using npm or yarn.

npm install @hashgraph/sdk @hashgraph-did-js-sdk/registrar @hashgraph-did-js-sdk/resolver

Additionally, a buffer package is required to be installed as a dependency.

npm install buffer

The buffer package provides a polyfill for the Buffer class in the browser environment.

Make sure that you module bundler is configured to resolve browser field in package.json files. This is required to load the correct version of the DID SDK in the browser environment.

Usage

Usage of the Hashgraph DID SDK in a browser environment is similar to the Node.js environment. The following example demonstrates how to create a DID in React Component:

import { createDID } from '@hashgraph-did-js-sdk/registrar';
import { useState, useEffect } from 'react';

export function App() {
    const [createDIDResponse, setCreateDIDResponse] = useState(null);

    useEffect(() => {
        createDID({
            publisher: CustomWalletConnectPublisher,
        }).then(setCreateDIDResponse);
    }, []);

    return <p>{createDIDResponse.did}</p>;
}

The CustomWalletConnectPublisher is a custom implementation of the Publisher interface that uses WalletConnect to connect to the Hedera network. You need to implement it yourself.

Limitations

The main dependency of the Hashgraph DID SDK is @hashgraph/sdk. It allows to interact with the Hedera network like submitting transactions, creating accounts, etc. This library exposes WebClient which is a browser-friendly version of the Hedera SDK Client. But because of the nature of the WebClient, it is instantiated with empty mirror node addresses and network. This prevents you from using it out of the box in the browser environment. You can read more about it in the issue.

To use the @hashgraph/sdk in a browser environment, you need to manually set the mirror node address and network. Another option is to use the @hashgraph/sdk with the WalletConnect provider. This will require you to implement a custom Publisher class.

When you have a custom Publisher implementation, you will need to pass it to all the DID SDK functions that require it, like createDID and resolveDID.

Using Resolver and Registrar

DID Resolver is a core component of the Hashgraph DID SDK. It is used to resolve DIDs and DID Documents. Registrar uses a resolver for various operations.

By default, Registrar and Resolver uses a TopicReader to read messages from the Hedera network topic. Default version of the TopicReader uses gRPC to connect to the Hedera network. This won’t work in the browser environment.

To fix that you can use Hedera Rest API TopicReader. It uses Mirror Node REST API to fetch messages from the Hedera network. This can be imported from @hashgraph-did-js-sdk/resolver package.

import {
  resolveDID,
  TopicReaderHederaRestApi,
} from '@swiss-digital-assets-institute/resolver';

const topicReader = new TopicReaderHederaRestApi();
const didDocument = await resolveDID(did, 'application/did+ld+json', {
  topicReader,
});

See a full running example in the source code.

Next Steps

  • Getting Started: Follow the steps in the Getting Started Guide to set up your development environment.

  • Explore resolveDID: Dive deeper into the resolveDID function to understand its parameters, error handling, and advanced usage.

  • Manage DIDs: Learn how to use createDID, updateDID, and deactivateDID to effectively manage DIDs on Hedera.

  • Utilize the Publisher: Integrate the Publisher class into your application for seamless transaction submission.