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

<div class="container-xl">

  <div class="title-block">
    <h1 class="float-md-left">Transaction</h1>

    <ng-template [ngIf]="tx?.status?.confirmed">
      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-md-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
    </ng-template>
    <ng-template [ngIf]="tx && !tx?.status.confirmed">
      <button type="button" class="btn btn-sm btn-danger float-md-right mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
    </ng-template>

    <div>
      <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">
        <span class="d-inline d-lg-none">{{ txId | shortenString : 24 }}</span>
        <span class="d-none d-lg-inline">{{ txId }}</span>
      </a>
      <app-clipboard [text]="txId"></app-clipboard>
    </div>
  </div>

  <br>

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

    <ng-template [ngIf]="tx.status.confirmed" [ngIfElse]="unconfirmedTemplate">
    
      <div class="box">
        
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td>Included in block</td>
              <td>
                <a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">{{ tx.status.block_height }}</a>
                <div class="md-inline">&nbsp;at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</div>
                <div class="md-inline">&nbsp;<i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></div>
              </td>
            </tr>
            <ng-template [ngIf]="tx.fee">
              <tr>
                <td>Fee per vByte</td>
                <td>
                  {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sats/vB
                  &nbsp;
                  <span *ngIf="feeRating === 1" class="badge badge-success">Optimal</span>
                  <span *ngIf="feeRating === 2" class="badge badge-warning" title="Only ~{{ medianFeeNeeded }} sat/vB was needed to get into this block">Overpaid {{ overpaidTimes }}x</span>
                  <span *ngIf="feeRating === 3" class="badge badge-danger" title="Only ~{{ medianFeeNeeded }} sat/vB was needed to get into this block">Overpaid {{ overpaidTimes }}x</span>
                </td>
              </tr>
              <tr>
                <td>Fee</td>
                <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
              </tr>
            </ng-template>
          </tbody>
        </table>
      </div>

      <br>

    </ng-template>

    <ng-template #unconfirmedTemplate>

      <div class="box">

        <table class="table table-borderless table-striped">
          <tbody>
            <ng-template [ngIf]="transactionTime !== 0">
              <tr *ngIf="transactionTime === -1; else firstSeenTmpl">
                <td><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
              <ng-template #firstSeenTmpl>
                <tr>
                  <td>First seen</td>
                  <td><i><app-time-since [time]="transactionTime"></app-time-since> ago</i></td>
                </tr>
              </ng-template>
            </ng-template>
            <tr>
              <td>Fees</td>
              <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
            </tr>
            <tr>
              <td>Fees per vByte</td>
              <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sats/vB</td>
            </tr>
          </tbody>
        </table>
      </div>
    </ng-template>

    <br>

    <h2>Inputs & Outputs</h2>

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

    <h2>Details</h2>
    <div class="box">
      <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>
        </tbody>
      </table>
    </div>

  </ng-template>

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

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

    <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>
        </tbody>
      </table>
    </div>

  </ng-template>

  <ng-template [ngIf]="error">
    <div class="text-center">
      Error loading transaction data.
      <br>
      <i>{{ error.error }}</i>
    </div>
  </ng-template>

</div>

<br>