refactor(5560): migrate create-account.component.js to react-router-v5-compat

[DDDDDanica]

Description

Create Account Component - React Router v6 Migration

Changelog

CHANGELOG entry: null

Related issues

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

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 [5ff9e42]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1235 ± 72 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1235	1103	1510	72	1291	1361
			load	1043	899	1315	71	1091	1149
			domContentLoaded	1035	894	1309	71	1080	1143
			domInteractive	18	14	69	7	18	28
			firstPaint	688	130	1193	416	1072	1152
			backgroundConnect	225	207	262	9	230	244
			firstReactRender	21	16	42	5	23	33
			getState	12	5	85	9	16	25
			initialActions	4	0	76	10	3	16
			loadScripts	818	689	1084	69	864	932
			setupStore	8	5	16	2	9	12
	Webpack	Home	uiStartup	2245	1632	2623	196	2354	2567
			load	1677	1202	1974	155	1749	1904
			domContentLoaded	1670	1196	1962	154	1742	1888
			domInteractive	18	12	97	16	14	68
			firstPaint	175	66	357	64	214	301
			backgroundConnect	30	15	339	33	30	60
			firstReactRender	213	89	405	116	367	392
			getState	34	4	372	78	14	280
			initialActions	7	2	172	17	6	12
			loadScripts	1665	1193	1950	153	1737	1877
			setupStore	25	6	330	59	17	34
Firefox	Browserify	Home	uiStartup	1325	1125	1765	105	1401	1498
			load	1141	985	1362	80	1198	1284
			domContentLoaded	1141	984	1362	80	1197	1284
			domInteractive	99	34	309	44	107	204
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	28	17	68	9	32	44
			firstReactRender	24	20	54	5	23	38
			getState	7	2	75	11	6	33
			initialActions	3	0	27	5	2	14
			loadScripts	1120	968	1347	80	1177	1267
			setupStore	8	3	102	12	6	27
	Webpack	Home	uiStartup	1553	1351	2139	127	1615	1785
			load	1295	1126	1647	100	1369	1461
			domContentLoaded	1295	1125	1647	100	1368	1461
			domInteractive	89	31	263	43	92	203
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	30	20	122	14	33	56
			firstReactRender	53	41	84	7	57	65
			getState	10	4	68	11	10	39
			initialActions	3	0	53	6	3	15
			loadScripts	1274	1102	1626	99	1348	1440
			setupStore	11	4	178	19	7	36

Benchmark value 1236 exceeds gate value 1234 for chrome browserify home mean uiStartup
Benchmark value 225 exceeds gate value 10 for chrome browserify home mean backgroundConnect
Benchmark value 4 exceeds gate value 1 for chrome browserify home mean initialActions
Benchmark value 244 exceeds gate value 18 for chrome browserify home p95 backgroundConnect
Benchmark value 16 exceeds gate value 1.2 for chrome browserify home p95 initialActions
Benchmark value 2246 exceeds gate value 2192 for chrome webpack home mean uiStartup
Benchmark value 34 exceeds gate value 29 for chrome webpack home mean getState
Benchmark value 2567 exceeds gate value 2454 for chrome webpack home p95 uiStartup
Benchmark value 68 exceeds gate value 57 for chrome webpack home p95 domInteractive
Benchmark value 392 exceeds gate value 370 for chrome webpack home p95 firstReactRender
Benchmark value 280 exceeds gate value 195 for chrome webpack home p95 getState
Benchmark value 12 exceeds gate value 7 for chrome webpack home p95 initialActions
Benchmark value 29 exceeds gate value 25 for firefox browserify home mean backgroundConnect
Benchmark value 3 exceeds gate value 1 for firefox browserify home mean initialActions
Benchmark value 204 exceeds gate value 195 for firefox browserify home p95 domInteractive
Benchmark value 33 exceeds gate value 24 for firefox browserify home p95 getState
Benchmark value 14 exceeds gate value 2 for firefox browserify home p95 initialActions
Benchmark value 30 exceeds gate value 26 for firefox webpack home mean backgroundConnect
Benchmark value 53 exceeds gate value 38 for firefox webpack home mean firstReactRender
Benchmark value 4 exceeds gate value 1 for firefox webpack home mean initialActions
Benchmark value 203 exceeds gate value 156 for firefox webpack home p95 domInteractive
Benchmark value 56 exceeds gate value 49 for firefox webpack home p95 backgroundConnect
Benchmark value 65 exceeds gate value 50 for firefox webpack home p95 firstReactRender
Benchmark value 39 exceeds gate value 32 for firefox webpack home p95 getState
Benchmark value 15 exceeds gate value 2 for firefox webpack home p95 initialActions
Benchmark value 36 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 307ms | Sum of p95 exceeds: 603.8ms
Sum of all benchmark exceeds: 910.8ms

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

• background: 43 Bytes (0%)
• ui: 1.12 KiB (0.02%)
• common: -34 Bytes (0%)

[itsyoboieltr]

LGTM, just one small thing

[itsyoboieltr]

doesn't this happen automatically as restoreMocks: true is in our jest.config.js? @Gudahtt

[DDDDDanica]

I noticed

  // TODO: enable resetMocks
  // resetMocks: true,

i think that's more what we are looking for

[DDDDDanica]

I can try in another PR to remove all the jest.clearAllMocks(); by resolving TODO ~

[MajorLift]

LGTM!