address utxo chart color by age & updates

frontend/src/app/components/address/address.component.ts

@@ -319,6 +319,7 @@ export class AddressComponent implements OnInit, OnDestroy {
           this.transactions = this.transactions.slice();
           this.mempoolStats.removeTx(transaction);
           this.audioService.playSound('magic');
+          this.confirmTransaction(tx);
         } else {
           if (this.addTransaction(transaction, false)) {
             this.audioService.playSound('magic');
@@ -345,10 +346,12 @@ export class AddressComponent implements OnInit, OnDestroy {
     }
 
     // update utxos in-place
+    let utxosChanged = false;
     for (const vin of transaction.vin) {
       const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === vin.txid && utxo.vout === vin.vout);
       if (utxoIndex !== -1) {
         this.utxos.splice(utxoIndex, 1);
+        utxosChanged = true;
       }
     }
     for (const [index, vout] of transaction.vout.entries()) {
@@ -359,8 +362,12 @@ export class AddressComponent implements OnInit, OnDestroy {
           value: vout.value,
           status: JSON.parse(JSON.stringify(transaction.status)),
         });
+        utxosChanged = true;
       }
     }
+    if (utxosChanged) {
+      this.utxos = this.utxos.slice();
+    }
     return true;
   }
 
@@ -374,6 +381,7 @@ export class AddressComponent implements OnInit, OnDestroy {
     this.transactions = this.transactions.slice();
 
     // update utxos in-place
+    let utxosChanged = false;
     for (const vin of transaction.vin) {
       if (vin.prevout?.scriptpubkey_address === this.address.address) {
         this.utxos.push({
@@ -382,6 +390,7 @@ export class AddressComponent implements OnInit, OnDestroy {
           value: vin.prevout.value,
           status: { confirmed: true }, // Assuming the input was confirmed
         });
+        utxosChanged = true;
       }
     }
     for (const [index, vout] of transaction.vout.entries()) {
@@ -389,13 +398,43 @@ export class AddressComponent implements OnInit, OnDestroy {
         const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === transaction.txid && utxo.vout === index);
         if (utxoIndex !== -1) {
           this.utxos.splice(utxoIndex, 1);
+          utxosChanged = true;
         }
       }
     }
+    if (utxosChanged) {
+      this.utxos = this.utxos.slice();
+    }
 
     return true;
   }
 
