mirror of
https://github.com/status-im/embark-area-51.git
synced 2025-01-23 05:38:52 +00:00
update embark demo
This commit is contained in:
Iuri Matias
parent
352eadab98
commit
2928694b76
@ -3,3 +3,12 @@ div {
|
|||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logs {
|
||||||
|
background-color: black;
|
||||||
|
font-size: 14px;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,27 +5,99 @@
|
|||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="container">
|
<body class="container">
|
||||||
<h3>Embark - SimpleStorage Demo</h3>
|
<h3>Embark - Usage Example</h3>
|
||||||
|
|
||||||
<h3> 1. Set the value in the blockchain</h3>
|
<ul class="nav nav-tabs" role="tablist" id="myTabs">
|
||||||
<div class="form-group form-inline">
|
<li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
|
||||||
<input type="text" class="text form-control" value="10">
|
<li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)</a></li>
|
||||||
<button class="set btn btn-primary">Set Value</button>
|
<li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (whisper/orbit)</a></li>
|
||||||
<p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
|
</ul>
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3> 2. Get the current value</h3>
|
<div class="tab-content">
|
||||||
<div class="form-group">
|
<div role="tabpanel" class="tab-pane active" id="blockchain">
|
||||||
<div>
|
<h3> 1. Set the value in the blockchain</h3>
|
||||||
current value is <span class="value"></span>
|
<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>
|
</div>
|
||||||
<button class="get btn btn-primary">Get Value</button>
|
<div role="tabpanel" class="tab-pane" id="storage">
|
||||||
<p>Click the button to get the current value. The initial value is 100.</p>
|
note: You need to have an IPFS node running
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3> 3. Contract Calls </h3>
|
<h3>Save text to IPFS</h3>
|
||||||
<div class="logs">
|
<div class="form-group form-inline">
|
||||||
<p>Javascript call being made: </p>
|
<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 role="tabpanel" class="tab-pane" id="communication">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
7
demo/app/js/_vendor/bootstrap.min.js
vendored
Normal file
7
demo/app/js/_vendor/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,22 +1,93 @@
|
|||||||
/*globals $, SimpleStorage, document*/
|
/*globals $, SimpleStorage, document*/
|
||||||
|
|
||||||
var addToLog = function(txt) {
|
var addToLog = function(id, txt) {
|
||||||
$(".logs").append("<br>" + txt);
|
$(id + " .logs").append("<br>" + txt);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Blockchain example
|
||||||
|
// ===========================
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$("button.set").click(function() {
|
$("#blockchain button.set").click(function() {
|
||||||
var value = parseInt($("input.text").val(), 10);
|
var value = parseInt($("#blockchain input.text").val(), 10);
|
||||||
SimpleStorage.set(value);
|
SimpleStorage.set(value);
|
||||||
addToLog("SimpleStorage.set(" + value + ")");
|
addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
|
||||||
});
|
});
|
||||||
|
|
||||||
$("button.get").click(function() {
|
$("#blockchain button.get").click(function() {
|
||||||
SimpleStorage.get().then(function(value) {
|
SimpleStorage.get().then(function(value) {
|
||||||
$(".value").html(value.toNumber());
|
$("#blockchain .value").html(value.toNumber());
|
||||||
});
|
});
|
||||||
addToLog("SimpleStorage.get()");
|
addToLog("#blockchain", "SimpleStorage.get()");
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ===========================
|
||||||
|
// Storage (IPFS) example
|
||||||
|
// ===========================
|
||||||
|
$(document).ready(function() {
|
||||||
|
EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
|
||||||
|
|
||||||
|
$("#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) { })");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#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) { })");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#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) { })");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#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() {
|
||||||
|
EmbarkJS.Messages.setProvider('whisper');
|
||||||
|
|
||||||
|
$("#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 + "'})");
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|||||||
115
demo/chains.json
115
demo/chains.json
@ -1,2 +1,115 @@
|
|||||||
{
|
{
|
||||||
}
|
"0xb6cfeab83614da04c03db0fb8a6787a45d0be8d576fcc6f8f457a5a816d22ab3": {
|
||||||
|
"name": "development",
|
||||||
|
"contracts": {
|
||||||
|
"0x199478eefb40947c193b9cf3b3e212e127f57093e2d29d853e807e3d50e993a9": {
|
||||||
|
"address": "0x2d89d807c8e0b1d935e64ae6fc9948927238a61f",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0x2ca4854a4c230a871a4ca09c90cda34be11e16a4e39d0afaa1760937f30c6b4b": {
|
||||||
|
"address": "0x1ca9e20a549c07713fa0a8e5b91d97e4d4f13102",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0x30debf1ddb9bc27d7c57b7d22bb5435963d09006227fdef87957f570e6172878": {
|
||||||
|
"address": "0x15a073bfaf0eefb5f83e448536bc3b1ff0f5fa77",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0x39aa9b01b12157a1f871b2d4d715c805edbbb5f9cbd90c874453a477cd85dd21": {
|
||||||
|
"address": "0x83ed4c38414b8cc850a8b54137cee2d2d3cd4a54",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0x4681c3761489bb87b5d555ce0ec302ffee8d07cba2297308f6a221a4555b1beb": {
|
||||||
|
"address": "0x0b2ae8b880138732618f3f2fad69f4264b7cb3f6",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0x539233272cadc59a96f7e1fa4860d38064470ef78fc643b94907acd78edd997f": {
|
||||||
|
"address": "0x13eccc48d69c071a52d4fee3fd8c285726671314",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0x6772be067fbd9b30fe9edb3429d33f68aa48e3e61acc1cabd213cc7cbf162410": {
|
||||||
|
"address": "0x469e6dd74bb15b6ac698c18649646a25c8f73dcb",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0x6df32279434b15cdfd3ae8adf76f8c0d56f54af015adc028301b724903c1d554": {
|
||||||
|
"address": "0x94f3f531552ea387d1fd866df313644760497194",
|
||||||
|
"name": "Token2"
|
||||||
|
},
|
||||||
|
"0x742ed3ed386803dd0bdd5b9762e7a7e2181b44da0a4f17d94964a2e39a4bd80c": {
|
||||||
|
"address": "0x3f41425fd7ced93ef29666c3055bad9dd8a98e27",
|
||||||
|
"name": "Token2"
|
||||||
|
},
|
||||||
|
"0x78cd532884e55ba84d4ce6b8cd445fca823df5e235b68bf5f2efcb7c3666e5fb": {
|
||||||
|
"address": "0x2456533c6d99a0bfd8b840baf02ce36d0f3042a4",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0x7cbd149aa063d4b1851f96af680813d15bc7eb677aeff38ac27a8e5e3777d96e": {
|
||||||
|
"address": "0xd2c9564f518c82b41d5ac048c53d91811ccba75b",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0x7f89f5036d56b3f1c4bd36c8756e9b84720ea759077dea08c0b03c181c7dfbac": {
|
||||||
|
"address": "0x8c2fb297e690c5bfb72542a2e26db61eeb0a83ba",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0x80b74f77f6aeb9173035e415ac05be12c04e2245fca2fcce5c15b00ed795c60a": {
|
||||||
|
"address": "0xb3be286eed7acdf7a9a4dcf7188933203062d58b",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0x9539a9b9e13dcebd09d5a04a954e04e116cd7eac437ad3a6b63009764480c23b": {
|
||||||
|
"address": "0xbd9342a087f2e051f774e80a7a0f509336d2a929",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0x98e79c36bce198d2b4431a051af9d7b61b0f6a011c8f6ddf980fe5f255792147": {
|
||||||
|
"address": "0x459de4ddbe73e0e56c45705c302d9f18f6b39e07",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0xa3c135812504c0e06e3eca108d1650c619e7a6cdc2f620cd4a72017ddfc1bc42": {
|
||||||
|
"address": "0xd6bbe25822cd29dba8759ab44ea324616823366e",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0xac3112428b4e998bc2f30366462b25eb7921271d7b6b8b7d511a508ed61f0096": {
|
||||||
|
"address": "0x9da460057db8a1105fd7344169969600d09cfcc9",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0xad0ab10070707a8d9b7c32eae670ce9a0f75e0b6532d576bca60d0fd8059735d": {
|
||||||
|
"address": "0xa3af61a4c2df7112b6ddb4ee552d9386e5fbf9b1",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0xb5d47de7c3ad6972e25a3ad31d5da21326117d028d2e604c2ea3484a7bd6a0ae": {
|
||||||
|
"address": "0x71987ad6a12c7ff50b51fdee40019af3a83da6e0",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0xb8d9cbd6084ae35caeacf331c55c5697806985bcc12230f31af0644233ece6e2": {
|
||||||
|
"address": "0x009725e877d77545d011512d41475de8ee60c4a0",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0xcc3e11086496bffa67263048824f937ee02a3dc3603ca7467e9bc2d53ff95caa": {
|
||||||
|
"address": "0x4d116353ad86a8f96fc352a0957fd82468348c61",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0xcf65161d149dc6398d702bd0e08ebba79682ea0275849fc300caae00dd022cc4": {
|
||||||
|
"address": "0xa2595b17c8ad94bfff82d48fc0ff7f2216f0cfad",
|
||||||
|
"name": "Token2"
|
||||||
|
},
|
||||||
|
"0xd2c530b312af692267d2e33b639c2578f5cd18269fbfad8f3a31da31b53482e8": {
|
||||||
|
"address": "0x5c5067d3c7d8eab10f6673c164ffe73b6e928921",
|
||||||
|
"name": "SimpleStorage"
|
||||||
|
},
|
||||||
|
"0xda33def17ace91c7aa84a3f6bb73ba50262c2eb0057bd88524ce98a3763df759": {
|
||||||
|
"address": "0xc20ee0c4a812d3895727077ed85381df9a7b6423",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0xde41c9838a26c5582ea63f58393a74e317a71d2a90b37d6989591576a8fe735a": {
|
||||||
|
"address": "0x6232d8c539fbb9bb8c430c2ea8779d65d33ae517",
|
||||||
|
"name": "Token"
|
||||||
|
},
|
||||||
|
"0xe2be4e01aafe01b6595699c00c5dcffa43ae37f9149c55146f8cbbcf3536dd90": {
|
||||||
|
"address": "0xa3a735f710ae5916fe8fbc8dab3b0b85d3412679",
|
||||||
|
"name": "MyToken"
|
||||||
|
},
|
||||||
|
"0xff7d52dd04c24b035a0e2c6e9c160e5a602932fcb673739ae66d1bca042a37c4": {
|
||||||
|
"address": "0x6c45ef2b2a2a79bbbb569f358a97c66edc0526e0",
|
||||||
|
"name": "Token"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -2,10 +2,15 @@
|
|||||||
"contracts": ["app/contracts/**"],
|
"contracts": ["app/contracts/**"],
|
||||||
"app": {
|
"app": {
|
||||||
"css/app.css": ["app/css/**"],
|
"css/app.css": ["app/css/**"],
|
||||||
"js/app.js": ["embark.js", "app/js/**"],
|
"js/app.js": ["embark.js", "app/js/_vendor/jquery.min.js", "app/js/_vendor/bootstrap.min.js", "app/js/**"],
|
||||||
"index.html": "app/index.html"
|
"index.html": "app/index.html"
|
||||||
},
|
},
|
||||||
"buildDir": "dist/",
|
"buildDir": "dist/",
|
||||||
"config": "config/",
|
"config": "config/",
|
||||||
"plugins": []
|
"plugins": {
|
||||||
|
"embark-pipelinefiles": {},
|
||||||
|
"embark-pipelinefiles2": {},
|
||||||
|
"embark-babel": {},
|
||||||
|
"embark-contracts": {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user