Merge branch 'master' into nymkappa/feature/channel-map-color

2022-08-30 15:35:18 +02:00
parent 6b248fb46d 2f42dc9898
commit 56ec8b900c
47 changed files with 570 additions and 221 deletions
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 1130px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 1130px) {
    position: relative;
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -61,7 +61,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -55,7 +55,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -39,7 +39,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -11,7 +11,7 @@
          </div>  

          <form [formGroup]="radioGroupForm" class="formRadioGroup"
-            [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
+            [class]="(stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING) ? 'mining' : 'no-menu'" (click)="saveGraphPreference()">
            <div *ngIf="!isMobile()" class="btn-group btn-group-toggle">
              <label ngbButtonLabel class="btn-primary btn-sm mr-2">
                <a [routerLink]="['/tv' | relativeUrl]" style="color: white" id="btn-tv">
--- a/frontend/src/app/components/statistics/statistics.component.scss
+++ b/frontend/src/app/components/statistics/statistics.component.scss
@@ -55,13 +55,19 @@
 .formRadioGroup.mining {
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
    top: 0px;
  }
 }
+.formRadioGroup.no-menu {
+  @media (min-width: 991px) {
+    position: relative;
+    top: -33px;
+  }
+}

 .loading{
  display: flex;
--- a/frontend/src/app/lightning/channels-list/channels-list.component.html
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.html
@@ -10,7 +10,7 @@
    </div>
  </form>

-  <table class="table table-borderless" *ngIf="response.channels.length > 0">
+  <table class="table table-borderless" *ngIf="response.channels.length > 0" [style]="isLoading ? 'opacity: 0.75' : ''">
    <ng-container *ngTemplateOutlet="tableHeader"></ng-container>
    <tbody>
      <tr *ngFor="let channel of response.channels; let i = index;">
--- a/frontend/src/app/lightning/channels-list/channels-list.component.ts
+++ b/frontend/src/app/lightning/channels-list/channels-list.component.ts
@@ -14,6 +14,7 @@ import { LightningApiService } from '../lightning-api.service';
 export class ChannelsListComponent implements OnInit, OnChanges {
  @Input() publicKey: string;
  @Output() channelsStatusChangedEvent = new EventEmitter<string>();
+  @Output() loadingEvent = new EventEmitter<boolean>(false);
  channels$: Observable<any>;

  // @ts-ignore
@@ -26,6 +27,7 @@ export class ChannelsListComponent implements OnInit, OnChanges {
  defaultStatus = 'open';
  status = 'open';
  publicKeySize = 25;
+  isLoading = false;

  constructor(
    private lightningApiService: LightningApiService,
@@ -56,6 +58,8 @@ export class ChannelsListComponent implements OnInit, OnChanges {
    )
    .pipe(
      tap((val) => {
+        this.isLoading = true;
+        this.loadingEvent.emit(true);
        if (typeof val === 'string') {
          this.status = val;
          this.page = 1;
@@ -64,10 +68,12 @@ export class ChannelsListComponent implements OnInit, OnChanges {
        }
      }),
      switchMap(() => {
-          this.channelsStatusChangedEvent.emit(this.status);
-          return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
+        this.channelsStatusChangedEvent.emit(this.status);
+        return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (this.page - 1) * this.itemsPerPage, this.status);
      }),
      map((response) => {
+        this.isLoading = false;
+        this.loadingEvent.emit(false);
        return {
          channels: response.body,
          totalItems: parseInt(response.headers.get('x-total-count'), 10)
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.html
+++ b/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>
--- a/frontend/src/app/lightning/channels-statistics/channels-statistics.component.scss
+++ b/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;
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.html
+++ b/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>
--- a/frontend/src/app/lightning/node-statistics/node-statistics.component.scss
+++ b/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;
--- a/frontend/src/app/lightning/node/node.component.html
+++ b/frontend/src/app/lightning/node/node.component.html
@@ -133,7 +133,7 @@

    <app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>

-    <div class="d-flex justify-content-between">
+    <div class="d-flex">
      <h2 *ngIf="channelsListStatus === 'open'">
        <span i18n="lightning.open-channels">Open channels</span>
        <span> ({{ node.opened_channel_count }})</span>
@@ -142,10 +142,13 @@
        <span i18n="lightning.open-channels">Closed channels</span>
        <span> ({{ node.closed_channel_count }})</span>
      </h2>
+      <div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
    </div>

    <app-channels-list [publicKey]="node.public_key"
-      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
+      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
+      (loadingEvent)="onLoadingEvent($event)"
+    ></app-channels-list>
  </div>
    
 </div>
--- a/frontend/src/app/lightning/node/node.component.scss
+++ b/frontend/src/app/lightning/node/node.component.scss
@@ -56,4 +56,17 @@ app-fiat {
    display: inline-block;
    margin-left: 10px;
  }
+}
+
+.spinner-border {
+  @media (min-width: 768px) {
+    margin-top: 6.5px;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  @media (max-width: 768px) {
+    margin-top: 2.3px;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
 }
--- a/frontend/src/app/lightning/node/node.component.ts
+++ b/frontend/src/app/lightning/node/node.component.ts
@@ -22,7 +22,7 @@ export class NodeComponent implements OnInit {
  channelsListStatus: string;
  error: Error;
  publicKey: string;
-
+  channelListLoading = false;
  publicKeySize = 99;

  constructor(
@@ -97,4 +97,8 @@ export class NodeComponent implements OnInit {
  onChannelsListStatusChanged(e) {
    this.channelsListStatus = e;
  }
+
+  onLoadingEvent(e) {
+    this.channelListLoading = e;
+  }
 }
--- a/frontend/src/app/lightning/nodes-channels/node-channels.component.ts
+++ b/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;
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@@ -60,7 +60,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.html
+++ b/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>
--- a/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-per-isp-chart/nodes-per-isp-chart.component.scss
@@ -40,7 +40,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@@ -60,7 +60,7 @@
  flex-direction: column;
  @media (min-width: 991px) {
    position: relative;
-    top: -65px;
+    top: -100px;
  }
  @media (min-width: 830px) and (max-width: 991px) {
    position: relative;
--- a/frontend/src/index.bisq.html
+++ b/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">

--- a/frontend/src/index.liquid.html
+++ b/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">
  
--- a/frontend/src/index.mempool.html
+++ b/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">
  
--- a/frontend/src/resources/previews/dashboard.png
+++ b/frontend/src/resources/previews/dashboard.png
--- a/frontend/src/resources/previews/lightning.png
+++ b/frontend/src/resources/previews/lightning.png
--- a/frontend/src/resources/previews/mining.png
+++ b/frontend/src/resources/previews/mining.png