ETHGlobal Brussels 🛠️ Build with MetaMask and Linea

[Music] all right eth Brussels 2024 my name is Eric bashard um we are going to get started with the metamask in Linea react Workshop um I can't wait to see everyone uh in Brussels in 2024 in July and we have some great bounties for you for metamask and Linea so unlock secure seamless blockchain experiences with metamask and Linea your gateway to DAP Innovation so we're offering a $5,000 Bounty for daps deployed on Linea and seamlessly integrated into metamask with the metamask SDK uh and snaps 2500 for first place 1,500 for second place and 1,000 for third place so all you really need to do to apply for the Bounty is to either uh build a Dap on Linea and use the metamask SDK for uh react and wagy or web3 on board you can use any of our versions of the metamask SDK in your front end as long as you're deploying on Linea or you can build a metamask snap that reads from and interacts with any type of smart contracts deployed onto Linea so that's all one or the other and what we're going to do here is we're going to cover a workshop that um kind of gets you set up for that first option um if you want to know more about snaps visit metamask docs um you can even contact us uh find us out at the hackathon and we can put you in touch with someone from snaps but we have lots of documentation uh for snaps but today our Workshop is going to be based around metamask SDK in Linea we're going to be building a v react typescript uh demo application and we're going to be using solidity again the metamask SDK infura Foundry cast and we're going to deploy that uh to Linea so I'm going to run through just a couple of quick slides here now my name is Eric bashard I'm the developer relations manager at metamask you can find me on Twitter telegram GitHub lens. eth uh probably some other places too like uh Reddit um at HTP junkie so that's how you can get in contact with me I'll be there with all of my devil colleagues to help you out we'll be there during pretty much the entire hackathon so uh my DMs are always open just reach out to me we pay really close attention to Twitter and telegram while we're there um what is the metamask SDK do it allows your adap to connect to the metamask browser extension or metamask mobile in the demo that we're going to be doing today and I'll talk more about that in just a moment um we are going to be using it in conjunction with a VJs application VM and wag me but there are other options you can use the SDK on its own you can use the SDK with a multiconnection library like web 3 onboard and soon and possibly even before Brussels there might be some other options uh so you can always come and ask us uh about that and we'll you know try and get you squared away but I think most people are going to want to use it with um with wagy and this URL right here is where you're going to get to the page that I'm about to show you once I exit out of these slides and basically it's a GitHub repo there is a read me there during the workshop I'm basically going to be walking through that read me and uh building the workshop from scratch right in front of you so that you get to see every aspect of the entire thing I think that's the best way to wrap our head around the other the around the entire thing in less than 1 hour I'm going to try and keep it less than 1 hour hour um but know that you can always just clone down that app and there will be instructions in that uh read me to you know basically npm install the dependencies deploy your contracts to Foundry uh or with Foundry to Linea testnet and then you know change into the web directory and run npm run Dev and have it working so we'll get to that in just a moment but this is the link that you would want to go to to find those resources to basically download this starter application which you can do whatever you want with but we think it's a great kind of starter application a very minimal contract work in there uh a very basic front end but also working with wagy working with the metamask SDK allowing you to connect to extension or mobile for metamask deploying to Linea using infura using Foundry we asked a lot of developers um you want us to use hard hat or Foundry in the next workshop and it was a resounding Foundry Foundry Foundry we've done workshops in the past with hard hat plus we believe that a lot of the hackers out there have um experience with hard hat more than Foundry but there is a shift going on so we're going to do it with Foundry um so lfg let's go ahead and get started so the page uh that tiny URL that I just showed you will take you to this uh read me this might change a little bit um before Brussels so if it looks a little bit different no worries just know that if you read kind of like the first the beginning of you're going to have clear instructions on either how to build the entire thing from scratch yourself or how to clone down this repo and how to get it deployed to a test net and get it running and then you can use this application kind of as a a reference um to know how to know how all these things work together now some of the hackers might know how to do all this but we want to kind of uh make something uh this Workshop in case there are people out there that are new to some of this maybe it's your first time hacking it eth Global we want to cover all bases so if you're uh if you're well experienced download clone the repo look around at it uh specifically how to uh use wag me with um metamask SDK which is fairly easy but we're going to go on a deep dive for those who want to learn a little bit more um I'm going to pull this page over to the other side of my screen over here uh one thing that we're going to do right when we start the workshop we're going to be using this little CLI tool that my team created this is uh nothing that's supposed to compete with anything else out there it's just a tool that we built to help hackers get started but I think that's also another really interesting thing that you can look at is um we have a CL that you can either pick uh nextjs VJs um to build something with hard hat or um with Foundry and it basically scaffolds out this monor repo for you and gives you a nice starting point with the metamask SDK already wired up um so you if you're entering our Bounty definitely use it but if you want to use it for something else you can rip stuff out of that and make it your own and it's very basic and then we're going to take that a step further and build some stuff into it put uh solidity contracts into the blockchain folder throw some components into the web uh react directory and basically build some stuff so let's go ahead and get started I'm going to move this out of the way and just kind of over to my other screen over here and I'm going to be following um this kind of read me as we go and uh I guess the first thing that we need to do is we need to clone down this repository so let's go ahead and do that first so uh I'm going to have kind of that over to the side just in case um just in case I you need take a look at it but what I want to do next is I really I'm going to create in a separate folder so I want to have that there just in case we need to reference it for anything hopefully we don't hopefully we don't have any problems but what I'm going to do is uh that repo that I just showed you I'm going to show you how I built it from scratch actually me and one of my partners built it from scratch so what we're going to do is we're going to use that CLI that I uh told you about so let's go ahead and uh get the command for creating that application here uh basically using that CLI to scaffold out an application so we're going to use npx and we're going to use this consensus create web 3 template and we're going to call our project my web 3 project it doesn't really matter what we call it um so we're going to go a and do that and now you're going to see that we can choose from uh nextjs web3 starter or react web 3 starter now both of these are going to give you uh a hard hat uh monor repo whereas this one down here is going to give you a Foundry one and hopefully we'll have some of this kind of updated by then we've just built a lot of this stuff so it's not perfect but you might see some different options here when you run this um but know that you have these options and if you want to use Foundry go with the one that is Foundry if you want to use hard hat go with the other two so we'll go ahead and click that and so what that's done is it went ahead and uh scaffolded out a project for us and we can CD into that by doing my uh web 3 project and what I'm going to do is I'm going to CD into that directory and then I'm going to open up in Visual Studio code we'll pull that over and we can get rid of uh this guy here all right uh kill that open up our terminal um me I use NVM so I just want to make sure that I am on the version that I want to be on 20 um great and um so now the next step if we go into our uh package.json here you will see that there is an install open Zeppelin script in here what this is going to do is you know we know that a lot of people uh want to use open Zeppelin whether it's hard hat or Foundry that you're working with a lot of people want to install those open Zeppelin contracts so uh what we're going to do from the root of the project is we're going to run npm run install open Zeppelin this is my first time doing this if I it'll be great because if I run across any little issues I'm going to work them out right here in front of you um I think it's going to be great for for you guys to watch the entire Workshop it shouldn't take long and uh I think you'll just learn quite a bit um one thing I want to do real quick is our CLI sets you up with like you know the basic counter. Sol so we're going to delete that going to move that to the trash um we see our lib directory there um that's where it's got our it copied all of our open Zeppelin contracts into there and the first thing that we want to do is inside this Source directory here we want to create two new files so one of them is going to be called example n.so and the other one that we're going to create is going to be called voting.

