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

<div class="container-xl" *ngIf="mempoolBlock$ | async as mempoolBlock">

  <div class="title-block">
    <h1>{{ getGetOrdinal() }}</h1>
  </div>

  <div class="box">
    <div class="row">
      <div class="col-sm">
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td>Median fee</td>
              <td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="mempoolBlock.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
            </tr>
            <tr>
              <td>Fee span</td>
              <td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB</span></td>
            </tr>
            <tr>
              <td>Total fees</td>
              <td>{{ mempoolBlock.totalFees / 100000000 | number : '1.2-2' }} <ng-template [ngIf]="network === 'liquid'">L-</ng-template>BTC (<app-fiat [value]="mempoolBlock.totalFees" digitsInfo="1.0-0"></app-fiat>)</td>
            </tr>
            <tr>
              <td>Transactions</td>
              <td>{{ mempoolBlock.nTx }}</td>
            </tr>
            <tr>
              <td>Filled</td>
              <td>
                <div class="progress position-relative">
                  <div class="progress-bar progress-mempool {{ network }}" role="progressbar" [ngStyle]="{'width': (mempoolBlock.blockVSize / 1000000) * 100 + '%' }"></div>
                  <div class="progress-text">{{ mempoolBlock.blockSize | bytes: 2 }}</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-sm">
        <app-fee-distribution-graph [feeRange]="mempoolBlock.feeRange"></app-fee-distribution-graph>
      </div>
    </div>
  </div>

  <br>

</div>