XMTP+LIT+ChromeExt+ChatOnWeb3WithTokenGatingContent

XMTP web3 chat improvement that with chrome notification, token gating and NFT unlocking widget in chat box ;)

We build a chrome extension that can notify users that they have new messages coming from XMTP. And we inject into the XMTP Chat Opensource code with LIT and IPFS(via NFT.Storage) that provide users a token gating chat UX. Users can send images with title/description and NFT gating contract addresses that only users with the NFT in their wallet can unlock the image. This can be used as chat 2 earn or selling while chatting

## Submission resources List

• XMTP chat online demo link
• Video Demo Link
• Screenshots
• XMTP Notification Chrome Extension code
• XMTP Chat PR code

Tech We used

• XMTP Notification Chrome Extension
  • Chrome extension dev MV3
    • chrome.storage store xmtp keys
    • chrome.notifications create notifications while receive new message from xmtp
  • XMTP the lib to start the XMTP new message listener
    • Listen for new messages in a conversation
    • List existing conversations
• Web3 LIT token gating Chat: chat 2 earn or selling while chatting
  • LIT
  • XMTP
    • XMTP chat example open source code
  • IPFS: NFT.Storage SDK
  • TailwindCSS
  • HeadLess UI
  • Polygon Testnet Mumbai to deploy our ERC721 NFT contract

Features && Sponsor Technology Explain

• User can receive new XMTP message notification via our Chrome Notification Extension
  • user can login with metamask: code
  • user can login into xmtp to get the xmtp keys: code
  • user can receive notification while get new xmtp message: code
• IPFS & Filecoin NFT.Storage
  • we build the useNFTStorage hook to provide a utils for our application to interact with IPFS: code
  • upload encryptedFile to IPFS: code
  • upload encryptedFile metadata json to IPFS: code
  • get json data from IPFS by the getJson function write in useNFTStorage hook: code
  • fetch the encryptedFile via nftstorage.link url: code
• Polygon
  • We deploy an ERC721 NFT contact to mumbai testnet to test our token gating contract polygonscan link
  • It's an ERC721 contract with ERC2981 interface implement: code
  • It can admin with some params: code
    • Provide white list addresses with mint number specific
    • toggle reveal/opened/publicMint status
    • setup public mint price
    • setup royalty value
    • mint with white list or public mint: code
• XMTP && LIT
  • User can send token gating content in chat box
    • Inject ipfs file upload logic and combine it with LIT token gating: TokenGatingModal code
    • Input ERC721 contract address
    • select image and gating with LIT
      • show preview before submit(without gating)
        • encrypt with LIT
    • generate metadata CID
    • submit metadata CID as message content
  • User can unlock token gating content in message list
  • Chat message content with the NFT gating UX MessageContent code
  • unlock button to wait for user to unlock the chat message
  • LitProvider to provide LIT init and helper function

Future Plan

• Rewrite our own Chat Application with XMTP and LIT by Vue3 framework
• Chrome Extension will inject ui into Twitter page that can chat direct on the twitter page also show some of the user's NFT on that injected components.
• Build the next generation of the Social platform that all follow the Web3 logic!
• make the XMTP listener work in the background service worker
  • I have spend over 10+ hours try to make it work in the background service worker, but it has some issues
    • xmtp package has some kind of fs call that can not work in browser
    • that I can not compile it to work in the background.js
• use plasmo extension framework to re-build the extension
  • I try before over 20 hours, but still, the same as the xmtp compile problem
  • Need more digging for this problem