Merge pull request #2152 from mononaut/open-graph-previews

Draft: Open Graph link previews

frontend/src/app/app-routing.module.ts

@@ -4,8 +4,10 @@ import { StartComponent } from './components/start/start.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockComponent } from './components/block/block.component';
 import { BlockAuditComponent } from './components/block-audit/block-audit.component';
+import { BlockPreviewComponent } from './components/block/block-preview.component';
 import { AddressComponent } from './components/address/address.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
+import { MasterPagePreviewComponent } from './components/master-page-preview/master-page-preview.component';
 import { AboutComponent } from './components/about/about.component';
 import { StatusViewComponent } from './components/status-view/status-view.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
@@ -23,7 +25,7 @@ import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
 
 let routes: Routes = [
-  { 
+  {
     path: 'testnet',
     children: [
       {
@@ -315,6 +317,16 @@ let routes: Routes = [
       },
     ],
   },
+  {
+    path: 'preview',
+    component: MasterPagePreviewComponent,
+    children: [
+      {
+        path: 'block/:id',
+        component: BlockPreviewComponent
+      },
+    ],
+  },
   {
     path: 'status',
     component: StatusViewComponent
@@ -576,4 +588,3 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
   })],
 })
 export class AppRoutingModule { }
-

frontend/src/app/components/block/block-preview.component.html

