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

<ng-container *ngIf="{ val: network$ | async } as network">
<div class="container-xl">
  <div class="text-center">
    <h2>{{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API Service</ng-container></h2>
  </div>

  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="0">
      <a ngbNavLink i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="address">
            <ng-template ngbPanelTitle>
              <span>GET Address</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address</a>
              </div>
      
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                  <div i18n>Returns details about an address. Available fields: <code>address</code>, <code>chain_stats</code>, and <code>mempool_stats</code>. {{ '{' }}chain,mempool{{ '}' }}_stats each contain an object with <code>tx_count</code>, <code>funded_txo_count</code>, <code>funded_txo_sum</code>, <code>spent_txo_count</code>, and <code>spent_txo_sum</code>.</div>
              </div>      
              <app-code-template [code]="code.address" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="addressTransactions">
            <ng-template ngbPanelTitle>
              <span>GET Address Transactions</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Get transaction history for the specified address/scripthash, sorted with newest first. Returns up to 50 mempool transactions plus the first 25 confirmed transactions. You can request more confirmed transactions using <code>:last_seen_txid</code> (see below).</div>
              </div>
              <app-code-template [code]="code.addressTransactions" [network]="network.val" ></app-code-template>      
            </ng-template>
          </ngb-panel>

          <ngb-panel id="addressTransactionsChain">
            <ng-template ngbPanelTitle>
              <span>GET Address Transactions Chain</span>
            </ng-template>
            <ng-template ngbPanelContent>              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs/chain" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs/chain</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Get confirmed transaction history for the specified address/scripthash, sorted with newest first. Returns 25 transactions per page. More can be requested by specifying the last txid seen by the previous query.</div>
              </div>
              <app-code-template [code]="code.addressTransactionsChain" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="addressTransactionsMempool">
            <ng-template ngbPanelTitle>
              <span>GET Address Transactions Mempool</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/txs/mempool" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/txs/mempool</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Get unconfirmed transaction history for the specified address/scripthash. Returns up to 50 transactions (no paging).</div>
              </div>

              <app-code-template [code]="code.addressTransactionsMempool" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="addressUTXO">
            <ng-template ngbPanelTitle>
              <span>GET Address UTXO</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/address/1wizSAYSbuyXbt9d8JV8ytm5acqq2TorC/utxo" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/address/:address/utxo</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Get the list of unspent transaction outputs associated with the address/scripthash. Available fields: <code>txid</code>, <code>vout</code>, <code>value</code>, and <code>status</code> (with the status of the funding tx).<ng-container *ngIf="network.val === 'liquid'">There is also a <code>valuecommitment</code> field that may appear in place of <code>value</code>, plus the following additional fields: <code>asset</code>/<code>assetcommitment</code>, <code>nonce</code>/<code>noncecommitment</code>, <code>surjection_proof</code>, and <code>range_proof</code>.</ng-container></div>
              </div>

              <app-code-template [code]="code.addressUTXO" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val === 'liquid'" [ngbNavItem]="1">
      <a ngbNavLink i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="assets">
            <ng-template ngbPanelTitle>
              <span>GET Assets</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/liquid/api/asset/6f0279e9ed041c3d710a9f57d0c02928416460c4b722ae3457a11eec381c526d" target="_blank">GET /liquid/api/asset/:asset_id</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns information about a Liquid asset.</div>
              </div>
      
              <app-code-template [code]="code.assets" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="assetTransactions">
            <ng-template ngbPanelTitle>
              <span>GET Asset Transactions</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <a href="/liquid/api/asset/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5/txs" target="_blank">GET /liquid/api/asset/:asset_id/txs[/mempool|/chain]</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns transactions associated with the specified Liquid asset. For the network's native asset, returns a list of peg in, peg out, and burn transactions. For user-issued assets, returns a list of issuance, reissuance, and burn transactions. Does not include regular transactions transferring this asset.</div>
              </div>
      
              <app-code-template [code]="code.assetTransactions" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="assetSupply">
            <ng-template ngbPanelTitle>
              <span>GET Asset Supply</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/liquid/api/asset/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5/supply" target="_blank">GET /liquid/api/asset/:asset_id/supply[/decimal]</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Get the current total supply of the specified asset. For the native asset (L-BTC), this is calculated as [chain,mempool]_stats.peg_in_amount - [chain,mempool]_stats.peg_out_amount - [chain,mempool]_stats.burned_amount. For issued assets, this is calculated as [chain,mempool]_stats.issued_amount - [chain,mempool]_stats.burned_amount. Not available for assets with blinded issuances. If /decimal is specified, returns the supply as a decimal according to the asset's divisibility. Otherwise, returned in base units.</div>
              </div>
      
              <app-code-template [code]="code.assetSupply" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="2">
      <a ngbNavLink i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="block">
            <ng-template ngbPanelTitle>
              <span>GET Block</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns details about a block. Available fields: <code>id</code>, <code>height</code>, <code>version</code>, <code>timestamp</code>, <code>bits</code>, <code>nonce</code>, <code>merkle_root</code>, <code>tx_count</code>, <code>size</code>, <code>weight</code>,<ng-container *ngIf="network.val === 'liquid'"> <code>proof</code>,</ng-container> and <code>previousblockhash</code>.</div>
              </div>
              <app-code-template [code]="code.block" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockHeight">
            <ng-template ngbPanelTitle>
              <span>GET Block Height</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block-height/0" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block-height/:height</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the hash of the block currently at <code>:height</code>.</div>
              </div>
              <app-code-template [code]="code.blockHeight" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockRaw">
            <ng-template ngbPanelTitle>
              <span>GET Block Raw</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/raw" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/raw</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the raw block representation in binary.</div>
              </div>

              <app-code-template [code]="code.blockRaw" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockStatus">
            <ng-template ngbPanelTitle>
              <span>GET Block Status</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="title">Get Block Status</div>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>          
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/status" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/status</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the confirmation status of a block. Available fields: <code>in_best_chain</code> (boolean, false for orphaned blocks), <code>next_best</code> (the hash of the next block, only available for blocks in the best chain).</div>
              </div>

              <app-code-template [code]="code.blockStatus" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockTipHeight">
            <ng-template ngbPanelTitle>
              <span>GET Block Tip Height</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/height" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/height</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the height of the last block.</div>
              </div>

              <app-code-template [code]="code.blockTipHeight" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          
          <ngb-panel id="blockTipHash">
            <ng-template ngbPanelTitle>
              <span>GET Block Tip Hash</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/hash" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks/tip/hash</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the hash of the last block.</div>
              </div>

              <app-code-template [code]="code.blockTipHash" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockTxId">
            <ng-template ngbPanelTitle>
              <span>GET Block Transaction ID</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txid/218" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txid/:index</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the transaction at index <code>:index</code> within the specified block.</div>
              </div>

              <app-code-template [code]="code.blockTxId" [network]="network.val" ></app-code-template>

            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockTxIds">
            <ng-template ngbPanelTitle>
              <span>GET Block Transaction IDs</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txids" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txids</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div> 
                <div i18n>Returns a list of all txids in the block.</div>
              </div>
              
              <app-code-template [code]="code.blockTxIds" [network]="network.val" ></app-code-template>

            </ng-template>
          </ngb-panel>

          <ngb-panel id="blockTxs">
            <ng-template ngbPanelTitle>
              <span>GET Block Transactions</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/block/000000000000000015dc777b3ff2611091336355d3f0ee9766a2cf3be8e4b1ce/txs" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/block/:hash/txs[/:start_index]</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns a list of transactions in the block (up to 25 transactions beginning at <code>start_index</code>). Transactions returned here do not have the <code>status</code> field, since all the transactions share the same block and confirmation status.</div>
              </div>

              <app-code-template [code]="code.blockTxs" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="blocks">
            <ng-template ngbPanelTitle>
              <span>GET Blocks</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/blocks[/:start_height]</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
              </div>

              <app-code-template [code]="code.blocks" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val === 'bisq'" [ngbNavItem]="0">
      <a ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">BSQ</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >

          <ngb-panel id="bisqAddress">
            <ng-template ngbPanelTitle>
              <span>GET Address</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/address/B1DgwRN92rdQ9xpEVCdXRfgeqGw9X4YtrZz" target="_blank">GET /bisq/api/address/:address</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns all Bisq transactions belonging to a Bitcoin address, with 'B' prefixed in front of the address.</div>
              </div>

              <app-code-template [code]="code.bisqAddress" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqBlock">
            <ng-template ngbPanelTitle>
              <span>GET Block</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/block/000000000000000000079aa6bfa46eb8fc20474e8673d6e8a123b211236bf82d" target="_blank">GET /bisq/api/block/:hash</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns all Bisq transactions that exist in a Bitcoin block.</div>
              </div>

              <app-code-template [code]="code.bisqBlock" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqBlockTipHeight">
            <ng-template ngbPanelTitle>
              <span>GET Block Tip Height</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/blocks/tip/height" target="_blank">GET /bisq/api/blocks/tip/height</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the most recently processed Bitcoin block height processed by Bisq.</div>
              </div>

              <app-code-template [code]="code.bisqBlockTipHeight" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqBlockIndex">
            <ng-template ngbPanelTitle>
              <span>GET Blocks</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/blocks/0/25" target="_blank">GET /bisq/api/blocks/:index/:length</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns :length Bitcoin blocks that contain Bisq transactions, starting from :index.</div>
              </div>

              <app-code-template [code]="code.bisqBlockIndex" [network]="network.val" ></app-code-template>

            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqStats">
            <ng-template ngbPanelTitle>
              <span>GET Stats</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/stats" target="_blank">GET /bisq/api/stats</a>
              </div>
      
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns statistics about all Bisq transactions.</div>
              </div>
      
              <app-code-template [code]="code.bisqStats" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqTransaction">
            <ng-template ngbPanelTitle>
              <span>GET Transaction</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/tx/4b5417ec5ab6112bedf539c3b4f5a806ed539542d8b717e1c4470aa3180edce5" target="_blank">GET /bisq/api/tx/:txid</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns details about a Bisq transaction.</div>
              </div>

              <app-code-template [code]="code.bisqTransaction" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="bisqTransactions">
            <ng-template ngbPanelTitle>
              <span>GET Transactions</span>
            </ng-template>
            <ng-template ngbPanelContent>
              
              <div class="title">Get Mempool Txids</div>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="/bisq/api/txs/0/25" target="_blank">GET /bisq/api/txs/:index/:length</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns :length of latest Bisq transactions, starting from :index.</div>
              </div>

              <app-code-template [code]="code.bisqTransactions" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="4">
      <a ngbNavLink i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="recommendedFees">
            <ng-template ngbPanelTitle>
              <span>GET Recommended Fees</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/recommended</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
              </div>
              <app-code-template [code]="code.recommendedFees" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="mempoolBlocks">
            <ng-template ngbPanelTitle>
              <span>GET Mempool Blocks</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/fees/mempool-blocks</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
              </div>
              <app-code-template [code]="code.mempoolBlocks" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="cpfp">
            <ng-template ngbPanelTitle>
              <span>GET Children Pay for Parent</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/TXID" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/v1/cpfp/:txid</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
              </div>
              <app-code-template [code]="code.cpfp" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="5">
      <a ngbNavLink i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="mempool">
            <ng-template ngbPanelTitle>
              <span>GET Mempool</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool</a>
              </div>

              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.mempool.mempool|API Docs for /api/mempool">Returns current mempool backlog statistics.</div>
              </div>
              <app-code-template [code]="code.mempool" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          <ngb-panel id="mempoolTxs">
            <ng-template ngbPanelTitle>
              <span>GET Mempool Transactions IDs</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool/txids" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool/txids</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.mempool.txids|API Docs for /api/mempool/txids">Get the full list of txids in the mempool as an array. The order of the txids is arbitrary and does not match bitcoind.</div>
              </div>

              <app-code-template [code]="code.mempoolTxs" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="mempoolRecent">
            <ng-template ngbPanelTitle>
              <span>GET Mempool Recent</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/mempool/recent" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/mempool/recent</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n="api-docs.mempool.recent|API Docs for /api/mempool/recent">Get a list of the last 10 transactions to enter the mempool. Each transaction object contains simplified overview data, with the following fields: <code>txid</code>, <code>fee</code>, <code>vsize</code>, and <code>value</code>.</div>
              </div>
              <app-code-template [code]="code.mempoolRecent" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="6">
      <a ngbNavLink i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</a>
      <ng-template ngbNavContent>
        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
          <ngb-panel id="transaction">
            <ng-template ngbPanelTitle>
              <span>GET Transaction</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns details about a transaction. Available fields: <code>txid</code>, <code>version</code>, <code>locktime</code>, <code>size</code>, <code>weight</code>, <code>fee</code>, <code>vin</code>, <code>vout</code>, and <code>status</code>.</div>
              </div>
      
              <app-code-template [code]="code.transaction" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="transactionHex">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Hex</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                  <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/hex" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/hex</a>
                </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns a transaction serialized as hex.</div>
              </div>
      
              <app-code-template [code]="code.transactionHex" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="transactionMerkleblockProof" *ngIf="network.val !== 'liquid'">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Merkleblock Proof</span>
            </ng-template>
            <ng-template ngbPanelContent>
              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/merkleblock-proof" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/merkleblock-proof</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://bitcoin.org/en/glossary/merkle-block">bitcoind's merkleblock</a> format.</div>
              </div>
    
              <app-code-template [code]="code.transactionMerkleblockProof" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="tramsactionMerkleProof">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Merkle Proof</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/merkle-proof" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/merkle-proof</a>
              </div>
      
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://electrumx.readthedocs.io/en/latest/protocol-methods.html#blockchain-transaction-get-merkle">Electrum's blockchain.transaction.get_merkle format.</a></div>
              </div>
      
              <app-code-template [code]="code.tramsactionMerkleProof" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          
          <ngb-panel id="transactionOutspend">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Outspend</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/outspend/3" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/outspend/:vout</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the spending status of a transaction output. Available fields: <code>spent</code> (boolean), <code>txid</code> (optional), <code>vin</code> (optional), and <code>status</code> (optional, the status of the spending tx).</div>
              </div>
      
              <app-code-template [code]="code.transactionOutspend" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          
          <ngb-panel id="transactionOutspends">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Outspends</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/outspends" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/outspends</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the spending status of all transaction outputs.</div>
              </div>
      
              <app-code-template [code]="code.transactionOutspends" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          
          <ngb-panel id="transactionRaw">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Raw</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/raw" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/raw</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns a transaction as binary data.</div>
              </div>
      
              <app-code-template [code]="code.transactionRaw" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>

          <ngb-panel id="transactionStatus">
            <ng-template ngbPanelTitle>
              <span>GET Transaction Status</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/tx/15e10745f15593a899cef391191bdd3d7c12412cc4696b7bcb669d0feadc8521/status" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/tx/:txid/status</a>
              </div>
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Returns the confirmation status of a transaction. Available fields: <code>confirmed</code> (boolean), <code>block_height</code> (optional), and <code>block_hash</code> (optional).</div>
              </div>

              <app-code-template [code]="code.transactionStatus" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
          
          <ngb-panel id="postTransaction">
            <ng-template ngbPanelTitle>
              <span>POST Transaction</span>
            </ng-template>
            <ng-template ngbPanelContent>

              <div class="endpoint">
                <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                <div>POST {{ network.val === '' ? '' : '/' + network.val }}/api/tx</div>
              </div>
      
              <div class="description">
                <div class="subtitle" i18n>Description</div>
                <div i18n>Broadcast a raw transaction to the network. The transaction should be provided as hex in the request body. The <code>txid</code> will be returned on success.</div>
              </div>
              <app-code-template [code]="code.postTransaction" [network]="network.val" ></app-code-template>
            </ng-template>
          </ngb-panel>
        </ngb-accordion>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="7">
      <a ngbNavLink i18n="api-docs.tab.websocket|API Docs tab for Websocket">Websocket</a>
      <ng-template ngbNavContent >
        <div class="websocket">
          <div class="endpoint">
            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
            wss://{{ hostname }}{{ network.val === '' ? '' : '/' + network.val }}/api/v1/ws
          </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 [code]="code.websocket" [network]="network.val" ></app-code-template>
        </div>
      </ng-template>
    </li>

    <li *ngIf="network.val !== 'bisq'" [ngbNavItem]="8">
      <a ngbNavLink i18n="api-docs.tab.difficulty|API Docs tab for Difficulty">Difficulty</a>
      <ng-template ngbNavContent >
        <div class="difficulty">
          <div class="endpoint">
            <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
            <a href="{{ network.val === '' ? '' : '/' + network.val }}/api/difficulty-adjustment" target="_blank">GET {{ network.val === '' ? '' : '/' + network.val }}/api/difficulty-adjustment</a>
          </div>
          <div class="description">
            <div class="subtitle" i18n>Description</div>
              <div i18n>Returns details about difficulty adjustment.</div>
          </div> 
          <app-code-template [code]="code.difficulty" [network]="network.val" ></app-code-template>
        </div>
      </ng-template>
    </li>

  </ul>

  <div [ngbNavOutlet]="nav" class="mt-2"></div>

  <br>

  <div class="text-center">
    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
  </div>

</div>
</ng-container>