Polygon 🛠 Token Gating Static Data with Web3Storage and Polygon

[Applause] [Music] great welcome everyone thanks for joining us and taking your time we have rahat here from polygon he is going to give a workshop on token gating static data with web3 storage and polygon rahat i'll let you take this stage and if you guys have any questions in the meantime feel free to pop them in the chat and we can take them towards the end thanks awesome thank you let me share my screen [Music] all right uh thank you everyone for joining in on this workshop so today we're going to be talking about token gating static data uh using polygon as well as web 3 storage and specifically what we're going to be doing is building out like a little token gated blog backed up by like web3 storage as well as an nft on the polygon network um first off a little bit about me uh my name is rahat i'm a developer advocate over at polygon previously i've been a front-end engineer as well as a freelance selenium engineer overall just like an indie hacker slash web 3 enthusiast and yeah these are some places you can find me specifically for everything we go over in this workshop you can find everything at this link i'm also going to drop it in chat but it's hot dot dev slash post slash hackfest 2022 so if you ever want to go over the slides if you want to go over like the code again that we go over during this workshop feel free to do that that's all available right there cool a little bit about polygon um polygon is the leading platform for ethereum scaling and infrastructure development so we provide a bunch of different solutions things like zk roll-ups optimistic roll-ups side chains hybrid solutions different things for different needs specifically what we're going to be talking about today and what folks might be more familiar with is our main offering which is the proof of stake blockchain it's an evm compatible blockchain our native token there is matic super accessible and sustainable accessible being because transaction fees are much much lower than doing something unlike mainnet and sustainable because we've been committed to being carbon carbon neutral which we've done so far and trying to go for being completely carbon negative so why should you build with the proof of stake chain uh speed is one of the first reasons uh sixty five thousand transactions per second pretty fast uh you still leverage like ethereum at the end of the day so you can conduct transactions on the previous state chain and then bridge assets back and forth back to ethereum and like i mentioned before saving on a cloud on costs approximately 10 000 times lower cost per transaction than ethereum so i wanted to give you kind of like an overview of like how this works at a very very high level um so this is sort of like the um at the bottom you'll see like the matic side chain which is kind of like where you would do most of your interactions with if you're using the polygon network if you deploy some smart contracts etc onto either our test net which is the mumbai test net or our main net on polygon you would interact with that chain specifically but if you look at the overall architecture you'll see at the top the root chain is actually the ethereum mainnet what happens in between these two chains is that we have this layer called a public plasma checkpoint node and what these nodes do is that they'll occasionally take a look at the current state of the matic chain and they'll save a hashed value of that state to the ethereum main net we have a contract on there that essentially keeps track of like all the hash values of it so what this means is this transforms the matic sidechain into what's called a commit chain and inherits some of the security and backing up like the ethereum main net onto polygon itself so building robust decentralized applications requires a combination of tools in the ecosystem i just gave you a little bit about polygon and you know the proof of stake blockchain but at the end of the day if you're going to be building um a decentralized application polygon is just one part of the equation you need a few other things to actually flesh out and build a full usable decentralized app one of those things can be stuff that helps you with storage so what are we building today like i mentioned before a token gated blog we're going to be looking at how we can take an existing nfc smart contract that i have um already deployed on the polygon mainnet which i actually built on a previous e global workshop and what we're going to be doing is just like verifying the ownership that somebody owns one of those nfts and if they do they can access a blog the data for that blog is going to be actually um it's called hosted on um ipfs and filecoin using web3.storage so our blog is built with like i said polygon web3 storage we're going to look at some react code as well as the ether.js library and then we're going to at the end talk about some more tools that we can use to help improve this like sort of basic implementation a little bit further for now let's look at some code so i've got this uh code repository pulled down but that this code um is also available on that link i sent earlier um and i've got this json file in here nothing fancy it's like a mini little blog post called gm world it's got a description a body and an image nothing fancy we'll take a look at this a little bit more later but a quick run-through of the application itself is i've got most of the things here inside of the app.js i've just got like a handle connect wallet function here which is just going to request permission to connect to the user's wallet save their address into state as well as connect to an existing nfd smart contract that i've specified up here let me go ahead and actually open that for you [Music] so this is the nft smart contract i was talking about before which i created during another eighth global workshop uh but just a quick overview if you head to contract you can actually like read the contract itself and see what's going on in here so polygon scan is very similar to etherscan if you've used etherscan before to take a look at some of your existing contracts but here you'll see that i verified the contract code shout out to past me for doing that because that made this so much easier but essentially it's a very basic kind of um implementation of an nft smart contract i'm importing opens up lin erc721 urs storage um as well as counters to help with like giving token ids for everything this erc 721 nft collection is called metadata nft um and nothing really going on i just have a single mint function that takes a token uri which could be anything just hosted you know on um ips fast filecoin whatever that has just like some json um you know data that we can use to uh essentially set up like the token uri for this nft and add all the data for it not a lot going on but the main function in here that is going to be useful for us if we had to read contract is this balance of function so if i were to go and take my address paste this in here hit the query button you'll see that the balance of method returns three meaning i have three nfts that are a part of this collection so what we're going to be doing inside of here is checking to make sure that any person who connects their wallet has a balance greater than zero they just have to have one single nft as part of this collection and that will set the state of the app to be authorized currently the state of the authorized by default is false this will set that authorization to be true how are we using that authorization down here i have this component called content which will show once someone's address is connected as well as taking in that authorization so let's take a look at the content component itself not not a huge um not a lot going on in here but essentially it is making a fetch request to a json endpoint and then displaying the results of that data saving it to state and displaying it down here as long as the person is actually authorized to view it so that um json data again is coming from this post.json so how do we actually get this onto a queryable endpoint this is where web3 storage comes in so i'm going to head over to web3.

