@huddle01/divergent-client

Getting started with Divergent SDK’s

The Divergent Network provides developers with three different Software Development Kits (SDKs) to interact with the network. These SDKs are:

1. divergent-client: This SDK is intended for developers who want to integrate both calling and messaging functionality in their decentralized application (dApp). It provides access to the full suite of features offered by the Divergent Network.
2. divergent-av: This SDK is specifically designed for developers who want to incorporate decentralized calling capabilities into their dApp. It allows developers to add peer-to-peer audio and video calls to their dApp.
3. divergent-messenger: This SDK is intended for developers who want to integrate decentralized messaging or chat functionality in their dApp. It provides access to the messaging features of the Divergent Network.

These SDKs allow developers to build applications that take advantage of the secure, open and decentralized nature of the Divergent Network, without having to build the underlying infrastructure from scratch. The SDKs include various functionalities and features such as key management, encryption, and identity management. They also provide the ability to interact with the network, allowing developers to make and receive calls, send and receive messages, and more.

Quick Start

Install the divergent-client pkg from npm or yarn inside your React or Next App.

// NPM
npm install @0xvaibhav/divergent-client

// YARN
yarn add @0xvaibhav/divergent-client

💡 For developers who just want to utilise the audio and video features can use the package `npm install @0xvaibhav/divergent-av` or `yarn add @0xvaibhav/divergent-av`

For developers who just want to utilise the messaging features can use the package npm install @0xvaibhav/divergent-messenger or yarn add @0xvaibhav/divergent-messenger

Import

Import DivergentClientProvider and getDivergentClient from the install pkg to your application entry point.

import { DivergentClientProvider, getDivergentClient } from "divergent-client";

Configure

Configure your Divergent Client to use locally in the project.

const divergentClient = getDivergentClient(rpcEndpoint);

