mempool/frontend/src/app/components/accelerate-preview/accelerate-preview.component.html

<span id="successAlert" class="m-0 p-0 d-block" style="height: 1px;"></span>
<div class="row" *ngIf="showSuccess">
  <div class="col">
    <div class="alert alert-success">
      Transaction has now been <a class="alert-link" routerLink="/services/accelerator/history">submitted</a> to mining pools for acceleration.
    </div>
  </div>
</div>

<span id="mempoolError" class="m-0 p-0 d-block" style="height: 1px;"></span>
<div class="row" *ngIf="error">
  <div class="col">
    <app-mempool-error [error]="error" [alertClass]="error === 'waitlisted' ? 'alert-mempool' : 'alert-danger'"></app-mempool-error>
  </div>
</div>

<div class="accelerate-cols">
  <ng-container *ngIf="!isMobile">
    <app-accelerate-fee-graph
      [tx]="tx"
      [estimate]="estimate"
      [maxRateOptions]="maxRateOptions"
      [maxRateIndex]="selectFeeRateIndex"
      (setUserBid)="setUserBid($event)"
    ></app-accelerate-fee-graph>
  </ng-container>

  <ng-container *ngIf="estimate else loadingEstimate">
    <div [class]="{estimateDisabled: error}">

      <div *ngIf="user && !estimate.hasAccess">
        <div class="alert alert-mempool">You are currently on the waitlist</div>
      </div>

      <h5 i18n="accelerator.your-transaction">Your transaction</h5>
      <div class="row">
        <div class="col">
          <small *ngIf="hasAncestors" class="form-text text-muted mb-2">
            <ng-container i18n="accelerator.plus-unconfirmed-ancestors">Plus {{ estimate.txSummary.ancestorCount - 1 }} unconfirmed ancestor(s)</ng-container>
          </small>
          <table class="table table-borderless table-border table-dark table-accelerator">
            <tbody>
              <tr class="group-first">
                <td class="item" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
                <td style="text-align: end;" [innerHTML]="'&lrm;' + (estimate.txSummary.effectiveVsize | vbytes: 2)"></td>
              </tr>
              <tr class="info">
                <td class="info" colspan=3>
                  <i><small>Size in vbytes of this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
                </td>
              </tr>
              <tr>
                <td class="item" i18n="accelerator.in-band-fees">In-band fees</td>
                <td style="text-align: end;">
                  {{ estimate.txSummary.effectiveFee | number : '1.0-0' }} <span class="symbol" i18n="shared.sats">sats</span>
                </td>
              </tr>
              <tr class="info group-last">
                <td class="info" colspan=3>
                  <i><small>Fees already paid by this transaction<span *ngIf="hasAncestors"> and its unconfirmed ancestors</span></small></i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <br>
      <h5 i18n="accelerator.pay-how-much">How much more are you willing to pay?</h5>
      <div class="row">
        <div class="col">
          <small class="form-text text-muted mb-2" i18n="accelerator.transaction-fee-description">Choose the maximum extra transaction fee you're willing to pay to get into the next block.</small>
          <div class="form-group">
            <div class="fee-card">
              <div class="d-flex mb-0">
                <ng-container *ngFor="let option of maxRateOptions">
                  <button type="button" class="btn btn-primary flex-grow-1 btn-border btn-sm feerate" [class]="{active: selectFeeRateIndex === option.index}" (click)="setUserBid(option)">
                    <span class="fee">{{ option.fee + estimate.mempoolBaseFee + estimate.vsizeFee | number }} <span class="symbol" i18n="shared.sats">sats</span></span>
                    <span class="rate">~<app-fee-rate [fee]="option.rate" rounding="1.0-0"></app-fee-rate></span>
                  </button>
                </ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <h5>Acceleration summary</h5>
      <div class="row mb-3">
        <div class="col">
          <table class="table table-borderless table-border table-dark table-accelerator">
            <tbody>
              <!-- ESTIMATED FEE -->
              <ng-container>
                <tr class="group-first">
                  <td class="item" i18n="accelerator.next-block-rate">Next block market rate</td>
                  <td class="amt" style="font-size: 16px">
                    {{ estimate.targetFeeRate | number : '1.0-0' }}
                  </td>
                  <td class="units"><span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
                </tr>
                <tr class="info">
                  <td class="info">
                    <i><small i18n="accelerator.estimated-extra-fee-required">Estimated extra fee required</small></i>
                  </td>
                  <td class="amt">
                    {{ math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee) | number }}
                  </td>
                  <td class="units">
                    <span class="symbol" i18n="shared.sats">sats</span>
                    <span class="fiat ml-1"><app-fiat [value]="math.max(0, estimate.nextBlockFee - estimate.txSummary.effectiveFee)"></app-fiat></span>
                  </td>
                </tr>
              </ng-container>
  
              <!-- MEMPOOL BASE FEE -->
              <tr>
                <td class="item" i18n="accelerator.mempool-accelerator-fees">Mempool Accelerator™ fees</td>
              </tr>
              <tr class="info">
                <td class="info">
                  <i><small i18n="accelerator.service-fee">Accelerator Service Fee</small></i>
                </td>
                <td class="amt">
                  +{{ estimate.mempoolBaseFee | number }}
                </td>
                <td class="units">
                  <span class="symbol" i18n="shared.sats">sats</span>
                  <span class="fiat ml-1"><app-fiat [value]="estimate.mempoolBaseFee"></app-fiat></span>
                </td>
              </tr>
              <tr class="info group-last">
                <td class="info">
                  <i><small i18n="accelerator.tx-size-surcharge">Transaction Size Surcharge</small></i>
                </td>
                <td class="amt">
                  +{{ estimate.vsizeFee | number }}
                </td>
                <td class="units">
                  <span class="symbol" i18n="shared.sats">sats</span>
                  <span class="fiat ml-1"><app-fiat [value]="estimate.vsizeFee"></app-fiat></span>
                </td>
              </tr>

              <!-- NEXT BLOCK ESTIMATE -->
              <ng-container>
                <tr class="group-first" style="border-top: 1px dashed grey; border-collapse: collapse;">
                  <td class="item">
                    <b style="background-color: #5E35B1" class="p-1 pl-0" i18n="accelerator.estimated-cost">Estimated acceleration cost</b>
                  </td>
                  <td class="amt">
                    <span style="background-color: #5E35B1" class="p-1 pl-0">
                      {{ estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee | number }}
                    </span>
                  </td>
                  <td class="units">
                    <span class="symbol" i18n="shared.sats">sats</span>
                    <span class="fiat ml-1"><app-fiat [value]="estimate.cost + estimate.mempoolBaseFee + estimate.vsizeFee"></app-fiat></span>
                  </td>
                </tr>
                <tr class="info group-last" style="border-bottom: 1px solid lightgrey">
                  <td class="info" colspan=3>
                    <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: estimate.targetFeeRate }"></ng-container></small></i>
                  </td>
                </tr>
              </ng-container>
  
              <!-- MAX COST -->
              <ng-container>
                <tr class="group-first">
                  <td class="item">
                    <b style="background-color: var(--primary);" class="p-1 pl-0" i18n="accelerator.maximum-cost">Maximum acceleration cost</b>
                  </td>
                  <td class="amt">
                    <span style="background-color: var(--primary)" class="p-1 pl-0">
                      {{ maxCost | number }}
                    </span>
                  </td>
                  <td class="units">
                    <span class="symbol" i18n="shared.sats">sats</span>
                    <span class="fiat ml-1">
                      <app-fiat [value]="maxCost" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
                    </span>
                  </td>
                </tr>
                <tr class="info group-last">
                  <td class="info" colspan=3>
                    <i><small><ng-container *ngTemplateOutlet="acceleratedTo; context: {$implicit: (estimate.txSummary.effectiveFee + userBid) / estimate.txSummary.effectiveVsize }"></ng-container></small></i>
                  </td>
                </tr>
              </ng-container>
  
              <!-- USER BALANCE -->
              <ng-container *ngIf="isLoggedIn() && estimate.userBalance < maxCost">
                <tr class="group-first group-last" style="border-top: 1px dashed grey">
                  <td class="item" i18n="accelerator.available-balance">Available balance</td>
                  <td class="amt">
                    {{ estimate.userBalance | number }}
                  </td>
                  <td class="units">
                    <span class="symbol" i18n="shared.sats">sats</span>
                    <span class="fiat ml-1">
                      <app-fiat [value]="estimate.userBalance" [colorClass]="estimate.userBalance < maxCost ? 'red-color' : 'green-color'"></app-fiat>
                    </span>
                  </td>
                </tr>
              </ng-container>

              <!-- LOGIN CTA -->
              <ng-container *ngIf="stateService.isMempoolSpaceBuild && !isLoggedIn() && paymentType === 'bitcoin'">
                <tr class="group-first group-last" style="border-top: 1px dashed grey">
                  <td class="item"></td>
                  <td class="amt"></td>
                  <td class="units d-flex">
                    <a [routerLink]="['/login']" [queryParams]="{redirectTo: '/tx/' + tx.txid + '#accelerate'}" class="btn btn-purple flex-grow-1" i18n="shared.sign-in">Sign In</a>
                  </td>
                </tr>
              </ng-container>
              <ng-container *ngIf="!stateService.isMempoolSpaceBuild">
                <tr class="group-first group-last" style="border-top: 1px dashed grey">
                  <td class="item"></td>
                  <td class="amt"></td>
                  <td class="units d-flex">
                    <a [href]="'https://mempool.space/tx/' + tx.txid + '#accelerate'" class="btn btn-purple flex-grow-1" i18n="accelerator.accelerate-on-mempoolspace">Accelerate on mempool.space</a>
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </table>
        </div>
      </div>
  
      <div class="row mb-3" *ngIf="isLoggedIn() && paymentType === 'bitcoin'">
        <div class="col">
          <div class="d-flex justify-content-end" *ngIf="user && estimate.hasAccess">
            <button class="btn btn-sm btn-primary btn-success" style="width: 150px" (click)="accelerate()" i18n="transaction.accelerate|Accelerate button label">Accelerate</button>
          </div>
        </div>
      </div>

      <div class="row d-flex justify-content-end align-items-center mr-1" style="height: 48px" *ngIf="!hideCashApp && paymentType === 'cashapp'">
        <div [style]="showSpinner ? 'opacity: 0' : 'opacity: 1'" class="p-2">Accelerate with</div>
        <div id="cash-app-pay" style="max-width: 320px" [style]="showSpinner ? 'opacity: 0' : 'opacity: 1'"></div>
        <div *ngIf="showSpinner" class="d-flex align-items-center">
          <span class="mr-2">Loading</span>
          <div class="spinner-border text-light" style="width: 25px; height: 25px"></div>
        </div>
      </div>
  
    </div>
  </ng-container>
</div>

<ng-template #loadingEstimate>
  <div class="skeleton-loader"></div>
  <br>
</ng-template>

<ng-template #acceleratedTo let-i i18n="accelerator.accelerated-to-description">If your tx is accelerated to ~{{ i | number : '1.0-0' }} sat/vB</ng-template>