From ba007a4b17d1d04b9099599610f29a8017d0e543 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 24 May 2020 22:23:56 +0700
Subject: [PATCH] Use dynamic gradient based on fee levels on mempool blocks.
 fixes #64

---
 frontend/src/app/app.constants.ts             | 26 ++++++++++++++
 .../fee-distribution-graph.component.ts       |  1 -
 .../mempool-blocks.component.html             |  2 +-
 .../mempool-blocks.component.ts               | 36 +++++++++++++++----
 4 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/app/app.constants.ts

diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
new file mode 100644
index 000000000..e89f32429
--- /dev/null
+++ b/frontend/src/app/app.constants.ts
@@ -0,0 +1,26 @@
+export const mempoolFeeColors = [
+  'bd7c13',
+  'bd7718',
+  'bd7619',
+  'bd721d',
+  'be6e21',
+  'be6b24',
+  'be6827',
+  'be652a',
+  'be622d',
+  'be5f30',
+  'be5c33',
+  'bf543b',
+  'c0513e',
+  'c04d42',
+  'c14a45',
+  'c2454a',
+  'c3424d',
+  'c33f50',
+  'c3404f',
+  'c43955',
+  'c5345a',
+];
+
+export const feeLevels = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 125, 150, 175, 200,
+  250, 300, 350, 400, 500, 600, 700, 800, 900, 1000, 1200, 1400, 1600, 1800, 2000];
diff --git a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
index 9b8946e0a..db3dbb734 100644
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -1,5 +1,4 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { VbytesPipe } from 'src/app/pipes/bytes-pipe/vbytes.pipe';
 import * as Chartist from 'chartist';
 
 @Component({
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 76a88f9f4..2b0f1008b 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -1,7 +1,7 @@
 <div class="mempool-blocks-container">
   <div class="flashing">
     <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
-      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
+      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]">
         <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
         <div class="block-body" *ngIf="mempoolBlocks?.length">
           <div class="fees">
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index e26102af7..da28b3fea 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -4,15 +4,17 @@ import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
 import { Router } from '@angular/router';
 import { take } from 'rxjs/operators';
+import { feeLevels, mempoolFeeColors } from 'src/app/app.constants';
 
 @Component({
   selector: 'app-mempool-blocks',
   templateUrl: './mempool-blocks.component.html',
-  styleUrls: ['./mempool-blocks.component.scss']
+  styleUrls: ['./mempool-blocks.component.scss'],
 })
 export class MempoolBlocksComponent implements OnInit, OnDestroy {
   mempoolBlocks: MempoolBlock[];
   mempoolBlocksFull: MempoolBlock[];
+  mempoolBlockStyles = [];
   mempoolBlocksSubscription: Subscription;
   network = '';
 
@@ -27,7 +29,6 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   txFeePerVSize: number;
 
   resetTransitionTimeout: number;
-
   blocksLeftToHalving: number;
 
   constructor(
@@ -47,6 +48,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
         const stringifiedBlocks = JSON.stringify(blocks);
         this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
         this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));
+        this.updateMempoolBlockStyles();
         this.calculateTransactionPosition();
       });
 
@@ -132,12 +134,34 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
     return medianNr;
   }
 
-  getStyleForMempoolBlockAtIndex(index: number) {
-    const greenBackgroundHeight = 100 - this.mempoolBlocks[index].blockVSize / 1000000 * 100;
+  updateMempoolBlockStyles() {
+    this.mempoolBlockStyles = [];
+    this.mempoolBlocksFull.forEach((block, i) => this.mempoolBlockStyles.push(this.getStyleForMempoolBlock(block, i)));
+  }
+
+  getStyleForMempoolBlock(mempoolBlock: MempoolBlock, index: number) {
+    const emptyBackgroundSpacePercentage = Math.max(100 - mempoolBlock.blockVSize / 1000000 * 100, 0);
+    const backgroundGradients = [`repeating-linear-gradient(to right,  #554b45, #554b45 ${emptyBackgroundSpacePercentage}%`];
+    const gradientColors = [];
+
+    const trimmedFeeRange = index === 0 ? mempoolBlock.feeRange.slice(0, -1) : mempoolBlock.feeRange;
+
+    trimmedFeeRange.forEach((fee: number) => {
+      let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => fee >= feeLvl);
+      feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
+      gradientColors.push(mempoolFeeColors[feeLevelIndex - 1] || mempoolFeeColors[mempoolFeeColors.length - 1]);
+    });
+
+    gradientColors.forEach((color, i, gc) => {
+      backgroundGradients.push(`
+        #${i === 0 ? color : gc[i - 1]} ${ i === 0 ? emptyBackgroundSpacePercentage : (i / gradientColors.length) * 100 }%,
+        #${color} ${Math.round(((i + 1) / gradientColors.length) * 100)}%
+      `);
+    });
+
     return {
       'right': 40 + index * 155 + 'px',
-      'background': `repeating-linear-gradient(to right,  #554b45, #554b45 ${greenBackgroundHeight}%,
-        #bd7c13 ${Math.max(greenBackgroundHeight, 0)}%, #c5345a 100%)`,
+      'background': backgroundGradients.join(',') + ')'
     };
   }