feat: Rework hiddenCollections to handle more easily displays

[mcayuelas-ledger]

✅ Checklist

• npx changeset was attached.
• Covered by automatic tests.
• Impact of the changes:
  • ...

📝 Description

hiddenCollections is now an object renamed nftCollectionsStatusByNetwork, containing the different contracts according to their network
3 types of status :

• Spam => Spam filter automatically adds the contract to the object
• Whitelisted => User manually removes contract from hiddenCollections
• Blacklisted => User manually adds contract to hiddenCollections (Hide Collection)

FF-based display (nftFromSimpleHash) :

• If ON => display only whitelisted NFTs in addition to others
• If OFF => Whitelisted and Spam NFTs are displayed in addition to the others

Screen.Recording.2024-11-25.at.11.16.10.1.mov

❓ Context

• JIRA or GitHub link: LIVE-14976

---

🧐 Checklist for the PR Reviewers

• The code aligns with the requirements described in the linked JIRA or GitHub issue.
• The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
• There are no undocumented trade-offs, technical debt, or maintainability issues.
• The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
• Any new dependencies have been justified and documented.
• Performance considerations have been taken into account. (changes have been profiled or benchmarked if necessary)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web-tools	❌ Failed (Inspect)			Nov 25, 2024 1:27pm

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
ledger-live-github-bot	⬜️ Ignored (Inspect)	Visit Preview		Nov 25, 2024 1:27pm
native-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Nov 25, 2024 1:27pm
react-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Nov 25, 2024 1:27pm

[themooneer]

(general question) When no hidden collection item, will it be more UX/UI friendly to add an indication that the list is empty ?

[themooneer]

suggestion : you can extract it to actions/constants.ts as
an event based action type UPDATE_NFT_COLLECTION_STATUS = settings/updateNftCollectionStatus

[mcayuelas-ledger]

@themooneer For the moment no, Maybe we can see to improve that soon :)

It's been a long time that this UI has been done, so maybe a refresh could be good !

[themooneer]

Both list and whitelisted have the same logic process except for the .filter(...) business logic. In this case and to avoid code duplication i suggest a generic function with dependency inversion in the status filtering part.
The generic function can be easily extracted from the hook as a helper, but it's ok if you want to keep it her

// this is the generic function (that parses the nftCollection) 
const neftCollectionParser = (nftCollection, applyFilterFn) => Object.values(nftCollection).flatMap(contracts =>
      Object.entries(contracts)
        .filter(appltFilterFn)
        .map(([contract]) => contract),
    );

const list = useMemo(() => {
  neftCollectionParser(nftCollectionsStatusByNetwork,([_, status]) =>
          !shouldDisplaySpams ? status !== NftStatus.whitelisted : status === NftStatus.blacklisted)
},[nftCollectionsStatusByNetwork, shouldDisplaySpams]);

const whitelisted = useMemo(() => {
  neftCollectionParser(nftCollectionsStatusByNetwork,([_, status]) => status === NftStatus.whitelisted)
},[nftCollectionsStatusByNetwork, shouldDisplaySpams]);

[themooneer]

the benefit from extracting neftCollectionParser in a helper function , is that you can use it in other part of the app (for instance : in orderedVisibleNftsSelector)