ChromeExt+ChatOnWeb3WithTokenGatingContent

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

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
• 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