diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html new file mode 100644 index 000000000..030def3a6 --- /dev/null +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.html @@ -0,0 +1,62 @@ +
+ + + + + + + + + + + + + @if (accelerationInfo.status === 'accelerated') { + + } @else { + + } + + + @if (accelerationInfo.status === 'seen') { + + + } @else if (accelerationInfo.status === 'accelerated' || accelerationInfo.status === 'mined') { + + @if (accelerationInfo.status === 'accelerated') { + + } @else { + + } + } + + + + + + +
Status + @if (accelerationInfo.status === 'seen') { + First seen + } @else if (accelerationInfo.status === 'accelerated') { + Accelerated + } @else if (accelerationInfo.status === 'mined') { + Mined + } +
Fee{{ accelerationInfo.fee | number }} sat
Out-of-band fees{{ accelerationInfo.feeDelta | number }} sat{{ accelerationInfo.bidBoost | number }} sat
Fee rateAccelerated fee rate
Accelerated by + + + +
+
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss new file mode 100644 index 000000000..29a157507 --- /dev/null +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.scss @@ -0,0 +1,52 @@ +.acceleration-tooltip { + position: fixed; + z-index: 3; + background: color-mix(in srgb, var(--active-bg) 95%, transparent); + border-radius: 4px; + box-shadow: 1px 1px 10px rgba(0,0,0,0.5); + color: var(--tooltip-grey); + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 10px 15px; + text-align: left; + pointer-events: none; + + .badge.badge-accelerated { + background-color: var(--tertiary); + color: white; + } + + .value { + text-align: end; + } + + .label { + padding-right: 30px; + } + + .pool-logo { + width: 22px; + height: 22px; + position: relative; + top: -1px; + margin-right: 3px; + } + + .highlight { + filter: drop-shadow(0 0 5px #905cf4); + animation: pulse 1s infinite; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts new file mode 100644 index 000000000..b4b3405fc --- /dev/null +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline-tooltip.component.ts @@ -0,0 +1,38 @@ +import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core'; + +@Component({ + selector: 'app-acceleration-timeline-tooltip', + templateUrl: './acceleration-timeline-tooltip.component.html', + styleUrls: ['./acceleration-timeline-tooltip.component.scss'], +}) +export class AccelerationTimelineTooltipComponent implements OnChanges { + @Input() accelerationInfo: any; + @Input() cursorPosition: { x: number, y: number }; + + tooltipPosition: any = null; + + @ViewChild('tooltip') tooltipElement: ElementRef; + + constructor() {} + + ngOnChanges(changes): void { + if (changes.cursorPosition && changes.cursorPosition.currentValue) { + let x = Math.max(10, changes.cursorPosition.currentValue.x - 50); + let y = changes.cursorPosition.currentValue.y + 20; + if (this.tooltipElement) { + const elementBounds = this.tooltipElement.nativeElement.getBoundingClientRect(); + if ((x + elementBounds.width) > (window.innerWidth - 10)) { + x = Math.max(0, window.innerWidth - elementBounds.width - 10); + } + if (y + elementBounds.height > (window.innerHeight - 20)) { + y = y - elementBounds.height - 20; + } + } + this.tooltipPosition = { x, y }; + } + } + + hasPoolsData(): boolean { + return Object.keys(this.accelerationInfo.poolsData).length > 0; + } +} diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html index 28076efa5..8eba6cdeb 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.html @@ -26,7 +26,7 @@
-
+
Mined
@@ -58,7 +58,7 @@
-
+
First seen
@@ -80,7 +80,7 @@ } @else {
} -
+
@if (!tx.status.confirmed) {
@@ -113,7 +113,10 @@ } @else {
} -
+
@if (tx.status.confirmed) { @@ -130,4 +133,10 @@
+ + +
diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss index 93a0cdba1..f351a0114 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.scss @@ -152,9 +152,16 @@ margin-bottom: -8px; transform: translateY(-50%); border-radius: 50%; - cursor: pointer; padding: 4px; background: transparent; + transition: background-color 300ms, padding 300ms; + + &.hovering { + cursor: pointer; + &:hover { + padding: 0px; + } + } .shape { position: relative; diff --git a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts index c8dbed72b..da0eee4a3 100644 --- a/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts +++ b/frontend/src/app/components/acceleration-timeline/acceleration-timeline.component.ts @@ -1,6 +1,8 @@ -import { Component, Input, OnInit, OnChanges } from '@angular/core'; +import { Component, Input, OnInit, OnChanges, HostListener } from '@angular/core'; import { ETA } from '../../services/eta.service'; import { Transaction } from '../../interfaces/electrs.interface'; +import { Acceleration, SinglePoolStats } from '../../interfaces/node-api.interface'; +import { MiningService } from '../../services/mining.service'; @Component({ selector: 'app-acceleration-timeline', @@ -10,6 +12,7 @@ import { Transaction } from '../../interfaces/electrs.interface'; export class AccelerationTimelineComponent implements OnInit, OnChanges { @Input() transactionTime: number; @Input() tx: Transaction; + @Input() accelerationInfo: Acceleration; @Input() eta: ETA; // A mined transaction has standard ETA and accelerated ETA undefined // A transaction in mempool has either standardETA defined (if accelerated) or acceleratedETA defined (if not accelerated yet) @@ -22,13 +25,25 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges { useAbsoluteTime: boolean = false; interval: number; - constructor() {} + tooltipPosition = null; + hoverInfo: any = null; + poolsData: { [id: number]: SinglePoolStats } = {}; + + constructor( + private miningService: MiningService, + ) {} ngOnInit(): void { this.acceleratedAt = this.tx.acceleratedAt ?? new Date().getTime() / 1000; this.now = Math.floor(new Date().getTime() / 1000); this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600; + this.miningService.getPools().subscribe(pools => { + for (const pool of pools) { + this.poolsData[pool.unique_id] = pool; + } + }); + this.interval = window.setInterval(() => { this.now = Math.floor(new Date().getTime() / 1000); this.useAbsoluteTime = this.tx.status.block_time < this.now - 7 * 24 * 3600; @@ -52,4 +67,42 @@ export class AccelerationTimelineComponent implements OnInit, OnChanges { ngOnDestroy(): void { clearInterval(this.interval); } + + onHover(event, status: string): void { + if (status === 'seen') { + this.hoverInfo = { + status, + fee: this.tx.fee, + weight: this.tx.weight + }; + } else if (status === 'accelerated') { + this.hoverInfo = { + status, + fee: this.accelerationInfo?.effectiveFee || this.tx.fee, + weight: this.tx.weight, + feeDelta: this.accelerationInfo?.feeDelta || this.tx.feeDelta, + pools: this.tx.acceleratedBy || this.accelerationInfo?.pools, + poolsData: this.poolsData + }; + } else if (status === 'mined') { + this.hoverInfo = { + status, + fee: this.accelerationInfo?.effectiveFee, + weight: this.tx.weight, + bidBoost: this.accelerationInfo?.bidBoost, + minedByPoolUniqueId: this.accelerationInfo?.minedByPoolUniqueId, + pools: this.tx.acceleratedBy || this.accelerationInfo?.pools, + poolsData: this.poolsData + }; + } + } + + onBlur(event): void { + this.hoverInfo = null; + } + + @HostListener('pointermove', ['$event']) + onPointerMove(event) { + this.tooltipPosition = { x: event.clientX, y: event.clientY }; + } } diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 9ce22d26c..a6a985fb0 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -167,7 +167,7 @@

Acceleration Timeline

- +
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 313a43e1f..89bcfafbb 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -68,6 +68,7 @@ import { AddressTransactionsWidgetComponent } from '../components/address-transa import { RbfTimelineComponent } from '../components/rbf-timeline/rbf-timeline.component'; import { AccelerationTimelineComponent } from '../components/acceleration-timeline/acceleration-timeline.component'; import { RbfTimelineTooltipComponent } from '../components/rbf-timeline/rbf-timeline-tooltip.component'; +import { AccelerationTimelineTooltipComponent } from '../components/acceleration-timeline/acceleration-timeline-tooltip.component'; import { PushTransactionComponent } from '../components/push-transaction/push-transaction.component'; import { TestTransactionsComponent } from '../components/test-transactions/test-transactions.component'; import { AssetsFeaturedComponent } from '../components/assets/assets-featured/assets-featured.component'; @@ -180,6 +181,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir RbfTimelineComponent, AccelerationTimelineComponent, RbfTimelineTooltipComponent, + AccelerationTimelineTooltipComponent, PushTransactionComponent, TestTransactionsComponent, AssetsNavComponent, @@ -320,6 +322,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir RbfTimelineComponent, AccelerationTimelineComponent, RbfTimelineTooltipComponent, + AccelerationTimelineTooltipComponent, PushTransactionComponent, TestTransactionsComponent, AssetsNavComponent,