Inspiration
We are all NFT users and collectors and we've experienced the frustration of wanting to effectively and anonymously communicate with the owner of a specific NFT we came across. Yet, marketplaces like Opensea don't give you an easy option to do that. What we have built is really a tool that we ourselves can't wait to start using, and are hoping others will benefit from too!
What it does
It is a browser extension that sits on top of any website and automatically offers additional features when viewing an NFT on a marketplace like OpenSea, LooksRare, and X2Y2. It essentially enables three things -
- Login with web3 & direct message any wallet or ENS on Ethereum, with read receipts
- When viewing an NFT in your browser, DM the NFT's owner in a thread with the NFT's contextual information attached
- Leave public comments on an NFT, visible to anyone
How we built it
The WalletChat extension is built with both centralized and decentralized tools to ensure great user experience while upholding the ethos of decentralization - all chat data is uploaded to IPFS on the client side (optionally encrypted) and only the CID is stored in our backed DB on a per-message basis. This ensures the WalletChat infrastructure doesn't own any of the data, nor can it manipulate it.
On the frontend, we use React with Typescript. Chat data is fetched through a REST API from a centralized database to display messages received and sent by the user. The extension listens for changes in the browser URL such that when user lands on an NFT page in OpenSea, LooksRare or X2Y2, the NFT's metadata and relevant chat data are fetched from Alchemy's and our own REST API.
For the backend of the WalletChat program, we decided to use a REST API written in Go, and a MySQL database to store some basic metadata for each message to expedite routing of the messages to users. Libp2p and IPFS pub/sub mechanisms could be used here as well, but we chose to start with a hybrid approach here for speed and reliability.
Challenges we ran into
One user interface challenge we ran into is dealing with Chrome Extensions vs. a typical web page. Things like accessing the window.ethereum object in the extension required a special plugin from Metamask to access the data necessary to do standard Metamask RPC calls. We also ran into challenges with the Chrome Extension background worker, which does not run and restarts all variables each time the extension is closed and re-opened. This was contrary to our assumptions that we could run things in the background all the time for our program, for things like notifications.
Yet another challenge is that in the Chrome Extension it took quite some time to realize that we cannot open the extension via a button click from a web page, the user must explicitly open the extension. We thought this was possible just because we use this so often in Metamask, but we realized Metamask "pop-ups" are not actually part of the extension UI, as the window can be freely moved around. The Metamask pop-ups for signing and other functions are designed to look just like the extension UI, likely because of this restriction in the Chrome Extension framework.
One challenge we ran into was during implementation of encryption. Our goal is to have a usable UI, and encryption and decryption using Metamask and the actual wallet key-pair was not very user friendly. In addition, Metamask only supports encrpytion/decryption when users manually share their public key, via the eth_getEncryptionPublicKey RPC call. Public Key encryption to the actual Ethereum wallet address is of course not possible as its shortened representation. We have included some comments on the Metamask github to help address this shortcoming, as other are interested in this same functionality. We have implemented secondary key pairs for use with encryption, which streamlines the UI.
Accomplishments that we're proud of
That we are able to bring messages to users (passive), instead of hoping that the users find the way to the messages (active). There are chat apps built over the past few years, and even reputable ones like Blockscan Chat integrated by LooksRare and X2Y2, but to access them, users would have to access the messages in an app in a separate tab, let alone be notified whenever they receive any messages. By building an extension which displays how many unread messages a user has, we simplify the UX to work with the users' behaviour to increase adoption.
What we learned
Browser extensions are a tough nut to crack that can do with better documentation and examples. A good part of our time was spent experimenting and discovering how the extensions interact with the world outside of them.
What's next for WalletChat
In light of the growing prominence of NFT trading and web3 social media, we believe the opportunity is massive. We have included a more detailed roadmap in our video but essentially the opportunity areas are -
- Improve the wallet-to-wallet chat experience to make it the go-to general purpose web3 chat app
- Additional social features around NFT trading/collecting, to bootstrap an NFT social network
- Social features targeting NFT discord communities, to enable them to connect with their members more easily, right where they are already in their browser
Log in or sign up for Devpost to join the conversation.