ChromeExt+ChatOnWeb3WithTokenGatingContent

Screenshots

Problem Statement

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 canunlockthe image. This can be used aschat 2 earnorselling while chatting

Solution

Tech We usedXMTP Notification Chrome ExtensionChrome extension dev MV3chrome.storagestore xmtp keyschrome.notificationscreate notifications while receive new message from xmtpXMTPthe lib to start the XMTP new message listenerListen for new messages in a conversationList existing conversationsWeb3 LIT token gating Chat:chat 2 earnorselling while chattingLITXMTPXMTP chat example open source codeIPFS: NFT.Storage SDKTailwindCSSHeadLess UIPolygon Testnet Mumbai to deploy our ERC721 NFT contractFeatures && Sponsor Technology ExplainUser can receive new XMTP message notification via our Chrome Notification ExtensionIPFS & FilecoinNFT.Storagewe build theuseNFTStoragehook to provide a utils for our application to interact with IPFS:codeupload encryptedFile to IPFS:codeupload encryptedFile metadata json to IPFS:codeget json data from IPFS by thegetJsonfunction write inuseNFTStoragehook:codefetch the encryptedFile via nftstorage.link url:codePolygonWe deploy an ERC721 NFT contact to mumbai testnet to test our token gating contractpolygonscan linkIt's an ERC721 contract with ERC2981 interface implement:codeIt can admin with some params:codeProvide white list addresses with mint number specifictoggle reveal/opened/publicMint statussetup public mint pricesetup royalty valuemint with white list or public mint:codeXMTP&&LITUser can send token gating content in chat boxInject ipfs file upload logic and combine it with LIT token gating:TokenGatingModal codeInput ERC721 contract addressselect image and gating with LITshow preview before submit(without gating)encrypt with LITgenerate metadata CIDsubmit metadata CID as message contentUser can unlock token gating content in message listChat message content with the NFT gating UXMessageContent codeunlock button to wait for user to unlock the chat messageLitProviderto provide LIT init and helper function