1  import React, { Component } from 'react';
 2  import { Grid, Row, Col, PageHeader } from 'react-bootstrap';
 3  
 4  /**
 5   * Class representing the home page rendering
 6   * 
 7   * @extends React.Component
 8   */
 9  class Error extends Component {
10  
11    //#region Constructor
12    constructor(props) {
13      super(props);
14    }
15    //#endregion
16  
17    //#region React lifecycle events
18    render() {
19  
20      const metaMaskPossible = (this.props.error.message.indexOf('Internal JSON-RPC error') > 0 || this.props.error.message.indexOf('Failed to fetch') > 0);
21  
22      return (
23        <Grid>
24          <Row>
25            <Col xs={12}>
26              <PageHeader>
27                Whoopsieee <small>Something went wrong</small>
28              </PageHeader>
29              {metaMaskPossible ?
30                <React.Fragment>
31                  <h3>Metamask error?</h3>
32                  <p>It appears you might be using metamask. Have you signed in and are you on the right network?</p>
33                </React.Fragment>
34                :
35                ''
36              }
37              <h3>Error details</h3>
38              <pre>{this.props.error.message}<br />
39              {this.props.error.stack}
40              { this.props.error.source ? 
41                <React.Fragment>
42                  <br/>Source: { this.props.error.source }
43                </React.Fragment>
44                : 
45                ''
46              }</pre>
47            </Col>
48          </Row>
49        </Grid>
50      );
51    }
52    //#endregion
53  }
54  
55  export default Error