From eef0ef32b285352bc9de36d0db754871d014fa69 Mon Sep 17 00:00:00 2001 From: jramos0 Date: Fri, 6 Feb 2026 16:36:10 -0600 Subject: [PATCH] feat: add showDetails toggle and metadata parameters for transactions details --- .../transaction/transaction.component.html | 2 +- .../transaction/transaction.component.ts | 35 +++++++++++++++++-- .../transactions-list.component.ts | 6 ++++ 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 93befbc12..94e28eae4 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -180,7 +180,7 @@
- +
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts index 77cc373c4..14452eb18 100644 --- a/frontend/src/app/components/transaction/transaction.component.ts +++ b/frontend/src/app/components/transaction/transaction.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, AfterViewInit, OnDestroy, HostListener, ViewChild, ElementRef, Inject, ChangeDetectorRef } from '@angular/core'; import { ElectrsApiService } from '@app/services/electrs-api.service'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { TransactionsListComponent } from '@components/transactions-list/transactions-list.component'; import { switchMap, filter, @@ -144,6 +145,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { hideFlow: boolean = this.stateService.hideFlow.value; overrideFlowPreference: boolean = null; flowEnabled: boolean; + isDetailsOpen: boolean = false; tooltipPosition: { x: number, y: number }; isMobile: boolean; firstLoad = true; @@ -170,6 +172,16 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { referralCode: string | undefined; graphContainer: ElementRef; + private txList: TransactionsListComponent; + + @ViewChild('txList') + set txListSetter(component: TransactionsListComponent | undefined) { + if (component) { + this.txList = component; + this.txList.setDetailsOpen(this.isDetailsOpen); + } + } + @ViewChild('graphContainer') set flowAnchor(element: ElementRef | null | undefined) { if (element) { @@ -208,6 +220,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { ngOnInit() { this.enterpriseService.page(); + this.isDetailsOpen = this.route.snapshot.queryParams['showDetails'] === 'true'; const urlParams = new URLSearchParams(window.location.search); this.forceAccelerationSummary = !!urlParams.get('cash_request_id'); @@ -621,6 +634,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { 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( @@ -860,6 +874,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.setGraphSize(); } + toggleDetailsFromTxPage(): void { + this.isDetailsOpen = !this.isDetailsOpen; + this.router.navigate([], { + relativeTo: this.route, + queryParams: { showDetails: this.isDetailsOpen ? 'true' : null }, + queryParamsHandling: 'merge', + preserveFragment: true, + replaceUrl: true, + }); + if (this.txList) { + this.txList.setDetailsOpen(this.isDetailsOpen); + } + } + dismissAccelAlert(): void { this.storageService.setValue('accel-cta-type', 'button'); this.accelerateCtaType = 'button'; @@ -1074,6 +1102,7 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { this.pool = null; this.auditStatus = null; this.accelerationPositions = null; + this.isDetailsOpen = this.route.snapshot.queryParams['showDetails'] === 'true'; document.body.scrollTo(0, 0); this.isAcceleration = false; this.isAccelerated$.next(this.isAcceleration); @@ -1163,20 +1192,20 @@ export class TransactionComponent implements OnInit, AfterViewInit, OnDestroy { } onAccelerationCompleted(): void { - this.router.navigate([], { fragment: null }); + this.router.navigate([], { fragment: null, queryParamsHandling: 'merge' }); this.accelerationFlowCompleted = true; this.forceAccelerationSummary = false; } closeAccelerator(): void { - this.router.navigate([], { fragment: null }); + this.router.navigate([], { fragment: null, queryParamsHandling: 'merge' }); this.hideAccelerationSummary = true; this.forceAccelerationSummary = false; this.storageService.setValue('hide-accelerator-pref', 'true'); } openAccelerator(): void { - this.router.navigate([], { fragment: 'accelerate' }); + this.router.navigate([], { fragment: 'accelerate', queryParamsHandling: 'merge' }); this.accelerationFlowCompleted = false; this.hideAccelerationSummary = false; this.storageService.setValue('hide-accelerator-pref', 'false'); diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.ts b/frontend/src/app/components/transactions-list/transactions-list.component.ts index 1a0d4b729..4e40d4e67 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.ts +++ b/frontend/src/app/components/transactions-list/transactions-list.component.ts @@ -532,6 +532,12 @@ export class TransactionsListComponent implements OnInit, OnChanges, OnDestroy { } } + setDetailsOpen(open: boolean): void { + if (open !== this.showDetails$.value) { + this.toggleDetails(); + } + } + loadMoreInputs(tx: Transaction): void { if (!tx['@vinLoaded'] && !this.txPreview) { this.electrsApiService.getTransaction$(tx.txid)