+  confirmTransaction(transaction: Transaction): void {
+    // update utxos in-place
+    let utxosChanged = false;
+    for (const vin of transaction.vin) {
+      if (vin.prevout?.scriptpubkey_address === this.address.address) {
+        const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === vin.txid && utxo.vout === vin.vout);
+        if (utxoIndex !== -1) {
+          this.utxos[utxoIndex].status = JSON.parse(JSON.stringify(transaction.status));
+          utxosChanged = true;
+        }
+      }
+    }
+    for (const [index, vout] of transaction.vout.entries()) {
+      if (vout.scriptpubkey_address === this.address.address) {
+        const utxoIndex = this.utxos.findIndex((utxo) => utxo.txid === transaction.txid && utxo.vout === index);
+        if (utxoIndex !== -1) {
+          this.utxos[utxoIndex].status = JSON.parse(JSON.stringify(transaction.status));
+          utxosChanged = true;
+        }
+      }
+    }
+    if (utxosChanged) {
+      this.utxos = this.utxos.slice();
+    }
+  }
+
   loadMore(): void {
     if (this.isLoadingTransactions || this.fullyLoaded) {
       return;

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

@@ -11,6 +11,10 @@ export function hexToColor(hex: string): Color {
   };
 }
 
+export function colorToHex(color: Color): string {
+  return [color.r, color.g, color.b].map(c => Math.round(c * 255).toString(16)).join('');
+}
+
 export function desaturate(color: Color, amount: number): Color {
   const gray = (color.r + color.g + color.b) / 6;
   return {
@@ -30,6 +34,15 @@ export function darken(color: Color, amount: number): Color {
   };
 }
 
+export function mix(color1: Color, color2: Color, amount: number): Color {
+  return {
+    r: color1.r * (1 - amount) + color2.r * amount,
+    g: color1.g * (1 - amount) + color2.g * amount,
+    b: color1.b * (1 - amount) + color2.b * amount,
+    a: color1.a * (1 - amount) + color2.a * amount,
+  };
+}
+
 export function setOpacity(color: Color, opacity: number): Color {
   return {
     ...color,

frontend/src/app/components/time/time.component.ts

@@ -3,6 +3,28 @@ import { StateService } from '../../services/state.service';
 import { dates } from '../../shared/i18n/dates';
 import { DatePipe } from '@angular/common';
 
+const datePipe = new DatePipe(navigator.language || 'en-US');
+
+const intervals = {
+  year: 31536000,
+  month: 2592000,
+  week: 604800,
+  day: 86400,
+  hour: 3600,
+  minute: 60,
+  second: 1
+};
+
+const precisionThresholds = {
+  year: 100,
+  month: 18,
+  week: 12,
+  day: 31,
+  hour: 48,
+  minute: 90,
+  second: 90
+};
+
 @Component({
   selector: 'app-time',
   templateUrl: './time.component.html',
@@ -12,19 +34,9 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   interval: number;
   text: string;
   tooltip: string;
-  precisionThresholds = {
-    year: 100,
-    month: 18,
-    week: 12,
-    day: 31,
-    hour: 48,
-    minute: 90,
-    second: 90
-  };
-  intervals = {};
 
   @Input() time: number;
-  @Input() dateString: number;
+  @Input() dateString: string;
   @Input() kind: 'plain' | 'since' | 'until' | 'span' | 'before' | 'within' = 'plain';
   @Input() fastRender = false;
   @Input() fixedRender = false;
@@ -40,37 +52,25 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
   constructor(
     private ref: ChangeDetectorRef,
     private stateService: StateService,
-    private datePipe: DatePipe,
+  ) {}
-  ) {
-      this.intervals = {
-        year: 31536000,
-        month: 2592000,
-        week: 604800,
-        day: 86400,
-        hour: 3600,
-        minute: 60,
-        second: 1
-      };
-  }
 
   ngOnInit() {
+    this.calculateTime();
     if(this.fixedRender){
-      this.text = this.calculate();
       return;
     }
     if (!this.stateService.isBrowser) {
-      this.text = this.calculate();
       this.ref.markForCheck();
       return;
     }
     this.interval = window.setInterval(() => {
-      this.text = this.calculate();
+      this.calculateTime();
       this.ref.markForCheck();
     }, 1000 * (this.fastRender ? 1 : 60));
   }
 
   ngOnChanges() {
-    this.text = this.calculate();
+    this.calculateTime();
     this.ref.markForCheck();
   }
 
@@ -78,40 +78,71 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
     clearInterval(this.interval);
   }
 
-  calculate() {
+  calculateTime(): void {
-    if (this.time == null) {
+    const { text, tooltip } = TimeComponent.calculate(
-      return;
+      this.time,
+      this.kind,
+      this.relative,
+      this.precision,
+      this.minUnit,
+      this.showTooltip,
+      this.units,
+      this.dateString,
+      this.lowercaseStart,
+      this.numUnits,
+      this.fractionDigits,
+    );
+    this.text = text;
+    this.tooltip = tooltip;
+  }
+
+  static calculate(
+    time: number,
+    kind: 'plain' | 'since' | 'until' | 'span' | 'before' | 'within',
+    relative: boolean = false,
+    precision: number = 0,
+    minUnit: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' = 'second',
+    showTooltip: boolean = false,
+    units: string[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'],
+    dateString?: string,
+    lowercaseStart: boolean = false,
+    numUnits: number = 1,
+    fractionDigits: number = 0,
+  ): { text: string, tooltip: string } {
+    if (time == null) {
+      return { text: '', tooltip: '' };
     }
 
     let seconds: number;
-    switch (this.kind) {
+    let tooltip: string = '';
+    switch (kind) {
       case 'since':
-        seconds = Math.floor((+new Date() - +new Date(this.dateString || this.time * 1000)) / 1000);
+        seconds = Math.floor((+new Date() - +new Date(dateString || time * 1000)) / 1000);
-        this.tooltip = this.datePipe.transform(new Date(this.dateString || this.time * 1000), 'yyyy-MM-dd HH:mm');
+        tooltip = datePipe.transform(new Date(dateString || time * 1000), 'yyyy-MM-dd HH:mm');
         break;
       case 'until':
       case 'within':
-        seconds = (+new Date(this.time) - +new Date()) / 1000;
+        seconds = (+new Date(time) - +new Date()) / 1000;
-        this.tooltip = this.datePipe.transform(new Date(this.time), 'yyyy-MM-dd HH:mm');
+        tooltip = datePipe.transform(new Date(time), 'yyyy-MM-dd HH:mm');
         break;
       default:
-        seconds = Math.floor(this.time);
+        seconds = Math.floor(time);
-        this.tooltip = '';
+        tooltip = '';
     }
 
-    if (!this.showTooltip || this.relative) {
+    if (!showTooltip || relative) {
-      this.tooltip = '';
+      tooltip = '';
     }
 
-    if (seconds < 1 && this.kind === 'span') {
+    if (seconds < 1 && kind === 'span') {
-      return $localize`:@@date-base.immediately:Immediately`;
+      return { tooltip, text: $localize`:@@date-base.immediately:Immediately` };
     } else if (seconds < 60) {
-      if (this.relative || this.kind === 'since') {
+      if (relative || kind === 'since') {
-        if (this.lowercaseStart) {
+        if (lowercaseStart) {
-          return $localize`:@@date-base.just-now:Just now`.charAt(0).toLowerCase() + $localize`:@@date-base.just-now:Just now`.slice(1);
+          return { tooltip, text: $localize`:@@date-base.just-now:Just now`.charAt(0).toLowerCase() + $localize`:@@date-base.just-now:Just now`.slice(1) };
         }
-        return $localize`:@@date-base.just-now:Just now`;
+        return { tooltip, text: $localize`:@@date-base.just-now:Just now` };
-      } else if (this.kind === 'until' || this.kind === 'within') {
+      } else if (kind === 'until' || kind === 'within') {
         seconds = 60;
       }
     }
@@ -119,44 +150,44 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
     let counter: number;
     const result = [];
     let usedUnits = 0;
-    for (const [index, unit] of this.units.entries()) {
+    for (const [index, unit] of units.entries()) {
-      let precisionUnit = this.units[Math.min(this.units.length - 1, index + this.precision)];
+      let precisionUnit = units[Math.min(units.length - 1, index + precision)];
-      counter = Math.floor(seconds / this.intervals[unit]);
+      counter = Math.floor(seconds / intervals[unit]);
-      const precisionCounter = Math.round(seconds / this.intervals[precisionUnit]);
+      const precisionCounter = Math.round(seconds / intervals[precisionUnit]);
-      if (precisionCounter > this.precisionThresholds[precisionUnit]) {
+      if (precisionCounter > precisionThresholds[precisionUnit]) {
         precisionUnit = unit;
       }
-      if (this.units.indexOf(precisionUnit) === this.units.indexOf(this.minUnit)) {
+      if (units.indexOf(precisionUnit) === units.indexOf(minUnit)) {
         counter = Math.max(1, counter);
       }
       if (counter > 0) {
         let rounded;
-        const roundFactor = Math.pow(10,this.fractionDigits || 0);
+        const roundFactor = Math.pow(10,fractionDigits || 0);
-        if ((this.kind === 'until' || this.kind === 'within') && usedUnits < this.numUnits) {
+        if ((kind === 'until' || kind === 'within') && usedUnits < numUnits) {
-          rounded = Math.floor((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
+          rounded = Math.floor((seconds / intervals[precisionUnit]) * roundFactor) / roundFactor;
         } else {
-          rounded = Math.round((seconds / this.intervals[precisionUnit]) * roundFactor) / roundFactor;
+          rounded = Math.round((seconds / intervals[precisionUnit]) * roundFactor) / roundFactor;
         }
-        if ((this.kind !== 'until' && this.kind !== 'within')|| this.numUnits === 1) {
+        if ((kind !== 'until' && kind !== 'within')|| numUnits === 1) {
-          return this.formatTime(this.kind, precisionUnit, rounded);
+          return { tooltip, text: TimeComponent.formatTime(kind, precisionUnit, rounded) };
         } else {
           if (!usedUnits) {
-            result.push(this.formatTime(this.kind, precisionUnit, rounded));
+            result.push(TimeComponent.formatTime(kind, precisionUnit, rounded));
           } else {
-            result.push(this.formatTime('', precisionUnit, rounded));
+            result.push(TimeComponent.formatTime('', precisionUnit, rounded));
           }
-          seconds -= (rounded * this.intervals[precisionUnit]);
+          seconds -= (rounded * intervals[precisionUnit]);
           usedUnits++;
-          if (usedUnits >= this.numUnits) {
+          if (usedUnits >= numUnits) {
-            return result.join(', ');
+            return { tooltip, text: result.join(', ') };
           }
         }
       }
     }
-    return result.join(', ');
+    return { tooltip, text: result.join(', ') };
   }
 
-  private formatTime(kind, unit, number): string {
+  static formatTime(kind, unit, number): string {
     const dateStrings = dates(number);
     switch (kind) {
       case 'since':

frontend/src/app/components/utxo-graph/utxo-graph.component.ts

@@ -6,6 +6,14 @@ import { StateService } from '../../services/state.service';
 import { Router } from '@angular/router';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { renderSats } from '../../shared/common.utils';
+import { colorToHex, hexToColor, mix } from '../block-overview-graph/utils';
+import { TimeComponent } from '../time/time.component';
+
+const newColorHex = '1bd8f4';
+const oldColorHex = '9339f4';
+const pendingColorHex = 'eba814';
+const newColor = hexToColor(newColorHex);
+const oldColor = hexToColor(oldColorHex);
 
 @Component({
   selector: 'app-utxo-graph',
@@ -29,7 +37,8 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
   @Input() widget: boolean = false;
 
   subscription: Subscription;
-  redraw$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  lastUpdate: number = 0;
+  updateInterval;
 
   chartOptions: EChartsOption = {};
   chartInitOptions = {
@@ -46,7 +55,14 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
     private zone: NgZone,
     private router: Router,
     private relativeUrlPipe: RelativeUrlPipe,
-  ) {}
+  ) {
+    // re-render the chart every 10 seconds, to keep the age colors up to date
+    this.updateInterval = setInterval(() => {
+      if (this.lastUpdate < Date.now() - 10000 && this.utxos) {
+        this.prepareChartOptions(this.utxos);
+      }
+    }, 10000);
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.isLoading = true;
@@ -82,7 +98,18 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
     // Naive algorithm to pack circles as tightly as possible without overlaps
     const placedCircles: { x: number, y: number, r: number, utxo: Utxo, distances: number[] }[] = [];
     // Pack in descending order of value, and limit to the top 500 to preserve performance
-    const sortedUtxos = utxos.sort((a, b) => b.value - a.value).slice(0, 500);
+    const sortedUtxos = utxos.sort((a, b) => {
+      if (a.value === b.value) {
+        if (a.status.confirmed && !b.status.confirmed) {
+          return -1;
+        } else if (!a.status.confirmed && b.status.confirmed) {
+          return 1;
+        } else {
+          return a.status.block_height - b.status.block_height;
+        }
+      }
+      return b.value - a.value;
+    }).slice(0, 500);
     let centerOfMass = { x: 0, y: 0 };
     let weightOfMass = 0;
     sortedUtxos.forEach((utxo, index) => {
@@ -192,7 +219,7 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
           const x = datum[2] as number;
           const y = datum[3] as number;
           const r = datum[4] as number;
-          if (r * scale < 3) {
+          if (r * scale < 2) {
             // skip items too small to render cleanly
             return;
           }
@@ -207,7 +234,7 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
                 r: (r * scale) - 1,
               },
               style: {
-                fill: '#5470c6',
+                fill: '#' + this.getColor(utxo),
               }
             },
           ];
@@ -230,7 +257,7 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
             type: 'group',
             children: elements,
           };
-        }
+        },
       }],
       tooltip: {
         backgroundColor: 'rgba(17, 19, 31, 1)',
@@ -247,14 +274,40 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
           return `
           <b style="color: white;">${utxo.txid.slice(0, 6)}...${utxo.txid.slice(-6)}:${utxo.vout}</b>
           <br>
-          ${valueStr}`;
+          ${valueStr}
+          <br>
+          ${utxo.status.confirmed ? 'Confirmed ' + TimeComponent.calculate(utxo.status.block_time, 'since', true, 1, 'minute').text : 'Pending'}
+          `;
         },
       }
     };
+    this.lastUpdate = Date.now();
 
     this.cd.markForCheck();
   }
 
+  getColor(utxo: Utxo): string {
+    if (utxo.status.confirmed) {
+      const age = Date.now() / 1000 - utxo.status.block_time;
+      const oneHour = 60 * 60;
+      const fourYears = 4 * 365 * 24 * 60 * 60;
+
+      if (age < oneHour) {
+        return newColorHex;
+      } else if (age >= fourYears) {
+        return oldColorHex;
+      } else {
+        // Logarithmic scale between 1 hour and 4 years
+        const logAge = Math.log(age / oneHour);
+        const logMax = Math.log(fourYears / oneHour);
+        const t = logAge / logMax;
+        return colorToHex(mix(newColor, oldColor, t));
+      }
+    } else {
+      return pendingColorHex;
+    }
+  }
+
   onChartClick(e): void {
     if (e.data?.[0]?.txid) {
       this.zone.run(() => {
@@ -277,6 +330,7 @@ export class UtxoGraphComponent implements OnChanges, OnDestroy {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
+    clearInterval(this.updateInterval);
   }
 
   isMobile(): boolean {

frontend/src/app/shared/common.utils.ts

@@ -204,12 +204,12 @@ export function renderSats(value: number, network: string, mode: 'sats' | 'btc'
       break;
   }
   if (mode === 'btc' || (mode === 'auto' && value >= 1000000)) {
-    return `${amountShortenerPipe.transform(value / 100000000)} ${prefix}BTC`;
+    return `${amountShortenerPipe.transform(value / 100000000, 2)} ${prefix}BTC`;
   } else {
     if (prefix.length) {
       prefix += '-';
     }
-    return `${amountShortenerPipe.transform(value)} ${prefix}sats`;
+    return `${amountShortenerPipe.transform(value, 2)} ${prefix}sats`;
   }
 }