fix: update state only when metadata changed after fetch

[sahar-fehri]

Explanation

Updating the updateNftMetadata function in NftController, to update the state only when new fetched metadata is different from the metadata in the state.

On Mobile when Nfts tab is rendered, we are calling addNft function on all user nfts.
We also do that when a user refreshed the page (by polling down the tab).
We want to refactor the component and use the updateNftMetadata instead of addNft.

Calling the addNft everytime when the component is rendered resulted in this bug on mobile MetaMask/metamask-mobile#9196

This one was tricky to reproduce, you will have to:
1- Import an account that has multiple NFTs
2- Create a new account (click on "add new account" button on mobile)
3- Switch back and forth between these two accounts fast and at some point you will see nfts from the account that has nfts appear on the account that did not have any nfts.

Still not quite sure what caused this bug now, but i see this PR
that has been merged and is part of v7.20.0 release which updates the "switch account" behavior.

I think what happened is when you are switching to the account that has nfts, we called addNft function on all the collectibles of accountA and the addIndividualNft fct is executed. Then when you switched to accountB (which does not have any nfts) the selectedAddress has switched in the nftController but we were still trying to add an NFT to state. So we came here where existingEntry was undefined because accountB does not have nfts

core/packages/assets-controllers/src/NftController.ts

Line 656 in e86b84e

const existingEntry: Nft | undefined = nfts.find(

with selectedAddress = accountB and with an nft that does not belong to accountB and it then executes the update

core/packages/assets-controllers/src/NftController.ts

Line 692 in e86b84e

this.updateNestedNftState(newNfts, ALL_NFTS_STATE_KEY, {

of accountB state.

Refactoring this component on mobile by removing unecessary useEffects (I think that we had those useEffects in the first place to fix nft refresh issues, but core already made updates where its triggering nft refresh when preferenceController state changes) this will allow removing this useEffect and this one.
The last useEffect which is triggering addNft, will instead be calling updateNftMetadata function and will only update the state if necessary.
If a user pulls down the page or goes back and forth between accounts, we might fetch new nft data but we wont be updating the state.

References

Changelog

@metamask/package-a

• FIXED: Instead of updating state automatically after fetching nft metadata, we are comparing the fetched metadata with current state and updating it only when it is different.

Checklist

• I've updated the test suite for new or updated code as appropriate
• I've updated documentation (JSDoc, Markdown, etc.) for new or updated code as appropriate
• I've highlighted breaking changes using the "BREAKING" category above as appropriate