From 786ec7fff16d558b124c3ad71624e92c4d410c16 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Mon, 8 Apr 2024 04:27:49 +0000 Subject: [PATCH 1/8] Mobile transaction tracker page --- frontend/src/app/app-routing.module.ts | 5 + .../components/tracker/tracker.component.html | 3 + .../components/tracker/tracker.component.scss | 317 +++++++ .../components/tracker/tracker.component.ts | 821 ++++++++++++++++++ frontend/src/app/shared/shared.module.ts | 3 + 5 files changed, 1149 insertions(+) create mode 100644 frontend/src/app/components/tracker/tracker.component.html create mode 100644 frontend/src/app/components/tracker/tracker.component.scss create mode 100644 frontend/src/app/components/tracker/tracker.component.ts diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 7ec9a37d3..c4c065615 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -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: [], diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html new file mode 100644 index 000000000..1ad27e6fa --- /dev/null +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -0,0 +1,3 @@ +
+ 🍕 +
\ 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 new file mode 100644 index 000000000..bfdd4cc03 --- /dev/null +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -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; +} \ 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 new file mode 100644 index 000000000..fbaa0be17 --- /dev/null +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -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(); + fetchRbfHistory$ = new Subject(); + fetchCachedTx$ = new Subject(); + fetchAcceleration$ = new Subject(); + fetchMiningInfo$ = new Subject<{ hash: string, height: number, txid: string }>(); + 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; + + 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; + 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 { + 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(); + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 72d9eb04d..2a47077ca 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -50,6 +50,7 @@ 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 { SearchFormComponent } from '../components/search-form/search-form.component'; import { AddressLabelsComponent } from '../components/address-labels/address-labels.component'; import { FooterComponent } from '../components/footer/footer.component'; @@ -156,6 +157,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir BlockFiltersComponent, TransactionsListComponent, AddressGroupComponent, + TrackerComponent, SearchFormComponent, AddressLabelsComponent, FooterComponent, @@ -289,6 +291,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir BlockFiltersComponent, TransactionsListComponent, AddressGroupComponent, + TrackerComponent, SearchFormComponent, AddressLabelsComponent, FooterComponent, From 61a308cbc6aaf9a480efc16059ef93c525be77d0 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 08:04:58 +0000 Subject: [PATCH 2/8] Add simplified tracker blockchain component --- .../blockchain-blocks/blockchain-blocks.component.scss | 10 +++++----- .../app/components/clockchain/clockchain.component.ts | 2 +- .../mempool-blocks/mempool-blocks.component.html | 2 +- .../mempool-blocks/mempool-blocks.component.scss | 10 +++++----- .../mempool-blocks/mempool-blocks.component.ts | 9 ++++++++- 5 files changed, 20 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss index 59082d5c5..269fdab42 100644 --- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss +++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss @@ -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 { diff --git a/frontend/src/app/components/clockchain/clockchain.component.ts b/frontend/src/app/components/clockchain/clockchain.component.ts index 6cb29bcd9..c17b1e0ae 100644 --- a/frontend/src/app/components/clockchain/clockchain.component.ts +++ b/frontend/src/app/components/clockchain/clockchain.component.ts @@ -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; diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html index 98b148f26..aa2043af2 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html @@ -51,7 +51,7 @@ -
+
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss index dada75603..140d83908 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss @@ -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 { diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts index 80d77427b..f403eac71 100644 --- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts +++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts @@ -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() { From 2eac3e65552eed7232442ff7611e5a145ce91226 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 08:05:31 +0000 Subject: [PATCH 3/8] Add pizza tracker component --- .../tracker/tracker-bar.component.html | 11 ++ .../tracker/tracker-bar.component.scss | 136 ++++++++++++++++++ .../tracker/tracker-bar.component.ts | 72 ++++++++++ frontend/src/app/shared/shared.module.ts | 3 + 4 files changed, 222 insertions(+) create mode 100644 frontend/src/app/components/tracker/tracker-bar.component.html create mode 100644 frontend/src/app/components/tracker/tracker-bar.component.scss create mode 100644 frontend/src/app/components/tracker/tracker-bar.component.ts diff --git a/frontend/src/app/components/tracker/tracker-bar.component.html b/frontend/src/app/components/tracker/tracker-bar.component.html new file mode 100644 index 000000000..c777717b0 --- /dev/null +++ b/frontend/src/app/components/tracker/tracker-bar.component.html @@ -0,0 +1,11 @@ +
+
Sent
+
+
Pending
+
+
Soon
+
+
Next block
+
+
Confirmed
+
\ No newline at end of file diff --git a/frontend/src/app/components/tracker/tracker-bar.component.scss b/frontend/src/app/components/tracker/tracker-bar.component.scss new file mode 100644 index 000000000..4607f9609 --- /dev/null +++ b/frontend/src/app/components/tracker/tracker-bar.component.scss @@ -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); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/tracker/tracker-bar.component.ts b/frontend/src/app/components/tracker/tracker-bar.component.ts new file mode 100644 index 000000000..26f2e705b --- /dev/null +++ b/frontend/src/app/components/tracker/tracker-bar.component.ts @@ -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(); + } +} \ No newline at end of file diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 2a47077ca..b7df93e49 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -51,6 +51,7 @@ import { BlockOverviewTooltipComponent } from '../components/block-overview-tool 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'; @@ -158,6 +159,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir TransactionsListComponent, AddressGroupComponent, TrackerComponent, + TrackerBarComponent, SearchFormComponent, AddressLabelsComponent, FooterComponent, @@ -292,6 +294,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir TransactionsListComponent, AddressGroupComponent, TrackerComponent, + TrackerBarComponent, SearchFormComponent, AddressLabelsComponent, FooterComponent, From de00d49d7bd9b2af8f0823df52d4345e3b140fe7 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 08:05:45 +0000 Subject: [PATCH 4/8] Basic tracker page structure --- .../components/tracker/tracker.component.html | 77 +++- .../components/tracker/tracker.component.scss | 338 +++--------------- .../components/tracker/tracker.component.ts | 267 ++++---------- 3 files changed, 195 insertions(+), 487 deletions(-) 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(); From 5f2d7b32ae7d08cb865bff9cf624534b69fc9552 Mon Sep 17 00:00:00 2001 From: nymkappa <1612910616@pm.me> Date: Sat, 13 Apr 2024 16:11:49 +0900 Subject: [PATCH 5/8] [accelerator] concept accelerator a/b ctas --- .../accelerate-checkout.component.html | 42 +++++++++++++++++++ .../accelerate-checkout.component.scss | 0 .../accelerate-checkout.component.ts | 17 ++++++++ frontend/src/app/shared/shared.module.ts | 3 ++ ...empool-accelerator-sparkles-compressed.svg | 1 + 5 files changed, 63 insertions(+) create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss create mode 100644 frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts create mode 100644 frontend/src/resources/mempool-accelerator-sparkles-compressed.svg diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html new file mode 100644 index 000000000..6010fe47f --- /dev/null +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -0,0 +1,42 @@ +
+ +
+
+

Accelerate your Bitcoin transaction?

+
+
+ +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts new file mode 100644 index 000000000..0591e58a2 --- /dev/null +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; + +@Component({ + selector: 'app-accelerate-checkout', + templateUrl: './accelerate-checkout.component.html', + styleUrls: ['./accelerate-checkout.component.scss'] +}) +export class AccelerateCheckout implements OnInit, OnDestroy { + constructor() { + } + + ngOnInit() { + } + + ngOnDestroy() { + } +} diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index b7df93e49..86cfa0bcf 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -98,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'; @@ -216,6 +217,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir MempoolErrorComponent, AccelerationsListComponent, AccelerationStatsComponent, + AccelerateCheckout, PendingStatsComponent, HttpErrorComponent, ], @@ -340,6 +342,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir MempoolErrorComponent, AccelerationsListComponent, AccelerationStatsComponent, + AccelerateCheckout, PendingStatsComponent, HttpErrorComponent, diff --git a/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg b/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg new file mode 100644 index 000000000..4a5bac3cc --- /dev/null +++ b/frontend/src/resources/mempool-accelerator-sparkles-compressed.svg @@ -0,0 +1 @@ + \ No newline at end of file From 29851537ebcf1459baa4bd9d3f657f790370694b Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 09:05:05 +0000 Subject: [PATCH 6/8] Prototype accelerate checkout properties --- .../accelerate-checkout.component.html | 9 +++++++-- .../accelerate-checkout.component.scss | 5 +++++ .../accelerate-checkout.component.ts | 13 ++++++++++++- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html index 6010fe47f..d6baf755d 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html @@ -21,10 +21,14 @@
- +
@@ -39,4 +43,5 @@
+ ✖
\ No newline at end of file diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss index e69de29bb..617147221 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.scss @@ -0,0 +1,5 @@ +.close-button { + position: absolute; + top: 0.5em; + right: 0.5em; +} \ No newline at end of file diff --git a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts index 0591e58a2..2de1aa34b 100644 --- a/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts +++ b/frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +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', @@ -6,6 +8,10 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; styleUrls: ['./accelerate-checkout.component.scss'] }) export class AccelerateCheckout implements OnInit, OnDestroy { + @Input() tx: Transaction ; + @Input() eta: number; + @Output() close = new EventEmitter(); + constructor() { } @@ -14,4 +20,9 @@ export class AccelerateCheckout implements OnInit, OnDestroy { ngOnDestroy() { } + + closeModal(): void { + console.log('close modal') + this.close.emit(); + } } From ecc234a96aa7f8f7d050025389496df73ce17e1e Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 09:05:50 +0000 Subject: [PATCH 7/8] Tracker bottom panel with status icon --- .../components/tracker/tracker.component.html | 30 ++++++++++++++++ .../components/tracker/tracker.component.scss | 35 +++++++++++++++++-- .../components/tracker/tracker.component.ts | 1 - frontend/src/app/shared/shared.module.ts | 5 ++- 4 files changed, 66 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/components/tracker/tracker.component.html b/frontend/src/app/components/tracker/tracker.component.html index a4953d8ae..f2f16d010 100644 --- a/frontend/src/app/components/tracker/tracker.component.html +++ b/frontend/src/app/components/tracker/tracker.component.html @@ -72,5 +72,35 @@ } + +
+ @if (showAccelerationSummary) { + + } @else { +
+ @switch (trackerStage) { + @case ('waiting') { + + } + @case ('pending') { + + } + @case ('soon') { + + } + @case ('next') { + + } + @case ('confirmed') { + + } + } +
+ } +
+ +
+ See more details +
\ 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 140f90948..025479cde 100644 --- a/frontend/src/app/components/tracker/tracker.component.scss +++ b/frontend/src/app/components/tracker/tracker.component.scss @@ -1,6 +1,5 @@ .mobile-wrapper { width: 100%; - height: 100%; display: flex; align-items: center; justify-content: center; @@ -8,11 +7,18 @@ .mobile-container { width: 100vw; - height: 100%; + 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 { @@ -25,7 +31,7 @@ } .panel { - background: var(--box-bg); + background: var(--bg); } .field { @@ -72,4 +78,27 @@ 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; } \ 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 5efc6457e..1a33eae66 100644 --- a/frontend/src/app/components/tracker/tracker.component.ts +++ b/frontend/src/app/components/tracker/tracker.component.ts @@ -144,7 +144,6 @@ export class TrackerComponent implements OnInit, OnDestroy { 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'; } diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts index 86cfa0bcf..97fa8aede 100644 --- a/frontend/src/app/shared/shared.module.ts +++ b/frontend/src/app/shared/shared.module.ts @@ -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'; @@ -416,5 +416,8 @@ export class SharedModule { library.addIcons(faCheck); library.addIcons(faRocket); library.addIcons(faScaleBalanced); + library.addIcons(faHourglassStart); + library.addIcons(faHourglassHalf); + library.addIcons(faHourglassEnd); } } From da25ed431ff5ff88fd91f8653c87a03d0e600bd4 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Sat, 13 Apr 2024 09:24:52 +0000 Subject: [PATCH 8/8] hijack /tx/ page for tracker users --- frontend/src/app/services/state.service.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts index 174388b7e..9dfec85e6 100644 --- a/frontend/src/app/services/state.service.ts +++ b/frontend/src/app/services/state.service.ts @@ -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 }; })),