Unlock Protocol 🛠️ Hackathon Workshop Overview and Live Coding Tutorials - Julien Genestoux

foreign [Music] welcome to this Workshop where we'll learn today about unlock protocol this is a workshop that is dedicated to developers or people like hackathons that want to build on top of the unlock protocol here's to get started a quick agenda about what unlock is first we'll stop in overview then we'll look at the ecosystem we can do tools including the sub graphs from the graph and works of Integrations exist out there then we're moving to a final section about two different tutorials one of them is to show you use cases for front-end and how to create one as well as use cases for smartphone track integration as well as creating a hook which is something that's very specific to the unlock smart contracts uh first of all a little bit about myself uh my name is Junior nistu I'm the CEO and founder here at unlock protocol uh before that I was actually working in a company called superfeeter which was sold to medium in 2016 Super video was building RSS feed API RSS our core building block of the open web and really if you think of unlock as a another building block for the open web I'm a big open source Advocate I'm a w3c invited expert and I'm also a member of the graph Council you can find me online at julian51 mostly everywhere or use my site at urubuat.com so let's jump right into it what is unlocked protocol unlock protocol is a protocol for memberships what does that mean you might ask well simply thought a knock protocol is a system to create membership and sell access nfts membership nfts in minutes it allows developers like yourself to create memberships subscription ticketing solution ad token getting to websites create certifications and gaming and we'll come back to all of these it is obviously completely open source under the MIT license it is community governed which means that we have a Dao and a governance token and if you're building on top of unlock we invite you to join our Dao so you can help us make decisions about the future of the protocol um there's a set of application that we have built at unlock Labs but also other people have built similarly with libraries and developer tools it was funded by me in 2018 um and we now have a team with diverse experience from Google Facebook GoDaddy and multiple others as well as the global Committee of people around the world so let's talk more about memberships um and NFC specifically so can I use any any nft to represent membership um and especially here you might recognize some of the popular projects out there the short answer is no you should not I mean you can but you should not and the reason why you should not is because these default nfts specifically the collectible entities are limited in what they allow for you to do for example the number one limitation is that they're valid forever they're perpetual and when you create a membership of any kind you actually probably want to have it time-bound think of your Netflix membership or your Amazon Prime membership it is time bound it is valid for a month and it renews for another month and for another month and for another month for as long as you pay but it is not valid forever similarly think about a certification your driver license in the US for example is a membership a membership to the DMV and it is limited in time it's valid for five years and then you have to renew it to prove that you can still you still know how to drive so we're using regular nfts would not work really well for this this time aspect as we just alluded to also allows you developer to build in recurring Revenue mechanisms for your application or for your community to have sustainable funding every week every month every year depending on what is the timeline that you choose because the nfts expire over and over again allows you to move from the concept of royalties which is very linked to the nft concept to more continuous Revenue where again as your community is is accruing revenue on a constant basis similarly I'd unlock with built inside the smart contract several capabilities that would allow you to support not just crypto payments but also payment using for example erc20 tokens and specifically on top of that also Fiat payments using credit cards for example and we'll come back to this in the future as well it also allows for off-chain Access verification as well as on-train Access Control each of these nfts can be signed to prove their authenticity and then from the signature we can generate for example QR code that are shown on tickets as a way to prove that somebody might have or should have access to a venue for example if they are attending a concert or a conference similarly some memberships are transferable but others and I'd say almost a majority of them should not be transferable your Netflix account is probably not transferable even you show your password with your with your friends um a certification a diploma is definitely not transferable you don't want to be able to transfer your diploma from an organization to another but you can also imagine that some social clubs for example have memberships that are transferable if you're not you know currently part of the club you can transfer that to someone else that will be able to join the club uh and then you're not able to join anymore obviously the contract that we've built and unlock are ERC 721 which is the same default nft contract that you've used in most places but it has been built with a ton of characteristics when you think about collectible it's important maybe even critical that the contract itself is immutable that whatever is in the contract on the first day is there forever but when you're thinking about membership as a more generic concept it might actually be interesting to be able to kind of upgrade or change how the contract behave for example you know the price of the membership might increase and that is something that is support natively by unlock as well specifically unlocks contract are updateable you can change uh you know the name of the contract the price of the membership the duration of the membership the supply the number of membership that there could be you can also change a specific membership you know you can imagine that in some cases membership can be revoked uh even though somebody might have paid for this you might allow them to cancel and get a refund or they can be assigned to someone else the contractor also upgradable we've built the contract with the idea that the protocol will evolve over time and each contract should be upgradable not by us obviously by but by the person who deployed it so a specific creator that has deployed a membership contract should be able to opt in to a new version of the protocol if one has been made available by the by the Dow finally and this is really kind of an interesting aspect here the protocol contracts the public locks as we call them are programmable they're programmable because we realize like as a developer you might want to build custom logic into your membership contract so we do that with a system of hooks that allow you know developers and maybe even at some point creators to add or change the behavior of the smart contract based on some characteristics so for example that's how we support discount codes on membership you can say you know the membership price is 10 but if a user as they go through checkout as they purchase their membership they enter a specific discount code they should only be paying you know five dollar or eight dollars um and that is to the use of hooks and we'll come back to this in the last section of this presentation let's talk about some key import use cases because I alluded to a few but let's be more specific as I said event ticketing a ticket to a conference a ticket to a concert is a membership a one-off membership one that is you know just for that specific event but it is a membership you can also build some kind of recurring subscription I mentioned Netflix Amazon Prime these are good examples of this if you use substack or if you support some creators using patreon you're probably familiar with the idea of the recurring subscription with the user pays uh you know on a monthly basis a certain amount of money there can also be time based so you can build for example seasons in your application and say okay there's cohorts that are used for people to for example govern a specific project uh only for the duration of the project and so basically these are type-based membership we mentioned certifications credential diplomas all of these are membership you're a member of the University or the alumni class of a specific year and that's how you get your diploma you're a member of the people that got trained around using ethereum for a year and you get that certification it is valid for a year you can use it to prove that you have gone through the certification but at the end of that year it should be considered expired because maybe your knowledge is not up to date anymore it is also useful in the context of gaming and think of you know games where you unlock a level well this is a membership to that level again a bit strange to think of this as membership but it really is if you think at the core what a membership is you as a user as a player you're part of the group you're a member of the group of people that get access to level two you can also be a member of the group that have you know access to a specific game item a sword or something like this it's also valid in the context of loyalty programs so think of it as you know your airline miles program you have a car that's a membership card that show that you're loyal to the brand um and that you're um you should be treated as a as a loyal customer in that example um unlock can also be used for attendance nfts the proof of completion the fact that you went somewhere or as a way to commemorate something country and finally you can also use the unlock contract for digital Collectibles like pfp collection that we've seen before or even any kind of other nfts um a regular collectible nfts the time limit as the time limit aspect the time Bond aspect can actually be very useful there as well if you want for example to have Dynamic nfts that evolve over time so you can imagine your pfp gets older unless the user uh you know extends it or renews it in that in that example let's dive deeper with some more specific use cases so for ticketing based a lot of the protocol is deployed right now 100 of this here Revenue goes to the Creator or the event organizer it's not like you know the platform that would take a cut here um the organizer fully controls the ticket distribution uh and if maybe if they want fully controls uh potentially the secondary Market they can avoid transfer or they can require transfer to Goods with a specific Clearinghouse for these to happen uh they can also create and maybe where a smart contracts shine interoperable experiences for attendees before during or after the event imagine if the ticketing for the event is an nft you can use it for example to connect to a Discord server before the event and join all of the other attendees or you can use it when you connect to a reservation website to book for example a hotel room and prove that you have a ticket to get a discount for this so that's the kind of thing that you can do before the event after the event or maybe during the event you can use this as a way to build a system where people kind of vote on what is the best session of the conference and only people that have a valid nft can actually vote using a tool like snapshot if you work if you were to use you know traditional ticketing system it would be really hard to build you would have to build authentication into your application that plugs into the uh the event ticketing application and they probably don't have an API for this and even if they do you know they can restrict who can access that info Mission it's also useful after the event where you can imagine for example like next year's conference might have a discount for people that were here the previous year if you have that concept of nfts ticket it's really easy to just program the smart contract to say whenever somebody has a ticket from last year they should get a 10 discount tickets are membership cards that connect to a community of people that are interested in a specific Concepts unlock for tickling has been used at multiple conferences in the um in the crypto space in ethereum space and here we're showcasing depcon which is a conference happening this year again in Bergen between September 11th and September 13th that con is used to unlock last year actually there's about a thousand attendees that are you know mostly in the crypto ecosystem what's interesting here they're using unlock obviously but they're also using unlock on the specific chain we haven't talked about this yet but unlock has been deployed on nine different evm networks so obviously you probably know if your main Nets you know of polygon but that con chose gnosis chain which I think is a very good option to deploy these this smart contract we're also on optimism on aperture and multiple others you can find them all in our dock um what's interesting about dapcon is like their crypto conference and so it only makes sense that as a crypto conference they're dog fooding they're using the technology that they are writing or talking about uh and in that example specifically they decided to use a mark for for this uh we also have built inside of the unlock um a reference ticketing application assist them to verify authenticity of tickets by scanning QR codes um so really excited about about that use case and if you want to build some kind of ticketing solution you should try to inspire yourself of what uh about um from what you know that con has done other examples of conferences they've used unlock each type a couple weeks ago in Taipei UCC in Paris has used unlock last year as well uh ethrasha is using unlock for ticketing etc etc etc another example of use case that we talked about is concept of subscriptions so subscription enable token access to experiences and services think again in Netflix subscription it gives you access not token based but it gives you access to their streaming service to view uh applications your gym membership gives you physical access to the gym so you can you know exercise there it is sustainable subscription and recurring revenue for the business that hosts it they can use crypto or credit card um for for these things and what's important here is like the business has a direct relationship with the members there is no middlemen involved in that situation there's no uh you know no service in between these two things the Netflix example is an interesting one right you can get your Netflix subscription either from the netflix.com website or through Apple or Google on mobile devices when that happens through mobile devices as a matter of fact Netflix and uh you know Apple and Google Act this middlemen here and they can change the terms they can decide to not validate how the application works anymore and this is not ideal for a business that Netflix obviously this is obviously useful for Content we talked about sub stack briefly for software if you think about in-app purchases a lot of these are subscriptions and that are you know just ways to unlock different features into an application think about Music Services like Spotify obviously video podcasting etc etc so if you're trying to build an application in that field for creators definitely think about monetization uh using something like unlock an example here that is really powerful I think is the example of D5 robot D5 robot provides trading tips and mechanisms to automate uh you know some of the trading and what's interesting about that membership it's using unlock obviously uh on ethereum mainnet the monthly membership if I'm correct is um is about 300 or almost 300 which is a very pricey one um but once you have the membership in your wallet and you can access a dedicated telegram Channel as well as access some some key feature into the application at this point um D5 robot which is a pretty simple application is making about 150 000 in annualized membership Revenue so again if you build these things right that's actually a very significant Revenue appreciative opportunity for any kind of community or software application there uh these time-based membership we talked about a little bit are not necessarily recurring but they are kind of time limited uh so think of it as you know uh seasonal or or even sometimes Perpetual memberships uh that for example give you access to a Discord or telegram uh you approve some of that obviously um uh what's interesting here is like I'd unlock when you create your membership contract you can choose the currency and so since that kind of time time-based membership is really used in the Dow space and there's something really cool about using the erc20 currency of the specific um Community as the pricing mechanism example of this is cabin so cabin is a project that actually launched uh two days ago it's a network CD it's basically a community of people that have some kind of co-living places and they have a membership uh where if you are a citizen and that's how it's called in the membership you get access to some specific airdrops uh specific features that are allowed only for camping members what's interesting here is like what they've built is a system where if you have a thousand cabin tokens the membership is free and for this they actually use a hook system that we'll discuss in the last section of this presentation on train certification we talked about this earlier your diploma the fact that you've taken a course that you maybe attended uh hackathon non-transferable obviously critically but also time limited most of the time to make sure that your knowledge are up to date uh example of people that are using online for this is a team called Plano Dao that I've created the certified digital asset advisor which is basically a proof that you went as a financial advisor through some education around cryptocurrencies and around you know crypto assets or digital assets altogether and that to date they have certified overall Hardware financial advisors that went through that you know that curriculum and in the end received one of these nft are the proof of of of of completion what's interesting about these nfts is like they can be represented or added for example to a LinkedIn profile as a way to show again to your potential customers that you are certified here so building um certification application I think is also one of the things that we were excited about to see people doing the ecosystem we talked about gaming briefly this is a very popular game in the web 3 space uh it's uh called pixels it's a multiplayer game built on blockchain and they use unlocked memberships as a way to create you know these in-app purchases and you can have different kind of uh feature into the application that are time limited and if you acquire these nfts then you are able to actually do certain things inside of the game so really if you're building a game think about you know the using time limited nfts as a way to do this another example of loyalty another example of use cases the ring around loyalty uh one of the examples that we want to highlight here is a company called Stakes which is basically building a loyalty program around a restaurant brand or chain and what's interesting here is like once as you one of the customers you have one of these nft you get some Priority Access to a resolution system that allows you to book restaurants and be treated as a premium uh you know customer and access to some premium table maybe free drink or dessert and a ton of other possibilities that that each restaurant might offer to their customers um finally attendance nfts are sometimes called Pro app in the ecosystem it is basically a system uh it's basically an nft that someone can earn if they have done something it is valid forever uh and what's interesting here it can have Dynamic metadata attributes um we talked briefly about them but still unlock is usable for a pfp project from you know one to 101 to uh you know 10 000 plus static or dynamic nfts can be minted On Demand by users or can be airdropped and obviously supported on all the networks that unlock supports um Tales of electron is an example of a collectible that was built using unlock and what's really interesting about Telstar Electro is like you can see here examples each of these Avatar actually has a component of both the Avatar and so-called weapons which are both nfts and if a given address or given user owns both an avatar and the weapon the weapon will show in the background of the Avatar you can see here for example the um the um the arrow and the bow displayed behind that wolf if the user of the nft were to solve the weapons then the Avatar would not have the bow and arrow it's kind of dynamic uh based on it and I think this is a very powerful tool just a reminder for everyone I was joining now unlock protocol for memberships and memberships are a very core primitive to lots of businesses can be used from even targeting all the way to digital collectible through recurring subscription certification credentials gaming loyalty attendance nifties really you have to think about unlock as a framework for nft memberships and memberships can be lots of different things so thank you very much for listening to me until now and let's jump into the right section in a couple minutes let's now talk about the unlock ecosystem and the developer tools that we put for people to use inside of their applications so first of all a quick reminder unlock is a protocol it's a smart contract system of course you can and you should if you can just use the smartphone track and not rely on anything that was built on top of us by the unlock Labs team however if you want and we think it's a good way to kind of scaffold your application you can start by using some of the tools that we've built for example we have built two really important front-end application the first one is what we call the unlock dashboard the unlock dashboard is a way for what we call log managers to deploy their membership contract their lock from there they can also manage the contract they can change as we've seen earlier the contract is updateable so they can change some settings the price of a given lock uh the number of memberships the duration of these memberships etc etc they can also manage members so they can see the list of existing members they can change the memberships that if someone can refund can cancel they can also airdrop membership and if these two specific addresses or even use some of the features that we built such as the waterless airdrop where it's basically airdropping nfts by email the recipient gets an email with a claim link that they can use to bring the nft from a placeholder address to their own wallet obviously as I said earlier these membership contracts are nft contracts like I mean their ERC 721 which means that you can also customize the metadata on this nft starting with the image obviously or even set custom attributes for the type of membership that you have so for example if you're organizing an event or building an even platform and there's a set of metadata specific to even so for example the location the starting date and the starting time uh the finishing eight and finish the finishing date and finishing time but also for example things like you know description of the event so you can say okay this is a conference happening on blah blah blah with the speakers x and y and z uh similarity we also built a second uh really important application that is called the checkout the checkout UI is not meant for lock managers but really it's meant for the soon to become members it's a way for people to Mint nfts by purchasing them and I say purchasing but in some cases the zfc can be free as long as they're claimable by the end users directly and not only are droppable by the lock managers you can use the checkout UI the checkout UI is a flow that has multiple steps that obviously starts with connecting the wallet and finishes with minting the nft but doing that flow the log manager can configure it so that some metadata is collected as well so if for example if you're organizing an event as we talked about you might want to collect you know information about the attendees the first name last name or email address that is something that you can easily do with the checkout we have a way to configure this with a kind of a no code tool accessible from the dashboard to check out Builder but you can also configure this in code and we'll talk about this a bit later uh finally as I said earlier unlock smart contracts are built in a way that they instantly support um payment using Fiat so using credit cards specifically and you can do that from the dashboard configure things from the dashboard and then users can you know enter their payment info from the checkout UI we also support some interesting mechanisms such as Swap and purchase Swap and purchase is basically a flow on the checkout that user can pick if they don't have the currency of the membership but they have another one that can be swept on the same network on the same chain for the one required by the lock so let's take an example maybe I deploy a lock that is using usdc as its currency on polygon but myself I've actually never bridged usdc token to polygon I only have metic token and polygon it's not a problem the checkout flow will actually include a one-click option for me to swap so pay with my medic let's get swept into usdc into a membership in a single transaction I don't have to leave the UI I can just do that straight from the checkout UI so that's the two tools the dashboard and the checkout that are basically you know UI and front-end that you can use uh to start to get started or also using 3D application we also have built a lot more deliver tooling that are directly useful for you developers to integrate on log into your applications first of all we mentioned this earlier the concept of subgraph so as you know the graph is a protocol for unchain data indexing but beyond that and we have built custom subgraphs for unlocks Micron track these custom subgraph include obviously representation of the locks the smart contract so you can get all of the information from a smart contract at once using the subgraph or multiple locks at once from the subgraph but also the memberships and they're called keys in the context of unlocks you can retrieve all of the members on a given lock in one single transaction I think the subgraph actually has a and it's not an unlocked invitation but it's a sub graph reputation as a maximum of a thousand Keys a thousand items but you can paginate and cannot do one thousand one thousand one thousand and can add things up from there the subgraphs also include what we call receipts which is basically an object that you can use to identify what payments were made uh on on a smart contract another useful developer Patrol that we have introduced is called unlock.js this is a JavaScript in typescript actually library that retrieves data from the chain so you could use that instead of the subgraph but it also includes the ability to trigger transactions to change the state of the chain it is based on ethos.js and by the way you could very well use etheros with a specific log but it does provide a lot of syntactic sugar for things that require would require a lot more manual handling so you should check out unlock.

