Merge pull request #5331 from mempool/mononaut/accelerated-cpfp

show cpfp toggle on pending accelerations
This commit is contained in:
wiz 2024-07-13 18:37:23 +09:00 committed by GitHub
commit 30bc026c28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 3 deletions

View File

@ -18,7 +18,12 @@
</div> </div>
</td> </td>
<td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft"> <td class="pie-chart" rowspan="2" *ngIf="!chartPositionLeft">
<ng-container *ngTemplateOutlet="pieChart"></ng-container> <div class="d-flex justify-content-between align-items-start">
@if (hasCpfp) {
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
}
<ng-container *ngTemplateOutlet="pieChart"></ng-container>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -27,6 +32,15 @@
<ng-container i18n="accelerator.x-of-hash-rate">{{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span></ng-container> <ng-container i18n="accelerator.x-of-hash-rate">{{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span></ng-container>
</td> </td>
</tr> </tr>
@if (hasCpfp && chartPositionLeft) {
<tr>
<td colspan="3" class="pt-0">
<div class="d-flex justify-content-end align-items-start">
<button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right mt-0" (click)="onToggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
</div>
</td>
</tr>
}
</tbody> </tbody>
</table> </table>
} }

View File

@ -1,4 +1,4 @@
import { Component, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core'; import { Component, ChangeDetectionStrategy, Input, Output, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
import { Transaction } from '../../../interfaces/electrs.interface'; import { Transaction } from '../../../interfaces/electrs.interface';
import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface'; import { Acceleration, SinglePoolStats } from '../../../interfaces/node-api.interface';
import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts'; import { EChartsOption, PieSeriesOption } from '../../../graphs/echarts';
@ -27,8 +27,10 @@ export class ActiveAccelerationBox implements OnChanges {
@Input() accelerationInfo: Acceleration; @Input() accelerationInfo: Acceleration;
@Input() miningStats: MiningStats; @Input() miningStats: MiningStats;
@Input() pools: number[]; @Input() pools: number[];
@Input() hasCpfp: boolean = false;
@Input() chartOnly: boolean = false; @Input() chartOnly: boolean = false;
@Input() chartPositionLeft: boolean = false; @Input() chartPositionLeft: boolean = false;
@Output() toggleCpfp = new EventEmitter();
acceleratedByPercentage: string = ''; acceleratedByPercentage: string = '';
@ -133,4 +135,8 @@ export class ActiveAccelerationBox implements OnChanges {
} }
this.chartInstance = ec; this.chartInstance = ec;
} }
onToggleCpfp(): void {
this.toggleCpfp.emit();
}
} }

View File

@ -663,7 +663,7 @@
<ng-template #acceleratingRow> <ng-template #acceleratingRow>
<tr> <tr>
<td rowspan="2" colspan="2" style="padding: 0;"> <td rowspan="2" colspan="2" style="padding: 0;">
<app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [chartPositionLeft]="isMobile"></app-active-acceleration-box> <app-active-acceleration-box [tx]="tx" [accelerationInfo]="accelerationInfo" [miningStats]="miningStats" [hasCpfp]="hasCpfp" (toggleCpfp)="showCpfpDetails = !showCpfpDetails" [chartPositionLeft]="isMobile"></app-active-acceleration-box>
</td> </td>
</tr> </tr>
<tr></tr> <tr></tr>