[Cashtab] Implement Collections/NFT functionality
AbandonedPublic
Actions

Authored by emack on Feb 18 2022, 10:59.

Details

Reviewers

bytesofman

Group Reviewers

Restricted Project

Summary

Fresh diff to align with the new UI and supersedes D10667 and D10430.
Needs server integration before I can finalise the rendering logic.

User Story:

User opens wallet and clicks on the NFT button.
UI greets the user with the ability to create an NFT Collection or an NFT itself, along with their existing Collections/NFTs associated with their wallet, segmented in tab form.
An NFT needs to be associated with a Collection, therefore a Collection needs to be created first before they are able to create individual NFTs.
User completes the Create Collection form and notes the Collection ID and sees the newly created Collection in the Collection tab.
User references the Collection ID as part of completing the Create NFT form and sees the newly created NFT in the NFT tab.
The Collection token corresponding to the newly created NFT is burned.
User clicks on the individual Collection or NFT to send various Collections and NFTs to other eToken addresses.

UI notes:

This diff loosely follows the wireframes in T1793. Due to the limited UI real estate I opted away from T1793's approach of an expanding Collection card revealing the linked NFTs because the NFTs would have had to shrink to an unacceptable level.
NFT Projects (i.e. Collections) that are intending to create several thousands of NFTs will need to develop their own custom scripts as it would not be practical to repeat this UI a few thousand times. Cashtab should be able to display those Collections/NFTs but recommendation is for projects to have their own sites that displays them to their requirements.

Coding notes:

Within useBCH.js, I originally planned to utilise the existing createToken() and pass in various NFT flags, but that function was already a spaghetti junction. Hence separate functions are created for creating and sending Collections and NFTs, particularly since there are unique logic (e.g. parsing for the UTXO holding the Collection ID token). Keeping these as separate functions will also facilitate future NFT functionalities.
Unit tests will be added once the backend is integrated.

Test Plan

npm start
navigate to the NFTs section
expand the 'Create Collection' section, fill in attributes and click Create Collection
verify the newly created Collection only appears under the Collection tab and not the NFT tab nor eTokens section
expand the 'Create NFT' section, fill in attributes and click Create NFT
verify the corresponding Collection has been burnt (decremented) in the process of creating the NFT
verify the newly created NFT only appears under the NFT tab and not the eTokens or Collection sections
verify the newly created NFT's Collection link matches the original Collection ID
Send a Collection or NFT to another eToken address and verify balances for both wallets are updated
Verify there is no scenario where the user can create an NFT without having an existing Collection first.
verify cross browser compatibility in firefox
npm run extension
verify functions in web extension mode
deploy to mobile device and verify UI

Diff Detail

Repository

rABC Bitcoin ABC

Branch

nftRelease2

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 18673
Build 37137: Build Diff	cashtab-tests
Build 37136: arc lint + arc unit

Event Timeline

emack created this revision.Feb 18 2022, 10:59

Herald added a reviewer: Restricted Project. · View Herald TranscriptFeb 18 2022, 10:59

emack requested review of this revision.Feb 18 2022, 11:00

emack mentioned this in D10667: [Cashtab] Implement Collections/NFT functionality.Feb 18 2022, 11:00

Harbormaster completed remote builds in B18299: Diff 32431.Feb 18 2022, 11:04

Great work on this feature.

We want to use the documentHash field for NFTs, so that a hash of the user uploaded image is also part of the token data. This way, even though the images will not be hosted on chain, their provenance is unique and verifiable.

See here for how bch-js parses this field from the config object: https://github.com/Permissionless-Software-Foundation/bch-js/blob/master/src/slp/nft1.js#L219

I'm not sure what the best library is for hashing the uploaded image. Will need to do some digging / testing.

This revision now requires changes to proceed.Mar 9 2022, 19:06

imported imghash library to hash NFT image for verifiable provenance
updated createPreviewedNft to hash the NFT image at the pre-submission preview stage
added placeholder attribute for NFT image hash within configObj
added NFT image hash attribute for display in SendNFT
added mint NFT routing link from SendNftCollection screen where the user is routed to the createNftForm with the collection ID passed in as a param (click on NFT menu -> click on a Collection -> 'Mint NFT from this Collection' -> observe routing to the Create NFT component with the parent collection ID prefilled)
added unit tests for the new Collection and NFT UI components and snapshots created
will wait for the backend server to be hooked up before I start testing parallax and carousel animation UI effects

Harbormaster completed remote builds in B18467: Diff 32679.Mar 12 2022, 13:49

Rebased to Cashtab v2 however webpack 5 in v2 introduces breaking changes for the image hashing libraries. Have tested a few modules but none are compatible with webpack 5. Will sort out image hashing logic towards the later end of this review process.

Harbormaster completed remote builds in B18673: Diff 32991.Mar 30 2022, 12:56

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

npm WARN deprecated axios@0.19.2: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
npm WARN deprecated ts-custom-error@2.2.2: npm package tarball contains useless codeclimate-reporter binary, please update to version 3.1.1. See https://github.com/adriengibrat/ts-custom-error/issues/32

added 1832 packages, and audited 1833 packages in 32s

201 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (10 moderate, 3 high)

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
npm notice 
npm notice New major version of npm available! 7.7.6 -> 8.5.5
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.5.5>
npm notice Run `npm install -g npm@8.5.5` to update!
npm notice 

> cashtab@1.0.0 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

src/components/NFT/Collection.js
  Line 1:17:  'useState' is defined but never used   no-unused-vars
  Line 1:27:  'useEffect' is defined but never used  no-unused-vars

src/components/NFT/CollectionList.js
  Line 8:27:   'tokens' is missing in props validation         react/prop-types
  Line 13:22:  'tokens.filter' is missing in props validation  react/prop-types

src/components/NFT/CollectionListItem.js
  Line 42:48:  'tokenId' is missing in props validation    react/prop-types
  Line 42:57:  'tokenName' is missing in props validation  react/prop-types

src/components/NFT/CreateCollectionForm.js
  Line 74:7:    'AntCollapseWrapper' is assigned a value but never used  no-unused-vars
  Line 240:41:  'file' is defined but never used                         no-unused-vars

src/components/NFT/CreateNftForm.js
  Line 206:34:  'file' is defined but never used                            no-unused-vars
  Line 298:32:  'setNewNftDocumentHash' is assigned a value but never used  no-unused-vars

src/components/NFT/NftList.js
  Line 8:20:   'tokens' is missing in props validation         react/prop-types
  Line 13:22:  'tokens.filter' is missing in props validation  react/prop-types

src/components/NFT/NftListItem.js
  Line 37:41:  'tokenId' is missing in props validation  react/prop-types

Search for the keywords to learn more about each error.


Build cashtab-tests failed with exit code 1

Please abandon -- we can reference this later, but the codebase has changed so much at this point that this is mostly a placeholder.

This revision now requires changes to proceed.Sep 20 2022, 18:19

emack abandoned this revision.Sep 21 2022, 00:24