New opacity-based age Goggles

frontend/src/app/app.constants.ts

@@ -39,8 +39,6 @@ export const mempoolFeeColors = [
   'ae005b',
 ];
 
-export const mempoolAgeColors = [  '28007d', '21017d', '1c027d', '14047d', '0d057d', '06067d', '081186',  '09188c', '0b2395', '0c2a9b', '0e37a6', '0f3caa', '1045b2', '114fbb',  '1254bf', '155cbf', '1965bf', '1e70be', '2076be', '2581bd', '2889bd',  '2d94bc', '309dbc', '34a6bc', '39b1bb', '3cbabb', '37bbb3', '32baa9',  '2bb99c', '25b993', '21b88c', '1db785', '19b67e', '14b475', '0eb36c',  '08b162', '02b059', '00ae53'];
-
 export const chartColors = [
   "#D81B60",
   "#8E24AA",

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

@@ -8,7 +8,7 @@ import { Color, Position } from './sprite-types';
 import { Price } from '../../services/price.service';
 import { StateService } from '../../services/state.service';
 import { Subscription } from 'rxjs';
-import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors } from './utils';
+import { defaultColorFunction, setOpacity, defaultAuditColors, defaultColors, ageColorFunction } from './utils';
 import { ActiveFilter, FilterMode, toFlags } from '../../shared/filters.utils';
 import { detectWebGL } from '../../shared/graphs.utils';
 
@@ -561,11 +561,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
   getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
     return (tx: TxView) => {
       if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        return defaultColorFunction(tx, defaultColors[gradient], defaultAuditColors, this.relativeTime || (Date.now() / 1000));
+        return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
       } else {
-        return defaultColorFunction(
+        return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
           tx,
-          defaultColors['unmatched' + gradient],
+          defaultColors.unmatchedfee,
           unmatchedAuditColors,
           this.relativeTime || (Date.now() / 1000)
         );

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

@@ -1,4 +1,4 @@
-import { feeLevels, mempoolAgeColors, mempoolFeeColors } from '../../app.constants';
+import { feeLevels, mempoolFeeColors } from '../../app.constants';
 import { Color } from './sprite-types';
 import TxView from './tx-view';
 
@@ -52,12 +52,6 @@ const defaultColors: { [key: string]: ColorPalette } = {
     marginal: [],
     baseLevel: (tx: TxView, rate: number) => feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1
   },
-  age: {
-    base: mempoolAgeColors.map(hexToColor),
-    audit: [],
-    marginal: [],
-    baseLevel: (tx: TxView, rate: number, relativeTime: number) => (!tx.time ? 0 : Math.max(0, Math.round(1.25 * Math.log2((Math.max(1, relativeTime - tx.time))))))
-  },
 }
 for (const key in defaultColors) {
   const base = defaultColors[key].base;
@@ -131,4 +125,21 @@ export function defaultColorFunction(
         return levelColor;
       }
   }
+}
+
+export function ageColorFunction(
+  tx: TxView,
+  colors: { base: Color[], audit: Color[], marginal: Color[], baseLevel: (tx: TxView, rate: number, time: number) => number } = defaultColors.fee,
+  auditColors: { [status: string]: Color } = defaultAuditColors,
+  relativeTime?: number,
+): Color {
+  const color = defaultColorFunction(tx, colors, auditColors, relativeTime); 
+
+  const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
+  return {
+    r: color.r,
+    g: color.g,
+    b: color.b,
+    a: color.a * (1 - ageLevel)
+  };
 }