Now in the previous lesson, we saw how we were able to render this sell button and allow the user who 1
owns this NFT to put in a price and to list their NFT for sale. 2
Now, at the moment, it works, but if you're looking at it from the frontend as a user, you would 3
never know that it works because none of the user interface updates. 4
And we also want to be able to click on the Discover page to see all of the NFTs listed for sale. 5
So that's what we're going to be tackling in this lesson. 6
Now, the first thing we're going to do is to set up our loaders. Similar to previously inside our minter 7
where we got our loader to show up when the minting is happening, 8
we're also going to get our loader to show up when we are listing and transferring our NFT. 9
If you want, you can copy either the loader code from the minter or even better yet, copy it from the 10
read me. 11
And going into the item.jsx, we're going to paste it just below our image here. 12
Now we're going to add the hidden attribute in here and we're going to use the loaderHidden. 13
And we're going to add that up here, of course. 14
And we're going to set the initial state to true so that our loader is hidden in the beginning. 15
Now the time when we want our loader to start loading is once the user has clicked on the confirm button, 16
which triggers the sellItem function right here. 17
So we're going to set the loader hidden to false now, and then once all of our listing is completed and 18
our transfer is completed, 19
so if we go ahead and add another statement, the transferResult is equal to success, 20
then in this case, we're going to go ahead and set our loader to be hidden again. 21
So set it to true. 22
So now let's go ahead and hit save and take a look inside our NFTs. 23
If you see nothing here, then you might have to mint some because they disappear when we deploy. 24
But let's try selling one of these NFTs. 25
You can see that as soon as I click confirm, my loader starts up and going through listing and transfer, 26
it still continues until the transfer is successful, at which point the loader disappears, which is 27
exactly what we would want. 28
Now, the other thing that we want to disappear once the transfer is completed are the button and also 29
this price input. 30
So we can use our setButton and setPriceInput to make them disappear here as well, 31
like so. 32
And if we try that again, making sure that we actually pick the one that we can sell, and if you don't 33
have any others that you can sell, then you have to mint some. 34
And the reason why they can't sell is because this one's been transferred over to OpenD, so we actually 35
don't have the right to sell it again. 36
We're going to address this a little bit later on, but let's try it with this one or another one that 37
you mint. 38
So once that's done, all of those pieces of the UI disappear, which is brilliant, 39
but we now need to update the owner because the owner is now the OpenD canister. 40
And rather than just pulling in this principal which doesn't mean anything to the user, I'm going 41
to change that to just say OpenD. 42
So over here, I'm going to set the owner to a piece of text that's just going to be OpenD. 43
And that way, the user who's looking at this will know that it has been listed and the ownership temporarily 44
transferred to OpenD. 45
Now the final thing I'd like to do is to be able to blur the image once we've listed it, because it's 46
sort of transferred over in terms of ownership to OpenD, it's listed. It's not something that you should 47
be able to sell again or to be able to interact with that much. 48
So we're going to add a style to our image here and the style is going to be set equal to something 49
that we're going to call blur. 50
And blur, of course, needs to be set up here. 51
So it's going to be blur and setBlur. 52
And it's going to start out with nothing. 53
Now, the point where we actually setBlur is at the beginning of our sell item, 54
so we're going to call setBlur. 55
And what we're going to do is we're basically going to add some CSS to the styling of that image 56
element. 57
Basically, we add it on the fly and the CSS attribute is called a filter 58
and we're going to set it to a string that's called blur. 59
And then we get to determine how much blur inside a set of parentheses. 60
And I'm going to set it to a minimal amount, 61
so 4px. You'll still be able to see the actual image behind it, but it will be sufficiently 62
blurry that you'll notice a difference. 63
Let's go ahead and hit save and mint a new NFT to try it out. 64
Let's go ahead and sell this new NFT. 65
Click confirm. 66
Our blur shows up, 67
our loader shows up 68
Our blur doesn't go away 69
because that way we know that we don't actually quite own it anymore 70
and it's listed for sale. 71
And we've got quite a lot of feedback to tell us that, in fact, this has been successfully listed 72
for sale. 73
Now, the only thing is, when we actually refresh our site, you'll notice that the owner OpenD and 74
the button and the blur will not obey what we told it to do. 75
And this is because when we load up an item, when we refresh it, it goes into load NFT. 76
So we need a way to check to see if this particular item with this particular ID is actually listed 77
for sale. 78
To do that, we can go into our main. 79
mo 80
and create a new function. 81
The new function is simply going to be a public query func and it's going to be called is 82
Listed, and we get to pass in the id of a NFT and we're going to return a boolean, 83
so true or false, and that will reflect whether or not it's listed. 84
Let's add a semicolon at the top and we're going to use an if statement to check that out of our map 85
of listings. 86
If we run a get using this id that's passed in, if it equals null, well then that means that NFT 87
is not listed, 88
right? Because it's not in our map of listings. 89
So we're going to return false. 90
But otherwise, then it means it exists and it's not equal to null, in which case we will return 91
true. 92
Let's go ahead and call this function from our frontend here. 93
And just before we set our buttons, I'm going to create a new constant called nftIsListed 94
and it's going to be using the await OpenD.IsListed function that we just created and we're 95
going to pass in the props.id. 96
So now we can use that constant, 97
if the nftIsListed, then we're going to set the owner to again OpenD. 98
And we're going to set the blur as well. 99
So I'm just going to copy and paste that line of code that I had down here. 100
And if it's not listed, so in the else statement, then it will actually set the button to say, sell. 101
Now, by default, the button is nothing. 102
So that means unless it's listed, it won't have that sell button. 103
And if it is listed, then the owner is OpenD and the image is blurred out. 104
And now all we have to do is go ahead and redeploy all of our canisters 105
making sure in our did files for the OpenD that that new isListed method actually is added. 106
And once it is, we can hit save, we'll lose our NFT when we refresh. 107
But when we go ahead and click sell 108
this time, we'll get the blurring, 109
we'll get the loading 110
and we'll get all of those things disappearing once it's all done. 111
And even when we refresh the page, all of those properties will stay as they are because it knows that 112
it's already been listed. 113
Now, one final frontend thing that I would like to add is at the very bottom of item.jsx, you'll 114
see a section that says purple-text. 115
And this is a span that I put in there. And it'd be really nice if we could just get it to say listed 116
or rather space and then listed just so that will know at a glance that it's been listed and we'll know 117
that's why it's blurry. 118
So let's go ahead and add this as a constant. 119
And remember, if you want that space, just add a space before the curly braces. And I'm going to set 120
this to sellStatus 121
and add it as a constant. 122
And initialize it as an empty string. 123
But when the NFT is listed, we're going to set the sellStatus to say listed. 124
And similarly, once our selling is completed, we're going to set the same thing, 125
so sellStatus to a Listed. 126
And there you have it. 127
That's our styling done for all the listing. 128
Now, the next thing we'd like to do is to grab hold of all the listed NFTs and display it on the Discover 129
page so that you can see all of the NFTs that are being offered for sale on OpenD. 130
So for all of that and more, I'll see you on the next lesson.