feat: add the ConsenSys zkEVM (Linea) as a default network

[VGau]

Explanation

The goal of the PR is to add the ConsenSys zkEVM network (Linea) as a default test network like Goerli and Sepolia.
I've updated all translation files.
This change can only be tested when this PR (MetaMask/design-tokens#408) is merged and the new design tokens library version is updated on metamask-extension repo.

Screenshots/Screencaps

Before

After

Manual Testing Steps

Step 1:
Go to the metamask home screen and select Goerli test network in the dropdown.

Step 2:
Go to this website: https://bridge.goerli.zkevm.consensys.net/send?token=ETH and send some ETH (minimum 0.1) from Goerli to Consensys zkEVM .

Wait for transaction to be finished.

Step 3:
Go to the metamask home screen and select then new ConsenSys zkEVM test network in the dropdown.

Step 4:
Go to this website: https://bridge.goerli.zkevm.consensys.net/send?token=ETH and send some ETH (minimum 0.1) from Consensys zkEVM to Goerli.

Wait for transaction to be finished.

Final step:
Check if all transactions succeed on Metamask.

Pre-merge author checklist

• I've clearly explained:
  • What problem this PR is solving
  • How this problem was solved
  • How reviewers can test my changes
• Sufficient automated test coverage has been added

Pre-merge reviewer checklist

• Manual testing (e.g. pull and build branch, run in browser, test code being changed)
• PR is linked to the appropriate GitHub issue
• IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

[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.

[VGau]

I have read the CLA Document and I hereby sign the CLA

[georgewrmarshall]

Hey @VGau, this is looking good from a UI perspective. Do you know if #234FD5 is the brand color for Consensys? We could add this too our design tokens and replace it so consensys zkevm has it's own color and doesn't need to use the Goerli color

[georgewrmarshall]

Hey @VGau, I was wondering instead of using color we could add these images for test networks?? I think it's a lot more scalable

[VGau]

Hey @VGau, I was wondering instead of using color we could add these images for test networks?? I think it's a lot more scalable

Yes sure ! I will add these images. Should I add these images in the networks dropdown too ? 😄

[codecov]

Codecov Report

Merging #17875 (dd72990) into develop (a854cfd) will decrease coverage by 0.04%.
The diff coverage is 43.14%.

@@             Coverage Diff             @@
##           develop   #17875      +/-   ##
===========================================
- Coverage    64.19%   64.15%   -0.04%     
===========================================
  Files          908      908              
  Lines        35211    35256      +45     
  Branches      8989     9006      +17     
===========================================
+ Hits         22601    22617      +16     
- Misses       12610    12639      +29     

Impacted Files	Coverage Δ
...ethod-middleware/handlers/switch-ethereum-chain.js	15.49% <0.00%> (-0.22%)	⬇️
...network-screen/loading-network-screen.component.js	0.00% <0.00%> (ø)
...t-original/signature-request-original.component.js	52.21% <0.00%> (-0.94%)	⬇️
...p/signature-request/signature-request.component.js	74.68% <0.00%> (-1.94%)	⬇️
ui/components/ui/typography/typography.js	100.00% <ø> (ø)
ui/helpers/constants/design-system.ts	100.00% <ø> (ø)
ui/pages/routes/routes.component.js	0.00% <0.00%> (ø)
...es/settings/networks-tab/networks-tab.constants.js	100.00% <ø> (ø)
ui/helpers/constants/settings.js	33.77% <33.33%> (-0.01%)	⬇️
ui/components/app/dropdowns/network-dropdown.js	38.52% <42.31%> (-0.22%)	⬇️
... and 3 more

... and 2 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[georgewrmarshall]

UI approved!

I think it's fine, but it might be worth checking if prod/your design contact is fine with the color in dark mode

[georgewrmarshall]

Note to other reviewers: Usually we wouldn't allow static hex values but I think we can refactor the test networks to use images like other token icons during the multichain v0.5 work so this will be temporary.

[danjm]

I believe there is a requirement that this network not be shown until March 28. Can you add some logic to the network dropdown and the settings sections to ensure that is the case.

roughly something like:

const shouldShowZKEVM = Date.now() > (new Date('March 28, 2023 12:00:00'))

And use that to conditionally render the network in the dropdown and in the network settings pages

[danjm]

this branch probably needs to be updated to latest develop to avoid the prep-build-desktop failure

[danjm]

These changes look good to me