embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

weird

This commit is contained in:
Jonathan Rainville 2018-08-06 13:43:11 -04:00 committed by Pascal Precht
parent 1bd5174f61
commit e098c2cb7d
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 127 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
embark-ui/src/components/ExplorerLayout.js
View File

@ -1,62 +0,0 @@
import React from 'react';
import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
import {
Page,
Grid,
List
} from "tabler-react";
import AccountsContainer from '../containers/AccountsContainer';
import AccountContainer from '../containers/AccountContainer';
import BlocksContainer from '../containers/BlocksContainer';
import BlockContainer from '../containers/BlockContainer';
import TransactionsContainer from '../containers/TransactionsContainer';
import TransactionContainer from '../containers/TransactionContainer';
const ExplorerLayout = () => (
<Grid.Row>
<Grid.Col md={3}>
<Page.Title className="my-5">Explorer</Page.Title>
<div>
<List.Group transparent={true}>
<List.GroupItem
className="d-flex align-items-center"
to="/embark/explorer/accounts"
icon="users"
RootComponent={withRouter(NavLink)}
>
Accounts
</List.GroupItem>
<List.GroupItem
className="d-flex align-items-center"
to="/embark/explorer/blocks"
icon="book-open"
RootComponent={withRouter(NavLink)}
>
Blocks
</List.GroupItem>
<List.GroupItem
className="d-flex align-items-center"
to="/embark/explorer/transactions"
icon="activity"
RootComponent={withRouter(NavLink)}
>
Transactions
</List.GroupItem>
</List.Group>
</div>
</Grid.Col>
<Grid.Col md={9}>
<Switch>
<Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
<Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
<Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
<Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
<Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
<Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
</Switch>
</Grid.Col>
</Grid.Row>
);
export default ExplorerLayout;

127
embark-ui/src/containers/CommunicationContainer.js Normal file
View File

@ -0,0 +1,127 @@
import React, {Component} from 'react';
import {Alert, Button, Form, Icon} from 'tabler-react';
class CommunicationContainer extends Component {
constructor(props) {
super(props);
this.state = {
listenTo: '',
channel: '',
message: '',
subscribedChannels: [],
messageList: [],
logs: []
};
}
handleChange(e, name) {
this.setState({
[name]: e.target.value
});
}
sendMessage(e) {
e.preventDefault();
// TODO send message via API
console.log('Send', this.state.message);
this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
}
listenToChannel(e) {
e.preventDefault();
const subscribedChannels = this.state.subscribedChannels;
subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
this.setState({
subscribedChannels
});
console.log('Listen to', this.state.listenTo);
// TODO listen to channel via API
/*EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}, (error, message) => {
const messageList = this.state.messageList;
if (error) {
messageList.push(<span className="alert-danger">Error: {error}</span>);
} else {
messageList.push(<span>Channel: <b>{message.topic}</b> | Message: <b>{message.data}</b></span>);
}
this.setState({
messageList
});
});*/
this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
}
addToLog(txt) {
this.state.logs.push(txt);
this.setState({logs: this.state.logs});
}
render() {
let isEnabledMessage = '';
if (this.enabled === false) {
isEnabledMessage = <React.Fragment>
<Alert type="warning">The node you are using does not support Whisper</Alert>
<Alert type="warning">The node uses an unsupported version of Whisper</Alert>
</React.Fragment>;
} else if (!this.enabled) {
isEnabledMessage = <Alert bsStyle="secondary "><Icon name="refresh-cw" /> Checking Whisper support, please wait</Alert>;
}
return (
<React.Fragment>
{isEnabledMessage}
<h3>Listen To channel</h3>
<Form.FieldSet>
<Form.Group label="Whisper channel" isRequired>
<Form.Input name="text-input"
defaultValue={this.state.listenTo}
placeholder="channel"
onChange={e => this.handleChange(e, 'listenTo')}/>
</Form.Group>
<Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
<div id="subscribeList">
{this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
</div>
<p>Messages received:</p>
<div id="messagesList">
{this.state.messageList.map((item, i) => <p key={i}>{item}</p>)}
</div>
</Form.FieldSet>
<h3>Send Message</h3>
<Form.FieldSet>
<Form.Group label="Whisper channel" isRequired>
<Form.Input name="text-input"
defaultValue={this.state.channel}
placeholder="channel"
onChange={e => this.handleChange(e, 'channel')}/>
</Form.Group>
<Form.Group label="Message" isRequired>
<Form.Input name="text-input"
defaultValue={this.state.message}
placeholder="message"
onChange={e => this.handleChange(e, 'message')}/>
</Form.Group>
<Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
</Form.FieldSet>
<p>Javascript calls being made: </p>
<div className="logs">
<p>EmbarkJS.Messages.setProvider&lpar;&apos;whisper&apos;&rpar;</p>
{
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
}
</div>
</React.Fragment>
);
}
}
export default CommunicationContainer;