feat: 1957 crash screen redesign

[frankvonhoven]

Description

Refactors ErrorBoundary to match updated designs in Figma

Related issues

Fixes: #1957

Manual testing steps

1. Go WalletView
2. Add:

   useEffect(() => {
     throw new Error('Test Error');
   }, []);
   

3. Restart the app
4. Dismiss the Red Screen
5. See the new Error Screen

TESTING THE BUILD:

1. Create a QA build in Bitrise
2. force an error
3. report the error
4. check Sentry
5. Should see user feedback in the Sentry report
6. Example:
   

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-07.at.13.11.44.mp4

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.

[sentry-io]

🔍 Existing Issues For Review

Your pull request is modifying functions with the following pre-existing issues:

📄 File: app/components/Views/ErrorBoundary/index.js

Function	Unhandled Issue
createStyles	TypeError: a.StyleSheet.create is not a function. (In 'a.StyleSheet.create({container:{flex:1,backgroundColo... ... Event Count: 1 Affected Users: 2
createStyles	TypeError: undefined is not an object (evaluating 'e.background') createStyles(app/components/Views/Err... Event Count: 1 Affected Users: 2
createStyles	TypeError: undefined is not an object (evaluating '_r(d[13]).fontStyles.bold') createStyles(app/compone... Event Count: 1 Affected Users: 1
createStyles	TypeError: undefined is not an object (evaluating 'e.text.default') createStyles(app/components/Views/E... Event Count: 1 Affected Users: 2

---

_{Did you find this useful? React with a 👍 or 👎}

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

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e8daf14
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/365731c4-f570-49b6-a42e-a5b11ef114f9

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 1d5aa7f
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/530a1570-f651-4fa0-a4d6-ddae479c2b32

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
64.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[vinnyhoward]

This is very cool, nice job @frankvonhoven @yanrong-chen
LGTM✅