Page MenuHomePhabricator

[Cashtab] Support for creating NFT Collections
ClosedPublic

Authored by bytesofman on Fri, Apr 19, 18:46.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC7fd5d9197038: [Cashtab] Support for creating NFT Collections
Summary

Update the create token form to support creating NFT1 Parent tokens, which we call "NFT Collections" in Cashtab.

We take a sha256 hash of the user's raw file uploaded for the image and set this as the token document hash field.

We do not support minting NFTs yet, but display an Info notice on the Token page explaining this feature is coming soon.

Test Plan

npm test

This diff is live at https://cashtab-local-dev.netlify.app/ if you want to test creating an NFT collection with an icon (token-server still blocks doing this from localhost)

To test the hash:

  • Pick a jpg or png
  • Get its sha256 hash from your local machine, e.g. sha256sum myjpg.jpg
  • Note this
  • Upload the jpg on the create token form with "NFT Collection" selected
  • Confirm the token document hash in the new input field matches what you got on your local machine

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bytesofman added inline comments.
cashtab/src/validation/index.js
227 ↗(On Diff #47327)

ran into this trying to create a test token with a wikipedia url

cashtab/package.json
37 ↗(On Diff #47327)

this makes our bundle ~7kb bigger, but I do not think I can do a better job if we want to get sha256 hashes of a file in a react app

emack requested changes to this revision.Sat, Apr 20, 07:41
emack added a subscriber: emack.

The sha256 hash matches all ok.
Is it intended that the collection NFT is rendered in amongst the standard slp1 eTokens with no differentiation? Is this just a staging area until you do the next diff to implement NFTs? That carousel styling would be good, one for each type of token.

Also its not intuitive for users to work out the creation of NFTs through a switch deep within the create eToken workflow. IMO It's material enough to warrant it's own creation workflow and get uniquely branded.

This revision now requires changes to proceed.Sat, Apr 20, 07:41

Is it intended that the collection NFT is rendered in amongst the standard slp1 eTokens with no differentiation?

In the diff where I added searching and sorting to this token list, I also added enough information that we could make some adjustments here. We could add token type or, since we only have 2 types at the moment, just add some kind of label to "NFT Collections." We could also add a switch in addition to the search form so the list shows/hides all types. imo tho, this should be its own diff.

Is this just a staging area until you do the next diff to implement NFTs? That carousel styling would be good, one for each type of token.

Yes, I am not really sure the best way to present info on NFTs. So, I want to get them functional -- then work on things like optimizing display. The NFT1 spec is in general a bit complicated and certainly not a user facing thing. Cashtab's job will be to translate this into good UX. However, due to the complexities, I anticipate iterating toward this. Will see how people use it, if people are using it, what the problems are -- and improve this gradually. I don't think we should hold up the functionality bc of a hypothetical ux expectation.

This diff only allows creating the parent tokens, i.e. "Create NFT Collection." If the user navigates to the collection page, they see an info notice that minting NFTs is not yet supported, but will be soon.

For the initial workflow -- NFT minting will probably happen only on the Token page of the NFT Collection. This will also be the page that shows the NFTs (carousel would be great, though it will probably be a list to start with -- then each NFT will also have its own token page with its own actions (burn, send).

Also its not intuitive for users to work out the creation of NFTs through a switch deep within the create eToken workflow. IMO It's material enough to warrant it's own creation workflow and get uniquely branded.

Maybe. I do not think it should get its own component though, since the genesis txs are almost exactly the same (per spec) and the info required is the same as well. But, the user does not need to know this.

Added a separate button, "Create NFT Collection" -- which loads CreateTokenForm conditionally to create an NFT collection. Removed the "nft collection" switch from the form.

image.png (236×473 px, 34 KB)

image.png (577×473 px, 34 KB)

Overall -- I think it is worth launching NFTs before the UX is perfect. Will iterate to improve the UX.

do not use toggle switch for NFTs in form, instead form has own route and button

This revision is now accepted and ready to land.Sat, Apr 20, 12:05