Page MenuHomePhabricator

[Cashtab] Implement Collections/NFT functionality
AbandonedPublic

Authored by emack on Dec 12 2021, 12:41.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Summary

Ready for backend integration and subsequent end to end adjustments.

This supersedes D10430 given the revised design and the godzilla amount of effort to rebase that diff to the current master.

User Story:

  1. User opens wallet and clicks on the NFT button.
  2. 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.
  3. 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.
  4. User completes the Create Collection form and notes the Collection ID and sees the newly created Collection in the Collection tab.
  5. User references the Collection ID as part of completing the Create NFT form and sees the newly created NFT in the NFT tab.
  6. The Collection token corresponding to the newly created NFT is burned.
  7. 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 functionality.
  • 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
nftRelease
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 17760
Build 35346: Build Diffcashtab-tests
Build 35345: arc lint + arc unit