Merge branch 'master' into simon/lightning-node-channel-skeleton-loaders

frontend/src/app/lightning/channels-statistics/channels-statistics.component.html

@@ -9,44 +9,44 @@
 <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
 
   <div class="fee-estimation-container" *ngIf="mode === 'avg'">
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-capacity">Avg Capacity</h5>
       <div class="card-text">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.avg_capacity || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">sats</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.avg_capacity" [previous]="statistics.previous?.avg_capacity"></app-change>
         </span>
       </div>
     </div>
 
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-feerate">Avg Fee Rate</h5>
       <div class="card-text" i18n-ngbTooltip="ln.average-feerate-desc"
         ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
         placement="bottom">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.avg_fee_rate || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.avg_fee_rate" [previous]="statistics.previous?.avg_fee_rate"></app-change>
         </span>
       </div>
     </div>
 
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-basefee">Avg Base Fee</h5>
       <div class="card-text" i18n-ngbTooltip="ln.average-basefee-desc"
         ngbTooltip="The average base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
         <div class="card-text">
-          <div class="fee-text">
+          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
             {{ statistics.latest?.avg_base_fee_mtokens || 0 | number: '1.0-0' }}
             <span i18n="shared.sat-vbyte|sat/vB">msats</span>
           </div>
-          <span class="fiat">
+          <span class="fiat" *ngIf="statistics.previous">
             <app-change [current]="statistics.latest?.avg_base_fee_mtokens" [previous]="statistics.previous?.avg_base_fee_mtokens"></app-change>
           </span>
         </div>
@@ -55,43 +55,45 @@
   </div>
 
   <div class="fee-estimation-container" *ngIf="mode === 'med'">
-    <div class="item">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.median-capacity">Med Capacity</h5>
       <div class="card-text">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.med_capacity || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">sats</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_capacity" [previous]="statistics.previous?.med_capacity"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
+
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.average-feerate">Med Fee Rate</h5>
       <div class="card-text" i18n-ngbTooltip="ln.median-feerate-desc"
-        ngbTooltip="The average fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
+        ngbTooltip="The median fee rate charged by routing nodes, ignoring fee rates > 0.5% or 5000ppm"
         placement="bottom">
-        <div class="fee-text">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.med_fee_rate || 0 | number: '1.0-0' }}
           <span i18n="shared.sat-vbyte|sat/vB">ppm</span>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_fee_rate" [previous]="statistics.previous?.med_fee_rate"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
+
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
       <h5 class="card-title" i18n="ln.median-basefee">Med Base Fee</h5>
       <div class="card-text" i18n-ngbTooltip="ln.median-basefee-desc"
         ngbTooltip="The median base fee charged by routing nodes, ignoring base fees > 5000ppm" placement="bottom">
         <div class="card-text">
-          <div class="fee-text">
+          <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
             {{ statistics.latest?.med_base_fee_mtokens || 0 | number: '1.0-0' }}
             <span i18n="shared.sat-vbyte|sat/vB">msats</span>
           </div>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.med_base_fee_mtokens" [previous]="statistics.previous?.med_base_fee_mtokens"></app-change>
         </span>
       </div>

frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss

@@ -18,6 +18,10 @@
   }
 }
 
