How to Build a Full Stack NFT Marketplace on Ethereum with Polygon and Next.js - [2021 Tutorial]

in this video we're going to be building out a full stack nft marketplace on ethereum with polygon next.js and tailwind css we're going to be working with hard hat for the solidity development environment we're going to be working with ethers for the client library to interact with the chain and we're going to be working with ipfs for file uploads and file downloads now i think this is a really interesting and important project because it shows how to put all of these things together so you're not just writing solidity you're not just writing smart contracts you're not just interacting with an application from the front end you're actually building the entire thing end-to-end testing it out and this way you kind of really get a good grip of how all this stuff works there are two other reasons i think this is an important project first of all we're going to be working with nfts and i think people are really really starting to understand the value of nfts and not only the applications that we're seeing today for digital sale of goods but also the idea of um physical goods like attaching an nft to some physical good in the real world we're starting to see a lot of people having ideas around that um and being able to kind of like tokenize uh things in the world so that's that's a really important concept that's starting to really come into fruition and i think another really interesting part of an important part of this tutorial is working with a ethereum or an ethereum scalability solution like polygon now if you want to write a transaction to ethereum you're probably going to pay a couple of dollars and also that transaction often takes quite a while for it to be processed and to be verified with scalability solutions like arbitrom like polygon and there are a few others out there they offer faster transactions but also cheaper transactions so for instance it wouldn't probably make a lot of sense to build an application where you're trading in assets that are two to ten dollars directly on ethereum because the transaction itself might cost more than that but when you're working on a layer two or a side chain or some scalability solution like polygon the transaction is actually going to be less than one penny so this opens the door to a lot of different applications that people are starting to realize and i think going forward in the future you're going to see a lot of applications and a lot of demand for uh these types of solutions and maybe even for this exact stack that we're working on so that's my introduction i hope it kind of gives you a good overview about what we're going to be working with and why we're going to be working with it and with that being said let's go ahead and start writing some code to get started we'll be in a brand new terminal window with an empty directory and we're going to go ahead and create our next js app so to do that we can run npx create next app and i'll call this nft marketplace all right let's go ahead and change into the new directory and here we should kind of see the boilerplate code created for us by next.js the initialization of our project so now we want to go ahead and install our dependencies so we have quite a few dependencies because we're doing a lot we can use either npm install or we can say yarn out either way whatever works for you i'm going to go ahead and use yarn add and we're going to start walking through all these dependencies so we're going to be installing ethers we're going to be installing hard hat we're going to be installing some hard hats dependencies so one of those is at nomadic labs slash hard hat waffle we're also going to install ethereum waffle and these are all part of our ethereum development or our solidity and development environment we're going to install chai for testing and i think the last hard hat dependency that we're going to be installing is hard hat ethers so at nomadic labs slash hard hat dash ethers we're going to be installing web3 modal and web3 modal is what we're going to basically be using to allow the user to kind of choose which wallet they want to work with and in our case we're going to be using metamask we're going to be installing the open zeppelin contracts because we're going to be inheriting from the erc 721 contract that they have ready to go that we can kind of just reference instead of having to write all of that ourselves we're going to be installing the ipfs http client and this is what we're going to be using to interact with ipfs and then finally we're going to be installing axios so we have a lot of dependencies there if you don't want to type all these in i do have a link in the description of this video where you can kind of follow along and maybe copy and paste some of this stuff all right so now that our base dependencies are installed we can now install our last set of dependencies and these are going to be for tailwind now tailwind css is the styling library that we're going to be working with and it offers kind of a pretty simple or fairly simple way to do styling so um the things that we're going to be installing from tailwind are going to be dev dependencies so we can say yarn add dash d or npm install dash capital d and we're going to install tailwind css latest post css at latest and auto prefixer at latest alright so now that all of our dependencies are installed we can now start writing some code so the first thing that we want to do is we need to initialize some configuration for tailwind and you can either create these files from scratch but the easiest way is actually just to use the npx utility so they have a tailwind css utility and we can say init and then we can pass in the dash p flag and this is going to create two files for us one is going to be tailwind.config.js and one is postcss.config.js now we don't really need to make any modificat modifications to those we're ready to go the only thing we need to do is actually import the tailwind classes the base classes and and also just the the base that we're going to need for tailwind to work so to do that we can go ahead and jump in our text editor and we're going to need to start writing some code anyway in just a moment so let's go ahead and open the project in our text editor all right so we're here we have our project open the the styling that we're going to be writing or the update for the styling that we're going to be writing is going to be located in styles slash globals.css and here we can basically just overwrite everything and we're going to pass in the at tailwind base at tailwind components and at tailwind utilities and the uh three lines of code here are going to get us set up with all of the different class names that we can now use in our project and we're kind of ready to go there's really nothing else that we need to do we can save this file and we can close it out so we have our project set up and we can now start actually writing some code now what we want to do is we want to start writing some solidity code now we could start writing that here and create a bunch of different files to kind of get all this configured for a development environment but we can also use a you know solidity development environment which is what we're going to use and we can actually initialize that and it'll go ahead and create all the stuff we need so the one that we're going to be working with is hard hat and all we really need to do is just run npx hard hat and this will go ahead and get us set up with a hard hat environment as well as some basic smart contract to start working with so i'm going to choose create a sample project i'm going to keep the project root at the root that we're in and then i will choose yes for adding a git ignore even though i think we already had a get ignore so um now i should be able to go ahead and open up back to our text editor and we see that we have our contracts here and we also see that we have a hardhat.config.js so the contracts hold the smart contracts that we're going to be working with right now there's an example contract for greeter i believe it also created scripts slash sample script so we have that and um i believe also test slash sample dash test dot js so all these files were created for us by hard hat and we're actually going to be interacting with pretty much all these except for greeter dot sol we're going to be actually deleting that so our hard hat our solidity development environment is all set up now um you know we're ready to kind of move on to the next step so what we want to do here is we want to go ahead and configure hardhat to work with polygon and to do that we're basically going to need to go ahead and write a little bit of configuration here expand on the configuration that we have so i've kind of gone ahead and deleted some of the comments um i don't actually need this here either it's just kind of showing you if you did if you did want to get the list of accounts it's just kind of giving you an idea of how you would do that so we're actually going to use this function in one of our other files but for here we're not going to need it so let me go ahead and just delete that to kind of make this as concise as possible now for us to be working with polygon we're going to need to basically either decide do we want to interact with the public nodes the public rc endpoints that are kind of out there or do we want to work with our own private rpc endpoint it's kind of up to you so what i'm gonna be working with is infura but you could actually do this directly from a public endpoint and not have to create any accounts or anything like that so let's go ahead and check out some of the polygon docs so i'm just going to kind of like uh well actually let me just look up polygon networks and um this might just take us to their main developer docs but let's go ahead and go to developer we're going to click on proof of stake chain and then we're going to go ahead and look for networks network details and click on network so here we kind of see the details for both the mainnet as well as the mumbai test net and in this tutorial we're going to be actually deploying to both the testnet as well as the mainnet so you know just uh keeping that in mind early on we might want to have a configuration for both mumbai as well as the mainnet and if you kind of scroll down you'll see a lot of information we're going to be using some of this information to configure our application as well as our metamask wallet we have like the rpc endpoint we have the chain id um you have you know the name of the token itself and things like that so it kind of it kind of gives you an idea here why you might use a your own rpc it says public rpcs may have traffic or rate limits depending on usage and that basically means like if we're trying to deploy our contract to one of these test nets it might fail because there's too much action going on so what we're going to basically be doing or at least what i'm going to be doing is i'm going to be using infuria so infura is a provider of these different node node endpoints so i can go ahead create an account i'm going to go to ethereum and i'm just going to go ahead and click create project and i'll call this something like next nft polygon or something like that and i can go now to here under settings i can see i have endpoints here and i can see that we have a polygon mainnet as well as a polybond a polygon mumbai network and this is my project id so basically we're going to need this endpoint slash our project id just kind of how it's listed here so i'm going to go ahead and copy that and i'm going to go to my editor here and what we basically want to do is configure the different networks so to do that we can say networks and we're going to basically have our local node that we're going to be working with so hard hat and this is going to be one the other one is going to be mumbai and then the other is going to be mainnet okay so we have these three networks for the local network um we do need to add a configuration here we have to say chain id and we need to set the chain id to be one three three seven this is kind of like a configuration that is something having to do exactly with hardhat documentation so we just need that there for that to work for mumbai we need to go ahead and set the url and the url is basically going to be that now you could also store your id or yeah your project id somewhere like in a local environment variable or something like that and you might instead of like doing it this way you might read from that environment variable and say something like this and then you could kind of say id so let's let's act like we're doing that just to kind of like um you know show that we're not um maybe duplicating this code because i think we're going to be using the same project id somewhere else but and um in a real world project you probably want to keep like these ideas out of your source code itself so it might be smart to put an environment variable but let's go ahead and say that we want to go ahead and say project id is equal to that and then now we can kind of just use that there and then we also might say for our main net we want to do the same thing so so polygon mainnet i'll copy the address so now we can go to the mainnet configuration we can set the url using that new mainnet url and we can also use the project id variable here and now we have both our mumbai as well as our mainnet urls configured the last thing we need to do is go ahead and define our accounts and these are going to be the accounts in which we are deploying our or from which we're deploying our contracts now when we're working on a local test network we don't really need to define an account because the hard hat test environment will automatically inject and use an account for us unless we define one um and there are an array of like 20 different accounts that are created for you in a local network each one with 10 000 units of ether or in our case we working with matic and you know they're created for you locally so you don't really have to worry about about it there but when you're deploying to a real network you do have to have some type of payment and uh typically you're going to be using um you know the private key from the address that you would like to deploy from now the private key is going to be a very very secure type of thing that you never want to really get out there so it's a very secure value that you never want to put in github or really even write to a local file for the most part most of the time you want to use environment variables but in our case we're going to be using a completely throwaway account completely throwaway addresses so i'm not not really worried about exposing these here i want to make sure everyone is able to be successful if they're following along and sometimes environment variables are a little tricky to work with so we're going to be creating a dot secret file we're going to be adding that to dot get ignore making sure we we don't send this to get up but i just want to emphasize if you're working with real money with real tokens you never really want to expose or hard code this value anywhere so with that being said where do we get these accounts so well we first of all need to go ahead and install a wallet that we're going to be working with so in our case i'm going to go ahead and install a metamask wallet in our browser and using that metamask wallet we're going to have a couple of accounts so i can go ahead and search for metamask extension and here we should be given a link to go ahead and install this chrome extension and this will go ahead and walk us through getting this set up so i'm going to go ahead and click create a wallet and i will go ahead and reveal this secret phrase because again i'm going to be deleting this wallet after this tutorial i'm never going to be storing any money in it but now it's going to go ahead and ask us to go ahead and enter in this seed phrase all right so we've confirmed our seed phrase and we should be set up so we now have our wallet i'm going to go ahead and pin this to my chrome browser so now we always have it here and what we should see is that we have our one account and we might even create another account if we like you know we have a couple of accounts that we can work with um we also see that we can toggle between networks and right now we're only given these networks but later on we're going to be adding the matic mumbai test net as well as the main matic network but now we're kind of ready to go so like with this account that has been created we can now go ahead and get the private key for the account that we're working with so to do that you can go here to your browser extension and you can click on this here and say i want to go to view account details and then you can click export private key and i'm going to go ahead and copy this private key and we're going to go back to our text editor and i'm going to create a file called dot secret and dot secret is just gonna hold uh this value and then what we're gonna basically do is we're gonna go ahead and require uh file service and this is a utility that allows us to read from the local file system and i'll say private key and we'll say fs.read file sync and here we'll say dot secret and we'll just say dot dot to string and now we have a reference to our private key and then we can go ahead and paste that here so now we have our um set up so when we deploy these contracts to mumbai to uh mainnet wherever we're going to be using this this account from here and then later on we're gonna actually go get some test um you know matic and uh to use that to deploy and and if you wanna actually deploy to mainnet you'll probably need some realmatic so if you don't have any don't worry about that you don't really necessarily need to get to that very last step but we will be deploying to the mumbai test network with test matic that we're going to be getting from a test net faucet so with that being said i think we're kind of finished setting up our hard hat config and from there we can go ahead into contracts and start writing some solidity so in contracts i'll go ahead and create a file called nft.soul as well as a file called nft market dot sol i will go ahead and delete greeter because we're not going to be using that and close out these other files and now we're ready to go alright so we're going to go to nft.sol and here we're going to go ahead and set our license and you you must set some license comment here at the top and here we're going to kind of set our license as mit you can do apache whatever you like next we'll go ahead and set our version to 0.8.4 to kind of match what we had in our hard hat config there and now we're ready to go ahead and declare our contract as well as do our imports so the first imports that we want to work with are going to be for open zeppelin and we're going to be using like i mentioned earlier the erc 721 standard and we can kind of just import that directly from at open zeppelin contract slash token and this is going to recognize our node modules where we've npm installed or yarn added the open zeppelin contracts package um so that's that that's the erc721 we also want to import the the extension for erc 721 storage now this gives us an additional function called set token uri that allows us to set like it sounds the token uri and this is just going to be giving us all the functionality out of erc 721 in addition to that and then finally we want to import the counters util and this is just a really easy to use utility for incrementing numbers so you could write this functionality yourself but this is a really nice and consistent way that's recognized in order to do that so next we'll go ahead and define our contract and we're saying contract nft is erc 721 uri storage so that means we're inheriting from nf i'm sorry we're inheriting from erc 721 storage which actually itself inherits from erc 721 you're going to get like maybe an error for now a warning because we haven't finished writing our code yet so don't worry about that then the next thing we want to say is we want to use the counters utility and we're going to say using counters for counters dot counter and now we're going to be able to kind of use the counters.counter to declare a variable that we're going to call token ids token ids is going to allow us to keep up with um an incrementing value for an a unique identifier for each token so when the first token is minted it will get a value of like one when the second token is minute we'll increment that and we'll give it an id of two and then using counters it will allow us to continue incrementing these token ids and then finally we're going to have a a variable called contract address and this is going to be the address of the marketplace that we want to allow the nft to be able to interact uh with or vice versa so for instance we want to be able to give the nft market the ability to transact these tokens or change the ownership of the tokens from a separate contract and the way that we do that is we call this function set approval for all and here we're going to be passing in the value of the contract address which we're going to be setting here in the constructor so let's go ahead and write the constructor the constructor is going to be taking in the marketplace address as the only argument and then we're setting the contract address as the argument of marketplace address so when we deploy this contract we need to pass in the address of the actual marketplace so we're going to be first deploying the market and then we're going to be deploying this contract and then now we can reference the marketplace address anywhere within this contract by referencing the contract address all right so the next function that we're going to go ahead and create is called create token and this is going to be the only function actually that we have in this contract and this is going to be for minting new tokens and the only value that we get passed in here is the token uri that's because we don't need to pass in the marketplace address because it's already stored here we don't need to pass in the id of the token because that's already being kept up within within the smart contract we also know who the person is invoking this because it's a transaction and we're going to have the message.sender available so we have a lot of metadata available even though we're only passing in the token uri so the first thing that we want to do is we want to increment the token ids so we're going to call tokenids.increment and this is going to go ahead and increment the value starting off at zero and then you know going up from there we then create a variable called new item id and this is going to get the current value of the token ids so let's say when we deploy this contract it will be zero and then the first token id will will be one and then the second token id will be 2 so on and so forth the next thing we're going to do is go ahead and mint the token so we can call underscorement passing in the message.sender as the creator and the item id as the item id we now want to set the actual token uri we do that by calling underscore set token uri this utility or this function was made available to us from erc 721 storage here we're passing in the item id as well as the token uri and then finally we want to go ahead and set approval for all passing in the contract address and saying true and this is basically going to give this token or give the marketplace the approval to transact this token between users from within another contract if we don't if we did not do this we would not be able to do this from any other contract and then for the purposes of our front end application we're going to return the item id that's because if we do decide to um you know interact with the smart contract from a client application the way that's going to that this is going to happen is we're typically going to mint the token and then set it for sale in a subsequent transaction and to put it for sale we need to know the id of the token so by returning it we can kind of get a hold of that on the client so that's it that's the nft contract smart contract and we're done there we can go ahead and save that and now we can go ahead and go to the nft market now the nft market is going to be quite a bit of code so this is going to be a bigger contract than the one we just created so let's go ahead and start writing some of this code we're going to go ahead and do the same things that we did before where we set the license as well as the solidity version we also want to import the counters as well as the erc 721 and then we're going to have one new import from open zeppelin called re-entry guard and this is a security mechanism that is going to give us a um a utility called non-re-entrant and it's going to allow us to kind of protect certain transactions that are actually talking to a separate contract to prevent someone from hitting this with multiple um requests or multiple transactions and kind of you know doing shady things and so it's kind of a security control that prevents re-entry attacks so we can use this um non-re-entrant um helper whenever we want to to to kind of like implement that functionality and we're going to be doing that on any function that talks to a different contract all right so the next thing we want to do is declare our contract and we do that by saying nft market is going to be the name of the contract and it's inheriting from a re-entry guard and now we can go ahead and start writing the code for this contract similarly to how we used counters in our last contract we're going to use the counters as well here and the two counters that we're going to be working with are going to be for the item ids and that's going to be for each individual market item that's created and then we're going to also have a counter for the number of items sold now the reason that we need to keep up with the number of items sold is because when you're working with arrays and solidity you cannot have dynamic length arrays so you need to know the length of the arrays so a few of the arrays that we're going to be working with are going to be the number of items that i've bought myself the number of items that i've created myself and the number of items that are currently not sold we're going to need those numbers because we're going to be returning those values and in order to kind of do that we can either you know map over the arrays and kind of like check for each individual value and kind of like do something there and kind of determine that on the fly or in this case we're going to keep up with the number of items sold doing this is going to give us a few different values first of all we're going to know of course the total number of items is going to be the item ids value we're also going to know the number of items sold obviously if we're keeping up with that but we can also calculate the number of items that have not been sold so when we want to create a view on our nft marketplace items we can say oh we know that there's 100 items that have been created 30 have been sold that way we can return an array of 70 items that have not yet been sold so when we create that array we know the length of that array hopefully that'll make more sense if it doesn't make sense now it'll make more sense later next we want to go ahead and create a variable for the owner of the contract um and here we're going to go ahead and just set that as a value called owner and the reason we want to set this is that we want to be able to kind of um determine who's and the owner of this contract because they're going to be making a commission on every item sold in the way we're writing it now this doesn't have to be that way you know you can you can calculate and program all types of different ways for different parties to get paid but i think a really interesting way of doing this is to kind of charge a listing fee and then anyone that decides to list an item has to pay uh that listing fee and then the owner of the contract makes commission on everyone else's transactions all right so we're setting the owner there and then we're also setting our listing price now in our case it's going to be .025 of the value of the token that we're deploying on to that to that network so when i say .025 ether this is really just kind of saying you know we when we're working with ether it's 18 decimal points so you could kind of say you know think of like if we were working with all these different decimal points we could use that number and talk about these values in way or gray and those are different values that you kind of typically work with but i think it makes a lot more sense when you're working with these extremely long numbers to kind of use that top level value in our case we're just saying ether this part is a little confusing though because we're deploying to matic right we're not using ether but either way the api that we're working with is kind of the same and you could consider this ether actually being a matic which also has 18 decimal points so you know for the for the listing price .025 matic would be worth about two cents i would say like let's say one polygon or one maddox worth a dollar today or something like that that'd be something like two two cents so you might bump this up or down if this was either this would be a big listing fee so yeah that's that's just some things to kind of like think about and take into consideration so for the constructor of this function or this contract we want to set the owner as the message.sender this is basically saying the owner of this contract is the person deploying it and that's going to basically be the contract address that we deploy this with all right so we're setting the owner the next thing we want to do is we want to define a struct for each individual market item you can think of a struct like an object or a map and other programming languages essentially what we want to do is we want to have like you know a value that holds um other other values as a map and we're going to have like this key value here where we're going to have an item id as an item id and nft contract is like you know the contract address token id is like you know the id of that token so on and so forth and we have these different values that we're going to keep up with we have a boolean for whether it's sold or not we have an integer for the price we have an address for the owner we have an address for the seller so on and so forth all right so we have our market item struct and now we want to create a mapping for our uh for our uh market item so we want to start keeping up with all of the items that have been created um and the way that we can do that is we can basically have a mapping where we're passing in an integer which is the market i'm sorry which is the item id returns a market item so if i create a new market item and that item id is is five i want to be able to kind of go and fetch that market item based on that id this mapping allows us to do that where we can kind of keep up with the item ids and all we need to do to fetch each individual market item is know the id of that item and that will return all this stuff all right so um the next thing we want to do is have an event for when a market item is created and this is going to match this event is going to match the market item itself pretty well so we have our item id contract token id you can kind of see the same things here and this is just a way for us to omit an event anytime someone creates a new market item and that way you know you typically do this if you want to have a way to kind of like listen to these events and things like that from maybe a front end application so i'm going to kind of maybe close those up a little bit we're going to keep going um the next thing i want to do is have a function that returns the listing price so when we deploy our contract we don't actually know on the front end how much it is to list an item so we need that value of course we could basically just hard code it but this is a better way i think is of doing it this way we can actually just call the contract get that listing price and make sure that we're sending the right amount of payment across the wire when we're doing that all right so we have our base configuration kind of set up like we have one basic function called get listing price now we need to have two functions for interacting with the contract one is for creating a market item and basically putting it for sale and then the other is for creating a market sale for actually buying or selling you know an item between parties so the first function that we'll create is the uh function for creating a market item so the three arguments that we have coming in here are going to be the contract for the actual nfc so this is going to be the contract address for this wherever we deploy this we're also going to need to pass in the id for the token from that contract and we're also going to pass in the the price that that token is being put up for sale so i define the price as a user or whoever define whoever is putting an item for sale defines that price typically on like a client application and and we're passing that in as an argument and then now we can deal with that here by storing that um we're also using this non-re-entrant and the non-re the non-re-entrance is going to again basically you know prevent a re-entry attack all right and that's called a modifier by the way so we're using that non-entrant non-reinstrument modifier so the first thing we want to do is we want to require a certain condition the condition that we want to require is that the price must be greater than zero so we don't want anyone of course listing something for free you know at least one way which is like almost literally nothing but let's just say it's that that's one uh from eighteen zero is the very bottom of that so um of course something real world might be something like you know at least 0.1 eth is what a lot of different applications use and matic it might be i don't know 5 matic which would be you know the way you would calculate calculate that would be something like i guess 5 eth and in our contract so yeah just keep that in mind this is a really just basic example to kind of show you some some ideas though we also want to require that the user sending in this transaction is passing in the required listing price so when i create this market item i need to send along some payment to pay for the listing and this is going to be locked into the contract and then upon transaction of someone buying or selling we want to then transfer that value to the to the contract owner so we're just requiring that the person is sending in the listing price along with the transaction the next thing that we're going to do is we want to again increment our item ids and then we're going to go ahead and create a variable called item id and this is going to be the id for the for the marketplace item that is going for sale right now and then we're going to go ahead and create our mapping for this uh market item so here we're going to go ahead and create the market item as well as set the mapping for that market item so we're saying id to market item item id so in this case it might be id to market item one and then we're creating the market item itself and we're setting all the values here so the item id is coming from here the nft contract is coming from the argument here the token id is coming from the argument as well the person that is selling this is the message sender which is available in the transaction the owner is being set to an empty address because if you can go down to our market item struct you'll see that we have a seller and an owner so the owner right now is no one because the the seller is putting it for sale and no one owns it at this point so we're setting it as an empty address and the way that we do that is passing in address with a zero value we're also setting the price and we're setting the boolean of if it has been sold to false because if it's just being put up for sale then of course it's not sold yet so we have our id to market item and um we're we're setting you know creating our first market item at this point and then we not we now want to transfer the ownership of the nft to the contract itself because right now the person that is writing this transaction owns this and we want to transfer that ownership to this contract and then the contract is going to then take the ownership of this item and transfer it to the to the next buyer of course you can have functions in there that allow people to go in and cancel their marketplace items or whatever you would like there's a bunch of things you can do hopefully you're the things that we're talking about today will start getting your brain you know thinking about different use cases and scenarios but the way that we do that is we we use that erc 721 passing in the nft contract and we transfer from the message.sender to the contract itself and then this is the token id and this is a method that's available on the er ierc 721 so once you've imported this from open zeppelin you'll have that method available and then finally we just want to omit the event that we created earlier where we're going to say a market item has been created and here we're passing in the item id the contract the token id message sender you know all the different values that we basically kind of set here we're setting there and that's the end of our function so that was a pretty big function a lot of stuff going on there if i go ahead and kind of like minimize that whoops that's probably not the right one here we go minimize that you see that we have two functions now one for listing getting the listing price one for creating a market item and then the last function we want is for creating a market sale and this is going to look a little similar to the create market item in the sense of whoops where we basically are using the non-reentrant modifier we are also using the contract address as well as the item id we don't need to pass in the price because the price is already known in the contract so the first thing that we're going to do is go ahead and create a couple of variables based on our arguments here so we want to go ahead and get a hold or get a reference to the price so we're creating a variable called price and the way that we can get that is just using the mapping so we're going to say id to market item using the item id and we're getting the price doing the same thing with token id we want to know the actual token id because we have the item id and of course that isn't always going to match the token id and then we can now require that the person sending this transaction has sent in the correct value because in this transaction if i set this thing up for sale for like 100 matic then we're expecting that message value to equal the price and if it's not we're going to say please submit the asking price and an error message next we want to go ahead and transfer the value of the transaction so how much money was sent in the transaction we want to go ahead and transfer that value um to the seller so i'm the seller i'll put this thing up for sale for you know again like 10 or 15 matic the value that's now passed in is going to be available in message.value and we're going to go ahead and transfer that to the owner's address the next thing that we want to do is we want to go ahead and transfer the ownership of this token to the message.sender so we're saying we want to transfer from this contract address to the message sender and this is the token id so this is actually transferring the ownership of the digital good from the contract owner or the contract address i would say to the buyer so we've done two transactional things here we've sent money to the seller we've sent a digital asset or an nft to the buyer um the next thing we want to do is we want to go ahead and set the local value for the owner to be the message sender and in this case we're kind of just updating that mapping here we're going to go ahead and set this value to being sold using that same mapping we also talked about keeping up with the number of items sold so let's go ahead and increment the items sold by one and finally we want to go ahead and pay the owner of the contract so the way that we can do that is we can say um owner.transfer and we're going to pass in the listing price so now we're transferring the amount that that person had listed the item for to the contract owner so this is the commission that the person running this marketplace might start making residually so you know we're covering a lot but i think you know all important stuff so we've now finished writing the um function for creating the market item as well as the market sale so i think we can go ahead and move on to the next step and the next three functions are going to be fairly similar we basically want to have different views i would say our different collection selection sets of our nfts we want to have a function that returns all of the unsold items we want to have a function that returns only the items that i've purchased and then i want a function that returns all the items that i've created this way we can have like a profile view for all the things that i've created we can have a view for all the things that i've bought we can have a things a view for all of the unsold items which i think are kind of three main views that you might consider having an you know in an app like this so we'll go ahead and create the first function and here we're calling this fetch market items um you know this is going to be available from the client application so it's public it's a view it's not doing any transactional stuff and this returns an array of market items so let's go ahead and start writing the code for this and the first thing that we want to do is we want to go ahead and create a variable called item count and this is going to be the total number of items that we have currently created and then using the item count we can go ahead and get an unsold item count by subtracting the um the number value that we have as the uh you know total items that have been created subtracting the items that have been sold so let's say we have 100 items here we've sold 30 that means the unsold item count is going to be something like 70. and then finally we want to keep up with the local value for incrementing incrementing a number essentially because we're going to be doing a we're going to be looping over an array and we want to keep up with a a number within that array within that loop so in our case we're going to be basically looping over uh the number of items um created and we want to increment that number if we basically have a empty address that basically means if the item has an empty address that means it has not yet been sold and we want to populate an array with that unsold item and then we want to return that item because again we only want to return from this function the number of unsold items so to do that let's go ahead and create an empty array called items and this is going to be the length of unsold item count and the value uh the values in this array are going to be of market item so we're saying we want market item memory items is equal to a new array and it's going to be you know the length of unsold item count and that's kind of why we needed to keep up with that that value earlier all right so now we're going to loop over the number of items that have been created and we're going to go ahead and first check to see if this item is unsold and the way that we can do that is we can use the um the id to market item map looking for the owner value and we can look for the address to be an empty address so the owner.owner is going to be address an address already and if you remember when we created the mapping for creating a new market item we set the address to an empty address to begin with the only time this address is populated with an actual address is if the item has been sold so here we can detect all of the unsold items and what we want to do is we want to insert the item into this items array and we also want to increment this current item all right so we're going to now go ahead and create a new variable called current id and this is going to be the id of the item that we're kind of like interacting with right now we're going to now go ahead and create a value called current item that's going to go ahead and get the mapping of the id to mark an item passing in the current id and this is going to give us a reference to the market item that we want to go ahead and insert into that array and we now insert that item into the array by saying items current index which is going to be this value here so we're going to start off like an empty array we're going to start incrementing and like you know setting that value there so we're setting the value of the items at this index to be the current item and then finally we need to increment the current index so you know we're going to say current index plus equals one or however you want to do that and then now we're basically mapping over or we're looping over the number of items that we have and if the item has not been sold we're inserting it into this items array and then now we can return this array from this function and now we should be good to go so i think that's the only thing we need to do to do at this point just making sure i put that return value the right place so that's quite a bit you know we did a lot in that function but we're going to be replicating a very similar functionality a couple of more times so kind of get used to that um the next function that we're going to be returning is the function that returns only the nfts that the user has created themselves or actually let's do the one where the function for returning the nfts that the user has purchased themselves so this function is called fetch my nfts similarly to how we kept up with the um total item count we're also going to be doing that where we kind of look for the the item ids.current um we're also going to keep up with a new variable called item count and we need to have another counter that we're going to be basically keeping up with because basically we have not been keeping up for instance if i have created an item myself and i want to fetch the number of items that i've created we don't really have a function that will tell us that right the only values that we're keeping up with as far as like counting the number of items created or the total number of items created and the total number of items sold but we're not keeping up with that number for each individual user so the way that we can get that number is we can basically loop over all of the items and we can say if the id to market item owner is equal to the message.sender we want to increa increment this item count by by one so by doing this we can basically map over or loop over uh every single item in the um array that we're going to be you know working with and we can say okay i've created or i've bought you know five or six items or whatever or i own five or six items so that's the number we're going to be able to then populate that uh that array like we did earlier so now using that array we can say just like we did earlier where we have this items array we can now use the item count as the length of the array whereas before we were using the unsold item count in this function we're using the item count so now we know the item count like for me in this in this case we're fetching the nfts that i have purchased if i've purchased five then this will be incremented by five and i can have like five items and then really the um the the rest of this is going to be very similar to what we did before where we're kind of mapping over the total item count and then we now are going to be checking to see if the owner address is equal to the message center which basically means it'll be mine then we want to go ahead and do our work here here we're going to go ahead and get the current id which is going to be the item id we then want to go ahead and get the current reference to the current item and then finally we want to go ahead and insert that item into the array and then we want to go ahead and increment the current index and of course i guess we could have used counters here because we've been using counters before but either way yeah it works either way and then we're just going to return the items so we have a function now for fetching only the nfts that you have purchased we have a function for fetching the nfts that have not been purchased by anyone and then the last function that we want to create is for creating an array or returning an array of the nfts that a user has created themselves so this will look very similar to that last function where instead of looking for the um the owner to be the message.sender instead we're going to look for the dot seller to be the message sender so we're going to go ahead and say have a for loop here and we're checking to see if this item dot seller is equal to the message sender then we increment that item count by one we create our market item array here of items we go ahead and loop over all of the items in the in the project we check to see if the seller address is equal to the message.sender if it is if it is that means i am the person that created this item then we can go ahead and get the current item and insert that into the array and then we can go ahead and increment the current index and then finally we can return the items all right so that's a pretty overwhelming you know amount of code that we just wrote so that's a pretty big smart contract that's doing a lot i would say if you got confused or anything like that refer to the code reference below and maybe copy and paste some of this but it is important for you to kind of maybe understand what is going on because yeah it's um it's a core piece of really um you know building out these types of applications is understanding not only you know the the front end part interacting with the contract itself but also understanding the functionality here maybe writing some of it yourself in the future so the next thing we might want to do is go ahead and test this out so we're going to write one test and then we're going to start building out our front end so i can go to uh test slash sample test and we can go ahead and start writing our function for our test so we don't really need anything having to do with greeter greeter is not even there anymore so we might say like nft market and then we might say something like it should create and execute sales market sales so the idea here is we want to kind of like simulate deploying both of those contracts creating a new nft um putting that nft for sale on the market and then purchasing it from someone else so to do that we're going to go ahead and say we want to say get a reference to that market contract so i'm going to say git contract factory nfc market and here we should have our contract slash nft market so we're good and then now we can go ahead and say we want to wait for the market to be and deploy the market and wait for it to be deployed so here we're going to go ahead and say await market.deploy and then we're going to wait for it to finally finish being deployed and then we're going to go ahead and get a reference to the address from which it was deployed because if you remember earlier in the constructor of the actual nft market we need to go ahead and pass in the value of that market address for our nft constructor so now we'll go ahead and deploy the nfc contract so we'll go ahead and get a reference to that we'll pass in the nft market i'm sorry we'll go ahead and pass in the market address to the constructor of the nft we'll now wait for that to be finished deploying and then we can get a reference to the nft contract address as well so we have both a reference to the market address as well as the nft contract itself now we're going to need a way to know how much the listing price is so we already have deployed our contract so we can start interacting with it so here i'm going to go ahead and get a reference to the value of the listing price and the way that i can do that is i can say await market dot get listing price and then i can go ahead and turn that into a string because we're going to need to have that as a string in order to be interacting with it next we'll go ahead and create a value for the auction price so this is going to be kind of like how much are we selling our items for so you know in our case we're working with matic so we could say something like 100 it's not not that much so we can kind of use this utility called ethers.utils.parse units and this allows us to work with these whole units as opposed to working with whey which are 18 decimals so what we're going to go ahead and do is create a couple of different tokens we'll put them up uh you know for sale in just a moment but first we have to actually create them and to create them we can interact with the nft market contract i'm sorry the nfc contract and here we're going to say nft.createtoken we're going to pass in the uri of our token and then we can go ahead and list these two tokens on the actual market now that they're created so we've created the tokens let's go ahead and list those and the way that we're going to do that is we're going to pass and we're going to call market dot create market item we're going to pass in the contract address of the nft deployment we're going to pass in the token id which remember we're starting with one and we're incrementing up so we should have a this should be number one and this should be number two we're passing in the auction price of 100 um you know ether but in our case we'll be working with matic and then we're passing in the value that is going to be you know passed in for this transaction being paid to the contract owner is going to be the listing price so we need to make sure you know that that value is there as well so we're passing in the listing price and now we've already deployed or now we've already kind of created all these different transactions let's now think about how we can get different addresses from different users theoretically so in a real application the users would be using metamask or their wallet and kind of interacting with it from it from some address but in a testing environment you can actually get a reference to a bunch of test accounts so for instance when we run our hard hat node we're going to be given 20 different local accounts to work with and you can also do that using the ethers library you can get a couple of different basically test accounts so in this case you can call ethers.getsigners this returns an array and you can have as many items that you want to kind of like destructure out of this array as you like so i could say like third address fourth address or whatever now by default if we are deploying um we're going to be working with the very first item in that array so like by default we're not really specifying an address we're just deploying stuff and that's going to be using the first address so now let's we want to basically specify a different address so we're kind of like just ignoring that address by using underscore and now we're going to get a reference to the buyer address and the reason we want to do that is we want we don't want the buyer to be the same person as the seller right the seller is like this underscore you could think of and then the buyer is this new buyer address so now we can go ahead and say we want to use this buyer address to connect to the market and then we want to create a market sale passing in uh the contract address the id of the token and the value of the auction price which in our case i think we set it 100 units or in our case will be 100 matic all right so what we've done here is like we've created two nfts we've placed two nfts on the market for sale and then we've sold an nft to someone else so the last thing we might want to test is querying for these market items so we can do that i can go ahead and say we want the items we want a variable called items and we want to go ahead and set that to market.fetch market items and then we might just want to go ahead and console.log these items so here we kind of have our function where we're calling fetch market items and then we're going to log those out so that's quite a bit of code as well but it's a pretty interesting test and i think it's kind of like essentially tests out all the main functionality that we want to work with so let's go ahead and um you know test this out so to do that we can run our tests we can open our terminal and from here we can run the test by running npx hard hat test and this should take you know just a second but um essentially what we're doing is you know running all of that script that we just wrote and um if the test passed successfully you should see something like this where it says should create and execute market sales and um you know the only item that we've returned is this array of items and these are these are the unsold items and this makes sense because we've created two items we've sold one and now we're only returning a single item now what we're seeing come back though is like a lot of weird values we see big number um we see you know values that we're not used to working with so there are utilities that we can work with or there are even functions on some of these values that we can work with so for instance we can turn a big number to a string that is is human readable um and and we we need to do that on the client to visualize a lot of this information but we can also kind of update our tests to to do this as well just to kind of get an idea around some of the things that we're going to be doing on the client so what we basically want to do is let's say we want to map over all these items and we want to update the value of them so what we might want to do is we might say okay we want to re-purpose the value of of these items so we might say okay we want to set these items to be um the result of this map where we're going to kind of map over all of them and we want to do this asynchronously so we're going to say promise.all and this allows you to do an asynchronous mapping the first thing that we want to do is we want to get the token uri and we can do this by calling nft.token uri passing in the id and this gives us the actual uri of that value and then we can now go ahead and create a new reference to the item where we can say we want to just only return certain values so we want to return the price the token id the seller the owner and the token uri so we have the token uri that we've gotten by calling the nft contract we're also turning this big integer or this big number into a string for the price as well as the token id we're defining the seller and the owner by just the address so we're kind of we're defining this new item value and then we're returning it so now when we visualize this let's go ahead and run this test one more time this should make a lot more sense when we actually see it so now we're seeing okay this price is this number and don't forget we're working with um you know this 18 number value which is way so that looks really big but it's but it's you know exactly what we listed it for i think in our case we listed the value again as um 100 either so this is like 100 with 18 zeros we have the token id which is two we have the seller address and we have the owner address so the owner address is an empty address so it's 0x and all these zeros and then the token uri as well is like you know very very easy to read so now we've updated this this data and it makes it a lot easier for us to kind of understand so it looks like all of our code is working so now we can go ahead and build out the front end which is really great because we've done a lot of work so far so let's keep this going so for the front end the first thing we might want to do is go to our pages and see the different pages that we have now and maybe we'll go ahead and run the app so let's go ahead and do that so to do that i can go ahead and run npm run dev and we should have a server running at localhost 3000 so i'm going to go ahead and open up my browser at localhost 3000 and we see our basic next.js app okay so we have our app running um let's go ahead and see some of the the files that we have so the main files that we have and are in this pages directory that we're going to be working with for the ui we have our index which contains you know everything that we see here and then we have our app.js which a lot of times is used for things like layout and navigation so for index you know we might just go ahead and delete a lot of this stuff for now and we don't need these you know just go ahead and go ahead and get rid of all that stuff let's just say h1 home you know pretty simple if we if we go ahead and update now we see that we have that which is great because we're going to need to update this a lot in just a moment for us to actually start building out some of our ui though we want to go ahead and start with app.js and we want to create a layout and we want to do a layout which is going to basically you know apply first of all mainly our navigation and in our case the navigation is going to have a little bit of styling and stuff like that but we're also going to be linking to other pages so in order to link to other pages in next.js we need to go ahead and import the link component from next link the next thing instead of just returning the component that is being rendered we want to go ahead and wrap this in a div and now we can apply some navigation and we're going to be styling our navigation with tailwind so this is going to be the first um tailwind code that we we see so far today i think so here we have our nav we have the class name set here and basically this is going to say border b which is border bottom and padding 6. so this is just going to be setting some overall like border at the bottom of one pixel and then padding of 6. so for our title of our application and our navigation we can go ahead and and give this a title we're going to call this metaverse marketplace or you can call it whatever you'd like and we're going to set the text to be 4xl and we're setting the font to be bold and these are using these class names from tailwind the next thing we're going to do is we're going to go ahead and create a div to hold our links and we want to have display flex so we're saying flex and then we're setting the margin top of four and this is going to apply of course to all of the links that we're about to create here the first link that we want to create is for a link to go home so like a root link and we're setting the value to be home you know so that way we can navigate from different pages and back to the home page we're going to also create a link for creating a new item so we have slash create item and you're going to see that for the most part i think we have the same styling for each one of these so i think margin right 6 would be making this consistent and then we're setting the text color to be pink this could be whatever color you want so do what you like so we have a page for creating an item we have a home page we have a page for viewing our own assets so these views for creating and i mean for listing your own assets and for the creator dashboard we're going to be calling those functions that we were working with in our solidity code earlier so my assets shows you the items that you've purchased and then we're going to have this creator dashboard and slash creator dashboard will be the creator dashboard this shows you the items that you've created but it also shows you the items that you've sold on in the marketplace so this is a really great view i think and it makes a lot of sense so if i go ahead and save this and i go back to my app we now see that we have our title there if we try to click on any of these pages it's going to break because we haven't created those links yet but if we go back home it works so we have some user interface going and we're getting there right so that's that's great the next thing we want to do is in our home page we want to go ahead and update this to go ahead and fetch the assets from the marketplace and show them now right now we haven't created anything yet so it's going to be an empty array but let's go ahead and write the code to make all this work so the first thing we want to do is go ahead and update our imports so we don't need this styles import anymore instead we're going to go ahead and import the ethers library from ethers we're going to go ahead and import use state and use effect from react these are hooks use state allows you to keep up with local states use effect is a hook that allows you to invoke a function when the component loads axios is a data fetching library and web3 modal is a way for us to connect to someone's ethereum wallet now when we deploy our project we're going to need to have a reference to our marketplace address as well as our nft address so to do that let's go ahead and create a file at the root of our project called dot config and here we want to go ahead and have an export const nft market actually this needs to be config.js sorry so nft address is equal to an empty string and we also want to have a const for the nft market address and then in our file once we've once we've deployed we're going to have those values and then in our file we can go ahead and import those here so now we have a reference to our addresses there and we're ready to keep on going so next we need our abis so our apis are essentially a json representation of our smart contract and it allows us to interact with it from a client-side application now when we ran npx hard hat tests earlier hard hat automatically looked in our contracts and compiled them and put them in a folder called artifacts so if we go ahead and delete that folder like it's it's already there but let's say we deleted it we wanted to compile it again we could either run another test or we could say npx hard hats compile and then this would go ahead and compile those and you know whenever we compile those we are creating you know some artifacts that we're going to be able to reference within our client application and we see that we have this artifacts directory here so what we now want to do is go ahead and import those artifacts and reference them in this in this file here that we're working in so the first thing we'll import is the nft abi as well as the nft market from the artifacts slash contracts slash nft.sol nft.json and the same thing with the others so don't really worry about what's going on in there this is just how the ether's client is going to know how to interact with the contract by using these apis so we don't really need to kind of like do anything other than reference those uh later on in our project all right so we've imported our reference to our nft and our market api let's go ahead and create our initial state that we're going to be working with in this component so we're going to have two pieces of state first of all we're going to have an empty array of nfts and then we're going to have a function to reset that array of nfts so when the app loads we're going to have you know no nfts we're going to then call the smart contract we're going to fetch that array and then we're going to update the local state we're also going to have a loading state and a set loading state you know functionality we're having the loading state as a variable and the set loading state is going to allow us to update the loading state and by default when the app loads we're going to say that the loading state is set to not loaded and then later on when we want to set the loading state at any time we can like call set loading state like and we can set it to loaded or whatever we would like but um using this loading state we can basically show or hide you know our ui and uh and that's a good way for us to kind of keep up with where the application currently is i would say like in the life cycle all right so one of the functions that we're going to need to create is called load nfts and this is going to be where we call our smart contract and fetch our nfcs and typically you want this function to be called when the when the app loads or when the component loads so the way we can invoke this function when the app loads like i mentioned earlier is using this use effect hook so let's go ahead and call use effect and here we're going to go ahead and just return or not return we're going to go ahead and invoke the load nfts function all right so the component loads load nfts gets invoked and here we want to actually go ahead and talk to the smart contract and load our nfts so the way that we're going to do that is we're going to be working with one of the ethers providers now in a read operation we don't really need to know anything about the user so we can use a very generic provider called the json rpc provider so here we kind of say new ethers.providers.jsonrpc provider and now we can go ahead and configure the contract by saying ethers.contract passing in the address the abi as well as the provider so here we're taking a reference to the actual nft contract but we also want to go ahead and get a reference to the market contract because what we're basically going to do is we're going to fetch the market items and then we need to map over the market items and we want to get the token uri by interacting with a token contract so we basically need both of those the next thing we want to do is actually go ahead and get the data so we're going to say market contract dot fetch market items and this correlates directly if you remember in our contract where we have uh fetch market items this is the function that we're calling so we're returning all the unsold market items and this is going to be returning that uh array and like we did before we want to go ahead and map over all of all of those items all right so we're going to say create an item array called items we're going to say promise.all and we're going to say data.map and this is going to be asynchronous because we have a couple of asynchronous operations so the first thing we want to do is we want to call the token contract and we want to get the token uri but one additional call that we want to make is that with that token uri we want to get the metadata from the token so when you're working with ipfs you know we're going to be uploading essentially kind of like a json representation of this nft which is going to hold different information so you're going to have like the name of the token the description of the token and an image which is kind of the reference to the actual you know image and or video or something like that so to get that we're going to call axios.get passing in the uri so the uri might be something like https like some ipfs endpoint you know dot dot you know like whatever the the id is so by calling that we're going to be able to kind of get the uh the value that is returned from from that so we have that meta and basically we want to use that in just a moment and the next thing we're going to do is we're going to go ahead and create a value called price and this is going to be something that we set in the item property so we're going to have like an item object so we'll say item is equal to like object or something like that and then here we want to like you know return the price as one of the values but we want to format the price because when it comes back it's going to be coming back and in a format that we can't really use so to format that we can call ethers.utils.format units passing in the price to string and then saying ether and this way we can like show that that you know main value of like 5 or 10 or 20 or 100 matic as opposed to like 18 zeros appended to that um in addition to the price we want to return a couple of other values so we want to set the token id we want to set the seller we want to set the owner we want to set the image which is coming off of that metadata we want to set the name and we want to set the description so this way we can kind of represent the nft in a very visual uh visual manner and then here we're just going to return the item so we're mapping over the items array and we're kind of like um forming it into a very you know nice piece of data you know like we're kind of like mutating the data and setting it uh resetting it and then we call set nfts and this is going to go ahead and set that new that new updated items array and then we can call setloadingstate to be loaded and what we can now do with that loading state is we can say if like loading state whoops is equal to uh [Music] loaded and the nfts.link is empty we can basically tell the user hey there are no items in the marketplace so this is essentially what we're going to be doing what we're going to be seeing when we first run the app because when the app loads there are going to be no items now yeah it's just kind of a pretty basic way to kind of show the user after the app is loaded if there are no items then someone needs to go ahead and create one this will be more of like a thing that the user sees the first time the app loads and no one's created anything so we've created the function for fetching uh and for loading the nfts but in this view the user is also going to have the option to purchase an nft so we're rendering that array of nfts but we also want to give the user the ability to buy an nft so we're going to create a function called by nft and this is going to allow the user to connect to their their wallet so to connect to the wallet we can say we want to use web3 modal and this is going to go ahead and look for the instance of the ethereum being ejected into the web browser and then we can say web3 modal.connect and if the user is connected then we will have a connection that we can that we can work with and we can now create a provider using that that user's address or that user's connection and instead of using the json rpc provider we're going to be using the web3 provider and we're passing in the connection and since we're going to be writing an actual transaction not only do we need that user's address but we need them to sign and execute an actual transaction so to do that we want to create a signer and we do that by saying provider.getsigner and now when we call the contract we can now or we get a reference to the contract we can say ethers.contract and instead of passing in the address and the abi and the basic provider we're now passing in the signer as the third argument all right the next thing we'll do is we want to get a reference to the price and the price is coming in as an argument off of the nft so we're going to be mapping over the nft again a second ago in the load nfts you know um function here we kind of had a reference to the price here and that price is going to be available to us as nft.price so we're going to say nft.price to string and we're going to be parsing that and we're basically going to be kind of like transforming that back from that basic uh you know string into a number um that we can basically you know use here all right so the next thing we want to do is we want to go ahead and create the market sale so in our contract we have a function called create market sale in our smart contract so here we're going to call contract.createmarketsale we're passing in the address as the first argument again coming from the import of the configuration that we'll we'll set up later on and then we also pass in the nft.token id and then the value that is being sent is going to be the price so this is going to be the money that's going to be transacted out of that user's wallet into the other user's wallet we're going to then call transaction.wait and this is just a way to wait until this transaction is actually executed because maybe we want to wait for this transaction to finish and then do something and in our case the thing we want to do is reload the screen because we want to go ahead and remove that nft by reloading and you know calling load nfts in our case again so after the transaction has happened load nfts should now have one less nft because by nft only shows the nfts that are not sold and since we just sold that nft it shouldn't show up anymore all right so we now have our uh our functionality finished as far as the actual code is there and now we can go ahead and update our main ui so no more we only had two main functions you know one for loading the nfts and one for buying and buying an nfc all right so the next thing we want to do is uh let's go ahead and create a new div with some styling that we're going to be working with and here we're going to set the flex flex box and also setting the flex to justify center so we can center the things that are happening here next we're going to create another div and here we're setting the class name as padding x of 4 and i'm setting a max width of 1600 pixels manually like not using tailwind now you could also go into your tailwind configuration and set this up yourself but it's a little bit extra work and i think like for this demo purpose we want to kind of you know say if the user has a massively wide screen we want to stop it at 1 600 pixels and this is kind of a simple way to do that um the next thing we want to do is like we have one more you know div inside this div so we're kind of going nested now to where we have um let's see here we have three levels of divs so if i go ahead and like you know do that you'll see we have the main container we have this child container and then we have our flex container i'm sorry our good container and this is a cool way to kind of have a responsive design so when there is a very wide screen we're gonna show four columns as the screen gets smaller we're gonna have two columns and then when it gets really small we're going to show one column so this is just a kind of a way to do you know some responsive design all right so next we're going to go ahead and map over the nfts so to do that we can go ahead and well i'll kind of i'll start writing this from scratch actually so we can say nfts.map and we're going to return for each nft we're going to return you know something and not only are we going to maybe return the nft or get the nft in the argument let's also get the index and the index is just going to allow us to kind of set the key and you know there's a couple ways to do that but and you can use the id or something like that all right so we're going to be mapping over the nfts and for each nft that's in that array we're going to return like a div and here we're going to set some styling so the styling that we're going to be working with i'm just going to go ahead and copy that here and we're going to set the class name to um you know i've been using other you know styling there so just check it out i'm not walking through every single piece of styling but in this case we're setting the border um to be one pixel we're setting some basic box shadow we're setting rounded xl meaning we're going to have border radius and then we're setting the overflow to be hidden um and we're going to go ahead and display the image so we're going to say the image source is the nft.image we're going to then have a section to show the nft name as well as the nft description so for the nft name and the description we're going to put this in another div with padding of four i'm setting a fixed height for this piece of a ui here mainly because you're going to have inconsistent you know um lengths here so the nft name might just be a single line or might be two or three lines for other nfcs but here we want to kind of like set a fixed height so the ui looks consistent you know across all the different items we also are setting the nft description here so here we're also setting the height we're setting the overflow to be hidden and we're setting some basic styling like for the text to be gray here and here we want the text to be semi-bold so this is going to show the the nft name and this is going to show the nft description and the last thing that we want to show is the price so right now we have only we have not displayed the price and we also want to give the user a way to purchase the nft so the way that we can do that is we're going to go below this last div here and here we're going to create another container with a black background so this will have a white background and then this will have a black background and um here we're going to be displaying the price so we're saying nft.price and then we're staying in eath when in reality of course you know this could be matic and or maybe we can just go ahead and set that here matic and here we have a button that allows the user to say by nft passing in the nft and then this of course is going to invoke this by nft function so um with all of that ui in place we've now kind of have this this component finished so what we can now do is go ahead and uh test this thing out so the the one thing i didn't realize uh just now is that when i reference the contract for nft market i'm actually looking in the wrong directory so here i'm saying contract slash market actually needs to be nft market that's sold so that's kind of one fix there before we kind of go ahead and test this out and deploy this so uh what we want to do now is like deploy and test the entire application now we're not going to be able to do the transactions just yet we'll get to that in just a moment but for now we just want to go ahead and deploy the contract locally run the node query and just make sure that it's kind of you know generally working so the way that we can do that is we want to update our scripts folder with a file called uh you know deploy now we already have a sample script so let's go ahead and just rename that to deploy and this is going to be our deploy script and um you know by default we see that we have some comments we even see that we have a basic deploy script now this is a pretty cool deploy script because it's essentially you know what we're going to be doing so for instance instead of saying you know greeter we're going to be saying nft market so we can kind of just replace you know greeter with nft market and then we might just call this like nft market and we might say we want to wait for nft market.deploy and this doesn't really need any arguments and um we can say oh wait nftmarket.deployed and then we can say nft market deployed to nft market dot address so that's kind of cool like you know we can just work with that code so we've deployed our nft market now let's go ahead and deploy the nft so here we have nft is is being set to hre dot ethers dot get contract factory passing in the nft um we're also going to go ahead and create a reference to wait for the nft to actually be deployed using the nft market dot address is the argument because we need to set that address in the nft marketplace if you remember the next thing we want to do is just wait for this to be deployed and it looks like that's already being like you know written here for us and it looks like it's giving us that code as well but yeah basically we want to say we want to we want to console.log the nft address as well as the nft market address because we need to update our config.js with those values so um how do we go ahead and deploy this locally so let's let's go ahead and check that out so to do that we're going to go ahead and open our terminal and i might crack open a couple of windows the first thing we want to do is run a local node so to do that i can run npx hard hats node and this will go ahead and run a local node for us it looks like i already have something open so let me go ahead and figure out where that is and close that all right we'll go here and try that one more time all right so we have our node running next i want to go ahead and deploy our contract so to do that i can go somewhere like here and i can say npx hard hat run scripts slash deploy and then we want to set the network to be localhost now if this deploys successfully we should see some transaction happening here and then we should see that we have the contract address addresses logged out here so we have our nft market address let me go ahead and copy that to my term to my clipboard and then we have our nft address here and we're now you know set up locally for everything to kind of like work so let's let's try testing this out and to test it out on our client we can run npm run dev again and go ahead and start up our project on localhost all right well nothing exciting but we do see no items in marketplace and we also see no errors which is really cool that means we are you know so far so good um we still have some work to do so let's let's get back to it and continue writing the code so the next um page that we might want to work with is maybe the create item page so someone can like create an item so let's go ahead and and do that so in pages let's go ahead and create a new file called create item.js and here we're going to go ahead and we go and close some of these files that we're not using anymore here we'll go ahead and start off by importing the the things that we're going to need so we're going to import use state from react like before ethers from ether is like before we're importing web3 model like before we do have two new imports one is the ipfs http client and this is a way for us to interact with ipfs for uploading and downloading files we also have the used router hook from next router and this re used router hook allows us to programmatically route to different routes using using the router it also will allow you to read you know values off of the the route uri the next thing we want to do is create a variable called client and we're setting it equal to the ipfs http client passing in the url here um this is an inferior url that that you can use that basically you know sets and pins items to ipfs they're all types of other nodes that you can work with you can use your own pinning service or whatever you like but for this tutorial this uri that i'm using here should work fine the next thing we want to do is we want to import the nft address and the nft market address like we did before from our configuration we'll go ahead and import our nft reference as well as our nft market reference for our abis so we have our market and we have our nft the next thing we'll do is we'll go ahead and define our default export or our component and we want to create a couple of pieces of local state using use state so the first one that we want to set is the file url this is going to be for the ipfs file that we're going to allow the user to upload and then we also want to create some local state for the form input so this this component allows someone to create an nft so we want to allow them to upload a file we also want to allow them to set the price of the nfc the name and the description of the nft so we do that by using use state but instead of passing in a boolean or a string or a number or you know some other value we're actually passing in an object and this object is going to contain the price the name and the description values and then the next thing we'll do is we'll go ahead and create an if a reference to the router using the use router hook and we'll be using that in just a moment all right so we have our local state ready and we'll create a i think we have like three functions that we're going to be creating here the first function that we want to deal with is for creating and updating the file url because right now it's set to null and we're going to have a form input so we can have a function called onchange and then we'll attach this to the input handle or the input for the for the user's file input on change is going to be invoked with an event and this will have an event.target.file array which will be containing one item so we're just going to take the first item out of that array and then we can have like a try catch block that we can work with here and here we'll just log out the air if there's an error and then in the try catch block this is what we're going to use to go ahead and upload the file to ipfs so we can say const added is a weight it's equal to await client.ad and we're passing in the file you can also do a progress like callback and if we want to do that we could you know add in this this argument here where we're saying progress and then we can just console.log the progress of the file upload and then after this upload it's complete we'll have you know reference to this added variable and using that variable we can now set the url of where that file is now located because we know it's going to be at ipfs.infurio.io ipfs and we can say the slash added.path is the path that's given to us after the upload and then we can call set file url passing in that url and then now when we create our nft we know where that file lives next we want to create the functions that allow the user to list an item for sale so to do that we need to basically have quite a bit going on so we're going to break this up into two separate functions we're going to have one function that allows the user to create an item and you know create it and save it to ipfs which is going to be kind of the reference to the nft because not only do we have that that url referenced locally but we want to kind of upload a json representation of the nft including the name the description um the and the um the image so you know quote-unquote image it also could be a video or something like that of course um so we're gonna have two functions one for creating that item and saving it to ipfs and then the other for creating the sale or listing the the item for sale so the first function we'll create is for create item and this is going to be what lists or creates the item and saves it to ipfs so we're going to first need to get the the values from the form input so we want to destructure the name description and the price and then for some really basic um form validation we can first say okay if there is no name if there is no description if there is no price or if there is no file you will file a url we want to go ahead and return because you don't want to let them list something if it doesn't have those values available we then want to go ahead and stringify the name the description of the image and a variable called data and then we can basically save this value to ipfs using the the same thing that we did earlier where we kind of called client dot add and here we're going to say const added is equal to await client.ad and then we're going to go ahead and set a value called url and this is going to be now the ipfs path that includes the name the description and the the image url to a separate ipfs location so we have two things happening now with ipfs and then with that url we can set this url as the um the token url by calling this function called create sale that we can go ahead and create now and you could kind of like think think of create sale it's kind of like listing an item for sale but we're also creating the nft and you know in the same in the same function so we have two things really going on so very similarly to how we worked with web3 modal before we call um a reference to web3model.connect we then get the provider we then get the signer you know the same thing we did before um so now we have the signer the thing that we're going to do here again we're going to be interacting with two contracts the first thing we want to do is interact with the nft contract so we create a reference to the contract we say ethers dot passing in the nft address and the api as well as assigner and what we want to now do is we want to call create token and this is going to go ahead and create that token and now we want to go ahead and wait for that transaction to succeed and what we now need to do is we want to get the token id return from that transaction and this is a little complex because you can't just wait for that return value and use it as is you have to do some modification based on the return values so there's an events array that we get back and we can say we want to go ahead and get a reference to that events array by calling transaction.events and getting the zeroth item and then within that array there's another array called args and we want the second value out of those arguments i'm sorry this will be the the the third value because it's zero index so zero one 2 so this is the third item and then that value needs to be turned into a number because right now it's a big number and we want to turn that into a number so we can call it that number so now we have a reference to the token id the next thing we want to do is we want to get a reference to the price that we want to sell this item for and the way that we do that is we call dot parse ethers.utils.parse passing in the form input.price and then ether and this is basically going to turn that one basic number to like that very large number with all of the zeros essentially kind of like turning it into whey you could you could think of all right we want to now you know move the reference of the contract away from being the nft to now we want to create a reference to the nft market address and nft market contract so we can now you know use that same you know reference to the signer and we're now going to be changing the contract variable to now be referring to the nft market contract we want to get the listing price so we call await contract dot listing price we turn that listing price into a string because we want to be able to basically send the value within this transaction to you know the the contract to make sure we're paying for that for that listing fee we wait for the contract dot create market item to succeed and here we're passing in all the values that we need we're passing in the nft address which is the you know the contract address for the nft we're passing in the token id and the price so here i'm kind of like putting this item for sale i'm setting you know the token id as well as the price and then the value that's going to be extracted from my wallet is the listing price and then we kind of wait for this transaction to succeed and then now we want to go ahead and reroute the user to another page so we're going to say router.push and we're going to send them back to the main page where we're going to then refetch these nfts and we're going to render them all right so now we can go ahead and return our ui here we basically want to have a form for the user to be able to interact with our you know the the functions that we just wrote there so i'm going to wrap our form and a couple of divs the first div is going to be a flex flexbox container justify center and then this one's going to basically set the width as like one half so um you know some very very generic width it's probably not perfect on a responsive site but it's kind of a good start um the next thing we're going to do is we're going to have inputs for the asset name or the nft name and here we're calling you know the placeholder of asset name and we're going to call update form input and whenever someone types into this we're going to basically be updating you know that local form input variable and update form input will basically return all the existing form input and it will only change the name so asset name we're setting the name and then we're setting the value to be event.target.value for the description we're not just using a basic input we're going to use a text area to give the user a little bit more room to type but a very similar thing happening on the own change handler we're setting the description and just like here we set the name so this sets the name this sets the description and you can guess what the next one does it sets the price so here we're setting the asset price price in each but in our case maybe we could say matic and this updates the price and then finally we want to go ahead and show the um file input and instead of using input with an onchange handler like with the event being passed and doing that we're just going to call this unchanged handler that we defined earlier and we set the type of input to be file we want to have a button that allows the user to create this digital asset so we have this button we're adding some you know class name to it to give it a little bit of styling i'm going to go ahead and format this a little better so we have a button with a font you know we have a margin a background things like that and then the inputs that we're working with have you know their own basic class class names as well margin border and padding and things like that now the last thing we might want to do is kind of like show a preview of the file so to do that i might go ahead and say if there is a file url meaning that like they've uploaded a file we want to show an image with the image source being the file url so um that is this component we've gone ahead and created that we should go ahead and save this and maybe test it out so if i go ahead and refresh and we go to sell digital asset if everything works as intended we should now see a function but i think it looks like i'm referencing the wrong function so i need to reference the create item function here so let's try that again all right there we go so um our app is loading i have now you know the ability to navigate between home and sell digital assets so let's go ahead and test out selling a digital asset um and we still have to go ahead and fill out these other two components but for now i'm going to go ahead and open metamask and i can switch now to my local hosts so localhost 8545 and um i need to now have a wallet that has some some some data or not data some some ether in it so i can do that by opening up my node where i ran you know my local node and i can go ahead and import one of these accounts and when you create the node it gives you the account id or the account address as well as a private key so i can just like copy this private key and for testing purposes i can go ahead and like say i want to import an account private key boom we now have 10 000 eth and we can maybe test this thing out so i'm going to go ahead and try that out so i'm going to say my first nft we'll set our price and upload a file so here we should be able to go ahead and choose the wallet that we want to work with i'm going to use the one with ten thousand each oh it looks like we have an error um it looks like when we called create token we're not actually passing in that url so what we want to do is make sure that when we call create sale we're getting that url here so let's go ahead and save that and try one more time all right now we're being prompted to go ahead and you know pay some gas to go ahead and create the token we'll go ahead and confirm that and now we're being prompted again to actually put the item for sale so we're paying that listing fee of .02 as well as some gas so the total including the gas is like .026 so we'll click confirm and there we go we're now viewing the items for sale so we got a digital sell digital asset and navigate back to home we see that we also see a link to go ahead and buy it so that's great if we go to my digital asset or create our dashboard though we're still getting 404 so we have not yet created those so let's go ahead and continue on and creating this so to do that i'll go ahead and open my text editor and the next file we want to create is for our own assets so we have that link for my assets so let's go ahead and create a page for that called my dash assets dot js and here we can go ahead and start writing our code this is going to be kind of similar you know repetitiveness from some of the stuff we've done before we're importing ethers we're importing use effect and use state we're importing axios we're importing web3 modal we're also importing you know our references to our address is we're importing a reference to our abis for nft as well as for market and again i want to update this to make sure we're getting the market dot soul slash market.json um we have our main component name called my assets and this is the function or this is the component where we're calling the function where we're only returning the items that we have purchased ourselves so these are going to be the items that we've bought um so i'm going to run this for this a little quickly more quickly than some of the other stuff just because we've covered a lot of this already so we'll have a couple of pieces of loading state we're going to have i'm sorry we're going to have a couple pieces of local state one is going to be for the array of nfts one is going to be showing the loading state of loaded or not loaded we're going to then call this function or we're going to have a function called load load nfts that we can call and use effect and we'll say load nfts and the load nfts function is going to basically be very similar to what we've done before um in this case we're you know still using web3 modal i actually don't need to pass in any of these arguments here i don't think um so we're using web3 modal and instead of like when we called to query the array in the main index where we were just calling using the json rpc provider in this case we actually do need to provide a signer because we need to know who the message.sender is so we're kind of combining a little bit of functionality from a couple of other components that we worked with so we're using the signer to get a reference to the uh the market contract because we actually need to pass the we need to know the message.sender meaning that if we navigate to this page and we haven't already authenticated with a wallet we will automatically see that wallet modal pop up we then fetch the tokens i'm sorry we then fetched the market items um you know calling market contract dot fetch my nfts we map over them we do some of that similar functionality where we get the token uri we get the token metadata we update that here and then we set the nfts and we set the loading state we check to see next if the loading state is loaded and if there are no nfts we basically give the user some feedback saying hey you have not purchased anything so there are no nfts and then finally we'll go ahead and return our ui and here we're going to have similar layout to what we did in the past where we kind of have a couple of divs for layout and within this center div is where we call nfts.map all right so we're kind of like mapping over all the nfts and here we want to go ahead and return something and in our case we're going to be returning just you know a view of the the nft itself with the nft image as well as the nft price that we paid so fairly simple um ui compared to the ui where we're actually giving a button to like purchase an nft so now if we go back to our app and we refresh um it looks like i maybe mis named something yup this needs to be lower case so let me try that again so it looks like everything's working now so we have a list of the assets that we've purchased but we haven't purchased any so it says no assets owned and then home now the last thing we'll create is the creator dashboard so if we click there it should be 404 so let's go ahead and create a file called creator dash dashboard and pages and in creator dashboard this is where we're going to go ahead and do similar functionality like we did in my assets but in this case we're going to be creating two views or we're going to have two different arrays of data so we'll go ahead and do our imports you know same as before ethers use effect and use state as well as axios we're importing our addresses we're importing our contract apis you know market and nft you know same stuff we've been doing of course i want to go ahead and update that um we want to have a component called creator dashboard and instead of having just a single array of nfts we're going to have two arrays one is going to be arrays that we've created i mean i'm sorry nfcs that we've created it's going to show everything and then we also have a separate array just for the items we've sold so we can kind of have like two different views similarly to before we have our loading state we have our set loading state we have our load nfts function very similar to our other load nfts function the main difference is that not only are we going to have our um let me go ahead and delete that actually i don't think we need that so the main difference is that right now we have our items array that we've uh you know the same items array we've been working with we kind of like map over the items we also want to create a separate items array where we map or we see we filter through the items array here and we also attach like a check to see if the item is sold so we have now two arrays we have the the the array with all the items that we've created and only for the sold items and then this way we can go ahead and set the sold items as well as the just all of the items themselves so now we can kind of basically have two separate views um we first want to show a list of the items that we've created period like all of the items and then we also want to have a view of only the items that have sold all right so to do that i think the first thing we'll do is just map over all of the nfts so um kind of going through this faster now because it's very similar to what we've done before where we have some layout we're saying nfts.map and uh you know we're kind of like only uh i'm sorry we're returning all the items that we've created period we also want to have a separate view here so we have um this view here or this array here and then we're having another one here now this is gonna be a little bit different because we've already we basically want to see if we have any items in this array period and if there are then we want to go ahead and like you know map over them or you know in reality it's just literally an array but i think the main difference is that like we can show and toggle a title if there are items that have been sold by doing some logic like this where we say boolean sold.length meaning like if this is true we can actually you know go ahead and return a div and this will hold all of the ui we want to kind of show in this case all right so here we might go ahead and show like a title or an h2 or something where we're basically saying you know these are the items you've sold we're going to now have a grid similar to what we've written before and now we can basically map over that item that array of items so we can say sold.map and this is mapping over those items so i think with that code being written i think that's about it so we can go ahead and maybe test this out so i'm going to go back to my go back to chrome and now we should be able to navigate to creator dashboard and see that our items have created have been there or are there so now we see that all of our routes are working we have my digital assets create our dashboard and home um and i think the next thing we might want to do will be testing out the functionality so we want to test out like does this actually work if we you know make a sale and then does that value get transferred between different owners so to do that we might go ahead and go back into you know our hard hat and create another account using one of these private keys and then create a transaction so i'll go ahead and say import account and now i have account four so i will go ahead and switch to account four and it looks like now i'm on account four so what i want to do is try that so i don't know i think this should work um let's go ahead and click buy and go ahead and click confirm and if we go to metamask it looks like yeah it looks like the amount of uh ether has been taken out of my wallet and if i go to creator i'm sorry if i go to my digital assets yeah looks like i paid 1000 for this and it looks like that the seller now has 1999 which is basically you know 11 000 minus the gas cost so yes that's awesome we've gotten there we're getting there i would say um the next thing i might want to do would be to go ahead and deploy this to the mumbai test net so to do that i need some ether so to some test matic actually so i can go to the mumbai test net faucet and i can go ahead and request some test matic but before i can actually see that i need to connect to that matic network so earlier we had opened up the polygon documentation so again if i go to developer proof of stake chain click on network details network i should be able to see the mumbai test net configuration so basically what i want to do is i want to import this into my wallet so here i can go to custom rpc right here i'll call this mumbai the rpc url chain id is eight zero zero zero one you know symbol go ahead and save that and now we are officially connected to the mumbai test network and it looks like i've used this account earlier at some point i would say to to request somatic but let's say i had it i could just copy my address here and go to this local or this testnet faucet click submit click confirm and it looks like the transaction succeeded so at some point i will have another 0.1 matic sent to this account which will you know allow me now to go ahead and deploy from this account so to deploy from this account the main difference that we need to do is like we've already set everything up in our let's see here in our hard hat config where we have our um you know network stuff set up the main thing i need to do is specify mumbai when i deploy so the way that we can do that is we can go to where we deployed last time where we ran npx whoops hard hat deploy this this time instead of saying network localhost we can say network mumbai now i need to make sure that the address that i'm referencing with my private key actually has some testnetmatic so the way i can do that is just go ahead and send somatic to that that address so i think that was account number two and here i can go ahead and copy this address and we'll go back to the faucet i'll enter this new address here go ahead and send to that address try it again sometimes this thing errors out all right so we've sent to this address now all we do is wait so um in a moment we should have our matic and this wallet and then we should be able to go ahead and test this out so it looks like it's already there so 0.1 matic so i have that um or was it to account one actually let me send um i think that was account one so let me go ahead and actually send it to account one all right so we sent tokens to both accounts so theoretically we could use either one but let me go ahead and wait for this to come through all right there we go we see we have our 0.1 matic so now we should be able to go ahead and deploy this contract from this so to do that i'm going to go back to my terminal and i'm going to go ahead and run this script and see what happens now this deployment is probably going to take a little longer than deploying to your local node of course so we'll give it a couple of seconds all right looks like we are getting something um oh it says insufficient funds for this transaction call so i guess because i'm deploying you know two contracts um it's gonna cost more than that so what i can basically do is just i'm going to go to this account where i have a bunch of matic and i'm going to send like everything i would say and i'll jump back to this account and wait for that to come through and there we go we have our point three matic and we're going to run this script one more time all right there we go we've officially deployed to the polygon slash matic network so let's now test out our front end application now the great thing is that we don't really need to change anything or i wouldn't say anything we don't have to change a whole lot to make it work um the one thing we want to keep in mind is that we've now switched between networks so um you know if we if we've connected or anything like that to any of these accounts we need to kind of like go ahead and consider disconnecting our our connection but you're going to notice probably that when we load this that this is going to error out or something like that the main reason what we need to do we need to do two things to make this work actually first of all we need to set the json rpc address to the mumbai test test net because we're no longer working with localhost so the way i can do that is i can go ahead and copy this this url here and the only place that we're using json rpc provider is in i believe in index.js and here in load nfts we can now pass in the json rpc provider there and then the other thing we want to update is our config.js config.js we need to update our contract addresses so for the nft market i'll go ahead and copy that here and for the nft i will copy that as well and we'll go ahead and save that and we'll go ahead back to our terminal and just for the the sake of it maybe restart our dev server and then we'll go ahead and open up our app on localhost 3000 and see what happens all right so it's looking like it's working so let's go ahead and click through and and try out different things so it's now asking us to authenticate with uh with metamask so we can choose the account we want to work with maybe i'll choose one of these accounts that actually has somatic now remember there is a listing fee so i went ahead and took the liberty of requesting even more test net faucet matic so now 0.39 matic you know i'm kind of rich at this point so let's go ahead and test this out by listing or selling a digital asset so i'll go ahead and set the price to actually you know i guess one it's fine because we probably won't execute the sale because we don't have you know a wallet with that much matic but uh we'll go ahead and list it and now we'll go ahead and confirm this transaction and we can now confirm the second transaction and it looks like we have officially listed an nft on matic so if i go to creator dashboard i now see my item if i go to home i see whoops i should see that item listed um looks like i'm running into some type of network issue now so let's see what's going on there um all right so it looks like um that you know that rpc address i was using was was not working it was probably getting overloaded or whatever so i i went ahead and switched over to this custom rpc address and come to think of it i'm wondering no i don't think so but i was just wondering if maybe because i actually transacted to that rpc if i needed to now be on that rpc would make sense i don't know the answer to that um but um you know we've we've come a long way i think the last thing we would want to do at this point would be to deploy to the main matic network now really the only difference to like what we would need to do at this point would be we would need some real matic tokens and we need we would need to be on the realmatic network so let's go ahead and switch over to the realmatic network um we'll go ahead like i mentioned um like before how we did the mumbai network we can go ahead and say we want to [Music] go to settings we want to go to networks we want to click add network or we can go here we can say custom rpc either way so the network name is going to be matic mainnet the rpc url is that the chain id is 137 currency symbol would be like matic and now we have the matic network and we're now connected to the matic network so all we would need to do would be to get some matic tokens and then we would be able to deploy from the matic network now i don't have any matic tokens that i can use right now i do have some but i don't think i don't feel like transferring them over and showing this would be like that much value value add because it's really exactly what we've been doing before but for instance the only thing we would do differently would be we would run this same script and we would say network mainnet and this should fail because it should say something like hey you don't have enough money to do this so we'll go ahead and like maybe see what happens if we try this and we get that failure yeah insufficient funds for transaction costs so i think that actually wraps up this video this has actually been one of the longest videos that i've ever done and it's taken me a while to kind of like get through all this and i'm hoping that through all this you learned a lot and really if you do want to follow along with this you know writing this actual code i recommend going in and seeing the code examples that are linked in the description below and copying and pasting those if you don't want to kind of like write all this by hand so that is it thank you for checking out this video we're wrapping it up now and thank you for watching and i will see you around for the next video

Channel: Nader Dabit

Views: 86,990

Keywords: solidity, ethereum, javascript, blockchain, blockchain development

Id: GKJBEEXUha0

Length: 141min 23sec (8483 seconds)

Published: Wed Jul 14 2021