@0xvaibhav/divergent-client
v0.0.9
Published
The Divergent Network provides developers with three different Software Development Kits (SDKs) to interact with the network. These SDKs are:
Downloads
13
Readme
The Divergent Network provides developers with three different Software Development Kits (SDKs) to interact with the network. These SDKs are:
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.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.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
oryarn add @0xvaibhav/divergent-av
For developers who just want to utilize the messaging features can use the package
npm install @0xvaibhav/divergent-messenger
oryarn 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 thedial
andanswer
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
hookconst 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: {
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: {
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.
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");
};