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 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="shared.amount">Amount</th>
          <th class="output text-left" *ngIf="!widget" i18n="liquid.fund-redemption-tx">Fund / Redemption Tx</th>
          <th class="address text-left" *ngIf="!widget" i18n="liquid.bitcoin-address">BTC Address</th>
          <th class="timestamp text-right" i18n="shared.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"></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"></app-truncate>
                  </a>
                </ng-container>
              </td>
              <td class="amount text-right widget" [ngClass]="{'credit': peg.amount > 0, 'debit': peg.amount < 0}">
                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="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}">
                <app-amount [satoshis]="peg.amount" [noFiat]="true" [forceBtc]="true" [addPlus]="true"></app-amount>
              </td>
              <td class="output text-left">
                <ng-container *ngIf="peg.bitcointxid; else redeemInProgress">
                  <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>
                <ng-template #redeemInProgress>
                  <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
                    <i><span class="text-muted" i18n="liquid.redemption-in-progress">Peg out in progress...</span></i>
                  </ng-container>
                </ng-template>
              </td>
              <td class="address text-left">
                <ng-container *ngIf="peg.bitcoinaddress; else noRedeem">
                  <a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + peg.bitcoinaddress }}" target="_blank" style="color:#b86d12">
                    <app-truncate [text]="peg.bitcoinaddress" [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="address text-left">
                <span class="skeleton-loader" style="max-width: 140px"></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 #noRedeem>
  <span class="text-muted">-</span>
</ng-template>