feat: Add transaction flow and details sections

[pedronfigueiredo]

Description

Adds two new sections for the wallet initiated ERC20 token transfer redesigned confirmation.

Related issues

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

Manual testing steps

1. Go to this page...

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.

[metamaskbot]

Builds ready [5cd1c40]

• 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, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1704 ± 110 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1484	2374	1714	221	106
		domContentLoaded	1473	2320	1669	221	106
		load	1486	2387	1704	229	110
		domInteractive	21	175	42	34	16
		backgroundConnect	8	85	38	25	12
		firstReactRender	42	198	92	50	24
		getState	5	71	17	20	10
		initialActions	0	1	0	0	0
		loadScripts	1037	1904	1250	216	104
		setupStore	10	96	38	32	16
		uiStartup	1651	2558	1926	245	118

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

• background: 0 Bytes (0.00%)
• ui: 5.81 KiB (0.08%)
• common: 43 Bytes (0.00%)

[metamaskbot]

Builds ready [3d5e95a]

• 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, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1947 ± 122 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	330	2559	1859	421	202
		domContentLoaded	1590	2430	1900	212	102
		load	1598	2693	1947	254	122
		domInteractive	30	127	50	23	11
		backgroundConnect	8	299	49	62	30
		firstReactRender	49	213	120	47	22
		getState	5	134	32	33	16
		initialActions	0	1	0	0	0
		loadScripts	1167	1867	1412	180	86
		setupStore	11	125	38	32	15
		uiStartup	1859	3618	2255	403	193

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

• background: 0 Bytes (0.00%)
• ui: 6.22 KiB (0.08%)
• common: 43 Bytes (0.00%)