Merge pull request #5706 from mempool/natsoni/websocket-docs

Add websocket commands doc

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Env, StateService } from '@app/services/state.service';
-import { restApiDocsData } from '@app/docs/api-docs/api-docs-data';
+import { restApiDocsData, wsApiDocsData } from '@app/docs/api-docs/api-docs-data';
 import { faqData } from '@app/docs/api-docs/api-docs-data';
 
 @Component({
@@ -28,6 +28,8 @@ export class ApiDocsNavComponent implements OnInit {
     this.auditEnabled = this.env.AUDIT;
     if (this.whichTab === 'rest') {
       this.tabData = restApiDocsData;
+    } else if (this.whichTab === 'websocket') {
+      this.tabData = wsApiDocsData;
     } else if (this.whichTab === 'faq') {
       this.tabData = faqData;
     }

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

@@ -108,18 +108,43 @@
       </div>
     </div>
 
-    <div id="websocketAPI" *ngIf="( whichTab === 'websocket' )">
+    <div id="websocketAPI" *ngIf="whichTab === 'websocket'">
-      <div class="api-category">
+
-        <div class="websocket">
+      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
-          <div class="endpoint">
+        <app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></app-api-docs-nav>
-            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
-            {{ wrapUrl(network.val, wsDocs, true) }}
       </div>
+
+      <div class="doc-content">
+
+        <div id="enterprise-cta-mobile" *ngIf="officialMempoolInstance && showMobileEnterpriseUpsell">
+          <p>Get higher API limits with <span class="no-line-break">Mempool Enterprise®</span></p>
+          <div class="button-group">
+            <a class="btn btn-small btn-secondary" (click)="showMobileEnterpriseUpsell = false">No Thanks</a>
+            <a class="btn btn-small btn-purple" href="https://mempool.space/enterprise">More Info <fa-icon [icon]="['fas', 'angle-right']" [styles]="{'font-size': '12px'}"></fa-icon></a>
+          </div>
+        </div>
+
+        <p class="doc-welcome-note">Below is a reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title-websocket">Websocket service</ng-container> running at {{ websocketUrl(network.val) }}.</p>
+        <p class="doc-welcome-note api-note" *ngIf="officialMempoolInstance">Note that usage limits apply to our WebSocket API. Consider an <a href="https://mempool.space/enterprise">enterprise sponsorship</a> if you need higher API limits, such as higher tracking limits.</p>
+
+        <div class="doc-item-container" *ngFor="let item of wsDocs">
+          <div *ngIf="!item.hasOwnProperty('options') || ( item.hasOwnProperty('options') && item.options.hasOwnProperty('officialOnly') && item.options.officialOnly && officialMempoolInstance )">
+            <h3 *ngIf="( item.type === 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )">{{ item.title }}</h3>
+            <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
+              <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick({event: $event, fragment: item.fragment})">{{ item.title }} <span>{{ item.category }}</span></a>
+              <div class="endpoint-content">
                 <div class="description">
                   <div class="subtitle" i18n>Description</div>
-            <div i18n="api-docs.websocket.websocket">Default push: <code>{{ '{' }} action: 'want', data: ['blocks', ...] {{ '}' }}</code> to express what you want pushed. Available: <code>blocks</code>, <code>mempool-blocks</code>, <code>live-2h-chart</code>, and <code>stats</code>.<br><br>Push transactions related to address: <code>{{ '{' }} 'track-address': '3PbJ...bF9B' {{ '}' }}</code> to receive all new transactions containing that address as input or output. Returns an array of transactions. <code>address-transactions</code> for new mempool transactions, and <code>block-transactions</code> for new block confirmed transactions.</div>
+                  <div [innerHTML]="item.description.default" i18n></div>
+                </div>
+                <div class="description">
+                  <div class="subtitle" i18n>Payload</div>
+                  <pre><code [innerText]="item.payload"></code></pre>
+                </div>
+                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" [showCodeExample]="item.showJsExamples"></app-code-template>
+              </div>
+            </div>
           </div>
-          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" [showCodeExample]="wsDocs.showJsExamples"></app-code-template>
         </div>
       </div>
     </div>

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

@@ -470,3 +470,21 @@ dd {
     margin-left: 1em;
   }
 }
+
+code {
+  background-color: var(--bg);
+  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
+}
+
+pre {
+  display: block;
+  font-size: 87.5%;
+  color: #f18920;
+  background-color: var(--bg);
+  padding: 30px;
+  code{
+    background-color: transparent;
+    white-space: break-spaces;
+    word-break: break-all;
+  }
+}

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

@@ -145,7 +145,7 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
     if (document.getElementById( targetId + "-tab-header" )) {
       tabHeaderHeight = document.getElementById( targetId + "-tab-header" ).scrollHeight;
     }
-    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) ) && targetId ) {
+    if( ( window.innerWidth <= 992 ) && ( ( this.whichTab === 'rest' ) || ( this.whichTab === 'faq' ) || ( this.whichTab === 'websocket' ) ) && targetId ) {
       const endpointContainerEl = document.querySelector<HTMLElement>( "#" + targetId );
       const endpointContentEl = document.querySelector<HTMLElement>( "#" + targetId + " .endpoint-content" );
       const endPointContentElHeight = endpointContentEl.clientHeight;
@@ -207,13 +207,29 @@ export class ApiDocsComponent implements OnInit, AfterViewInit {
       text = text.replace('%{' + indexNumber + '}', curlText);
     }
 
-    if (websocket) {
-      const wsHostname = this.hostname.replace('https://', 'wss://');
-      wsHostname.replace('http://', 'ws://');
-      return `${wsHostname}${curlNetwork}${text}`;
-    }
     return `${this.hostname}${curlNetwork}${text}`;
   }
 
+  websocketUrl(network: string) {
+    let curlNetwork = '';
+    if (this.env.BASE_MODULE === 'mempool') {
+      if (!['', 'mainnet'].includes(network)) {
+        curlNetwork = `/${network}`;
+      }
+    } else if (this.env.BASE_MODULE === 'liquid') {
+      if (!['', 'liquid'].includes(network)) {
+        curlNetwork = `/${network}`;
+      }
+    }
+
+    if (network === this.env.ROOT_NETWORK) {
+      curlNetwork = '';
+    }
+
+    let wsHostname = this.hostname.replace('https://', 'wss://');
+    wsHostname = wsHostname.replace('http://', 'ws://');
+    return `${wsHostname}${curlNetwork}/api/v1/ws`;
+  }
+
 }