Chat Feature (Lens + XMTP)

Lenster is a decentralized social media platform which is built using the Lens protocol. As of now, Lenster does not have a peer to peer messaging feature where two users can chat in a decentralized way. We solved this problem by making this feature using XMTP protocol and integrating it with Lenster. On the chat app, a user can search for various other users that are on Lenster (Lens Protocol) and signed up for this chatting feature using Lenster handle id's only. We no longer need wallet addresses to search for other people to chat, we just need to have the Lenster handle id and we are good to go. Also, it is a difficult task to navigate the chat console when all you see are long wallet addresses. Well, we also solved this and now you will see a well managed chat console with handle id's, it makes navigation and searching for the right person to chat so much easier. Busy working and want to be updated with all the messages, we've got you covered, using the push notification feature users will recieve desktop notifications whenever they get a new message. So, this chatting feature provides great functionality with privacy and we believe it can bring more and more users to the platform and hence Web3.0 ultimately.

So this feature is made with the help of XMTP protocol which is the core of this project. It can be termed as a fusion of XMTP and Lens protocol. The integration with Lenster has been achieved using the Lens API which enables us to search for handle id's using wallet addresses and vice versa. ApolloClient is being used for sending the queries and we also use the useQuery react hook. For enabling notifications in this chat application, we have used PWA (progressive web app). Most of the code is written in TypeScript. Firstly, when we open the site, we ask the user for permission to send notifications and when they grant this permission, a service worker file is registered in the user browser. We use eventListeners to listen for new messages and send notifications.