GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6272 from jramos0/feature/transaction-details-toggle

Browse source 
feat: add showDetails query param and toggle for tx metadata
This commit is contained in:
mononaut 2026-02-20 16:02:48 +09:00 • committed by GitHub
commit 231c280e47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/components/transaction/transaction.component.html
View file

@ -180,7 +180,7 @@
<div class="title-buttons">
<button *ngIf="!flowEnabled" type="button" class="btn btn-outline-info flow-toggle btn-sm" (click)="toggleGraph()" i18n="show-diagram">Show diagram</button>
<button type="button" class="btn btn-outline-info btn-sm" (click)="txList.toggleDetails()" i18n="transaction.details|Transaction Details">Details</button>
<button type="button" class="btn btn-outline-info btn-sm" (click)="toggleDetailsFromTxPage()" i18n="transaction.details|Transaction Details">Details</button>
</div>
</div>

35
frontend/src/app/components/transaction/transaction.component.ts
View file

@ -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');

6
frontend/src/app/components/transactions-list/transactions-list.component.ts
View file

@ -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)