From 3091e43fee7490b59217e7237a9b4a7e02ef8eb6 Mon Sep 17 00:00:00 2001
From: Frank von Hoven <141057783+frankvonhoven@users.noreply.github.com>
Date: Fri, 8 Nov 2024 12:20:32 -0600
Subject: [PATCH] feat: 1957 crash screen redesign (#12015)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Refactors ErrorBoundary to match [updated designs in
Figma](https://www.figma.com/design/DM5G1pyp74sMJwyKbw1KiR/Error-message-and-bug-report?node-id=1-5473&node-type=section&t=98CWfEC4JrKwpNCE-0)

## **Related issues**

Fixes: [#1957](https://github.com/MetaMask/mobile-planning/issues/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](https://metamask.sentry.io/feedback/?feedbackSlug=test-metamask-mobile%3A6031686409&mailbox=ignored&project=2651591&referrer=feedback_list_page&statsPeriod=30d)
5. Should see user feedback in the Sentry report
6. Example:

![image](https://github.com/user-attachments/assets/c1737758-5739-48f9-96d1-798e523f5be3)


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
<img width="753" alt="image"
src="https://github.com/user-attachments/assets/136542c2-1578-4e87-9922-154f21a70c4e">


### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/7dbe5e04-0152-41bc-984a-37cba98c4eeb


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

---------

Co-authored-by: Daniel Cross <dan.s.cross@icloud.com>
---
 app/components/Views/ErrorBoundary/index.js   | 387 +++++++++----
 .../Views/ErrorBoundary/warning-icon.png      | Bin 0 -> 1662 bytes
 .../Login/__snapshots__/index.test.tsx.snap   | 533 ++++++++----------
 locales/languages/en.json                     |  14 +-
 4 files changed, 529 insertions(+), 405 deletions(-)
 create mode 100644 app/components/Views/ErrorBoundary/warning-icon.png

diff --git a/app/components/Views/ErrorBoundary/index.js b/app/components/Views/ErrorBoundary/index.js
index a0730857d36e..f300d534ea32 100644
--- a/app/components/Views/ErrorBoundary/index.js
+++ b/app/components/Views/ErrorBoundary/index.js
@@ -1,12 +1,17 @@
-import React, { Component, useCallback } from 'react';
+import React, { Component } from 'react';
 import {
   Text,
   TouchableOpacity,
   View,
   StyleSheet,
-  Image,
   Linking,
   Alert,
+  Platform,
+  Modal,
+  KeyboardAvoidingView,
+  DevSettings,
+  Image,
+  TextInput,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { lastEventId as getLatestSentryId } from '@sentry/react-native';
@@ -16,39 +21,49 @@ import Logger from '../../../util/Logger';
 import { fontStyles } from '../../../styles/common';
 import { ScrollView } from 'react-native-gesture-handler';
 import { strings } from '../../../../locales/i18n';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import CLIcon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
 import ClipboardManager from '../../../core/ClipboardManager';
 import { mockTheme, ThemeContext, useTheme } from '../../../util/theme';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import BannerAlert from '../../../component-library/components/Banners/Banner/variants/BannerAlert';
+import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types';
+import CLText, {
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
 import {
   MetaMetricsEvents,
   withMetricsAwareness,
 } from '../../../components/hooks/useMetrics';
+import AppConstants from '../../../core/AppConstants';
+import { useSelector } from 'react-redux';
 
 // eslint-disable-next-line import/no-commonjs
-const metamaskErrorImage = require('../../../images/metamask-error.png');
+const WarningIcon = require('./warning-icon.png');
 
 const createStyles = (colors) =>
   StyleSheet.create({
     container: {
       flex: 1,
+      paddingHorizontal: 8,
       backgroundColor: colors.background.default,
     },
-    content: {
-      paddingHorizontal: 24,
-      flex: 1,
-    },
     header: {
       alignItems: 'center',
+      paddingTop: 20,
     },
     errorImage: {
-      width: 50,
-      height: 50,
-      marginTop: 24,
+      width: 32,
+      height: 32,
     },
     title: {
       color: colors.text.default,
       fontSize: 24,
+      paddingTop: 10,
+      paddingBottom: 20,
       lineHeight: 34,
       ...fontStyles.bold,
     },
@@ -60,23 +75,36 @@ const createStyles = (colors) =>
       textAlign: 'center',
       ...fontStyles.normal,
     },
-    errorContainer: {
+    errorMessageContainer: {
+      flexShrink: 1,
       backgroundColor: colors.error.muted,
       borderRadius: 8,
-      marginTop: 24,
+      marginTop: 10,
+      padding: 10,
     },
     error: {
-      color: colors.text.default,
+      color: colors.error.default,
       padding: 8,
       fontSize: 14,
       lineHeight: 20,
       ...fontStyles.normal,
     },
     button: {
-      marginTop: 24,
+      marginTop: 16,
       borderColor: colors.primary.default,
       borderWidth: 1,
-      borderRadius: 50,
+      borderRadius: 48,
+      height: 48,
+      padding: 12,
+      paddingHorizontal: 34,
+    },
+    blueButton: {
+      marginTop: 16,
+      borderColor: colors.primary.default,
+      backgroundColor: colors.primary.default,
+      borderWidth: 1,
+      borderRadius: 48,
+      height: 48,
       padding: 12,
       paddingHorizontal: 34,
     },
@@ -85,6 +113,55 @@ const createStyles = (colors) =>
       textAlign: 'center',
       ...fontStyles.normal,
     },
+    blueButtonText: {
+      color: colors.background.default,
+      textAlign: 'center',
+      ...fontStyles.normal,
+    },
+    submitButton: {
+      width: '45%',
+      backgroundColor: colors.primary.default,
+      marginTop: 24,
+      borderColor: colors.primary.default,
+      borderWidth: 1,
+      borderRadius: 48,
+      height: 48,
+      padding: 12,
+      paddingHorizontal: 34,
+    },
+    cancelButton: {
+      width: '45%',
+      marginTop: 24,
+      borderColor: colors.primary.default,
+      borderWidth: 1,
+      borderRadius: 48,
+      height: 48,
+      padding: 12,
+      paddingHorizontal: 34,
+    },
+    buttonsContainer: {
+      flexGrow: 1,
+      bottom: 10,
+      justifyContent: 'flex-end',
+    },
+    modalButtonsWrapper: {
+      flex: 1,
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'flex-end',
+      bottom: 24,
+      paddingHorizontal: 10,
+    },
+    feedbackInput: {
+      borderColor: colors.primary.default,
+      minHeight: 175,
+      minWidth: '100%',
+      paddingHorizontal: 16,
+      paddingTop: 10,
+      borderRadius: 10,
+      borderWidth: 1,
+      marginTop: 20,
+    },
     textContainer: {
       marginTop: 24,
     },
@@ -105,120 +182,216 @@ const createStyles = (colors) =>
     reportStep: {
       marginTop: 14,
     },
+    banner: {
+      width: '100%',
+      marginTop: 20,
+      paddingHorizontal: 16,
+    },
+    keyboardViewContainer: { flex: 1, justifyContent: 'flex-end' },
+    modalWrapper: { flex: 1, justifyContent: 'space-between' },
+    modalTopContainer: { flex: 1, paddingTop: '20%', paddingHorizontal: 16 },
+    closeIconWrapper: {
+      position: 'absolute',
+      right: 0,
+      top: 2,
+      bottom: 0,
+    },
+    modalTitleWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    modalTitleText: { paddingTop: 0 },
+    errorBoxTitle: { fontWeight: '600' },
+    contentContainer: {
+      justifyContent: 'space-between',
+      flex: 1,
+      paddingHorizontal: 16,
+    },
+    errorContentWrapper: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginTop: 20,
+    },
+    row: { flexDirection: 'row' },
+    copyText: {
+      color: colors.primary.default,
+      fontSize: 14,
+      paddingLeft: 5,
+      fontWeight: '500',
+    },
+    infoBanner: { marginBottom: 20 },
+    hitSlop: { top: 50, right: 50, bottom: 50, left: 50 },
   });
 
-const UserFeedbackSection = ({ styles, sentryId }) => {
-  /**
-   * Prompt bug report form
-   */
-  const promptBugReport = useCallback(() => {
-    Alert.prompt(
-      strings('error_screen.bug_report_prompt_title'),
-      strings('error_screen.bug_report_prompt_description'),
-      [
-        { text: strings('error_screen.cancel'), style: 'cancel' },
-        {
-          text: strings('error_screen.send'),
-          onPress: (comments = '') => {
-            // Send Sentry feedback
-            captureSentryFeedback({ sentryId, comments });
-            Alert.alert(strings('error_screen.bug_report_thanks'));
-          },
-        },
-      ],
-    );
-  }, [sentryId]);
-
-  return (
-    <Text style={[styles.reportStep, styles.text]}>
-      <Icon name="bug" size={14} />
-      {'  '}
-      {strings('error_screen.submit_ticket_8')}{' '}
-      <Text onPress={promptBugReport} style={styles.link}>
-        {strings('error_screen.submit_ticket_6')}
-      </Text>{' '}
-      {strings('error_screen.submit_ticket_9')}
-    </Text>
+export const Fallback = (props) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const [feedback, setFeedback] = React.useState('');
+  const dataCollectionForMarketing = useSelector(
+    (state) => state.security.dataCollectionForMarketing,
   );
-};
 
-UserFeedbackSection.propTypes = {
-  styles: PropTypes.object,
-  sentryId: PropTypes.string,
-};
+  const toggleModal = () => {
+    setModalVisible((visible) => !visible);
+    setFeedback('');
+  };
+  const handleContactSupport = () =>
+    Linking.openURL(AppConstants.REVIEW_PROMPT.SUPPORT);
+  const handleTryAgain = () => DevSettings.reload();
 
-const Fallback = (props) => {
-  const { colors } = useTheme();
-  const styles = createStyles(colors);
+  const handleSubmit = () => {
+    toggleModal();
+    captureSentryFeedback({ sentryId: props.sentryId, comments: feedback });
+    Alert.alert(strings('error_screen.bug_report_thanks'));
+  };
 
   return (
-    <ScrollView style={styles.content}>
+    <View style={styles.container}>
       <View style={styles.header}>
-        <Image source={metamaskErrorImage} style={styles.errorImage} />
+        <Image source={WarningIcon} style={styles.errorImage} />
         <Text style={styles.title}>{strings('error_screen.title')}</Text>
-        <Text style={styles.subtitle}>{strings('error_screen.subtitle')}</Text>
-      </View>
-      <View style={styles.errorContainer}>
-        <Text style={styles.error}>{props.errorMessage}</Text>
       </View>
-      <View style={styles.header}>
-        <TouchableOpacity style={styles.button} onPress={props.resetError}>
-          <Text style={styles.buttonText}>
-            <Icon name="refresh" size={15} />
-            {'  '}
-            {strings('error_screen.try_again_button')}
+      <BannerAlert
+        severity={BannerAlertSeverity.Info}
+        style={styles.infoBanner}
+        description={<CLText>{strings('error_screen.subtitle')}</CLText>}
+      />
+      <BannerAlert
+        severity={BannerAlertSeverity.Warning}
+        description={
+          <Text style={styles.text}>
+            {strings('error_screen.save_seedphrase_1')}{' '}
+            <Text onPress={props.showExportSeedphrase} style={styles.link}>
+              {strings('error_screen.save_seedphrase_2')}
+            </Text>{' '}
+            {strings('error_screen.save_seedphrase_3')}
           </Text>
+        }
+      />
+      <View style={styles.errorContentWrapper}>
+        <Text style={styles.errorBoxTitle}>
+          {strings('error_screen.error_message')}
+        </Text>
+        <TouchableOpacity
+          style={styles.row}
+          onPress={props.copyErrorToClipboard}
+        >
+          <CLIcon
+            name={IconName.Copy}
+            size={IconSize.Sm}
+            color={IconColor.Primary}
+          />
+          <Text style={styles.copyText}>{strings('error_screen.copy')}</Text>
         </TouchableOpacity>
       </View>
-      <View style={styles.textContainer}>
-        <Text style={styles.text}>
-          <Text>{strings('error_screen.submit_ticket_1')}</Text>
-        </Text>
-        <View style={styles.reportTextContainer}>
-          <Text style={styles.text}>
-            <Icon name="mobile-phone" size={20} />
-            {'  '}
-            {strings('error_screen.submit_ticket_2')}
-          </Text>
-
-          <Text style={[styles.reportStep, styles.text]}>
-            <Icon name="copy" size={14} />
-            {'  '}
-            <Text onPress={props.copyErrorToClipboard} style={styles.link}>
-              {strings('error_screen.submit_ticket_3')}
-            </Text>{' '}
-            {strings('error_screen.submit_ticket_4')}
+      <View style={styles.errorMessageContainer}>
+        <ScrollView>
+          <Text style={styles.error}>{props.errorMessage}</Text>
+        </ScrollView>
+      </View>
+      <View style={styles.buttonsContainer}>
+        {dataCollectionForMarketing && (
+          <TouchableOpacity style={styles.blueButton} onPress={toggleModal}>
+            <Text style={styles.blueButtonText}>
+              {strings('error_screen.describe')}
+            </Text>
+          </TouchableOpacity>
+        )}
+        <TouchableOpacity
+          style={dataCollectionForMarketing ? styles.button : styles.blueButton}
+          onPress={handleContactSupport}
+        >
+          <Text
+            style={
+              dataCollectionForMarketing
+                ? styles.buttonText
+                : styles.blueButtonText
+            }
+          >
+            {strings('error_screen.contact_support')}
           </Text>
-
-          <Text style={[styles.reportStep, styles.text]}>
-            <Icon name="send-o" size={14} />
-            {'  '}
-            {strings('error_screen.submit_ticket_5')}{' '}
-            <Text onPress={props.openTicket} style={styles.link}>
-              {strings('error_screen.submit_ticket_6')}
-            </Text>{' '}
-            {strings('error_screen.submit_ticket_7')}
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.button} onPress={handleTryAgain}>
+          <Text style={styles.buttonText}>
+            {strings('error_screen.try_again')}
           </Text>
-          <UserFeedbackSection styles={styles} sentryId={props.sentryId} />
-        </View>
-        <Text style={styles.text}>
-          {strings('error_screen.save_seedphrase_1')}{' '}
-          <Text onPress={props.showExportSeedphrase} style={styles.link}>
-            {strings('error_screen.save_seedphrase_2')}
-          </Text>{' '}
-          {strings('error_screen.save_seedphrase_3')}
-        </Text>
+        </TouchableOpacity>
       </View>
-    </ScrollView>
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        onRequestClose={toggleModal}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.keyboardViewContainer}
+        >
+          <View style={styles.modalWrapper}>
+            <View style={styles.modalTopContainer}>
+              <View style={styles.modalTitleWrapper}>
+                <CLText
+                  onPress={toggleModal}
+                  variant={TextVariant.HeadingMD}
+                  style={styles.modalTitleText}
+                >
+                  {strings('error_screen.modal_title')}
+                </CLText>
+                <TouchableOpacity
+                  onPress={toggleModal}
+                  style={styles.closeIconWrapper}
+                  hitSlop={styles.hitSlop}
+                >
+                  <CLIcon
+                    name={IconName.Close}
+                    size={IconSize.Md}
+                    color={IconColor.Default}
+                    onPress={toggleModal}
+                  />
+                </TouchableOpacity>
+              </View>
+              <TextInput
+                autoFocus
+                value={feedback}
+                onChangeText={setFeedback}
+                placeholder={strings('error_screen.modal_placeholder')}
+                style={styles.feedbackInput}
+                multiline
+                numberOfLines={10}
+              />
+            </View>
+            <View style={styles.modalButtonsWrapper}>
+              <TouchableOpacity
+                style={styles.cancelButton}
+                onPress={toggleModal}
+              >
+                <Text style={styles.buttonText}>
+                  {strings('error_screen.cancel')}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                disabled={!feedback}
+                // eslint-disable-next-line react-native/no-inline-styles
+                style={[styles.submitButton, { opacity: feedback ? 1 : 0.5 }]}
+                onPress={handleSubmit}
+              >
+                <Text style={styles.blueButtonText}>
+                  {strings('error_screen.submit')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </View>
   );
 };
 
 Fallback.propTypes = {
   errorMessage: PropTypes.string,
-  resetError: PropTypes.func,
   showExportSeedphrase: PropTypes.func,
   copyErrorToClipboard: PropTypes.func,
-  openTicket: PropTypes.func,
   sentryId: PropTypes.string,
 };
 
diff --git a/app/components/Views/ErrorBoundary/warning-icon.png b/app/components/Views/ErrorBoundary/warning-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..91a9fdd9fd927b48d4a29ccb12dfe4daec53100d
GIT binary patch
literal 1662
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
IM6N<$f~jTl^8f$<

literal 0
HcmV?d00001

diff --git a/app/components/Views/Login/__snapshots__/index.test.tsx.snap b/app/components/Views/Login/__snapshots__/index.test.tsx.snap
index df38946a89c3..4beae542b9e8 100644
--- a/app/components/Views/Login/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/Login/__snapshots__/index.test.tsx.snap
@@ -6,401 +6,344 @@ exports[`Login should render correctly 1`] = `
     {
       "backgroundColor": "#ffffff",
       "flex": 1,
+      "paddingHorizontal": 8,
     }
   }
 >
-  <RCTScrollView
-    collapsable={false}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
+  <View
     style={
       {
+        "backgroundColor": "#ffffff",
         "flex": 1,
-        "paddingHorizontal": 24,
+        "paddingHorizontal": 8,
       }
     }
   >
-    <View>
-      <View
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "paddingTop": 20,
+        }
+      }
+    >
+      <Image
+        source={
+          {
+            "default": {
+              "uri": "MockImage",
+            },
+          }
+        }
+        style={
+          {
+            "height": 32,
+            "width": 32,
+          }
+        }
+      />
+      <Text
         style={
           {
-            "alignItems": "center",
+            "color": "#141618",
+            "fontFamily": "EuclidCircularB-Bold",
+            "fontSize": 24,
+            "fontWeight": "600",
+            "lineHeight": 34,
+            "paddingBottom": 20,
+            "paddingTop": 10,
           }
         }
       >
-        <Image
-          source={
-            {
-              "default": {
-                "uri": "MockImage",
-              },
-            }
+        An error occurred
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#0376c91a",
+          "borderColor": "#0376c9",
+          "borderLeftWidth": 4,
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "marginBottom": 20,
+          "padding": 12,
+          "paddingLeft": 8,
+        }
+      }
+      testID="banneralert"
+    >
+      <View
+        style={
+          {
+            "marginRight": 8,
           }
+        }
+      >
+        <SvgMock
+          color="#0376c9"
+          height={24}
+          name="Info"
           style={
             {
-              "height": 50,
-              "marginTop": 24,
-              "width": 50,
+              "height": 24,
+              "width": 24,
             }
           }
+          width={24}
         />
-        <Text
-          style={
-            {
-              "color": "#141618",
-              "fontFamily": "EuclidCircularB-Bold",
-              "fontSize": 24,
-              "fontWeight": "600",
-              "lineHeight": 34,
-            }
+      </View>
+      <View
+        style={
+          {
+            "flex": 1,
           }
-        >
-          An error occurred
-        </Text>
+        }
+      >
         <Text
+          accessibilityRole="text"
           style={
             {
-              "color": "#6a737d",
+              "color": "#141618",
               "fontFamily": "EuclidCircularB-Regular",
               "fontSize": 14,
               "fontWeight": "400",
-              "lineHeight": 20,
-              "marginTop": 8,
-              "textAlign": "center",
+              "letterSpacing": 0,
+              "lineHeight": 22,
             }
           }
         >
           Your information can't be shown. Don’t worry, your wallet and funds are safe.
         </Text>
       </View>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#bf52081a",
+          "borderColor": "#bf5208",
+          "borderLeftWidth": 4,
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "padding": 12,
+          "paddingLeft": 8,
+        }
+      }
+      testID="banneralert"
+    >
       <View
         style={
           {
-            "backgroundColor": "#d738471a",
-            "borderRadius": 8,
-            "marginTop": 24,
+            "marginRight": 8,
           }
         }
       >
-        <Text
+        <SvgMock
+          color="#bf5208"
+          height={24}
+          name="Danger"
           style={
             {
-              "color": "#141618",
-              "fontFamily": "EuclidCircularB-Regular",
-              "fontSize": 14,
-              "fontWeight": "400",
-              "lineHeight": 20,
-              "padding": 8,
+              "height": 24,
+              "width": 24,
             }
           }
-        >
-          View: Login
-TypeError: (0 , _reactNativeDeviceInfo.getTotalMemorySync) is not a function
-        </Text>
+          width={24}
+        />
       </View>
       <View
         style={
           {
-            "alignItems": "center",
+            "flex": 1,
           }
         }
       >
-        <TouchableOpacity
-          onPress={[Function]}
+        <Text
           style={
             {
-              "borderColor": "#0376c9",
-              "borderRadius": 50,
-              "borderWidth": 1,
-              "marginTop": 24,
-              "padding": 12,
-              "paddingHorizontal": 34,
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 20,
             }
           }
         >
+          If you keep getting this error,
+           
           <Text
+            onPress={[Function]}
             style={
               {
                 "color": "#0376c9",
-                "fontFamily": "EuclidCircularB-Regular",
-                "fontWeight": "400",
-                "textAlign": "center",
               }
             }
           >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 15,
-                  },
-                  undefined,
-                  {
-                    "fontFamily": "FontAwesome",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-              
-            Try again
+            save your Secret Recovery Phrase
           </Text>
-        </TouchableOpacity>
+           
+          and re-install the app. Remember: without your Secret Recovery Phrase, you can't restore your wallet.
+        </Text>
       </View>
-      <View
+    </View>
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginTop": 20,
+        }
+      }
+    >
+      <Text
         style={
           {
-            "marginTop": 24,
+            "fontWeight": "600",
           }
         }
       >
-        <Text
+        Error message:
+      </Text>
+      <TouchableOpacity
+        onPress={[Function]}
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
+        <SvgMock
+          color="#0376c9"
+          height={16}
+          name="Copy"
           style={
             {
-              "color": "#141618",
-              "fontFamily": "EuclidCircularB-Regular",
-              "fontSize": 14,
-              "fontWeight": "400",
-              "lineHeight": 20,
+              "height": 16,
+              "width": 16,
             }
           }
-        >
-          <Text>
-            Please report this issue so we can fix it:
-          </Text>
-        </Text>
-        <View
+          width={16}
+        />
+        <Text
           style={
             {
-              "marginBottom": 24,
-              "marginTop": 16,
-              "paddingLeft": 14,
+              "color": "#0376c9",
+              "fontSize": 14,
+              "fontWeight": "500",
+              "paddingLeft": 5,
             }
           }
         >
+          Copy
+        </Text>
+      </TouchableOpacity>
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#d738471a",
+          "borderRadius": 8,
+          "flexShrink": 1,
+          "marginTop": 10,
+          "padding": 10,
+        }
+      }
+    >
+      <RCTScrollView
+        collapsable={false}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+      >
+        <View>
           <Text
             style={
               {
-                "color": "#141618",
+                "color": "#d73847",
                 "fontFamily": "EuclidCircularB-Regular",
                 "fontSize": 14,
                 "fontWeight": "400",
                 "lineHeight": 20,
+                "padding": 8,
               }
             }
           >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 20,
-                  },
-                  undefined,
-                  {
-                    "fontFamily": "FontAwesome",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-              
-            Take a screenshot of this screen.
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "marginTop": 14,
-                },
-                {
-                  "color": "#141618",
-                  "fontFamily": "EuclidCircularB-Regular",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                },
-              ]
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 14,
-                  },
-                  undefined,
-                  {
-                    "fontFamily": "FontAwesome",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-              
-            <Text
-              onPress={[Function]}
-              style={
-                {
-                  "color": "#0376c9",
-                }
-              }
-            >
-              Copy
-            </Text>
-             
-            the error message to clipboard.
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "marginTop": 14,
-                },
-                {
-                  "color": "#141618",
-                  "fontFamily": "EuclidCircularB-Regular",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                },
-              ]
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 14,
-                  },
-                  undefined,
-                  {
-                    "fontFamily": "FontAwesome",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-              
-            Submit a ticket
-             
-            <Text
-              onPress={[Function]}
-              style={
-                {
-                  "color": "#0376c9",
-                }
-              }
-            >
-              here.
-            </Text>
-             
-            Please include the error message and the screenshot.
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "marginTop": 14,
-                },
-                {
-                  "color": "#141618",
-                  "fontFamily": "EuclidCircularB-Regular",
-                  "fontSize": 14,
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                },
-              ]
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              style={
-                [
-                  {
-                    "color": undefined,
-                    "fontSize": 14,
-                  },
-                  undefined,
-                  {
-                    "fontFamily": "FontAwesome",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-              
-            Send us a bug report
-             
-            <Text
-              onPress={[Function]}
-              style={
-                {
-                  "color": "#0376c9",
-                }
-              }
-            >
-              here.
-            </Text>
-             
-            Please include details about what happened.
+            View: Login
+TypeError: (0 , _reactNativeDeviceInfo.getTotalMemorySync) is not a function
           </Text>
         </View>
+      </RCTScrollView>
+    </View>
+    <View
+      style={
+        {
+          "bottom": 10,
+          "flexGrow": 1,
+          "justifyContent": "flex-end",
+        }
+      }
+    >
+      <TouchableOpacity
+        onPress={[Function]}
+        style={
+          {
+            "backgroundColor": "#0376c9",
+            "borderColor": "#0376c9",
+            "borderRadius": 48,
+            "borderWidth": 1,
+            "height": 48,
+            "marginTop": 16,
+            "padding": 12,
+            "paddingHorizontal": 34,
+          }
+        }
+      >
         <Text
           style={
             {
-              "color": "#141618",
+              "color": "#ffffff",
               "fontFamily": "EuclidCircularB-Regular",
-              "fontSize": 14,
               "fontWeight": "400",
-              "lineHeight": 20,
+              "textAlign": "center",
             }
           }
         >
-          If this error persists,
-           
-          <Text
-            onPress={[Function]}
-            style={
-              {
-                "color": "#0376c9",
-              }
+          Contact support
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={[Function]}
+        style={
+          {
+            "borderColor": "#0376c9",
+            "borderRadius": 48,
+            "borderWidth": 1,
+            "height": 48,
+            "marginTop": 16,
+            "padding": 12,
+            "paddingHorizontal": 34,
+          }
+        }
+      >
+        <Text
+          style={
+            {
+              "color": "#0376c9",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontWeight": "400",
+              "textAlign": "center",
             }
-          >
-            save your Secret Recovery Phrase
-          </Text>
-           
-          & re-install the app. Note: you can NOT restore your wallet without your Secret Recovery Phrase.
+          }
+        >
+          Try again
         </Text>
-      </View>
+      </TouchableOpacity>
     </View>
-  </RCTScrollView>
+    <Modal
+      animationType="slide"
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      visible={false}
+    />
+  </View>
 </RNCSafeAreaView>
 `;
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 35616e1495c4..26eba78c3217 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -2930,13 +2930,21 @@
     "bug_report_prompt_title": "Tell us what happened",
     "bug_report_prompt_description": "Add details so we can figure out what went wrong.",
     "bug_report_thanks": "Thanks! We’ll take a look soon.",
-    "save_seedphrase_1": "If this error persists,",
+    "save_seedphrase_1": "If you keep getting this error,",
     "save_seedphrase_2": "save your Secret Recovery Phrase",
-    "save_seedphrase_3": "& re-install the app. Note: you can NOT restore your wallet without your Secret Recovery Phrase.",
+    "save_seedphrase_3": "and re-install the app. Remember: without your Secret Recovery Phrase, you can't restore your wallet.",
     "copied_clipboard": "Copied to clipboard",
     "ok": "OK",
     "cancel": "Cancel",
-    "send": "Send"
+    "send": "Send",
+    "submit": "Submit",
+    "modal_title": "Describe what happened",
+    "modal_placeholder": "Sharing details like how we can reproduce the bug will help us fix the problem.",
+    "error_message": "Error message:",
+    "copy": "Copy",
+    "describe": "Describe what happened",
+    "try_again": "Try again",
+    "contact_support": "Contact support"
   },
   "whats_new": {
     "title": "What's new",