Skip to content

Commit bbec433

Browse files
iurimatiasiurimatias
authored
Merge pull request #382 from embark-framework/react-demo
Updating embark demo to use react instead of jquery
2 parents 846980a + 57428a6 commit bbec433

File tree

7 files changed

+438
-246
lines changed

7 files changed

+438
-246
lines changed

‎templates/demo/app/components/blockchain.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import EmbarkJS from 'Embark/EmbarkJS';
2+
import SimpleStorage from 'Embark/contracts/SimpleStorage';
3+
import React from 'react';
4+
import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
5+
6+
class Blockchain extends React.Component {
7+
8+
constructor(props) {
9+
super(props);
10+
11+
this.state = {
12+
valueSet: 10,
13+
valueGet: "",
14+
logs: []
15+
}
16+
}
17+
18+
handleChange(e){
19+
this.setState({valueSet: e.target.value});
20+
}
21+
22+
setValue(e){
23+
e.preventDefault();
24+
25+
var value = parseInt(this.state.valueSet, 10);
26+
27+
// If web3.js 1.0 is being used
28+
if (EmbarkJS.isNewWeb3()) {
29+
SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
30+
this._addToLog("SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
31+
} else {
32+
SimpleStorage.set(value);
33+
this._addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
34+
}
35+
}
36+
37+
getValue(e){
38+
e.preventDefault();
39+
40+
if (EmbarkJS.isNewWeb3()) {
41+
SimpleStorage.methods.get().call()
42+
.then(_value => this.setState({valueGet: _value}))
43+
this._addToLog("SimpleStorage.methods.get(console.log)");
44+
} else {
45+
SimpleStorage.get()
46+
.then(_value => this.setState({valueGet: _value}));
47+
this._addToLog("SimpleStorage.get()");
48+
}
49+
}
50+
51+
_addToLog(txt){
52+
this.state.logs.push(txt);
53+
this.setState({logs: this.state.logs});
54+
}
55+
56+
render(){
57+
return (<React.Fragment>
58+
<h3> 1. Set the value in the blockchain</h3>
59+
<Form inline>
60+
<FormGroup>
61+
<FormControl
62+
type="text"
63+
defaultValue={this.state.valueSet}
64+
onChange={(e) => this.handleChange(e)} />
65+
<Button bsStyle="primary" onClick={(e) => this.setValue(e)}>Set Value</Button>
66+
<HelpBlock>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</HelpBlock>
67+
</FormGroup>
68+
</Form>
69+
70+
<h3> 2. Get the current value</h3>
71+
<Form inline>
72+
<FormGroup>
73+
<HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock>
74+
<Button bsStyle="primary" onClick={(e) => this.getValue(e)}>Get Value</Button>
75+
<HelpBlock>Click the button to get the current value. The initial value is 100.</HelpBlock>
76+
</FormGroup>
77+
</Form>
78+
79+
<h3> 3. Contract Calls </h3>
80+
<p>Javascript calls being made: </p>
81+
<div className="logs">
82+
{
83+
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
84+
}
85+
</div>
86+
</React.Fragment>
87+
);
88+
}
89+
}
90+
91+
export default Blockchain;

‎templates/demo/app/components/storage.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import EmbarkJS from 'Embark/EmbarkJS';
2+
import React from 'react';
3+
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
4+
5+
class Storage extends React.Component {
6+
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
11+
textToSave: 'hello world!',
12+
generatedHash: '',
13+
loadText: '',
14+
storedText: '',
15+
fileToUpload: null,
16+
fileHash: '',
17+
imageToDownload: '',
18+
url: '',
19+
logs: [],
20+
storageError: ''
21+
};
22+
}
23+
24+
handleChange(e, name){
25+
this.state[name] = e.target.value;
26+
this.setState(this.state);
27+
}
28+
29+
handleFileUpload(e){
30+
this.setState({ fileToUpload: [e.target] });
31+
}
32+
33+
addToLog(txt){
34+
this.state.logs.push(txt);
35+
this.setState({logs: this.state.logs});
36+
}
37+
38+
setText(e){
39+
e.preventDefault();
40+
41+
EmbarkJS.Storage.saveText(this.state.textToSave)
42+
.then((hash) => {
43+
this.setState({
44+
generatedHash: hash,
45+
loadText: hash,
46+
storageError: ''
47+
});
48+
this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
49+
})
50+
.catch((err) => {
51+
if(err){
52+
this.setState({storageError: err.message});
53+
console.log("Storage saveText Error => " + err.message);
54+
}
55+
});
56+
}
57+
58+
loadHash(e){
59+
e.preventDefault();
60+
61+
EmbarkJS.Storage.get(this.state.loadText)
62+
.then((content) => {
63+
this.setState({storedText: content, storageError: ''});
64+
this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
65+
})
66+
.catch((err) => {
67+
if(err){
68+
this.setState({storageError: err.message})
69+
console.log("Storage get Error => " + err.message);
70+
}
71+
});
72+
}
73+
74+
uploadFile(e){
75+
e.preventDefault();
76+
77+
EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
78+
.then((hash) => {
79+
this.setState({
80+
fileHash: hash,
81+
imageToDownload: hash,
82+
storageError: ''
83+
});
84+
this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
85+
})
86+
.catch((err) => {
87+
if(err){
88+
this.setState({storageError: err.message});
89+
console.log("Storage uploadFile Error => " + err.message);
90+
}
91+
});
92+
}
93+
94+
loadFile(e){
95+
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
96+
this.setState({url: _url})
97+
this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
98+
}
99+
100+
render(){
101+
return <React.Fragment>
102+
{
103+
!this.props.enabled ?
104+
<React.Fragment>
105+
<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>
106+
</React.Fragment> : ''
107+
}
108+
{
109+
this.state.storageError !== '' ?
110+
<Alert bsStyle="danger">{this.state.storageError}</Alert>
111+
: ''
112+
}
113+
<h3>Save text to storage</h3>
114+
<Form inline>
115+
<FormGroup>
116+
<FormControl
117+
type="text"
118+
defaultValue={this.state.textToSave}
119+
onChange={e => this.handleChange(e, 'textToSave')} />
120+
<Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
121+
<HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
122+
</FormGroup>
123+
</Form>
124+
125+
<h3>Load text from storage given an hash</h3>
126+
<Form inline>
127+
<FormGroup>
128+
<FormControl
129+
type="text"
130+
value={this.state.loadText}
131+
onChange={e => this.handleChange(e, 'loadText')} />
132+
<Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
133+
<HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
134+
</FormGroup>
135+
</Form>
136+
137+
<h3>Upload file to storage</h3>
138+
<Form inline>
139+
<FormGroup>
140+
<FormControl
141+
type="file"
142+
onChange={(e) => this.handleFileUpload(e)} />
143+
<Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
144+
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
145+
</FormGroup>
146+
</Form>
147+
148+
<h3>Get file or image from storage</h3>
149+
<Form inline>
150+
<FormGroup>
151+
<FormControl
152+
type="text"
153+
value={this.state.imageToDownload}
154+
onChange={e => this.handleChange(e, 'imageToDownload')} />
155+
<Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
156+
<HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock>
157+
<HelpBlock><img src={this.state.url} /></HelpBlock>
158+
</FormGroup>
159+
</Form>
160+
161+
<p>Javascript calls being made: </p>
162+
<div className="logs">
163+
<p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
164+
{
165+
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
166+
}
167+
</div>
168+
</React.Fragment>;
169+
}
170+
}
171+
172+
export default Storage;

‎templates/demo/app/components/whisper.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import EmbarkJS from 'Embark/EmbarkJS';
2+
import React from 'react';
3+
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
4+
5+
class Whisper extends React.Component {
6+
7+
constructor(props) {
8+
super(props);
9+
10+
this.state = {
11+
listenTo: '',
12+
channel: '',
13+
message: '',
14+
subscribedChannels: [],
15+
messageList: [],
16+
logs: []
17+
}
18+
}
19+
20+
handleChange(e, name){
21+
this.state[name] = e.target.value;
22+
this.setState(this.state);
23+
}
24+
25+
sendMessage(e){
26+
e.preventDefault();
27+
EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
28+
this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
29+
}
30+
31+
listenToChannel(e){
32+
e.preventDefault();
33+
34+
this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
35+
36+
EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
37+
.then(message => this.state.messageList.push(`channel: ${this.state.listenTo} message: ${message}`))
38+
39+
this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
40+
}
41+
42+
addToLog(txt){
43+
this.state.logs.push(txt);
44+
this.setState({logs: this.state.logs});
45+
}
46+
47+
render(){
48+
return (
49+
<React.Fragment>
50+
{
51+
!this.props.enabled ?
52+
<React.Fragment>
53+
<Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
54+
<Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
55+
</React.Fragment> : ''
56+
}
57+
<h3>Listen To channel</h3>
58+
<Form inline>
59+
<FormGroup>
60+
<FormControl
61+
type="text"
62+
defaultValue={this.state.listenTo}
63+
placeholder="channel"
64+
onChange={e => this.handleChange(e, 'listenTo')} />
65+
<Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
66+
<div id="subscribeList">
67+
{ this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
68+
</div>
69+
<p>messages received:</p>
70+
<div id="messagesList">
71+
{ this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
72+
</div>
73+
</FormGroup>
74+
</Form>
75+
76+
<h3>Send Message</h3>
77+
<Form inline>
78+
<FormGroup>
79+
<FormControl
80+
type="text"
81+
defaultValue={this.state.channel}
82+
placeholder="channel"
83+
onChange={e => this.handleChange(e, 'channel')} />
84+
<FormControl
85+
type="text"
86+
defaultValue={this.state.message}
87+
placeholder="message"
88+
onChange={e => this.handleChange(e, 'message')} />
89+
<Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
90+
</FormGroup>
91+
</Form>
92+
93+
<p>Javascript calls being made: </p>
94+
<div className="logs">
95+
<p>EmbarkJS.Messages.setProvider('whisper')</p>
96+
{
97+
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
98+
}
99+
</div>
100+
</React.Fragment>
101+
);
102+
}
103+
}
104+
105+
export default Whisper;

‎templates/demo/app/dapp.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,7 @@ div {
4747
-webkit-border-radius: 10px;
4848
border-radius: 10px;
4949
}
50+
51+
input.form-control {
52+
margin-right: 5px;
53+
}

0 commit comments

Comments
 (0)