mempool/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

<div class="container-xl">

  <h1 class="float-left mr-3 mb-md-3">Transaction</h1>

  <ng-template [ngIf]="!isLoading && !error">

    <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">
      <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
      <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
      <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
    </button>
    <div>
      <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]" style="line-height: 56px;">
        <span class="d-inline d-lg-none">{{ bisqTx.id | shortenString : 24 }}</span>
        <span class="d-none d-lg-inline">{{ bisqTx.id }}</span>
      </a>
      <app-clipboard [text]="bisqTx.id"></app-clipboard>
    </div>
    <div class="clearfix"></div>

    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td>Timestamp</td>
                <td>
                  {{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
                  <div class="lg-inline">
                    <i>(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since> ago)</i>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="td-width">Included in block</td>
                <td>
                  <a [routerLink]="['/block/' | relativeUrl, bisqTx.blockHash]" [state]="{ data: { blockHeight: bisqTx.blockHeight } }">{{ bisqTx.blockHeight }}</a>
                </td>
              </tr>
              <tr>
                <td class="td-width">Features</td>
                <td>
                  <app-tx-features *ngIf="tx; else loadingTx" [tx]="tx"></app-tx-features>
                  <ng-template #loadingTx>
                    <span class="skeleton-loader"></span>
                  </ng-template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width">Burnt</td>
                <td>
                  {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount>)
              </tr>
              <tr>
                <td>Fee per vByte</td>
                <td *ngIf="!isLoadingTx; else loadingTxFee">
                  {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB
                  &nbsp;
                  <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
                </td>
                <ng-template #loadingTxFee>
                  <td><span class="skeleton-loader"></span></td>
                </ng-template>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

    <br>

    <h2>Details</h2>


    <app-bisq-transaction-details [tx]="bisqTx"></app-bisq-transaction-details>

    <br>

    <h2>Inputs & Outputs</h2>

    <app-bisq-transfers [tx]="bisqTx"></app-bisq-transfers>

    <br>

  </ng-template>

  <ng-template [ngIf="isLoading && !error">

    <div class="clearfix"></div>

    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width"><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <td class="td-width"><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <br>

    <h2>Details</h2>
    <div class="box">
      <table class="table table-borderless table-striped">
        <tbody>
          <tr>
            <td><span class="skeleton-loader"></span></td>
            <td><span class="skeleton-loader"></span></td>
          </tr>
          <tr>
            <td><span class="skeleton-loader"></span></td>
            <td><span class="skeleton-loader"></span></td>
          </tr>
          <tr>
            <td><span class="skeleton-loader"></span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <br>

    <h2>Inputs & Outputs</h2>

    <div class="box">
      <div class="row">
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td><span class="skeleton-loader"></span></td>
              <td><span class="skeleton-loader"></span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </ng-template>

  <ng-template [ngIf]="error">
    <div class="clearfix"></div>

    <div class="text-center">
      Error loading Bisq transaction
      <br><br>
      <i>{{ error.status }}: {{ error.statusText }}</i>
    </div>
  </ng-template>

</div>