useDisplayName Hook and Integration into <Name/> Component

[dbrans]

Description

This PR introduces a new useDisplayName hook, aimed at including logic for displaying token names within the <Name/> component. This hook replicates existing display logic, before Petnames.

Details

Development of useDisplayName Hook

• Functionality: The new useDisplayName hook encapsulates the existing logic for determining a token's displayName. It performs sequential checks for:
  • Petname: Prioritizes the petname if available.
  • Token Metadata: Fetches the name from static or dynamic token lists.

Integration with <Name/> Component

• Replacement of Logic: The existing useName logic within the <Name/> component is replaced by the useDisplayName hook.

• Icon Display: The component adjusts the displayed icon (either a bookmark or a warning sign) based on the presence or absence of a resolved name.

Related issues

Fixes: #22735

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• 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.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

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

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

Page Load Metrics (757 ± 18 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	97	138	108	12	6
		domContentLoaded	10	20	15	3	1
		load	700	847	757	38	18
		domInteractive	10	20	15	3	1

Bundle size diffs

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

[sleepytanya]

Works as expected on Chrome 121.0.6167.139 and Firefox 122.0: