Merge pull request #4888 from mempool/mononaut/tint

Goggles age tint by default

frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts

@@ -13,7 +13,7 @@ import { ServicesApiServices } from '../../../services/services-api.service';
 import { detectWebGL } from '../../../shared/graphs.utils';
 
 const acceleratedColor: Color = hexToColor('8F5FF6');
-const normalColors = mempoolFeeColors.map(hex => hexToColor(hex + '5F'));
+const normalColors = mempoolFeeColors.map(hex => hexToColor(hex.slice(0,6) + '5F'));
 
 interface AccelerationBlock extends BlockExtended {
   accelerationCount: number,

frontend/src/app/components/block-filters/block-filters.component.html

@@ -27,10 +27,10 @@
         </div>
       </div>
       <div class="filter-element">
-        <h5 i18n="mempool-goggles.gradient">Gradient</h5>
+        <h5 i18n="mempool-goggles.tint">Tint</h5>
         <div class="btn-group btn-group-toggle">
           <label class="btn btn-xs yellow mode-toggle" [class.active]="gradientMode === 'fee'">
-            <input type="radio" [value]="'fee'" fragment="default" (click)="setGradientMode('fee')"><ng-container i18n="mempool-goggles.default">Default</ng-container>
+            <input type="radio" [value]="'fee'" fragment="classic" (click)="setGradientMode('fee')"><ng-container i18n="mempool-goggles.classic">Classic</ng-container>
           </label>
           <label class="btn btn-xs blue mode-toggle" [class.active]="gradientMode === 'age'">
             <input type="radio" [value]="'age'" fragment="age" (click)="setGradientMode('age')"><ng-container i18n="mempool-goggles.age">Age</ng-container>

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -549,7 +549,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   }
 
   getColorFunction(): ((tx: TxView) => Color) {
-    if (this.filterFlags) {
+    if (this.overrideColors) {
+      return this.overrideColors;
+    } else if (this.filterFlags) {
       return this.getFilterColorFunction(this.filterFlags, this.gradientMode);
     } else if (this.activeFilterFlags) {
       return this.getFilterColorFunction(this.activeFilterFlags, this.gradientMode);

frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html

@@ -8,6 +8,7 @@
   [showFilters]="showFilters"
   [filterFlags]="filterFlags"
   [filterMode]="filterMode"
+  [gradientMode]="gradientMode"
   [excludeFilters]="['nonstandard']"
   [overrideColors]="overrideColors"
   (txClickEvent)="onTxClick($event)"

frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts

@@ -11,7 +11,7 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
 import { Router } from '@angular/router';
 import { Color } from '../block-overview-graph/sprite-types';
 import TxView from '../block-overview-graph/tx-view';
-import { FilterMode } from '../../shared/filters.utils';
+import { FilterMode, GradientMode } from '../../shared/filters.utils';
 
 @Component({
   selector: 'app-mempool-block-overview',
@@ -25,6 +25,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
   @Input() overrideColors: ((tx: TxView) => Color) | null = null;
   @Input() filterFlags: bigint | undefined = undefined;
   @Input() filterMode: FilterMode = 'and';
+  @Input() gradientMode: GradientMode = 'fee';
   @Output() txPreviewEvent = new EventEmitter<TransactionStripped | void>();
 
   @ViewChild('blockGraph') blockGraph: BlockOverviewGraphComponent;

frontend/src/app/dashboard/dashboard.component.html

@@ -35,6 +35,7 @@
               [resolution]="goggleResolution"
               [filterFlags]="goggleFlags"
               [filterMode]="goggleMode"
+              [gradientMode]="gradientMode"
             ></app-mempool-block-overview>
           </div>
         </div>

frontend/src/app/dashboard/dashboard.component.ts

@@ -75,14 +75,14 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
 
   goggleResolution = 82;
   goggleCycle: { index: number, name: string, mode: FilterMode, filters: string[], gradient: GradientMode }[] = [
-    { index: 0, name: $localize`:@@dfc3c34e182ea73c5d784ff7c8135f087992dac1:All`, mode: 'and', filters: [], gradient: 'fee' },
+    { index: 0, name: $localize`:@@dfc3c34e182ea73c5d784ff7c8135f087992dac1:All`, mode: 'and', filters: [], gradient: 'age' },
     { index: 1, name: $localize`Consolidation`, mode: 'and', filters: ['consolidation'], gradient: 'fee' },
     { index: 2, name: $localize`Coinjoin`, mode: 'and', filters: ['coinjoin'], gradient: 'fee' },
     { index: 3, name: $localize`Data`, mode: 'or', filters: ['inscription', 'fake_pubkey', 'op_return'], gradient: 'fee' },
   ];
   goggleFlags = 0n;
   goggleMode: FilterMode = 'and';
-  gradientMode: GradientMode = 'fee';
+  gradientMode: GradientMode = 'age';
   goggleIndex = 0;
 
   private destroy$ = new Subject();
@@ -132,7 +132,7 @@ export class DashboardComponent implements OnInit, OnDestroy, AfterViewInit {
             this.goggleIndex = goggle.index;
             this.goggleFlags = toFlags(goggle.filters);
             this.goggleMode = goggle.mode;
-            this.gradientMode = goggle.gradient;
+            this.gradientMode = active.gradient;
             return;
           }
         }

frontend/src/app/services/state.service.ts

@@ -154,7 +154,7 @@ export class StateService {
   searchFocus$: Subject<boolean> = new Subject<boolean>();
   menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
-  activeGoggles$: BehaviorSubject<ActiveFilter> = new BehaviorSubject({ mode: 'and', filters: [], gradient: 'fee' });
+  activeGoggles$: BehaviorSubject<ActiveFilter> = new BehaviorSubject({ mode: 'and', filters: [], gradient: 'age' });
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,