o um and I'm going to copy in some basic um solidity code here and we'll walk through it a little bit this course is not to teach you solidity necessarily but we'll walk through kind of a little bit of what these contracts do um and give you kind of the idea that we came up with um one thing I'll tell you is the idea that we came up with for this kind of resource application this demo for you guys is that we wanted it to have a couple of contracts in it we wanted to have a web uh dap that will interact with these contracts and we wanted to cover a few edge cases like you know when I meant an nft or when I vote um I don't want my user to have to hard refresh the react application and all that kind of stuff so um as we go through the web application we'll show you these different things that we built in how we got the uh SDK to work with wagy um the things that we did with the wagm hooks in order to be able to uh I guess refresh or sorry um to be able to read contract and then to be able to recall uh once the transaction is to complete to be able to kind of uh recall that uh function again and get any change data that we have so let's start with the example nft um let's go back to terminal here and let's just walk through these really quickly so it's pretty simple we have the uh ownable so so that um we can basically um uh so the O the ownable contract uh makes it so that we can specify kind of the owner of a specific contract by passing an address in we have the ERC 721 URI storage base 64 so that we can encode uh a basic SVG our nft is an SVG nft because we didn't want to build a workshop that requires you to you know um host files on ipfs and do all that um file management and stuff so by having an SVG uh as the nft it's kind of built into the contract when you mint it um it's there it's onchain yes that is a little bit more costly with gas but uh again this is a demo and it's the easiest way to kind of get right to the meat uh of everything that we want to do so we've got our basic little SVG here it is nothing special it's just a white SVG it prints out uh some text on it and your address and that's about all it does but again this is a demo uh we've got this get tokens by owner so we want to be able to call from the front end and we want to know um how many nfts uh basically does the person with this specific address own how many have they mted and then we also want a safe mint function right so not a whole lot going on here now there's a voting doou uh and what this is um we're not really going to cast a vote but what we're going to do is uh the idea is to make sure that like we have this gated voting system um which we're basically just kind of like uh signing but it's it's a gated kind of voting system so that the user needs to um have an nft first before they can vote now a few of the things that you could do to take these contracts a little bit further is and build in additional functionality um you could build in the the checks to make sure that someone's actually minted an nft before they can vote here in the contract we actually do that on the front end um but the whole point of the demo is just to basically deploy some stuff on to Linea to show you how to do that and then to interact with those contracts so um we didn't want to make the stuff too complex we wanted to do just very very basic um solidity contracts in here all right um one other thing that we need to do now that we have these kind of contracts in place in the blockchain directory is uh from the root directory we we never uh did our dependencies uh we didn't install our dependencies so let's go ahead and do that real quick and while that runs in the background I'm going to move on to the next uh next thing here so uh at this point it looks like we've got our node modules installed uh in the root of the directory in the blockchain directory and also in the site directory uh which is our react application so we're good to go there uh I also want to CD into the blockchain folder and we're going to run uh in in the um read me there is instructions if you don't have Foundry uh on your computer on how to do that uh also I'm using cast so I've stored my my wallet information so that you don't see that like my private key on screen and I've also stored my infura API we have all that instruction in that read me if you want to know how to do that if you're working with other people uh if you're working in front of people and you want to be able to obus skate that stuff there's instructions in there so you might see some of that but just know that we've got everything covered in that read me we're going to run Forge build right here in the blockchain directory and just make sure that our stuff compiles what do we do here let's um back up for a moment here and just make sure that we ran the um npm run install let's do this again I think that's the problem I don't know why this wouldn't have worked but I'm going to run npm run install open Zeppelin again from the rout let's also just run pnpm install again I don't know why that wouldn't have taken and then and we've got the example nft and voting in the source directory here got to love the demo Gods all right so hm maybe we just need to go ahead and deploy our contracts um let's try that really quickly never had this error right here before but I'm going to run Forge create I'm just going to go right into it so Forge create I got my RPC URL I've got my infura API key in here I've got uh my account Eric B- test okay um I just took a pause there uh and I got it working the issue was that I had um a a basically an argument in the ownable right here which shouldn't have been there um because the owner of the contract is set to the deployer by default and we don't need to pass message. sender um how I got that in there U I'm not sure it might have been something I copied over but I have updated the the read me to make sure that you don't copy in any uh code that doesn't work so our contracts have built the uh example nft and the voting doou and I saved you um me Googling and figuring something out real quick and then realizing my uh my typo but let's go ahead and move on so kind of The Next Step that we want to go through here is we want to go ahead and deploy our um our contracts out to Linea so I'm going to you're going to find these commands right in the read me um so let me run Forge create uh we got our RPC URL with our inura API key again I need to fix my name of my my cast wallet name here and then that should be good and let's go and deploy that and it will ask me for a password and then what we're going to do is we're going to create an a EnV file and we're going to put that in uh our packages site so we just click here and do new file. save that and uh we're going to we're going to create a few environment variables here so that we can use throughout our application and we want to copy this deployed 2 address and so we want our front end to be able to use that by using this variable name right here and then we'll do the same for um for the voting application so do Forge create again and let's just make sure that this is all right got the right account name that that time and then you can see at the end um this Constructor args if we look back at our voting um it's it needs an argument for the basically the public address so we'll go and run this that will deploy it got to put the password in [Music] again hope I type that in right all right so we will copy that deployed 2 right here copy and again we'll paste that into our environment variable here and now we can use those throughout our application great so the next step is basically everything with the blockchain uh directory is done we've got our um contracts in here we've deployed them out to Linea uh if you don't have an infura API key you can sign up to uh infura for free and get a free account which allows you to have one project and that will give you an infura API key and then again you can create an alias that's what I've done uh in zsh that equals that API key and then you can set like a wallet up with your private key with cast so that you can just plug those into your Foundry commands and again all of that is covered in the uh read me now when it created the site for us it went ahead and gave us a components connect button and this is actually correct uh for the most part but um I wanted it to look good so I've added a little bit of styling um and yeah I don't think I've added anything other than styling here so I'm just going to copy this in it's going to look very similar but it's going to have some Tailwind Styles in there see those so that it looks pretty on the page um we need to create another component in here so all this is is a connect wallet button and a disconnect wallet button and what we're doing here is um since we have set up a uh we kind of do this for you with our CLI but you could also do this um by hand so we've set up the metamask connector and just added some values in here we've told it that we want to use Linea sepolia um if you want to get Linea sepolia you can go to the infura site and there's a faucet another thing that you can also do is Google has aoia faucet you can probably find other regular seoa faucets and you can go to the l site and Bridge those over to Linea sapoia so uh or you can come up to me in the hackathon and ask me and I'll send you some because I got I got quite a bit of it um so that's pretty much all the configuration we have to do there um our app. TSX I'm sorry our main. TSX is already set up with uh the tan stack react query we're not going to go over this uh too much but I guess what I could tell you kind of about um this this main.

TSX here is uh let me get to it here because I've I've kind of made some notes for this main here we go so um you've got your Imports up there uh basically your wag me provider uh deserialize serialize persist query client provider for from tan stack you've got create sync storage persister so kind of what do these things do the the query client configuration basically creates a query client instance with custom default options so uh GC time sets garbage collection time for the query cache to 24 hours uh Network Mode uses offline first strategy for queries and mutations uh refetch on window Focus disables refetch queries on window Focus it's pretty uh evident retry disable retries for failed queries and then you got your persist configuration this is all kind of stuff you learn when kind of setting up and using tanack query um the key defines basically the key for storing cache data in local storage serialize serializes functions for wagi storage uses window. loal storage for storage uh and de deserialize deserializes uh is a deserialization function for or from wagi um and then basically we're rendering our application here we're setting up our wag me provider which we pass the config uh into it which we got back from our last page we were just on um and then we're using this uh persistence query client provider react context um if you want to know more kind of about the intricacies of like uh tanack query or even like the wag me provider and how all this stuff works open up chat GPT throw in the wagm config throw in the main. TSX and say hey chat jpt explain this to me but um a lot of you probably already know kind of how this stuff works um we also need to create another component here and that component is going to be called we want to do this one uh SVG card and we're going to call that. TSX and this is a pretty simple um component that we're adding here so what this is going to do is uh it is going to uh basically read the contract um it's going to uh we're going to basically pass it an address or a to sorry a token ID and it's going to know kind of which SVG that we own and then we're simply just printing that SVG onto the Page by using the token uh the SVG token ID uh it's fairly simple basically we're able to fetch that uh SVG as it exists uh kind of on the uh blockchain and then with this image tag here we're then um we're then rendering it uh what's up with our u. abis yeah we don't have our ABI in here yet um I'm going to copy in the ABI so you can find the abis inside your blockchain folder uh what I like to do is kind of form format that out a little bit and create uh like an export const in a TS file that's called like nft ab and then paste in all that Json into a Json array um so what I'm going to do is I'm going to create inside the site directory here a new folder called utils it's just what I'm calling it let's see do that again here new folder utils uh and here I will will do a file called um what did I want to call this I think it's nft ABI is what I'm calling it uh abis s.

TS so new file abis s. TS and then I'll just paste that in there it's a very big file again all this Json comes directly from the uh when we compile the contracts out um however what I like to do is just kind of format it because it's all jumbled in as like one big Json file and that's not easy to read and sometimes I want to come in here and just make sure that you know what does a function take and that kind of thing so with that in place let's make sure that it's pointing to the right place we got utils abis let's make sure this is going to the right place uh utility uh nft ABI oopss um abis there we go nft ABI oh no we just need abis like this there we go um isn't that what we had interesting that it wasn't showing up but anyways it's there now um moving along moving along we're we're actually pretty far through this um the next thing that we need to do is we need to uh we need to create our basically our app. TSX and this is the one page that when I'm going to I'm going to come in here and replace all of this with a bunch of code and we're just going to walk through it um really quickly so if we take a look at it from the top you can see we have all of our Imports we've got use account um from wagm um we have connect uh which is from the connect button we have the nft ABI and vote ABI these are the functions coming from the uh smart contract um and then we have use read contract use write contract and use weight for transaction receipt so these uh are all functions the the last ones that I just read these are what we're going to be using to basically read and write to the contract and then the use weight for transaction receipt uh is what we're using to be able to get refetch and ref refresh the basic kind of way to think about this is sometimes whenever I mint an nft and then I want to go and get the nfts that the user owns and display them on the page um often or most of the time if if you don't kind of use use weight for transaction receipt and uh refetch you're going to need to um your your user going to need to refresh the page and then some of the codes going to have to run again and we don't want that we want it to have a more a better user experience um so as we move down to kind of our um our state our local state for this component we have is connected an address from uh use accounts so this is a hook to check connection status and get the user's address again they'll be connected with metamask so this will be available to us uh through the um the wagm hooks we have has voted and set H and set has voted so this is just state to track if the user has voted or not again we're checking that on the front end um if we were building a real application we' want to build all of that into the smart contracts and make those a little bit more uh kind of built out um yeah so use right contract this is what we're going to use to interact with the smart contracts uh to do right operations use weight uh actually use read contract will be obviously to read data from the smart contracts and then use wait for transaction receipt to wait for the transaction to be mined in the case of like uh minting um we also have some variables uh let's see H let's go to the other one here um so when we're using when we're kind of using the use right contract hook we want to be able to get hash um right contract uh is Success uh from use right contract for minting our nfts and voting and then uh we have result right below it uh use uh we're basically calling the return of use weit for transaction receipt and giving it that hash and the result uh holds the transaction receipt result um then we have voted uh when we're using the read contract in order to call basically the voter method um or the uh balance of uh function from the uh from the either the voting contract or for the nft contract [Music] um and then below this we have basically use read contract uh here we are uh getting the tokens by owner so this will return to us um the data that we need in order to know what tokens does a specific uh address hold and then with that we'll be able to kind of iterate over those token IDs get that uh SVG nft and print them out on the page you'll see that we have um this use effect here which uh if they have voted um and we're going to see all this working in just a moment then we're going to set voted to true this is very very basic um but this is the part right here that I would I would have you look at if we did not have this use effect here and if we were not getting refetch and kind of giving it this name I'm giving it a name for each one so re refetch token IDs by owner um we have refetch user balance uh that's that user balance is actually the number of nfts that they have and then this refetch voted to know whether they uh voted or not um if you did not have these and call this refetch upon the result being true uh or or kind of the result being completed for each of these actions then when you m your nft uh once you've Meed your nft and you're allowed to vote kind of this token gated voting once you've voted um or also that we have another button on the page that will add those nfts to your metamask once you finish those operations the page wouldn't refresh and show those things so that's what we're using these for here um beyond that we just have the basic uh mint nft um and vote and of course these are right operations not read operations uh so we're writing to the safe uh the the contract using the saf Min function everybody knows what that is if they've built an nft uh contract before and the has voted function um this final uh method here is for adding an nft so once we have the nfts on the page uh whether we have one two or three no no matter how many you meant um you can with one button click you can add all of those SVG nfts to your metamask and we do that by calling the metamask API wallet watch asset this is something you can only do with metamask for the most part um and we're telling it what kind of an nft it is we're telling it what the address uh of that contract is and we're also giving it the token ID and through all of those things metamask is able to figure out okay here's the nft on chain um it doesn't work on kind of test net but it works on Main net but we still want to have this uh functionality in here uh or I should say it doesn't work on every test net it really depends on how the test Nets are set up but this will work on all main Nets so if you have this deployed to uh production and someone mints an nft your metamask doesn't know about the nft it's the same thing if you kind of uh kind of import some token or you get some token that uh metam mass is know about and you need to import that token um wallet watch asset is the same API call that you do that with but you can do it with tokens uh or nfts uh this this function works for both of those and then beyond that we just have our connect uh button we have our mint button we have our add nft button we have our vote button these are the things that call those functions H and then finally we'll be iterating over those um token IDs by owner and mapping them out and then printing the SVG for each one of them so with all this in place let's stop uh kind of messing around um let's see do I need to do anything else here one thing I'm going to do really quickly is in my ts config um I'm going to update this and so what we need to do here is we need to add the paths right so we added this paths so this just sets up an alias that I can use for importing stuff from the blockchain out folder and then um this is just kind of mapping uh source to uh so that we could let's see um how do I explain this so the uh the purpose for include uh this kind of include array that we see here that we just added or we modified uh this include array specifies the specifies the files and directories that typescript should include in the compilation process so this is just basic um typescript configuration stuff if you have never seen that before and about the only thing left that I want to do here is I want to update I want to I want to update my uh get ignore file too because I probably want to potentially upload this to GitHub and um let's not look at our node modules get that out of there but we definitely don't want to upload our EnV um especially if you do more with your project and you put more environment variables there and we don't want that pnpm lock. yaml going up to the um to GitHub because that's going to change anytime that you update your dependencies but with all that what we can do now is we can kind of CD out of this blockchain directory uh oops go back into my web 3 project uh yeah that's what it's called and then from here we can uh CD into uh packages site and now we can run npm run Dev and we can cross our fingers and hope that all of the code that we copied in actually works we're coming up on 40 minutes here hopefully we can get through this uh with no more issues um again the read me will have everything in there will be nice and neat um and you can just poke around this code I really really suggest that if you're new uh if there's something you don't understand um create an open AI account use chat gbt copy the thing that you don't understand explain why you don't understand it um this will accelerate your process of being able to rapidly build things and understand things so we're going to do connect wallet and what you're seeing here uh this is different than when you connect when you use a connect uh wallet button from most apps right usually when you hit connect it opens up metamask right away but it's telling us here that we can connect with mobile um so what I could do is I could open up my metamask mobile and let's go go ahead and try that really quickly here um so I got metamask uh open and I'm going to hit the little QR code uh feature here and I'm going to scan it and then it's going to ask me if I want to connect I'm going to hit yes or I'm going to hit connect and then you can see here that we are now connected um and so we could start doing things um we can disconnect also I don't know why that said already voted but anyway so um so the next thing that we can do is uh instead of connecting with metamask mobile we could also connect just with the desktop what does it say already voted down there this might be a small little uh issue that I need to uh with my conditional rendering but I'll fix that so we're connected and the first thing that we want to do is be able to Mint that nft so we're going to go ahead and call the mint function here and we're going to hit confirm and boom it mints our nft um yeah I don't know why that said already voted there it's probably my Logic for rendering out the buttons I just completed this whole Workshop today so bear with me but I probably my logic was probably messed up probably something like a like an exclamation point or something in the wrong place um cool so now that we've mted we have the opportunity to vote right um so what I want to do now um well before we vote let's go ahead and add the nft to metamask so what you see here um now this normally would be this nft here um what happens on test Nets is uh I don't know exactly why but on I've I've seen it on Linea sapoia um it used to work on Linea gly it doesn't work on I think Mumbai something with the way that they kind of um I don't know uh the the the data and the the nfts that kind of you store on the test net for some reason metamask isn't able to read them because the way that the test net is managed differently than main net but know that this if you added the nft it actually is still adding it it's just not adding the picture of it it's not it's it's for some reason not able to get that picture um but now if I were to go to metamask and I were go to nfts I would be able to see these example nfts here that I've added and if it was on Main net it would show up if this was some elaborate design you would see that design um but just know that that's what that button does and it doesn't really matter if it works on testnet or not because the code that you need to do that is in the application and that's the important part the next part is vote so we're going to go ahead and cast a vote and uh all this really does is just record that you have voted we haven't put any options like you know this could be like voting for you know the president of a DA or uh voting on whether or not to increase Budget on something it could be anything voting on you know uh who's hot or not whatever um but all we're kind of doing is when we hit confirm here we're just kind of writing to that voting contract and letting it know that the person uh one with this nft and this address uh casted this vote and then we have a mapping in there so that we know uh if they voted or not and as you can see here it says already voted it won't let you vote again um we could take a look really quickly at the code and see if we can figure out why um it was saying not already voted before so let's just check this out so if has voted if no sorry if not has voted and the user balance is more than zero then we want to B so if they have the nft because user balance is more than zero that's what users balance means um that they have you know it's the number of nfts that they have probably could have named it better than that um and if not has voted then we're going to show the button to vote um and for some reason that wasn't true for user balance wasn't more than zero oh I see so what if we were to do this we would have to redeploy the contract again um no well I'll tell you what um I'm pretty sure I can of know why this is uh it was showing already voted here even when we hadn't voted yet the good thing is that it wasn't showing the button um because these two things weren't both uh true and uh if we need to update any little pieces of code um remember that we're recording this Workshop one month before eth Brussels they have these you know strict uh guidelines for us to get these uh workshops in so if there are any small little changes to like like one line of the code rest assured that in the readme uh it will be right and the application will work perfectly um that's a very small thing but I think we've covered quite a bit so we uh used the CLI to generate out scaffold out a basically a mono repo and I think it that's kind of the one thing that you can take away from this and be like that's really cool um I don't care about the you know this contract thing that you set up I know how to to kind of call contracts and work with wagm and all this kind of stuff um but hey using that CLI to scaffold out that entire mono repo really quickly that's pretty cool I could use that as I get started hacking if you can just take that away from this Workshop I think that's great um and then um other than that pulling this down onto your computer at the hackathon so that you have a resource to show how some of this stuff works if you're not familiar with it it's great to have working code uh and maybe even running that trying to run it and make sure make sure it all runs on your machine so that if you want to uh kind of use it as a reference uh and and know how to write a certain line of code or whatever you know how to do that and you know how to and more you know how to use kind of infura with Linea with metamask SDK all in a react application with Foundry uh deploy contracts and use it with VM and wag me like that's uh hopefully that's super helpful for you um that's uh how we're going to wrap up this Workshop I hope that you got something out of it um please come and see me on the floor and if you see me at uh e Global and you've checked out the workshop either you've checked out the repo or you've watched uh to this video please come say hi to me um we take uh contributions to it uh we'll probably have done a lot more work by then uh on the workshop so um we're really happy to bring this to you and uh good luck hacking and I hope you all build really amazing stuff and win lots and lots of um ethereum so uh thank you so much and see you at eth global Brussels uh next month [Music]