From 32eaf29aaa15384328397a0eaddd741d98a7831a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 8 Jul 2024 12:48:29 +0900
Subject: [PATCH] fix i18n error rendering

---
 .../mempool-error/mempool-error.component.ts  | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app/shared/components/mempool-error/mempool-error.component.ts b/frontend/src/app/shared/components/mempool-error/mempool-error.component.ts
index 9d3d94274..f105a9655 100644
--- a/frontend/src/app/shared/components/mempool-error/mempool-error.component.ts
+++ b/frontend/src/app/shared/components/mempool-error/mempool-error.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, EmbeddedViewRef, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 export const MempoolErrors = {
@@ -42,8 +42,8 @@ export function isMempoolError(error: string) {
   selector: 'app-mempool-error',
   templateUrl: './mempool-error.component.html'
 })
-export class MempoolErrorComponent implements OnInit, AfterViewInit {
-  @ViewChild('lowBalance') lowBalance!: TemplateRef<any>;
+export class MempoolErrorComponent implements OnInit {
+  @ViewChild('lowBalance', { static: true }) lowBalance!: TemplateRef<any>;
   @Input() error: string;
   @Input() alertClass = 'alert-danger';
   @Input() textOnly = false;
@@ -51,18 +51,22 @@ export class MempoolErrorComponent implements OnInit, AfterViewInit {
 
   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)) {
+     // Special hack for the i18n string with a href link inside
+     const embeddedViewRef: EmbeddedViewRef<any> = this.lowBalance.createEmbeddedView({});
+     embeddedViewRef.detectChanges();
+     const rawHtml = embeddedViewRef.rootNodes.map((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent;
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        return node.outerHTML;
+      }
+      return '';
+    }).join('');
+     MempoolErrors['not_enough_balance'] = rawHtml;
+     if (Object.keys(MempoolErrors).includes(this.error)) {
       this.errorContent = this.sanitizer.bypassSecurityTrustHtml(MempoolErrors[this.error]);
     } else {
       this.errorContent = this.error;