// Ex:
const divergentClient = getDivergentClient(["http://localhost:40011"](https://www.notion.so/Setting-up-the-Node-Local-development-environment-74e8b2c12812407d98483abb9c4c3d82));
// The above example is when you setup local development environment
// Run a hosted node:
// https://huddle01.notion.site/Setting-up-the-Node-Local-development-environment-74e8b2c12812407d98483abb9c4c3d82

Wrap Providers

Wrap your application with DivergentClientProvider

const App = () => {
  return (
    <DivergentClientProvider value={divergentClient}>
      <YourApp />
    </DivergentClientProvider>
  );
};

Usage

import { useDivergentClientContext } from "divergent-client";

const client = useDivergentClient();

// Ready to access methods
await client.init("wallet");

Using the useDivergentStore hook

To access all the information from the client and listen to any changes in the state, we can use the useDivergentStore hook.

// EXAMPLE

import { useDivergentStore } from "divergent-client";
const user = useDivergentStore((state) => state.user);

<h1> Logged in User: {user.uid} </h1>;

init(”wallet”):

Authenticate a user with their crypto wallet

Usage:

import { useDivergentClient } from "divergent-client";

const client = useDivergentClient();

const login = async () => {
  await client.init("wallet");
};

The above method requests for a sign from user’s crypto wallet and authenticates them using JWT.

Methods for Wallet to Wallet Calls

For Calls

Getting started

import { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

dial(walletAddress):

The above method initiates a call to the given wallet address.

Usage:

await client.dial("0xc111Ea84c2FBF21E45d837FF32DD3399CBfeF480");

On usage of this method, a request to establish a call with the given wallet address is created.

answer():

The above method create a connection with a peer requesting to be connected.

Usage:

await client.answer();

On usage of this method, a call gets connected.

end():

Terminates an ongoing call.

Usage:

client.end();

Accessing call data

All the data of caller like caller id, caller stream can be accessed using the useDivergentStore hook.

Usage:

// The following codeblock demonstrates how to play the audio stream of the caller

import { useDivergentStore } from "divergent-client";

const callerRef = useRef<any>();
const callerStream = useRootStore((state) => state.callerStream);

useEffect(() => {
  if (callerStream) callerRef.current.srcObject = callerStream;
}, [callerStream]);

<video playsInline ref={callerStream} autoPlay style={{ width: "300px" }} />;

All the following variables can be used in the similar way as shown above:

caller: {
	callerUid: undefined, // Can be used to display the name of the caller
  callerSignal: "",
  callerStream: null,
  connection: null,
}

Methods for Wallet to Wallet messaging

Messages sent and received using the divergent-client are end-to-end encrypted. The Divergent Protocol makes use of a set of Ed25519 based public and private keys to send and receive encrypted messages.

startConversation(selfWalletAddress, otherWalletAddress):

The above method creates an inbox for given 2 addresses. The first argument to be the wallet address which is currently logged in and second argument of the other peer.

Note: This method only works if both the peers have logged into the network atleast once. Else, this method will throw an error.

Usage:

import { useDivergentStore, useDivergentClient } from "divergent-client";

const client = useDivergentClient();

// otherWalletAddress: The wallet address with who conversation
// is required to be initialized
const startConversation = (otherWalletAddress) => {
  await client.startConversation(otherWalletAddress);
};

sendMessageAsync(payload, type: "conversation" | "group"):

Note: Before using this method, it is mandatory to use the startConversation(selfWalletAddress, otherWalletAddress) method. Without this, messages can neither be sent nor received.

Message payload should be of the type:

{
	to: “0xc111Ea84c2FBF21E45d837FF32DD3399CBfeF480”,
	from: “0x171371a0fe069daa9e4cccdf2a9a3040242c8fa6”,
	message: “Hello”,
	timestamp: Date.now().toString()
}

Usage

import { useDivergentStore, useDivergentClient } from "divergent-client";
const client = useDivergentClientContext();
const user = useDivergentStore((state) => state.user);

const sendMessage = async (to, message) => {
  const payload = {
    to: to,
    from: user.uid,
    message: message,
    timestamp: Date.now().toString(),
  };
  await client.sendMessageAsync(payload, "conversation");
};

sendMessageSync(payload):

💡 Note: In order to send and receive messages using the `sendMessageSync` method, it is mandatory to establish a WebRTC connection between two peers using the `dial` and `answer` method.

This method only works once a connection has been established using the dial and answer methods. Messages sent using this method are not persisted and as lost as soon as the connection has been terminated. The payload schema for this method is same as the payload schema for sendMessageAsync

Listening to messages:

1. Async Messages

The messages sent using sendMessageAsync can be listened and display on the client side using the conversations variable through the client.

Usage:

import { useDivergentStore } from "divergent-client";

const conversations = useDivergentStore((state) => state.conversations);

All the changes which happen real-time are automatically updated into this variable.

2. Sync Messages

The messages which are sent using the sendMessageSync method can be listened and displayed using the syncMessages variable.

Usage:

import { useDivergentStore } from "divergent-client";
const syncMessages = useDivergentStore((state) => state.syncMessages);

Methods for Group Chat

createGroup(name: string)

The above method is used to create and initialise a group with a certain name. Apart from the custom name, the group is also assigned a id by default which will be used as the to field in the message type to send a message.

Usage

import { useDivergentClient } from "divergent-client";

const client = useDivergentClient();

// Inside your component
<button onClick={async () => await client.createGroup("groupName")}>
  Create Group
</button>;

sendMessageAsync(payload, type: "conversation" | "group")

Message payload should be of the type:

{
	to: groupId,
	from: “0x171371a0fe069daa9e4cccdf2a9a3040242c8fa6”,
	message: “Hello”,
	timestamp: Date.now().toString()
}

Usage

import { useDivergentStore, useDivergentClient } from "divergent-client";
const client = useDivergentClient();
const user = useDivergentStore(state => state.user);

const sendMessage = async(groupId, message, type) => {
	const payload = {
		to: groupId,
		from: user.uid,
		message: message,
		timestamp: Date.now().toString()
	}
	await client.sendMessageAsync(payload, "group");
}

// Example
<button onClick={() => sendMessage(Object.keys(groups)[0], groupMessage, "group")}>

💡 The group id can be accessed using `useDivergentStore` hook `const groups = useDivergentStore(state => state.groups)` `console.log(Object.keys(groups))`

addGroupParticipant(groupId: string, walletAddress: string)

Adds a user with that wallet address to a group providing that the user has used the network atleast once.

Usage

import { useDivergentClient } from "divergent-client";

const client = useDivergentClient();

// Inside your component
<button
  onClick={async () =>
    await client.addGrouParticipant("groupId", "0xWalletAddress")
  }
>
  Create Group
</button>;

removeGroupParticipant(groupId: string, walletAddress: string)

Removes a participant from a group. Only the creator of the group can call this function as of now.

Usage

import { useDivergentClient } from "divergent-client";

const client = useDivergentClient();

// Inside your component
<button
  onClick={() => client.removeGrouParticipant("groupId", "0xWalletAddress")}
>
  Create Group
</button>;

Accessing group messages

The group messages can be accessed and displayed using the useRootStore hook.

import { useDivergentStore  } from "divergent-client";
const groups = useDivergentStore(state => state.groups)

// Render
<div>
	{JSON.stringify(groups)}
</div>

Error Handling

There are predefined error types when using Divergent-Client. Developers can choose to act upon the type of error.

Error Types

const IErrorType =
  | "userNotFound"
  | "conversationNotFound"
  | "sendError"
  | "deleteError"
  | "callError"
  | "noLens"

1. userNotFound: Thrown when a user has not been registered on the Divergent Network yet.
2. conversationNotFound: Error thrown when user tries to send a message without starting a conversation (startConversation) i.e when inbox has not be initialized.
3. sendError: Thrown when an error occurs during sending a message.
4. callError: Thrown when any error occurs during initializing, end or on-going call.
5. noLens: Thrown when user is not found on Lens Protocol.

Listening for Error

Errors can be listened by listening to the errorType variable from the useRootStore hook.

Usage

import { useDivergentStore } from "divergent-client";

const errorType = useDivergentStore((state) => state.errorType);
const errorMessage = useDivergentStore((state) => state.errorMessage);

// Example
{
  errorType == "conversationNotFound" ? <h2> {errorMessage} </h2> : null;
}

States

The divergent-client uses Zustand based state management. All the state variables can be accessed by importing useRootStore from the divergent-client package.

• user

  user: {
      uid: "0xc111Ea84c2FBF21E45d837FF32DD3399CBfeF480",
      socket: "",
      node: "",
      avatarUrl: "",
      messages: [],
    },
    connection: null,
    peer: null,
    conversations: {},
    syncMessages: [],
    incorrectKeys: false,
  

  Usage

  import { useDivergentStore } from "divergent-client";
  const user = useDivergentStore((state) => state.user);
  
  // SIMILARLY ALL THE ABOVE MENTIONED VARIABLES CAN BE USED.
  

• caller

  caller: {
  	callerUid: undefined,
    callerSignal: "",
    callerStream: null,
    connection: null,
  }
  

  Usage

  import { useDivergentStore } from "divergent-client";
  
  const callerRef = useRef<any>();
  const callerStream = useDivergentStore((state) => state.callerStream);
  
  useEffect(() => {
    if (callerStream) callerRef.current.srcObject = callerStream;
  }, [callerStream]);
  
  <video playsInline ref={callerStream} autoPlay style={{ width: "300px" }} />;
  
  // SIMILARLY ALL THE ABOVE MENTIONED VARIABLES CAN BE USED.
  

• mic

  micState: {
      mediaDevice: undefined,
      stream: undefined,
      streamError: null,
      deviceLoading: true,
   },
  

  Usage:

  import { useDivergentStore } from "divergent-client";
  
  const stream = useDivergentStore((state) => state.micState.stream);