Only display 0-1sat/vB on Liquid.

frontend/src/app/components/statistics/chartist.component.scss

@@ -48,6 +48,7 @@
       height: 12px;
       position: absolute;
       left: 0;
+      bottom: 3px;
       content: '';
       border: 3px solid transparent;
       border-radius: 2px;

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

@@ -13,6 +13,7 @@ import { ApiService } from '../../services/api.service';
 import * as Chartist from 'chartist';
 import { StateService } from 'src/app/services/state.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-statistics',
@@ -20,6 +21,8 @@ import { SeoService } from 'src/app/services/seo.service';
   styleUrls: ['./statistics.component.scss']
 })
 export class StatisticsComponent implements OnInit {
+  network = environment.network;
+
   loading = true;
   spinnerLoading = false;
 
@@ -99,7 +102,10 @@ export class StatisticsComponent implements OnInit {
                return '500+';
               }
               if (i === 0) {
-                return '1 sat/vbyte';
+                if (this.network === 'liquid') {
+                  return '0 - 1';
+                }
+                return '1 sat/vB';
               }
               return arr[i - 1] + ' - ' + sats;
             })
@@ -194,6 +200,11 @@ export class StatisticsComponent implements OnInit {
 
     const finalArrayVbyte = this.generateArray(mempoolStats);
 
+    // Only Liquid has lower than 1 sat/vb transactions
+    if (this.network !== 'liquid') {
+      finalArrayVbyte.shift();
+    }
+
     this.mempoolVsizeFeesData = {
       labels: labels,
       series: finalArrayVbyte

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

@@ -8,6 +8,7 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from 'src/app/services/state.service';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-television',
@@ -16,6 +17,7 @@ import { SeoService } from 'src/app/services/seo.service';
 })
 export class TelevisionComponent implements OnInit {
   loading = true;
+  network = environment.network;
 
   mempoolStats: OptimizedMempoolStats[] = [];
   mempoolVsizeFeesData: any;
@@ -65,7 +67,10 @@ export class TelevisionComponent implements OnInit {
                return '350+';
               }
               if (i === 0) {
-                return '1 sat/vbyte';
+                if (this.network === 'liquid') {
+                  return '0 - 1';
+                }
+                return '1 sat/vB';
               }
               return arr[i - 1] + ' - ' + sats;
             })
@@ -94,6 +99,11 @@ export class TelevisionComponent implements OnInit {
 
     const finalArrayVbyte = this.generateArray(mempoolStats);
 
+    // Only Liquid has lower than 1 sat/vb transactions
+    if (this.network !== 'liquid') {
+      finalArrayVbyte.shift();
+    }
+
     this.mempoolVsizeFeesData = {
       labels: labels,
       series: finalArrayVbyte

frontend/src/styles.scss

@@ -129,7 +129,6 @@ body {
   margin-bottom: 0;
 }
 
-
 .close {
   color: #fff;
 }
@@ -162,7 +161,6 @@ body {
 /* Chartist */
 $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z);
 $ct-series-colors: (
-  #b71c1c,
   #D81B60,
   #8E24AA,
   #5E35B1,
@@ -262,6 +260,7 @@ $ct-series-colors: (
       height: 12px;
       position: absolute;
       left: 0;
+      bottom: 3px;
       content: '';
       border: 3px solid transparent;
       border-radius: 2px;