diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index 1ad27e6fa..a4953d8ae 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -1,3 +1,76 @@ -
- 🍕 +
+
+
+
+
Transaction
+
+ + + +
+
+
+
+ +
+
+
+ +
+
+
+ @switch (trackerStage) { + @case ('waiting') { + Waiting for your transaction to appear in the mempool + } + @case ('pending') { + Your transaction is in the mempool, but it will not be confirmed for some time. + } + @case ('soon') { + Your transaction is near the top of the mempool, and is expected to confirm soon. + } + @case ('next') { + Your transaction is expected to confirm in the next block + } + @case ('confirmed') { + Your transaction is confirmed! + } + } +
+ @if (tx && !tx.status?.confirmed && mempoolPosition) { +
+
ETA
+
+ + @if (mempoolPosition?.block >= 7) { + In several hours (or more) + } @else { + + } + @if (isMobile && paymentType === 'cashapp' && accelerationEligible && !tx.acceleration && acceleratorAvailable && accelerateCtaType === 'button' && !tx?.acceleration) { + Accelerate + } + +
+
+ } @else if (tx && tx.status?.confirmed) { +
+
Block height
+
+ + {{ tx.status?.block_height }} +
+ +
+ +
+
+ } +
+
+
\ No newline at end of file diff --git a/frontend/src/app/components/tracker/tracker.component.scss b/frontend/src/app/components/tracker/tracker.component.scss index bfdd4cc03..140f90948 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -1,317 +1,75 @@ -.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 { +.mobile-wrapper { + width: 100%; + height: 100%; 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; - } + align-items: center; + justify-content: center; } -.td-width { - width: 150px; - - @media (max-width: 768px) { - width: 175px; - } +.mobile-container { + width: 100vw; + height: 100%; + max-width: 600px; + max-height: 1000px; + box-sizing: border-box; + margin: 0; } -.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 { +.blockchain-wrapper { position: relative; - width: 100%; - background: #181b2d; - padding: 10px 0; - padding-bottom: 0; + display: flex; + flex-direction: column; + justify-content: flex-start; + overflow: hidden; + pointer-events: none; } -.toggle-wrapper { - width: 100%; - text-align: center; - margin: 1.25em 0 0; +.panel { + background: var(--box-bg); } -.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 { +.field { display: flex; flex-direction: row; + flex-wrap: nowrap; 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%; -} + max-width: 100%; + padding: 1em; -// Blinking block -@keyframes shadowyBackground { - 0% { - box-shadow: 0px 0px 20px rgba(#eba814, 1); + &:nth-child(even) { + background: var(--stat-box-bg); } - 50% { - box-shadow: 0px 0px 20px rgba(#eba814, .3); + + .label { + margin-right: 1em; } - 100% { - box-shadow: 0px 0px 20px rgba(#ffae00, 1); + .value { + flex-shrink: 1; + flex-grow: 1; + width: 0; + white-space: nowrap; } } -.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; - } +.tracker-bar { + padding: 1em 0.5em 0; } .accelerate { display: flex !important; align-self: auto; - margin-left: 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; - @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; } \ No newline at end of file diff --git a/frontend/src/app/components/tracker/tracker.component.ts b/frontend/src/app/components/tracker/tracker.component.ts index fbaa0be17..5efc6457e 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef, Inject, ChangeDetectorRef } from '@angular/core'; +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 { @@ -12,7 +12,7 @@ import { map } from 'rxjs/operators'; import { Transaction } from '../../interfaces/electrs.interface'; -import { of, merge, Subscription, Observable, Subject, from, throwError, combineLatest } from 'rxjs'; +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'; @@ -21,15 +21,14 @@ 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 { 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 { Price, PriceService } from '../../services/price.service'; -import { isFeatureActive } from '../../bitcoin.utils'; +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; @@ -52,8 +51,9 @@ interface AuditStatus { selector: 'app-tracker', templateUrl: './tracker.component.html', styleUrls: ['./tracker.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { +export class TrackerComponent implements OnInit, OnDestroy { network = ''; tx: Transaction; txId: string; @@ -61,7 +61,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { mempoolPosition: MempoolPosition; isLoadingTx = true; error: any = undefined; - errorUnblinded: any = undefined; loadingCachedTx = false; waitingForTransaction = false; latestBlock: BlockExtended; @@ -72,15 +71,11 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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[]; @@ -92,6 +87,7 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { adjustedVsize: number | null; pool: Pool | null; auditStatus: AuditStatus | null; + isAcceleration: boolean = false; filters: Filter[] = []; showCpfpDetails = false; fetchCpfp$ = new Subject(); @@ -102,38 +98,24 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { isCached: boolean = false; now = Date.now(); da$: Observable; - 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; + paymentType: 'bitcoin' | 'cashapp' = 'bitcoin'; + + trackerStage: TrackerStage = 'waiting'; + + blockchainHeight: number = 100; + blockchainWidth: number = 600; - 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 === ''; + 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; - @ViewChild('graphContainer') - graphContainer: ElementRef; - constructor( private route: ActivatedRoute, - private router: Router, - private relativeUrlPipe: RelativeUrlPipe, private electrsApiService: ElectrsApiService, public stateService: StateService, private cacheService: CacheService, @@ -143,15 +125,29 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { private servicesApiService: ServicesApiServices, private seoService: SeoService, private priceService: PriceService, - private storageService: StorageService, 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.showAccelerationSummary = true; + this.paymentType = 'cashapp'; + } + this.enterpriseService.page(); this.websocketService.want(['blocks', 'mempool-blocks']); @@ -162,28 +158,12 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { } ); - 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]; }); @@ -252,7 +232,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { if (!this.tx) { this.tx = tx; - this.setFeatures(); this.isCached = true; if (tx.fee === undefined) { this.tx.fee = 0; @@ -261,16 +240,9 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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; - } - }); } }); @@ -288,8 +260,12 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { ).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); + 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(); } } }); @@ -358,6 +334,17 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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; @@ -371,27 +358,8 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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:` @@ -436,7 +404,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { this.seoService.clearSoft404(); this.tx = tx; - this.setFeatures(); this.isCached = false; if (tx.fee === undefined) { this.tx.fee = 0; @@ -451,16 +418,16 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { this.loadingCachedTx = false; this.waitingForTransaction = false; this.websocketService.startTrackTransaction(tx.txid); - this.graphExpanded = false; - this.setupGraph(); 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; @@ -498,8 +465,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { }) ).subscribe(); - setTimeout(() => { this.applyFragment(); }, 0); - this.cd.detectChanges(); }, (error) => { @@ -517,6 +482,7 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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'); @@ -543,24 +509,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { } }); - 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(); @@ -590,25 +538,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { }); } - 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 { if (error.status === 404 && /^[a-fA-F0-9]{64}$/.test(this.txId)) { this.websocketService.startMultiTrackTransaction(this.txId); @@ -667,21 +596,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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; @@ -705,10 +619,27 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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.setFeatures(); this.waitingForTransaction = false; this.isLoadingTx = true; this.rbfTransaction = undefined; @@ -727,6 +658,8 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { this.mempoolPosition = null; this.pool = null; this.auditStatus = null; + this.accelerationEligible = false; + this.trackerStage = 'waiting'; document.body.scrollTo(0, 0); this.leaveTransaction(); } @@ -740,63 +673,11 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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 { + onResize(): 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); - } + this.blockchainWidth = Math.min(600, window.innerWidth); + this.blockchainHeight = this.blockchainWidth / 5; } ngOnDestroy() { @@ -806,10 +687,6 @@ export class TrackerComponent implements OnInit, AfterViewInit, OnDestroy { 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();