feat: fetch nfts on components

[sahar-fehri]

Description

This PR aims to:
1- Enable nft autodetection by default
2- Show a modal only once if the user disables the nft autodetection
3- Make NFT detection tied to the components that use the NFTs instead of the 3mins polling strategy.

This PR goes with this core PR: MetaMask/core#4281

Related issues

Related to: MetaMask/core#4281

Manual testing steps

Test the nft auto detection modal

1. Do a fresh import of the wallet
2. Go to settings => Security and privacy and make sure the toggle enable NFT auto detection is ON
3. Turn the nft auto detection toggle OFF
4. Go back to home page and you should see a new modal
5. Clicking on not right now button should close the modal and closing on allow button should enable the nft auto detection modal.

Test the removal of the polling in the backgound:

We have the toggle enabled by default now but this should not trigger calls to NFT-API every 3 mins anymore.
Instead the calls should be triggered only when you click on the NFT tab.

1. Open the background console and click on Networks tab.
2. Filter by /tokens (so you are able to see only the calls that will fetch user nfts)
3. Notice that as long as you did not click on the NFT tab, you should not be able to see any calls made in the backround.
   (where the old logic should keep detecting your NFTs every 3 mins as long as you have MM open)
4. Click on the NFT tab and you should be able to see the requests in the background to fetch your nfts.
5. You can also click on Send, and click on asset picker and click on NFT tab, you should be able to see your NFTs there too.
6. Calls should be made only when you click on the NFT tab.

Screenshots/Recordings

Before

Screen.Recording.2024-06-06.at.21.57.21.mov

After

after.mov

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [0383c5a]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (159 ± 228 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	130	84	18	9
		domContentLoaded	9	32	13	7	3
		load	41	2228	159	475	228
		domInteractive	9	32	13	7	3

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 407 Bytes (0.01%)
• ui: 8.92 KiB (0.13%)
• common: 3 KiB (0.05%)

[metamaskbot]

Builds ready [0383c5a]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (159 ± 228 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	130	84	18	9
		domContentLoaded	9	32	13	7	3
		load	41	2228	159	475	228
		domInteractive	9	32	13	7	3

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 407 Bytes (0.01%)
• ui: 8.92 KiB (0.13%)
• common: 3 KiB (0.05%)