mempool/frontend/src/app/explorer/transaction/transaction.component.html

<div class="container">
  <h1>Transaction</h1>

  <br>

  <ng-template [ngIf]="!isLoadingTx" [ngIfElse]="loadingTx">

    <app-transactions-list [transactions]="[tx]" [showConfirmations]="true"></app-transactions-list>

    <br>

    <h2>Details</h2>

    <br>

    <div class="row">
      <div class="col">
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td>Size</td>
              <td>{{ tx.size | bytes: 2 }}</td>
            </tr>
            <tr>
              <td>Weight</td>
              <td>{{ tx.weight | wuBytes: 2 }}</td>
            </tr>
            <tr *ngIf="tx.status.confirmed">
              <td>Included in block</td>
              <td><a [routerLink]="['/explorer/block/', tx.status.block_hash]">#{{ tx.status.block_height }}</a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col">
        <table class="table table-borderless table-striped" *ngIf="tx.fee">
          <tbody>
            <tr>
              <td>Fees</td>
              <td>{{ tx.fee }} <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
            </tr>
            <tr>
              <td>Fees per vByte</td>
              <td>{{ (tx.fee * 100000000) / tx.vsize | number : '1.2-2' }} sat/vB</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </ng-template>
  <ng-template #loadingTx>
    <div class="text-center">
      <div class="spinner-border text-light"></div>
      <br><br>
    </div>
  </ng-template>
</div>