Migrating demo to react
Blockchain tab complete Whisper tab complete (requires status indicator yet)
This commit is contained in:
Richard Ramos
parent
edb6876d7a
commit
28b8eff45a
|
|
@ -0,0 +1,96 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
||||
import React from 'react';
|
||||
import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
|
||||
|
||||
class Blockchain extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.setValue = this.setValue.bind(this);
|
||||
this.getValue = this.getValue.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
valueSet: 10,
|
||||
valueGet: "",
|
||||
logs: []
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e){
|
||||
this.setState({valueSet: e.target.value});
|
||||
}
|
||||
|
||||
setValue(e){
|
||||
e.preventDefault();
|
||||
|
||||
var value = parseInt(this.state.valueSet, 10);
|
||||
|
||||
// If web3.js 1.0 is being used
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
|
||||
this._addToLog("SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
|
||||
} else {
|
||||
SimpleStorage.set(value);
|
||||
this._addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
|
||||
}
|
||||
}
|
||||
|
||||
getValue(e){
|
||||
e.preventDefault();
|
||||
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.get().call()
|
||||
.then(_value => this.setState({valueGet: _value}))
|
||||
this._addToLog("SimpleStorage.methods.get(console.log)");
|
||||
} else {
|
||||
SimpleStorage.get()
|
||||
.then(_value => this.setState({valueGet: _value}));
|
||||
this._addToLog("SimpleStorage.get()");
|
||||
}
|
||||
}
|
||||
|
||||
_addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
||||
render(){
|
||||
return (<React.Fragment>
|
||||
<h3> 1. Set the value in the blockchain</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.valueSet}
|
||||
onChange={this.handleChange}/>
|
||||
{' '}
|
||||
<Button bsStyle="primary" onClick={this.setValue}>Set Value</Button>
|
||||
<HelpBlock>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3> 2. Get the current value</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock>
|
||||
<Button bsStyle="primary" onClick={this.getValue}>Get Value</Button>
|
||||
<HelpBlock>Click the button to get the current value. The initial value is 100.</HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3> 3. Contract Calls </h3>
|
||||
<p>Javascript calls being made: </p>
|
||||
<div className="logs">
|
||||
{
|
||||
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Blockchain;
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React from 'react';
|
||||
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
|
||||
|
||||
class Whisper extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.sendMessage = this.sendMessage.bind(this);
|
||||
this.listenToChannel = this.listenToChannel.bind(this);
|
||||
|
||||
this.state = {
|
||||
listenTo: '',
|
||||
channel: '',
|
||||
message: '',
|
||||
subscribedChannels: [],
|
||||
messageList: [],
|
||||
logs: []
|
||||
}
|
||||
}
|
||||
|
||||
handleChange(e, name){
|
||||
this.state[name] = e.target.value;
|
||||
this.setState(this.state);
|
||||
}
|
||||
|
||||
sendMessage(e){
|
||||
e.preventDefault();
|
||||
EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
|
||||
this._addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
|
||||
}
|
||||
|
||||
listenToChannel(e){
|
||||
e.preventDefault();
|
||||
|
||||
let listenTo = this.state.listenTo;
|
||||
|
||||
this.state.subscribedChannels.push(`subscribed to ${listenTo} now try sending a message`);
|
||||
|
||||
EmbarkJS.Messages.listenTo({topic: [listenTo]})
|
||||
.then(message => this.state.messageList.push(`channel: ${listenTo} message: ${message}`))
|
||||
|
||||
this._addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.channel + "']}).then(function(message) {})");
|
||||
}
|
||||
|
||||
_addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
||||
render(){
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
!this.state.enabled ?
|
||||
<React.Fragment>
|
||||
<Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
|
||||
<Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
|
||||
</React.Fragment> : ''
|
||||
}
|
||||
<h3>Listen To channel</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.listenTo}
|
||||
placeholder="channel"
|
||||
onChange={e => this.handleChange(e, 'listenTo')} />
|
||||
{' '}
|
||||
<Button bsStyle="primary" onClick={this.listenToChannel}>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>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Send Message</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.channel}
|
||||
placeholder="channel"
|
||||
onChange={e => this.handleChange(e, 'channel')} />
|
||||
{' '}
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.message}
|
||||
placeholder="message"
|
||||
onChange={e => this.handleChange(e, 'message')} />
|
||||
{' '}
|
||||
<Button bsStyle="primary" onClick={this.sendMessage}>Send Message</Button>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div className="logs">
|
||||
<p>EmbarkJS.Messages.setProvider('whisper')</p>
|
||||
{
|
||||
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Whisper;
|
||||
|
|
@ -1,161 +1,54 @@
|
|||
/*globals $, SimpleStorage, document*/
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Tabs, Tab } from 'react-bootstrap';
|
||||
|
||||
import $ from 'jquery';
|
||||
import 'bootstrap';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
||||
import Blockchain from './components/blockchain';
|
||||
import Whisper from './components/whisper';
|
||||
|
||||
import './dapp.css';
|
||||
|
||||
var addToLog = function(id, txt) {
|
||||
$(id + " .logs").append("<br>" + txt);
|
||||
};
|
||||
class App extends React.Component {
|
||||
|
||||
// ===========================
|
||||
// Blockchain example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
$("#blockchain button.set").click(function() {
|
||||
var value = parseInt($("#blockchain input.text").val(), 10);
|
||||
|
||||
// If web3.js 1.0 is being used
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
|
||||
addToLog("#blockchain", "SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
|
||||
} else {
|
||||
SimpleStorage.set(value);
|
||||
addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
|
||||
this.state = {
|
||||
whisperEnabled: false
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$("#blockchain button.get").click(function() {
|
||||
// If web3.js 1.0 is being used
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
SimpleStorage.methods.get().call(function(err, value) {
|
||||
$("#blockchain .value").html(value);
|
||||
});
|
||||
addToLog("#blockchain", "SimpleStorage.methods.get(console.log)");
|
||||
} else {
|
||||
SimpleStorage.get().then(function(value) {
|
||||
$("#blockchain .value").html(value.toNumber());
|
||||
});
|
||||
addToLog("#blockchain", "SimpleStorage.get()");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// ===========================
|
||||
// Storage (IPFS) example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
// automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
|
||||
//EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
|
||||
|
||||
$("#storage .error").hide();
|
||||
//EmbarkJS.Storage.ipfsConnection.version()
|
||||
// .then(function(){
|
||||
$("#status-storage").addClass('status-online');
|
||||
$("#storage-controls").show();
|
||||
// })
|
||||
// .catch(function(err) {
|
||||
// if(err){
|
||||
// console.log("IPFS Connection Error => " + err.message);
|
||||
// $("#storage .error").show();
|
||||
// $("#status-storage").addClass('status-offline');
|
||||
// $("#storage-controls").hide();
|
||||
// }
|
||||
// });
|
||||
|
||||
$("#storage button.setIpfsText").click(function() {
|
||||
var value = $("#storage input.ipfsText").val();
|
||||
EmbarkJS.Storage.saveText(value).then(function(hash) {
|
||||
$("span.textHash").html(hash);
|
||||
$("input.textHash").val(hash);
|
||||
addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.loadIpfsHash").click(function() {
|
||||
var value = $("#storage input.textHash").val();
|
||||
EmbarkJS.Storage.get(value).then(function(content) {
|
||||
$("span.ipfsText").html(content);
|
||||
addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.uploadFile").click(function() {
|
||||
var input = $("#storage input[type=file]");
|
||||
EmbarkJS.Storage.uploadFile(input).then(function(hash) {
|
||||
$("span.fileIpfsHash").html(hash);
|
||||
$("input.fileIpfsHash").val(hash);
|
||||
addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
if(err){
|
||||
console.log("IPFS uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#storage button.loadIpfsFile").click(function() {
|
||||
var hash = $("#storage input.fileIpfsHash").val();
|
||||
var url = EmbarkJS.Storage.getUrl(hash);
|
||||
var link = '<a href="' + url + '" target="_blank">' + url + '</a>';
|
||||
$("span.ipfsFileUrl").html(link);
|
||||
$(".ipfsImage").attr('src', url);
|
||||
addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// ===========================
|
||||
// Communication (Whisper) example
|
||||
// ===========================
|
||||
$(document).ready(function() {
|
||||
|
||||
$("#communication .error").hide();
|
||||
$("#communication .errorVersion").hide();
|
||||
if (EmbarkJS.Messages.providerName === 'whisper') {
|
||||
EmbarkJS.Messages.getWhisperVersion(function(err, version) {
|
||||
if (err) {
|
||||
$("#communication .error").show();
|
||||
$("#communication-controls").hide();
|
||||
$("#status-communication").addClass('status-offline');
|
||||
} else {
|
||||
EmbarkJS.Messages.setProvider('whisper');
|
||||
$("#status-communication").addClass('status-online');
|
||||
}
|
||||
componentDidMount(){
|
||||
// TODO Verify if whisper & swarm are available
|
||||
this.setState({
|
||||
whisperEnabled: false
|
||||
});
|
||||
}
|
||||
|
||||
$("#communication button.listenToChannel").click(function() {
|
||||
var channel = $("#communication .listen input.channel").val();
|
||||
$("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message");
|
||||
EmbarkJS.Messages.listenTo({topic: [channel]}).then(function(message) {
|
||||
$("#communication #messagesList").append("<br> channel: " + channel + " message: " + message);
|
||||
});
|
||||
addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})");
|
||||
});
|
||||
|
||||
$("#communication button.sendMessage").click(function() {
|
||||
var channel = $("#communication .send input.channel").val();
|
||||
var message = $("#communication .send input.message").val();
|
||||
EmbarkJS.Messages.sendMessage({topic: channel, data: message});
|
||||
addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})");
|
||||
});
|
||||
_renderStatus(title, available){
|
||||
let className = available ? 'pull-right status-online' : 'pull-right status-offline';
|
||||
return <React.Fragment>
|
||||
{title}
|
||||
<span className={className}></span>
|
||||
</React.Fragment>;
|
||||
}
|
||||
|
||||
});
|
||||
render(){
|
||||
return (<div><h3>Embark - Usage Example</h3>
|
||||
<Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
|
||||
<Tab eventKey={1} title="Blockchain">
|
||||
<Blockchain />
|
||||
</Tab>
|
||||
<Tab eventKey={2} title="Decentralized Storage (IPFS)">
|
||||
Tab 2 content
|
||||
</Tab>
|
||||
<Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}>
|
||||
<Whisper enabled={this.state.whisperEnabled} />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App></App>, document.getElementById('app'));
|
||||
|
|
|
|||
|
|
@ -1,107 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Embark - SimpleStorage Demo</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
|
||||
<script src="js/dapp.js"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
</head>
|
||||
<body class="container">
|
||||
<h3>Embark - Usage Example</h3>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist" id="myTabs">
|
||||
<li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
|
||||
<li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
|
||||
<li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="blockchain">
|
||||
<h3> 1. Set the value in the blockchain</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="text form-control" value="10">
|
||||
<button class="set btn btn-primary">Set Value</button>
|
||||
<p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
|
||||
<div id="app">
|
||||
</div>
|
||||
|
||||
<h3> 2. Get the current value</h3>
|
||||
<div class="form-group">
|
||||
<div>
|
||||
current value is <span class="value"></span>
|
||||
</div>
|
||||
<button class="get btn btn-primary">Get Value</button>
|
||||
<p>Click the button to get the current value. The initial value is 100.</p>
|
||||
</div>
|
||||
|
||||
<h3> 3. Contract Calls </h3>
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="storage">
|
||||
<div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
|
||||
<div id="storage-controls">
|
||||
|
||||
<h3>Save text to IPFS</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="ipfsText text form-control" value="hello world!">
|
||||
<button class="setIpfsText btn btn-primary">Save</button>
|
||||
<p>generated Hash: <span class="textHash"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>Load text from IPFS given an hash</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="textHash text form-control" size="60">
|
||||
<button class="loadIpfsHash set btn btn-primary">Load</button>
|
||||
<p>result: <span class="ipfsText"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>upload file to ipfs</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="file" class="form-control">
|
||||
<button class="uploadFile set btn btn-primary">upload</button>
|
||||
<p>generated hash: <span class="fileIpfsHash"></span></p>
|
||||
</div>
|
||||
|
||||
<h3>Get file or image from ipfs</h3>
|
||||
<div class="form-group form-inline">
|
||||
<input type="text" class="fileIpfsHash form-control" size="60">
|
||||
<button class="loadIpfsFile set btn btn-primary">Load</button>
|
||||
<p>file available at: <span class="ipfsFileUrl"></span></p>
|
||||
<p><img class="ipfsImage" src=""></p>
|
||||
</div>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
<br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="communication">
|
||||
<div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
|
||||
<div class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of Whisper</div>
|
||||
<div id="communication-controls">
|
||||
<h3>Listen To channel</h3>
|
||||
<div class="form-group form-inline listen">
|
||||
<input type="text" class="channel text form-control" placeholder="channel">
|
||||
<button class="listenToChannel set btn btn-primary">Start Listening</button>
|
||||
<div id="subscribeList"></div>
|
||||
<p>messages received:<p>
|
||||
<div id="messagesList"></div>
|
||||
</div>
|
||||
|
||||
<h3>Send Message</h3>
|
||||
<div class="form-group form-inline send">
|
||||
<input type="text" class="channel text form-control" placeholder="channel">
|
||||
<input type="text" class="message text form-control" placeholder="message">
|
||||
<button class="sendMessage set btn btn-primary">Send Message</button>
|
||||
</div>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div class="logs">
|
||||
<br> EmbarkJS.Messages.setProvider('whisper')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/dapp.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"homepage": "",
|
||||
"devDependencies": {
|
||||
"bootstrap": "^3.3.6",
|
||||
"jquery": "^1.11.3"
|
||||
"dependencies": {
|
||||
"react": "^16.3.2",
|
||||
"react-bootstrap": "^0.32.1",
|
||||
"react-dom": "^16.3.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue