#499 | ERC1155 inventory updates

[ezra-sg]

Fixes #499

Description

This PR makes changes to NFTs in order to support ERC1155. Previously, the NFT class was built around the assumption that each NFTClass would have one underlying NFT 'item' which contained most of its relevant information. However with ERC1155, it's more complicated because we have data from potentially many different versions of the same NFT but with different owner data (e.g. owner 1 has 5 of this NFT, owner 2 has 3 of it, etc).

Ultimately this PR simplifies the data structures surrounding NFTs into a single NFT class, which is extended by Erc721Nft and Erc1155Nft. The classes can be instantiated directly, but generally the factory function constructNft is more useful; it takes indexer data and generates an NFT from that.

This PR also updates the border color for various elements across the site which were previously too light to see, such as the border around NFT tiles and the border between wallet balance rows. It also updates tooltips to have the gradient background from designs

Note: the ability to send 1155s and to view the Owners tab on the NFT detail page will be implemented in #658

Test scenarios

• get at least 2 of the same erc1155 NFT and one ERC721 (cheap tokens here) (tokens with supply > 1 are erc1155)
  • this is an example of a cheap 1155
• go to https://deploy-preview-599--wallet-develop-mainnet.netlify.app/
• sign in with the account which has NFTs
• go to the NFT inventory page and switch to tile view
  • the tile for the erc1155 token should show the number you own in the bottom right
  • any NFT you only own one of should show no number in the bottom right
• switch to list view for NFTs
  • quantity should be shown in the table
• click into the detail page for an erc1155 token
  • you should see the number of owners, owned by you, and total owned
  • you should not see the Transfer or Owners tabs (will be implemented in Update ERC1155 support on NFT details page #658 )
• return to the inventory page
• click into the detail page for an erc721 token
  • there should be no owners, owned by you, or total owned fields. instead you should see an Owner field with your address
  • there should be a Transfer tab
• transfer the 721 NFT to another account owned by you
  • you should immediately see the Owner field change, and the Transfer tab should disappear
• go to https://deploy-preview-599--wallet-develop-mainnet.netlify.app/evm/collectible-details?contract=0x63F8948c2Ee0670758A4E60EED80aAa6Cf093356&id=1141&tab=attributes
  • you should see the owner as 0x....c3c3
  • there should be no Transfer tab

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have cleaned up the code in the areas my change touches
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings
• I have removed any unnecessary console messages
• I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
• I have tested for mobile functionality and responsiveness
• I have added appropriate test coverage

[netlify]

✅ Deploy Preview for wallet-staging ready!

Name	Link
🔨 Latest commit	88debf3
🔍 Latest deploy log	https://app.netlify.com/sites/wallet-staging/deploys/65495c0e91fc4f0008bc77cc
😎 Deploy Preview	https://deploy-preview-599--wallet-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for wallet-develop-mainnet ready!

Name	Link
🔨 Latest commit	88debf3
🔍 Latest deploy log	https://app.netlify.com/sites/wallet-develop-mainnet/deploys/65495c0e8aa35a00089112d6
😎 Deploy Preview	https://deploy-preview-599--wallet-develop-mainnet.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.