mempool/frontend/src/app/components/acceleration/active-acceleration-box/active-acceleration-box.component.html

<table>
  <tbody>
    <tr>
      <td class="td-width field-label" i18n="transaction.accelerated-to-feerate|Accelerated to feerate">Accelerated to</td>
      <td class="field-value">
        <div class="effective-fee-container">
          @if (accelerationInfo?.acceleratedFeeRate && (!tx.effectiveFeePerVsize || accelerationInfo.acceleratedFeeRate >= tx.effectiveFeePerVsize)) {
            <app-fee-rate [fee]="accelerationInfo.acceleratedFeeRate"></app-fee-rate>
          } @else {
            <app-fee-rate [fee]="tx.effectiveFeePerVsize"></app-fee-rate>
          }
        </div>
      </td>
      <td class="pie-chart" rowspan="2">
        <div class="chart-container">
          @if (tx && (tx.acceleratedBy || accelerationInfo) && miningStats) {
            <div
              echarts
              *browserOnly
              class="chart"
              [initOpts]="chartInitOptions"
              [options]="chartOptions"
              style="height: 72px; width: 72px;"
              (chartInit)="onChartInit($event)"
            ></div>
          } @else {
            <div class="chart-loading">
              <div class="spinner-border text-light"></div>
            </div>
          }
        </div>
      </td>
    </tr>
    <tr>
      <td class="td-width field-label" i18n="transaction.accelerated-by-hashrate|Accelerated to hashrate">Accelerated by</td>
      <td class="field-value" *ngIf="acceleratedByPercentage">
        {{ acceleratedByPercentage }} <span class="symbol hashrate-label">of hashrate</span>
      </td>
    </tr>
  </tbody>
</table>