Use name component in signature requests

[matthewwalsh0]

Explanation

In the flask build type only, use the Name component to display addresses in typed V3 and V4 signature requests.

This enables the user to specify custom names for any of the signature request addresses, but also to select from a list of proposed names from multiple sources including ENS, Etherscan, Lens Protocol, and the blockchain itself.

Screenshots

Before

After

Manual Testing Steps

• Go to test dApp.
• Click Sign under Sign Typed Data V3.
• Verify new components are used for addresses.
• Click address and save a custom name.
• Verify custom name is visible in new component.
• Repeat for Sign Typed Data V4.

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.

[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.

[codecov]

Codecov Report

Patch coverage: 67.57% and project coverage change: -0.01% ⚠️

Comparison is base (73466bc) 68.26% compared to head (4f56098) 68.25%.
Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #20831      +/-   ##
===========================================
- Coverage    68.26%   68.25%   -0.01%     
===========================================
  Files         1002     1003       +1     
  Lines        40133    40151      +18     
  Branches     10742    10743       +1     
===========================================
+ Hits         27395    27402       +7     
- Misses       12738    12749      +11     

Files Changed	Coverage Δ
ui/hooks/usePetnamesEnabled.ts	0.00% <0.00%> (ø)
...t/signature-request-data/signature-request-data.js	94.74% <66.67%> (-5.26%)	⬇️
app/scripts/metamask-controller.js	53.92% <76.00%> (-0.07%)	⬇️
...s/contract-details-modal/contract-details-modal.js	68.00% <80.00%> (-0.09%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metamaskbot]

Builds ready [c5fdaca]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): 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, 6
  • 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 (1600 ± 42 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	108	184	132	16	8
		domContentLoaded	1495	1774	1599	88	42
		load	1495	1775	1600	88	42
		domInteractive	1495	1774	1599	88	42

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

• background: 91 Bytes (0.00%)
• ui: 33.74 KiB (0.41%)
• common: 1.28 KiB (0.03%)

[metamaskbot]

Builds ready [6534103]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): 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, 6
  • 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 (1843 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	125	177	157	14	7
		domContentLoaded	1572	2202	1843	183	88
		load	1572	2202	1843	183	88
		domInteractive	1572	2202	1843	183	88

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

• background: 91 Bytes (0.00%)
• ui: 33.75 KiB (0.41%)
• common: 1.28 KiB (0.03%)

[sleepytanya]

Works great for me.
Creating custom name for signature request address video:

12.mov

The base branch was changed.

[metamaskbot]

Builds ready [4f56098]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): 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, 6
  • 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 (1555 ± 74 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	111	162	139	13	6
		domContentLoaded	1400	1932	1554	153	74
		load	1400	1932	1555	154	74
		domInteractive	1400	1932	1554	153	74

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 14.51 KiB (0.18%)
• common: 0 Bytes (0.00%)