+.fee-estimation-wrapper {
+  min-height: 77px;
+}
+
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
@@ -30,7 +34,10 @@
     width: -webkit-fill-available;
     @media (min-width: 376px) {
       margin: 0 auto 0px;
-    }    
+    }
+    &.more-padding {
+      padding-top: 10px;
+    }  
     &:first-child{
       display: none;
       @media (min-width: 485px) {
@@ -57,6 +64,9 @@
       margin: auto;
       line-height: 1.45;
       padding: 0px 2px;
+      &.no-border {
+        border-bottom: none;
+      }
     }
     .fiat {
       display: block;

frontend/src/app/lightning/node-statistics/node-statistics.component.html

@@ -1,76 +1,64 @@
 <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">
   <div class="fee-estimation-container">
-    <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Capacity</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.average-fee" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.capacity">Capacity</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+        [disableTooltip]="!statistics.previous" placement="bottom">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           <app-amount [satoshis]="statistics.latest?.total_capacity" digitsInfo="1.2-2"></app-amount>
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.total_capacity" [previous]="statistics.previous?.total_capacity">
           </app-change>
         </span>
       </div>
     </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-desc" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+      [disableTooltip]="!statistics.previous">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.node_count || 0 | number }}
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.node_count" [previous]="statistics.previous?.node_count"></app-change>
         </span>
       </div>
     </div>
-    <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.rewards-per-tx-desc" ngbTooltip="Percentage change past week"
-        placement="bottom">
-        <div class="fee-text">
+    <div class="item" [class]="!statistics.previous ? 'more-padding' : ''">
+      <h5 class="card-title" i18n="lightning.channels">Channels</h5>
+      <div class="card-text" i18n-ngbTooltip="mining.percentage-change-last-week" ngbTooltip="Percentage change past week"
+      [disableTooltip]="!statistics.previous">
+        <div class="fee-text" [class]="!statistics.previous ? 'no-border' : ''">
           {{ statistics.latest?.channel_count || 0 | number }}
         </div>
-        <span class="fiat">
+        <span class="fiat" *ngIf="statistics.previous">
           <app-change [current]="statistics.latest?.channel_count" [previous]="statistics.previous?.channel_count">
           </app-change>
         </span>
       </div>
     </div>
-    <!--
-    <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
-      <div class="card-text" i18n-ngbTooltip="mining.average-fee"
-        ngbTooltip="Fee paid on average for each transaction in the past 144 blocks" placement="bottom">
-        <app-amount [satoshis]="statistics.latest.average_channel_size" digitsInfo="1.2-3"></app-amount>
-        <span class="fiat">
-          <app-change [current]="statistics.latest.average_channel_size" [previous]="statistics.previous.average_channel_size"></app-change>
-        </span>
-      </div>
-    </div>
-    -->
   </div>
 </div>
 
 <ng-template #loadingReward>
   <div class="fee-estimation-container loading-container">
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards">Nodes</h5>
+      <h5 class="card-title" i18n="lightning.nodes">Nodes</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.rewards-per-tx">Channels</h5>
+      <h5 class="card-title" i18n="lightning.channels">Channels</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>
       </div>
     </div>
     <div class="item">
-      <h5 class="card-title" i18n="mining.average-fee">Average Channel</h5>
+      <h5 class="card-title" i18n="lightning.average-channels">Average Channel</h5>
       <div class="card-text">
         <div class="skeleton-loader"></div>
         <div class="skeleton-loader"></div>

frontend/src/app/lightning/node-statistics/node-statistics.component.scss

@@ -18,6 +18,10 @@
   }
 }
 
