1  import React from 'react';
 2  
 3  import { NewTabLink } from 'components/ui';
 4  import './index.scss';
 5  
 6  const SUBJECT = 'Error!';
 7  const DESCRIPTION =
 8    'I encountered an error while using MyCrypto. Here are the steps to re-create the issue:\n\nThe full error message:';
 9  
10  interface Props {
11    error: Error;
12  }
13  
14  const ErrorScreen: React.SFC<Props> = ({ error }) => {
15    return (
16      <div className="ErrorScreen">
17        <div className="ErrorScreen-content">
18          <h2>Oops!</h2>
19          <p>Something went really wrong, so we're showing you this red error page! 😱</p>
20          <p>
21            Please contact{' '}
22            <a
23              target="_blank"
24              rel="noopener noreferrer"
25              href={`mailto:support@mycrypto.com?Subject=${SUBJECT}&body=${DESCRIPTION}`}
26            >
27              support@mycrypto.com
28            </a>{' '}
29            if a refresh doesn't fix it (or click it anyway to open a ticket 😊). You can also submit
30            an issue on our{' '}
31            <NewTabLink href="https://github.com/MyCryptoHQ/MyCrypto/issues">
32              GitHub Repository
33            </NewTabLink>. Please attach the following error to help our team solve your issue.
34          </p>
35          <code>{error.message}</code>
36          <h5>
37            Please make sure the error message does not include any sensitive information before
38            sending it to us. We don't want your private keys!
39          </h5>
40        </div>
41      </div>
42    );
43  };
44  
45  export default ErrorScreen;