fix: Improve network connection banner

[mcmire]

Description

When requests to a network are have delayed or failed responses, the user will see a banner on the home screen informing them of the problem and prompting them to switch the RPC endpoint. However there are a few issues with this banner:

• The styles do not reflect the current designs. Specifically, the font size is too big and the background color is off.
• When we are showing a banner for an Infura-powered network, we do not want to prompt the user to switch to another RPC endpoint, we want them to stay with Infura.
• If the issue is not with the endpoint but with the user's local connection, they won't know about it.

To address these, this commit:

• Updates the styles to match the design.
• Hides the "Update RPC" button if the failing network is Infura.
• Includes copy that asks the user to check their connection. Ideally we would only say this if the user actually has an Internet issue, but we can't detect this, so at the moment we always show this copy just to cover our bases.

Changelog

CHANGELOG entry: Make design and copy improvements to degraded/unavailable network banner

Related issues

• See design for comparison.

Prerequisites

1. Check out this branch. Run yarn setup:expo, then yarn watch:clean.
2. Ensure that you have a development build on your emulator/device.
3. Open MetaMask on your emulator/device, and go through onboarding.
4. Install mitmproxy.
5. Create a Python script somewhere on your computer with the following contents: https://gist.github.com/mcmire/1d43ce690d3a974217126cd584f79b7d. This script will cause all requests to Infura RPC endpoints to respond with 500, simulating an outage.
6. Run mitmproxy -s <path to your script> in an open terminal session. This will run the proxy server.
7. Go to the network settings on your computer. Add both an HTTP and HTTP proxy that points to http://localhost:8080. On macOS:
   1. Click on the Network icon in the menu bar.
   2. Go to Wifi Settings.
   3. Click on Details next to your active network
   4. Click on Proxies in the sidebar.
   5. Enable "Web proxy (HTTP)"
   6. Enter 127.0.0.1 for "Server" and 8080 for "Port".
   7. Do the same thing for "Secure web proxy (HTTPS)".

Testing an Infura network

1. In MetaMask, switch to Ethereum Mainnet.
2. Close and reopen the app, and log back in. Ethereum should be selected.
3. Once on the home screen, wait 5 seconds. You should see a gray banner that says "Still connecting to Ethereum..." There should be no "Update RPC" link next to it.
4. After 30 seconds, the banner should change to "Unable to connect to Ethereum. Check your network connectivity." Again, there should be no "Update RPC" link next to it.

Testing a custom network

1. Go back to the network settings on your computer and disable the proxies. On macOS, you can do this by disabling "Web proxy (HTTP)" and "Secure web proxy (HTTPS)".
2. Back in your terminal, start Ganache (run yarn ganache from your branch).
3. Now go back to MetaMask and add Ganache as a network, pointing to http://localhost:8545 (chain 1337). Ensure that the network is selected.
4. Now stop Ganache.
5. Restart MetaMask and log back in. Your local network should be selected.
6. Wait 5 seconds. You should see a gray banner that says "Still connecting to Localhost..." There should be an "Update RPC" link next to it.
7. After 30 seconds, the banner should change to "Unable to connect to Localhost. Check your network connectivity." Again, there should be an "Update RPC" link next to it.
8. Click on this link. It should open a modal to update the network.

Screenshots/Recordings

Before

After

Pre-merge author checklist

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