mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 01:36:10 +00:00
Convert to object oriented ES6 syntax
This commit is contained in:
Joshua Seigler
parent
4906aeb0b5
commit
c09369a7dc
5 changed files with 175 additions and 179 deletions
125
app/App.js
Normal file
125
app/App.js
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
require('babel-polyfill');
|
||||||
|
|
||||||
|
import io from 'socket.io-client';
|
||||||
|
import ColorScheme from 'color-scheme';
|
||||||
|
import { PSDENOMINATIONS, COLORS, PAINT } from './constants';
|
||||||
|
|
||||||
|
export default class App {
|
||||||
|
constructor() {
|
||||||
|
this.socket = io.connect("https://insight.dash.org:443/");
|
||||||
|
this.domRefList = [];
|
||||||
|
this.blockList = document.getElementById('blockList');
|
||||||
|
this.currentBlock = document.createElement('div');
|
||||||
|
this.currentBlock.className = 'block';
|
||||||
|
this.blockList.appendChild(this.currentBlock);
|
||||||
|
this.blockColors = ['000000'];
|
||||||
|
this.prevBlockHash = null;
|
||||||
|
|
||||||
|
fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
|
||||||
|
.then(resp => resp.json())
|
||||||
|
.then(data => {
|
||||||
|
this.prevBlockHash = data.lastblockhash;
|
||||||
|
this.blockColors = App.generateColors(data.lastblockhash);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.socket.on('connect', () => {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-connected';
|
||||||
|
// Join the room.
|
||||||
|
this.socket.emit('subscribe', 'inv');
|
||||||
|
})
|
||||||
|
this.socket.on('tx', this.onTransaction.bind(this));
|
||||||
|
this.socket.on('block', this.onBlock.bind(this));
|
||||||
|
this.socket.on('disconnect', () => {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-disconnected';
|
||||||
|
});
|
||||||
|
this.socket.on('reconnecting', () => {
|
||||||
|
document.getElementById('connectionStatus').className = 'is-connecting';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static generateColors(blockHash) {
|
||||||
|
// https://github.com/c0bra/color-scheme-js
|
||||||
|
const schemeTypes = [
|
||||||
|
'contrast',
|
||||||
|
'triade',
|
||||||
|
'triade',
|
||||||
|
'tetrade',
|
||||||
|
'tetrade',
|
||||||
|
'analogic',
|
||||||
|
'analogic',
|
||||||
|
'analogic',
|
||||||
|
'analogic',
|
||||||
|
];
|
||||||
|
const hue = Math.floor(
|
||||||
|
parseInt(blockHash.slice(-3), 16) / 4096 * 360
|
||||||
|
);
|
||||||
|
const schemeFraction = parseInt(blockHash.slice(-5, -3), 16) / 256;
|
||||||
|
const scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)];
|
||||||
|
var blockColorScheme = new ColorScheme();
|
||||||
|
blockColorScheme.from_hue(hue).scheme(scheme).add_complement(true);
|
||||||
|
const colors = blockColorScheme.colors();
|
||||||
|
console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#'+colors[0]);
|
||||||
|
return colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
onBlock(data) {
|
||||||
|
this.prevBlockHash = data;
|
||||||
|
this.blockColors = App.generateColors(this.prevBlockHash);
|
||||||
|
var blockLink = document.createElement('a');
|
||||||
|
blockLink.className = 'explorer-link';
|
||||||
|
blockLink.href = 'https://insight.dash.org/insight/block/' + data;
|
||||||
|
blockLink.target = '_blank';
|
||||||
|
blockLink.setAttribute('rel', 'noopener');
|
||||||
|
blockLink.appendChild(document.createTextNode(data));
|
||||||
|
this.currentBlock.appendChild(blockLink);
|
||||||
|
|
||||||
|
this.currentBlock = document.createElement('div');
|
||||||
|
this.currentBlock.className = 'block';
|
||||||
|
this.currentBlock.style.setProperty('--private-color', COLORS.private);
|
||||||
|
this.currentBlock.style.setProperty('--instant-color', COLORS.instant);
|
||||||
|
|
||||||
|
if (this.domRefList.unshift(this.currentBlock) > 16) {
|
||||||
|
var toDelete = this.domRefList.pop();
|
||||||
|
toDelete.remove();
|
||||||
|
}
|
||||||
|
this.blockList.insertBefore(this.currentBlock, this.blockList.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
static isPrivateSend(components) {
|
||||||
|
return components.every(i => PSDENOMINATIONS.includes(Object.values(i)[0]));
|
||||||
|
}
|
||||||
|
|
||||||
|
onTransaction(data) {
|
||||||
|
const isMixing = App.isPrivateSend(data.vout);
|
||||||
|
const tx = {
|
||||||
|
mixing: isMixing,
|
||||||
|
instant: data.txlock,
|
||||||
|
value: data.valueOut,
|
||||||
|
x: parseInt(data.txid.slice(0, 4), 16) / 65536,
|
||||||
|
y: parseInt(data.txid.slice(4, 8), 16) / 65536,
|
||||||
|
rotation: parseInt(data.txid.slice(16, 17), 16) / 16,
|
||||||
|
paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536,
|
||||||
|
color: isMixing ? COLORS.private : data.txlock ? COLORS.instant : this.blockColors[
|
||||||
|
Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length)
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':''));
|
||||||
|
|
||||||
|
var paint = document.createElement('div');
|
||||||
|
paint.classList.add('paint');
|
||||||
|
paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ?
|
||||||
|
PAINT.big[Math.floor(tx.paintIndex * 12)] :
|
||||||
|
PAINT.small[Math.floor(tx.paintIndex * 11)]
|
||||||
|
) + ')';
|
||||||
|
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
|
||||||
|
paint.style.setProperty('--x', tx.x);
|
||||||
|
paint.style.setProperty('--y', tx.y);
|
||||||
|
paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));
|
||||||
|
paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg');
|
||||||
|
paint.style.setProperty('--color', '#'+tx.color);
|
||||||
|
this.currentBlock.appendChild(paint, this.currentBlock.firstChild);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
'use strict';
|
|
||||||
|
|
||||||
require('babel-polyfill');
|
|
||||||
|
|
||||||
import io from 'socket.io-client';
|
|
||||||
import ColorScheme from 'color-scheme';
|
|
||||||
|
|
||||||
var App = {
|
|
||||||
init: async function init() {
|
|
||||||
const socket = io.connect("https://insight.dash.org:443/");
|
|
||||||
const blockList = document.getElementById('blockList');
|
|
||||||
var domRefList = [];
|
|
||||||
var currentBlock = document.createElement('div');
|
|
||||||
currentBlock.className = 'block';
|
|
||||||
blockList.appendChild(currentBlock);
|
|
||||||
var blockColors = ['000000'];
|
|
||||||
var prevBlockHash;
|
|
||||||
|
|
||||||
fetch('https://insight.dash.org/api/status?q=getLastBlockHash')
|
|
||||||
.then(resp => resp.json())
|
|
||||||
.then(data => {
|
|
||||||
prevBlockHash = data.lastblockhash;
|
|
||||||
blockColors = generateColors(prevBlockHash);
|
|
||||||
});
|
|
||||||
|
|
||||||
const psInputSatoshis = [
|
|
||||||
1000010000,
|
|
||||||
100001000,
|
|
||||||
10000100,
|
|
||||||
1000010,
|
|
||||||
100001
|
|
||||||
];
|
|
||||||
|
|
||||||
const COLORS = {
|
|
||||||
private: '000000',
|
|
||||||
instant: 'ffffff'
|
|
||||||
};
|
|
||||||
|
|
||||||
const PAINT = {
|
|
||||||
big: [
|
|
||||||
'paint-big01.svg',
|
|
||||||
'paint-big02.svg',
|
|
||||||
'paint-big03.svg',
|
|
||||||
'paint-big04.svg',
|
|
||||||
'paint-big05.svg',
|
|
||||||
'paint-big06.svg',
|
|
||||||
'paint-big07.svg',
|
|
||||||
'paint-big08.svg',
|
|
||||||
'paint-big09.svg',
|
|
||||||
'paint-big00.svg',
|
|
||||||
'paint-big01.svg',
|
|
||||||
'paint-big11.svg',
|
|
||||||
'paint-big12.svg'
|
|
||||||
],
|
|
||||||
small: [
|
|
||||||
'paint01.svg',
|
|
||||||
'paint02.svg',
|
|
||||||
'paint03.svg',
|
|
||||||
'paint04.svg',
|
|
||||||
'paint05.svg',
|
|
||||||
'paint06.svg',
|
|
||||||
'paint07.svg',
|
|
||||||
'paint08.svg',
|
|
||||||
'paint09.svg',
|
|
||||||
'paint00.svg',
|
|
||||||
'paint01.svg',
|
|
||||||
'paint11.svg'
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
function generateColors(blockHash) {
|
|
||||||
// https://github.com/c0bra/color-scheme-js
|
|
||||||
const schemeTypes = [
|
|
||||||
'contrast',
|
|
||||||
'triade',
|
|
||||||
'triade',
|
|
||||||
'tetrade',
|
|
||||||
'tetrade',
|
|
||||||
'analogic',
|
|
||||||
'analogic',
|
|
||||||
'analogic',
|
|
||||||
'analogic',
|
|
||||||
];
|
|
||||||
const hue = Math.floor(
|
|
||||||
parseInt(prevBlockHash.slice(-3), 16) / 4096 * 360
|
|
||||||
);
|
|
||||||
const schemeFraction = parseInt(prevBlockHash.slice(-5, -3), 16) / 256;
|
|
||||||
const scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)];
|
|
||||||
var blockColorScheme = new ColorScheme();
|
|
||||||
blockColorScheme.from_hue(hue).scheme(scheme).add_complement(true);
|
|
||||||
const colors = blockColorScheme.colors();
|
|
||||||
console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#'+colors[0]);
|
|
||||||
return colors;
|
|
||||||
};
|
|
||||||
|
|
||||||
var onBlock = function(data) {
|
|
||||||
prevBlockHash = data;
|
|
||||||
blockColors = generateColors(prevBlockHash);
|
|
||||||
var blockLink = document.createElement('a');
|
|
||||||
blockLink.className = 'explorer-link';
|
|
||||||
blockLink.href = 'https://insight.dash.org/insight/block/' + data;
|
|
||||||
blockLink.target = '_blank';
|
|
||||||
blockLink.setAttribute('rel', 'noopener');
|
|
||||||
blockLink.appendChild(document.createTextNode(data));
|
|
||||||
currentBlock.appendChild(blockLink);
|
|
||||||
|
|
||||||
currentBlock = document.createElement('div');
|
|
||||||
currentBlock.className = 'block';
|
|
||||||
currentBlock.style.setProperty('--private-color', COLORS.private);
|
|
||||||
currentBlock.style.setProperty('--instant-color', COLORS.instant);
|
|
||||||
|
|
||||||
if (domRefList.unshift(currentBlock) > 16) {
|
|
||||||
var toDelete = domRefList.pop();
|
|
||||||
toDelete.remove();
|
|
||||||
}
|
|
||||||
blockList.insertBefore(currentBlock, blockList.firstChild);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onTransaction = function(data) {
|
|
||||||
var transactions = data.vout;
|
|
||||||
|
|
||||||
var isPrivateSend = true;
|
|
||||||
for (let i = 0; i < transactions.length; i++) {
|
|
||||||
const tx = transactions[i];
|
|
||||||
const outputSatoshis = tx[Object.keys(tx)[0]];
|
|
||||||
if (!psInputSatoshis.includes(outputSatoshis)) {
|
|
||||||
isPrivateSend = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const tx = {
|
|
||||||
private: isPrivateSend,
|
|
||||||
instant: data.txlock,
|
|
||||||
value: data.valueOut,
|
|
||||||
x: parseInt(data.txid.slice(0, 4), 16) / 65536,
|
|
||||||
y: parseInt(data.txid.slice(4, 8), 16) / 65536,
|
|
||||||
rotation: parseInt(data.txid.slice(16, 17), 16) / 16,
|
|
||||||
paintIndex: parseInt(data.txid.slice(17, 21), 16) / 65536,
|
|
||||||
color: isPrivateSend ? COLORS.private : data.txlock ? COLORS.instant : blockColors[
|
|
||||||
Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * blockColors.length)
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
console.log('tx: '+tx.value+(tx.private?' private':'')+(tx.instant?' instant':''));
|
|
||||||
|
|
||||||
var paint = document.createElement('div');
|
|
||||||
paint.classList.add('paint');
|
|
||||||
paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ?
|
|
||||||
PAINT.big[Math.floor(tx.paintIndex * 12)] :
|
|
||||||
PAINT.small[Math.floor(tx.paintIndex * 11)]
|
|
||||||
) + ')';
|
|
||||||
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
|
|
||||||
paint.style.setProperty('--x', tx.x);
|
|
||||||
paint.style.setProperty('--y', tx.y);
|
|
||||||
paint.style.setProperty('--size', Math.log(1 + tx.value)/Math.log(2));
|
|
||||||
paint.style.setProperty('--rotation', tx.rotation * 360 + 'deg');
|
|
||||||
paint.style.setProperty('--color', '#'+tx.color);
|
|
||||||
currentBlock.appendChild(paint, currentBlock.firstChild);
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.on('connect', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-connected';
|
|
||||||
// Join the room.
|
|
||||||
socket.emit('subscribe', 'inv');
|
|
||||||
})
|
|
||||||
socket.on('tx', onTransaction);
|
|
||||||
socket.on('block', onBlock);
|
|
||||||
socket.on('disconnect', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-disconnected';
|
|
||||||
});
|
|
||||||
socket.on('reconnecting', function() {
|
|
||||||
document.getElementById('connectionStatus').className = 'is-connecting';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = App;
|
|
||||||
|
|
@ -11,6 +11,6 @@
|
||||||
<div id="blockList"></div>
|
<div id="blockList"></div>
|
||||||
|
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
<script>require('application').init();</script>
|
<script>require('main.js');</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
44
app/constants.js
Normal file
44
app/constants.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
export const PSDENOMINATIONS = [
|
||||||
|
1000010000,
|
||||||
|
100001000,
|
||||||
|
10000100,
|
||||||
|
1000010,
|
||||||
|
100001
|
||||||
|
];
|
||||||
|
|
||||||
|
export const COLORS = {
|
||||||
|
private: '000000',
|
||||||
|
instant: 'ffffff'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PAINT = {
|
||||||
|
big: [
|
||||||
|
'paint-big01.svg',
|
||||||
|
'paint-big02.svg',
|
||||||
|
'paint-big03.svg',
|
||||||
|
'paint-big04.svg',
|
||||||
|
'paint-big05.svg',
|
||||||
|
'paint-big06.svg',
|
||||||
|
'paint-big07.svg',
|
||||||
|
'paint-big08.svg',
|
||||||
|
'paint-big09.svg',
|
||||||
|
'paint-big00.svg',
|
||||||
|
'paint-big01.svg',
|
||||||
|
'paint-big11.svg',
|
||||||
|
'paint-big12.svg'
|
||||||
|
],
|
||||||
|
small: [
|
||||||
|
'paint01.svg',
|
||||||
|
'paint02.svg',
|
||||||
|
'paint03.svg',
|
||||||
|
'paint04.svg',
|
||||||
|
'paint05.svg',
|
||||||
|
'paint06.svg',
|
||||||
|
'paint07.svg',
|
||||||
|
'paint08.svg',
|
||||||
|
'paint09.svg',
|
||||||
|
'paint00.svg',
|
||||||
|
'paint01.svg',
|
||||||
|
'paint11.svg'
|
||||||
|
]
|
||||||
|
};
|
||||||
5
app/main.js
Normal file
5
app/main.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
new App();
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue