Merge pull request #382 from embark-framework/react-demo
Updating embark demo to use react instead of jquery
This commit is contained in:
Iuri Matias
GitHub
commit
bbec433f39
|
|
@ -0,0 +1,91 @@
|
|||
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.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={(e) => this.handleChange(e)} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.setValue(e)}>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={(e) => this.getValue(e)}>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,172 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React from 'react';
|
||||
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
|
||||
|
||||
class Storage extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
textToSave: 'hello world!',
|
||||
generatedHash: '',
|
||||
loadText: '',
|
||||
storedText: '',
|
||||
fileToUpload: null,
|
||||
fileHash: '',
|
||||
imageToDownload: '',
|
||||
url: '',
|
||||
logs: [],
|
||||
storageError: ''
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(e, name){
|
||||
this.state[name] = e.target.value;
|
||||
this.setState(this.state);
|
||||
}
|
||||
|
||||
handleFileUpload(e){
|
||||
this.setState({ fileToUpload: [e.target] });
|
||||
}
|
||||
|
||||
addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
||||
setText(e){
|
||||
e.preventDefault();
|
||||
|
||||
EmbarkJS.Storage.saveText(this.state.textToSave)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
generatedHash: hash,
|
||||
loadText: hash,
|
||||
storageError: ''
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadHash(e){
|
||||
e.preventDefault();
|
||||
|
||||
EmbarkJS.Storage.get(this.state.loadText)
|
||||
.then((content) => {
|
||||
this.setState({storedText: content, storageError: ''});
|
||||
this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message})
|
||||
console.log("Storage get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
uploadFile(e){
|
||||
e.preventDefault();
|
||||
|
||||
EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
fileHash: hash,
|
||||
imageToDownload: hash,
|
||||
storageError: ''
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadFile(e){
|
||||
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
|
||||
this.setState({url: _url})
|
||||
this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
|
||||
}
|
||||
|
||||
render(){
|
||||
return <React.Fragment>
|
||||
{
|
||||
!this.props.enabled ?
|
||||
<React.Fragment>
|
||||
<Alert bsStyle="warning">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.</Alert>
|
||||
</React.Fragment> : ''
|
||||
}
|
||||
{
|
||||
this.state.storageError !== '' ?
|
||||
<Alert bsStyle="danger">{this.state.storageError}</Alert>
|
||||
: ''
|
||||
}
|
||||
<h3>Save text to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.textToSave}
|
||||
onChange={e => this.handleChange(e, 'textToSave')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
|
||||
<HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Load text from storage given an hash</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.loadText}
|
||||
onChange={e => this.handleChange(e, 'loadText')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
|
||||
<HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Upload file to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="file"
|
||||
onChange={(e) => this.handleFileUpload(e)} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
|
||||
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Get file or image from storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.imageToDownload}
|
||||
onChange={e => this.handleChange(e, 'imageToDownload')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
|
||||
<HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock>
|
||||
<HelpBlock><img src={this.state.url} /></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div className="logs">
|
||||
<p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
|
||||
{
|
||||
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
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.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();
|
||||
|
||||
this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
|
||||
|
||||
EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
|
||||
.then(message => this.state.messageList.push(`channel: ${this.state.listenTo} message: ${message}`))
|
||||
|
||||
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(){
|
||||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
!this.props.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={(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>
|
||||
</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={(e) => this.sendMessage(e)}>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;
|
||||
|
|
@ -47,3 +47,7 @@ div {
|
|||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -1,161 +1,75 @@
|
|||
/*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 Storage from './components/storage';
|
||||
|
||||
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,
|
||||
storageEnabled: 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');
|
||||
componentDidMount(){
|
||||
__embarkContext.execWhenReady(() => {
|
||||
if (EmbarkJS.isNewWeb3()) {
|
||||
EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, version) => {
|
||||
if(!err)
|
||||
this.setState({whisperEnabled: true})
|
||||
else
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
EmbarkJS.Messages.setProvider('whisper');
|
||||
$("#status-communication").addClass('status-online');
|
||||
if (EmbarkJS.Messages.providerName === 'whisper') {
|
||||
EmbarkJS.Messages.getWhisperVersion((err, version) => {
|
||||
if(!err)
|
||||
this.setState({whisperEnabled: true})
|
||||
else
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
storageEnabled: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$("#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={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}>
|
||||
<Storage enabled={this.state.storageEnabled} />
|
||||
</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>
|
||||
|
||||
<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 id="app">
|
||||
</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