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

<ng-container *ngIf="{ val: network$ | async } as network">
  <div class="container-xl text-left">

    <div id="restAPI" *ngIf="restTabActivated">

      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
        <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
      </div>

      <div class="doc-content">

        <p class="hide-on-mobile no-bottom-space">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>

        <div id="doc-nav-mobile" class="hide-on-desktop" *ngIf="showFloatingDocsNav">
          <button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="mobileMenuOpen" aria-controls="collapseExample"><fa-icon [icon]="['fas', 'list-ul']" [fixedWidth]="true"></fa-icon> {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} REST API Overview</button>
          <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
            <div class="card">
              <div class="card-body">
                <app-api-docs-nav [collapseItem]="collapse" [network]="{ val: network$ | async }"></app-api-docs-nav>
              </div>
            </div>
          </div>
        </div>

        <div id="mobile-top-doc-nav" #mobileFixedApiNav class="hide-on-desktop"><app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav></div>

        <div *ngFor="let item of restDocs">
          <div *ngIf="( item.type !== 'category' ) && ( item.showConditions.indexOf(network.val) > -1 )" class="endpoint-container" id="{{ item.fragment }}">
            <a class="section-header" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
            <div class="endpoint">
              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
              <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_link_example" #bisq_link_example>
                <a [href]="wrapUrl(network.val, item.codeExample.bisq)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
              </ng-container>
              <ng-template #liquid_link_example>
                <ng-container *ngIf="item.httpRequestMethod === 'GET' && network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_link_example">
                  <a [href]="wrapUrl(network.val, item.codeExample.liquid)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
                </ng-container>
              </ng-template>
              <ng-template #default_link_example>
                <ng-container *ngIf="item.httpRequestMethod === 'GET'">
                  <a [href]="wrapUrl(network.val, item.codeExample.default)" target="_blank">{{ item.httpRequestMethod }} {{ baseNetworkUrl }}/api{{ item.urlString }}</a>
                </ng-container>
              </ng-template>
              <div *ngIf="item.httpRequestMethod === 'POST'">{{ item.httpRequestMethod }} {{ item.urlString }}</div>
            </div>
            <div class="description">
              <div class="subtitle" i18n>Description</div>
              <ng-container *ngIf="network.val === 'bisq' && item.description.hasOwnProperty('bisq');else liquid_description" #bisq_description>
                <div [innerHTML]="item.description.bisq" i18n></div>
              </ng-container>
              <ng-template #liquid_description>
                <ng-container *ngIf="network.val === 'liquid' && item.description.hasOwnProperty('liquid');else default_description">
                  <div [innerHTML]="item.description.liquid" i18n></div>
                </ng-container>
              </ng-template>
              <ng-template #default_description>
                <div [innerHTML]="item.description.default" i18n></div>
              </ng-template>
            </div>
            <ng-container *ngIf="network.val === 'bisq' && item.codeExample.hasOwnProperty('bisq');else liquid_code_example" #bisq_code_example>
              <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.bisq" [network]="network.val" ></app-code-template>
            </ng-container>
            <ng-template #liquid_code_example>
              <ng-container *ngIf="network.val === 'liquid' && item.codeExample.hasOwnProperty('liquid');else default_code_example">
                <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.liquid" [network]="network.val" ></app-code-template>
              </ng-container>
            </ng-template>
            <ng-template #default_code_example>
              <app-code-template [hostname]="hostname" [baseNetworkUrl]="baseNetworkUrl" [method]="item.httpRequestMethod" [code]="item.codeExample.default" [network]="network.val" ></app-code-template>
            </ng-template>
          </div>
        </div>

      </div>
    </div>

    <div id="websocketAPI" *ngIf="!restTabActivated && ( network.val !== 'bisq' )">
      <div class="api-category">
        <div class="websocket">
          <div class="endpoint">
            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
            {{ wrapUrl(network.val, wsDocs, true) }}
          </div>
          <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>
          <app-code-template [method]="'websocket'" [hostname]="hostname" [code]="wsDocs" [network]="network.val" ></app-code-template>
        </div>
      </div>
    </div>

  </div>
</ng-container>