Commit 1ed802f8 authored by Cédric F.'s avatar Cédric F.

Improve support for other coins

parent 9c83b609
......@@ -5,6 +5,16 @@ trappisto: src/*.elm
uglifyjs --mangle --screw-ie8 --output public/assets/js/elm.min.js -- public/assets/js/elm.js
rm public/assets/js/elm.js
trappisto-btc: trappisto
cp public/index.html public/index-btc.html
sed -i 's/DCR/BTC/g' public/index-btc.html
sed -i 's/Decred/Bitcoin/g' public/index-btc.html
trappisto-bch: trappisto
cp public/index.html public/index-bch.html
sed -i 's/DCR/BCH/g' public/index-bch.html
sed -i 's/Decred/Bitcoin Cash/g' public/index-bch.html
test: src/*.elm tests/*.elm
elm-test --yes
......
......@@ -26,7 +26,7 @@ and transactions.
To configure Trappisto for a different coin, you will need to:
- update `const coin = 'DCR'` in _index.html_
- build it with `make trappisto-btc` or `make trappisto-bch` instead of `make`
- update `proxy_pass https://localhost:9109/;` in _nginx.conf_
## What does Trappisto mean?
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitcoin Cash Blockchain Explorer</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bitcoin Cash Blockchain Explorer">
<meta name="application-name" content="Trappisto">
<meta property="og:title" content="Interactive Blockchain Explorer for Bitcoin Cash">
<meta property="og:description" content="Interactive Blockchain Explorer for Bitcoin Cash">
<meta property="og:image" content="assets/images/apple-touch-icon.png">
<link rel="icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/open-iconic/font/css/open-iconic-bootstrap.min.css">
<script src="assets/js/elm.min.js" async defer></script>
<style>
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
url('assets/fonts/inconsolata-v15-latin-regular.woff2') format('woff2');
}
body {
font-family: 'Inconsolata', monospace;
}
hr {
border-color: #FFF;
}
code {
display: block;
font-size: 50%;
word-break: break-all;
}
.amount {
white-space: nowrap;
}
.amount::after {
content: "\0000a0BCH";
}
.bg-black {
background-color: #000;
}
.rotate {
animation: spin 2s linear infinite;
}
@keyframes spin { 100% { transform:rotate(360deg); } }
@media (min-width: 768px) {
body { font-size: 1.25rem; }
}
</style>
</head>
<body class="bg-black text-white">
<script>
window.onerror = function(msg, url, line) {
alert('Oops, a JavaScript error occured, please send a screenshot to the website administrator.\nMessage: ' + msg + '\nURL: ' + url + '\nLine: ' + line);
return false;
};
</script>
<div id="particles-js" style="position:absolute;width:100%;height:100%"></div>
<div class="container">
<div class="row">
<div class="col">
<div id="elm-app">
<div class="text-center"><h1>Loading...</h1></div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('load', () => {
// load Elm app
const elmAppDiv = document.querySelector('#elm-app');
const elmApp = Elm.Trappisto.embed(elmAppDiv, { coin: 'BCH' });
query = (query) => {
console.log("Query: ", query);
elmApp.ports.jsToElm.send(["query", query]);
};
elmApp.ports.elmToJs.subscribe((params) => {
const command = params.shift();
console.log('Received command: ' + command, params);
switch (command) {
case 'focus':
const query = document.getElementById('query');
if (query) {
query.focus();
setTimeout(function () { query.select(); }, 50); // delay sightly to allow focus to "stick" before selecting
}
break;
case 'title':
if (params[0] === "") {
document.title = "Bitcoin Cash Blockchain Explorer";
} else {
document.title = params[0] + " - Bitcoin Cash Blockchain Explorer";
}
break;
case 'particles':
particlesJS.load('particles-js', 'assets/js/particles.json', () => {
alert('Congrats, you found the easter egg! Particles are coming at you at supersonic speed!');
});
break;
default:
console.error('Unhandled command: ' + command);
}
});
// hook {Ctrl,Cmd}+F to our search bar
// XXX: not done in Elm because we cannot call preventDefault() in Elm
window.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && (String.fromCharCode(e.which).toLowerCase() === 'f')) {
e.preventDefault();
document.querySelector('#query').select();
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" async defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitcoin Blockchain Explorer</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bitcoin Blockchain Explorer">
<meta name="application-name" content="Trappisto">
<meta property="og:title" content="Interactive Blockchain Explorer for Bitcoin">
<meta property="og:description" content="Interactive Blockchain Explorer for Bitcoin">
<meta property="og:image" content="assets/images/apple-touch-icon.png">
<link rel="icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="assets/open-iconic/font/css/open-iconic-bootstrap.min.css">
<script src="assets/js/elm.min.js" async defer></script>
<style>
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local('Inconsolata Regular'), local('Inconsolata-Regular'),
url('assets/fonts/inconsolata-v15-latin-regular.woff2') format('woff2');
}
body {
font-family: 'Inconsolata', monospace;
}
hr {
border-color: #FFF;
}
code {
display: block;
font-size: 50%;
word-break: break-all;
}
.amount {
white-space: nowrap;
}
.amount::after {
content: "\0000a0BTC";
}
.bg-black {
background-color: #000;
}
.rotate {
animation: spin 2s linear infinite;
}
@keyframes spin { 100% { transform:rotate(360deg); } }
@media (min-width: 768px) {
body { font-size: 1.25rem; }
}
</style>
</head>
<body class="bg-black text-white">
<script>
window.onerror = function(msg, url, line) {
alert('Oops, a JavaScript error occured, please send a screenshot to the website administrator.\nMessage: ' + msg + '\nURL: ' + url + '\nLine: ' + line);
return false;
};
</script>
<div id="particles-js" style="position:absolute;width:100%;height:100%"></div>
<div class="container">
<div class="row">
<div class="col">
<div id="elm-app">
<div class="text-center"><h1>Loading...</h1></div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('load', () => {
// load Elm app
const elmAppDiv = document.querySelector('#elm-app');
const elmApp = Elm.Trappisto.embed(elmAppDiv, { coin: 'BTC' });
query = (query) => {
console.log("Query: ", query);
elmApp.ports.jsToElm.send(["query", query]);
};
elmApp.ports.elmToJs.subscribe((params) => {
const command = params.shift();
console.log('Received command: ' + command, params);
switch (command) {
case 'focus':
const query = document.getElementById('query');
if (query) {
query.focus();
setTimeout(function () { query.select(); }, 50); // delay sightly to allow focus to "stick" before selecting
}
break;
case 'title':
if (params[0] === "") {
document.title = "Bitcoin Blockchain Explorer";
} else {
document.title = params[0] + " - Bitcoin Blockchain Explorer";
}
break;
case 'particles':
particlesJS.load('particles-js', 'assets/js/particles.json', () => {
alert('Congrats, you found the easter egg! Particles are coming at you at supersonic speed!');
});
break;
default:
console.error('Unhandled command: ' + command);
}
});
// hook {Ctrl,Cmd}+F to our search bar
// XXX: not done in Elm because we cannot call preventDefault() in Elm
window.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && (String.fromCharCode(e.which).toLowerCase() === 'f')) {
e.preventDefault();
document.querySelector('#query').select();
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" async defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trappisto - Interactive Block Explorer</title>
<title>Decred Blockchain Explorer</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Trappisto - Interactive Block Explorer">
<meta name="description" content="Decred Blockchain Explorer">
<meta name="application-name" content="Trappisto">
<!-- <meta property="og:url" content="https://localhost"> -->
<meta property="og:title" content="Trappisto - Interactive Block Explorer">
<meta property="og:description" content="Trappisto - Interactive Block Explorer">
<meta property="og:title" content="Interactive Blockchain Explorer for Decred">
<meta property="og:description" content="Interactive Blockchain Explorer for Decred">
<meta property="og:image" content="assets/images/apple-touch-icon.png">
<link rel="icon" href="assets/images/favicon.ico">
......@@ -24,13 +23,6 @@
<script src="assets/js/elm.min.js" async defer></script>
<script>
// XXX: CONFIGURE ME:
const coin = 'DCR';
document.title = coin + " blockchain - Trappisto";
</script>
<style>
/* inconsolata-regular - latin */
@font-face {
......@@ -55,14 +47,18 @@
word-break: break-all;
}
.bg-black {
background-color: #000;
}
.amount {
white-space: nowrap;
}
.amount::after {
content: "\0000a0DCR";
}
.bg-black {
background-color: #000;
}
.rotate {
animation: spin 2s linear infinite;
}
......@@ -83,14 +79,6 @@
};
</script>
<script>
// append coin symbol to amounts
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.amount::after { content: "' + '\u00a0' + coin + '" };';
document.getElementsByTagName('head')[0].appendChild(style);
</script>
<div id="particles-js" style="position:absolute;width:100%;height:100%"></div>
<div class="container">
......@@ -107,7 +95,7 @@
window.addEventListener('load', () => {
// load Elm app
const elmAppDiv = document.querySelector('#elm-app');
const elmApp = Elm.Trappisto.embed(elmAppDiv, { coin: coin });
const elmApp = Elm.Trappisto.embed(elmAppDiv, { coin: 'DCR' });
query = (query) => {
console.log("Query: ", query);
......@@ -129,9 +117,9 @@
case 'title':
if (params[0] === "") {
document.title = coin + " blockchain - Trappisto";
document.title = "Decred Blockchain Explorer";
} else {
document.title = params[0] + " - " + coin + " blockchain - Trappisto";
document.title = params[0] + " - Decred Blockchain Explorer";
}
break;
......
......@@ -103,8 +103,11 @@ searchView model =
else
"img-fluid"
)
, src "assets/images/decred.png"
, alt "logo"
, src <|
"assets/images/"
++ (toString model.config.coin)
++ ".png"
]
[]
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment