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

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

    <div id="faq" *ngIf="whichTab === 'faq'">

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

      <div class="doc-content">

        <div class="doc-item-container" *ngFor="let item of faq">
          <h3 *ngIf="item.type === 'category'">{{ item.title }}</h3>
          <div *ngIf="item.type !== 'category'" class="endpoint-container" id="{{ item.fragment }}">
            <a id="{{ item.fragment + '-tab-header' }}" class="section-header" (click)="anchorLinkClick( $event )" [routerLink]="['./']" fragment="{{ item.fragment }}"><table><tr><td>{{ item.title }}</td><td><span>{{ item.category }}</span></td></tr></table></a>
            <div class="endpoint-content">
              <div class="endpoint" [innerHTML]="item.answer | noSanitize"></div>
              <div class="blockchain-wrapper" *ngIf="item.fragment === 'what-is-a-mempool-explorer'">
                <app-blockchain></app-blockchain>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

    <div id="restAPI" *ngIf="whichTab === 'rest'">

      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
        <app-api-docs-nav (navLinkClickEvent)="anchorLinkClick( $event )" [network]="{ val: network$ | async }" [whichTab]="whichTab"></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 class="doc-item-container" *ngFor="let item of restDocs">
          <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 )" [routerLink]="['./']" fragment="{{ item.fragment }}">{{ item.title }} <span>{{ item.category }}</span></a>
            <div class="endpoint-content">
              <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" [showCodeExample]="item.showJsExamples"></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" [showCodeExample]="item.showJsExamples"></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" [showCodeExample]="item.showJsExamples"></app-code-template>
              </ng-template>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div id="websocketAPI" *ngIf="( whichTab === 'websocket' ) && ( 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>