@@ -0,0 +1,92 @@
+<div class="box preview-box" *ngIf="!error">
+  <div class="row">
+    <div class="col-sm">
+      <h1 class="block-title">
+        <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
+          <span class="next-previous-blocks">
+            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
+          </span>
+        </ng-template>
+        <ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
+        <ng-template #blockTemplateContent>
+          <span class="next-previous-blocks">
+            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
+          </span>
+        </ng-template>
+      </h1>
+      <table class="table table-borderless table-striped">
+        <tbody>
+          <!-- <tr>
+          <td class="td-width" i18n="block.hash">Hash</td>
+          <td>&lrm;<a [routerLink]="['/block/' | relativeUrl, block?.id]" title="{{ block?.id }}">{{ block?.id | shortenString : 13 }}</a></td>
+          </tr> -->
+          <tr>
+            <td i18n="block.timestamp">Timestamp</td>
+            <td>
+              {{ block?.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
+            </td>
+          </tr>
+          <tr>
+            <td i18n="block.size">Size</td>
+            <td [innerHTML]="'&lrm;' + (block?.size | bytes: 2)"></td>
+          </tr>
+          <tr>
+            <td i18n="block.weight">Weight</td>
+            <td [innerHTML]="'&lrm;' + (block?.weight | wuBytes: 2)"></td>
+          </tr>
+          <ng-template [ngIf]="webGlEnabled">
+            <tr *ngIf="block?.extras?.medianFee != undefined">
+              <td class="td-width" i18n="block.median-fee">Median fee</td>
+              <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+            </tr>
+            <ng-template [ngIf]="fees !== undefined">
+              <tr>
+                <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+                <td *ngIf="network !== 'liquid' && network !== 'liquidtestnet'; else liquidTotalFees">
+                  <app-amount [satoshis]="block?.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+                </td>
+                <ng-template #liquidTotalFees>
+                  <td>
+                    <app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
+                  </td>
+                </ng-template>
+              </tr>
+              <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+                <td i18n="block.subsidy-and-fees|Total subsidy and fees in a block">Subsidy + fees:</td>
+                <td>
+                  <app-amount [satoshis]="block?.extras.reward" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+                </td>
+              </tr>
+            </ng-template>
+            <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
+              <td i18n="block.miner">Miner</td>
+              <td *ngIf="stateService.env.MINING_DASHBOARD">
+                <a [attr.data-cy]="'block-details-miner-badge'" placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block?.extras.pool.slug]" class="badge"
+                  [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                  {{ block?.extras.pool.name }}
+                </a>
+              </td>
+              <td *ngIf="!stateService.env.MINING_DASHBOARD && stateService.env.BASE_MODULE === 'mempool'">
+                <span [attr.data-cy]="'block-details-miner-badge'" placement="bottom" class="badge"
+                  [class]="block?.extras.pool.name === 'Unknown' ? 'badge-secondary' : 'badge-primary'">
+                  {{ block?.extras.pool.name }}
+              </span>
+              </td>
+            </tr>
+          </ng-template>
+        </tbody>
+      </table>
+    </div>
+    <div class="col-sm chart-container" *ngIf="webGlEnabled">
+      <app-block-overview-graph
+        #blockGraph
+        [isLoading]="false"
+        [resolution]="75"
+        [blockLimit]="stateService.blockVSize"
+        [orientation]="'top'"
+        [flip]="false"
+        (txClickEvent)="onTxClick($event)"
+      ></app-block-overview-graph>
+    </div>
+  </div>
+</div>

frontend/src/app/components/block/block-preview.component.scss

@@ -0,0 +1,7 @@
+.box {
+  padding: 2rem 6rem;
+}
+
+.block-title {
+  margin-bottom: 0.5em;
+}

frontend/src/app/components/block/block-preview.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { BlockComponent } from './block.component';
+
+@Component({
+  selector: 'app-block-preview',
+  templateUrl: './block-preview.component.html',
+  styleUrls: ['./block.component.scss', './block-preview.component.scss']
+})
+export class BlockPreviewComponent extends BlockComponent {
+  
+}

frontend/src/app/components/master-page-preview/master-page-preview.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="{ val: network$ | async } as network">
+<div class="preview-wrapper">
+  <router-outlet></router-outlet>
+
+  <footer>
+    <span class="footer-brand" style="position: relative;">
+      <img *ngIf="!officialMempoolSpace" src="/resources/mempool-logo.png" height="35" width="140" class="logo">
+      <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 140px; height: 35px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
+    </span>
+
+    <div [ngSwitch]="network.val">
+      <span *ngSwitchCase="'signet'" class="network signet"><img src="/resources/signet-logo.png" style="width: 30px;" class="signet mr-1" alt="logo"> Signet</span>
+      <span *ngSwitchCase="'testnet'" class="network testnet"><img src="/resources/testnet-logo.png" style="width: 30px;" class="mr-1" alt="testnet logo"> Testnet</span>
+      <span *ngSwitchCase="'bisq'" class="network bisq"><img src="/resources/bisq-logo.png" style="width: 30px;" class="mr-1" alt="bisq logo"> Bisq</span>
+      <span *ngSwitchCase="'liquid'" class="network liquid"><img src="/resources/liquid-logo.png" style="width: 30px;" class="mr-1" alt="liquid mainnet logo"> Liquid</span>
+      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><img src="/resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1" alt="liquid testnet logo"> Liquid Testnet</span>
+      <span *ngSwitchDefault class="network mainnet"><img src="/resources/bitcoin-logo.png" style="width: 30px;" class="mainnet mr-1" alt="bitcoin logo"> Mainnet</span>
+    </div>
+  </footer>
+</div>
+</ng-container>

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -0,0 +1,35 @@
+.preview-wrapper {
+  position: relative;
+  display: block;
+  margin: auto;
+  max-width: 1024px;
+  max-height: 512px;
+  padding-bottom: 64px;
+
+  footer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    min-height: 64px;
+    padding: 0rem 2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background: #11131f;
+    text-align: start;
+  }
+
+  .footer-brand {
+    width: 60%;
+  }
+
+  .network {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  }
+}

frontend/src/app/components/master-page-preview/master-page-preview.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Observable, merge, of } from 'rxjs';
+import { LanguageService } from 'src/app/services/language.service';
+
+@Component({
+  selector: 'app-master-page-preview',
+  templateUrl: './master-page-preview.component.html',
+  styleUrls: ['./master-page-preview.component.scss'],
+})
+export class MasterPagePreviewComponent implements OnInit {
+  network$: Observable<string>;
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+  urlLanguage: string;
+
+  constructor(
+    public stateService: StateService,
+    private languageService: LanguageService,
+  ) { }
+
+  ngOnInit() {
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
+    this.urlLanguage = this.languageService.getLanguageForUrl();
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -7,6 +7,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
   faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl, faDownload, faQrcode } from '@fortawesome/free-solid-svg-icons';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
+import { MasterPagePreviewComponent } from '../components/master-page-preview/master-page-preview.component';
 import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
 import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 import { AboutComponent } from '../components/about/about.component';
@@ -44,6 +45,7 @@ import { StartComponent } from '../components/start/start.component';
 import { TransactionComponent } from '../components/transaction/transaction.component';
 import { TransactionsListComponent } from '../components/transactions-list/transactions-list.component';
 import { BlockComponent } from '../components/block/block.component';
+import { BlockPreviewComponent } from '../components/block/block-preview.component';
 import { BlockAuditComponent } from '../components/block-audit/block-audit.component';
 import { BlockOverviewGraphComponent } from '../components/block-overview-graph/block-overview-graph.component';
 import { BlockOverviewTooltipComponent } from '../components/block-overview-tooltip/block-overview-tooltip.component';
@@ -110,11 +112,13 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
     AmountComponent,
     AboutComponent,
     MasterPageComponent,
+    MasterPagePreviewComponent,
     BisqMasterPageComponent,
     LiquidMasterPageComponent,
     StartComponent,
     TransactionComponent,
     BlockComponent,
+    BlockPreviewComponent,
     BlockAuditComponent,
     BlockOverviewGraphComponent,
     BlockOverviewTooltipComponent,
@@ -215,6 +219,7 @@ import { TimestampComponent } from './components/timestamp/timestamp.component';
     StartComponent,
     TransactionComponent,
     BlockComponent,
+    BlockPreviewComponent,
     BlockAuditComponent,
     BlockOverviewGraphComponent,
     BlockOverviewTooltipComponent,