machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor refactor for projected block transactions

Browse Source
This commit is contained in:
softsimon
2022-06-02 01:29:03 +04:00
parent ddab579111
commit f0a2ddf57b
10 changed files with 379 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/app/components/mempool-block-overview/tx-view.ts
View File

@@ -1,14 +1,14 @@
import TxSprite from './tx-sprite'
import { FastVertexArray } from './fast-vertex-array'
import TxSprite from './tx-sprite';
import { FastVertexArray } from './fast-vertex-array';
import { TransactionStripped } from 'src/app/interfaces/websocket.interface';
import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types'
import { SpriteUpdateParams, Square, Color, ViewUpdateParams } from './sprite-types';
import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
const hoverTransitionTime = 300
const defaultHoverColor = hexToColor('1bd8f4')
const hoverTransitionTime = 300;
const defaultHoverColor = hexToColor('1bd8f4');
// convert from this class's update format to TxSprite's update format
function toSpriteUpdate(params : ViewUpdateParams): SpriteUpdateParams {
function toSpriteUpdate(params: ViewUpdateParams): SpriteUpdateParams {
return {
start: (params.start || performance.now()) + (params.delay || 0),
duration: params.duration,
@@ -16,7 +16,7 @@ function toSpriteUpdate(params : ViewUpdateParams): SpriteUpdateParams {
...params.display.position,
...params.display.color,
adjust: params.adjust
}
};
}
export default class TxView implements TransactionStripped {
@@ -33,41 +33,43 @@ export default class TxView implements TransactionStripped {
hoverColor: Color | void;
screenPosition: Square;
gridPosition : Square | void;
gridPosition: Square | void;
dirty: boolean;
constructor (tx: TransactionStripped, vertexArray: FastVertexArray) {
this.txid = tx.txid
this.fee = tx.fee
this.vsize = tx.vsize
this.value = tx.value
this.feerate = tx.fee / tx.vsize
this.initialised = false
this.vertexArray = vertexArray
constructor(tx: TransactionStripped, vertexArray: FastVertexArray) {
this.txid = tx.txid;
this.fee = tx.fee;
this.vsize = tx.vsize;
this.value = tx.value;
this.feerate = tx.fee / tx.vsize;
this.initialised = false;
this.vertexArray = vertexArray;
this.hover = false
this.hover = false;
this.screenPosition = { x: 0, y: 0, s: 0 }
this.screenPosition = { x: 0, y: 0, s: 0 };
this.dirty = true
this.dirty = true;
}
destroy (): void {
destroy(): void {
if (this.sprite) {
this.sprite.destroy()
this.sprite = null
this.initialised = false
this.sprite.destroy();
this.sprite = null;
this.initialised = false;
}
}
applyGridPosition (position: Square): void {
if (!this.gridPosition) this.gridPosition = { x: 0, y: 0, s: 0 }
if (this.gridPosition.x != position.x || this.gridPosition.y != position.y || this.gridPosition.s != position.s) {
this.gridPosition.x = position.x
this.gridPosition.y = position.y
this.gridPosition.s = position.s
this.dirty = true
applyGridPosition(position: Square): void {
if (!this.gridPosition) {
this.gridPosition = { x: 0, y: 0, s: 0 };
}
if (this.gridPosition.x !== position.x || this.gridPosition.y !== position.y || this.gridPosition.s !== position.s) {
this.gridPosition.x = position.x;
this.gridPosition.y = position.y;
this.gridPosition.s = position.s;
this.dirty = true;
}
}
@@ -81,15 +83,17 @@ export default class TxView implements TransactionStripped {
jitter: if set, adds a random amount to the delay,
adjust: if true, modify an in-progress transition instead of replacing it
*/
update (params: ViewUpdateParams): void {
if (params.jitter) params.delay += (Math.random() * params.jitter)
update(params: ViewUpdateParams): void {
if (params.jitter) {
params.delay += (Math.random() * params.jitter);
}
if (!this.initialised || !this.sprite) {
this.initialised = true
this.initialised = true;
this.sprite = new TxSprite(
toSpriteUpdate(params),
this.vertexArray
)
);
// apply any pending hover event
if (this.hover) {
this.sprite.update({
@@ -97,48 +101,50 @@ export default class TxView implements TransactionStripped {
duration: hoverTransitionTime,
adjust: false,
temp: true
})
});
}
} else {
this.sprite.update(
toSpriteUpdate(params)
)
);
}
this.dirty = false
this.dirty = false;
}
// Temporarily override the tx color
setHover (hoverOn: boolean, color: Color | void = defaultHoverColor): void {
setHover(hoverOn: boolean, color: Color | void = defaultHoverColor): void {
if (hoverOn) {
this.hover = true
this.hoverColor = color
this.hover = true;
this.hoverColor = color;
this.sprite.update({
...this.hoverColor,
duration: hoverTransitionTime,
adjust: false,
temp: true
})
});
} else {
this.hover = false
this.hoverColor = null
if (this.sprite) this.sprite.resume(hoverTransitionTime)
this.hover = false;
this.hoverColor = null;
if (this.sprite) {
this.sprite.resume(hoverTransitionTime);
}
}
this.dirty = false
this.dirty = false;
}
getColor (): Color {
getColor(): Color {
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => (this.feerate || 1) >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
return hexToColor(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1])
return hexToColor(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
}
}
function hexToColor (hex: string): Color {
function hexToColor(hex: string): Color {
return {
r: parseInt(hex.slice(0,2), 16) / 255,
g: parseInt(hex.slice(2,4), 16) / 255,
b: parseInt(hex.slice(4,6), 16) / 255,
r: parseInt(hex.slice(0, 2), 16) / 255,
g: parseInt(hex.slice(2, 4), 16) / 255,
b: parseInt(hex.slice(4, 6), 16) / 255,
a: 1
}
};
}