From 28b8eff45a3d9eeccd0b922f4fdedc2e39a94647 Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Mon, 23 Apr 2018 16:42:52 -0400 Subject: [PATCH] Migrating demo to react Blockchain tab complete Whisper tab complete (requires status indicator yet) --- templates/demo/app/components/blockchain.js | 96 ++++++++++ templates/demo/app/components/whisper.js | 113 ++++++++++++ templates/demo/app/dapp.js | 187 +++++--------------- templates/demo/app/index.html | 103 +---------- templates/demo/package.json | 7 +- 5 files changed, 257 insertions(+), 249 deletions(-) create mode 100644 templates/demo/app/components/blockchain.js create mode 100644 templates/demo/app/components/whisper.js diff --git a/templates/demo/app/components/blockchain.js b/templates/demo/app/components/blockchain.js new file mode 100644 index 00000000..b4b91b12 --- /dev/null +++ b/templates/demo/app/components/blockchain.js @@ -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 ( +

1. Set the value in the blockchain

+
+ + + {' '} + + Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain. + +
+ +

2. Get the current value

+
+ + current value is {this.state.valueGet} + + Click the button to get the current value. The initial value is 100. + +
+ +

3. Contract Calls

+

Javascript calls being made:

+
+ { + this.state.logs.map((item, i) =>

{item}

) + } +
+ + ); + } + } + + export default Blockchain; \ No newline at end of file diff --git a/templates/demo/app/components/whisper.js b/templates/demo/app/components/whisper.js new file mode 100644 index 00000000..bc1795cb --- /dev/null +++ b/templates/demo/app/components/whisper.js @@ -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 ( + + { + !this.state.enabled ? + + The node you are using does not support Whisper + The node uses an unsupported version of Whisper + : '' + } +

Listen To channel

+
+ + this.handleChange(e, 'listenTo')} /> + {' '} + +
+ { this.state.subscribedChannels.map((item, i) =>

{item}

) } +
+

messages received:

+
+ { this.state.messageList.map((item, i) =>

{item}

) } +
+ +
+ +

Send Message

+
+ + this.handleChange(e, 'channel')} /> + {' '} + this.handleChange(e, 'message')} /> + {' '} + + +
+ +

Javascript calls being made:

+
+

EmbarkJS.Messages.setProvider('whisper')

+ { + this.state.logs.map((item, i) =>

{item}

) + } +
+ + ); + } +} + +export default Whisper; diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js index a815d5fa..d2e70b09 100644 --- a/templates/demo/app/dapp.js +++ b/templates/demo/app/dapp.js @@ -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("
" + 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 = '' + url + ''; - $("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("
subscribed to " + channel + " now try sending a message"); - EmbarkJS.Messages.listenTo({topic: [channel]}).then(function(message) { - $("#communication #messagesList").append("
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 + {title} + + ; + } -}); + render(){ + return (

Embark - Usage Example

+ + + + + + Tab 2 content + + + + + +
); + } +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/templates/demo/app/index.html b/templates/demo/app/index.html index 0b17e193..55521af6 100644 --- a/templates/demo/app/index.html +++ b/templates/demo/app/index.html @@ -1,107 +1,12 @@ Embark - SimpleStorage Demo - - + + -

Embark - Usage Example

- - - -
-
-

1. Set the value in the blockchain

-
- - -

Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.

-
- -

2. Get the current value

-
-
- current value is -
- -

Click the button to get the current value. The initial value is 100.

-
- -

3. Contract Calls

-

Javascript calls being made:

-
-
+
-
- -
- -

Save text to IPFS

-
- - -

generated Hash:

-
- -

Load text from IPFS given an hash

-
- - -

result:

-
- -

upload file to ipfs

-
- - -

generated hash:

-
- -

Get file or image from ipfs

-
- - -

file available at:

-

-
- -

Javascript calls being made:

-
-
EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'}) -
-
-
-
- - -
-

Listen To channel

-
- - -
-

messages received:

-

-
- -

Send Message

-
- - - -
- -

Javascript calls being made:

-
-
EmbarkJS.Messages.setProvider('whisper') -
-
-
-
- + diff --git a/templates/demo/package.json b/templates/demo/package.json index c3224ae9..c60b7143 100644 --- a/templates/demo/package.json +++ b/templates/demo/package.json @@ -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" } }