mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-26 01:06:12 +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>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
<script>require('application').init();</script>
|
||||
<script>require('main.js');</script>
|
||||
</body>
|
||||
</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