what we're going to be building is a claimable erc20 airdrop now this is going to be our application that we're going to build it starts off with just a connect wallet button so when we connect our wallet here what it will do is don't mind this top part here this is the part of the video where we're going to create a Merkel tree or a merel tree route which is going to be used for our allow list but this bottom section here this is going to be the important part this is where we're going to create a claimable erc20 so instead of us airdropping tokens directly to hundreds or thousands of wallets we can put them on an allow list and say hey only these wallets can claim these tokens and what we'll be able to do is create an application like this where a user can come in and if they can claim their tokens here they can just claim their airdrop now the reason you may want to do it this way and create a claimable airdrop is the claimer is going to be paying for the gas to claim the token normally if you airdrop stuff to other people's wallets you're in charge of paying for all the gas to distribute those tokens out so this way a user claiming it and only the people who claim it will have to pay for the gas and they'll be paying it on their own behalf so we're going to pay that gas here this quick airdrop demo we're going to get a th000 tokens so we'll see right here once this transaction goes through we'll see our token balance increase there you go success and now we have claimed our th tokens if I try to claim the airdrop again you can see not eligible for airdrop or we have already claimed now I can switch over to a wallet that is not on our allow list right here this is actually the wallet that is holding the tokens uh that's why it has so much over here but this isn't on our allow list to claim the airdrop so if I click on it it says I'm not eligible for the airdrop or I have already claimed the airdrop so again it's knowing what wallets can and cannot claim so we'll switch back to a wallet one more time that is eligible for it so this wallet is eligible it hasn't claimed it yet you can see here the token balance is zero I'm going to hit claim airdrop there we go we get the transaction where we have to pay for the gas we'll confirm it and then again this wallet because it was on the allow list can now claim the token there we go we have success and we should see it update to 1,000 tokens here and if I try it again you can see right there not eligible and already claimed now before we get into building out this airdrop the first thing we're going to do we're just going to create a little application within our app here to generate a merco tree root hash now a merot tree is going to be what we're going to be using to store the allow list on chain now what is a Merkel tree so if you don't know what a merco tree is we have a little diagram here essentially what we're going to have is a list of addresses and the amounts that they can claim right and that's going to be our data blocks down here so each one of these blocks is going to have a wallet address and the max claimable amount that that wallet can claim now what happens in a Merkel tree is that address and amount will then be hashed and then we will get a hash here and we call that a leaf and each one of those addresses and amounts will be hashed here and then two of the hashes next to each other will be hashed together to create another hash and so on and so on and this process keeps repeating until we're left with one hash for everything so again these two get hashed to this these two get hashed to here these two get hash and we keep going up and up up and up the essential tree until we get to the very top when there's only one hash left and that is going to be our root hash for our allow list now why would you use a merco tree so if you tried to store all the wallet addresses that you needed for an airdrop on your contract or something you might have you might have five wallet addresses which could be okay but what if you have a thousand wallet addresses or what if you have a couple thousand wallet addresses to store all of those wallet add addresses is going to be a lot to put onto a contract so what you can do is use this Merkel tree concept here and all you need to do is store the top hash and what you'll be able to do from there is reverse it and go down the tree and then be able to pick out the data blocks that are at the very bottom which contain the wallet address and the amount that they can claim hey everyone Sean watas here back with another video and in today's tutorial video we're going to be building a claimable erc20 air drop and what we're going to be doing is building an application where a user can go onto it connect their wallet and then claim an airdrop for a specific amount now you can do this publicly where anyone can go on to your application and claim the token or you can create an allow list and in order to do this we're going to need to generate something called a Merkel tree which will allow us to specify what wallets can claim the airdrop along with the amount that they can claim so an overview of what we're going to be covering and building in this tutorial we're first going to start off by building out just a little application to generate our Merkel tree which we're going to use for again our erc20 claimable airdrop then we're going to deploy our smart contracts from our airdrop contract to our erc20 token that we are going to airdrop and then finally we'll build out the application where a user again can go onto our app connect their wallet and then claim the airdrop token and with all of that being covered let's jump on our computer here and get started so that's what we're going to build first we're going to build this Merkel tree um root generator here and this is just going to generate us a Merkel root and this here is the final hash of our allow list that we're going to be able to again store in our contract when we deploy our airdrop contract and our token contract so I'm going to create a new project here I'm going to open up my terminal I'm going to run MPX third web create app we're going to name this project uh erc20 airdrop and I'm going to use nextjs and typescript for this and once that's done we'll just change into our erc20 airdrop we open this up in our code editor and what we're going to do here is head into our Pages folder and go to our index. TSX page now this is some boilerplate code that you're going to get when you create a project with third web I'm just going to delete everything within this div tag that has the class name of container so all of this here I'm just going to select all of it and and remove it here I'm also going to just remove this image import cuz we won't need that and right up here I'm going to add a connect wallet button so we add a connect wallet button there and we'll just run this really quick so let me open up my terminal here and run yarn Dev open this up here and we should see a connect wallet button here there we go we have a connect wallet button opens that up I'm just going to add some quick styling here to my project so I'm going to open up my files go to Styles go to this home. module. CSS here and under the containers class here I'm going to just add a display flex and then Flex Direction column Center everything oops and then add a Min height of 100% of the view height and all this is going to do is Center our button and everything into the middle of our screen here so again we have a connect wallet button we can connect our wallet here and we can see that we are connected now with our metamask wallet so again the first thing we want to do is create that just a little visual app here that we can generate uh our merco tree route now you don't need to create it visually you can just do it right inside here uh but I figure we can do um a visual way just in case you want to maybe create your own merco root generator for your third web contracts you can do that along with this so first thing we're going to need is an allow list so an allow list is again the list of addresses that you want to allow to claim the airdrop from our application so this is going to be an array of of those addresses um but what we're going to do is provide it with an object of an address so we need an address which is going to be our wallet address and then we're going to have another one here which is going to be uh Max claimable and this is going to be the number of Max claimable tokens that this address can claim so for this example we're just going to say that they can we'll just say 100 right these addresses can claim 100 tokens so I have a couple addresses here that I'm going to put in so just put one in here we'll copy this put one down here I got another address here just change the address there we go so this is our allow lless rate and of course this can be you know however much addresses you are allowing to create uh or to claim your token in so what I'm going to do here is create a state variable for our merco rout and we're going to use a use State here and set it just to a blank uh actually we'll set this to no and then we'll say string or no and this will cod our um root hash which is what we're going to need to provide to our airdrop contract so now let's gener uh let's create a function here that is going to generate that for us so we're just going to call this generate Merkel we'll say generate Merkel tree this will be a async function and we're going to create a variable here called Merkle tree and we're going to use a function called create Merkle tree from allow list and what we're going to do is provide it with our allow list that we created up here and this is just a function here from third web that is going to do all the magic for us in creating a Merkel tree and then we're just going to set the Merkel root here to the Merkel tree and we're going to use do get hex root here and this is going to give us the root of the merel tree in a hex format and then down here we're just going to create a div and within that div we'll create another div with some styling here so let me just grab a styling for just like a card so we'll add it in there and then in that we'll give it a title of create Merkle tree and then we're going to add a button here and it say generate and that button will have the onclick to our function and we'll give it uh some styling here I'm just going to change that styling that was provided we'll style it just like that and then below that button we're going to say uh if we have a merco root then we'll display what that is so in this case we're going to display a Merkel root we'll say hash and then that's going to be whatever our merco route is so again all we're doing is we're using the create Merkel tree from allow list function from third web here which is going to take our allow list and generate our Merkel tree for us then we're going to get the hex root from that Merkel tree and set that as our merco root here and then we'll just have a little button that runs that and we'll display our merco root come back to our application here you can see we now have this generate merco rout we have our connect wallet button but if we hit generate you can see here that we are created a root hash here and this root hash is again what we're going to provide our smart contract to and this from this hash we'll be able to get all the wallet addresses and everything that are stored inside of it along with the amount that they're able to claim so this here is going to be a very important thing because again we're going to need that for our smart contract so the next thing we're going to do is deploy all of our smart contracts that we need to make this airdrop happen so I'm going to come here to my third web dashboard I have connected my wallet we're under the contracts Tab and I'm going to hit deploy contract and the first contract we're going to deploy is our token contract so you can go through here it's normally in the popular section but you can hit view all and it should be in there as well but you're going to look for the token contract which is an ER 20 standard uh token contract here and we're going to click into it we're going to hit deploy now we're going to name this here so we'll just call this our airdrop token and you can name your token whatever you want to name it you can give a symbol here we'll just call it airdrop description image fill out the parameters for your contract in here down at the bottom under Network and chain you can select the dropdown and from here you can select any evm compatible network or blockchain that you want to deploy your contract to for this tutorial I'm just going to use the Mumbai testnet here and then I'm going to hit deploy now we'll get a transaction that comes up we just need to pay for the gas to deploy this contract so I'll hit confirm we'll get a signature request Here sign this to add it to your third web dashboard so we'll just hit sign cool and once we have that we'll be brought to our contract dashboard here you can see our airdrop token now we need to Mint some tokens uh if we go to the tokens tab here on the left hand navigation you'll see that we don't have any airdrop tokens here but you can see we have a mint button so we're going to hit mint and you can put in whatever supply of tokens you want to Mint to the contract so or mint to your wallet so I'll just say 1 million tokens here will mint the token we'll get a transaction here we just need to confirm it to Mint our million tokens and there you go you can see we have a million tokens uh supply of this airdrop token uh it all 1 million is currently owned by the deployer wallet here so this wallet that we deploy the contract to and mined the tokens it holds all 1 million of the tokens right now next thing we're going to do is deploy another contract so we're going to go back to our contracts tab here and we're going to deploy a new contract and we're going to scroll all the way down to our airdrop section now airdrops here what we're going to look for is the airdrop erc2 the claimable version again this is going to be where people can go to the contract or to your application to claim the airdrop airdrop erc20 here is you're going to provide it with the addresses and be able to send it yourself so we want the claimable version here so we're going to make sure we select that and then we're going to hit deploy now now this is going to take a few things that we need to fill out here for our contract parameters the first thing here is the token owner so this is the address that holds the tokens so if we go back to our airdrop uh token here remember this airdrop token all of it is held by the wallet that we deployed it with so we're going to copy that contract address we're going to come back here we're going to paste that in next we need the contract address of the airdrop token we'll come back to our token contract here we'll copy that address come back in here and then we'll put the airdrop token contract address next is going to be the airdrop amount so this is how much tokens we're actually going to be airdropping or should be claim aable now you can make it all 1 million tokens maybe we only want to make it 100,000 of the million tokens now this value does need to be in way so we have a little converter here um we'll drop a link down to this in the description or any type of way converter you can think of you can use uh so basically ether these are the numbers that we're normally used to seeing like 0.1 or um1 2 3 45 this is is what we normally see when we interact with like values and everything on the blockchain but when we provide it to Smart contracts we have to provide it in and convert it to a way which uh what we'll do here is say we want to do 100,000 right so let's say 100,000 tokens here we're going to take this value here come back to our contract parameters and we're going to give it that amount there the next thing is the expiration timestamp now this expiration should be converted into a date time in to uh seconds so this is going to be whenever you want the airdrop to stop right you want to set a end point for how long um up to a point where people can claim these tokens so we'll come to another converter here um this one here we can just put in the month day year and time and everything you can select the time zone and then you just have to update the time stamp and you'll get the time stamp right over here so we'll just copy that we'll come back here we'll paste in the expiration Tim stamp now these next two uh first one is the open claim limit per wallet now open claim limit this is going to be if you want this to be publicly open to anyone so maybe you want to set a claim for everyone but maybe give it a lower amount so maybe people anyone if you're not on the allow list can claim 10 tokens versus if you are on the allow list you can uh claim a 100 tokens uh you can do that but in this case maybe we want to make it so only people on the allow list can claim the tokens so if that is the what you're looking to do you're going to set this to zero right the open claim should be zero and it will be override by the allow list uh depending on the amount that you can claim there so we're going to leave this at zero so only people on our allow list will be able to claim our airdrop token and then finally we need to provide the allow lless merco route so coming back to our application here this right here this is our allow lless merco rout so we'll copy that come back in here paste that in and again the networking chain you want to make sure it's on the same network and chain that you deployed your tokens to so for me I deployed it to Mumbai I'm going to select the same thing and then I'm going to hit deploy now weit confirm then we're going to sign the signature request and add it to our dashboard once that is added to our dashboard we have now our airdrop contract address here uh we're going to copy this quick head back to our token contract and for our token contract we're going to go to the Explorer tab here on the left and we need to give approval to that airdrop contract to actually be able to send and transfer these tokens to the specific wallets so we're going to go under the right functions here we're going to go to approve and then we're going to approve our airdrop contract the ability to transfer these tokens we're going to give it the value again this has to be in way so so we'll come back here again we're allowing 100,000 so we'll set the limit to 100,000 then we're going to execute that you can see here we're sending the spending cap request for our airdrop token to 100,000 we'll hit next and then we'll approve that transaction and there you have it uh we have now approved our airdrop contract to be able to distribute out these tokens so again we have our airdrop token contract this is the actual token that's getting aird dropped and claimed and then we have have our airdrop contract which is going to be the contract that actually distributes out these tokens and verifies if the user is on the allow list or not so now let's go and build our application out so I'm going to come back to our code editor here and we're going to do a few things here so first we're going to double check and make sure that our um in order to show our claim we have a wallet connected and we can do that by creating a address variable here and then we'll just use the use address Hook from third web and this gives us back the connected wallet address or it gives us back undefined if there is no wallet connected so with that we can say hey don't show any of this information unless we actually have a wallet connected to our application so right under our connect wallet we'll say address and we'll require that uh there is an address in a wallet connected in order to display our app here so under this uh merel we'll just take this div actually we'll make another card we get rid of the margins here and in this bottom div here this is where we're going to create our airdrop so we're going to create uh let's just scroll down a little bit H1 tag we'll just say um ERC 20 airdrop and then under that we will show one the token balance so we'll say a token balance uh in order to get the token balance we're going to come up to the top here and we're going to check the token balance of our token contract based on the connected wallet here so we're going to create a contract called a token contract and we're going to get an instance of our contract using the used contract Hook from third web and what we're going to do is get our token contract here so not the air drop but our airdrop token we'll copy that we'll paste that here in our contract then we'll use another hook here that will get us the token balance so we're going to get data back we'll name this token balance and we're going to use the use token balance Hook from third web and this is going to need our contract which is going to be our token contract here and then the address or the wallet address that we want to check the balance for which is going to be the address which we are getting right over here that's going to give us back our token balance so if we come down here and for our token balance we can then now display our token balance and if we can and within our token balance we have a display value this converts the value of the token balance uh one into a uh into ethers so it converts it from the wave value to ethers and then it also changes it to a string that we can play over here so we save that come back to our app you can see nothing shows now cuz we said we have to have a wallet connected in order to display it so we'll connect our metamask wallet and there you go we have our metamask wallet connected we now have our ERC uh 20 airdrop here um we have showing our token balance which it isn't showing our token balance here if we look here um could not fetch by C contract got it uh we missed one step here so let's come back to our code editor uh let's set up our Third Way project here so coming back to our files under the pages folder let's go to theore app. TSX file uh we need to configure our Third Way provider here so we need to provide it with the active chain uh by default it set to ethereum uh I'm going to switch it to Mumbai cuz that's the chain that I deployed the contracts to You'll switch this over to the chain that you deployed your contracts to we'll also set up our client ID which is is uh getting the client ID or third web API key from this environment variable here called next public template client ID so if we come over to our files there is this env. example file we're going to rename this Tov and then I'm going to get my client ID or my API key from third web so on the top navigation if you head to the settings tab you can create your API key now if if you haven't created an thway API key before we'll drop a link down in the description below to some tutorials and guides on how to set it up and how to create one I'm just going to copy my API key right here paste it in here and now our app should be ready to go so coming back to our app here there you go you can see this is the wallet that is um my deployment wallet so it has all 1 million of the tokens here but if I switch it here let's switch to another wallet there you go you can see the token balance is zero for this wallet so come back to our code edor here we'll close out that we don't need it anymore next thing we're going to do is create a button to claim our tokens or our claim our airdrop tokens so I'm going to create a web 3 button which is a UI component from third web and we're going to call this button uh or have its text say claim airdrop and the web 3 button takes two things um or requires at least two things the first thing is the contract address that the button is going to interact with so we can come back here get our airdrop contract so come back here to our airdrop contract copy that come back here paste that in and then the second thing it needs is the action so what is this button actually going to call or do with that contract now we're going to create a async function here and on our contract we are going to call a specific function so contract we're going to call and what we're going to be able to do is one name the function name that we're going to call and pass it any of the arguments that we need to uh provide that function so coming back to our contract here so back to the airdrop contract if we come to the Explorer tab here you can see under our right functions we have a claim function and this is going to be the function that we're going to call in order for a user to claim the airdrop tokens uh that they need to claim so this claim function here takes four arguments here the receiver address the quantity in which they are going to claim their proof the proof is going to be a hash uh basically remember we were talking about the merco tree the proof is going to be the hash that proves that basically matches and proves that the address matches the address that is on the allow list and then the proof uh Max quantity for the wallet so quantity and the max quantity can be the same but we're going to need to generate this proof here from the connected wallet address and we're going to have to make sure that that proof is allowed to is on the Merkel tree that wallet address is from our allow list and that it can claim the tokens so coming back here uh we're going to call we're going to call the function so again we need to name the function which is going to be claim now we're going to give it an array of the arguments here so the first one uh if we come back here is our receiver so that's going to be our address the second one here this is going to be the quantity um along with the last one here so quantity and this is again going to have to be in way uh but we can use uh utils do parse ethers and we can give it um 100 because again let's actually let's import this here import utils from ethers and utils part ether we can give it and provide it a string of the number that we know we're going to be using which is 100 and then it'll turn convert it into wave for us and submit that when it calls this function here next is going to be if we look here is our proof which is going to be an array of our uh proof hash so for now we'll just uh give it an empty array and then finally the last one is the proof or the max quantity for wallet so we're just going to take the same amount here the 100 and paste it in there so this is going to be again our button to claim our airdrop so when a user clicks on this it's going to interact with our contract call the claim function and provide all the arguments here for it now that one argument we need to get is the proof for the wallet address that is connected to our application so coming up here let's see under our generate the Merkel tree we're going to create a new function called get user oops get user prooof this is going to be a async function it's going to take an address which is going to be our address of the connected wallet and in order to get a proof we're first going to need our merco tree so we'll just do the same thing like we did in this function here we're going to create a merco tree with our allow list next we're going to create a leaf and this is leaf is going to be the data point that we're trying to prove Mo exist in our merco tree so um it's going to be our address which is going to be the address of the connected wallet and then we have Max claimable which we have set to 100 so we're just going to give it 100 there and from there we're now going to generate a proof for this so we're going to provide it with a we're going to get back a proof which is uh we're going to await and we're going to get uh proof for allow lless entry and we're going to provide it with our Merkel tree and our leaf and what this is going to do is generate us a proof we're going to then turn that into a hash so we're going to say proof hash here and this we're going to uh add 0x to the front CU it just gives us the end part of the hash we're going to get our proof we're going to get the first item back in our proof uh which is going to give us back the data and then we're going to put two string here and make sure that it is of type hex and that will give us back a full proof hash uh which we can then return the proof hash here and provide that proof hash into our argument uh and this should prove if a wallet can claim or not so what we'll do here is down in our web 3 button right here in this um array here that we're going to provide our proof in we're going to await and get user proof and provide it the address of the connected wallet with that on top of the web 3 button we can also add a few more things we can say on error uh we can just say we can create an alert here that says not eligible for airdrop or you already claimed and then we can also say like on success and we can uh alert saying that the airdrop has been claimed and that does it for our application here so if we come back to our app and right now I'm connected with one of the wallets that is on the allow list so if I hit claim airdrop I'll get a transaction here that allows me to confirm and pay for the gas and the tokens will be aird dropped to me I'm just going to reject this really quick if I change this to a wallet that does is not on the airdrop or the allow list so I change it to a wallet address that I know is not on our allow list and I tried to claim the aird drop you can see it is not eligible for the aird drop or I have already claimed the airdrop here so let's change back to that first wallet first next continue connect and let's test this out so let's claim our aird drop here again we know that this is on the allow list so we're going to hit confirm here pay for the gas uh I believe we had set this to claim 100 tokens so we should see our token balance increase to 100 and we should see that little alert text box come up saying right there aird drop has been claimed and yep we claimed 100 tokens right over here now if I tried to claim the aird drop again I already claimed the max amount so I'm not eligible for the aird drop anymore or I already claimed it which I already did so right here this is another wallet that is on our list ending in f72 so if we come right here you can see this is the second wallet right here f72 and we can claim 100 tokens so right over here I'm going to claim the airdrop it should give us a transaction that we can uh confirm right over here confirm that pay for the gas and again we should be able to claim it because we are allow listed this and there you go airdrop was claimed we should see this increase to 100 and there you go we now have claimed this and we can't claim it again cuz we already claimed our airdrop so there you have it we built our very own claimable erc20 airdrop again this is a great way where you can create an allow listed claim you don't need to pay for the gas to airdrop tokens to 100 or a th000 users you can have them come over to your application claim it for themselves and they pay for their gas on their behalf we also went over how to create an allow lless Merkel tree and get the root hash for your Merkel tree and allow list only specific wallets to be able to claim now a claimable airdrop erc20 contract you can also make open to the public again you just have to set that open claimable to whatever amount you want people to be able to claim but if you want to allow list it again you can set that to zero and it will be overridden with the allow list but again I hope you folks enjoyed this video you found some value in it if you did give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more tutorial videos just like this and if you need any help or support we'll drop a link down in the description below to our support team you can open up a ticket ask any questions and they'll be happy to help you out but again I hope you folks enjoyed this video and until next time see you [Music] [Applause] [Music]
