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

<div class="container-xl">

  <ng-template [ngIf]="!isLoading && !error">
    <div class="title-block">
      <div class="title">
        <h1 i18n="shared.transaction">Transaction</h1>
      </div>

      <span class="tx-link float-left">
        <a [routerLink]="['/bisq-tx' | relativeUrl, bisqTx.id]">
          <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>
      </span>
      <span class="grow"></span>
      <div class="container-buttons">
        <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
          <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>
    </div>
    
      <div class="clearfix"></div>

      <div class="box transaction-container">
        <div class="row">
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
                <tr>
                  <td i18n="transaction.timestamp|Transaction Timestamp">Timestamp</td>
                  <td>
                    &lrm;{{ bisqTx.time | date:'yyyy-MM-dd HH:mm' }}
                    <div class="lg-inline">
                      <i class="symbol">(<app-time-since [time]="bisqTx.time / 1000" [fastRender]="true"></app-time-since>)</i>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="td-width" i18n="transaction.included-in-block|Transaction included in block">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" i18n="transaction.features|Transaction features">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" i18n="BSQ burnt amount">Burnt amount</td>
                  <td>
                    {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
                </tr>
                <tr>
                  <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
                  <td *ngIf="!isLoadingTx; else loadingTxFee">
                    {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol">sat/vB</span>
                    &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>

      <div class="title">
        <h2 i18n="transaction.details">Details</h2>
      </div>

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

      <br>

      <div class="title">
        <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
      </div>

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

      <br>
    </ng-template>

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

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

    <div class="title-block">
      <div class="title">
        <h1 i18n="shared.transaction">Transaction</h1>
      </div>
    </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>
              <tr>
                <td class="td-width"><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <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>
              <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>

    <div class="title">
      <h2 i18n="transaction.details">Details</h2>
    </div>

    <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>

    <div class="title">
      <h2 i18n="transaction.inputs-and-outputs|Transaction inputs and outputs">Inputs & Outputs</h2>
    </div>
    
    <div class="box">
      <div class="row">
        <div class="col-sm">
          <table class="table table-borderless table-striped">
            <tbody>
              <tr>
                <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><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </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>