Adding Bisq API to About page.

Watching partent bisq dump folder.

backend/mempool-config.sample.json

@@ -14,7 +14,7 @@
   "TX_PER_SECOND_SPAN_SECONDS": 150,
   "ELECTRS_API_URL": "https://www.blockstream.info/testnet/api",
   "BISQ_ENABLED": false,
-  "BSQ_BLOCKS_DATA_PATH": "/bisq/data/all/",
+  "BSQ_BLOCKS_DATA_PATH": "/bisq/data",
   "SSL": false,
   "SSL_CERT_FILE_PATH": "/etc/letsencrypt/live/mysite/fullchain.pem",
   "SSL_KEY_FILE_PATH": "/etc/letsencrypt/live/mysite/privkey.pem"

backend/src/api/bisq.ts

@@ -194,7 +194,7 @@ class Bisq {
 
   private loadData(): Promise<string> {
     return new Promise((resolve, reject) => {
-      fs.readFile(config.BSQ_BLOCKS_DATA_PATH + '/blocks.json', 'utf8', (err, data) => {
+      fs.readFile(config.BSQ_BLOCKS_DATA_PATH + '/all/blocks.json', 'utf8', (err, data) => {
         if (err) {
           reject(err);
         }

frontend/src/app/bisq/bisq.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { BisqRoutingModule } from './bisq.routing.module';
 import { SharedModule } from '../shared/shared.module';
 import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
@@ -35,7 +34,6 @@ import { BsqAmountComponent } from './bsq-amount/bsq-amount.component';
     BsqAmountComponent,
   ],
   imports: [
-    CommonModule,
     BisqRoutingModule,
     SharedModule,
     NgbPaginationModule,

frontend/src/app/components/about/about.component.html

@@ -4,14 +4,14 @@
     <img src="./resources/mempool-tube.png" width="63" height="63" />
     <br /><br />
 
-    <h1>Contributors</h1>
+    <h2>Contributors</h2>
 
     <p>Development <a href="https://twitter.com/softsimon_">@softsimon_</a>
     <br />Operations <a href="https://twitter.com/wiz">@wiz</a>
 
     <br><br>
 
-    <h2>Github</h2>
+    <h2>Open source</h2>
 
     <a target="_blank" class="b2812e30 f2874b88 fw6 mb3 mt2 truncate black-80 f4 link" rel="noopener noreferrer nofollow" href="https://github.com/mempool/mempool">
       <span class="_9e13d83d dib v-mid">
@@ -28,54 +28,88 @@
   <br><br>
 
   <div class="text-center">
-    <h2>HTTP API</h2>
+    <h2>API</h2>
   </div>
 
-  <table class="table">
+  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
-    <tr>
+    <li [ngbNavItem]="1">
-      <td>Fee API</td>
+      <a ngbNavLink>Mainnet</a>
-      <td>
+      <ng-template ngbNavContent>
-        <div class="mx-auto">
-          <input class="form-control" type="text" value="https://mempool.space/api/v1/fees/recommended" readonly>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td>Mempool blocks</td>
-      <td>
-        <div class="mx-auto">
-          <input class="form-control" type="text" value="https://mempool.space/api/v1/fees/mempool-blocks" readonly>
-        </div>
-      </td>
-    </tr>
-  </table>
 
-  <br><br>
+        <table class="table">
-  
+          <tr>
-  <div class="text-center">
+            <th style="border-top: 0;">Endpoint</th>
-    <h2>WebSocket API</h2>
+            <th style="border-top: 0;">Description</th>
-  </div>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/fees/recommended" target="_blank">GET /api/v1/fees/recommended</a></td>
+            <td>Recommended fees</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/fees/mempool-blocks" target="_blank">GET /api/v1/fees/mempool-blocks</a></td>
+            <td>The current mempool blocks</td>
+          </tr>
+          <tr>
+            <td class="nowrap">wss://{{ hostname }}/api/v1/ws</td>
+            <td>
+              <span class="text-small">
+                Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
+                to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
+              </span>
+              <br><br>
+              <span class="text-small">
+                Push transactions related to address: <span class="code">{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</span>
+                to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'block-transactions' for new block confirmed transactions.
+              </span>
+            </td>
+          </tr>
+        </table>
 
-  <table class="table">
+      </ng-template>
-    <tr>
+    </li>
-      <td>
+    <li [ngbNavItem]="2">
-        <span class="text-small">
+      <a ngbNavLink>Bisq</a>
-          Default push: <span class="code">{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</span>
+      <ng-template ngbNavContent>
-          to express what you want pushed. Available: 'blocks', 'mempool-blocks', 'live-2h-chart' and 'stats'.
+        
-        </span>
+        <table class="table">
-        <br><br>
+          <tr>
-        <span class="text-small">
+            <th style="border-top: 0;">Endpoint</th>
-          Push transactions related to address: <span class="code">{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</span>
+            <th style="border-top: 0;">Description</th>
-          to receive all new transactions containing that address as input or output. Returns an array of transactions. 'address-transactions' for new mempool transactions and 'block-transactions' for new block confirmed transactions.
+          </tr>
-        </span>
+          <tr>
-      </td>
+            <td class="nowrap"><a href="/api/v1/bisq/stats" target="_blank">GET /api/v1/bisq/stats</a></td>
-    </tr>
+            <td>Stats</td>
-    <tr>
+          </tr>
-      <td style="border: 0;">
+          <tr>
-          <input class="form-control" type="text" value="wss://mempool.space/api/v1/ws" readonly>
+            <td class="nowrap"><a href="/api/v1/bisq/tx/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5" target="_blank">GET /api/v1/bisq/tx/:txId</a></td>
-      </td>
+            <td>Transaction</td>
-    </tr>
+          </tr>
-  </table>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/bisq/txs/0/25" target="_blank">GET /api/v1/bisq/txs/:index/:length</a></td>
+            <td>Transactions</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/bisq/block/000000000000000000079aa6bfa46eb8fc20474e8673d6e8a123b211236bf82d" target="_blank">GET /api/v1/bisq/block/:hash</a></td>
+            <td>Block</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/bisq/blocks/0/25" target="_blank">GET /api/v1/bisq/blocks/:index/:length</a></td>
+            <td>Blocks</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/bisq/blocks/tip/height" target="_blank">GET /api/v1/bisq/blocks/tip/height</a></td>
+            <td>Latest block height</td>
+          </tr>
+          <tr>
+            <td class="nowrap"><a href="/api/v1/bisq/address/B1DgwRN92rdQ9xpEVCdXRfgeqGw9X4YtrZz" target="_blank">GET /api/v1/bisq/address/:address</a></td>
+            <td>Address</td>
+          </tr>
+        </table>
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
   <br> <br>
 

frontend/src/app/components/about/about.component.scss

@@ -9,4 +9,8 @@
 
 tr {
   white-space: inherit;
-}
+}
+
+.nowrap {
+  white-space: nowrap;
+}

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { StateService } from 'src/app/services/state.service';
 
 @Component({
   selector: 'app-about',
@@ -8,15 +9,24 @@ import { SeoService } from 'src/app/services/seo.service';
   styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
+  active = 1;
+  hostname = document.location.hostname;
+
 
   constructor(
     private websocketService: WebsocketService,
     private seoService: SeoService,
+    private stateService: StateService,
   ) { }
 
   ngOnInit() {
     this.seoService.setTitle('Contributors');
     this.websocketService.want(['blocks']);
+    if (this.stateService.network === 'bisq') {
+      this.active = 2;
+    }
+    if (document.location.port !== '443') {
+      this.hostname = this.hostname + ':' + document.location.port;
+    }
   }
-
 }

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

@@ -12,6 +12,7 @@ import { TimeSinceComponent } from '../components/time-since/time-since.componen
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
 import { QrcodeComponent } from '../components/qrcode/qrcode.component';
 import { FiatComponent } from '../fiat/fiat.component';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -30,11 +31,14 @@ import { FiatComponent } from '../fiat/fiat.component';
   ],
   imports: [
     CommonModule,
+    NgbNavModule,
   ],
   providers: [
     VbytesPipe,
   ],
   exports: [
+    NgbNavModule,
+    CommonModule,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,