storage i've already got an account but you can make one here so for the sake of this specific workshop i'm just going to be using their like uploader um to actually just upload the json file um straight into web3 storage but they've actually got like a whole entire like javascript client that you can like actually put into your um apps to upload files get them straight onto ipfs filecoin etc and you know display uh that um you know data in like a more programmatic way um in our case we're taking a shortcut and just uploading files so you can just drag and drop files here so this is that link to that js client library uh that i mentioned before uh actually i think i already uploaded it before yeah post.json so we can just click this um you'll see that it goes to an ipfs link and you'll see that my uh post.json over here lives on this endpoint inside of my application if we go to the env file you'll see that i already put in uh this endpoint as the um react app json endpoint now this is a very like naive rudimentary way of like hiding uh this you know endpoint so that you know someone with the nft can only access it um we'll discuss how you can actually make this a little bit more secure at the end of the at the end of the demo but what we've got here basically is um we are connecting to somebody's wallet just a quick walkthrough again connecting to somebody's wallet and then immediately connecting to this contract address which also includes the abi from the contract so this abi code i just copy and pasted from the contract itself so if you ever wanted to look at like a verified contract and actually build a front end around it as long as they've got this like little green check mark if you head to code and scroll down you'll see that there's the contract api here you can hit this button to export or copy the api to clipboard whatever you need and so i basically just copy and pasted that um into this json file here uh api code all it does is just kind of i like to refer to it as like a map um it is what the different like functions that are available to you to call on this contract um this is how like any like javascript sdk that you use will understand like how to actually query this specific contract so if we head back to app.js we will see that i'm importing the api up top and i'm creating an instance of this nft contract by supplying the contract address the api as well as the signer which i got up here and then i'm just immediately calling uh this balance of um function which i should showed you all on polygon scan and supplying it my address that i got from up here and that's how i'm checking if this person actually has a balance of any of the nft's associated to this specific collection so let's take a look and make sure that actually works let me run that here okay so yarns okay cool so we have our connect wallet button cool hit connect wallet um so i connected before but if you connect for the first time to localhost 3000 then it'll ask you to authorize it and everything but yeah this looks like it works i have the gm world um a little uh description body as well as the image that i saved cool so as long as i have an address with that specific um you know with that specific nft uh this is all good let me actually switch this to a different address and let's verify that this should not work i'm just switching it off camera one second okay so this is a new one hit connect wallet uh okay my meta mask is still detecting the other one i have to disconnect everything one second this this is always the issue with doing live demos and having multiple accounts linked to stuff uh in the meantime i do see some questions while i'm setting this up i'll just quickly answer the sum if the auth check is done client-side what's to stop someone from just setting their own authorization and fetching slash displaying the data so in this implementation there is nothing to stop that but we are going to talk about some tools that will help you to improve this implementation further at the end of this demo once i disconnect all of my wallets one moment okay cool so i'm now on a different wallet i hit connect wallet says sorry you do not own the nft required that is because this specific wallet does not have owned any of the nfts or have minted any nfts from that specific contract so that is a very very just like a starting point for you all just to kind of take of like how you could potentially save some json data onto you know um a uh a service provider like you know filecoin using web3 storage and actually token gating that using something on polygon this implementation is not perfect um there's never going to be anything perfect in a 30-minute implementation but let's take a look at how we can improve this let me re-share my screen cool so ideas for building this out even further um so one of the things that was asked is like how do we like actually you know better secure this data and make sure that only somebody who can who has the actual access to this data um you know access it so you can actually encrypt this data on the json endpoint there's this really awesome protocol called lit protocol which will help you to encrypt data um on you know any uh like any you can encrypt any type of data and then essentially have the ability to unencrypt it based on like ownership of a specific nft ownership of like um or like whatever um kind of set sort of um details that you want maybe you want specific addresses to have access to it et cetera um so aside from like using something like your own server to do some of that validation that protocol is a good sort of like web3 way of making this a little bit more secure and encrypting this information specifically for those nft holders or any addresses of your choice other things you could do consider using subgraphs if you're wanting to integrate multiple nft communities because you know uh trying to essentially if you have like some type of like newsletter or a blog or something um that you want to token gate in this way you're going to be better off like using something like a subgraph especially when you have like different types of nft communities that you want to make sure you're servicing one thing that i mentioned earlier was using the web3 storage javascript javascript client to allow users to like upload their protected data themselves so rather than you having to go in go to like you know web3.storage upload um the actual data they want they do have that javascript client for you to integrate that directly into your dap last thing would be to use solutions like rainbow kit as well as wallet connect for more wallet compatibility the way that this specific implementation is done is that it's only really compatible with like metamask or like a browser injected wallet so definitely want to make sure that you are targeting and opening up your dap up to as many people as possible so the main takeaway that i hope that you all sort of um the main point that i hope you'll sort of take away from this is that you know web3 protocols are your building blocks you have to use them kind of together to build out that robust step so again something like polygon um as like you know the base layer to like have your assets to have your transactions on and then you have web 3d storage uh thanks to the folks at filecoin to have like you know some of that storage maybe it's like json data for like static blog posts maybe it's images etc whatever you kind of want me to store that's uh you know there for you and then the other thing that i mentioned of like making this a little bit more secure is like using tools like lit protocol to further make this into something that's like more production ready by adding some sort of encryption for protection against like people who want to do some of the various things and access data that they should not access so i want to open this up to questions i know there's a bunch in the chat so i'm going to stop sharing and let's take a look at the chat itself is it possible to build a forum slash aml say mma style service using this yeah i mean essentially like the json endpoint itself could probably have um you know whatever kind of data you want um so this is you know forums with like things like the ability to add you know comments and things like that this might not be 100 the best solution for that uh this is i would say maybe for like you know real static data like a blog like a blog it's not going to like change a lot um so if you want to have like a blog post or like a newsletter or something that is you know specifically token gated um that is probably like anything like really static is probably the best way to do that um cool think uh dyson yeah hey um thank you for presenting this was really cool i was actually thinking about something like this as well awesome um yeah it was um just just one thing as like i've heard about unlocked protocol and i i don't and and then the other thing i don't know how um they do it but like i'd be curious and also if um if you know maybe you can explain a little bit more also around the lead protocol do you have any resources like github code or things like that that you can say how like we could potentially take this farther because this is like super super interesting to me yeah um let me grab the lit protocol docs thanks yeah the folks like atla protocol are like super awesome um so if you like drop in their discord and have questions they can answer like right away uh but like lit protocol can help you with doing things like adding like authentication jwt based tokens things like that so like you don't have to actually like build out your own server and stuff you can actually use like a web3 protocol to help you encrypt and like access data do you think from what you know with the using your uh stack or lego blog are people will be able to like essentially restrict the content specifically to the nfd owner so people can't just yeah okay absolutely okay okay thank you yeah my my specific implementation again was really just like to go through and i think that was perfect that was i i was actually we're actually stuck on our project and we're trying to solve this problem and cool yeah this is this this is great thank you awesome glad i could help great thanks for have for this uh workshop it was great to have you and if anybody else has any more questions feel free to pop over to the discord sponsor polygon and we'll be there to help you