mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-27 01:36:10 +00:00
publish: ⚡ Change main live canvas to act like a mempool
generated from commit a69343066a57714e451b4ba65608b63ad38c0266
This commit is contained in:
Joshua Seigler
parent
473b01e2f0
commit
c99258d224
5 changed files with 198 additions and 116 deletions
26
bundle.css
26
bundle.css
|
|
@ -34,7 +34,17 @@ a {
|
|||
margin-left: 80vw;
|
||||
padding-top: 2.5vw;
|
||||
}
|
||||
.block:first-child {
|
||||
#hero, .block {
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
-webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
|
||||
box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
|
||||
background-color: #dad7b7;
|
||||
margin: 0 auto 1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
#hero {
|
||||
position: absolute;
|
||||
left: 41.125%;
|
||||
top: 50%;
|
||||
|
|
@ -45,26 +55,16 @@ a {
|
|||
transform: translate(-50%,-50%);
|
||||
}
|
||||
@media (max-height: 82.5vw) {
|
||||
.block:first-child {
|
||||
#hero {
|
||||
width: calc(100vh - 5vw);
|
||||
height: calc(100vh - 5vw);
|
||||
}
|
||||
}
|
||||
.block.solo {
|
||||
#hero.solo {
|
||||
left: 50%;
|
||||
width: 95vmin;
|
||||
height: 95vmin;
|
||||
}
|
||||
.block {
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
-webkit-box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
|
||||
box-shadow: 0.1em 0.1em 1em hsla(0, 0%, 0%, 0.5);
|
||||
background-color: #dad7b7;
|
||||
margin: 0 auto 1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.explorer-link {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
197
bundle.js
197
bundle.js
|
|
@ -18863,6 +18863,13 @@ var App =
|
|||
function () {
|
||||
function App() {
|
||||
_classCallCheck(this, App);
|
||||
|
||||
this.blockRefs = [];
|
||||
this.mempoolRefs = [];
|
||||
this.blockList = document.getElementById('blockList');
|
||||
this.connectionStatus = document.getElementById('connectionStatus');
|
||||
this.hero = document.getElementById('hero');
|
||||
this.blockColors = ['000000'];
|
||||
}
|
||||
|
||||
_createClass(App, [{
|
||||
|
|
@ -18870,94 +18877,109 @@ function () {
|
|||
value: function () {
|
||||
var _init = _asyncToGenerator(
|
||||
/*#__PURE__*/
|
||||
regeneratorRuntime.mark(function _callee() {
|
||||
regeneratorRuntime.mark(function _callee2() {
|
||||
var _this = this;
|
||||
|
||||
var block, txs, pages, prevHash, i;
|
||||
var block, txs, pages, prevHash;
|
||||
return regeneratorRuntime.wrap(function _callee2$(_context2) {
|
||||
while (1) {
|
||||
switch (_context2.prev = _context2.next) {
|
||||
case 0:
|
||||
block = new URL(window.location).searchParams.get('block');
|
||||
|
||||
if (!(block != null)) {
|
||||
_context2.next = 5;
|
||||
break;
|
||||
}
|
||||
|
||||
return _context2.delegateYield(
|
||||
/*#__PURE__*/
|
||||
regeneratorRuntime.mark(function _callee() {
|
||||
var txListener, i;
|
||||
return regeneratorRuntime.wrap(function _callee$(_context) {
|
||||
while (1) {
|
||||
switch (_context.prev = _context.next) {
|
||||
case 0:
|
||||
this.domRefList = [];
|
||||
this.blockList = document.getElementById('blockList');
|
||||
this.blockList.style.setProperty('--private-color', _constants.COLORS["private"]);
|
||||
this.blockList.style.setProperty('--instant-color', _constants.COLORS.instant);
|
||||
this.connectionStatus = document.getElementById('connectionStatus');
|
||||
this.currentBlock = document.createElement('div');
|
||||
this.currentBlock.className = 'block';
|
||||
this.blockList.appendChild(this.currentBlock);
|
||||
this.blockColors = ['000000'];
|
||||
block = new URL(window.location).searchParams.get('block');
|
||||
|
||||
if (!(block != null)) {
|
||||
_context.next = 26;
|
||||
break;
|
||||
}
|
||||
|
||||
// display one block
|
||||
this.currentBlock.classList.add('solo');
|
||||
this.connectionStatus.className = 'is-loading';
|
||||
_this.hero.classList.add('solo');
|
||||
|
||||
_this.connectionStatus.className = 'is-loading';
|
||||
txs = [];
|
||||
pages = 1;
|
||||
prevHash = null;
|
||||
txListener = _this.onTransactionBuilder(_this.hero, false);
|
||||
i = 0;
|
||||
|
||||
case 17:
|
||||
case 7:
|
||||
if (!(i < pages)) {
|
||||
_context.next = 23;
|
||||
_context.next = 13;
|
||||
break;
|
||||
}
|
||||
|
||||
_context.next = 20;
|
||||
_context.next = 10;
|
||||
return fetch("https://insight.dash.org/insight-api/txs?block=".concat(block, "&pageNum=").concat(i)).then(function (resp) {
|
||||
return resp.json();
|
||||
}).then(function (thisBlockData) {
|
||||
// console.log({i, pages, prevHash, thisBlockData});
|
||||
if (!prevHash && thisBlockData.txs.length > 0) {
|
||||
return fetch('https://insight.dash.org/insight-api/block-index/' + (thisBlockData.txs[0].blockheight - 1)).then(function (resp) {
|
||||
return resp.json();
|
||||
}).then(function (prevBlockData) {
|
||||
prevHash = prevBlockData.blockHash;
|
||||
_this.blockColors = App.generateColors(prevHash);
|
||||
|
||||
_this.applyColors(_this.hero);
|
||||
|
||||
pages = thisBlockData.pagesTotal;
|
||||
|
||||
for (var j = 0; j < thisBlockData.txs.length; ++j) {
|
||||
_this.onTransaction(thisBlockData.txs[j]);
|
||||
txListener(thisBlockData.txs[j]);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
for (var j = 0; j < thisBlockData.txs.length; ++j) {
|
||||
_this.onTransaction(thisBlockData.txs[j]);
|
||||
txListener(thisBlockData.txs[j]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
case 20:
|
||||
case 10:
|
||||
++i;
|
||||
_context.next = 17;
|
||||
_context.next = 7;
|
||||
break;
|
||||
|
||||
case 23:
|
||||
this.connectionStatus.className = 'is-loaded';
|
||||
_context.next = 34;
|
||||
case 13:
|
||||
_this.connectionStatus.className = 'is-loaded';
|
||||
|
||||
case 14:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
}
|
||||
}
|
||||
}, _callee);
|
||||
})(), "t0", 3);
|
||||
|
||||
case 3:
|
||||
_context2.next = 13;
|
||||
break;
|
||||
|
||||
case 26:
|
||||
_context.next = 28;
|
||||
case 5:
|
||||
_context2.next = 7;
|
||||
return fetch('https://insight.dash.org/api/status?q=getLastBlockHash').then(function (resp) {
|
||||
return resp.json();
|
||||
}).then(function (data) {
|
||||
_this.blockColors = App.generateColors(data.lastblockhash);
|
||||
|
||||
_this.applyColors(_this.hero);
|
||||
});
|
||||
|
||||
case 28:
|
||||
case 7:
|
||||
this.socket = _socket["default"].connect("https://insight.dash.org:443/");
|
||||
this.socket.on('connect', function () {
|
||||
_this.connectionStatus.className = 'is-connected'; // Join the room.
|
||||
|
||||
_this.socket.emit('subscribe', 'inv');
|
||||
});
|
||||
this.socket.on('tx', this.onTransaction.bind(this));
|
||||
this.socket.on('tx', this.onTransactionBuilder(this.hero, true).bind(this));
|
||||
this.socket.on('block', this.onBlock.bind(this));
|
||||
this.socket.on('disconnect', function () {
|
||||
_this.connectionStatus.className = 'is-disconnected';
|
||||
|
|
@ -18966,12 +18988,12 @@ function () {
|
|||
_this.connectionStatus.className = 'is-connecting';
|
||||
});
|
||||
|
||||
case 34:
|
||||
case 13:
|
||||
case "end":
|
||||
return _context.stop();
|
||||
return _context2.stop();
|
||||
}
|
||||
}
|
||||
}, _callee, this);
|
||||
}, _callee2, this);
|
||||
}));
|
||||
|
||||
function init() {
|
||||
|
|
@ -18980,9 +19002,23 @@ function () {
|
|||
|
||||
return init;
|
||||
}()
|
||||
}, {
|
||||
key: "applyColors",
|
||||
value: function applyColors(target) {
|
||||
for (var i in this.blockColors) {
|
||||
var color = this.blockColors[i];
|
||||
target.style.setProperty("--color-".concat(i), '#' + color);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "onBlock",
|
||||
value: function onBlock(data) {
|
||||
var _this2 = this;
|
||||
|
||||
var completedBlock = document.createElement('div');
|
||||
completedBlock.className = 'block';
|
||||
completedBlock.id = data;
|
||||
this.applyColors(completedBlock);
|
||||
this.blockColors = App.generateColors(data);
|
||||
var blockLink = document.createElement('a');
|
||||
blockLink.className = 'explorer-link';
|
||||
|
|
@ -18990,34 +19026,76 @@ function () {
|
|||
blockLink.target = '_blank';
|
||||
blockLink.setAttribute('rel', 'noopener');
|
||||
blockLink.appendChild(document.createTextNode('🗗'));
|
||||
this.currentBlock.appendChild(blockLink);
|
||||
this.currentBlock = document.createElement('div');
|
||||
this.currentBlock.className = 'block';
|
||||
fetch('https://insight.dash.org/insight-api/block/' + data).then(function (resp) {
|
||||
return resp.json();
|
||||
}).then(function (data) {
|
||||
var mined = [];
|
||||
|
||||
for (var i in data.tx) {
|
||||
var txid = data.tx[i];
|
||||
var paint = document.getElementById(txid);
|
||||
|
||||
if (paint) {
|
||||
mined.push(paint);
|
||||
completedBlock.insertBefore(paint, completedBlock.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
_this2.mempoolRefs = _this2.mempoolRefs.filter(function (item) {
|
||||
return !mined.includes(item);
|
||||
});
|
||||
|
||||
_this2.mempoolRefs.forEach(function (item) {
|
||||
item.classList.add('stale');
|
||||
item.data_ignored = item.data_ignored ? item.data_ignored + 1 : 1;
|
||||
});
|
||||
|
||||
_this2.mempoolRefs.filter(function (item) {
|
||||
if (item.data_ignored > 4) {
|
||||
_this2.hero.removeChild(item);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
completedBlock.appendChild(blockLink);
|
||||
|
||||
if (_this2.blockRefs.unshift(_this2.completedBlock) > 8) {
|
||||
var toDelete = _this2.blockRefs.pop();
|
||||
|
||||
if (this.domRefList.unshift(this.currentBlock) > 16) {
|
||||
var toDelete = this.domRefList.pop();
|
||||
toDelete.remove();
|
||||
}
|
||||
|
||||
this.blockList.insertBefore(this.currentBlock, this.blockList.firstChild);
|
||||
_this2.blockList.insertBefore(completedBlock, _this2.blockList.firstChild);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "onTransaction",
|
||||
value: function onTransaction(data) {
|
||||
key: "onTransactionBuilder",
|
||||
value: function onTransactionBuilder(target) {
|
||||
var _this3 = this;
|
||||
|
||||
var addToMempool = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||||
return function (data) {
|
||||
var isMixing = App.isPrivateSend(data.vout);
|
||||
var isInstant = data.txlock || data.vin && data.vin.length <= 4;
|
||||
var isSimple = data.txlock || data.vin && data.vin.length <= 1;
|
||||
var tx = {
|
||||
id: data.txid,
|
||||
mixing: isMixing,
|
||||
instant: isInstant,
|
||||
simple: isSimple,
|
||||
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 ? _constants.COLORS["private"] : isInstant ? _constants.COLORS.instant : this.blockColors[Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * this.blockColors.length)]
|
||||
color: isMixing ? _constants.COLORS.black : !isSimple ? _constants.COLORS.white : 'var(--color-' + Math.floor(parseInt(data.txid.slice(21, 23), 16) / 256 * _this3.blockColors.length) + ')'
|
||||
};
|
||||
console.log('tx: ' + tx.value + (tx.mixing ? ' mixing' : '') + (tx.instant ? ' instant' : ''));
|
||||
console.log('tx: ' + tx.value + (tx.mixing ? ' mixing' : '') + (isInstant ? ' instant' : ''));
|
||||
var paint = document.createElement('div');
|
||||
paint.id = tx.id;
|
||||
paint.classList.add('paint');
|
||||
paint.style.maskImage = 'url(assets/paint/' + (tx.value > 10 ? _constants.PAINT.big[Math.floor(tx.paintIndex * 12)] : _constants.PAINT.small[Math.floor(tx.paintIndex * 11)]) + ')';
|
||||
paint.style.setProperty('-webkit-mask-image', paint.style.maskImage);
|
||||
|
|
@ -19025,21 +19103,24 @@ function () {
|
|||
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);
|
||||
paint.style.setProperty('--color', tx.color);
|
||||
|
||||
if (addToMempool && _this3.mempoolRefs.unshift(paint) > 200) {
|
||||
var toDelete = _this3.mempoolRefs.pop();
|
||||
|
||||
toDelete.remove();
|
||||
}
|
||||
|
||||
target.appendChild(paint);
|
||||
};
|
||||
}
|
||||
}], [{
|
||||
key: "generateColors",
|
||||
value: function generateColors(blockHash) {
|
||||
// https://github.com/c0bra/color-scheme-js
|
||||
var schemeTypes = ['contrast', 'triade', 'triade', 'tetrade', 'tetrade', 'analogic', 'analogic', 'analogic', 'analogic'];
|
||||
var hue = Math.floor(parseInt(blockHash.slice(-3), 16) / 4096 * 360);
|
||||
var schemeFraction = parseInt(blockHash.slice(-5, -3), 16) / 256;
|
||||
var scheme = schemeTypes[Math.floor(schemeFraction * schemeTypes.length)];
|
||||
var blockColorScheme = new _colorScheme["default"]();
|
||||
blockColorScheme.from_hue(hue).scheme(scheme).add_complement(true);
|
||||
blockColorScheme.from_hue(hue).scheme('analogic').add_complement(true);
|
||||
var colors = blockColorScheme.colors();
|
||||
console.log('New color scheme: ' + scheme + ' based on %chue ' + hue, 'background-color:#' + colors[0]);
|
||||
return colors;
|
||||
}
|
||||
}, {
|
||||
|
|
@ -19074,8 +19155,8 @@ exports.PAINT = exports.COLORS = exports.PSDENOMINATIONS = void 0;
|
|||
var PSDENOMINATIONS = [1000010000, 100001000, 10000100, 1000010, 100001];
|
||||
exports.PSDENOMINATIONS = PSDENOMINATIONS;
|
||||
var COLORS = {
|
||||
"private": '000000',
|
||||
instant: 'ffffff'
|
||||
black: '#000000',
|
||||
white: '#ffffff'
|
||||
};
|
||||
exports.COLORS = COLORS;
|
||||
var PAINT = {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,6 +8,7 @@
|
|||
<body>
|
||||
<div id="connectionStatus" class="is-connecting"></div>
|
||||
|
||||
<div id="hero"></div>
|
||||
<div id="blockList"></div>
|
||||
|
||||
<script src="bundle.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue