Add post mint status message for dapp

[basememara]

On mint, disables action buttons and renders a success message with details on how to track and view the NFT. Confirmation button allows to refresh dapp to mint another NFT. Further discussion in issue #11.

Below is a video of the flow:

Screen.Recording.2022-03-28.at.3.00.13.PM.mov

[liarco]

Hi @basememara thank you very much for this contribution (and for showing the result on video... hat helps a lot reviewing the PR).

I like the idea but my plan was to implement a slightly different feedback. I want to review the code in order to have the full picture of what you did and then I will give you some feedback about this. I hope you will be willing to make some changes and/or maybe work on this together.

[basememara]

Yes absolutely! A couple things I didn't like what I did here is:

• I thought the await for the mint function would return when it was successful, but it's not. What I really wanted to do is give the success feedback after the transaction was successful or provide feedback if it failed. I'm not sure but it seems like I have to poll the transaction's status to accomplish this?

• I couldn't figure out how to get the token ID of what the user just minted, because if I had that there would be more interesting things I can do on the success page, like link directly into the NFT page on Etherscan and OpenSea

Thank you for putting all this together and taking the time to review this!

[hrpdave]

@basememara Well done for getting this moving. Just thinking if Number of tokens is more than 1 it might be hard to get all the token ids?

[basememara]

Ah ya there's the walletOfOwner(address:) API on the contract then get the last index. But is this not optimal when many have been minted you think?

I couldn't find the token ID anywhere in the transaction object which would be ideal. Or maybe there's some information we can carry thru the purchase process, or some API of ethers.js instead of the contract API.

[hrpdave]

The last item could be a good way to go when multiple minted ye ;)

[it-is-zods]

great idea. thank you for sharing.
the url pointing to the specific token id would be a nice feature, but might be confusing if the user minted multiple (from the code side of things as well as for the UX). I'll play with these next time changes on my next project :)

[it-is-zods]

Great changes, than you so much for sharing them. It works like a charm :)

Just my 0.02:

#1.
Etherscan should not be hardcoded
So instead of:
<li><a href={this.generateTokenUrl()} target="_blank">Etherscan</a></li>
We should have:
<li><a href={this.generateTokenUrl()} target="_blank">{this.state.networkConfig.blockExplorer.name}</a></li>

#2.
Also, don’t think it makes sense to have a link to Metamask and Rainbow at this stage of the user experience

[savino9]

Do you guys think there's a way to add a confirmation/error message feedback when the transaction is completed on the minting dapp?

[liarco]

Hi @basememara,
I've been working to a new implementation of this together with my teammate @Zekel97. Since we took inspiration from this PR I decided to revert your changes and add our own commits here... I really want you to be shown as a contributor on the repo.

I hope this works and GH will pick the correct commit authors.

We will do some tests before merging this.

Fixes #306
Fixes #11

[basememara]

Thanks for your kind thoughts and consideration. Much appreciated for your original massive contribution in the first place and taking this further. Whatever happens with GH is ok and am grateful what little contributions I've made helped.