Transcripts
1. Course Introduction: If you are part of the
cryptocurrency space, there is a chance you
might have heard of this trending digital
asset known as NFT. This course covers
everything you need for a de-centralized
NFT application, according to the
ERC 721 standard, users will be able to sell and purchase NFP is weed
eater in our marketplace. The first part of the
course covers writing and testing of smart
contract using solid. The inherited other half will be focused on building
the UI using next, chairs and Tailwind
CSS, an estimator, that data will be
stored on pinata, which is an IPFS based storage. By the end of the course, you will learn all the
concepts required to apply for a web developer job or even build your own startup in
the blockchain industry. So without wasting
any more time, enroll now and
let's get started.
2. Create a new hardhat project: Hi, welcome to the very
first video of the course, where we're building a NFT
marketplace from scratch. So in this video, we will
discuss about the course roadmap as well as set-up
our development environment. As you can see on the screen, there are various steps
involved in this course. The first step is to set up the development environment
using hardhead. Then we will create a smart contract that tracks
and stores and if the data. Then after we will write
unit tests to make sure our smart contract
is working properly. The fourth step
will be to deploy the smart contract to
that test network. After that, we will work on the front-end and we will
use next years for that. Then to interact with a
deployed smart contract. We will use a test.js
and MetaMask. And finally, we will test
the complete working of the application so that you can show this project
in your portfolio. Before moving forward,
make sure you have installed MetaMask
and have some test. Golly, it tears in your account. I'm not going to set up again. Please watch any tutorial on it and continue
with that course. So my task is just a
very simple process. Then after to get that
test, call it test, there are some
faucets that you can google and enter your address. That's it. So now here you can see the whole tech stack of our
decentralized application. That is solidity we are
working on itanium is hardhat. We will be using in future as the blockchain node provider. It test.js, that's it. These are the things
which we will be using. Now, let's start working and that we have to create
a new hardhead project. So what is hard, hard hard hat is an environment
developers use to test, compile, deploy, and debug decentralized
applications based on their
Italian blockchain. If you want to know more, you can go in their
official website as well. You can see this is hardhead. And here you can read
more if you want. I will just start creating
a new folder and name it. Nft, market place. Dap. That's it. Then inside it, I will create, I will open a new terminal. And the first thing we
have to do is create an NPM project using
this command npm in it. What? It will then empty npm
project. That's it. Then I will simply install hardhead using this
command save dev hard hat. That's it. It will just
take a few seconds. Now to create a
hardhead project, we will use n p x
hardhead command. It will give us the
boilerplate code. I will just press enter. Then I will create a
JavaScript project entered. And then that's it. After that, hardhead is telling us to install
these dependencies. But this is an update which
is just a one-week back. So I am more comfortable in styling that
dependencies separately. That is hard at where
full hired hard eaters, which makes hardhead
compatible with test and help us to interact
with the smart contract. So I will just write
npm install save dev. First thing I will do is. The night that it
now make labs slash, I'd had full rate to find 0, then space. Again. It tedium that a 3. Then chai 4. Then, then I will use again. Now make labs. Had ethers 0. And finally ethers that it by 0 and press Enter. If we get any added, we will just solve it. But in the official
documentation, you can see everything
here, how to run. And this is npm
install save that, then we will use, then we
add using NP x hard hat. Then we are creating
a JavaScript project. That's it. Here, the add
installing that tool box. But I am just installing all
the dependencies separately. That's the difference. It will take some time. Now, let's open our
project in the VS code. I will just simply
write code space. It will open that folder
in our VS Code Editor. In that package or Jason, you can just shout cross check
everything is installed. R naught, that is very full. Ito's Di Italian wasteful
eaters and Hardhead. So everything is installed. Also. Make sure you have extensions installed
at these extensions. It is Dart. Then I have next year
snippets as well. Then I have this
tailwind CSS installed. Then also there is
this new plug-in. It is hard hat. I've installed
this as it is from gnomic conditions that is the official installed
this as well. So that's it for this video. In the next video, we will configure the inferior
and MetaMask settings. Thank you.
3. Alchemy and Metamask Keys: Hi, welcome back. In this video we will set up in fewer and my damask
in our project. Hardhead gives us few
folders and files. We will understand all
of those step-by-step. But let's go to hardhead
dot config dot js and make sure we are pointing our network to correlate
Italian test network. For that to work, we need caudally it TDM node
URL and a wallet address. As I already have accounts, I wouldn't be creating a new accounting
inferior end MetaMask. You can Google it and
do it on your own. It's very simple and
straightforward process. Let's open our browser
and go to infuse. But IO. After signing in, we have
to create a new project. Network will be this. We have three API formerly
itanium and just simply name it NFT marketplace
and click on Create. Then here, just change the main two core Lee network and simply copy this URL. Then. In the hardhead conflict file, you simply write
below this solidity, you simply write networks. Then like this. And have curly network. Now, paste that keys. We want paste this waste
dose directly in our code. We will be using some libraries. The first library we will
use is that dot ENV package. Because it is not recommended to paste those
sensitive information directly in their application as those can be
misused by others. The second library we will
be using is appends a plane, which is a library of
modular, reusable, secure, smart contracts for the Italian network and
return in solidity. It allows to leverage standard, tested and community
reviewed contracts. You can search, opens
up link if you want to. Like this. If you want, you
can directly search it and read on your
own what it does. I will simply append
that and write npm. Install Zeplin slash contracts and not ENV. Let's enter. Now, just cross check. Everything is now installed. Okay. After installation we have to create a dot ENV file, that is dot ENV file. And bass staff following keys, that is our inferior as
well as our public key. I will just create a
variable called n few. Url is equal to like this. And second wallet. But I read k is equal to this. Dot ENV is directly in
that root directory, not inside any contracts
or test and all. Now go and paste those keys. First is inferior URL, and second is that MetaMask key. You can install my thomas
by going to my Thomas.io website and install the
extension for your browser. Then simply click on the mask. Then enter your password. Then go to Settings. Just wait. First, I will click on
this second account. I will write account details. Then export private key. And daddy are password. Press, Enter, and copy this key. Make sure you do not share
this key with anyone else. It is a very personal key. It has to be secured. Then just paste it
inside here and save it. Now you don't have to use it. After this. Go to hardhead dot
config dot js, and make the following changes. Here. In the URL. At the very top, you just simply require dot, dot ENV, dot ENV, dot config. Just simply write it. Then inside that girly the URL, you simply have to
write process dot ENV. In Beulah URL, it is
the variable name. And in accounts, you
will simply have to re, within the square brackets
process dot ENV, war led. But I read key. That's it. So this is how we configure
our network to the godly. Also, you can write
hard hat as well. If you want to test it in
the local environment, it's up to you. I will prefer curly as I know, that everything is
working in this code. So that's it for this video. In the next video, we will be creating
our smart contract. Thank you.
4. Creating NFT marketplace contract: Hi, welcome back. Let's create our
first smart contract. Simply create a new file inside
the contracts folder and name it NFT market, dots soul. Then as always, we have to mention the solidity compiler
and now we have 0.8.9. Saintly copy these two
lines and paste it here. Then create our contract using the contract
keyword and name, NFT. Market, place. Like this. Now, we have to import
our dependencies. The first import will be
opens a plane on track, slash, deals, counters, dots. So then the next thing we have is gone tracks slash slash, C, 721, lash extensions, ELC 721, URIs, old age. And finally, we have we have this that is contracts token, ERC 721, ERC 721 dot. And now we have to inherit
with ERC URI storage, that is 71 URL storage. And the first thing
we will do is create some variables
using this counter, that solubility these counters,
counters dot counter. Then the first when I read variable
will be token IDs. That is number of
DOMS ever created. And second, Would it be
counters, start counter. But I read items sold, number of items sold. Now, you can also search this
open Zeplin and then ERC 2721 and read The
functioning what it does. Then here you can see C7 to T1. Here you can see
what we are using this counters than ES is 721 token and all different
different versions. It's important to know which version to reduce
or what we're using. We're using different version. I can see all the documentations get updated time to time. But dagger functionality
will be same. The next variable I will
do is that listing price, which will be 0. Here's 01 E third. And this is what we have to be to list their NFT
on our marketplace. So this is the
commission or what? Not the commission. It is just a listing fees. Then we will have a
variable known as owner that is not off the
smart contract. Now let's create a constructor. That is, it will
run only once when we are using this year C7 to T1. And we have to use this things. That is, we have to give name C, you have to give it
a name and a symbol. I will just simply name it. Mad Towers. Tolkien's, and give
symbol met up. In that constructs
a constructor. We're not accepting anything, but we will make
sure the owner is the person who is deploying
this smart contract. So this code is required when
we are inheriting to this. So this is not being
written by us. This is prewritten
pretty written by open Zeplin
library. That's it. Now, let's continue. So now I will create a struct, which will be market item. Struct is just our own datatype. It is just a collection
of primitive data types. Primitive integer, address,
boolean, all this. So what should one NFT or the
market item will consist? It will consist that token ID. Then it will have the
address of payables seller, that it will have the address
of owner at that moment. Then it will have tab
price and a boolean, which is that is sold or not. And now we will have
a mapping as well. That is, the uint8 integer will map to the market item, that is this one. And we will, it will be a private variable and
we will name it id2. Market item, that is, the token ID is being
mapped to the market item. If we give that token ID, it will give us the
whole structure that is hold all the information. The next thing we will
create an event that is market item, created event. It will have similarly
all the same thing. That is un 56 indexed. Can id, then address, address, owner, then UN rights. And Boolean sold. Events, just called so that it is being saved at
the blockchain publicly. You can read more about what that events or
how to emit an event. And if you don't know
the basics of solidity. So that's all the code
for today in this video. In the next video, we will write certain
functionalities to perform certain task. Thank you.
5. Functionality to create a market item: Hi. Now let's start working
on the functionalities. Fun. The first function
we will create is to get that listing price. So just like fun churn, get listing price. Bleak view returns. It is turning you into 56. And it will simply return
the listing price variable, which is this one. So the comment, just write
the command returns listing, place of the contract, listing price of the
market even right. Then the next functionality
will be due. Date. Listing. Simply Wanchun, listing rice. Now, this is this renew and nesting place. Blake. We have to make sure that only the owner can update the listing price. So we have to write owner
is equal to message sender. If it is not, then
simply write on Lee. Market place, owner can
date listing price. And if it is the owner, then we will simply change
that listing price. This listing price, that's it. These are the basic
functionalities. Now the files, the next
functionality will be different channel D
to create a market item. So simply let's say funtion. Create market Item. Then it will be a
private function. I will let you know why. It will accept two things. That is un to 56 Token ID. We will create this token ID. The next video. And next thing is
you and 56 place. So this function accepts
these two things. Now, let's have some modifiers. That is, what are
the requirements? The first requirement is price
should be greater than 0. If it is not, then
we will write must be greater than 0. Then next requirement is message that value should be
equal to the listing price. As we add listing
the market item, the user has to pay some fees. Price must be equal
to this thing. Price. Now, let's do that
mapping id2 market item. The idea will be token ID. And in this token ID we
are saving a market, a DOM object, or you
can say this structure. It accepts OpenID, then message sender. Then this stage that is the owner will be this
smart contract like now, because it is not transferred. Then price and
Boolean value false. That is, it is not
being sold yet, it is just being transferred. Now, we will assume Greg transfer message
sender address, this token ID. And then we will
make this function that is this event
market item created. And it accepts arguments, just tokenizing message, sender. Address. This, then ice and false. So this was now functionality to create the market
item is Token ID. We will meet in
the next function. Then we have some modifiers
that these requirements. Then in this mapping, we are saving this value. It is a token ID. That way that is the seller is the message
that sender and buyer. It is their own node that
or who owns this is this, that is the contract, this smart contract interests. And you might be thinking from where this transfer
from Chinese coming, this transfer function is coming from the append sapling library. So it is an inbuilt function. If you want to know more, you can read about
that transfers, safe transfer, all
these methods. But that's it for this video. See you in the next session. Thank you.
6. Functionality to mint a new token id: Hi. In this video, we'll create the functionality to
mint a new token, as well as create a market
sale for minting in new token. Let's read that comment. Means a token and list it in the market place. Okay? Now the function, it will accept, first of all, definition, name, every layer, name it, create token. It will accept a
string memory token, URI, you and 56. Off price. That is, what is the image URI, as well as what is the
price of that NFT. This will be a public function. It will be a payable and it will return
that dog can id. That said. The first
thing we have to do is increment token
ID, that is here. This is our variable. Inside this counter code, we have this function that is dot increment is predefined
in the open Zeplin. It will simply increment by one, that is 0 to 11 to
two, like this. Now, next thing we will do
is get the current token ID. That is Ids dot current. It will simply
after incrementing, we will get that current and that is from 0,
it will become one. And then here we will
get the one, that's it. Then we will use them main
functionality given us by open Zeplin really meant it
to the message sender. And we will have a new and we will also
send that token ID. Then you will set token URI. Can you add? It will have
a new token ID, token URI. And then now we will use this
idiot market item function. So that is why we
make it private, because we will be
calling it internally. That person cannot call
this function directly. First, he should have
this token ID and all. It will simply accept new
token ID and that price. And finally, we will
return the token ID. And again, these functions are coming from the append
Sapling the library. If you want, you
can go and research what is moving toward this
set token URI and all. But this code is
predefined fermenting. And here we are
calling this function, which will transfer this token. That is first it has been minted to the
message that sender, and then it will get
transferred from message that send that to this
smart contract. And that is why. And that is how it
will be listed on the Marketplace On behalf of the evidence on behalf that is from the owner to this new unit. Like this. Later on you will
understand more. Now. The next thing or
the next functionality we will create is mediating. The sale of a market glaze item. You can also understand
like transfer. It will transfer ownership of the item as well as funds between
parties involved. Okay, so let's start writing. It will be a fun Chen. I will name it
create market, sale. It will just accept
that token ID. It will be a public function and it will be a
payable function. Now, let's start writing you
int I is equal to ID market. We have that token ID. From that, we will get there. But after NFT, like this, then address we'll get the
seller dress idea to market. Then Token ID dot seller. Now we will have some modifiers,
that is requirements. First requirement or
down lead requirement. Is it this message dot value should be equal to
the price of the NFT. That is wild buying the NFT, it must transfer
that correct amount. Skin plays in our diode to complete the purchase. Okay? Now, if it is alright, then we will just
make the changes. Id to market item. Token ID node is equal to. Now we will do some
change that is updation. I'm just simply, I will just
simply write here like this. Will be now payable
message sender. Now and it will change, does sold to true. And then it will make, the seller will address the address of this. It is address 0, that is now
no one is that sale seller. It is already being sold. And this means empty address. That is that address
belongs to know what. Now we will increment
the items sold. It is here, increment this
one as it is now being sold. Then we will use that
transfer function, a function given us by the open Zeplin will
transfer the ownership. This contract message sender. And this tokenizing. Next thing, we will just transfer
the funds that is pay. Well, now we will get that is
owner of the smart contact. Us, really get that
listing price. When someone is NFT, it is 0 something 0.001. And also does seller will get the price of his NFT as he was selling debt NFT in
our marketplace like this. That's it. So this was the fungi. That is, this is the function required to make a market sell. Here we are calling
this function. So I hope you have understood. If not, please try to Google whatever you
are confused in. Because these dot
transferred in all comes from the solidity basics. That's all for this video. See you in the next session. Thank you.
7. Functionality to fetch unsold market items: Hi, welcome back. In this video, we will work on the functionality
to fetch unsold items. First, let's write a
comment that is returns on unsold market items.
Let's name it. French market items. I have name it
fetch market items because in the home
page, that is, when the user goes
to the website, that first page will fetch all the items which are
listed in that market. And if they are
listed in the market, that means they are all unsold. Equally be a public function. It will just return
or that is viewed. You all these variables. It will not make any
changes that so it's view. And it will return an array of market item and we have
to give my money equation. Now, let's do some calculations. Item count will be
Ids dot current. Okay? And sold item count. Will we do that is item count. This token ID is the current minus I, sold, not current. So what is the
logic behind this? Suppose they are to
tell then NFP is in that market and
six are being sold. That means sole item
count will be four. That's why this subtraction. And now we have to loop
through our array. So we will like current index. Let's give a capital
I like it that way. Current index is equal to 0. Then let's have an empty array which will contain our
landmark eight items. Is it good to new
market items array, and this will be land
and sold item count. This. So this is an empty array. We will push items here and
then return this array. Let's have a for loop. Yeah, you int I is equal to 0. I less than item
count I plus, plus. Then if, let's say if statement. If I did do market
item I plus one, because it will start from one owner is equal to address of this contract. That is, it is not
being solely at since we are changing the owner
here if it's being sold. So if it is the, then current id, id will be I plus one. And then we will simply have this smart kid
and I'm storage current. I is equal to id
to cutting tidy. And here it's mentioned
here because since the token ID is
also starts from 0, so this I will be same
as that token ID. As we also increment
Token ID here. When we are creating a token. Then we will have
this items variable, empty array in that
current index that is 0. See if this item, then we will increment
the current index. That is, next time the
item will be stored into one in the index since 0 is already
filled up by this. And this will just go on loop. And at the end,
after the for-loop, we will return data
items like this. We will return this item. So this is how we fetch
the market items. I hope you have understood. If not, please make sure
you stop the video and try to understand the
logic behind the code. As it is the only thing which matters that you
understand the core concepts, how to write functions
on your own. That's it for this video.
Thank you for watching.
8. Functionality to fetch items owned and listed: Hi. In this video we'll work on
the functionality to fetch. Nft is owned as well as
created by the user. Let's work on the
first functionality, which will be turns on the items that a
user has purchased. Okay? Now, give
that function name. Fetch my lefties. It will be a public function. Returns. It will return an
area of market items. Then let's start with
getting it to delight them. Count. Count is equal to. So can IDs that current. Then you end item count. I will explain all that code. Just keep writing. You in. Current
index is equal to 0. Now, the first
thing we have to do is get the number of items. That is the number of NFT
is owned by the user. Here we get that name
number by this calculation. But now we have to do
a for loop like this. It is for you int
I is equal to 0. I less than del
item count I plus, plus if id2 market I plus one, that owner is equal to
message dot sender. Then we will increment this
item count plus equal one. In this way, we will
get that total number of FTEs of this, that is, of which the owner
of owner is the user. And after getting it, then we will do the
same thing as above, like my kid item. Mammary, I guess,
is a good meal. Market item. Now, the length of the
array will be item count. This item count it is the length we did
this part, let's say. Then I will have a for loop. You int I equal to 0. I less than item count. We have to look
through everything. I plus, plus. If AD to market item. I plus one is equal to that is that's one dot o is
equal to message sender. Then we will increment
the current. We will have this
current AD. As before. It will work as work
is that token ID. Then we will get the item. We will get the item from our mapping AD. Then insert that item in
our items empty array, that is current index is
equal to current item. And finally, we will
increment the current index. And then we will
return the items. So this will fetch the items
that the user has purchased. Now, the next function
will be somewhat similar, so I will just copy
it and paste it here. It will return only
items that the user has listed in that marketplace. So I will limit
batch items listed. Then it will be a public
view returns some memory. The hotel item companies
like a little token ID dot current item count
0, current index 0. Then I will have you and I. There's ten to delight them. Count I plus, plus. If id2 market item here, it will be seller that we want
on lead us, on lead dose. We use already selling them. I says dot sender, item count plus one. Then we have is empty at
a bar I is equal to 0, I less than total item
count I plus, plus. If I did the market player
ID to market item here, it will be seller. The message sender. You inked current ID. Is it good to hear? It will work as it
will work as the id. As that is all that. They also start
from 0, then one, then two, then three, that
soy, it is the only reason. Then we will get the, get that item from the mapping. Insert that in our
empty array here, and then return that
item. That's it. So this is their functionality to fetch any of these created, or you can say
listed by the user. So I hope you have learned
and enjoyed a lot. That's it for this video. See you in the next session. Thank you.
9. Functionality to resell and cancel market item: Hi, it's time-related. The last two functionalities
that these two resell as well as can see
a NFT listing. So let's comment first. Allows user to cell A2 can have chased. When Jim resell can you into 56 Token ID. During your 56 price? It will be a public function, will be a payable. Now, there will be
some requirements. The first two columns
will be a D2 market item. Id. Dot owner should be
the message dot sender. Is how can he sell
someone else's NFT? Only item on that
again, this operation. Then next requirement, we
need to allocate item. So id dot, not, not this. I will simply say message dot value should be listing price
because here again, you are really stink that NFT, so you have to pay
the listing price. Plays must be equal
to this thing. Race. If these requirements
are fulfilled, now simply make
the updation that this token ID is equal to false. Then simply copy it. Paste it three times. The second will be a
swing, be the place. If someone changes, the
price, will be payable. Message sender. Oh, no. Oh no, it will be again. This contract
address. Now again, it is now transferred to
this contract address. Then we will decrement the items sold as that soil
properties, again listed. And we will transfer
that ownership. That is message sender. Address. This contract can aiding. So this is how we write the functionality
to resell it token. Now, it's time. We write that functionality
to cancel a listing. That is someone list there, NFP to the marketplace. And then they taught, no, I don't want to sell it. I want to own it again. Know that this function
will allow them to do that. You can sell their
market listing. One Chen can sell them. Listing. This will have, you went though 56
token idea again, that is which token
I need to cancel. It will simply be
a public function. Here. That requirements will be. First thing it will be the same. That is ID token. Here. We'll mention that token
ID and then we will write whether the seller is the message that
sender or not. If not, then we will show on Lee Sellers can perform this operation. And the second requirement
will be added to market item. So can id dot soul, whether we have to make sure
it's not being solely at on the can sell a terms
which are not yet. That's it. These
requirements are fulfilled. Then simply, we will do the
updation in the mapping. That is Token ID, that is equal to
owner will be again this message that sender ID that seller, seller will be null. That is address,
which is 0 address. And then ID. Token ID not sold, will just simply make it sold. The item is simply got
sold to the user itself. We can just say item dot
increment because we, we will get our shared. That is the listing price. Now it's up to the not audit. Use it whether he wants
to sell it or not because already has paid
us that listing price. So we will just transfer that listing price to us that is the owner of the
smart contract. Transfer listing price. And we will transfer
the ownership from this address to the
message sender, not Token ID. So that's the functionalities
are now ready. Our smart contract is completed. I hope you have
learned a lot here. If not, make sure you
don't go forward, but try to understand
what this keyword does, what this keyword does,
that basic concepts. In the next video, we will work on the
unit testing to make sure all these
functions are working, prefer working properly before deploying it to
the test network. But that's all. Thank you.
10. Unit test to deploy the contract: Hi, welcome to the new
module where we will work on the unit testing since
Blockchain is immutable. So before deploying
our contract, we write unit tests to make
sure all our functions and variables in our smart
contract are working. And they turning
the correct values. We will be using Mocha Chai
library for this purpose. So now let's get started. In that test folder, create a new file and name
it NFT market. Cheers. It requires some
laboratories that is within the child library. We will require we will
require this expect. And we will, we will require it to us from
the Harvard had library. Like this. I hope you know how
to write test in. That is in more card shy
because these are the basics. I'm not I wouldn't be
explaining very much. Let's name this. Describe is just used to group or you can say nest
our test cases. This is how we write it. Mocha uses hooks to
organize this structure. One of them is this description. It will be des, cry. Like this. It will be described. Now have, let's have
some way it was if the market then lead, smile NFT did n. If D minor. Then let listing,
praise and lead. Contract or no, desert. All variables. Led by Entrez left lead NFT, market actress like this. And if the marketer address and we will
have the auction price, auction price, you can just
say the selling price. I'm just writing it in a
constant so that it will be easy to android. A third, like this. We'll just write it
in Henrik details. Now. The first thing we will do
is use a before each hook. Simply, this is a
hook which will perform before every test case. So we just have
to write it once. Here. We will read dest to
deploy the contract. Let's have NF2 market
is equal to await. Eaters dot get contract factory. Our car. Our contract name
is NFT marketplace. Than NFT market is
equal to await. Nf2 market, not deploy. This is the deployment code. We will wait until
it's been deployed. Then we will get downmarket address and we will store it in this variable that is NF2 market dot address. Then we will get some test addresses that
is contract or not. And by the Jezreel get from eaters that gets
sinus like this. This will be dummy
accounts given us by the hardhead environment. You can say, yes,
the environment. Then we will have listing
price is equal to await. If the market dot. Here, we will now call this function that is
get listing price. And now we're able
to call it with this instance that is
NFT deployed instance. Then we will simply GnG
toString it is listing price da2, string, like this. And next thing we
will do is just create a function which will
help us to mint enlist NFT. Let later on. When
we are testing, we don't have to write
this code again and again. Meant list. And if D is equal to a sink, it will accept this token URI. Auction price
balanced transaction. This is the state variable, is equal to await, NFT market dot create two candidates we're now
calling this function create token will send that token URI, selling price. And we have tours. So make sure we are
sending the listing price. Then we will get Daddy see, await transaction that weight balanced coin ID to receipt. That events. 0 dot dot token ID. You might be thinking, Wait, I'm just explaining. You might be thinking
what is that? You might be thinking
what is this? So when we are waiting
for this transaction, it is going to save it here. And when we printed it is if you want to console dot log receipt, then you will get
it is being nested. That is, there will be
maps there already is. So we are just getting that
token ID from it. That's it. So this is the base
of our unit test. In the next video, we will write each
and every test cases. So see you in the next session.
11. Unit test to mint and list nft: Hi, welcome back. In this video, we will write the unit
desk to enlist a and F d. So let's start
with the describe. That is, as we know, we can desk using this club, we can nest our or we can
nest our group test and all. This will be main and
list a new NFT token. Then funtion. First thing I will do
is const token URI is equal to, is equal to. I will just have a domain. Though. Can you add HTTPS, then? Some token that you are? That's it. This is just a dummy. Later on we will
use real token URI. The first case that is using the ID on the first
test case will, we should reward if price is 0. This is the first test case. Let's say a sink. We expect. Now we will use to expect
from the child library. Expect. We will simply use
this meant and list NFT. We would send that token
URI, end up price. We will send 0. And simply, it will be
to be reverted weight. And what message we will get, we will get this message. Price must be greater than 0. This paste it here. This is the first test case. That second test case will, we should reward if listing place is not correct. Sinc function. First thing we will
called create NFT. When Chen Here, const Token
ID is going to await, sorry, I just remove it. And now they await. Expect. Nft, market dot, create token. Here. Just send can you add then auction price and in value, simply send 0 to be
in work deadweight. Just wait. Another will be
rewarded with and play. Now, copy, this place must be
equal to the listing price. Now you might be
thinking why I didn't use this maintain
list NFT function. Because here we are
changing this value. But here we're not accepting
any value as a parameter. So I just statically call
this Create Token function. It is a public function, so we can call it. That's it. Now, let's at least
these two test cases. And before that, I would like to delete this lock
and our test cases. Yes, they did a day later
than in the scripts. Also. Simply delete is
deployed and cheese. Okay, so now we have just
the NFT marketplace. Okay. Now bring the command line in that folder first set
and px, I'd had compile. Let's see what we have to
mandatory install this toolbox. Okay, just do it. Npm, install gnomic labs
foundation hard edge to the box. Yellow some node modules and highlight conflict
that is here as well. It's been required. That is the reason
my dad had been started and see if again
we get any editor or not. Okay, In Sweden stand. Now, let's compile again
and see what it gives us. Okay, also, I have
some mistake that is 170 line decrements. Spelling is wrong. The claimant I'll say this willingness to use either now, hardhead were full. We are harder matches. Let's see. Hard hat. Just try to check our testing. See, these two are working. And if you want, you can
just remove one of those. Or if you want, you can
use gnomic foundation. Child matures. It's up to you, but right now it's
just a warning. It won't disrupt the code. Now, the next test
case will be eight. Should create an NFT
with the correct node. And so can URI sink when Chen. This first skit that token ID, token ID is equal to await. Maintain list NFT. We have this token URI above. Then we'll get the main dead. So can you, or is it going to do a read MFT market
that token URI? Can I do const or node
and trace is equal to await the market dot o node of token ID. So these two are pretty
defined inside the contract. That is, we can get that by
sending the two Canadian. Next thing is to just check, that is expect owner address to equal to the f
d market address. And second thing, expect mean dead token URI
equal to token URI. That's it. This is
the test case here. Third test case and final test case in this
desk grab group will be should meet market item created after successfully
this thing of NFT. This sinc function. Then simply we will add const
transaction is equal to await NFT OR gate
dot create token. So can you RA auction price? Value will be listing price. Then let guns. The seat is equal to transaction dot weight. Expect. Before this weight. Just this token ID. Same thing that we
see the events. That argument's not Canadian. And then we will expect transaction to animate. It will emit that event. First we have to write
the contract instance, and then what it will emit. It will emit here that
this, this, this thing, mark market item created with arguments. Can I do contract
or node address? And if the market address, auction price and
sold will be false. That said, let's say, Well, again, let's
try to test it. In really big number. Argument. Should check. What
is this added. Maintain list will
accept two things. I forgot to send. Oxygen praise as well. Let's save it. And
again, let's try. Okay. So Alda for test
cases and now correct. So we're reassured that those functionalities
are working at least. In the next video, we will write more test cases. Thank you for watching.
12. Unit test to execute market sale: Hi, welcome back. In this video, we will create our next dex test that is
to execute markets cell. Again, that's how we describe. Make sure we distinguish
a separate test cases. That is, here we will
add, Execute, say, of a market, Place item. Then funtion. Again, let's have a token URI. These, we can copy this only. In copy this. Then let's have the first
test case which will be should revert if auction. When a is not correct. As saying const new NFT token is equal to await meant
enlist NFT token, URI and auction place. Then we'll do x, x and f d market connect, biota desk because now we
have to change their address. The seller cannot buy it. Then if we create market, sale, markets sale, new NFT token value, we are just sending random value not to
be reverted weight. And here it will get
diverted with this. That is submit Does can craze like this. Okay. Then next test case will be by a new token. Oh, no. Entries. Saying again, we
will have const, new NFT token is equal to await. Meant enlist NFT token
URI and auction place. Then we will add const. Owner address is equal
to await NF2 market. Or none of it will be const or know of this
token when it is listed. So now we will expect, now the owner is
the market place. Address. It is here we
will expect, expect, oh, no address dot equal to, equal to NFT marketplace. I dress, marketed dress. And then we will what? We will just create the
market sale that is NFT. Market dot connect will
connect with the byte address. Dot create market
silver will buy it. New NFT token value,
auction price. And after that, we will check the new node. And dress is equal to
await NFT market dot o nat off new NFT token. Here. Now the new owner is
the byte address. We have to check this
is working or not. Expect new owner address to equal to buy at
address that address. Okay. Now let's check whether it is working
properly or not. Yes. So this case
is also correct. That is first thing which has submitted the
auction price wrong. When we are buying it, we are not sending
the correct amount. And then the next case, we make sure that the transfer of ownership
is working properly. That's it. So that's it for
this test unit test. In the next video, we'll continue working on further desk to make
sure our contract is that is not faulty or is
any or there is no bug in it. Thank you.
13. Unit test to resell market item: Hi, welcome back. In this video, we will write a unit test
to resell a market item. As you share like that
is clay was here. We will write g sale
of a good place item. Then function. Let's have this token URI. Then the first case will, we should revert if the current owner are listing price is not correct. Now here, let's have the new NFT token is equal
to await maintained list, NFT token, URI,
and auction price. Then we will simulate await, NFT market dot
connect by Red Dress. Create, market sale. New NFT token. Value will be auction price. Then we will have the
expect that this expect. Now understand this. Here. We have maintained, that is maintained
that token with the address of the
contract owner. But in the next line, we are trying to, or you can say, we have just bought dot token and now the
owner is that byte address. Now if we try to resell that
is NFT market dot token. And now we are trying
to resell it with that contract owner address since we're not
using dot connect. And here, as you can see, new NFT token auction price, value listing place as we
are trying to list it again. This will be reverted, that is to be reverted weight. Here you can see
it is saved here. Only item or not can
perform this operation. Make sure it is
reading the codes. And the next thing
we will do is awake. Expect NFT, market dot connect, buyer address, dot
resell token. Okay? Yeah, we can see we
have everything, okay, that is new NFT token, then auction price than value. But we are sending the
listing price wrong. It is 0, then it
should be rewarded with to be dead weight. You can see here, it should be reverted weight. Price was equal to
listing price like this. Okay? This, this test case is located this we have this
to expect statement here. Then next test case will be to make sure that
reselling is working. It is by a new token. And then resell it. Yeah, I will just
have these two lines. That is new NFT token is equal to maintain
list on that day. Then we are trying to connect up by address to
create the markets sale. Now we will do const token. Owner. Address is equal to await NFT market owner
of new NFT token. Now, here we will check. Now the new node is the buyer. Address. Expect on I'll address to equal. By it. I dress dot address. Okay, now it's simple. This is simply a market sale. Then what we will do, we will lose NFT market
connect, bad address. We will again resell that
token to the contract. It is the marketplace, new NFT token, auction
price, value listing price. And then we will
have new token is a good rate if the
market that are not new NFT token. And now here, now the new owner should be the market place
address because again, it is being resettled. They that is the owner want
to resell it to the market. It is Expect new token owner to equal. And if the marketplace, okay, let's save it
and test it out. Let's see whether this
desk cases working on now. See the resale
aftermarket play item is also working smoothly and
flawlessly gaze no added. So that's it for this video. Let's continue this
unit testing series. There will be further writing where one or two videos only. Then after we will deploy
this contract. Thank you.
14. Unit test to fetch market items: Hi. In this video, we will write a unit test to
fetch market items. Let's start with a
describe statement. Then we will have
full name which fetch might get glaze items. As you shall. We will
have this domain. And also if you want it, you can just write
it here as well. It's up to you here. But I'm just setting
it inside every desk. Crab claws. Let's have the first unit test
of Disney scope. It is it should match. The correct number
of unsold items. Will just really meant three N of t is this
dog can you array. And now auction plays. I will just copy two times. Now we have three items
in their marketplace. Lead and sold. Items is equal to await. And F D, market
that market items. Let's see where
is this function? See we have this
fetch market items. And then I will
just write expect. And sold items. Dot length will be is equal to three as
we have 3.5 days. Then the next case should be, should garlic, number of items that
they user has chased. Let's have led. Nft token is equal to
await meant enlist NFT token URI, auction price. Then we will again
meant to LFTs. Now, what I will do is I will create a market sell it is
NF2 market dot connect. I will use, I will
write the byte address. Then. Create market sale. Okay? And I give that token, I did it this NFT token ID. Then you will be less. Think I'm just buying it. So rarely will be
auction price. Okay? Now, I will simply led by our total items is equal to await NFT connect via dress. Now I will call fetch. My NFC is this one, which my NFT is. Simply expect. This is buyer total
items dot length. I expect this to
be equal to one, since I only bought
one NFT and others are still lifted it is
these two are still listed in the marketplace. So this is how we test that, whether it's working or not. And that third test case will be should correct number of items listed by a user. That this makes sure that that particularly users number
of items that are correct. I will simply meant like this. Then the third one, I will connect with NFT market, dot, connect with
the biologists. That is key. List. This in the marketplace. Create token. Then. So can URI, auction price, value,
listing price. Now, let own listings is equal to await. And if the market. Now here we can see there
is this patch items listed, but that is by a
particular user. Now we are trying to make the fetch items which are
listed by the contract owner, not the buyer address. The contract owner has listed
to n of t is simply expect. Owner listings. Dot length should be equal, equal to two. That's it. Let's save it and now test it. See all the test cases. Okay? So now we are sure that at least that market and that is the fetching of downmarket items are
working properly. That's all for this video. See you in the next video, which will be the final video
of this testing series. And Q.
15. Unit test to cancel market listing: Hi, welcome to the final
video of that testing module, where we will write
a unit test tube can sell market listing. Now, let's read the
describe statement. It will be can still
get place listing. When Chen can you. Let's get the token URI. Let's have the, this case. It is, should say, and return the correct
number of listings. Let's have NFT. Token is equal to 08. Maintain list NFT. We have the token URI
and auction price. Then we want to create tokens. They will just copy this, connect by address
dot create token. We want to create that token
using that buyer address. And the first one
was created from the contract and it is owner
of the contract interests. Now let's let unsold
items is equal to await NFT market that market items expect. So like terms dot length
should be equal to three, is equal to three. Then what we will do, we will cancelled one of the product that is
one of their listing. Using can sell them listing. And we will simply
send the token ID. And then we will
let, let new item. So we will do a wait NFT market
that fetch market items. That is how many I listed now
in the market simply await. Expect new unsold items that land should be equal to two since when is now canceled. Let's see that this thing is working or giving
us some aerator. Yes. So everything is working. All the test cases have passed. So now we can relax because there is no error in
our smart contract. In the next video, we will simply deploy the smart contract to
correlate test network. And then further
on we will work on the front end. Thank you. See you in the next video.
16. Writing the deployment script: Hi, welcome to this new
module where we will write the deployment script
or our smart contract. Just close this test file. We don't need it anymore. In the scripts folder, Let's create a new
file and name. We deploy ab.js. And let's start
writing the code. At first, we will require a terse on the
hardhead laboratory. Then let's have a main function. Here. We just have to
deploy our contract as we did it in the test file. Just like contract
factory is equal to await eaters dot get
contract factory. It will be, let's see. Again, I don't want
to make any mistake. Copy it, paste it to const contract is a contract fact radar deploy. And every contract deployed console dot log on track. They like to have on track and to insist
just console log it. Because make sure to save
the address to use later. In front-end. Then we will just create
another function. Since it's an async function, we will just say run
main is equal to a sink. Then we will have
a try catch block. May await main Ross's exit if everything is
okay, then exit. If not, then console.log the editor and
process that exit. Weight one. And finally, this
runway in function. But this is how we write
the deployment script. It will be seen for
most of the projects. You just have to change this name to your contract
name, and that's it. You can just copy, paste this code in your
other files as well. Now, to deploy our
smart contract, we have to use a command
which is and px. I'd had run. Then inside scripts for
ladies, deploy that js. But after that, we
have to mention the network as well
with this dash, dash network and then
o'clock name is correlate. These go live. We
have mentioned in the iodide dot config file
and then press Enter. It might take some time. So our contract is being
deployed to this address. Make sure you copy it. Because in the next video, when we are creating a
Next JS product project, we will use this address. Also, if you want, you can just make
sure to verify dates. They're going to
go lay ITO scan, then simply paste
your address here. Now you can see this is this
address being under block, blockchain 39 seconds ago. So we have this contract
created that said, this is how you
deploy your contract. Thank you.
17. Setup and start working on Next js: Hi, welcome to the new module, where we will work on
the user interface. Now the smart contract
portion is done. We can start
building out the UI. We will be using next JS, which is a React framework. But to create the next js app, we simply have to use
this command, that is Bx. Create. Next app and name it client. Also. Now in order to interact with our diploid contract rate x. And we just have to say, okay, now it's installing. Now in order to interact with that deployed smart contract, we will need two things. That is first is
contract address, which we have here,
and that Amy, I now to get the EPA, we simply have to copy this file that is
in the artifacts. We have the contracts. And in their contracts we have this NFT market
marketplace dot json file. We simply have to copy it. And then let's see
where they stand. Know that Glenn folder. Okay. Now it's done. Let's see
their claim for let's see we have oblique pages,
styles, our listings. So here is just simply create a new folder
and name it ABI. And paste that JSON file
here like this. Okay? And also for that contract
address in that client folder, I will create a new
file and name it. Config dot J S. Here. Yeah, I will have two variables. First, we export const,
contract address. And the second thing
we will need is the URL that is const in fewer. Url is equal to like this. For the contract address, simply print this one
and paste it here. The infusion. You just have to go here. Same thing, managed key and copy this URL and paste it here.
This is the main net. No, I don't need them in net. Let's see. I need the latest network. Okay. The inferior URL as well. Now, with next years, we will use a CSS
framework known as tailwind is a utility for CSS framework that makes
it easy to add styling, and create goo, good looking
websites without a lot of work to install that
tailwind dependencies. First, we have to go to
the client directory, cd to client and type
this command, npm. Install the deal when CSS at Delhi latest CSS latest, fix and direct latest. This. And just press Enter. Know more about
Tailwind and all. You can simply write. Next chess. A living. Here. You can simply read the
documentation says, well, we will do these changes. Now as you can see, what the command and all via
have installed, installed. The packages just, I
will check it once, okay. Okay. Now we will create the
configuration files needed for Tailwind to
work with me next year is that is Tailwind
dot config dot js file and post sss
dot config dot js file. And we can do it by running
this command and bx. When CSS in this, that's it. We have this files now. Next, configure our
template content part in Tailwind dot
config dot js here. As you can see, this line, we simply
have to copy this. We have chairs, dx and
we have this line. You simply have to copy this
line from this website that is tailoring CSS and how
to install the next years. And paste it here like this. And then delete that
coding style slash, global CSS that is here. Here, delete this and replace
it with this line of code. This week, this line
of code, that's it. This is how the
configuration is done. Then we will in style, few dependencies required, which will be required later on. In that Glenn for
less simply write npm install tree model space XES. Web tree model allows
you to connect your app too many wallet
providers such as Coinbase, MetaMask,
wallet connect, and XES makes it easy to run as synchronous HTTP
request to rest, endpoint and perform
the operation. We will use XES to fetch data
to the DOM API later on. So now simply let's run our next JS application
using npm run dev. Okay, let's go. And simply the URL
localhost 3 thousand. And you can see we have
our next js app running. So that configuration
part is done. Let's work on the next
GS front-end portion. Remove everything
in index.js file, which is inside pages here. We have index.js file. We remove everything and start with importing
dependencies. That is important. Ethers. Ethers. Then Import, use and affect gamma use state from React. Then we have two input x, z OS from us. Then we have to import tree model, three model. Then we will import
contract and dress. And that is from here. I'm talking about these studies, contract address and a URL in the URL from the
config file like this. And finally, I will import that NFT marketplace from that is that contract
instance from the ABA using this dataset. We have the ABA and then we have NFT marketplace
dot json file. This file we are exporting
by default is NFPA. The spelling is wrong. And if the marketplace distinct. Now, let's have an
export default. I hope, you know a
little bit tough react and next year is because
this won't teach you, is to do really is all about NFT marketplace return. We have this div. Simply. We have, we'll come to, Let's see if I save it. What happens? See, we have
this welcome to home. I know it's not looking
good right now. But that's the first thing. Let's work on down
navigation portion, which will be persistent
across all pages. To set up this, we have
to go to this ab.js file, which is inside the pages. And here we simply have to return multiple things. So first of all, you just don't delete
it, just cut it. Then inside here, we will have a div and just paste it below. And above this component, we will have our
navigation in this nav. Now I will start using
Tailwind CSS that is bordered by adding six. Then I will have a
p tag Meta worse. And if the store, I will give some padding to
this as well, className text. For Excel. On the very top. I will import link
from next link. Then I will simply
have a empty div, which will be flex
margin top four. And then I will start
having my link. This link should F. And inside that link, I will have an anchor
tag. Name it home. Let's have some
class names that is margin-right or text being 500. Like this. And now just simply copy this and
paste it three times. The next HF will be create NFT. It will be margins six. And I will limit
sell, sell, NFT. Then the next SELF will be my. If these and I will
simply name is my NFT. The last navigation will be Creator dashboard. Dashboard. Simply say, well, now
let's check our website. See, we have this home. It is looking decent. I won't say this is
the best design, but our focus will be more on the complete implementation
of that NFT marketplace. You can change the
design later on using whatever snippets or code you get on the internet,
It's up to you. So that's it. For this video. In the next video, we will work on the
functionality to show NFP is here from the
blockchain. Thank you.
18. Function to load NFT: Hi. In this video, we will work
on the med tech to load NFT. So let's first start
with some variables. And if D is set, and if these is
local to use state, we will use the React hook and give it empty at
the very beginning. And that's seconds. State will be loading state. Set. Loading state is equal to u state. And at the very
beginning we will simply write not loaded. Because this will, we will show a loading indicator or a text while we are fetching
from the blockchain. Now, let's start
with our function. We will name it, Lord. And if these, so the first thing we will
do is have a provider, new eaters, the high dose
dot JSON RPC provider. And second thing we will have an instance of our
market contract. Contract. Then the first parameter
takes the contract address. Second, it takes the ABA. And tired it takes
the pro hided it is here we are
using the JSON RPC. You can Google what is, what does the JSON
RPC and all does. But in simple terms here, it will just, it won't authenticate the user
using the Meta mask. Since v has just
fetching all the data, not some particular data
related to the user. Then let's have that data. We will call that
function in our contract, which is named Miss
pet market items. So these are Alda, that is all. Nft is. This is what it does. Also this this load NFT should trigger whenever
someone comes to our website, that is the first thing. We will use the US effect hook and call this
function like this. And it should be
called only once. So here, these are
just react concepts. Next thing, what we will
do is here we are getting an array of items that we
will firstly convert it, convert them to an object. Or you can say this a
JavaScript object, only. The const items as well
to await rami start. Here. We have this data dot map. Inside it. We have a sink. I like this. Now. First thing, let's
get that token, URI. Market contract. Token URI. We will simply send that
token ID and with that, we will get the token URI. Or you can say that HTTP URL. Then. Now we will use
the x z OS library. It is XES get token URI. Then we have that price. Let's convert it to string. That is, eaters. Do deals that format. Units. I dot price dot two string. Okay, now let's create an
object, JavaScript object. The first one we praise, that can be Token ID. It will be I, can ID number, then seller, a seller. Then we have the
owner, the owner. Then we have the image. Image we will write like
metta dot data, dot name. And description will be met the data description. And then we will simply
return the item. So what it does is it just create an array of
items, objects. So this mapping simply
needs and a variable, you can set these items and store everything
in that area. And finally, what we will do
is said that NFT state with this items variable and set the loading state
to simply loaded. Like this. This stuff function to make sure we are loading
the LFTs from the blockchain. The next thing what we will do is here we will do some
return changes. That is here. If, if loading state is equal to not loaded, then it will simply return one lastName, bx two in d. That is begging at the x-axis, reading why then y-axis? X is three x. These are all tailwind CSS. And we'll simply
write weight loading. And if loading state is equal to loaded, but also and if D is that
length is not there, that is, it says 0. Then we will return
again another H1. But here we will simply write
no items in marketplace. Okay? And if both are false, then we will return
simply to them home. But this we will configure
in later on videos. Now let's save. Let's see if j is in the editor. When everything is working. Let's see, we have
some edit here. Let's differentiate. Let's see. I think we might have
made some mistake, could not detect network. Let's try it again. I think we don't
have it installed. I think this might be the case. Let's see is can be an issue here because
I cannot see eaters. Let's install it first. Vm in star interests. Okay, let's see. Now we have e tos in style. Let's do npm run dev. Let's check out the gain. Just give me some time. I will see what is the edit. Okay, I caught the error. Here. In that JSON RPC URL, you have to enter
your inferior URL, which you are getting
from the config file. We'll just copy this
and paste it here. That's it. That was the issue. And now you can see if I
refresh as well. It shows no item in
the marketplace. But that's it for this video. Thank you.
19. Function to buy NFT: Hi. In this video we will write
the function to buy a NFT. So below this, let's write
sinc function by NFT. We will send here the
NFT data as a parameter. Then. Now we will use the
Web three model to connect to MetaMask. Earlier we will
not connecting to my Damasio just statically using JSON RPC and calling
that function. But here we will need user address volley
they dress that is why the const connection is equal to await tree model dot connect. Then const Hadar is equal to mu. It turns start provider dot
web triploid at this time. And we have to send
this connection. Then what we will
do is make sure that the user is connected
to that network. They will do get
Network is equal to await provider dot get network. Then we know that
the net chain ID, that is its ID is five. So we will simply have a check. If get network dot j not
equal to garlic chain ID, then you will have
an alert dialog, which will say you are not connected to a network. And then we will
return from here. We won't execute that function. And if it is, okay, then we will sign the transaction. Does signer. To provide get sign-on. Then we will have the
contract instance, new ethers dot contract. And then we will have that. We should send the contract
address, then that ABI. And then the signer. Then we will parse that price using
eaters dot util, dot bars, units, NFT, not brace, dot, two string. Like this. Then we will have that
transaction equal to await. One track dot the name of that uncheck index smart
contract is create market sale. And now we have to
send that token. And if the token ID, as well as that value, that is the price of that token. Then we will rate for this
transition to complete. And after that we will load NFT again so that it will
refresh the page. So this is the functionality
to buy a new NFT. Then we have to return
the HTML or the UI. If the user load and FDA, then there should be some UI to low dose and FTEs are
displayed on those. And if D is a
simply, let's start. Let's start here. With this. Dave. I will give some styling. Flex. Justify center. Then the class name here, again inside there it will with Dave will no padding
at the x axis, y. And I will use this
custom styling, that is, max, will be 1600 bucks. You can change the
styling according to you, according to your wish. Let's have grid. Create. One. In smile says, it should be great. To enlarge devices. It should pay grade four. Then we have padding. Top is equal to four. Okay? Now, we will loop through
that and Nephthys, the state, the desert. That's why I've used
these curly braces because we're not doing
some logical work. I would like NFT is that map. Then in this we will give, get a single NFT as
well as the index. You can hover over it. See, we get the index as well. Now, Let's start with a div. We have to get that g
is equal to the index. Then last name is equal to border, shadow around that. And then overflow
hidden like this. Now here we will
bring the image, so we have to import image from next
image here, the very top. We will use that image. You can just close it here. The image source will be NFT, that image, that is dot image, because here we have
this image object. We will give the name, that is NFT dot name. Then weight is equal to 300, height equal to 200. Then we will have a
place holder as well. It is placeholder and
we'll write blur. That is still the major
shore, make it blur. And then blurred data URL. Yeah. We have placed image. That is, you can see I have placed an
image in that client. Then public see, I've pasted this image
from the Internet. It's simple placeholder. And it's the extension dot PNG. And then the layout will
be responsive like this. Okay? Then I will have another div
below, below that image. Classname, just give
it some padding. Then when you graph style will be 64, Excel, class name. Next, Excel aren't semi bold. And here it really display
the NFT, that name. Then we will have another div, will have Stine, I, 70 pixel. Then comma overflow
will be hidden. Inside it. We will have p tag and 2.5 class of text, a 400. And it will display
the NFT description. Okay? After that, we will just a button for triggering
this by NFT function. Now below this,
these two div that is inside the main div
will have another div. It will have className,
reading for background, black than glass name, text, excel, margin bottom, or aren't, bowl. Next, white. Here we will show that if d, that price rate eat
in their current. And below this, that
these side-by-side or no, I will say below this will show a button which
will write by now. And let's give some
styling to this as well. I know these are a lot of codes, but you have to do it. Wait. Bag, that is
background color being 500. Text, white, bowl, bedding y-axis to reading
x-axis to end. Rounded. But that's all that designing
class name and all. Now we will simply
write the onclick. Onclick will trigger the
function by n f d, t. It will trigger by an F D
and it is accepting a meter. We have to send the NFT data. That's it. That's it. This is the code or the external portion of displaying the NFT
on the home screen. If you want, you can
just pause the video and recheck it again
with their code. And if they're in future,
we have some error. We will obviously solve it. Thank you, That's
it for this video.
20. Setup Pinata IPFS keys: Hi. In this video, we will work on creating a new listing
for the marketplace. So before that, we must have that keys are set up in the
data in our application. It will help us to upload our NFT image and
other datas on IPFS. For that, let's go to pinup dot dot cloud than simply if
you don't have an account, click on sign up, I will just login. After that. Since I
already have an account, I'm directly send
to my dashboard. If you want, you can just pause the video and create
a new account. Now, we should get the
API keys for upload. For that, simply click
on the right top corner. Then API keys, then new key. Now simply allow it. Then set the max animal key
can be used. Just leave it. I will just name it. And if
the market place like this, then I will click on Create Key. Now, just make sure
you don't close this modal window because this secret key will
be shown only once. The API key you can
see later on as well, but this secret will
be seen only ones. So simply copy this
secret API key. Go to the config dot js file, where we already have in
fewer and contract address. Here, simply write export const. First I will write key, and then I will write export const, data, secret. The secret, just paste it. And also copy that key as well. That's it. Now we can close this and also
click on Done here. Now you are all set. Let's go to the code editor. And in the pages, just create a new
screen and name it. Create. If d is dot js, just remember to
give the same name. You give it here, that is here. This is create
NFP, then make it. Suppose NFT is, it's fine. Just rename it. And if D, because obviously we are creating
one and theta time. And this is how next year
is navigation works. They ultimately go to the file name
corresponding to this. Now here in this page, users are allowed to
create enlist LFTs. They will be able
to upload and save the images to IPFS as well as they can set metadata
and price of item. Let's start with some imports. Use date. I'm react. And import. It hurts from ether's
not hardhead. That input. Use the router as well
later on, Let see it, we'll use it or not. Next. And outdoor than import the tree model three model. Now we will import the
constants from the config file. First one is I would
just go and copy paste. Here we will require
contract address, then comma pinata keys. Then pinata secret, come
up with another secret. Config. Then I will
import NFT, market, place them here and just make sure
everything is correct. Then I will import
x z plus x z OS. And finally, I will import
image from next image. Next leg, let, let's export
our AP, CS, a default, name it, create an F D. Then let's start with some variable declaration
that this file URL. And then set file
URL to use date. And then reading files, it will hold a value
of null. Then. Now we will use
something like input. Update. Input is we're
going to use date. But here, now we will have a structure like that is an object and we will
D structure it later on. This election. These we will write in the
text field and save it here. Then we will have that outer, which will reuse router. And then we'll have their
loading state. Set. Loading state. They use date. The first thing is
the first state will be not load, not loading. K. Also have to know more
about the pinata APIs. You can simply go to. That is pinata darks painting. Here. You can see. Here we can see how we
will do the things that, that is, what are the endpoints, how to pin file will use? We will use disoriented
as I guess. It depends like we will pin Jason as well and we will pin
the image file is written. You will understand later on, but make sure you read
these two section. Thank you. That's
all for this video. See you in the next session.
21. Function to upload file to Pinata: Hi, welcome back. In this video, we will work on the
function to upload files stupid data. Let's start. But I think a sinc
function image upload. We will send it as a parameter
here from the input file. Here. We'll just get phi is equal
to E dot target dot files 0. This is how we get the
file from the input field. Then let's have a try. Catch block. Will console dot log the editor. Now, in that try,
Let's have const. Data is good to new data object. And then simply we will
form a theta dot append. Append file. By that is the selected file. Now, we will have it
will send the z OS, that is XES HttpRequest. Result. Y is equal
to await z OS. Then inside it, Let's
have mattered as forced than URL will be http slash api dot pinata, dotCloud slash slash. When F capital phi to IPFS. This I get from
the documentation. Then data will be form data. Here we are just
uploading the file. Not dumb Italy dynode headers. In the headers, we will
authenticate with pinata key. We pinata key. Then. Pinata secret. Apa, E will be now does secret. And finally, content type. And here the C will be capital. Content type is
multi-part form data. This is the content
Content-Type. When we're uploading a file. That's it. After that, we will
create the image URL, that is for the pinata. Just type Shift plus not shift only directly
the point that is below the escape
keyword, we have this. Simply write HTTP S Gateway, pinata, Cloud slash, IPFS slash. Now, paste this. We will get the CAD. That is, I think content. I just forgot something. It was CAD. In pinata
content identifier. You will get that.
Aesthetically geht es phi dot data dot B. Ipfs hash. And finally set file
URL to this image URL. In simple words,
this is the URL we get when we upload
the file in Pinyin. So that user can point to that location and
show the image. So this function
simply upload image two, IPFS. This does on this function
only does that work? Now? Then next function
we have to create is to upload the metadata as well
as metadata includes title, description and
price. Let's do that. Sinc function. Collude to IPFS. Now lets the structure name, description and
price from input, which is an object. Now we will simply
check if name is empty, our description is empty. Odd. Rice as well as
file URL is empty. Then it will just
return from here. If not, then we will
change diluting state to loading like this. And now let's have
a try catch block. And uploading. Why? I don't know. Okay. In that try catch block, Let's do JSon data. Is it going to do Jason dots, stringify, have been not. My data. These also are domain
from the documentation. You can read the documentation
and understand how we are uploading this JSON file. Name. Name will be the variable name dot json. This is the file name. And then we not. Content will be jet
json like name. Description. And image will be file URL. Like this. After this JSON data. Now let's upload this JSON
file as well to the IPFS. Const. Phi is equal to await zeros. Now, again, let's just copy this and
we will do the changes. Will be post here, URL will be pin, not fine. When Jason J capital everything
Capital Jason to IPFS, then data will be
JSON data, this one. Copy and put this in
the headers as well. The APN secret key will be same. Only change will be content
type application, json. So here we are uploading metadata file and
then getting that token URI. How we will structure
that token URL like this. Again, HTTP S Gateway, pinata, cloud slash, IPFS slash. Same thing here as well. Less file dot data dot a, B, F, S hash. And then we will return
the token URI. That's it. So this was the function to upload IP address,
that is metadata. Let's have some comment. First, preload metered data to IPFS and then return. You are ladies the
content or the token URI to use in later transaction. Just for the reference
or just for me, just that you understand. Later on, step-by-step, you will understand where we are
using this function, where we are using
this function. And again and again, I'm
saying at the very beginning, I was very confused. But when I read the
pinata documentation on how to get this or how
to write the headers. And now I learned everything
that documentation. That's it for this video. Thank you.
22. Function to list NFT in market: Hi. In this video we will
write the function to list the NFT in the marketplace. Earlier we have written
that function to upload the images
or the metadata, but now it's time. We listed in the
contract as well. That is in which is
already deployed. Let's try a sink on
churn, list NFT. Or say, the first thing I
will do is get the token URI. It is const, URL is equal to await upload to IPFS.
It is this one. Plus thing we will do is this. Then. Now we will do
the authentication. That is, web tree
model is equal to new Web three
models. Same thing. Let's go up and see
where we have done that. I think we have done that here. Then connection, then
we have provider, then we check it. Then we signed transaction. Then we have the
contract that dress. Okay. Copy everything from the
index page that is by, by nF different Jen. Paste it here. I will just check it to make sure
there is nothing wrong. Yeah. Yes. Give it capital. Okay. We have to model. We have connection. We have provided,
we have network. We are checking if the
user is connected or not. Then we are getting the signer. Then we have the contract. Yeah. It turns dot utils dot
parse units. Here. It will be form input dot price. While I'm input dot
price. That's it. Then we have here
contract address, NFT marketplace dot
aba and sign up. Now. Also, let's get
that listing price. That is, let listing
price is equal to await contract dot get listing rice. Then we just change
it to string. This thing price dot two string. Now we will do that
transaction is going to await contract dot the function name was create token in our
solidity smart contract, it accepts a token URI for ice and we have to send
that listing value, that is listing price. Value, listing price, then the transaction rate. And finally, we'll just navigate that user to the home screen like this. Okay? Now it's time we return HTML
at the very bottom. Return. Let's sit down with the DRF. Give it a class name. Blacks. Just defies center. Then they've lastName with one by eight legs, call margin, right? Margin. Top ten. Yeah. We will display that image. That is, once the
user uploads it, we will display here before
he makes sure before he can eat the token file URI. If it's not empty, then show this image. You will use the
image from the next. When you give it rounded
margin, top four. Source will be
placeholder because right now the file URL is empty. We will show that place. So let image we have
in our public folder. We'll give it a weight
of 300, height of 200. Again. I will write if it's not empty, that is, it has some value. Then showed this image. Source will be file URL, will be image uploaded
successfully. Then rate will be 300, height will be 200. Lease holder will be blurred and blurred. Data URL will be place holder. Dot PNG tilda. Image is loaded. It will show a bloody
place holder so that the user knows that something
is about to pop up. Okay, we have this div. Now. Next div will have
a class name of width, one Bye half, that
is right-half lex. Lex call. Let's have a inputField. Let's have a self-closing
input field. Place holder will be set. Name. Class name will
be managing top border, rounded corners by adding four. Then unchanged. Now, the thing is, when some data is change, we will have that data here. And we will update these. Here. We will use
update form input. And we will update the form input. And inside it, we will just append Rudolf input, that name. That is e dot target value. Here like this. We
will append it. And here it will be
three stars that these three dots like this. Okay? The second thing, we will have a text area. We will have a text area
for the description. There will be asset description. Lastname will be
margin, top to border, rounded, rounded
bedding for bedding, for n here as well. On change property,
we will simply use. This update form field. Then inside it we will append. In the form input description is equal to E dot target value. Like this. Now here, let's copy this input field. Paste it below. Here the asset name will
be as set price in it. And margin top to bottom or padding for
unchanged is equal to. Here. We will change that.
We will append up price. Here. There will be another
property called type and type will be number. Finally, we have the input
field to upload the file. That is input type
is equal to file name as set class name. Let's have this self-closing
is always className, will be margin at the
y-axis for end on change, we will call the image
upload function. Finally, we are using this
function, image upload. It will automatically get the input that is the
parameter e from here. Then we will have a button. If DOF, if there is file URL. And that is if
there is file URL, then only showed that button. The button will have onclick, which will trigger the list. And if different
chain that is here, list NFT for sale function. Lastname. We'll be font. Born. Margin, top four. Back around 506, white, rounded bedding for
shadow at-large. Now, here, between the button, we have to write
some text and I will change it according
to the studies. If loading state
equal to not loading, then show create, NFT. Adults show wait, uploading. Okay, so now we are done. Let's save everything. Go to our websites. G loaded. I hope the
server is running. Let's see. Now, if I go to sell NFT, error message must do two properties or
landfill property. That is here, we
have some error. Must use a width and
height properties. Let's check. Okay, I did this mistake. That I hope you haven't
done that same mistake. I see. It is looking so good. Also. You have to do some changes in our next
dot config dot file here. Just to make sure we have, we can show images that
is that domain from which the image will be
shown in our website, we have to mention here that
domain name is gateway, pinata dotCloud, as we know. Because we have mentioned here. See gateway that pinata
dark cloud here. And if we save it, then we have some changes. We have to restart the server. Okay? I will just close it, save everything, go to the NFT, CD blind and BM, then it's time we will
test the uploading of NFP. Okay, let's just load localhost. I hope things will work. Let's click on cell. Let's choose a file. I will just choose this image. Let's see what happens. See, it's now being uploaded. Let's see if it is
shown here or not. Then only we will be sure
that yeah, it's working. Now let's have some
inspect as well. Let's have in the console. Let's go to pinata. Let's see if anything
is uploaded here. Yes. See marketplace banner, It's now uploaded here. It is taking too much time, but let's see, Let's write it. My first NFT, NFT future of internet. So it'd be 0.1. Let's let's make sure we are connected
with the goal in network. Yes. Let's click on Create NFT. See, wait uploading. We have them write
down mass coming. Let's see if it is if
it will work or not. And we click on Confirm. Then after the
transaction is completed, we will we will be
redirected, I guess. Yeah. After the transaction,
Let's see. We add redirected. And let's see now it
will show here or not. It is not showing. But let's see, we
have the metadata uploaded because there might be some mistake, we
have to correct it. Metadata is also a bloated. Let's inspect. So let us see why
it is not working. Obviously, there are some
data and what is not showing because I lead to us
no item in the marketplace. Let's console dot log items. Dot length c, one. We have one item. Okay, I got no, no, no, no. Let's see. It don't items, we have dy set that NFT is node D. So I caught a mistake. First mistake is here
in this line that is not big curly braces. It should be round
brackets like this. Okay? And when we save it, then again, we will
get some error. And this is because I
made a mistake here. It should be name. And then there should be
another field of image. It will be metta dot
Theta dot image. Let's see if it is
working or not. Now, save all n. Yes. Again, I'm just having this issue why the
image is not showing literal, so it was not shown. Let's see, do we have some
other mistakes as well? Let's see, the image. D image is uploaded properly. The image URI is here.
At the very top. See this one. You have created gateway. Gateway. That pinata dotCloud
gateway dot, dot, dot cloud slash,
IPFS, lash hash. So why it is not
working? Oh no, no. See, it took some
time, but it worked. Obviously, it takes some
time to load the image desk. That is why we show
that blood effect. But finally, our
marketplace is working. We can sell. And if D, as well
as it will show all the unsold and FTEs
in the home screen. That's all for this video. This was a very long video. I know, but we have
completed most of that task. Thank you.
23. Function to fetch NFTs owned or bought: Hi, welcome back. In this video, we will
work under my NFT screen, which will display only the
NFP is purchased by the user. So also before that I shot, I saw some added. Suppose in this index.js file, in this fourth line, that W was small, it should be capital. And also in that create NFT. This first line had some issue. That is, there was like this. This should be removed. Okay. Now, now in-depth pages, let, let's create a new screen. Intimate my lefties dot js. Here. Again, we will create a function that will return
only the NFT is owned. But before that, we
have to import some of the dependency or some of the packages. I will just simply
copy from that create NFT here like this. And, and do the changes. Suppose here use effective
state is needed, it is needed, use
router is needed. Web tree model is needed. Here, pinata and secret
key is not needed. Only the contract address, then NFT marketplace,
then XES, and next image. Now let's export function, export default,
punching my FTEs. Again here. We will need this thing that is NFP is and
loading state. So from the indexes copy and
paste it here like this. We will have NFP days
and set an F-test. Then we have loading states, set loading state, the first
state will not loaded. Also. If we want, we can have
that out there as well. That is use. Now let's start writing the
function sinc funtion load. And if these, now, again, I will have some. That is we have to
authenticate the user the same thing from that create. Yeah, I will just copy web
tree model, connection, get network, then then contract. Like this. I will just
copy and paste it here. And check again. We have to model, we have connection, we have provided we have good network. We will check if
it is connected. We could get the signer. I will just name it. Market place contract. Okay. We send a
contracted dress. We have the NFT marketplace, EBI, we have the signer. Now, let's get the data. Evade marketplace
contract dot match. My NFT is like this. Then will look through the data. It is items is
equal to await dot, dot, dot, map, sink. I add. Then we add mapping through
each and every data. And we're storing
that data that is singular data in this
variable name, name is I. Let's get the token URI is equal to marketplace
contract token URI. And we will just write, I can ID like this. Then. Const metta is equal
to await. Start get. Can you add a token URI? We will get all that data. Then let res equal
to eaters dot, dot format unit I dot
rice dot two string. Now let's create the
object items. Item. We name the price. We will have that ID, token ID number. Then Sattler. Sattler. Oh no. I dot 09. Image metadata, data, image name, dot data, dot name. And finally token URI. And then we will simply return the item so that it
will become a n, a n a of item studies here. After that simply at the
end of this mapping. Simply set if these items and set loading state
to loaded, like this. After this function. Let's also return the HTML. We will have this same
loading state and now let's see which page has
that doing this one. Like this. Yes, copy and Based including state is not loaded than just simply
show weight loading. If it is loaded and NFT is
dot length is not there, then just simply write, no, no, NFT is owned by u, like this. And then return. And then simply
return. And here. Also we will return this thing. Let's same as index.js. So simply just copy this. You can copy all
of this and then make that changes
accordingly. Let's see. Copy it. Return it here. Now. Let's see if we need
any changes here. Pixel for style
max-width 1600 pixel, then grid column one,
column two, great. Then we have an f, d is dot map, key, border, shadow, Excel, overflow
hidden, overflow hidden. Let's have margin. This and margin the y-axis. Let's have this. We have
the image alt NFT dot name. Wait, four hundred, three
hundred placeholder blur. And it will be on safe. Okay. Then we have spreading for paragraph tag
height 64 pixel class name. To excel fonts semi bold. And if the name, we
have the NFT name. But here we don't need
the NFT description in this screen because
we already own it. We don't need to
have so many data. Just delete this. Okay? Then we have
className this, padding for background black,
paragraph, text, Excel. And before one poll tax
rate and if the price. And finally we have a button, BG, I will just give it Read. Text white, font, bold. By adding y, by adding
x-axis surrounded onclick. Right? Now it will have nothing. It will just be null. And we will name it
ricin and FT like this. That's it. Those were the only
changes required. Let's save it. Let's let's see. It's the start screen. And go to my NFT dot fetch. My NFP is. Okay. Let's see What was that added? And if it is owned, it is showing this is not. Let's go to a market place. See fetch, my NFT
is we have this. Why is she saying this now? They're saying
marketplace contract. C. Okay. I don't know what was
the editor, but salt. What was the editor? I hope if you get
the same error, just copy and paste or I
think everything was same. But he had no FT. And
if they owned by you because we have created the NFT, but we haven't
bought any NFT yet. So later on we will buy
and test everything. And right now I just
wanted to show you that this screen is that if later on, if there isn't any edit, we will just solve that as well. In the next video. I will work on this kinda this dashboard
screen. Thank you.
24. Function to fetch NFTS listed in market: Hi. Next page we will be creating is the a dashboard that will allow users to view all the items they have
listed in that marketplace. This page will be
using fetch items listed function from the
NFT marketplace contract, which returns only
the items that match the address of the user
making the function call. Let's create a new file
inside pages and name it. Dash board chairs. This screen will be
similar to the NFT screen. So let's copy the whole screen. And we will do that
changes accordingly. So at debride it first, we will need these imports. You stayed a
turtles, use router, web to model contract address, NFT marketplace and all. Okay, Then we will just
change the function name to creator dash board. Okay? Then we have these. And if D is uncertain, if these, and I think we don't
require that outer. Lets see an earlier also, we didn't require that outdoor. If we will require will
just import it again. We have created
and loading state. Then use effect, then
load N of t is okay. Then in their load and f t, We have the web tree model, then connection,
then that provider. Then we will check
the Golgi network. Then we have the signer. Then we've done marketplace
contract instance. Then we will call this function. That is from the contract, will call wedge items listed. And we will call it here. Okay? Then we have the items
promise all and same thing. Then token URI, then
made METAR than price. Then we make an item with
price to Kennedy seller, owner, image, name
and token URI. Then we return it.
Then we set dy terms, set loading state. Then we return the
HTML like this. If it is not loaded, if it is loaded, then
just fill weight loading. If it is loaded and
there is no NFT, then we will see no
NFT is listed by you. Okay, just change
that text. Then. At the very end,
we will again have a column-wise structure
flex justified then for 1600 pixel grid column. Then NFP, this map. Now let's check here. Border shadow, then
image source and f d dot image with 400 placeholder
layout less responsive. Then we have the NFT name. Then we have that button in that it shows the
price of the NFT. Then we have this button
which will write, which we'll show can sell
listing as its text. That is, the button will
have canceled listing. If you want, you can
change that color. It's up to you. I prefer
it read, it's fine. That's it. That's the
screen which is needed. Now, let's save it. And let's go and check it out. I've just started. I will click on dashboard. Now. See, we have listed this under marketplace and that
is what it is now shown. With this reassured that the
functionality is working. In the next video, we will work on the
functionality to cancel this listing
from the marketplace. Thank you.
25. Function to cancel and resell NFT: Welcome to the last video of this module
where we'll work on the functionality to cancel as well as resell
NFT in that market. So far, can say listing, go to create a dashboard and below this loading
load NIfTI function. Let's create, let's create a new function
and naming, name it. Sill listing. Here we just have to
send that token ID. Then the first thing I will
do is set the loading state. Again, not loaded. Then I will get, get those things again. That is web tree model
provider, these three code. And after that, I
will get the signer. Like this. I also know that the
code are being repeated. If you want, you can just make a separate function out of it
so that it can be reusable. But here we're just focusing
on the functionality. You can clear the code later on. Now. After that, I will
have a transaction that is Mark, contract, dot, cancel. Let's check the name. Can sell item listing. Can sell item listing. And we have to send a token ID. Then we will have
weight transaction. We will wait till the
transaction is done. This one. And finally, we will call the load
and if d function here. So this is that on leaf and gender required to cancel NFT. It's very straightforward. Now I will call this
function here the onClick. Send that token that this NFT token ID, like this. Similarly functionality
to resale our token, we have to go to my lefties
here below that load and f t. Let's create the function sinc. Function. Resell NFT token ID, token price. We will set the loading
state to not loaded. Then we will have this, this code that is Web
three model here. The marketplace. Just paste it here. Tomato connection
provider and marketplace. Then simply we will
convert the price to eaters dot util,
dot virus units. So can price then lead listing price? Because here again,
we are really stinky, so we have to pay it. Await. Marketplace contract
dot get listing, price. Listing price is equal to
listing price dot to string. The same thing we have
done before as well. Now we will do that
transaction is equal to await marketplace
contract dot name. Under contract you
can just check it, resell token, it accepts
token ID and price. Can idea as well as praise
token ID and price. And we have to send the
value of the listing price. Then we will await Dan
section dot weight. And again, we will
just refresh that NFP is using this
function. Here. At the end, it will again send that low loading
state to load it. That's why I haven't
done it here. Because we have
changed the state. But in this load
and it will again change the state to load it. Then simply go to the button on the on-click functionality. Simply assign it. Send NFT token ID,
NFT, that price. That's it. That's it for the
sales token function. I hope you have
learned a lot because Alda task or older
functionalities are done. We have completed
our NFT marketplace. In the next video, we will simply test the whole application so that if there is
any editor left, we will solve it as
soon as possible.
26. Test the complete application: Hi, welcome back. In this video, we will just test the whole working
of the application. We have finally completed
the NFT marketplace and adding you should
be proud of yourself that you have watched
the course till the end. Now, let's just check
the selling of NFT. Let's, let's upload
some more NFT slit that is hard IF hard hat. And if they will just name in higher ed compile, test and deploy. Same, I will place it 0.001. Let's see. Let's choose it. Let's see. It was a big image, but still, let's say it's
being uploaded. I guess. If you want, I will
just go and check it here to make sure it's
uploaded properly. See how that dot PNG. Simply click on Create NFT. Let's, let's confirm. Let's see. Okay, I
guess it's done. Say Create Token. It's done. And is there any issue something I have to understand? What is this? I think we have to do some
access control and null, but if we just refresh it, it is showing norm
access control allow origin header is present
under requested resource. What y that if I refresh it, I hope the metadata
is also uploaded. See, we have this
NFT j sine Phi, but this is not working. If I go to dashboard, then also it is
showing some adder. If I click it. Okay, let me find, let me check what is the issue and come up
with this solution. So I check again, and it is working properly. Earlier, it was taking
too much time and I believe this image
was really large. So if you are
uploading an image, make sure you optimize it. Because see, just show
you the difference. And also I uploaded
one more image. Here. You can see it is just 60 KB, but this one is one and b. So there is lot of difference
in the image size. And also, if I say, if I just refresh it, I will just save all here. Because you might be seeing
this kind of output. To solve it, you simply have to use this setting
that is margin at excess x-axis and y-axis
five in the index.js. And just save it here. Now you can see there
is a proper gapping. The cell NFT is working
as you can see. Now what I will do is if I can sell a
listing that is this one. Suppose if I want
to consider it, then I will just click
on cancel listing. That MetaMask will open. I will just confirm
this transaction. And as you know, when we can sell our
own listing, it, it costs to us that is, it will show that
we own that NFT and it will show in
my NFT dashboard. Here, you are not
seeing in the home. Let's go, Let's see the
other three or two. And if this CDMA two nf, this, that first
one got cancelled. But if I go to my NFT, then you can see this is
the NFT, we can sell it. It just got owned,
are bought by me. You can say I want so
I won't say bought because I haven't paid this, but at least it came
to my account again. That can sell. Nft
is also working. Okay. Now to check the
reseller and fd, Let's go to resell. Click on resale NFT. Sometimes you might
get some issues if you don't have the required
ethers in your wallet. In that in that time you have
to wait and get approved. 15 or 20, eight-thirds in
your icon from the faucet. Let's say it's still loading. But I hope this works. Let's say see it's
bending resell token. Because here we are doing lot of thing because we are
again, being an ally. But see, no NFT is owned by you. If I go to Home, we again see that
NFT popped up here. So we have against solid. If you want, you can
do the changes of setting up the price
and I haven't done it. It's really easy. It can be a project
for you if you want. Now, the only
functionality left is by, what I will do is I will change my account from account
to account one. But it has very less ethers, so I'm just confused. It has 0 this. So what I can do is get, transfer some account as
I transfer some ethers here at gone to one. And we just transfer is 0 or c is not that 0.01 is 0.04. Confirm descending. Because you must have
sufficient it tastes to buy. And sometimes it shows at a, that is why this sending also
is taking too much time. Okay. Let's go to Account one. After changing the
economy, let's refresh it. Now, a new user or prints
on their dashboard. Suppose C, he can
see unsold nf this, but if you go to dashboard, you will see no NFT
is listed by u and n is mine FTEs because this
user has a new account. But if you go and buy
these in fewer NFT, let's say it is working or not. Last time I got the editor
of insufficient fund. Let's see what
happens this time. Let's say if you want you can. So some loading indicator here. Let's see. It's
spending its spending. Receive, see, this is now this is not listed
in the marketplace. If I go to my LFTs, then see I have this NFT owned. This is also working fine yet are no issue you
can against selling. So finally, our
marketplace is completed. All the functionalities
are working flawlessly. If you want, you can upload this website to real
server as well, like Netlify, we're
selling. For free. You can just search on
Google how to do it, and then show it to the recruiters are
in your CV that you have created a complete
decentralized application. Thank you for watching. I hope you have enjoyed. Make sure you watch
my other courses as well. Have a nice day.