How to build web3 frontends and interact with any smart contract - web3 development

hey everyone Shan Wata here back with another video and in today's tutorial video we're going to show you how you can deploy any smart contract and build a frontend application for it using third web so an overview of what we're going to be covering in this video we're actually going to deploy a smart contract using remix app we'll then take that contract import it into third web and then use third web's SDK and we'll show you how easy it is to start interacting with any smart contract and how you can build a front-end application for it but before we get into it let's take a look at a quick demo of a simple application that we're going to be building for this tutorial so right here on my computer let me just uh sign out here uh we have a little application here uh this number here is getting pulled from a smart contract uh we'll have a connect wallet button so if we connect we can just connect like our metamask wallet or something and once we have a wallet connected we can then put in a new number here so uh let's just actually put 5 4 3 2 1 and we can set the new value and and this will prompt up a metamask transaction here we just need to confirm the transaction cuz we are writing this new value to the smart contract and that will again execute and call our function from our smart contract setting the value to the number that we inputed right over here so this again is going to be a smart contract that we are going to deploy through a remix and what we're going to then be able to do is import that contract into third web and start using third SDK to build out an application for it so the great thing with third webs SDK is that we can use any smart contract and we can interact with any smart contract on the blockchain it doesn't need to be a third web deployed or a third web pre-built contract in order to use the third web SDK and the first thing we'll do is head on over to remix We'll add a link down into the description below but if you've ever used the remix ID here uh this basically allows you to create solidity smart contracts and deploy it uh right here in your browser so when you first get to remix you'll have uh in the top left here in your file explorer you'll have a folder here called contracts and you'll have some pre-built contracts here already or you can create a new file and create your very own solidity contract but for this tutorial purpose we're just going to select the storage contract here and you can see right over here in the right window uh we have the contract or the solidity file here we have a contract called storage uh let me just uh zoom in just a little bit here so we have a contract called storage uh we have a variable here called number which is going to store a uent 256 and we have two functions here we have a store function which is going to be a public function which is going to then take the number that we give it and set the number variable to that number down here we have a retrieve function which is just going to be a view function it returns us a un went 256 and all that's going to do is return us the number or the value that we have stored in our number variable so this is a very simple uh storage smart contract but this is what we'll use for our tutorial again you can create whatever type of smart contract you want right over here and if we come onto the left hand navigation here we're going to first come here and compile our storage then we'll come down to the deploy and run transaction here for our environment we're going to select our injected provider I'm going to select my metamask account and you can see here this is pulling up my metamask wallet uh I'm on the Mumbai Network so whatever your you can open up your metamask here whatever Network you have selected here in your metamask is going to be the network that you deploy your smart contract to you can see here we have 5.2 medic that is what's pulling up right over here and all we're going to do is Select our storage contract so our storage contract and we're just going to hit deploy you can see down here we'll get a transaction that pops up uh we just need to confirm this this is us paying the gas to deploy the smart contract we'll hit confirm if you look down here you'll see that we are now deploying our contract we'll give it a moment there you go you can see that we have our transaction here and we now have under this deployed contract section our storage contract so we deployed our own contract we can actually copy this if we take a look at it um on a block Explorer I'm just going to go to uh poly scan on the Mumbai test net since this is the blockchain that I deployed my contract to um I copied the contract address so right over here you can copy the contract address we'll paste it in right in here to the Explorer we can search you can see that this is my contract here we had just did this 40 seconds ago uh which is we deployed the contract and you can even see here that the contract is also verified uh which is what we're going to need in order to import this into third web so we deployed our very own smart contract using remix you can see here that we can view the smart contract on polycan or whatever block Explorer for the networker chain you're using next we're going to head on over to third web you can sign in by connecting your wallet in the top right here we're going to head on over to the contracts Tab and then you're going to see this button here so deploy contract will bring you to the pre-built contracts that third web has to offer but if you come back one you can have import you'll see a button here that says import contract and what we need to do here is select the network that our contract is on and then paste the contract address we'll hit import you can see here that it is now importing our contract uh this can take a few minutes so we'll come right back uh once this is done so once that Imports you'll get a popup here for a signature request this is if you want to add this and access this contract from your third web dashboard so we'll just sign this request here that way we can access this contract dashboard um through our contracts here um when we're signed into to the wallet that deployed it so right over here we now have our storage contract which is the name uh we have our contract address it is imported into third web uh with the contract dashboard we can view things here like analytics we can see latest events uh but for this contract there were no events so no events are going to show up for this uh but what we can use is one the code Snippets so this left hand navigation if we hit code Snippets here uh it'll bring us some getting started Snippets and how we can implement this into our project uh below that is the Explorer so very similar to your block Explorer where you may be able to to if we come over here and we go to contract uh we can have see our read functions here which is retrieve which is pulling up zero we have our right functions here which we can then call our right function provide it with our number and then call that right function on the Block Explorer we can do the same thing here on third webs dashboard so under the Explorer here we can view the read and write function so you can see here read it retrieves zero we have right here so we can actually hit that store function uh we can actually call the functions right over here so let's just say we want the new value to be one 2 3 we can execute it it'll call this function for us we'll get the transaction to pay the gas that pops up we'll hit confirm and you can see here we have our transaction information and if we come back to read here and we go to retrieve you can see now that our output for retrieve is 1 23 so you'll be able to interact with your smart contract directly through third web's dashboard as well in a very userfriendly and nice UI here but now let's build out a front end for it and because we have imported this contract to third web we can easily now pull this contract and use it in our front-end and build a front-end application for it so I'm going to open up my terminal here and I'm going to create a new third web project by running MPX third web create app I'm going to name this project here we just name it any contract app and we're going to use nextjs and typescript for this once that's done we'll change into our project here and we'll open this up in our code editor and now we can start building out our application to interact with the smart contract that we deployed now the first thing we're going to do is set up our project here to make sure that it can interact with our smart contract and in the pages folder we're going to go to theore app. TSX file and in here we need to set up our third web provider so the first thing we need to do is set up our client ID here this is going to be stored in an environment variable in a EnV file so coming back to my file directory here you'll see aemv do example file and you're going to see here there's a variable for your client ID you're just going to paste in your third web API client ID in there uh in order to get that if you come back to third web and you go to the settings tab you can then create an API key here now if you want to learn more about API Keys you can click this link We'll add a link down in the description we'll also add a tutorial video down in the description as well that goes a little bit more in depth on creating API Keys once you have that API key just copy it come back here and paste that in and one more thing we need to do is come to this MV file and rename this and get rid of the example so it is justv then we can come back to theore app. TSX file that takes care of the client ID the next thing we need to do is set the active chain now the active chain is stored in a variable right up here by default it's ethereum you're going to change this to the network or chain that you deployed your smart contract to so for us we did it on the Mumbai blockchain so I'm going to change that over to Mumbai and with those two things set that is all you need to do for your third web provider and we can run this application so let me just open my terminal here and run yarn Dev going to open this up and what we should see is third web's templated project here so you should see something like this if we hit connect wallet this is a connect wallet component and we can connect any of our wallets here like our metamask wallet to our application and we can even sign out so once we have that that set we can now start building out our application so coming back to my code editor here I'm going to let's just drop this down come back to my file directory and head on over to index. TSX and this is that templated code that you get when you create a project with third web I'm going to delete all of this here and we'll start off fresh so what we're going to do here is I'm just going to throw in a div here really quick and we're going to give this outside div some styling here uh let's just give it a display Flex uh Flex Direction column we'll align items Center justify content Center and we'll give it a height of 100% of the view height and then within that div I'm going to create another div here this is just going to be a div with the same thing a flex uh display of flex Flex direction of column uh align items and justify content in the center we'll give it a border some padding a border radius and a background color and a minimum width and this should just give us a nice little card that's going to be in the middle of our screen uh inside of that card we're going to add a connect wallet button this is a UI component from third web and all we need to do is just add this component here and it gives us the UI component for a user to connect a wallet to our application so if I come back to my project here you can see here we have our little card and we have a connect wallet button where we can now connect a wallet like our metamask or something and what I'm going to do here is I'm going to just span this wallet the full width of the card so we'll come into our wallet component connect wallet component here uh add some styling and we're just going to set the width to 100% come back there we go now we have our connect wallet button spanning the full thing next if we take a look at our uh demo here um where's my demo if I sign out uh we only want this section here this input field and this button to show if there is a wallet connected if not we just want to display the value and everything here so we're going to build those two sections out we'll first display the value of what is stored on our contract so come back to our app here and we'll come back to our code editor and I'm going to get rid of these two Imports here we don't need them anymore and right over here we're going to first get our contract and first we're going to get a instance of our contract so we can get that using a hook from third web and we're going to use the use contract hook and what we need to do is then provide it with our contract address so we can come back here to our contract and we can copy our contract address you can just click on the contract address here and all we need to do isay paste that in and we now have an instance of our contract next we can now call a function from that contract so if we look back at our contract here we can call this read function called retrieve and it will return us back the value of the contract of the number uh variable that we have in our smart contract so to call this retrieve function all we need to do here is we're going to create a variable and we're going to use the use contract read Hook from third web and to use contract read hook we need to provide it with our instance of our contract which is the contract right up here and then we need to give it the name of our function and in this case it is retrieve and you can also pass it any arguments that the function may take but in this case retrieve doesn't take anything it just calls the read function and returns us back the number uh the number variable value now we're going to get back with this hooks uh data property which we can just call um num value and we can also get the is loading status of this and we'll just keep that as is loading so right beow this connect wallet button we'll just create a div and in that div we'll create a H1 tag here and we'll just say if the value is still loading we'll just show uh zero and if not we will show the um num value now this is going to return us a big number so um when you interact with smart contracts normally the value returned is in a big number type so if we come back here and we go to our app you can see here we'll get an error and it says that the um object with keys is a big number here so we just need to convert this and we can just put do2 number here after that and that should give us a value that we can display so there you go you can see we are displaying 1 123 which if we look at our contract is the output right over here so if we write this again let's just say um we'll call it from our contract here in our contract dashboard uh we'll just say 1 2 3 4 5 and we'll execute that store function to store this new value we'll confirm that transaction there you go we updated that value there so we can come back to our app and you can see now it updates to 1 2 3 4 5 so next we want to do is let's build out a way for us to update that value right here in our application now we only want to be able to display the input field and and the button to call that smart contract function if we have a connected wallet because if a wallet isn't connected we don't have a wallet that can execute the transaction for us so we're going to make sure that we only display those input fields and that button if there is a wallet connected so coming back to my code editor here we first want to make sure that a wallet is connected and we can do that by using the use address Hook from third web so I'm going to create a address variable here and we're going to use the use address Hook from third web and what this is going to do is get us the wallet address of the connected wallet and return us that wallet address as a string but if there's no wallet connected it'll return us undefined and we can use that to toggle whether or not a user can see the input field or not so right below our value number right over here we'll create a section where only if there is an address will you be able to see these and we're going to create a div and let's give this div a style here of a display Flex Flex direction of column uh Center we'll justify Center as well and we'll set the uh width here to 100% and within that we're going to create an input which which is going to be of type number and we're going to create a button but we're going to use a third web component here which is going to be a web 3 button and we'll go over that in just a bit uh and this button is going to say uh set we'll say set new value but first let's build out our input field first uh we're going to need a state variable up here to keep track of our value so we'll just create one here here that says new value and then we'll use State let's import that and by default it'll just be uh zero so down here in our input we have type number the value will be new value on change will set the new value to whatever we have in our input then we'll have some styling here for our input and we'll just give it a margin bottom here of one Rim we'll set the width here to 100% give it some padding give it a border radius and we'll give it a border here as well so we'll save that we'll come back to our app uh again you don't see it cuz we don't have a wallet connected once we connect a wallet like our metamask wallet or something you'll be able to see that input field right over here where we can put in a new value and then we'll be able to click our button right now our button isn't showing anything cuz we haven't properly set up our web 3 button UI component from third web so next coming back to our code editor here we'll set up that web 3 button now the web3 button we need to give it two things uh we need to provide it one with the contract address that this is going to be interacting with which we can just come back up here grab our contract address paste that in and then the second thing we need to provide it is the action what action is this button actually going to be calling on the contract address that we have up here so we can get our contract and on our contract we can call so if we go contract we can call any function that we want similar to how we called the read function using the use contract read hook here we can call a write function here and the function that we're going to call is we can take a look back at our contract here so we come back here and we go into right we're going to call the store function and in the parentheses here you can just copy that that is the name of the function so we can come back here and as a string we're going to put in the store function is what we're going to call then we need to pass it an array of the arguments that that function takes so if we take a look back at our contract again our function our store function takes a number which we are going to set as the new value so back over here the number that we want to provide it is whatever the value of new value is so that is all we need for our web 3 button again what contract address is this going to be interacting with and then what action is that is this button actually going to be calling on top of that contract address now we can add a few more things here for this web three button uh we're going to add some styling here so we'll just uh style We'll add a width of 100% we'll add a background color here of we'll just change this to royal blue and we'll change the color to white uh that will change us the styling here so if we come back to our app now you can see right here we now have a button that's blue that says set new value and once we hit that button it'll execute and change it to here so we can actually click that now we'll hit confirm it's going to call our store function pass it our store value here which is zero and set our value to that new value that we have which is zero here now one more thing that we can add here is a on success uh we can even add an onsubmit or on error here so we if you put on submit we can say set value back to zero we can have uh on success here where we can oops uh we can alert saying uh success and then we can even add an on error if there is an error we can alert something or create any type of function that we want here when an error happens so coming back to our app here we can put here we can go 5 4 3 2 1 we can set the new value it changes that value back to zero when we confirm it once this is successful we should see an alert saying that this transaction was successful and we should also see the value update to the value that we inputed and there you go you can see we have success we can hit okay and you can see the value has changed to 54321 so again this was a demo of how you can deploy any smart contract that you want and still use third web SDK to easily build front-end applications and interact with those smart contracts and what this means is you don't have to use third web's pre-built contracts in order to use dir web's SDK and build out frontend applications for them you can use any smart contract that's deployed to any evm compatible blockchain and if you import those contracts into third web's dashboard you can still easily start to interact with them and build out those applications this means that you can use existing smart contracts that have been deployed by other people or you can deploy your own smart contracts but if you're looking for a quick and easy way to deploy say your own nft collection or anything you can use third web's pre-built smart contracts and have all that customization and ability within your third web dashboard but there you have it we were able to deploy our very own smart contract using remix we're then able to import that smart contract to third web and build out our own frontend application to interact with that smart contract using third web's SDK so I hope you folks enjoyed this video and 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 your notification Bell so you don't miss out on more tutorial videos just like this if you need any help or support We'll add a link down in the description below where you can contact our support team open a support ticket and they can help answer any questions that you may have but again I hope you folks enjoyed this video you found some value in it and until next time see [Music] you [Applause] [Music]

Channel: thirdweb

Views: 2,888

Keywords:

Id: 1LzOyynGT2U

Length: 25min 34sec (1534 seconds)

Published: Tue Jan 09 2024