Migration to React 18

[buberdds]

• cannot update all React related deps due to issues with webext-redux
• entry in resolutions is needed to avoid act warnings in tests when using userEvents
• there are still 3 warnings in loadable tests, but I have no idea how to avoid this, because warnings will be thrown when suspended data is not resolved and these tests cover such case
• importAccountsActions.clear() action had to be moved to saga. This UI part was not working with a new React 18 strict mode

[github-actions]

MegaLinter status: ✅ SUCCESS

Descriptor	Linter	Files	Fixed	Errors	Elapsed time
✅ EDITORCONFIG	editorconfig-checker	19		0	0.05s
✅ GIT	git_diff	yes		no	0.01s
✅ JSON	eslint-plugin-jsonc	1	0	0	1.21s
✅ JSON	jsonlint	1		0	0.33s
✅ JSON	prettier	1	0	0	0.66s
✅ JSON	v8r	1		0	5.19s
✅ TSX	eslint	13	0	0	8.28s
✅ TYPESCRIPT	eslint	4	0	0	5.03s

See errors details in artifact MegaLinter reports on CI Job page
Set VALIDATE_ALL_CODEBASE: true in mega-linter.yml to validate all sources, not only the diff

[codecov]

Codecov Report

Merging #1044 (cf5af8e) into master (5361586) will not change coverage.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master    #1044   +/-   ##
=======================================
  Coverage   88.59%   88.59%           
=======================================
  Files         102      102           
  Lines        1763     1763           
  Branches      407      407           
=======================================
  Hits         1562     1562           
  Misses        201      201           

Flag	Coverage Δ
cypress	60.86% <80.00%> (-0.06%)	⬇️
jest	78.62% <100.00%> (-0.30%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...ge/Features/ImportAccountsSelectionModal/index.tsx	96.15% <ø> (-0.40%)	⬇️
src/app/state/wallet/saga.ts	98.38% <100.00%> (+0.05%)	⬆️
src/index.tsx	100.00% <100.00%> (ø)

[lukaw3d]

Without act it complains Warning: An update to FatalErrorHandler inside a test was not wrapped in act(...)., but it really should since we're using findBy* :/
Did react team mess something up?

[lukaw3d]

Oddly this works:

  it('should render fallback if given one', async () => {
    const component = render(<LazyComponentWithFallback />)
    expect(await screen.findByText(/lazy-loaded/)).toBeInTheDocument()
    expect(component.container.firstChild).toMatchSnapshot()
  })

but this complains Warning: A suspended resource finished loading inside a test, but the event was not wrapped in act(...).:

  it('should render fallback if given one', async () => {
    const component = render(<LazyComponentWithFallback />)
    expect(await screen.findByText(/Loading/)).toBeInTheDocument()
    expect(component.container.firstChild).toMatchSnapshot()
    expect(await screen.findByText(/lazy-loaded/)).toBeInTheDocument()
    expect(component.container.firstChild).toMatchSnapshot()
  })