diff --git a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
index d6000e27b..ac1df2bf5 100644
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -42,6 +42,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
@Input() showFilters: boolean = false;
@Input() excludeFilters: string[] = [];
@Input() filterFlags: bigint | null = null;
+ @Input() filterMode: 'and' | 'or' = 'and';
@Input() blockConversion: Price;
@Input() overrideColors: ((tx: TxView) => Color) | null = null;
@Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
@@ -113,7 +114,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
if (changes.overrideColor && this.scene) {
this.scene.setColorFunction(this.overrideColors);
}
- if ((changes.filterFlags || changes.showFilters)) {
+ if ((changes.filterFlags || changes.showFilters || changes.filterMode)) {
this.setFilterFlags();
}
}
@@ -121,8 +122,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
setFilterFlags(flags?: bigint | null): void {
this.activeFilterFlags = this.filterFlags || flags || null;
if (this.scene) {
- if (flags != null) {
- this.scene.setColorFunction(this.getFilterColorFunction(flags));
+ if (this.activeFilterFlags != null) {
+ this.scene.setColorFunction(this.getFilterColorFunction(this.activeFilterFlags));
} else {
this.scene.setColorFunction(this.overrideColors);
}
@@ -523,7 +524,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
getFilterColorFunction(flags: bigint): ((tx: TxView) => Color) {
return (tx: TxView) => {
- if ((tx.bigintFlags & flags) === flags) {
+ if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (tx.bigintFlags & flags) > 0n)) {
return defaultColorFunction(tx);
} else {
return defaultColorFunction(
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
index 85e7eebb1..7cc458e60 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,11 +1,13 @@
diff --git a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
index 8dad6a9c1..7fb036718 100644
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -18,8 +18,11 @@ import TxView from '../block-overview-graph/tx-view';
})
export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
@Input() index: number;
+ @Input() resolution = 86;
@Input() showFilters: boolean = false;
@Input() overrideColors: ((tx: TxView) => Color) | null = null;
+ @Input() filterFlags: bigint | undefined = undefined;
+ @Input() filterMode: 'and' | 'or' = 'and';
@Output() txPreviewEvent = new EventEmitter();
@ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;
diff --git a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
index c07042605..310b9e9de 100644
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -26,7 +26,7 @@
height: 345px;
}
@media (min-width: 992px) {
- height: 442px;
+ height: 472px;
}
}
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 403107bf2..bf254a9a8 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -18,13 +18,27 @@
-
- Mempool Goggles: Next Block
+
+ Mempool Goggles: {{ goggleCycle[goggleIndex].name }}
+
+
+ {{ filter.name }}
+
+
diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss
index f8549e166..f6362bc21 100644
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@@ -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;
}
}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 505fecc14..cd6097a43 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -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;
}
}
}