mempool/frontend/src/app/components/liquid-reserves-audit/federation-utxos-list/federation-utxos-list.component.html

<div [ngClass]="{'widget': widget}">
  
  <div *ngIf="!widget" class="form-check">
    <div style="padding-left: 0.75rem;">
      <input style="margin-top: 6px" class="form-check-input" type="checkbox" [checked]="showChangeUtxosToggle$ | async" id="show-change-utxos" (change)="onShowChangeUtxosToggleChange($event)">
      <label class="form-check-label" for="show-change-utxos">
        <small i18n="liquid.include-change-utxos">Include Change UTXOs</small>
      </label>
    </div>
  </div>

  <div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>

  <div class="clearfix"></div>
  
  <div style="min-height: 295px">
    <table class="table table-borderless">
      <thead style="vertical-align: middle;">
        <th class="txid text-left" [ngClass]="{'widget': widget}" i18n="liquid.output">Output</th>
        <th class="address text-left" *ngIf="!widget" i18n="liquid.address">Address</th>
        <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
        <th class="pegin text-left" *ngIf="!widget" i18n="liquid.related-peg-in">Related Peg-In</th>
        <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
      </thead>
      <tbody *ngIf="filteredFederationUtxos$ | async as utxos; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
        <ng-container *ngIf="widget; else regularRows">
          <tr *ngFor="let utxo of utxos | slice:0:5">
            <td class="txid text-left widget">
              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
              </a>
            </td>
            <td class="amount text-right widget">
              <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
            </td>
            <td class="timestamp text-right widget">
              <app-time kind="since" [time]="utxo.blocktime"></app-time>
            </td>
          </tr>
        </ng-container>
        <ng-template #regularRows>
          <tr *ngFor="let utxo of utxos | slice:(page - 1) * pageSize:page * pageSize">
            <td class="txid text-left">
              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + utxo.txid + ':' + utxo.txindex }}" target="_blank" style="color:#b86d12">
                <app-truncate [text]="utxo.txid + ':' + utxo.txindex" [lastChars]="6"></app-truncate>
              </a>
            </td>
            <td class="address text-left">
              <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + utxo.bitcoinaddress }}" target="_blank" style="color:#b86d12">
                <app-truncate [text]="utxo.bitcoinaddress" [lastChars]="6"></app-truncate>
              </a>
            </td>
            <td class="amount text-right">
              <app-amount [satoshis]="utxo.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
            </td>
            <td class="pegin text-left">
              <ng-container *ngIf="utxo.pegtxid; else noPeginMessage">
                <a [routerLink]="['/tx' | relativeUrl, utxo.pegtxid + ':' + utxo.pegindex]">
                  <app-truncate [text]="utxo.pegtxid + ':' + utxo.pegindex" [lastChars]="6"></app-truncate>
                </a>
              </ng-container>
              <ng-template #noPeginMessage>
                <span class="text-muted">-</span>
              </ng-template>
            </td>
            <td class="timestamp text-right">
              &lrm;{{ utxo.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
              <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="utxo.blocktime"></app-time>)</i></div>
            </td>
          </tr>
        </ng-template>
      </tbody>
      <ng-template #skeleton>
        <tbody *ngIf="widget; else regularRowsSkeleton">
          <tr *ngFor="let item of skeletonLines">
            <td class="txid text-left widget">
              <span class="skeleton-loader" style="max-width: 400px"></span>
            </td>
            <td class="amount text-right widget">
              <span class="skeleton-loader" style="max-width: 300px"></span>
            </td>
            <td class="timestamp text-right widget">
              <span class="skeleton-loader" style="max-width: 300px"></span>
            </td>
          </tr>
        </tbody>
        <ng-template #regularRowsSkeleton>
          <tr *ngFor="let item of skeletonLines">
            <td class="txid text-left">
              <span class="skeleton-loader" style="max-width: 300px"></span>
            </td>
            <td class="address text-left">
              <span class="skeleton-loader" style="max-width: 300px"></span>
            </td>
            <td class="amount text-right">
              <span class="skeleton-loader" style="max-width: 140px"></span>
            </td>
            <td class="pegin text-left">
              <span class="skeleton-loader" style="max-width: 300px"></span>
            </td>
            <td class="timestamp text-right">
              <span class="skeleton-loader" style="max-width: 140px"></span>
            </td>
          </tr>
        </ng-template>
      </ng-template>
    </table>

    <ngb-pagination *ngIf="!widget && filteredFederationUtxos$ | async as utxos" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
      [collectionSize]="utxos.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
      (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
    </ngb-pagination>

    <ng-template [ngIf]="!widget">
      <div class="clearfix"></div>
      <br>
    </ng-template>
  </div>
  
</div>