From e670f80fedd89556db1effe8df41736f965f701f Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Thu, 29 Jul 2021 12:32:54 +0300
Subject: [PATCH] Liquid dashboard updates. About page link.

---
 .../bisq-master-page/bisq-master-page.component.html      | 3 +++
 .../app/components/blockchain/blockchain.component.html   | 2 +-
 .../app/components/blockchain/blockchain.component.scss   | 7 +++++++
 .../src/app/components/blockchain/blockchain.component.ts | 6 ++++--
 .../liquid-master-page/liquid-master-page.component.html  | 2 +-
 frontend/src/app/dashboard/dashboard.component.html       | 8 ++++----
 6 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
index 182b02d66..88e436e7c 100644
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
@@ -32,6 +32,9 @@
       <li class="nav-item mr-2" routerLinkActive="active">
         <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
       </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" href="https://mempool.space/about" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
+      </li>
     </ul>
   </div>
 </nav>
diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html
index 21e1a7111..94361f4a4 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -1,5 +1,5 @@
 <div class="text-center" class="blockchain-wrapper">
-  <div class="position-container">
+  <div class="position-container {{ network }}">
     <span>
       <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
       <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
diff --git a/frontend/src/app/components/blockchain/blockchain.component.scss b/frontend/src/app/components/blockchain/blockchain.component.scss
index 03528a341..b15ce2536 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -26,10 +26,17 @@
   top: 75px;
 }
 
+.position-container.liquid {
+  left: 15%;
+}
+
 @media (max-width: 767.98px) {
   .position-container {
     left: 95%;
   }
+  .position-container.liquid {
+    left: 50%;
+  }
   .position-container.loading {
     left: 50%;
   }
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts
index 73dc09768..62cc8d276 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from 'src/app/services/state.service';
-import { Subscription, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-blockchain',
@@ -10,6 +10,7 @@ import { Subscription, Observable } from 'rxjs';
 })
 export class BlockchainComponent implements OnInit {
   isLoading$: Observable<boolean>;
+  network: string;
 
   constructor(
     private stateService: StateService,
@@ -17,5 +18,6 @@ export class BlockchainComponent implements OnInit {
 
   ngOnInit() {
     this.isLoading$ = this.stateService.isLoadingWebSocket$;
+    this.network = this.stateService.network;
   }
 }
diff --git a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
index 8100d4cbb..d87455d97 100644
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -45,7 +45,7 @@
         <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active">
-        <a class="nav-link" [routerLink]="['/about']" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
+        <a class="nav-link" href="https://mempool.space/about" (click)="collapse()"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true" i18n-title="master-page.about" title="About"></fa-icon></a>
       </li>
     </ul>
     <app-search-form class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 611e00866..29603965f 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -2,7 +2,7 @@
 <div class="container-xl dashboard-container">
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <ng-template [ngIf]="collapseLevel === 'three'" [ngIfElse]="expanded">
-      <div class="col card-wrapper">
+      <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid'">
         <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
@@ -24,12 +24,12 @@
           </div>
         </div>
       </div>
-      <div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
+      <div class="col" *ngIf="(network$ | async) !== 'liquid'">
         <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
       </div>
     </ng-template>
     <ng-template #expanded>
-      <div class="col card-wrapper">
+      <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid'">
         <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
           <div class="card-body">
@@ -37,7 +37,7 @@
           </div>
         </div>
       </div>
-      <div class="col" *ngIf="(network$ | async) !== 'liquid'; else emptyBlock">
+      <div class="col" *ngIf="(network$ | async) !== 'liquid'">
         <ng-container *ngTemplateOutlet="difficultyEpoch"></ng-container>
       </div>
       <div class="col">