@0xvaibhav/divergent-av

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 utilize 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 utilize 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");
// The above example is when you setup local development environment.

Wrap Providers

Wrap your application with DivergentClientProvider

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

Usage

import { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

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

Using the useRootStore hook

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

// EXAMPLE

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

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

init(”wallet”):

Authenticate a user with their crypto wallet

Usage:

import { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

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

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();

For Messaging

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 { useRootStore, useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();
const user = useRootStore((state) => state.user);

const startConversation = (otherWalletAddress) => {
  await client.startConversation(user.uid, 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 { useRootStore, useDivergentClientContext } from "divergent-client";
const client = useDivergentClientContext();
const user = useRootStore((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):

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

💡 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.

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 { useRootStore } from "divergent-client";

const conversations = useRootStore((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 { useRootStore } from "divergent-client";
const syncMessages = useRootStore((state) => state.syncMessages);

Methods for Group Chat

createGroup(name: string)

The above method is used to create and initialize 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 { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

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

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: groupId,
		from: “0x171371a0fe069daa9e4cccdf2a9a3040242c8fa6”,
		message: “Hello”,
		timestamp: Date.now().toString()
	}

Usage

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

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

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

💡 The group id can be accessed using useRootStore hook
const groups = useRootStore(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 { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

// 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 { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

// 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 { useRootStore  } from "divergent-client";
	const groups = useRootStore(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 { useRootStore } from "divergent-client";

const errorType = useRootStore((state) => state.errorType);
const errorMessage = useRootStore((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 { useRootStore } from "divergent-client"
	const user = useRootStore(state => state.user);
	
	// SIMILARLY ALL THE ABOVE MENTIONED VARIABLES CAN BE USED.

caller

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

Usage

	import { useRootStore } 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" }} />
	
	// SIMILARLY ALL THE ABOVE MENTIONED VARIABLES CAN BE USED.

mic

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

Usage:

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

Key Management

revealKeys():

This method is used to export the public and private keys of the currently logged in user. It is highly recommended that developers provide an option to export the keys of the users using this method in their respective apps.

Usage:

import { useDivergentClientContext } from "divergent-client";

const client = useDivergentClientContext();

const getKeys = async () => {
  const keys = await client.revealKeys();
  console.log(keys);
};

Support for Lens Protocol

All the features of Project Divergent are made available to the Lens Protocol users. Which means that you can send E2EE messages, make calls to profiles present the Lens Social Graph!

All of the methods for the divergent-client remain the same except the init method which would now take the argument of “lens” instead of “wallet”

Usage

import { useDivergentClientContext } from "divergent-client";
const client = useDivergentClientContext();

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