feat: Custom header for wallet initiated confirmations

[pedronfigueiredo]

Description

The back button brings the user to the stepper for ERC20 token transfer.

This PR includes creating a placeholder component for token transfer confirmations. It also includes unit tests.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3218

Manual testing steps

1. Enable redesign on developer options.
2. Initiate transfer from an erc20 token in the wallet.
3. The confirmation in the screenshot below should appear.

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension 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.

[sonarcloud]

Quality Gate failed

Failed conditions
62.9% Coverage on New Code (required ≥ 80%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[metamaskbot]

Builds ready [0697807]

• 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, 6
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1778 ± 106 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1533	2345	1781	210	101
		domContentLoaded	1516	2276	1746	209	100
		load	1527	2352	1778	220	106
		domInteractive	16	253	64	61	29

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

• background: 0 Bytes (0.00%)
• ui: 5.36 KiB (0.07%)
• common: 64 Bytes (0.00%)

[matthewwalsh0]

Minor, is there some duplication here with HeaderInfo, is it worth a AdvancedDetailsToggleButton component somewhere?

[pedronfigueiredo]

This is a good idea, I'll add it in the next PR

[matthewwalsh0]

Minor, as an alternate to returning an enitrely separate component here, is there much overlap between the two headers such that it's worth just dynamically including the back button etc?

[pedronfigueiredo]

I think the components are sufficiently different to warrant separate components