mempool/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

<div class="mempool-blocks-container">
  <div class="flashing">
    <div *ngFor="let projectedBlock of mempoolBlocks; let i = index; trackBy: trackByFn">
      <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="getStyleForMempoolBlockAtIndex(i)">
        <a [routerLink]="['/mempool-block/', i]" class="blockLink">&nbsp;</a>
        <div class="block-body" *ngIf="mempoolBlocks?.length">
          <div class="fees">
            <span class="yellow-color">~{{ projectedBlock.medianFee | ceil }} sats/vB</span>
          </div>
          <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
          <div class="transaction-count">{{ projectedBlock.nTx }} transactions</div>
          <div class="time-difference" *ngIf="projectedBlock.blockVSize < 1000000">
            <ng-template [ngIf]="network === 'liquid'" [ngIfElse]="timeDiffMainnet">
              In &lt; {{ 1 * i + 1 }} minute
            </ng-template>
            <ng-template #timeDiffMainnet>
              In ~{{ 10 * i + 10 }} minutes
            </ng-template>
          </div>
          <ng-template [ngIf]="i === mempoolBlocks.length - 1 && projectedBlock.blockVSize >= 1000000">
            <div class="time-difference">+{{ projectedBlock.blockVSize / 1000000 | ceil }} blocks</div>
          </ng-template>
        </div>
        <span class="animated-border"></span>
      </div>
    </div>
  </div>
  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px', transition: transition }"></div>
</div>