Mobile transaction tracker page
This commit is contained in:
Mononaut
parent
8df497e53d
commit
786ec7fff1
@ -7,6 +7,7 @@ import { MempoolBlockViewComponent } from './components/mempool-block-view/mempo
|
|||||||
import { ClockComponent } from './components/clock/clock.component';
|
import { ClockComponent } from './components/clock/clock.component';
|
||||||
import { StatusViewComponent } from './components/status-view/status-view.component';
|
import { StatusViewComponent } from './components/status-view/status-view.component';
|
||||||
import { AddressGroupComponent } from './components/address-group/address-group.component';
|
import { AddressGroupComponent } from './components/address-group/address-group.component';
|
||||||
|
import { TrackerComponent } from './components/tracker/tracker.component';
|
||||||
|
|
||||||
const browserWindow = window || {};
|
const browserWindow = window || {};
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
@ -105,6 +106,10 @@ let routes: Routes = [
|
|||||||
loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
|
loadChildren: () => import('./master-page.module').then(m => m.MasterPageModule),
|
||||||
data: { preload: true },
|
data: { preload: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'tracker/:id',
|
||||||
|
component: TrackerComponent,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'wallet',
|
path: 'wallet',
|
||||||
children: [],
|
children: [],
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div class="container-xl">
|
||||||
|
🍕
|
||||||
|
</div>
|
||||||
317
frontend/src/app/components/tracker/tracker.component.scss
Normal file
317
frontend/src/app/components/tracker/tracker.component.scss
Normal file
@ -0,0 +1,317 @@
|
|||||||
|
.adjust-btn-padding {
|
||||||
|
padding: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-buttons {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-block {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: baseline;
|
||||||
|
@media (min-width: 650px) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0rem;
|
||||||
|
margin-right: 15px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tx-link {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: baseline;
|
||||||
|
width: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-top: 8px;
|
||||||
|
@media (min-width: 651px) {
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-right: 1em;
|
||||||
|
top: 1px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
width: 100%;
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txid {
|
||||||
|
width: 200px;
|
||||||
|
min-width: 200px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-width {
|
||||||
|
width: 150px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
width: 175px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge.badge-accelerated {
|
||||||
|
background-color: #653b9c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-small-height {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-green {
|
||||||
|
color: #1a9436;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-red {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-xl {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row{
|
||||||
|
flex-direction: column;
|
||||||
|
@media (min-width: 850px) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box.hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
height: 0px;
|
||||||
|
padding-top: 0px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: #181b2d;
|
||||||
|
padding: 10px 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 1.25em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph-toggle {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.mobile-bottomcol {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-table td:first-child {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiat {
|
||||||
|
display: block;
|
||||||
|
@media (min-width: 768px){
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 15px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
tr td {
|
||||||
|
padding: 0.75rem 0.5rem;
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
padding: 0.75rem 0.75rem;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
text-align: right;
|
||||||
|
@media (min-width: 850px) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.wrap-cell {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.effective-fee-container {
|
||||||
|
display: block;
|
||||||
|
@media (min-width: 768px){
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
@media (max-width: 425px){
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.effective-fee-rating {
|
||||||
|
@media (max-width: 767px){
|
||||||
|
margin-right: 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
h2 {
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-info {
|
||||||
|
margin-top: 5px;
|
||||||
|
@media (min-width: 768px){
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.details-button, .flow-toggle, .accelerator-toggle {
|
||||||
|
margin-top: -5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
@media (min-width: 768px){
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-buttons {
|
||||||
|
flex-shrink: 1;
|
||||||
|
text-align: right;
|
||||||
|
.btn {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cpfp-details {
|
||||||
|
.txids {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.txids {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tx-list {
|
||||||
|
.alert-link {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-purple {
|
||||||
|
background-color: #5c3a88;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blinking block
|
||||||
|
@keyframes shadowyBackground {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0px 0px 20px rgba(#eba814, 1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
box-shadow: 0px 0px 20px rgba(#eba814, .3);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0px 0px 20px rgba(#ffae00, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blink-bg {
|
||||||
|
color: #fff;
|
||||||
|
background: repeating-linear-gradient(#daad0a 0%, #daad0a 5%, #987805 100%) !important;
|
||||||
|
animation: shadowyBackground 1s infinite;
|
||||||
|
box-shadow: 0px 0px 20px rgba(#eba814, 1);
|
||||||
|
transition: 100ms all ease-in;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 1px solid gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
|
@media (min-width: 850px) {
|
||||||
|
justify-content: left !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accelerate {
|
||||||
|
display: flex !important;
|
||||||
|
align-self: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #653b9c;
|
||||||
|
@media (max-width: 849px) {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.etaDeepMempool {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: center;
|
||||||
|
@media (max-width: 995px) {
|
||||||
|
justify-content: left !important;
|
||||||
|
}
|
||||||
|
@media (max-width: 849px) {
|
||||||
|
justify-content: right !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.accelerateDeepMempool {
|
||||||
|
align-self: auto;
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #653b9c;
|
||||||
|
@media (max-width: 995px) {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
@media (max-width: 849px) {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goggles-icon {
|
||||||
|
display: block;
|
||||||
|
width: 2.2em;
|
||||||
|
}
|
||||||
821
frontend/src/app/components/tracker/tracker.component.ts
Normal file
821
frontend/src/app/components/tracker/tracker.component.ts
Normal file
@ -0,0 +1,821 @@
|
|||||||
|
import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef, Inject, ChangeDetectorRef } 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, from, 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 { getTransactionFlags } from '../../shared/transaction.utils';
|
||||||
|
import { Filter, toFilters, TransactionFlags } 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 { Price, PriceService } from '../../services/price.service';
|
||||||
|
import { isFeatureActive } from '../../bitcoin.utils';
|
||||||
|
import { ServicesApiServices } from '../../services/services-api.service';
|
||||||
|
import { EnterpriseService } from '../../services/enterprise.service';
|
||||||
|
import { ZONE_SERVICE } from '../../injection-tokens';
|
||||||
|
|
||||||
|
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'],
|
||||||
|
})
|
||||||
|
export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
network = '';
|
||||||
|
tx: Transaction;
|
||||||
|
txId: string;
|
||||||
|
txInBlockIndex: number;
|
||||||
|
mempoolPosition: MempoolPosition;
|
||||||
|
isLoadingTx = true;
|
||||||
|
error: any = undefined;
|
||||||
|
errorUnblinded: any = undefined;
|
||||||
|
loadingCachedTx = false;
|
||||||
|
waitingForTransaction = false;
|
||||||
|
latestBlock: BlockExtended;
|
||||||
|
transactionTime = -1;
|
||||||
|
subscription: Subscription;
|
||||||
|
fetchCpfpSubscription: Subscription;
|
||||||
|
fetchRbfSubscription: Subscription;
|
||||||
|
fetchCachedTxSubscription: Subscription;
|
||||||
|
fetchAccelerationSubscription: Subscription;
|
||||||
|
txReplacedSubscription: Subscription;
|
||||||
|
txRbfInfoSubscription: Subscription;
|
||||||
|
mempoolPositionSubscription: Subscription;
|
||||||
|
queryParamsSubscription: Subscription;
|
||||||
|
urlFragmentSubscription: Subscription;
|
||||||
|
mempoolBlocksSubscription: Subscription;
|
||||||
|
blocksSubscription: Subscription;
|
||||||
|
miningSubscription: Subscription;
|
||||||
|
currencyChangeSubscription: Subscription;
|
||||||
|
fragmentParams: URLSearchParams;
|
||||||
|
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;
|
||||||
|
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>;
|
||||||
|
inputIndex: number;
|
||||||
|
outputIndex: number;
|
||||||
|
graphExpanded: boolean = false;
|
||||||
|
graphWidth: number = 1068;
|
||||||
|
graphHeight: number = 360;
|
||||||
|
inOutLimit: number = 150;
|
||||||
|
maxInOut: number = 0;
|
||||||
|
flowPrefSubscription: Subscription;
|
||||||
|
hideFlow: boolean = this.stateService.hideFlow.value;
|
||||||
|
overrideFlowPreference: boolean = null;
|
||||||
|
flowEnabled: boolean;
|
||||||
|
tooltipPosition: { x: number, y: number };
|
||||||
|
isMobile: boolean;
|
||||||
|
|
||||||
|
featuresEnabled: boolean;
|
||||||
|
segwitEnabled: boolean;
|
||||||
|
rbfEnabled: boolean;
|
||||||
|
taprootEnabled: boolean;
|
||||||
|
hasEffectiveFeeRate: boolean;
|
||||||
|
accelerateCtaType: 'alert' | 'button' = 'button';
|
||||||
|
acceleratorAvailable: boolean = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||||
|
showAccelerationSummary = false;
|
||||||
|
scrollIntoAccelPreview = false;
|
||||||
|
auditEnabled: boolean = this.stateService.env.AUDIT && this.stateService.env.BASE_MODULE === 'mempool' && this.stateService.env.MINING_DASHBOARD === true;
|
||||||
|
|
||||||
|
@ViewChild('graphContainer')
|
||||||
|
graphContainer: ElementRef;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private route: ActivatedRoute,
|
||||||
|
private router: Router,
|
||||||
|
private relativeUrlPipe: RelativeUrlPipe,
|
||||||
|
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 storageService: StorageService,
|
||||||
|
private enterpriseService: EnterpriseService,
|
||||||
|
private cd: ChangeDetectorRef,
|
||||||
|
@Inject(ZONE_SERVICE) private zoneService: any,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.acceleratorAvailable = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && this.stateService.env.ACCELERATOR && this.stateService.network === '';
|
||||||
|
|
||||||
|
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.accelerateCtaType = (this.storageService.getValue('accel-cta-type') as 'alert' | 'button') ?? 'button';
|
||||||
|
|
||||||
|
this.setFlowEnabled();
|
||||||
|
this.flowPrefSubscription = this.stateService.hideFlow.subscribe((hide) => {
|
||||||
|
this.hideFlow = !!hide;
|
||||||
|
this.setFlowEnabled();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.da$ = this.stateService.difficultyAdjustment$.pipe(
|
||||||
|
tap(() => {
|
||||||
|
this.now = Date.now();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.urlFragmentSubscription = this.route.fragment.subscribe((fragment) => {
|
||||||
|
this.fragmentParams = new URLSearchParams(fragment || '');
|
||||||
|
const vin = parseInt(this.fragmentParams.get('vin'), 10);
|
||||||
|
const vout = parseInt(this.fragmentParams.get('vout'), 10);
|
||||||
|
this.inputIndex = (!isNaN(vin) && vin >= 0) ? vin : null;
|
||||||
|
this.outputIndex = (!isNaN(vout) && vout >= 0) ? vout : null;
|
||||||
|
});
|
||||||
|
|
||||||
|
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.setFeatures();
|
||||||
|
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.graphExpanded = false;
|
||||||
|
this.transactionTime = tx.firstSeen || 0;
|
||||||
|
this.setupGraph();
|
||||||
|
|
||||||
|
this.fetchRbfHistory$.next(this.tx.txid);
|
||||||
|
this.txRbfInfoSubscription = this.stateService.txRbfInfo$.subscribe((rbfInfo) => {
|
||||||
|
if (this.tx) {
|
||||||
|
this.rbfInfo = rbfInfo;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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')) {
|
||||||
|
acceleration.acceleratedFee = Math.max(acceleration.effectiveFee, acceleration.effectiveFee + acceleration.feePaid - acceleration.baseFee - acceleration.vsizeFee);
|
||||||
|
this.accelerationInfo = acceleration;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} 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];
|
||||||
|
// rewrite legacy vin syntax
|
||||||
|
if (!isNaN(vin)) {
|
||||||
|
this.fragmentParams.set('vin', vin.toString());
|
||||||
|
this.fragmentParams.delete('vout');
|
||||||
|
}
|
||||||
|
this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.txId], {
|
||||||
|
queryParamsHandling: 'merge',
|
||||||
|
fragment: this.fragmentParams.toString(),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.txId = urlMatch[0];
|
||||||
|
const vout = parseInt(urlMatch[1], 10);
|
||||||
|
if (urlMatch.length > 1 && !isNaN(vout)) {
|
||||||
|
// rewrite legacy vout syntax
|
||||||
|
this.fragmentParams.set('vout', vout.toString());
|
||||||
|
this.fragmentParams.delete('vin');
|
||||||
|
this.router.navigate([this.relativeUrlPipe.transform('/tx'), this.txId], {
|
||||||
|
queryParamsHandling: 'merge',
|
||||||
|
fragment: this.fragmentParams.toString(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
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.setFeatures();
|
||||||
|
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);
|
||||||
|
this.graphExpanded = false;
|
||||||
|
this.setupGraph();
|
||||||
|
|
||||||
|
if (!tx.status?.confirmed) {
|
||||||
|
if (tx.firstSeen) {
|
||||||
|
this.transactionTime = tx.firstSeen;
|
||||||
|
} else {
|
||||||
|
this.getTransactionTime();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
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();
|
||||||
|
|
||||||
|
setTimeout(() => { this.applyFragment(); }, 0);
|
||||||
|
|
||||||
|
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.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.txRbfInfoSubscription = this.stateService.txRbfInfo$.subscribe((rbfInfo) => {
|
||||||
|
if (this.tx) {
|
||||||
|
this.rbfInfo = rbfInfo;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.queryParamsSubscription = this.route.queryParams.subscribe((params) => {
|
||||||
|
if (params.showFlow === 'false') {
|
||||||
|
this.overrideFlowPreference = false;
|
||||||
|
} else if (params.showFlow === 'true') {
|
||||||
|
this.overrideFlowPreference = true;
|
||||||
|
} else {
|
||||||
|
this.overrideFlowPreference = null;
|
||||||
|
}
|
||||||
|
this.setFlowEnabled();
|
||||||
|
this.setGraphSize();
|
||||||
|
});
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
this.setGraphSize();
|
||||||
|
}
|
||||||
|
|
||||||
|
dismissAccelAlert(): void {
|
||||||
|
this.storageService.setValue('accel-cta-type', 'button');
|
||||||
|
this.accelerateCtaType = 'button';
|
||||||
|
}
|
||||||
|
|
||||||
|
onAccelerateClicked() {
|
||||||
|
if (!this.txId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.enterpriseService.goal(8);
|
||||||
|
this.showAccelerationSummary = true && this.acceleratorAvailable;
|
||||||
|
this.scrollIntoAccelPreview = !this.scrollIntoAccelPreview;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
setFeatures(): void {
|
||||||
|
if (this.tx) {
|
||||||
|
this.segwitEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'segwit');
|
||||||
|
this.taprootEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'taproot');
|
||||||
|
this.rbfEnabled = !this.tx.status.confirmed || isFeatureActive(this.stateService.network, this.tx.status.block_height, 'rbf');
|
||||||
|
this.tx.flags = getTransactionFlags(this.tx);
|
||||||
|
this.filters = this.tx.flags ? toFilters(this.tx.flags).filter(f => f.txPage) : [];
|
||||||
|
} else {
|
||||||
|
this.segwitEnabled = false;
|
||||||
|
this.taprootEnabled = false;
|
||||||
|
this.rbfEnabled = false;
|
||||||
|
}
|
||||||
|
this.featuresEnabled = this.segwitEnabled || this.taprootEnabled || this.rbfEnabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
resetTransaction() {
|
||||||
|
this.error = undefined;
|
||||||
|
this.tx = null;
|
||||||
|
this.setFeatures();
|
||||||
|
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;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
setupGraph() {
|
||||||
|
this.maxInOut = Math.min(this.inOutLimit, Math.max(this.tx?.vin?.length || 1, this.tx?.vout?.length + 1 || 1));
|
||||||
|
this.graphHeight = this.graphExpanded ? this.maxInOut * 15 : Math.min(360, this.maxInOut * 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleGraph() {
|
||||||
|
const showFlow = !this.flowEnabled;
|
||||||
|
this.stateService.hideFlow.next(!showFlow);
|
||||||
|
this.router.navigate([], {
|
||||||
|
relativeTo: this.route,
|
||||||
|
queryParams: { showFlow: showFlow },
|
||||||
|
queryParamsHandling: 'merge',
|
||||||
|
fragment: 'flow'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setFlowEnabled() {
|
||||||
|
this.flowEnabled = (this.overrideFlowPreference != null ? this.overrideFlowPreference : !this.hideFlow);
|
||||||
|
}
|
||||||
|
|
||||||
|
expandGraph() {
|
||||||
|
this.graphExpanded = true;
|
||||||
|
this.graphHeight = this.maxInOut * 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
collapseGraph() {
|
||||||
|
this.graphExpanded = false;
|
||||||
|
this.graphHeight = Math.min(360, this.maxInOut * 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
// simulate normal anchor fragment behavior
|
||||||
|
applyFragment(): void {
|
||||||
|
const anchor = Array.from(this.fragmentParams.entries()).find(([frag, value]) => value === '');
|
||||||
|
if (anchor?.length) {
|
||||||
|
if (anchor[0] === 'accelerate') {
|
||||||
|
setTimeout(this.onAccelerateClicked.bind(this), 100);
|
||||||
|
} else {
|
||||||
|
const anchorElement = document.getElementById(anchor[0]);
|
||||||
|
if (anchorElement) {
|
||||||
|
anchorElement.scrollIntoView();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@HostListener('window:resize', ['$event'])
|
||||||
|
setGraphSize(): void {
|
||||||
|
this.isMobile = window.innerWidth < 850;
|
||||||
|
if (this.graphContainer?.nativeElement && this.stateService.isBrowser) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.graphContainer?.nativeElement?.clientWidth) {
|
||||||
|
this.graphWidth = this.graphContainer.nativeElement.clientWidth;
|
||||||
|
} else {
|
||||||
|
setTimeout(() => { this.setGraphSize(); }, 1);
|
||||||
|
}
|
||||||
|
}, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.subscription.unsubscribe();
|
||||||
|
this.fetchCpfpSubscription.unsubscribe();
|
||||||
|
this.fetchRbfSubscription.unsubscribe();
|
||||||
|
this.fetchCachedTxSubscription.unsubscribe();
|
||||||
|
this.fetchAccelerationSubscription.unsubscribe();
|
||||||
|
this.txReplacedSubscription.unsubscribe();
|
||||||
|
this.txRbfInfoSubscription.unsubscribe();
|
||||||
|
this.queryParamsSubscription.unsubscribe();
|
||||||
|
this.flowPrefSubscription.unsubscribe();
|
||||||
|
this.urlFragmentSubscription.unsubscribe();
|
||||||
|
this.mempoolBlocksSubscription.unsubscribe();
|
||||||
|
this.mempoolPositionSubscription.unsubscribe();
|
||||||
|
this.mempoolBlocksSubscription.unsubscribe();
|
||||||
|
this.blocksSubscription.unsubscribe();
|
||||||
|
this.miningSubscription?.unsubscribe();
|
||||||
|
this.currencyChangeSubscription?.unsubscribe();
|
||||||
|
this.leaveTransaction();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -50,6 +50,7 @@ import { BlockOverviewGraphComponent } from '../components/block-overview-graph/
|
|||||||
import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
|
import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
|
||||||
import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
|
import { BlockFiltersComponent } from '../components/block-filters/block-filters.component';
|
||||||
import { AddressGroupComponent } from '../components/address-group/address-group.component';
|
import { AddressGroupComponent } from '../components/address-group/address-group.component';
|
||||||
|
import { TrackerComponent } from '../components/tracker/tracker.component';
|
||||||
import { SearchFormComponent } from '../components/search-form/search-form.component';
|
import { SearchFormComponent } from '../components/search-form/search-form.component';
|
||||||
import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
|
import { AddressLabelsComponent } from '../components/address-labels/address-labels.component';
|
||||||
import { FooterComponent } from '../components/footer/footer.component';
|
import { FooterComponent } from '../components/footer/footer.component';
|
||||||
@ -156,6 +157,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||||||
BlockFiltersComponent,
|
BlockFiltersComponent,
|
||||||
TransactionsListComponent,
|
TransactionsListComponent,
|
||||||
AddressGroupComponent,
|
AddressGroupComponent,
|
||||||
|
TrackerComponent,
|
||||||
SearchFormComponent,
|
SearchFormComponent,
|
||||||
AddressLabelsComponent,
|
AddressLabelsComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
@ -289,6 +291,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
|
|||||||
BlockFiltersComponent,
|
BlockFiltersComponent,
|
||||||
TransactionsListComponent,
|
TransactionsListComponent,
|
||||||
AddressGroupComponent,
|
AddressGroupComponent,
|
||||||
|
TrackerComponent,
|
||||||
SearchFormComponent,
|
SearchFormComponent,
|
||||||
AddressLabelsComponent,
|
AddressLabelsComponent,
|
||||||
FooterComponent,
|
FooterComponent,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user