Added IPFS toggle

[NidhiKJha]

This PR:

1. Adds an IPFS toggle
2. If IPFS Toggle is on, the user can input the IPFS value
3. In case IPFS is toggled off, no NFT image will be shown
4. Placeholder image in case, when IPFS is off, will have a show button, on click of that IPFS toggle modal pops up

• Fixes #872 and #1014

Screencaps

Screen.Recording.2023-07-28.at.6.32.05.PM.mov

Manual Testing Steps

• Turn on the IPFS toggle
• Input field should be hidden
• No NFT media should be shown if it's stored in ipfs
• Toggle on, by default the default IPFS is restored, you can edit it as well

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[HowardBraham]

I don't think this UI is clear as proposed. The toggle as the text is written would turn the custom gateway off. Your intention is to turn all IPFS off.

You should also be aware of (and probably review) my very related PR #19700

[NidhiKJha]

I don't think this UI is clear as proposed. The toggle as the text is written would turn the custom gateway off. Your intention is to turn all IPFS off.

@HowardBraham this PR is just to add the toggle. For other UI improvements as per the Figma design, I am going to create a separate PR. The text custom IPFS will be replaced as well. I couldn't find another place where I need to update the IPFS value, so I think this toggle will turn all IPFS off. Right?

[metamaskbot]

Builds ready [c7badf4]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1715 ± 73 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	115	197	145	26	13
		domContentLoaded	1515	2020	1715	151	73
		load	1515	2020	1715	151	73
		domInteractive	1515	2020	1715	151	73

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 573 Bytes (0.01%)
• common: 0 Bytes (0.00%)

[codecov]

Codecov Report

Merging #20172 (350e0a3) into develop (41f6627) will increase coverage by 0.64%.
Report is 28 commits behind head on develop.
The diff coverage is 32.61%.

❗ Current head 350e0a3 differs from pull request most recent head c15d839. Consider uploading reports for the commit c15d839 to get more accurate results

@@             Coverage Diff             @@
##           develop   #20172      +/-   ##
===========================================
+ Coverage    68.68%   69.31%   +0.64%     
===========================================
  Files          986      988       +2     
  Lines        37870    37323     -547     
  Branches     10138    10021     -117     
===========================================
- Hits         26008    25870     -138     
+ Misses       11862    11453     -409     

Files Changed	Coverage Δ
ui/components/app/nft-details/nft-details.js	93.33% <ø> (-0.09%)	⬇️
ui/components/multichain/nft-item/nft-item.js	100.00% <ø> (ø)
ui/ducks/app/app.ts	60.48% <0.00%> (-2.02%)	⬇️
ui/pages/routes/routes.container.js	52.63% <0.00%> (-2.92%)	⬇️
ui/store/actions.ts	41.76% <0.00%> (-0.46%)	⬇️
...ponents/app/nft-default-image/toggle-ipfs-modal.js	16.67% <16.67%> (ø)
...es/settings/security-tab/security-tab.component.js	73.53% <27.27%> (-3.89%)	⬇️
...ponents/app/nft-default-image/nft-default-image.js	70.00% <50.00%> (-30.00%)	⬇️
ui/pages/routes/routes.component.js	48.95% <50.00%> (+0.01%)	⬆️
ui/components/app/nfts-items/nfts-items.js	95.16% <100.00%> (+0.08%)	⬆️
... and 1 more

... and 75 files with indirect coverage changes

[metamaskbot]

Builds ready [4082ecb]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1485 ± 32 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	101	203	123	24	11
		domContentLoaded	1368	1654	1485	67	32
		load	1368	1654	1485	67	32
		domInteractive	1368	1654	1485	67	32

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

• background: 0 Bytes (0.00%)
• ui: 4.16 KiB (0.05%)
• common: 581 Bytes (0.01%)

[SaraCheikh]

Hi @NidhiKJha some small details about content and design:

-The old copy should be updated to the new one reviewed by @coreyjanssen : MetaMask uses third-party services to show images of your NFTs stored on IPFS, display information related to ENS addresses entered in your browser's address bar, and fetch icons for different tokens. Your IP address may be exposed to these services when you’re using them.
-When the setting is on, the toggle should have a label that says: Choose your preferred IPFS gateway

Screen.Recording.2023-07-28.at.11.11.21.mov

[NidhiKJha]

Hi @NidhiKJha some small details about content and design:

@SaraCheikh, we will update the Design and copy of the settings page along with the autodetection toggle and openSea. I have updated the Placeholder image with the one that you shared in the screencast.

[metamaskbot]

Builds ready [350e0a3]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1586 ± 61 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	113	181	131	18	8
		domContentLoaded	1432	1943	1586	128	61
		load	1432	1943	1586	128	61
		domInteractive	1432	1943	1586	128	61

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

• background: 0 Bytes (0.00%)
• ui: 3.73 KiB (0.05%)
• common: 581 Bytes (0.01%)

[SaraCheikh]

we will update the Design and copy of the settings page along with the autodetection toggle and openSea
sounds good @NidhiKJha

[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 [6457684]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1656 ± 97 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	100	242	150	38	18
		domContentLoaded	1404	2035	1656	202	97
		load	1405	2035	1656	202	97
		domInteractive	1404	2035	1656	202	97

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

• background: 0 Bytes (0.00%)
• ui: 4.18 KiB (0.05%)
• common: 581 Bytes (0.02%)

Updated

[darkwing]

Approving with an issue being opened to create an E2E

[metamaskbot]

Builds ready [a5c89b6]

• builds: chrome, firefox
• builds (beta): chrome
• builds (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
  • common: 0, 1, 2, 3, 4, 5
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1528 ± 51 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	115	169	135	14	7
		domContentLoaded	1403	1886	1528	107	51
		load	1403	1886	1528	107	51
		domInteractive	1403	1886	1528	107	51

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

• background: 0 Bytes (0.00%)
• ui: 4.18 KiB (0.05%)
• common: 581 Bytes (0.02%)