mempool/frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html

<div class="container-xl">
  <div [ngClass]="{'widget': widget}">

    <div *ngIf="!widget">
      <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
    </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="transaction text-left" [ngClass]="{'widget': widget}" i18n="shared.transaction">Transaction</th>
          <th class="amount text-right" [ngClass]="{'widget': widget}" i18n="liquid.amount">Amount</th>
          <th class="output text-left" *ngIf="!widget" i18n="liquid.bitcoin-funding-redeem">BTC Funding / Redeem</th>
          <th class="timestamp text-right" i18n="latest-blocks.date" [ngClass]="{'widget': widget}">Date</th>
        </thead>
        <tbody *ngIf="recentPegs$ | async as pegs; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
          <ng-container *ngIf="widget; else regularRows">
            <tr *ngFor="let peg of pegs | slice:0:6">
              <td class="transaction text-left widget">
                <ng-container *ngIf="peg.amount > 0">
                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
                  </a>
                </ng-container>
                <ng-container *ngIf="peg.amount < 0">
                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
                  </a>
                </ng-container>
              </td>
              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
              </td>
              <td class="timestamp text-right widget">
                <app-time kind="since" [time]="peg.blocktime"></app-time>
              </td>
            </tr>
          </ng-container>
          <ng-template #regularRows>
            <tr *ngFor="let peg of pegs | slice:(page - 1) * pageSize:page * pageSize">
              <td class="transaction text-left">
                <ng-container *ngIf="peg.amount > 0">
                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vin=' + peg.txindex">
                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
                  </a>
                </ng-container>
                <ng-container *ngIf="peg.amount < 0">
                  <a [routerLink]="['/tx' | relativeUrl, peg.txid]" [fragment]="'vout=' + peg.txindex">
                    <app-truncate [text]="peg.txid" [lastChars]="6"></app-truncate>
                  </a>
                </ng-container>
              </td>
              <td class="amount text-right" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                {{ peg.amount > 0 ? '+' : '-' }}<app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true"></app-amount>
              </td>
              <td class="output text-left">
                <ng-container *ngIf="peg.bitcointxid; else noPeginMessage">
                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/tx/' + peg.bitcointxid + ':' + peg.bitcoinindex }}" target="_blank" style="color:#b86d12">
                    <app-truncate [text]="peg.bitcointxid + ':' + peg.bitcoinindex" [lastChars]="6"></app-truncate>
                  </a>
                </ng-container>
              </td>
              <td class="timestamp text-right">
                &lrm;{{ peg.blocktime * 1000 | date:'yyyy-MM-dd HH:mm' }}
                <div class="symbol lg-inline relative-time"><i>(<app-time kind="since" [time]="peg.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="transaction 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="transaction 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="output 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 && recentPegs$ | async as pegs" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
        [collectionSize]="pegs.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>
</div>

<br>

<ng-template #noPeginMessage>
  <span class="text-muted">BTC Redeem in progress...</span>
</ng-template>