adding missing i18n

frontend/src/app/components/accelerate-checkout/accelerate-checkout.component.html

@@ -354,7 +354,7 @@
         </div>
         <div class="col-md pie d-none d-md-flex" *ngIf="!forceMobile">
           <small class="form-text checkout-text mb-2" *ngIf="(etaInfo$ | async) as etaInfo"><ng-container *ngTemplateOutlet="prioritizedBy; context: {$implicit:etaInfo.hashratePercentage}"></ng-container></small>
-          <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true"></app-active-acceleration-box>
+          <app-active-acceleration-box [miningStats]="miningStats" [pools]="estimate.pools" [chartOnly]="true" class="ml-2"></app-active-acceleration-box>
         </div>
       </div>
       <div class="payment-area mt-2 p-2" style="font-size: 14px;">
@@ -364,7 +364,7 @@
         @if (canPayWithBalance || !(canPayWithBitcoin || canPayWithCashapp)) {
           <div class="row">
             <div class="col-sm text-center d-flex flex-column justify-content-center align-items-center">
-              <p>Your account will be debited no more than <span><small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></span></p>
+              <p><ng-container i18n="accelerator.your-account-will-be-debited">Your account will be debited no more than</ng-container>&nbsp;<small style="font-family: monospace;">{{ cost | number }}</small>&nbsp;<span class="symbol" i18n="shared.sats">sats</span></p>
               <div class="d-flex justify-content-center" [class.grayOut]="!canPayWithBalance || quoteError || accelerateError || showSuccess">
                 <ng-container *ngTemplateOutlet="accountPayButton"></ng-container>
               </div>

frontend/src/app/shared/components/mempool-error/mempool-error.component.html

@@ -5,3 +5,5 @@
   <span [class]="alertClass" [innerHTML]="errorContent">
   </span>
 }
+
+<ng-template #lowBalance i18n="accelerator.low-balance">Your balance is too low. Please <a style="color:#105fb0" href="/services/accelerator/overview">top up your account</a>.</ng-template>

frontend/src/app/shared/components/mempool-error/mempool-error.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { AfterViewInit, Component, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 export const MempoolErrors = {
   'bad_request': `Your request was not valid. Please try again.`,
@@ -16,7 +16,7 @@ export const MempoolErrors = {
   'mempool_rejected_raw_tx': `Our mempool rejected this transaction`,
   'no_mining_pool_available': `No mining pool available at the moment`,
   'not_available': `You current subscription does not allow you to access this feature.`,
-  'not_enough_balance': `Your balance is too low. Please <a style="color:#105fb0" href="/services/accelerator/overview">top up your account</a>.`,
+  'not_enough_balance': ``,
   'not_verified': `You must verify your account to use this feature.`,
   'recommended_fees_not_available': `Recommended fees are not available right now.`,
   'too_many_relatives': `This transaction has too many relatives.`,
@@ -42,13 +42,24 @@ export function isMempoolError(error: string) {
   selector: 'app-mempool-error',
   templateUrl: './mempool-error.component.html'
 })
-export class MempoolErrorComponent implements OnInit {
+export class MempoolErrorComponent implements OnInit, AfterViewInit {
+  @ViewChild('lowBalance') lowBalance!: TemplateRef<any>;
   @Input() error: string;
   @Input() alertClass = 'alert-danger';
   @Input() textOnly = false;
   errorContent: SafeHtml;
 
-  constructor(private sanitizer: DomSanitizer) { }
+  constructor(
+    private sanitizer: DomSanitizer,
+    private viewContainerRef: ViewContainerRef,
+  ) { }
+
+  ngAfterViewInit(): void {
+    // Special hack for the i18n string with a href link inside
+    const view = this.viewContainerRef.createEmbeddedView(this.lowBalance);
+    const rawHtml = view.rootNodes.map(node => node.outerHTML).join('');
+    MempoolErrors['not_enough_balance'] = rawHtml;
+  }
 
   ngOnInit(): void {
     if (Object.keys(MempoolErrors).includes(this.error)) {