Merge pull request #2659 from hunicus/add-electrum-docs

Add electrum rpc doc tab for official instance

frontend/src/app/docs/api-docs/api-docs.component.html

@@ -106,6 +106,20 @@
       </div>
     </div>
 
+    <div id="electrs" *ngIf="whichTab === 'electrs'">
+      <div class="doc-content no-sidebar">
+        <div class="doc-item-container">
+          <p class='subtitle'>Hostname</p>
+          <p>{{plainHostname}}</p>
+          <p class="subtitle">Port</p>
+          <p>{{electrsPort}}</p>
+          <p class="subtitle">SSL</p>
+          <p>Enabled</p>
+          <p class="note" *ngIf="network.val !== 'signet'">Electrum RPC interface for Bitcoin Signet is <a href="/signet/docs/api/electrs">publicly available</a>. Electrum RPC interface for all other networks is available to <a href='/enterprise'>sponsors</a> only—whitelisting is required.</p>
+        </div>
+      </div>
+    </div>
+
   </div>
 </ng-container>
 

frontend/src/app/docs/api-docs/api-docs.component.scss

@@ -1,7 +1,21 @@
+.center {
+  text-align: center;
+}
+
+.note {
+  font-style: italic;
+}
+
 .text-small {
   font-size: 12px;
 }
 
+.container-xl {
+  display: flex;
+  min-height: 75vh;
+  flex-direction: column;
+}
+
 code {
   background-color: #1d1f31;
   font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
@@ -116,6 +130,10 @@ li.nav-item {
   float: right;
 }
 
+.doc-content.no-sidebar {
+  width: 100%
+}
+
 h3 {
   margin: 2rem 0 0 0;
 }

frontend/src/app/docs/api-docs/api-docs.component.ts

@@ -12,6 +12,8 @@ import { FaqTemplateDirective } from '../faq-template/faq-template.component';
   styleUrls: ['./api-docs.component.scss']
 })
 export class ApiDocsComponent implements OnInit, AfterViewInit {
+  plainHostname = document.location.hostname;
+  electrsPort = 0;
   hostname = document.location.hostname;
   network$: Observable<string>;
   active = 0;
@@ -82,6 +84,20 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
 
     this.network$.subscribe((network) => {
       this.active = (network === 'liquid' || network === 'liquidtestnet') ? 2 : 0;
+      switch( network ) {
+        case "":
+          this.electrsPort = 50002; break;
+        case "mainnet":
+          this.electrsPort = 50002; break;
+        case "testnet":
+          this.electrsPort = 60002; break;
+        case "signet":
+          this.electrsPort = 60602; break;
+        case "liquid":
+          this.electrsPort = 51002; break;
+        case "liquidtestnet":
+          this.electrsPort = 51302; break;
+      }
     });
   }
 

frontend/src/app/docs/docs/docs.component.html

@@ -32,6 +32,15 @@
         </ng-template>
       </li>
 
+      <li [ngbNavItem]="3" *ngIf="showElectrsTab" role="presentation">
+        <a ngbNavLink [routerLink]="['/docs/api/electrs' | relativeUrl]" role="tab">API - Electrum RPC</a>
+        <ng-template ngbNavContent>
+
+          <app-api-docs [whichTab]="'electrs'"></app-api-docs>
+
+        </ng-template>
+      </li>
+
     </ul>
 
     <div id="main-tab-content" [ngbNavOutlet]="nav"></div>

frontend/src/app/docs/docs/docs.component.ts

@@ -15,6 +15,7 @@ export class DocsComponent implements OnInit {
   env: Env;
   showWebSocketTab = true;
   showFaqTab = true;
+  showElectrsTab = true;
 
   @HostBinding('attr.dir') dir = 'ltr';
 
@@ -34,14 +35,18 @@ export class DocsComponent implements OnInit {
     } else if( url[1].path === "rest" ) {
         this.activeTab = 1;
         this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
-    } else {
+    } else if( url[1].path === "websocket" ) {
         this.activeTab = 2;
         this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
+    } else {
+        this.activeTab = 3;
+        this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);
     }
 
     this.env = this.stateService.env;
     this.showWebSocketTab = ( ! ( ( this.stateService.network === "bisq" ) || ( this.stateService.network === "liquidtestnet" ) ) );
     this.showFaqTab = ( this.env.BASE_MODULE === 'mempool' ) ? true : false;
+    this.showElectrsTab = this.stateService.env.OFFICIAL_MEMPOOL_SPACE && ( this.stateService.network !== "bisq" );
 
     document.querySelector<HTMLElement>( "html" ).style.scrollBehavior = "smooth";
   }