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

<div class="container-xl">

  <div class="title-block">
    <div *ngIf="rbfTransaction" class="alert alert-mempool" role="alert">
      This transaction has been replaced by:
      <a class="alert-link" [routerLink]="['/tx/' | relativeUrl, rbfTransaction.txid]" [state]="{ data: rbfTransaction }">
        <span class="d-inline d-lg-none">{{ rbfTransaction.txid | shortenString : 24 }}</span>
        <span class="d-none d-lg-inline">{{ rbfTransaction.txid }}</span>
      </a>
    </div>
  
    <h1 class="float-left mr-3 mb-md-3">Transaction</h1>

    <ng-template [ngIf]="tx?.status?.confirmed">
      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">{{ 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-right mr-2 mt-1 mt-md-3">Unconfirmed</button>
    </ng-template>

    <div>
      <a [routerLink]="['/tx/' | relativeUrl, txId]" style="line-height: 56px;">
        <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 class="clearfix"></div>
  </div>
  <div class="clearfix"></div>

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

    <ng-template [ngIf]="tx.status.confirmed" [ngIfElse]="unconfirmedTemplate">
    
      <div class="box">
        <div class="row">
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
                <tr>
                  <td class="td-width">Included in block</td>
                  <td>
                    <a [routerLink]="['/block/' | relativeUrl, tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">{{ tx.status.block_height }}</a>
                    <i> (<app-time-since [time]="tx.status.block_time" [fastRender]="true"></app-time-since> ago)</i>
                  </td>
                </tr>
                <ng-template [ngIf]="transactionTime > 0">
                  <tr>
                    <td>Confirmed</td>
                    <td>After <app-timespan [time]="tx.status.block_time - transactionTime"></app-timespan></td>
                  </tr>
                </ng-template>
                <ng-container *ngTemplateOutlet="features"></ng-container>
              </tbody>
            </table>
          </div>
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
                <ng-template [ngIf]="tx.fee">
                  <tr>
                    <td class="td-width">Fee</td>
                    <td>{{ tx.fee | number }} sat (<app-fiat [value]="tx.fee"></app-fiat>)</td>
                  </tr>
                  <tr>
                    <td>Fee per vByte</td>
                    <td>
                      {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/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>
                </ng-template>
              </tbody>
            </table>
          </div>

        </div>
      </div>

    </ng-template>

    <ng-template #unconfirmedTemplate>

      <div class="box">
        <div class="row">
          <div class="col-sm">
            <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" [fastRender]="true"></app-time-since> ago</i></td>
                    </tr>
                  </ng-template>
                </ng-template>
                <tr>
                  <td class="td-width">ETA</td>
                  <td>
                    <ng-template [ngIf]="txInBlockIndex === undefined" [ngIfElse]="estimationTmpl">
                      <span class="skeleton-loader"></span>
                    </ng-template>
                    <ng-template #estimationTmpl>
                      <ng-template [ngIf]="txInBlockIndex >= 7" [ngIfElse]="belowBlockLimit">
                        In several hours (or more)
                      </ng-template>
                      <ng-template #belowBlockLimit>
                        <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeEstimateDefault">
                          &lt; {{ 1 * txInBlockIndex + 1 }} minutes <i>({{ txInBlockIndex + 1 }} block{{ txInBlockIndex > 0 ? 's' : '' }})</i>
                        </ng-template>
                        <ng-template #timeEstimateDefault>

                          ~{{ 10 * txInBlockIndex + 10 }} minutes <i>({{ txInBlockIndex + 1 }} block{{ txInBlockIndex > 0 ? 's' : '' }})</i>
                        </ng-template>
                      </ng-template>
                    </ng-template>
                  </td>
                </tr>
                <ng-container *ngTemplateOutlet="features"></ng-container>
              </tbody>
            </table>
          </div>
          <div class="col-sm">
            <table class="table table-borderless table-striped">
              <tbody>
                <tr>
                  <td class="td-width">Fee</td>
                  <td>{{ tx.fee | number }} sat (<app-fiat [value]="tx.fee"></app-fiat>)</td>
                </tr>
                <tr>
                  <td>Fee per vByte</td>
                  <td>{{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </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">
      <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><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><span class="skeleton-loader"></span></td>
                <td><span class="skeleton-loader"></span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </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" *ngIf="waitingForTransaction">
      <h3>Transaction not found.</h3>
      <h5>Waiting for it to appear in the mempool...</h5>
      <div class="spinner-border text-light mt-2"></div>
    </div>
    
    <ng-template #errorTemplate>
      <div class="text-center">
        <h3>{{ error.error }}</h3>
      </div>
    </ng-template>
  </ng-template>

</div>

<br>

<ng-template #features>
  <tr *ngIf="network !== 'liquid'">
    <td class="td-width">Features</td>
    <td>
      <span *ngIf="segwitGains.realizedGains && !segwitGains.potentialBech32Gains" class="badge badge-success mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number:  '1.0-0' }}% on fees by using native SegWit-Bech32" placement="bottom">SegWit</span>
      <span *ngIf="segwitGains.realizedGains && segwitGains.potentialBech32Gains" class="badge badge-warning mr-1" ngbTooltip="This transaction saved {{ segwitGains.realizedGains * 100 | number:  '1.0-0' }}% on fees by using SegWit and could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% more by fully upgrading to native SegWit-Bech32" placement="bottom">SegWit</span>
      <span *ngIf="segwitGains.potentialP2shGains" class="badge badge-danger mr-1" ngbTooltip="This transaction could save {{ segwitGains.potentialBech32Gains * 100 | number : '1.0-0' }}% on fees by upgrading to native SegWit-Bech32 or {{ segwitGains.potentialP2shGains * 100 | number:  '1.0-0' }}% by upgrading to SegWit-P2SH" placement="bottom"><del>SegWit</del></span>
      <span *ngIf="isRbfTransaction" class="badge badge-success" ngbTooltip="This transaction support Replace-By-Fee (RBF) allowing fee bumping" placement="bottom">RBF</span>
    </td>
  </tr>
</ng-template>