js if you want to deploy locks for example or if you want to purchase memberships and this is definitely possible again you could very well use existing libraries like etheros or web3js or others in other languages if that's if that's easier for you unlock JS is completely optional another UI that we uh sorry another tool that we built is called the paywall so I mentioned earlier that checkout UI the checkout UI is basically a UI that can be displayed using two mechanisms on one side it can be done as checkout URLs so kind of Standalone web pages that can be open in a new tab for the user or it can be used as part of the paywall which is a JavaScript library that can be embedded inside of any web application the UI will see the paywall obviously supports any Requiem and includes all of the checkout steps this is really useful if in your application you want to for example identify users or allow them to purchase membership without sending them to a different web page that payroll is obviously completely configurable using a Json object so you can customize the you know the the title the image the number of logs that are displayed in the metadata collected for example as I mentioned in the previous step finally a last tool that we have which we think is really useful actually there's a couple more tools but for this presentation I will only clarify these is the concept of hooks as I said earlier the smart contract themselves are programmable you can change the behavior of your membership contract using these hooks there is at this point uh seven hooks on the contract that can all be called uh or or implemented sorry um for your specific lock and change the behavior some of the popular hooks include for example the on key purchase which is basically a hook that gets triggered when someone purchases a membership and one that's about to be minted that hook is really interesting because it allows you to do things like check that the user meets certain criteria so for example are they on a specific allow list if so then yes you can they can complete the purchase automation or nope it will fail the transaction another characteristic of that on purchase Hook is that it includes the ability to customize the price that the user pays based on the search characteristics so if the user is on the loudest of discounted people or if they have entered the discount code at the time of purchase well actually come back to this specific example in the last section of this presentation uh and so please do that step if you're interested in this one last thing I want to mention is existing Integrations unlock um the public lock sorry in near log protocol the public lock the membership contract is just like any other EOC 721 contract it is implementing the base ESC 721 specification including stuff like transfer and everything so it does work with any existing framework like etheros third web through JS webmi etc etc like I mentioned but also any kind of wallet whether it is you know a proper metamask uh Hardware lights obviously but also things like magic or or privy if you want to use these wallet as a service kind of approaches finally unlock has been intuited by different teams inside of their application or with by us inside of the other applications I mentioned magic as an example that's one thing that we put tutorial from under on the docs website stripe that lets you connect with a stripe connect as it's called to receive a payment in crypto super fluid the the streaming protocol uni swap that's for something that I described earlier as the Swap and purchase flow is fast that allows users to download you know iOS Android passes into their phone represents nfts etc etc if you're building an integration into an existing platform please get in touch with the team we'd love to hear from you we'd love to help you build this I want to show you another um kind of overview of the unlock protocol ecosystem so basically these are all applications that either work or have integrity unlocked natively so you have a bunch of protocols so for example lead protocol is a token getting protocol that does encryption you can very well use the unlocked membership to decide whether a specific piece of content should be encrypted or not encrypted using unlock we're actually Superfly Dimension earlier um let's works with live PR she would love to see live peer integration so life here is a video web video protocol a streaming video protocol that you could use to tokengate live streams a bunch of application also use unlock so you mentioned I mean Gail is a good example a coin buys are are two of the uis that you can use as a Creator to deploy or manage rather membership and connect these membership to your optimism um you can use stuff like Beam for video or monetize to to get a notion etc etc we also have a bunch of agencies and friends that are using unlock directly into their application and so you can see some of the names there finally there is a ton of projects that are built on top of unlock uh you can use that list and as a reminder we actually unevitable on a nine different network which means that one of them is missing from that slide but if your mainnet polygon agnosis chain optimism arbitrum cello binance uh Palm is the one that's missing from here um again check our docs we have all of the links with this and by the way on all of these networks we've obviously deployed the corresponding subgraphs or any of the other um protocol sorry smart contract that we would use uh such as the credit card or system etc etc let's move on uh to the next section after this let's jump right into our first um tutorial of the day how to build a token getting application with unlock obviously on the front end only so we're not going to write any smart contract code we're not going to write any solid decode we're only going to focus on building a front-end application using JavaScript Technologies uh let's actually start first look at the basic app that I built this is a regular next JS application I'm starting from there and what I want to achieve is basically have this section here be a members only section so only visible if the user has authenticated first and obviously if they have a membership in their wallet if they don't have a membership in their wallet we will prompt them to purchase one and obviously until we know who the user is we'll act we'll add a mechanism to authentic users so let me actually do a quick show of the application this is the basic app component again vanilla next.js application it has a single page which is uh page here uh in a single content section which has a little bit of content that we want to talk and get let's get started by first installing a couple dependencies here and I want to install um two dependencies specifically I have them here yep here they are wag me which is a JavaScript um actually a react front-end uh sorry a react hook framework for delivery smart contracts and connecting wallet and ethers which is a low level JavaScript library that interacts with the same smartphone tracks in what so I'm gonna just go ahead and install these two things um uh pretty uh pretty basic and then we'll go look at our app here what I want to do first obviously is ADD the dependencies that I just installed so I'm going to just do that at the top of the file and nothing too fancy then I'm going to create what is called a wagme client that is what's going to use um that's what our application is going to use to interact with the wallets and here we see we're pressing this little property Auto connector which is basically allow users who have already connected to stay connected and auto connect when they load the page but then we're also passing a provider the provider is the it's the network component if you want that allows the application that we're building to connect to the blockchain and we're using the RPC endpoint that unlock provides for development purposes you're more than welcome to replace that line specifically with you know Alchemy infur or any of the RPC provider that you usually actually recommend using your own as soon as you hit production we see here with a little Network component here and we're actually going to import that from a config a config file that we have [Music] from uh and icon type today from networking obviously I need to remove that little n from the config file let's go look at the config file there's not much in it for now just the network once we have this obviously the next oop um I think that's what I want to do once you have this we need to wrap the component here inside of um what is called a wagme provider um and this is a you know a react provider for a specific contacts which allows us to connect on the application so that's the basic setup here let's double check but the application is still accessible nothing's changed because we've actually we haven't actually done anything uh from a code perspective let's now look at our index page and that's actually more interesting here what we want to do on that page is obviously uh get started by add the make sure that the user is connected for this we will use uh other components from the workme library so I'm going to just uh you know add these dependencies right away um at the top so first we're going to use use account which allows us to get information about the user it's connected and use connect which lets us connect the user I'm also using this injected connector which is basically a way to retrieve um the um the injected wallet in the web browser so I'm just going to include these two hooks here and I'm going to change the behavior of the application a little bit so that if the user is not connected we will basically add a button to let the user connect which seems pretty straightforward and then we're going to just change one thing for now which is if the user is connected we will show the content and obviously I am missing a little parenthesis here but we'll also add a not just the content but a button to disconnect and since we're going to have two um uh component in the same element we do this and for the disconnection I'm actually going to use another feature from wag me which is this disconnect function here so let's that's pretty much it for now let's go refresh the page I'm already connected because I connected before so what I'm going to do here is disconnect from here so you see that happening here and I'm going to just go from here so if I refresh the application now I only see this connect button obviously because I'm not yet connected I click connect my wallet should have prompted but again it's not connected earlier it does not prompting me to connect but I'm connected and then I can see the content so again fairly straightforward now what's interesting though is like we now have a connected user we know what the user's wallet is and so that's going to allow us to move to the next step which is to add a special component which we'll call basically um you know something like token gate and so let's actually do that I'm going to add a new component token gate dot TSX and this component is going to be fairly simple it is just gonna for now return the children so it's actually not going to need anything for now it is just serving the content um that it has and what we'll do now is actually wrap the content inside of the token gate component I just want to make sure that I'm including this at the top of the file as you can see here and so now the content component is still here but this time we wrap it into the token gate component which will have the logic of making sure the user is connected and has access for now again nothing changed oops uh mismatched between my of the server shows but if I click here I can now still show the content but this time what we have is the way to go through that through this token year component this component is going to be a bit more completed oh actually I forgot to add the props here uh to uh for the children so this component itself is going to be a little bit more complicated in it so we'll let's get get started working with this so here uh we're going to use um again uh um Library the wagme library we're going to use use account which we'll use to retrieve the wallet address but we'll also use this use contract with which is a hook that lets us retrieve some information um about about a smart contract uh what we'll do here is also include another library that we haven't used so far and I'm actually going to install it which is um this component that unlock provides which includes the ABI the API is if you want the API description of what the smart contract has and I forgot to say add here and I have a quote that I need to remove but I'm adding this dependency now it's going to take a couple of seconds to install uh and what's cool about that now is that I'll be able to use this into the code tool so she do this I'm also going to add um actually that's it for now the first step is to then now add a bit of logic here which I'm pasting here so lock address that's going to be another configuration that will come to this and address is going to be the user's address so actually let's retrieve that directly from from the user account component so I'm just going to do const address equals user count and then lock address will actually include this from our config as well which I'm going to just add in a minute here um and so I'm uh and now write it in the config so the lock is the membership contract as we discussed earlier uh and so I'm just gonna add an address here other than the membership contract that I've deployed before and there is no need to uh to go through that process here but know that you can easily do that from the unlock dashboard so let's actually go back to the Token your component we have this interesting hook now that is being called uh and it's going to retrieve some data we'll look at the data in a second um if there's an error this variable is going to be set to true and if it's loading this whatever is going to be set to true and what we're passing as argument is first the lock address the smart contract that is retrieving the API of the public log version 13 and that's the latest version of the protocol that I've used here and the function I'm using here is called balance off this is a way to retrieve leave from the contract if a given address that we're passing is argument has any membership token that is valid it will return zero if the user doesn't have a valid or if it if they have one that's expired and and obviously will return one two three four five depending on how many uh valid membership the user might have so let's actually now add a little bit of logic here obviously uh if the page is loading we don't actually want to show the children right away if there is any kind of error we also don't want to show the content but the last step is if um so if data and actually we'll look at this in a second but equals to zero uh we will show something uh like um you need a token to access this content let's save this and let's actually go to our page uh it already is self refresh uh but you can see here that it says you need a token to access the content because as a matter of fact and I'm just gonna console log the data object here so you can all see what it's in there um it's a so-called big number uh and it's a JavaScript object and this is the acceptable hexadecimal value of zero so at this point I don't have a membership and I cannot see the content so really nothing uh nothing I mean this is what we expected and so I guess the the next step is to add another function here so rather than I should tell the user hey you don't have access uh we'll basically show them something along the lines of um if you don't have access well you need to buy a membership so I'm going to replace this with a button um that's called buy membership and I'm going to add a new checkout function into our components here this function will get started with an empty version of it um so I'm just gonna do nothing in here uh and we'll look at implementing this for this we're going to use another library that the unlocked team provides obviously completely optional but it makes things much easier which is uh the payroll Library the paywall library is basically as the name indicates a quick little paywall that you can add to any web page that allows users to check out or purchase a membership I'm also going to add another useful package which is called the networks package from unlock that has all of the configuration for unlock they're again completely optional but you know it's simplify things greatly if you use it so let's go back now to the code here and let's look at what we're going to put in the checkout so first we're going to do an interesting things a couple interesting things um we're gonna um uh load the provider used by the connector and connector is actually something that we get from user count and that's the object that connects to the user's wallet if you want so we're going to get that provider and then we'll instantiate a paywall object and again that's coming from the unlock Library I'm just going to add this I didn't add that at the top as a as a requirement here and payroll config and networks actually networks we have it from the package that we just installed so I'm going to add that as well and the payroll config will get it from uh you know from the configuration and we'll go at that in a minute um uh as well so I'm just going to replace this line with this in payroll config uh here I'm just gonna copy paste what I have already built before uh and this is basically a Json blob and you can find all of the details on how to build this inside of the unlock documentation that lets you configure how the paywall should behave it should have multiple locks here but in this example just one you could have multiple locks just one here with the lock address on the network number five we're going to skip the recipient step assuming the user is purchasing for themselves and then we're going to put a name from my membership or my app membership maybe seems more accurate here and we're also going to use what we call the specimistic which is basically we're going to require the user to wait for the donation to be mine before uh returning to the application let's go back to the tokenge component now so we have this paywall but that is not enough what we need to add is the ability for the user to load the checkout I'm just going to add this here um and basically a load checkout model it's a leasing function that's going to show a little shortcut model and we'll look at this uh right away so let's actually go to the application you see now I have a button here which is really useful and I still have my console log which makes this a bit messy but it's fine if I click here what's going to happen it's going to load uh you know the checkout model and I have my app membership and the smart contract that I'm using here at the address that I've specified earlier you can verify this is the right address here so this is all great um but uh let's actually um go look at the rest if I close nothing happens here which is uh what's expected here uh result what's interesting is like if there is a result uh we will get inside of that result object a hash uh and what's interesting here is that we want to uh use uh the hash in our UI screen what it is in a second so we're going to use reacts use State and here what we're going to do is basically have a a nicer UI to show the user that it's important uh to wait uh that they are waiting for the donation so even though they might not have a membership if they endless remove this if they have just bought one we are going to wait a couple seconds for the transaction to confirm and then once this gets confirmed hopefully they'll be able to see The Shield all right so we're ready to do the final test on this application and I'm just going to click connect here at this point my wallet is connected which is exactly what I want you to do and I'm going to click the buy membership button uh you see this little uh pop-up shows up and I'm going to click next and this is renewal because I probably I've already purchased the membership before so we'll have to send this transaction we can go see it on the Block Explorer actually and so you can see that a blockchain introduction is uh being minted we'll have to wait a second or two here oh this has been mine we usually wait uh for a couple more blocks inside of unlock so I can close this uh hopefully and you see that now uh my I can access those contents or refresh the page here and click connect you see that I can see the content once my membership is going to have expired which should be um actually you know what let's let's uh no it should be shortly uh you will I will have to renew connect and buy again so this is it for today uh let me stop the video here how to use unlocking smart contracts here we're doing something a bit special which is we're going to implement a hook to modify the behavior of the public clock which is the membership contract uh what we'll want to do here is something actually pretty simple we want to make sure that every time a new membership is sold the price of the next membership goes up a little bit this is usually called a bonding curve and this is a good way to implement what is called a discovery a price Discovery mechanism where basically every time a new membership is being sold the price goes up and at some point you would assume that no more memberships are being sold because the price is now too high so let's go ahead and get started so to do this uh we'll pre-create um a new a new folder uh here which I'm doing uh here oops um okay uh I already have uh well it's actually two example here uh and it will just CD into that one I already have the bonding curve um locally then we'll uh insta will run a common called npx Art hat which installs the hard hats tool sets art hat is one of the popular tool sets in the ethereum world you should definitely consider using it for any project that you use it is not really T2 unlocked in so I'm here just completing the default options um and uh let's say yes we'll install the toolbox here um and wait for a few seconds um when Harner does this it actually does install not only a bunch of dependencies but also creates um a scaffold for a project which I think is gonna be which is going to be very useful for us um as we're going to go uh in into this exercise so let's wait a couple seconds for this to complete uh in the meantime I'm actually just going to open uh the code here and show you what's in here there's actually a contract that is kind of troll dock it's very confusing but it's not really at all with unlock and it will actually remove that file in a second it also has a test which basically tests the behavior of uh the contract that we're going to write it also has um interestingly a configuration file for 100 and we're just actually start looking at this so I see that the dependencies has been installed we'll install two more dependencies um one is the uh unlocked contract package so yarn add unlock protocol package and then we actually have a specific uh unlock plugin for hot hats which we'll install right after this uh just to make sure that everything works as we expect once we have this we need to modify the our files to make sure that they include all of the required setup and so we'll basically have to do uh one simple thing which is that add the unlock plugin here to make sure that it's going to be used and that should be pretty much it so let's actually do yarn run test just for the sake of making sure that everything is working as we expected uh you want to run the hard hat test all right um and uh oh we're missing a bunch of dependencies here which will uh just install uh that's actually uh yarn as this so yarn add uh image work um there's in there quote somewhere uh yarn add here um so it's installing all of these extra dependencies which I use uh by hard hat specifically so let's give it a second for you for this complete but once we're there what we're going to do is basically start by cleaning up that code so we're actually going to use uh we'll rename that rename to maybe a bonding curve uh bonding curve oh break on tight bonding curve hook that's all um and so that means it will pretty uh rename the contract as well to uh bonding curve hook uh and we'll remove pretty much everything that's in it uh the card structure will uh just maybe not even have any um anything in here let's not make it payable because it's actually not going to be useful to be payable and so that's the the most basic version of our of our hooks here uh we'll also look at the test obviously we name that bonding icon type curve hook uh dot JS I think that's fine and we'll go modify the test so um quick indication so as I said we're going to modify the behavior of the lock and we're going to modify the behavior of the lock when a new key a new membership is being purchased for this we actually have to implement two functioning our smart contract one friction is called uh on key uh sorry it's called per key purchase price um and I'll explain in a second what this function does um and then we'll have to implement a second function which is a bit uh a bit uh I mean pretty basic which is the on key purchase function so what the first friction does basically the lock and the membership contract calls that function with the um whether it's the sender of the purchase function uh with the recipient address the referrer and again these are Concepts that are specific to unlock you should check it out in our docs as well as a data argument and then this function is expected to return a key price uh here what we'll do is return what is the default key price so basically we'll make sure that we return the normal key price and I realize I forgot to include the um the interface file for this to create the second function is the one that actually is called and the tail end of the purchase function when um when the purchase has been successfully achieved and that's the one that we'll use here to modify the state of the contract and so to do this we'll just basically do something pretty simple uh which is um go read uh I mean Paul basically create something where we'll have uh the lock that retrieve as the sender of the generation that calls this specific contract and then we'll retrieve the price uh we'll multiply by two here um the price doubles every time uh and recall the update key pricing function uh to change the price so basically with code this function we change the price and obviously we keep the same currency token addresses the currency of the lock which could be an erc20 or the base currency of the chain so our contract is actually pretty much implemented at this point there is not much else to do the next step is obviously to modify the tests so here what we're going to start with is obviously um um use something that is very useful here so actually we'll clean that first because I don't think we need any of that at the top here we actually don't even need the uh that part uh we'll describe this as being the uh the the bonding curve hook uh we'll just remove uh this function because we'll not use that actually we'll remove everything here so again we are in a pretty basic default State and then what we want to do is uh before any of our tests run uh to do something pretty simple which is first to deploy the unlock protocol um and that's going to happen um you know locally and for this we use this function that we get from the r hat plugin so I'm just going to include this uh from hard hat so unlock that deeply protocol then we'll go past a bunch of default arguments uh for the lock um and so here would pass the duration of seven days uh we don't use I mean we use the base currency which we don't need to pass any uh address here or any smartphone currency we set a key price uh um I mean one uh way basically that is um we'll have a limit a number of membership limited to 10 for now and we'll call this um uh the basically um a demo like is the name of the lock so what's going to happen next is we're going to create the lock using again that plugin that we use uh with the right arguments and we'll get hopefully the lock address in the result uh we will also deploy the hook uh so that's actually really important here we'll wait for that to be deployed here we use the default the hard hat way of deploying contract and then we'll do two things the first one is we want to call this set even hooks function on the lock uh this function does something really useful it sets the hooks on a lock and here we're basically only setting the first one which is the purchase hook you can see that we're passing a bunch of zero addresses because there's a lot of other available on key transfer on renewals etc etc so we only want to set the first one for this for this demo here so we passed the address of the on key purchase hook that we that we just deployed the the bonding curve work and we also want to do something uh critical here which is add the hook to be a lock manager let's go back to the code so I explain this a bit more obviously this function not anyone can change the price only what called a lock manager can set the price of a hook and the lock manager is the first person who deploys it or any other address that has been set to be lock manager and here basically we're calling the lock to say Hey you allow the hook uh to be a manager as well so once we've done this part basically our code is is ready and so the next uh and final step is to actually add one test for the sake of this of this demo but you're more than welcome to add more so I'm just going to do this here we're retrieving the list of signers uh we'll make sure that the lock exists isn't set and then we'll make sure that the key price is basically our default from above here we actually could use something uh locked at Key price here that's going to be um oops uh cool let's let's now make a purchase so we are basically calling the purchase function and the lock uh that first um argument is the values and we should actually pass um probably I mean we pass a zero here because it's in yes it's a it's a default currency lock it's okay we could actually pass the actual value so let's actually do this see if that works uh and then we pass the recipients so that's the uh recipient uh address so the person who's going to get the membership nft this is the key manager uh so it's the address that's going to have the transfer rights over the nft that is minted and then this is the referrer which would receive a new referral fee and that one is the data argument here we leave them empty and that's the empty array we pass arrays for each of these values uh so actually that's it's just for the sake of product you do this we pass an empty an array for each of these because you could actually call this function with multiple values to purchase multiple memberships in a single call once this transaction has been executed we'll just verify that the key price has been successfully changed to be now double it was so uh we had a suppressor one gray and now we should have a two-way um that's pretty much it uh code is ready now so so the next step is to run our tests which I'm going to do here right away it compiles up and we have obviously an unshine argument here because uh lock organization exposed so I'm just going to keep that value that I had before I think that's going to make things easier and so this time if I run the command it should compile fine and you see that the test passes so we're done for that exercise you can see that we've created a lock first in the code here we've attached a hook that basically changes the price of the membership every time a new membership has been purchased um just make sure that if you're you know if you want to learn more about this go check out docs we actually have a specific tutorial so the docs are a docs.unlockdashportical.com we have a specific tutorial for how to create uh I mean hooks the one that is on our website is the one to create a password protected purchase so please do check it out it provides more detail around hoax if you need them as well in our docs you can find all of the reference uh for the API in the protocol itself so please use this if you want to start implementing anything with unlock thank you very much um see you soon