mempool/frontend/src/app/components/transactions-list/transactions-list.component.html

<ng-container *ngFor="let tx of transactions; let i = index; trackBy: trackByFn">
  <div *ngIf="!transactionPage" class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
    <a [routerLink]="['/tx/' | relativeUrl, tx.txid]" [state]="{ data: tx }">
      <span style="float: left;" class="d-block d-md-none">{{ tx.txid | shortenString : 16 }}</span>
      <span style="float: left;" class="d-none d-md-block">{{ tx.txid }}</span>
    </a>
    <div class="float-right">
      <ng-template [ngIf]="tx.status.confirmed">{{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }}</ng-template>
      <ng-template [ngIf]="!tx.status.confirmed && tx.firstSeen">
        <i><app-time-since [time]="tx.firstSeen" [fastRender]="true"></app-time-since> ago</i>
      </ng-template>
    </div>
  </div>
  <div class="header-bg box" infiniteScroll [alwaysCallback]="true" [fromRoot]="true" [infiniteScrollContainer]="'body'" [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
    <div class="row">
      <div class="col">
        <table class="table table-borderless smaller-text table-xs" style="margin: 0;">
          <tbody>
            <tr *ngFor="let vin of getFilteredTxVin(tx)">
              <td class="arrow-td">
                <ng-template [ngIf]="vin.prevout === null && !vin.is_pegin" [ngIfElse]="hasPrevout">
                  <i class="arrow grey"></i>
                </ng-template>
                <ng-template #hasPrevout>
                  <a *ngIf="vin.is_pegin; else defaultPrevout" [routerLink]="['/tx/', vin.txid]">
                    <i class="arrow red"></i>
                  </a>
                  <ng-template #defaultPrevout>
                    <a [routerLink]="['/tx/' | relativeUrl, vin.txid]">
                      <i class="arrow red"></i>
                    </a>
                  </ng-template>
                </ng-template>
              </td>
              <td>
                <div [ngSwitch]="true">
                  <ng-container *ngSwitchCase="vin.is_coinbase">Coinbase<ng-template [ngIf]="network !== 'liquid'"> (Newly Generated Coins)</ng-template></ng-container>
                  <ng-container *ngSwitchCase="vin.is_pegin">
                    Peg-in
                  </ng-container>
                  <ng-container *ngSwitchDefault>
                    <a [routerLink]="['/address/' | relativeUrl, vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
                      <span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
                      <span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</span>
                    </a>
                    <div>
                      <app-address-labels [vin]="vin"></app-address-labels>
                    </div>
                  </ng-container>
                </div>
              </td>
              <td class="text-right nowrap">
                <app-amount *ngIf="vin.prevout" [satoshis]="vin.prevout.value"></app-amount>
              </td>
            </tr>
            <tr *ngIf="tx.vin.length > tx['@vinLength']">
              <td colspan="3" class="text-center">
                <button class="btn btn-sm btn-primary mt-2" (click)="loadMoreVin(tx)">Load more</button>
              </td>
            </tr>
          </tbody>
        </table>

      </div>
      <div class="col mobile-bottomcol">
        <table class="table table-borderless smaller-text table-xs"  style="margin: 0;">
          <tbody>
            <tr *ngFor="let vout of getFilteredTxVout(tx); let vindex = index;">
              <td>
                <a *ngIf="vout.scriptpubkey_address; else scriptpubkey_type" [routerLink]="['/address/' | relativeUrl, vout.scriptpubkey_address]" title="{{ vout.scriptpubkey_address }}">
                  <span class="d-block d-lg-none">{{ vout.scriptpubkey_address | shortenString : 16 }}</span>
                  <span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 42 }}</span>
                </a>
                <ng-template #scriptpubkey_type>
                  <ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
                    Peg-out to <a [routerLink]="['/address/', vout.pegout.scriptpubkey_address]" title="{{ vout.pegout.scriptpubkey_address }}">
                      <span class="d-block d-lg-none">{{ vout.pegout.scriptpubkey_address | shortenString : 16 }}</span>
                      <span class="d-none d-lg-block">{{ vout.pegout.scriptpubkey_address | shortenString : 42 }}</span>
                    </a>
                  </ng-template>
                  <ng-template #defaultscriptpubkey_type>
                    {{ vout.scriptpubkey_type | scriptpubkeyType }}
                  </ng-template>
                </ng-template>
              </td>
              <td class="text-right nowrap">
                <ng-template [ngIf]="vout.asset && vout.scriptpubkey_type === 'op_return' && vout.asset !== nativeAssetId" [ngIfElse]="defaultOutput">
                  <div *ngIf="assetsMinimal && assetsMinimal[vout.asset]">
                    {{ vout.value / 100000000 | number: '1.0-' + assetsMinimal[vout.asset][3] }} {{ assetsMinimal[vout.asset][1] }}
                    <br>
                    {{ assetsMinimal[vout.asset][0] }}
                    <br>
                    <a [routerLink]="['/asset/' | relativeUrl, vout.asset]">{{ vout.asset | shortenString : 13 }}</a>
                    <br><br>
                </div>
                </ng-template>
                <ng-template #defaultOutput>
                  <app-amount [satoshis]="vout.value"></app-amount>
                </ng-template>
              </td>
              <td class="pl-1 arrow-td">
                <i *ngIf="!outspends[i] || vout.scriptpubkey_type === 'op_return' || vout.scriptpubkey_type === 'fee' ; else outspend" class="arrow grey"></i>
                <ng-template #outspend>
                  <i *ngIf="!outspends[i][vindex] || !outspends[i][vindex].spent; else spent" class="arrow green"></i>
                  <ng-template #spent>
                    <a [routerLink]="['/tx/' | relativeUrl, outspends[i][vindex].txid]"><i class="arrow red"></i></a>
                  </ng-template>
                </ng-template>
              </td>
            </tr>
            <tr *ngIf="tx.vout.length > tx['@voutLength']">
              <td colspan="3" class="text-center">
                <button class="btn btn-sm btn-primary mt-2" (click)="loadMoreVout(tx)">Load more</button>
              </td>
            </tr>
            <tr>
              <td class="text-right" colspan="4" style="vertical-align: bottom;">
                <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
                  <button *ngIf="tx.status.confirmed; else unconfirmedButton" type="button" class="btn btn-sm btn-success mt-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 #unconfirmedButton>
                    <button type="button" class="btn btn-sm btn-danger mt-3">Unconfirmed</button>
                  </ng-template>
                  &nbsp;
                </span>
                <button type="button" class="btn btn-sm btn-primary mt-3" (click)="switchCurrency()">
                  <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="defaultAmount">Confidential</ng-template>
                  <ng-template #defaultAmount>
                    <app-amount [satoshis]="getTotalTxOutput(tx)"></app-amount>
                  </ng-template>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <br>

</ng-container>