+.fee-estimation-wrapper {
+  min-height: 77px;
+}
+
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
@@ -30,7 +34,10 @@
     width: -webkit-fill-available;
     @media (min-width: 376px) {
       margin: 0 auto 0px;
-    }    
+    }
+    &.more-padding {
+      padding-top: 10px;
+    }  
     &:first-child{
       display: none;
       @media (min-width: 485px) {
@@ -57,6 +64,9 @@
       margin: auto;
       line-height: 1.45;
       padding: 0px 2px;
+      &.no-border {
+        border-bottom: none;
+      }
     }
     .fiat {
       display: block;

frontend/src/app/lightning/nodes-channels-map/nodes-channels-map.component.ts

@@ -238,7 +238,7 @@ export class NodesChannelsMap implements OnInit {
         roam: this.style === 'widget' ? false : true,
         itemStyle: {
           borderColor: 'black',
-          color: '#ffffff44'
+          color: '#272b3f'
         },
         scaleLimit: {
           min: 1.3,

frontend/src/app/lightning/nodes-channels/node-channels.component.ts

@@ -44,13 +44,13 @@ export class NodeChannels implements OnChanges {
         switchMap((response) => {
           this.isLoading = true;
           if ((response.body?.length ?? 0) <= 0) {
-            return [];
+            this.isLoading = false;
+            return [''];
           }
           return [response.body];
         }),
         tap((body: any[]) => {
-          if (body.length === 0) {
-            this.isLoading = false;
+          if (body.length === 0 || body[0].length === 0) {
             return;
           }
           const biggestCapacity = body[0].capacity;
@@ -130,10 +130,6 @@ export class NodeChannels implements OnChanges {
   }
 
   onChartInit(ec: ECharts): void {
-    if (this.chartInstance !== undefined) {
-      return;
-    }
-
     this.chartInstance = ec;
 
     this.chartInstance.on('click', (e) => {

frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html

@@ -28,7 +28,7 @@
 
   <div class="card-header" *ngIf="!widget">
     <div class="d-flex d-md-block align-items-baseline" style="margin-bottom: -5px">
-      <span i18n="lightning.top-100-isp-ln">Top 100 ISP hosting LN nodes</span>
+      <span i18n="lightning.top-100-isp-ln">Top 100 ISPs hosting LN nodes</span>
       <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
         <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
       </button>

frontend/src/index.bisq.html

@@ -5,7 +5,7 @@
   <title>mempool - Bisq Markets</title>
   <base href="/">
 
-  <meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bisq Network.">
+  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
 
   <meta property="og:image" content="https://bisq.markets/resources/bisq/bisq-markets-preview.png" />
   <meta property="og:image:type" content="image/jpeg" />
@@ -14,7 +14,7 @@
   <meta property="twitter:site" content="https://bisq.markets/">
   <meta property="twitter:creator" content="@bisq_network">
   <meta property="twitter:title" content="The Mempool Open Source Project™">
-  <meta property="twitter:description" content="Our self-hosted markets explorer for the Bisq community.">
+  <meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
   <meta property="twitter:image:src" content="https://bisq.markets/resources/bisq/bisq-markets-preview.png" />
   <meta property="twitter:domain" content="bisq.markets">
 

frontend/src/index.liquid.html

@@ -5,7 +5,7 @@
   <title>mempool - Liquid Network</title>
   <base href="/">
 
-  <meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Liquid Network.">
+  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem.">
   <meta property="og:image" content="https://liquid.network/resources/liquid/liquid-network-preview.png" />
   <meta property="og:image:type" content="image/png" />
   <meta property="og:image:width" content="1000" />
@@ -14,7 +14,7 @@
   <meta property="twitter:site" content="@mempool">
   <meta property="twitter:creator" content="@mempool">
   <meta property="twitter:title" content="The Mempool Open Source Project™">
-  <meta property="twitter:description" content="Our self-hosted network explorer for the Liquid community.">
+  <meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
   <meta property="twitter:image:src" content="https://liquid.network/resources/liquid/liquid-network-preview.png" />
   <meta property="twitter:domain" content="liquid.network">
   

frontend/src/index.mempool.html

@@ -5,7 +5,7 @@
   <title>mempool - Bitcoin Explorer</title>
   <base href="/">
 
-  <meta name="description" content="The Mempool Open Source Project™ - our self-hosted explorer for the Bitcoin community." />
+  <meta name="description" content="The Mempool Open Source Project™ - Explore the full Bitcoin ecosystem." />
   <meta property="og:image" content="https://mempool.space/resources/mempool-space-preview.png" />
   <meta property="og:image:type" content="image/png" />
   <meta property="og:image:width" content="1000" />
@@ -14,7 +14,7 @@
   <meta property="twitter:site" content="@mempool">
   <meta property="twitter:creator" content="@mempool">
   <meta property="twitter:title" content="The Mempool Open Source Project™">
-  <meta property="twitter:description" content="Our self-hosted mempool explorer for the Bitcoin community." />
+  <meta property="twitter:description" content="Explore the full Bitcoin ecosystem with mempool.space™" />
   <meta property="twitter:image:src" content="https://mempool.space/resources/mempool-space-preview.png" />
   <meta property="twitter:domain" content="mempool.space">