machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simple Goggle Toggles

Browse Source
This commit is contained in:
Mononaut
2024-02-08 03:57:11 +00:00
parent 3039481686
commit d7be5a4737
7 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/dashboard/dashboard.component.html
View File

@@ -18,13 +18,27 @@
<div class="card graph-card">
<div class="card-body pl-lg-3 pr-lg-3 pl-2 pr-2">
<ng-template [ngIf]="(network$ | async) !== 'liquid'" [ngIfElse]="liquidPegs">
<a class="title-link" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: Next Block</h5>
<a class="title-link mb-0" href="" [routerLink]="['/mempool-block/0' | relativeUrl]">
<h5 class="card-title d-inline" i18n="dashboard.mempool-goggles-next-block">Mempool Goggles: {{ goggleCycle[goggleIndex].name }}</h5>
<span>&nbsp;</span>
<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="vertical-align: text-top; font-size: 13px; color: #4a68b9"></fa-icon>
</a>
<div class="quick-filter">
<ng-container *ngFor="let filter of goggleCycle">
<div
class="badge badge-primary"
[class.active]="filter.index === goggleIndex"
(click)="goggleIndex = filter.index"
>{{ filter.name }}</div>
</ng-container>
</div>
<div class="mempool-block-wrapper">
<app-mempool-block-overview [index]="0"></app-mempool-block-overview>
<app-mempool-block-overview
[index]="0"
[resolution]="goggleResolution"
[filterFlags]="goggleCycle[goggleIndex].flag"
filterMode="or"
></app-mempool-block-overview>
</div>
</ng-template>
<ng-template #liquidPegs>

19
frontend/src/app/dashboard/dashboard.component.scss
View File

@@ -375,8 +375,8 @@
}
.mempool-block-wrapper {
max-height: 430px;
max-width: 430px;
max-height: 410px;
max-width: 410px;
margin: auto;
@media (min-width: 768px) {
@@ -384,7 +384,18 @@
max-width: 344px;
}
@media (min-width: 992px) {
max-height: 430px;
max-width: 430px;
max-height: 410px;
max-width: 410px;
}
}
.badge {
margin: 6px 5px 8px;
background: none;
border: solid 2px #105fb0;
cursor: pointer;
&.active {
background: #105fb0;
}
}

12
frontend/src/app/dashboard/dashboard.component.ts
View File

@@ -62,6 +62,15 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
private lastPegAmount: string = '';
private lastReservesBlockUpdate: number = 0;
goggleResolution = 82;
goggleCycle = [
{ index: 0, name: 'All' },
{ index: 1, name: 'CPFP', flag: 0b00000010_00000000_00000000n },
{ index: 2, name: 'RBF', flag: 0b00000100_00000000_00000000n },
{ index: 3, name: '💩', flag: 0b00000100_00000000_00000000_00000000n | 0b00000010_00000000_00000000_00000000n | 0b00000001_00000000_00000000_00000000n },
];
goggleIndex = 0; // Math.floor(Math.random() * this.goggleCycle.length);
private destroy$ = new Subject();
constructor(
@@ -357,10 +366,13 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
onResize(): void {
if (window.innerWidth >= 992) {
this.incomingGraphHeight = 300;
this.goggleResolution = 82;
} else if (window.innerWidth >= 768) {
this.incomingGraphHeight = 215;
this.goggleResolution = 80;
} else {
this.incomingGraphHeight = 180;
this.goggleResolution = 86;
}
}
}