Merge pull request #4959 from mempool/mononaut/pizza
WIP (work-in-pizza)
This commit is contained in:
wiz
GitHub
commit
8c3f11622c
@ -7,6 +7,7 @@ import { MempoolBlockViewComponent } from './components/mempool-block-view/mempo
|
||||
import { ClockComponent } from './components/clock/clock.component';
|
||||
import { StatusViewComponent } from './components/status-view/status-view.component';
|
||||
import { AddressGroupComponent } from './components/address-group/address-group.component';
|
||||
import { TrackerComponent } from './components/tracker/tracker.component';
|
||||
|
||||
const browserWindow = window || {};
|
||||
// @ts-ignore
|
||||
@ -105,6 +106,10 @@ let routes: Routes = [
|
||||
loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
|
||||
data: { preload: true },
|
||||
},
|
||||
{
|
||||
path: 'tracker/:id',
|
||||
component: TrackerComponent,
|
||||
},
|
||||
{
|
||||
path: 'wallet',
|
||||
children: [],
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
<div class="container card" style="padding: 20px; background: var(--bg)">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h1 style="font-size: larger;">Accelerate your Bitcoin transaction?</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="mt-3">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="form-group form-check">
|
||||
<input type="radio" class="form-check-input" id="accelerate" name="accelerate">
|
||||
<label class="form-check-label d-flex flex-column" for="accelerate">
|
||||
<span class="font-weight-bold">Accelerate</span>
|
||||
<span class="text-muted">Settlement expected in 1 hour or less<br>10,000 sats ($7.00) fee</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="form-group form-check">
|
||||
<input type="radio" class="form-check-input" id="wait" name="accelerate" checked="checked">
|
||||
<label class="form-check-label d-flex flex-column" for="wait">
|
||||
<span class="font-weight-bold">Wait</span>
|
||||
@if (!eta) {
|
||||
<span class="text-muted">Settlement unlikely to occur within 24 hours</span>
|
||||
} @else {
|
||||
<span class="text-muted">Settlement estimated to occur <app-time kind="until" [time]="eta" [fastRender]="false" [fixedRender]="true"></app-time></span>
|
||||
}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-sm d-flex flex-row justify-content-center">
|
||||
<button type="submit" class="btn btn-light w-100 rounded-pill" style="max-width: 250px">
|
||||
<img src="/resources/mempool-accelerator-sparkles-compressed.svg" height="25" class="mr-2" style="margin-left: -33px">
|
||||
<span>Accelerate</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<span class="close-button" (click)="closeModal()">✖</span>
|
||||
</div>
|
||||
@ -0,0 +1,5 @@
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
|
||||
import { Transaction } from '../../interfaces/electrs.interface';
|
||||
import { MempoolPosition } from '../../interfaces/node-api.interface';
|
||||
|
||||
@Component({
|
||||
selector: 'app-accelerate-checkout',
|
||||
templateUrl: './accelerate-checkout.component.html',
|
||||
styleUrls: ['./accelerate-checkout.component.scss']
|
||||
})
|
||||
export class AccelerateCheckout implements OnInit, OnDestroy {
|
||||
@Input() tx: Transaction ;
|
||||
@Input() eta: number;
|
||||
@Output() close = new EventEmitter<null>();
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
}
|
||||
|
||||
closeModal(): void {
|
||||
console.log('close modal')
|
||||
this.close.emit();
|
||||
}
|
||||
}
|
||||
@ -124,13 +124,13 @@
|
||||
|
||||
#arrow-up {
|
||||
position: relative;
|
||||
left: 30px;
|
||||
top: 140px;
|
||||
left: calc(var(--block-size) * 0.6);
|
||||
top: calc(var(--block-size) * 1.12);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 35px solid #FFF;
|
||||
border-left: calc(var(--block-size) * 0.3) solid transparent;
|
||||
border-right: calc(var(--block-size) * 0.3) solid transparent;
|
||||
border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
|
||||
}
|
||||
|
||||
.flashing {
|
||||
|
||||
@ -11,7 +11,7 @@ import { StateService } from '../../services/state.service';
|
||||
export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input() width: number = 300;
|
||||
@Input() height: number = 60;
|
||||
@Input() mode: 'mempool' | 'mined';
|
||||
@Input() mode: 'mempool' | 'mined' | 'none';
|
||||
@Input() index: number = 0;
|
||||
|
||||
mempoolBlocks: number = 3;
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
|
||||
<div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + (blockWidth * 0.3) + containerOffset + 'px', transition: transition }" [class.blink]="txPosition?.accelerated"></div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
|
||||
@ -113,13 +113,13 @@
|
||||
|
||||
#arrow-up {
|
||||
position: relative;
|
||||
right: 75px;
|
||||
top: 140px;
|
||||
right: calc(var(--block-size) * 0.6);
|
||||
top: calc(var(--block-size) * 1.12);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 35px solid transparent;
|
||||
border-right: 35px solid transparent;
|
||||
border-bottom: 35px solid #FFF;
|
||||
border-left: calc(var(--block-size) * 0.3) solid transparent;
|
||||
border-right: calc(var(--block-size) * 0.3) solid transparent;
|
||||
border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
|
||||
}
|
||||
|
||||
.blockLink {
|
||||
|
||||
@ -70,6 +70,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
|
||||
tabHidden = false;
|
||||
feeRounding = '1.0-0';
|
||||
|
||||
maxArrowPosition = 0;
|
||||
rightPosition = 0;
|
||||
transition = 'background 2s, right 2s, transform 1s';
|
||||
|
||||
@ -326,6 +327,11 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
|
||||
if (blocks.length) {
|
||||
blocks[blocks.length - 1].isStack = blocks[blocks.length - 1].blockVSize > this.stateService.blockVSize;
|
||||
}
|
||||
if (this.count) {
|
||||
this.maxArrowPosition = (Math.min(blocks.length, this.count) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
|
||||
} else {
|
||||
this.maxArrowPosition = (Math.min(blocks.length, blocksAmount) * (this.blockWidth + this.blockPadding)) - this.blockPadding;
|
||||
}
|
||||
return blocks;
|
||||
}
|
||||
|
||||
@ -386,7 +392,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
|
||||
} else if (this.markIndex > -1) {
|
||||
clearTimeout(this.resetTransitionTimeout);
|
||||
this.transition = 'inherit';
|
||||
this.rightPosition = this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth;
|
||||
this.rightPosition = Math.min(this.maxArrowPosition, this.markIndex * (this.blockWidth + this.blockPadding) + 0.5 * this.blockWidth);
|
||||
this.arrowVisible = true;
|
||||
|
||||
this.resetTransitionTimeout = window.setTimeout(() => {
|
||||
@ -436,6 +442,7 @@ export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.rightPosition = Math.min(this.maxArrowPosition, this.rightPosition);
|
||||
}
|
||||
|
||||
mountEmptyBlocks() {
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="tracker-bar" [class.transitions]="transitionsEnabled">
|
||||
<div class="stage {{ stages.waiting.state }}">Sent</div>
|
||||
<div class="divider left-{{ stages.waiting.state }} right-{{ stages.pending.state }}"></div>
|
||||
<div class="stage {{ stages.pending.state }}">Pending</div>
|
||||
<div class="divider left-{{ stages.pending.state }} right-{{ stages.soon.state }}"></div>
|
||||
<div class="stage {{ stages.soon.state }}">Soon</div>
|
||||
<div class="divider left-{{ stages.soon.state }} right-{{ stages.next.state }}"></div>
|
||||
<div class="stage {{ stages.next.state }}">Next block</div>
|
||||
<div class="divider left-{{ stages.next.state }} right-{{ stages.confirmed.state }}"></div>
|
||||
<div class="stage {{ stages.confirmed.state }}">Confirmed</div>
|
||||
</div>
|
||||
136
frontend/src/app/components/tracker/tracker-bar.component.scss
Normal file
136
frontend/src/app/components/tracker/tracker-bar.component.scss
Normal file
@ -0,0 +1,136 @@
|
||||
.tracker-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
--div-left-color: var(--box-bg);
|
||||
--div-right-color: var(--box-bg);
|
||||
--stage-color: var(--box-bg);
|
||||
|
||||
font-size: clamp(5px, 2.5vw, 15px);
|
||||
height: clamp(15px, 7.5vw, 45px);
|
||||
|
||||
.stage {
|
||||
overflow: hidden;
|
||||
border-top: solid 2px var(--stat-box-bg);
|
||||
border-bottom: solid 2px var(--stat-box-bg);
|
||||
background: var(--stage-color);
|
||||
color: var(--transparent-fg);
|
||||
padding: 1em;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: hidden;
|
||||
white-space: no-break;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:first-child {
|
||||
border-left: solid 2px var(--stat-box-bg);
|
||||
border-top-left-radius: 1.6em;
|
||||
border-bottom-left-radius: 1.6em;
|
||||
padding-left: 1.6em;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: solid 2px var(--stat-box-bg);
|
||||
border-top-right-radius: 1.6em;
|
||||
border-bottom-right-radius: 1.6em;
|
||||
}
|
||||
&:nth-child(4n + 3) {
|
||||
--stage-color: var(--secondary);
|
||||
}
|
||||
&.done {
|
||||
--stage-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
&.current {
|
||||
--stage-color: var(--tertiary);
|
||||
color: white;
|
||||
}
|
||||
&.next {
|
||||
animation: 1s linear alternate infinite pulse-next;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background: var(--stat-box-bg);
|
||||
border-top: solid 2px var(--stat-box-bg);
|
||||
border-bottom: solid 2px var(--stat-box-bg);
|
||||
|
||||
&.left-done {
|
||||
--div-left-color: var(--primary);
|
||||
}
|
||||
&.left-current {
|
||||
--div-left-color: var(--tertiary);
|
||||
}
|
||||
&.left-blank, &.left-next {
|
||||
&:nth-child(4n + 0) {
|
||||
--div-left-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.left-next {
|
||||
animation: 1s linear alternate infinite pulse-next-top;
|
||||
}
|
||||
&.right-done {
|
||||
--div-right-color: var(--primary);
|
||||
}
|
||||
&.right-current {
|
||||
--div-right-color: var(--tertiary);
|
||||
}
|
||||
&.right-blank, &.right-next {
|
||||
&:nth-child(4n + 2) {
|
||||
--div-right-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
&.right-next {
|
||||
animation: 1s linear alternate infinite pulse-next-bottom;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
transform: skew(160deg) translate(58%);
|
||||
background: var(--div-right-color);
|
||||
}
|
||||
&::before {
|
||||
transform: skew(160deg) translate(-58%);
|
||||
background: var(--div-left-color);
|
||||
}
|
||||
|
||||
width: clamp(5px, 2.5vw, 15px);
|
||||
}
|
||||
|
||||
&.transitions {
|
||||
.stage, .divider, .divider::before, .divider::after {
|
||||
transition: color 500ms, border-color 500ms, background-color 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-next {
|
||||
to {
|
||||
border-color: var(--tertiary);
|
||||
text-shadow: 0 0 0.8em var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-next-top {
|
||||
to {
|
||||
border-top-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-next-bottom {
|
||||
to {
|
||||
border-bottom-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
72
frontend/src/app/components/tracker/tracker-bar.component.ts
Normal file
72
frontend/src/app/components/tracker/tracker-bar.component.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
|
||||
export type TrackerStage = 'waiting' | 'pending' | 'soon' | 'next' | 'confirmed';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tracker-bar',
|
||||
templateUrl: './tracker-bar.component.html',
|
||||
styleUrls: ['./tracker-bar.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class TrackerBarComponent implements OnInit, OnChanges {
|
||||
@Input() stage: TrackerStage = 'waiting';
|
||||
|
||||
transitionsEnabled: boolean = false;
|
||||
|
||||
stages = {
|
||||
waiting: {
|
||||
state: 'blank',
|
||||
},
|
||||
pending: {
|
||||
state: 'blank',
|
||||
},
|
||||
soon: {
|
||||
state: 'blank',
|
||||
},
|
||||
next: {
|
||||
state: 'blank',
|
||||
},
|
||||
confirmed: {
|
||||
state: 'blank',
|
||||
},
|
||||
};
|
||||
stageOrder: TrackerStage[] = ['waiting', 'pending', 'soon', 'next', 'confirmed'];
|
||||
|
||||
constructor (
|
||||
private cd: ChangeDetectorRef,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.setStage();
|
||||
setTimeout(() => {
|
||||
this.transitionsEnabled = true;
|
||||
}, 100)
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
if (changes.stage) {
|
||||
this.setStage();
|
||||
}
|
||||
}
|
||||
|
||||
setStage() {
|
||||
let matched = 0;
|
||||
for (let stage of this.stageOrder) {
|
||||
if (stage === this.stage) {
|
||||
this.stages[stage].state = 'current';
|
||||
matched = 1;
|
||||
} else {
|
||||
if (matched > 1) {
|
||||
this.stages[stage].state = 'blank';
|
||||
} else if (matched) {
|
||||
this.stages[stage].state = 'next';
|
||||
matched++;
|
||||
} else {
|
||||
this.stages[stage].state = 'done';
|
||||
}
|
||||
}
|
||||
}
|
||||
this.stages = this.stages;
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
}
|
||||
106
frontend/src/app/components/tracker/tracker.component.html
Normal file
106
frontend/src/app/components/tracker/tracker.component.html
Normal file
@ -0,0 +1,106 @@
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile-container">
|
||||
<div class="panel">
|
||||
<div class="field">
|
||||
<div class="label" i18n="shared.transaction">Transaction</div>
|
||||
<div class="value">
|
||||
<app-truncate [text]="txId" [lastChars]="12" [link]="['/tx/' | relativeUrl, txId]">
|
||||
<app-clipboard [text]="txId"></app-clipboard>
|
||||
</app-truncate>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockchain-wrapper" [style]="{ height: blockchainHeight * 1.16 + 'px' }">
|
||||
<app-clockchain [height]="blockchainHeight" [width]="blockchainWidth" mode="none"></app-clockchain>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="tracker-bar">
|
||||
<app-tracker-bar [stage]="trackerStage"></app-tracker-bar>
|
||||
</div>
|
||||
<div class="explain">
|
||||
<div class="field">
|
||||
@switch (trackerStage) {
|
||||
@case ('waiting') {
|
||||
<span i18n="tracker.explain.waiting">Waiting for your transaction to appear in the mempool</span>
|
||||
}
|
||||
@case ('pending') {
|
||||
<span i18n="tracker.explain.pending">Your transaction is in the mempool, but it will not be confirmed for some time.</span>
|
||||
}
|
||||
@case ('soon') {
|
||||
<span i18n="tracker.explain.soon">Your transaction is near the top of the mempool, and is expected to confirm soon.</span>
|
||||
}
|
||||
@case ('next') {
|
||||
<span i18n="tracker.explain.next-block">Your transaction is expected to confirm in the next block</span>
|
||||
}
|
||||
@case ('confirmed') {
|
||||
<span i18n="tracker.explain.confirmed">Your transaction is confirmed!</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
@if (tx && !tx.status?.confirmed && mempoolPosition) {
|
||||
<div class="field">
|
||||
<div class="label" i18n="transaction.eta|Transaction ETA">ETA</div>
|
||||
<div class="value">
|
||||
<span class="justify-content-end d-flex align-items-center">
|
||||
@if (mempoolPosition?.block >= 7) {
|
||||
<span i18n="transaction.eta.in-several-hours|Transaction ETA in several hours or more">In several hours (or more)</span>
|
||||
} @else {
|
||||
<app-time kind="until" *ngIf="(da$ | async) as da;" [time]="da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true"></app-time>
|
||||
}
|
||||
@if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) {
|
||||
<a [href]="'/services/accelerator/accelerate?txid=' + tx.txid" class="btn btn-sm accelerate btn-small-height" i18n="transaction.accelerate|Accelerate button label" (click)="onAccelerateClicked()">Accelerate</a>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
} @else if (tx && tx.status?.confirmed) {
|
||||
<div class="field">
|
||||
<div class="label" i18n="transaction.block-height">Block height</div>
|
||||
<div class="value">
|
||||
<span class="justify-content-end d-flex align-items-center">
|
||||
<a [routerLink]="['/block/' | relativeUrl, tx.status?.block_height]" class="block-link">{{ tx.status?.block_height }}</a>
|
||||
<div class="confirmations">
|
||||
<app-confirmations
|
||||
*ngIf="tx"
|
||||
[chainTip]="latestBlock?.height"
|
||||
[height]="tx?.status?.block_height"
|
||||
></app-confirmations>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-panel">
|
||||
@if (showAccelerationSummary) {
|
||||
<app-accelerate-checkout *ngIf="(da$ | async) as da;" [tx]="tx" [eta]="mempoolPosition?.block >= 7 ? null : da.adjustedTimeAvg * (mempoolPosition.block + 1) + now + da.timeOffset" (close)="showAccelerationSummary = false"></app-accelerate-checkout>
|
||||
} @else {
|
||||
<div class="progress-icon">
|
||||
@switch (trackerStage) {
|
||||
@case ('waiting') {
|
||||
<div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
|
||||
}
|
||||
@case ('pending') {
|
||||
<fa-icon [icon]="['fas', 'hourglass-start']" [fixedWidth]="true"></fa-icon>
|
||||
}
|
||||
@case ('soon') {
|
||||
<fa-icon [icon]="['fas', 'hourglass-half']" [fixedWidth]="true"></fa-icon>
|
||||
}
|
||||
@case ('next') {
|
||||
<fa-icon [icon]="['fas', 'hourglass-end']" [fixedWidth]="true"></fa-icon>
|
||||
}
|
||||
@case ('confirmed') {
|
||||
<fa-icon [icon]="['fas', 'circle-check']" [fixedWidth]="true"></fa-icon>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="footer-link" [routerLink]="['/tx' | relativeUrl, tx?.txid]">
|
||||
<span>See more details <fa-icon [icon]="['fas', 'arrow-alt-circle-right']"></fa-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
104
frontend/src/app/components/tracker/tracker.component.scss
Normal file
104
frontend/src/app/components/tracker/tracker.component.scss
Normal file
@ -0,0 +1,104 @@
|
||||
.mobile-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mobile-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 600px;
|
||||
max-height: 1000px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blockchain-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 1em;
|
||||
|
||||
&:nth-child(even) {
|
||||
background: var(--stat-box-bg);
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
.value {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.tracker-bar {
|
||||
padding: 1em 0.5em 0;
|
||||
}
|
||||
|
||||
.accelerate {
|
||||
display: flex !important;
|
||||
align-self: auto;
|
||||
margin-left: 1em;
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.confirmations {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.accelerateFullSize {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem 0.25rem;
|
||||
background-color: #653b9c;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.progress-icon {
|
||||
font-size: clamp(50px, 30vw, 200px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
697
frontend/src/app/components/tracker/tracker.component.ts
Normal file
697
frontend/src/app/components/tracker/tracker.component.ts
Normal file
@ -0,0 +1,697 @@
|
||||
import { Component, OnInit, OnDestroy, HostListener, Inject, ChangeDetectorRef, ChangeDetectionStrategy, NgZone } from '@angular/core';
|
||||
import { ElectrsApiService } from '../../services/electrs-api.service';
|
||||
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
|
||||
import {
|
||||
switchMap,
|
||||
filter,
|
||||
catchError,
|
||||
retryWhen,
|
||||
delay,
|
||||
mergeMap,
|
||||
tap,
|
||||
map
|
||||
} from 'rxjs/operators';
|
||||
import { Transaction } from '../../interfaces/electrs.interface';
|
||||
import { of, merge, Subscription, Observable, Subject, throwError, combineLatest } from 'rxjs';
|
||||
import { StateService } from '../../services/state.service';
|
||||
import { CacheService } from '../../services/cache.service';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { AudioService } from '../../services/audio.service';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
import { SeoService } from '../../services/seo.service';
|
||||
import { StorageService } from '../../services/storage.service';
|
||||
import { seoDescriptionNetwork } from '../../shared/common.utils';
|
||||
import { Filter } from '../../shared/filters.utils';
|
||||
import { BlockExtended, CpfpInfo, RbfTree, MempoolPosition, DifficultyAdjustment, Acceleration } from '../../interfaces/node-api.interface';
|
||||
import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
|
||||
import { PriceService } from '../../services/price.service';
|
||||
import { ServicesApiServices } from '../../services/services-api.service';
|
||||
import { EnterpriseService } from '../../services/enterprise.service';
|
||||
import { ZONE_SERVICE } from '../../injection-tokens';
|
||||
import { TrackerStage } from './tracker-bar.component';
|
||||
|
||||
interface Pool {
|
||||
id: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface AuditStatus {
|
||||
seen?: boolean;
|
||||
expected?: boolean;
|
||||
added?: boolean;
|
||||
prioritized?: boolean;
|
||||
delayed?: number;
|
||||
accelerated?: boolean;
|
||||
conflict?: boolean;
|
||||
coinbase?: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-tracker',
|
||||
templateUrl: './tracker.component.html',
|
||||
styleUrls: ['./tracker.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class TrackerComponent implements OnInit, OnDestroy {
|
||||
network = '';
|
||||
tx: Transaction;
|
||||
txId: string;
|
||||
txInBlockIndex: number;
|
||||
mempoolPosition: MempoolPosition;
|
||||
isLoadingTx = true;
|
||||
error: any = undefined;
|
||||
loadingCachedTx = false;
|
||||
waitingForTransaction = false;
|
||||
latestBlock: BlockExtended;
|
||||
transactionTime = -1;
|
||||
subscription: Subscription;
|
||||
fetchCpfpSubscription: Subscription;
|
||||
fetchRbfSubscription: Subscription;
|
||||
fetchCachedTxSubscription: Subscription;
|
||||
fetchAccelerationSubscription: Subscription;
|
||||
txReplacedSubscription: Subscription;
|
||||
mempoolPositionSubscription: Subscription;
|
||||
mempoolBlocksSubscription: Subscription;
|
||||
blocksSubscription: Subscription;
|
||||
miningSubscription: Subscription;
|
||||
currencyChangeSubscription: Subscription;
|
||||
rbfTransaction: undefined | Transaction;
|
||||
replaced: boolean = false;
|
||||
rbfReplaces: string[];
|
||||
rbfInfo: RbfTree;
|
||||
cpfpInfo: CpfpInfo | null;
|
||||
hasCpfp: boolean = false;
|
||||
accelerationInfo: Acceleration | null = null;
|
||||
sigops: number | null;
|
||||
adjustedVsize: number | null;
|
||||
pool: Pool | null;
|
||||
auditStatus: AuditStatus | null;
|
||||
isAcceleration: boolean = false;
|
||||
filters: Filter[] = [];
|
||||
showCpfpDetails = false;
|
||||
fetchCpfp$ = new Subject<string>();
|
||||
fetchRbfHistory$ = new Subject<string>();
|
||||
fetchCachedTx$ = new Subject<string>();
|
||||
fetchAcceleration$ = new Subject<string>();
|
||||
fetchMiningInfo$ = new Subject<{ hash: string, height: number, txid: string }>();
|
||||
isCached: boolean = false;
|
||||
now = Date.now();
|
||||
da$: Observable<DifficultyAdjustment>;
|
||||
isMobile: boolean;
|
||||
paymentType: 'bitcoin' | 'cashapp' = 'bitcoin';
|
||||
|
||||
trackerStage: TrackerStage = 'waiting';
|
||||
|
||||
blockchainHeight: number = 100;
|
||||
blockchainWidth: number = 600;
|
||||
|
||||
hasEffectiveFeeRate: boolean;
|
||||
accelerateCtaType: 'alert' | 'button' = 'button';
|
||||
acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||
accelerationEligible: boolean = false;
|
||||
showAccelerationSummary = false;
|
||||
scrollIntoAccelPreview = false;
|
||||
auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private electrsApiService: ElectrsApiService,
|
||||
public stateService: StateService,
|
||||
private cacheService: CacheService,
|
||||
private websocketService: WebsocketService,
|
||||
private audioService: AudioService,
|
||||
private apiService: ApiService,
|
||||
private servicesApiService: ServicesApiServices,
|
||||
private seoService: SeoService,
|
||||
private priceService: PriceService,
|
||||
private enterpriseService: EnterpriseService,
|
||||
private cd: ChangeDetectorRef,
|
||||
private zone: NgZone,
|
||||
@Inject(ZONE_SERVICE) private zoneService: any,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.onResize();
|
||||
|
||||
window['setStage'] = ((stage: TrackerStage) => {
|
||||
this.zone.run(() => {
|
||||
this.trackerStage = stage;
|
||||
this.cd.markForCheck();
|
||||
});
|
||||
}).bind(this);
|
||||
|
||||
this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||
|
||||
if (this.acceleratorAvailable && this.stateService.ref === 'https://cash.app/') {
|
||||
this.paymentType = 'cashapp';
|
||||
}
|
||||
|
||||
this.enterpriseService.page();
|
||||
|
||||
this.websocketService.want(['blocks', 'mempool-blocks']);
|
||||
this.stateService.networkChanged$.subscribe(
|
||||
(network) => {
|
||||
this.network = network;
|
||||
this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||
}
|
||||
);
|
||||
|
||||
this.da$ = this.stateService.difficultyAdjustment$.pipe(
|
||||
tap(() => {
|
||||
this.now = Date.now();
|
||||
})
|
||||
);
|
||||
|
||||
this.blocksSubscription = this.stateService.blocks$.subscribe((blocks) => {
|
||||
this.latestBlock = blocks[0];
|
||||
});
|
||||
|
||||
this.fetchCpfpSubscription = this.fetchCpfp$
|
||||
.pipe(
|
||||
switchMap((txId) =>
|
||||
this.apiService
|
||||
.getCpfpinfo$(txId)
|
||||
.pipe(retryWhen((errors) => errors.pipe(
|
||||
mergeMap((error) => {
|
||||
if (!this.tx?.status || this.tx.status.confirmed) {
|
||||
return throwError(error);
|
||||
} else {
|
||||
return of(null);
|
||||
}
|
||||
}),
|
||||
delay(2000)
|
||||
)),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
)
|
||||
),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
)
|
||||
.subscribe((cpfpInfo) => {
|
||||
this.setCpfpInfo(cpfpInfo);
|
||||
});
|
||||
|
||||
this.fetchRbfSubscription = this.fetchRbfHistory$
|
||||
.pipe(
|
||||
switchMap((txId) =>
|
||||
this.apiService
|
||||
.getRbfHistory$(txId)
|
||||
),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
).subscribe((rbfResponse) => {
|
||||
this.rbfInfo = rbfResponse?.replacements;
|
||||
this.rbfReplaces = rbfResponse?.replaces || null;
|
||||
});
|
||||
|
||||
this.fetchCachedTxSubscription = this.fetchCachedTx$
|
||||
.pipe(
|
||||
tap(() => {
|
||||
this.loadingCachedTx = true;
|
||||
}),
|
||||
switchMap((txId) =>
|
||||
this.apiService
|
||||
.getRbfCachedTx$(txId)
|
||||
),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
).subscribe((tx) => {
|
||||
this.loadingCachedTx = false;
|
||||
if (!tx) {
|
||||
this.seoService.logSoft404();
|
||||
return;
|
||||
}
|
||||
this.seoService.clearSoft404();
|
||||
|
||||
if (!this.tx) {
|
||||
this.tx = tx;
|
||||
this.isCached = true;
|
||||
if (tx.fee === undefined) {
|
||||
this.tx.fee = 0;
|
||||
}
|
||||
this.tx.feePerVsize = tx.fee / (tx.weight / 4);
|
||||
this.isLoadingTx = false;
|
||||
this.error = undefined;
|
||||
this.waitingForTransaction = false;
|
||||
this.transactionTime = tx.firstSeen || 0;
|
||||
|
||||
this.fetchRbfHistory$.next(this.tx.txid);
|
||||
}
|
||||
});
|
||||
|
||||
this.fetchAccelerationSubscription = this.fetchAcceleration$.pipe(
|
||||
filter(() => this.stateService.env.ACCELERATOR === true),
|
||||
tap(() => {
|
||||
this.accelerationInfo = null;
|
||||
}),
|
||||
switchMap((blockHash: string) => {
|
||||
return this.servicesApiService.getAccelerationHistory$({ blockHash });
|
||||
}),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
).subscribe((accelerationHistory) => {
|
||||
for (const acceleration of accelerationHistory) {
|
||||
if (acceleration.txid === this.txId && (acceleration.status === 'completed' || acceleration.status === 'completed_provisional')) {
|
||||
const boostCost = acceleration.boostCost || (acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
|
||||
acceleration.acceleratedFeeRate = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + boostCost) / acceleration.effectiveVsize;
|
||||
acceleration.boost = boostCost;
|
||||
|
||||
this.accelerationInfo = acceleration;
|
||||
this.setIsAccelerated();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.miningSubscription = this.fetchMiningInfo$.pipe(
|
||||
filter((target) => target.txid === this.txId),
|
||||
tap(() => {
|
||||
this.pool = null;
|
||||
this.auditStatus = null;
|
||||
}),
|
||||
switchMap(({ hash, height, txid }) => {
|
||||
const foundBlock = this.cacheService.getCachedBlock(height) || null;
|
||||
const auditAvailable = this.isAuditAvailable(height);
|
||||
const isCoinbase = this.tx.vin.some(v => v.is_coinbase);
|
||||
const fetchAudit = auditAvailable && !isCoinbase;
|
||||
return combineLatest([
|
||||
foundBlock ? of(foundBlock.extras.pool) : this.apiService.getBlock$(hash).pipe(
|
||||
map(block => {
|
||||
return block.extras.pool;
|
||||
}),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
),
|
||||
fetchAudit ? this.apiService.getBlockAudit$(hash).pipe(
|
||||
map(audit => {
|
||||
const isAdded = audit.addedTxs.includes(txid);
|
||||
const isPrioritized = audit.prioritizedTxs.includes(txid);
|
||||
const isAccelerated = audit.acceleratedTxs.includes(txid);
|
||||
const isConflict = audit.fullrbfTxs.includes(txid);
|
||||
const isExpected = audit.template.some(tx => tx.txid === txid);
|
||||
return {
|
||||
seen: isExpected || isPrioritized || isAccelerated,
|
||||
expected: isExpected,
|
||||
added: isAdded,
|
||||
prioritized: isPrioritized,
|
||||
conflict: isConflict,
|
||||
accelerated: isAccelerated,
|
||||
};
|
||||
}),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
) : of(isCoinbase ? { coinbase: true } : null)
|
||||
]);
|
||||
}),
|
||||
catchError(() => {
|
||||
return of(null);
|
||||
})
|
||||
).subscribe(([pool, auditStatus]) => {
|
||||
this.pool = pool;
|
||||
this.auditStatus = auditStatus;
|
||||
});
|
||||
|
||||
this.mempoolPositionSubscription = this.stateService.mempoolTxPosition$.subscribe(txPosition => {
|
||||
this.now = Date.now();
|
||||
if (txPosition && txPosition.txid === this.txId && txPosition.position) {
|
||||
this.mempoolPosition = txPosition.position;
|
||||
if (this.tx && !this.tx.status.confirmed) {
|
||||
this.stateService.markBlock$.next({
|
||||
txid: txPosition.txid,
|
||||
mempoolPosition: this.mempoolPosition
|
||||
});
|
||||
this.txInBlockIndex = this.mempoolPosition.block;
|
||||
|
||||
if (txPosition.cpfp !== undefined) {
|
||||
this.setCpfpInfo(txPosition.cpfp);
|
||||
}
|
||||
|
||||
if (txPosition.position?.block === 0) {
|
||||
this.trackerStage = 'next';
|
||||
} else if (txPosition.position?.block < 3){
|
||||
this.trackerStage = 'soon';
|
||||
} else {
|
||||
this.trackerStage = 'pending';
|
||||
}
|
||||
if (txPosition.position?.block > 0 && this.tx.weight < 4000) {
|
||||
this.accelerationEligible = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.mempoolPosition = null;
|
||||
}
|
||||
});
|
||||
|
||||
this.subscription = this.zoneService.wrapObservable(this.route.paramMap
|
||||
.pipe(
|
||||
switchMap((params: ParamMap) => {
|
||||
const urlMatch = (params.get('id') || '').split(':');
|
||||
if (urlMatch.length === 2 && urlMatch[1].length === 64) {
|
||||
const vin = parseInt(urlMatch[0], 10);
|
||||
this.txId = urlMatch[1];
|
||||
} else {
|
||||
this.txId = urlMatch[0];
|
||||
}
|
||||
this.seoService.setTitle(
|
||||
$localize`:@@bisq.transaction.browser-title:Transaction: ${this.txId}:INTERPOLATION:`
|
||||
);
|
||||
const network = this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet' ? 'Liquid' : 'Bitcoin';
|
||||
const seoDescription = seoDescriptionNetwork(this.stateService.network);
|
||||
this.seoService.setDescription($localize`:@@meta.description.bitcoin.transaction:Get real-time status, addresses, fees, script info, and more for ${network}${seoDescription} transaction with txid ${this.txId}.`);
|
||||
this.resetTransaction();
|
||||
return merge(
|
||||
of(true),
|
||||
this.stateService.connectionState$.pipe(
|
||||
filter(
|
||||
(state) => state === 2 && this.tx && !this.tx.status?.confirmed
|
||||
)
|
||||
)
|
||||
);
|
||||
}),
|
||||
switchMap(() => {
|
||||
let transactionObservable$: Observable<Transaction>;
|
||||
const cached = this.cacheService.getTxFromCache(this.txId);
|
||||
if (cached && cached.fee !== -1) {
|
||||
transactionObservable$ = of(cached);
|
||||
} else {
|
||||
transactionObservable$ = this.electrsApiService
|
||||
.getTransaction$(this.txId)
|
||||
.pipe(
|
||||
catchError(this.handleLoadElectrsTransactionError.bind(this))
|
||||
);
|
||||
}
|
||||
return merge(
|
||||
transactionObservable$,
|
||||
this.stateService.mempoolTransactions$
|
||||
);
|
||||
}),
|
||||
))
|
||||
.subscribe((tx: Transaction) => {
|
||||
if (!tx) {
|
||||
this.fetchCachedTx$.next(this.txId);
|
||||
this.seoService.logSoft404();
|
||||
return;
|
||||
}
|
||||
this.seoService.clearSoft404();
|
||||
|
||||
this.tx = tx;
|
||||
this.isCached = false;
|
||||
if (tx.fee === undefined) {
|
||||
this.tx.fee = 0;
|
||||
}
|
||||
if (this.tx.sigops != null) {
|
||||
this.sigops = this.tx.sigops;
|
||||
this.adjustedVsize = Math.max(this.tx.weight / 4, this.sigops * 5);
|
||||
}
|
||||
this.tx.feePerVsize = tx.fee / (tx.weight / 4);
|
||||
this.isLoadingTx = false;
|
||||
this.error = undefined;
|
||||
this.loadingCachedTx = false;
|
||||
this.waitingForTransaction = false;
|
||||
this.websocketService.startTrackTransaction(tx.txid);
|
||||
|
||||
if (!tx.status?.confirmed) {
|
||||
this.trackerStage = 'pending';
|
||||
if (tx.firstSeen) {
|
||||
this.transactionTime = tx.firstSeen;
|
||||
} else {
|
||||
this.getTransactionTime();
|
||||
}
|
||||
} else {
|
||||
this.trackerStage = 'confirmed';
|
||||
this.fetchAcceleration$.next(tx.status.block_hash);
|
||||
this.fetchMiningInfo$.next({ hash: tx.status.block_hash, height: tx.status.block_height, txid: tx.txid });
|
||||
this.transactionTime = 0;
|
||||
}
|
||||
|
||||
if (this.tx?.status?.confirmed) {
|
||||
this.stateService.markBlock$.next({
|
||||
blockHeight: tx.status.block_height,
|
||||
});
|
||||
this.fetchCpfp$.next(this.tx.txid);
|
||||
} else {
|
||||
if (tx.cpfpChecked) {
|
||||
this.stateService.markBlock$.next({
|
||||
txid: tx.txid,
|
||||
txFeePerVSize: tx.effectiveFeePerVsize,
|
||||
mempoolPosition: this.mempoolPosition,
|
||||
});
|
||||
this.setCpfpInfo({
|
||||
ancestors: tx.ancestors,
|
||||
bestDescendant: tx.bestDescendant,
|
||||
});
|
||||
const hasRelatives = !!(tx.ancestors?.length || tx.bestDescendant);
|
||||
this.hasEffectiveFeeRate = hasRelatives || (tx.effectiveFeePerVsize && (Math.abs(tx.effectiveFeePerVsize - tx.feePerVsize) > 0.01));
|
||||
} else {
|
||||
this.fetchCpfp$.next(this.tx.txid);
|
||||
}
|
||||
}
|
||||
this.fetchRbfHistory$.next(this.tx.txid);
|
||||
this.currencyChangeSubscription?.unsubscribe();
|
||||
this.currencyChangeSubscription = this.stateService.fiatCurrency$.pipe(
|
||||
switchMap((currency) => {
|
||||
return tx.status.block_time ? this.priceService.getBlockPrice$(tx.status.block_time, true, currency).pipe(
|
||||
tap((price) => tx['price'] = price),
|
||||
) : of(undefined);
|
||||
})
|
||||
).subscribe();
|
||||
|
||||
this.cd.detectChanges();
|
||||
},
|
||||
(error) => {
|
||||
this.error = error;
|
||||
this.seoService.logSoft404();
|
||||
this.isLoadingTx = false;
|
||||
}
|
||||
);
|
||||
|
||||
this.stateService.txConfirmed$.subscribe(([txConfirmed, block]) => {
|
||||
if (txConfirmed && this.tx && !this.tx.status.confirmed && txConfirmed === this.tx.txid) {
|
||||
this.tx.status = {
|
||||
confirmed: true,
|
||||
block_height: block.height,
|
||||
block_hash: block.id,
|
||||
block_time: block.timestamp,
|
||||
};
|
||||
this.trackerStage = 'confirmed';
|
||||
this.stateService.markBlock$.next({ blockHeight: block.height });
|
||||
if (this.tx.acceleration || (this.accelerationInfo && ['accelerating', 'completed_provisional', 'completed'].includes(this.accelerationInfo.status))) {
|
||||
this.audioService.playSound('wind-chimes-harp-ascend');
|
||||
} else {
|
||||
this.audioService.playSound('magic');
|
||||
}
|
||||
this.fetchAcceleration$.next(block.id);
|
||||
this.fetchMiningInfo$.next({ hash: block.id, height: block.height, txid: this.tx.txid });
|
||||
}
|
||||
});
|
||||
|
||||
this.txReplacedSubscription = this.stateService.txReplaced$.subscribe((rbfTransaction) => {
|
||||
if (!this.tx) {
|
||||
this.error = new Error();
|
||||
this.loadingCachedTx = false;
|
||||
this.waitingForTransaction = false;
|
||||
}
|
||||
this.rbfTransaction = rbfTransaction;
|
||||
this.replaced = true;
|
||||
this.stateService.markBlock$.next({});
|
||||
|
||||
if (rbfTransaction && !this.tx) {
|
||||
this.fetchCachedTx$.next(this.txId);
|
||||
}
|
||||
});
|
||||
|
||||
this.mempoolBlocksSubscription = this.stateService.mempoolBlocks$.subscribe((mempoolBlocks) => {
|
||||
this.now = Date.now();
|
||||
|
||||
if (!this.tx || this.mempoolPosition) {
|
||||
return;
|
||||
}
|
||||
|
||||
const txFeePerVSize =
|
||||
this.tx.effectiveFeePerVsize || this.tx.fee / (this.tx.weight / 4);
|
||||
|
||||
let found = false;
|
||||
this.txInBlockIndex = 0;
|
||||
for (const block of mempoolBlocks) {
|
||||
for (let i = 0; i < block.feeRange.length - 1 && !found; i++) {
|
||||
if (
|
||||
txFeePerVSize <= block.feeRange[i + 1] &&
|
||||
txFeePerVSize >= block.feeRange[i]
|
||||
) {
|
||||
this.txInBlockIndex = mempoolBlocks.indexOf(block);
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!found && mempoolBlocks.length && txFeePerVSize < mempoolBlocks[mempoolBlocks.length - 1].feeRange[0]) {
|
||||
this.txInBlockIndex = 7;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleLoadElectrsTransactionError(error: any): Observable<any> {
|
||||
if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) {
|
||||
this.websocketService.startMultiTrackTransaction(this.txId);
|
||||
this.waitingForTransaction = true;
|
||||
}
|
||||
this.error = error;
|
||||
this.seoService.logSoft404();
|
||||
this.isLoadingTx = false;
|
||||
return of(false);
|
||||
}
|
||||
|
||||
getTransactionTime() {
|
||||
this.apiService
|
||||
.getTransactionTimes$([this.tx.txid])
|
||||
.subscribe((transactionTimes) => {
|
||||
if (transactionTimes?.length) {
|
||||
this.transactionTime = transactionTimes[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setCpfpInfo(cpfpInfo: CpfpInfo): void {
|
||||
if (!cpfpInfo || !this.tx) {
|
||||
this.cpfpInfo = null;
|
||||
this.hasCpfp = false;
|
||||
this.hasEffectiveFeeRate = false;
|
||||
return;
|
||||
}
|
||||
// merge ancestors/descendants
|
||||
const relatives = [...(cpfpInfo.ancestors || []), ...(cpfpInfo.descendants || [])];
|
||||
if (cpfpInfo.bestDescendant && !cpfpInfo.descendants?.length) {
|
||||
relatives.push(cpfpInfo.bestDescendant);
|
||||
}
|
||||
const hasRelatives = !!relatives.length;
|
||||
if (!cpfpInfo.effectiveFeePerVsize && hasRelatives) {
|
||||
const totalWeight =
|
||||
this.tx.weight +
|
||||
relatives.reduce((prev, val) => prev + val.weight, 0);
|
||||
const totalFees =
|
||||
this.tx.fee +
|
||||
relatives.reduce((prev, val) => prev + val.fee, 0);
|
||||
this.tx.effectiveFeePerVsize = totalFees / (totalWeight / 4);
|
||||
} else {
|
||||
this.tx.effectiveFeePerVsize = cpfpInfo.effectiveFeePerVsize;
|
||||
}
|
||||
if (cpfpInfo.acceleration) {
|
||||
this.tx.acceleration = cpfpInfo.acceleration;
|
||||
}
|
||||
|
||||
this.cpfpInfo = cpfpInfo;
|
||||
if (this.cpfpInfo.adjustedVsize && this.cpfpInfo.sigops != null) {
|
||||
this.sigops = this.cpfpInfo.sigops;
|
||||
this.adjustedVsize = this.cpfpInfo.adjustedVsize;
|
||||
}
|
||||
this.hasCpfp =!!(this.cpfpInfo && (this.cpfpInfo.bestDescendant || this.cpfpInfo.descendants?.length || this.cpfpInfo.ancestors?.length));
|
||||
this.hasEffectiveFeeRate = hasRelatives || (this.tx.effectiveFeePerVsize && (Math.abs(this.tx.effectiveFeePerVsize - this.tx.feePerVsize) > 0.01));
|
||||
}
|
||||
|
||||
isAuditAvailable(blockHeight: number): boolean {
|
||||
if (!this.auditEnabled) {
|
||||
return false;
|
||||
}
|
||||
switch (this.stateService.network) {
|
||||
case 'testnet':
|
||||
if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
case 'signet':
|
||||
if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
|
||||
return false;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
setIsAccelerated(initialState: boolean = false) {
|
||||
this.isAcceleration = (this.tx.acceleration || (this.accelerationInfo && this.pool && this.accelerationInfo.pools.some(pool => (pool === this.pool.id || pool?.['pool_unique_id'] === this.pool.id))));
|
||||
}
|
||||
|
||||
dismissAccelAlert(): void {
|
||||
this.accelerateCtaType = 'button';
|
||||
}
|
||||
|
||||
onAccelerateClicked() {
|
||||
if (!this.txId) {
|
||||
return;
|
||||
}
|
||||
this.enterpriseService.goal(8);
|
||||
this.showAccelerationSummary = true && this.acceleratorAvailable;
|
||||
this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
|
||||
return false;
|
||||
}
|
||||
|
||||
resetTransaction() {
|
||||
this.error = undefined;
|
||||
this.tx = null;
|
||||
this.waitingForTransaction = false;
|
||||
this.isLoadingTx = true;
|
||||
this.rbfTransaction = undefined;
|
||||
this.replaced = false;
|
||||
this.transactionTime = -1;
|
||||
this.cpfpInfo = null;
|
||||
this.adjustedVsize = null;
|
||||
this.sigops = null;
|
||||
this.hasEffectiveFeeRate = false;
|
||||
this.rbfInfo = null;
|
||||
this.rbfReplaces = [];
|
||||
this.filters = [];
|
||||
this.showCpfpDetails = false;
|
||||
this.accelerationInfo = null;
|
||||
this.txInBlockIndex = null;
|
||||
this.mempoolPosition = null;
|
||||
this.pool = null;
|
||||
this.auditStatus = null;
|
||||
this.accelerationEligible = false;
|
||||
this.trackerStage = 'waiting';
|
||||
document.body.scrollTo(0, 0);
|
||||
this.leaveTransaction();
|
||||
}
|
||||
|
||||
leaveTransaction() {
|
||||
this.websocketService.stopTrackingTransaction();
|
||||
this.stateService.markBlock$.next({});
|
||||
}
|
||||
|
||||
roundToOneDecimal(cpfpTx: any): number {
|
||||
return +(cpfpTx.fee / (cpfpTx.weight / 4)).toFixed(1);
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(): void {
|
||||
this.isMobile = window.innerWidth < 850;
|
||||
this.blockchainWidth = Math.min(600, window.innerWidth);
|
||||
this.blockchainHeight = this.blockchainWidth / 5;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.subscription.unsubscribe();
|
||||
this.fetchCpfpSubscription.unsubscribe();
|
||||
this.fetchRbfSubscription.unsubscribe();
|
||||
this.fetchCachedTxSubscription.unsubscribe();
|
||||
this.fetchAccelerationSubscription.unsubscribe();
|
||||
this.txReplacedSubscription.unsubscribe();
|
||||
this.mempoolBlocksSubscription.unsubscribe();
|
||||
this.mempoolPositionSubscription.unsubscribe();
|
||||
this.mempoolBlocksSubscription.unsubscribe();
|
||||
this.blocksSubscription.unsubscribe();
|
||||
this.miningSubscription?.unsubscribe();
|
||||
this.currencyChangeSubscription?.unsubscribe();
|
||||
this.leaveTransaction();
|
||||
}
|
||||
}
|
||||
@ -192,6 +192,10 @@ export class StateService {
|
||||
}
|
||||
});
|
||||
|
||||
if (this.ref === 'https://cash.app/' && window.innerWidth < 850 && window.location.pathname.startsWith('/tx/')) {
|
||||
this.router.navigate(['/tracker/' + window.location.pathname.slice(4)]);
|
||||
}
|
||||
|
||||
this.liveMempoolBlockTransactions$ = merge(
|
||||
this.mempoolBlockTransactions$.pipe(map(transactions => { return { transactions }; })),
|
||||
this.mempoolBlockDelta$.pipe(map(delta => { return { delta }; })),
|
||||
|
||||
@ -4,7 +4,7 @@ import { NgbCollapseModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstra
|
||||
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
|
||||
import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faHammer, faDatabase, faExchangeAlt, faInfoCircle,
|
||||
faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faClock, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown,
|
||||
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced } from '@fortawesome/free-solid-svg-icons';
|
||||
faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode, faArrowRightArrowLeft, faArrowsRotate, faCircleLeft, faFastForward, faWallet, faUserClock, faWrench, faUserFriends, faQuestionCircle, faHistory, faSignOutAlt, faKey, faSuitcase, faIdCardAlt, faNetworkWired, faUserCheck, faCircleCheck, faUserCircle, faCheck, faRocket, faScaleBalanced, faHourglassStart, faHourglassHalf, faHourglassEnd } from '@fortawesome/free-solid-svg-icons';
|
||||
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
|
||||
import { MenuComponent } from '../components/menu/menu.component';
|
||||
import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
|
||||
@ -50,6 +50,8 @@ import { BlockOverviewGraphComponent } from '../components/block-overview-graph/
|
||||
import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
|
||||
import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
|
||||
import { AddressGroupComponent } from '../components/address-group/address-group.component';
|
||||
import { TrackerComponent } from '../components/tracker/tracker.component';
|
||||
import { TrackerBarComponent } from '../components/tracker/tracker-bar.component';
|
||||
import { SearchFormComponent } from '../components/search-form/search-form.component';
|
||||
import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
|
||||
import { FooterComponent } from '../components/footer/footer.component';
|
||||
@ -96,6 +98,7 @@ import { MempoolErrorComponent } from './components/mempool-error/mempool-error.
|
||||
import { AccelerationsListComponent } from '../components/acceleration/accelerations-list/accelerations-list.component';
|
||||
import { PendingStatsComponent } from '../components/acceleration/pending-stats/pending-stats.component';
|
||||
import { AccelerationStatsComponent } from '../components/acceleration/acceleration-stats/acceleration-stats.component';
|
||||
import { AccelerateCheckout } from '../components/accelerate-checkout/accelerate-checkout.component';
|
||||
|
||||
import { BlockViewComponent } from '../components/block-view/block-view.component';
|
||||
import { EightBlocksComponent } from '../components/eight-blocks/eight-blocks.component';
|
||||
@ -156,6 +159,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
||||
BlockFiltersComponent,
|
||||
TransactionsListComponent,
|
||||
AddressGroupComponent,
|
||||
TrackerComponent,
|
||||
TrackerBarComponent,
|
||||
SearchFormComponent,
|
||||
AddressLabelsComponent,
|
||||
FooterComponent,
|
||||
@ -212,6 +217,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
||||
MempoolErrorComponent,
|
||||
AccelerationsListComponent,
|
||||
AccelerationStatsComponent,
|
||||
AccelerateCheckout,
|
||||
PendingStatsComponent,
|
||||
HttpErrorComponent,
|
||||
],
|
||||
@ -289,6 +295,8 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
||||
BlockFiltersComponent,
|
||||
TransactionsListComponent,
|
||||
AddressGroupComponent,
|
||||
TrackerComponent,
|
||||
TrackerBarComponent,
|
||||
SearchFormComponent,
|
||||
AddressLabelsComponent,
|
||||
FooterComponent,
|
||||
@ -334,6 +342,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
||||
MempoolErrorComponent,
|
||||
AccelerationsListComponent,
|
||||
AccelerationStatsComponent,
|
||||
AccelerateCheckout,
|
||||
PendingStatsComponent,
|
||||
HttpErrorComponent,
|
||||
|
||||
@ -407,5 +416,8 @@ export class SharedModule {
|
||||
library.addIcons(faCheck);
|
||||
library.addIcons(faRocket);
|
||||
library.addIcons(faScaleBalanced);
|
||||
library.addIcons(faHourglassStart);
|
||||
library.addIcons(faHourglassHalf);
|
||||
library.addIcons(faHourglassEnd);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<svg data-name="Layer 1" width="979.085" height="747.647" viewBox="0 0 734.315 560.74" xmlns="http://www.w3.org/2000/svg"><path style="fill:#7b61aa;fill-rule:evenodd;stroke-width:0" transform="translate(-68.202 -122.51)" d="m470.9 400.54 53.51 20.55-19.71 51.32 37.42 14.36 19.7-51.32 52.64 20.21 15.39-40.09-52.64-20.21 20.02-52.15-37.41-14.36L539.8 381l-53.51-20.55zm-47.17 235.11 53.73-19.96 19.14 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.85 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM83.14 479.9l53.73-19.96 19.15 51.53 37.57-13.95-19.14-51.53 52.85-19.64-14.95-40.25-52.86 19.63-19.45-52.36-37.57 13.95 19.45 52.37-53.73 19.95zM403 288.01l49.16-29.46 28.26 47.16 34.38-20.6-28.25-47.15 48.36-28.98-22.07-36.84-48.36 28.98-28.71-47.92-34.38 20.6 28.7 47.92-49.16 29.45zm-249.99-26.6 69.39-11.35 10.88 66.56 48.53-7.94-10.88-66.55 68.25-11.16-8.5-51.99-68.25 11.16-11.06-67.63-48.53 7.93 11.06 67.63-69.39 11.35zm169.87 173.4 40.47 9.7-9.3 38.8 28.29 6.78 9.3-38.8 39.8 9.53 7.26-30.31-39.8-9.54 9.45-39.43-28.29-6.78-9.45 39.43-40.46-9.69zm356.55 109.52 45.87-33 31.65 44 32.08-23.08-31.65-44 45.13-32.46-24.73-34.37-45.12 32.46-32.16-44.71-32.08 23.08 32.16 44.71-45.88 33zm-46.36 103.16 41.42-3.97 3.8 39.73 28.96-2.78-3.8-39.72 40.74-3.9-2.97-31.03-40.74 3.9-3.86-40.36-28.97 2.77 3.87 40.36-41.42 3.97z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
x
Reference in New Issue
Block a user