2018-09-28 10:07:58 +02:00
<!doctype html>
< html >
< head >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/codemirror@5.40.2/lib/codemirror.css" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" >
< link rel = "stylesheet" href = "https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" >
< script defer src = "https://code.getmdl.io/1.3.0/material.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/codemirror@5.40.2/lib/codemirror.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/codemirror@5.40.2/mode/clojure/clojure.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/parinfer@3.12.0/parinfer.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/parinfer-codemirror@1.4.2/parinfer-codemirror.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js" > < / script >
< script src = "https://cdn.rawgit.com/neocotic/qrious/master/dist/qrious.js" > < / script >
< / head >
< body >
< script >
const ipfs = new window.Ipfs();
2018-10-23 08:51:53 +02:00
async function load(hash) {
const buffer = await loadIPFS(ipfs, hash);
2018-09-28 10:07:58 +02:00
return buffer.toString();
}
ipfs.once("ready", async () => {
2018-10-23 08:51:53 +02:00
let params = (new URL(document.location)).searchParams;
2018-10-23 19:24:34 +02:00
let hash = params.get("hash") || "QmYoa8CBcYmzm6Kd1NbPNLYQtbwMpwR7YBiywaAyST5gtH";
const content = await load(hash);
2018-10-04 13:00:17 +02:00
codeMirror.setValue(content);
2018-10-23 19:24:34 +02:00
history.replaceState({hash: hash}, null, document.location.href.split('?')[0] + "?hash=" + hash);
2018-10-22 12:32:21 -04:00
});
2018-09-28 10:07:58 +02:00
function extensionLink(hash) {
return "https://get.status.im/extension/ipfs@" + hash;
}
async function loadIPFS(ipfs, hash) {
return ipfs.files.cat(hash);
}
async function publish() {
2018-10-04 13:00:17 +02:00
const content = codeMirror.getValue();
2018-09-28 10:07:58 +02:00
const filesAdded = await uploadIPFS(ipfs, content);
2018-10-23 19:24:34 +02:00
const hash = filesAdded[0].hash;
history.pushState({hash: hash}, null, document.location.href.split('?')[0] + "?hash=" + hash);
2018-11-08 14:55:48 +01:00
displayQR(hash);
2018-09-28 10:07:58 +02:00
}
function clearErrors() {
2018-10-04 13:00:17 +02:00
const elErrors = document.getElementById("errors");
elErrors.innerHTML = '';
elErrors.className = "";
2018-09-28 10:07:58 +02:00
}
function displayErrors(errors) {
2018-10-04 13:00:17 +02:00
const elErrors = document.getElementById("errors");
2018-09-28 10:07:58 +02:00
if (errors == null) {
2018-10-04 13:00:17 +02:00
elErrors.innerHTML = '< div > No errors< / div > ';
elErrors.classList.add("ok");
2018-09-28 10:07:58 +02:00
} else {
2018-10-04 13:00:17 +02:00
elErrors.classList.add("errors");
2018-09-28 10:07:58 +02:00
let names = errors.map( (error, i) => {
return [error.type, error.value]
})
var s = '< div > Errors< / div > < ul > ';
names.forEach(function(element) {
2018-10-04 13:00:17 +02:00
s = s.concat("< li > " + element[0]);
if (element[1] != null) {
2018-10-08 20:06:34 +02:00
s = s.concat(":" + JSON.stringify(element[1]));
2018-10-04 13:00:17 +02:00
}
s = s.concat("< / li > ");
2018-09-28 10:07:58 +02:00
});
s = s.concat("< / ul > ")
2018-10-04 13:00:17 +02:00
elErrors.innerHTML = s;
2018-09-28 10:07:58 +02:00
}
}
function uploadIPFS(ipfs, s) {
return ipfs.files.add({path: 'extension.edn',
content: ipfs.types.Buffer.from(s, 'utf8')})
}
2018-10-08 20:06:34 +02:00
function clearQR() {
const qel = document.getElementById("qr-wrapper");
qel.innerHTML = '';
}
2018-11-08 14:55:48 +01:00
function displayQR(hash) {
2018-10-04 13:00:17 +02:00
const qel = document.getElementById("qr-wrapper");
2018-11-08 14:55:48 +01:00
const s = extensionLink(hash);
qel.innerHTML = '< canvas id = "qr" > < / canvas > < a href = "' + s + '" > Universal link< / a > < a href = "https://ipfs.infura.io/ipfs/' + hash + '/" > IPFS link< / a > ';
2018-09-28 10:07:58 +02:00
new QRious({
2018-10-04 13:00:17 +02:00
element: document.getElementById('qr'),
2018-09-28 10:07:58 +02:00
value: s,
size: 250
});
}
< / script >
< div id = "wrapper" >
< main >
< div id = "content" > < / div >
< div id = "errors" > < / div >
< / main >
2018-10-22 12:32:21 -04:00
< aside id = "side-column" >
< div id = "panel" >
< p > A playground to experiment with extensions and easily publish them on IPFS. Go ahead, modify the default extension on the left side!< / p >
2018-09-28 10:07:58 +02:00
< p > Find more details about building your own extension in this < a href = "https://docs.status.im/docs/extensions_tutorial_chat_command.html" > tutorial< / a > < / p >
< button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" onclick = "publish()" > Publish< / button >
2018-10-04 13:00:17 +02:00
< div id = "qr-wrapper" > < / div >
2018-10-22 12:32:21 -04:00
< / div >
< div id = "docs" >
< h6 > Components< / h6 >
< ul >
< li > < code > view< / code > < / li >
< li > < code > text< / code > < / li >
< li >
< code > touchable-opacity< / code >
< pre class = "inline-args" > {:on-press Event}< / pre >
< / li >
< li >
< code > image< / code >
< pre class = "inline-args" > {:uri String}< / pre >
< / li >
< li >
< code > input< / code >
< pre > {:on-change Event
:placeholder String}< / pre > < / li >
< li >
< code > button< / code >
< pre class = "inline-args" > {:on-click Event}< / pre > < / li >
< li >
< code > link< / code >
< pre class = "inline-args" > {:uri String}< / pre >
< / li >
< li >
< code > checkbox< / code >
< pre class = "inline-args" > {:uri String}< / pre >
< / li >
< li >
< code > checkbox< / code >
< pre class = "inline-args" > {:on-change Event :checked Bool}< / pre >
< / li >
< li >
< code > nft-token-viewer< / code >
< pre class = "inline-args" > {:token String}< / pre >
< / li >
< li > < code > transaction-status< / code >
< pre class = "inline-args" > {:outgoing String :tx-hash String}< / pre > < / li >
< li > < code > asset-selector< / code > < / li >
< li > < code > token-selector< / code > < / li >
< / ul >
< h6 > Queries< / h6 >
< ul >
< li >
< code > store/get< / code >
< pre class = "inline-args" > {:key String}< / pre >
< / li >
< li >
< code > wallet/collectibles< / code >
< pre class = "inline-args" > {:token String :symbol String}< / pre >
< / li >
< / ul >
< h6 > Events< / h6 >
< ul >
< li >
< code > alert< / code >
< pre class = "inline-args" > {:value String}< / pre >
< / li >
< li >
< code > log< / code >
< pre class = "inline-args" > {:value String}< / pre >
< / li >
< li >
< code > store/put< / code >
< pre class = "inline-args" > {:key String :value String}< / pre >
< / li >
< li >
< code > store/append< / code >
< pre class = "inline-args" > {:key String :value String}< / pre >
< / li >
< li >
< code > store/clear< / code >
< pre class = "inline-args" > {:key String}< / pre >
< / li >
< li >
< code > http/get< / code >
< pre > {:url String
:timeout? String
:on-success Event
:on-failure? Event}< / pre >
< / li >
< li >
< code > http/post< / code >
< pre > {:url String
:body String
:timeout? String
:on-success Event
:on-failure? Event}< / pre >
< / li >
< li >
< code > ipfs/cat< / code >
< pre > {:hash String
:on-success Event
:on-failure? Event}< / pre >
< / li >
< li >
< code > ethereum/send-transaction< / code >
< pre > {:to String
:gas? String
:gas-price? String
:value? String
:method? String
:params? Vector
:nonce? String
:on-result? Event}< / pre >
< / li >
< li >
< code > ethereum/call< / code >
< pre > {:to String
:method String
:params? Vector
:on-result? Event}< / pre >
< / li >
< / ul >
< / div >
2018-09-28 10:07:58 +02:00
< / aside >
< / div >
< script >
2018-10-04 13:00:17 +02:00
const codeMirror = CodeMirror(document.getElementById("content"));
2018-10-08 20:06:34 +02:00
codeMirror.setValue("Loading content ...");
2018-10-04 13:00:17 +02:00
codeMirror.on("change", function(c, change) {
2018-09-28 12:44:14 +02:00
clearErrors();
2018-10-08 20:06:34 +02:00
clearQR();
2018-10-04 13:00:17 +02:00
const read = pluto.reader.read(codeMirror.getValue());
2018-09-28 10:07:58 +02:00
const readJS = pluto.js.from_clj(read);
displayErrors(readJS.errors);
if (readJS.errors == null) {
2018-10-04 13:00:17 +02:00
const parsed = pluto.js.parse(read);
const parsedJS = pluto.js.from_clj(parsed);
displayErrors(parsedJS.errors);
2018-09-28 10:07:58 +02:00
}
});
2018-10-04 13:00:17 +02:00
parinferCodeMirror.init(codeMirror);
2018-09-28 10:07:58 +02:00
< / script >
< / body >
< / html >
