1  import React from 'react';
 2  import ReactDOM from 'react-dom';
 3  import {Tabs, Tab} from 'react-bootstrap';
 4  
 5  import EmbarkJS from 'Embark/EmbarkJS';
 6  import TestStatusNetworkUI from './components/TestStatusNetwork';
 7  
 8  import './dapp.css';
 9  
10  class App extends React.Component {
11  
12    constructor(props) {
13      super(props);
14  
15      this.handleSelect = this.handleSelect.bind(this);
16  
17      this.state = {
18        error: null,
19        activeKey: 1,
20        whisperEnabled: false,
21        storageEnabled: false,
22        blockchainEnabled: false  
23      };
24    }
25  
26    componentDidMount() {
27      EmbarkJS.onReady((err) => {
28        this.setState({blockchainEnabled: true});
29        if (err) {
30          // If err is not null then it means something went wrong connecting to ethereum
31          // you can use this to ask the user to enable metamask for e.g
32          return this.setState({error: err.message || err});
33        }
34  
35        EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, _version) => {
36          if (err) {
37            return console.log(err);
38          }
39          this.setState({whisperEnabled: true});
40        });
41  
42        EmbarkJS.Storage.isAvailable().then((result) => {
43          this.setState({storageEnabled: result});
44        }).catch(() => {
45          this.setState({storageEnabled: false});
46        });
47      });
48    }
49  
50    _renderStatus(title, available) {
51      let className = available ? 'pull-right status-online' : 'pull-right status-offline';
52      return <React.Fragment>
53        {title}
54        <span className={className}></span>
55      </React.Fragment>;
56    }
57  
58    handleSelect(key) {
59      this.setState({ activeKey: key });
60    }
61  
62    render() {
63      const ensEnabled = EmbarkJS.Names.currentNameSystems && EmbarkJS.Names.isAvailable();
64      if (this.state.error) {
65        return (<div>
66          <div>Something went wrong connecting to ethereum. Please make sure you have a node running or are using metamask to connect to the ethereum network:</div>
67          <div>{this.state.error}</div>
68        </div>);
69      }
70      return (<div>
71        <h3>Status Network - Test </h3>
72        <Tabs onSelect={this.handleSelect} activeKey={this.state.activeKey} id="uncontrolled-tab-example">
73          <Tab eventKey={1} title={this._renderStatus('StatusNetwork', this.state.blockchainEnabled)}>
74            <TestStatusNetworkUI />
75          </Tab>
76        </Tabs>
77      </div>);
78    }
79  }
80  
81  ReactDOM.render(<App></App>, document.getElementById('app'));