Refactor pool logo component & fallback logic

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

@@ -182,7 +182,7 @@
         <td i18n="block.miner">Miner</td>
         <td *ngIf="stateService.env.MINING_DASHBOARD">
           <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]" class="badge" style="color: #FFF;padding:0;">
-            <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+            <app-pool-logo [pool]="block.extras.pool" style="position: relative; top: -1px; margin-right: 2px;"></app-pool-logo>
             {{ block.extras.pool.name }}
           </a>
         </td>

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -61,7 +61,7 @@
         </div>
         <div class="animated" *ngIf="block.extras?.pool != undefined && showPools">
           <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge" [routerLink]="[('/mining/pool/' + block.extras.pool.slug) | relativeUrl]">
-            <img class="pool-logo" [src]="'/resources/mining-pools/' + block.extras.pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'"> 
+            <app-pool-logo [pool]="block.extras.pool" style="position: relative; top: -1px; margin-right: 2px;"></app-pool-logo>
             {{ block.extras.pool.name}}
           </a>
         </div>

frontend/src/app/components/blocks-list/blocks-list.component.html

@@ -32,15 +32,13 @@
           <td  *ngIf="isMempoolModule" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !isMempoolModule}">
             <div *ngIf="indexingAvailable" class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
-                <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                  onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+                <app-pool-logo [pool]="block.extras.pool" [width]="22" [height]="22"></app-pool-logo>
                 <span class="pool-name">{{ block.extras.pool.name }}</span>
               </a>
               <span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
             </div>
             <div *ngIf="!indexingAvailable" class="tooltip-custom">
-              <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
-                onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
+              <app-pool-logo [pool]="block.extras.pool" [width]="22" [height]="22"></app-pool-logo>
               <span class="pool-name">{{ block.extras.pool.name }}</span>
               <span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
             </div>

frontend/src/app/components/blocks-list/blocks-list.component.ts

@@ -126,12 +126,6 @@ export class BlocksList implements OnInit {
                 this.lastBlockHeight = Math.max(...blocks.map(o => o.height));
               }),
               map(blocks => {
-                if (this.stateService.env.BASE_MODULE === 'mempool') {
-                  for (const block of blocks) {
-                    // @ts-ignore: Need to add an extra field for the template
-                    block.extras.pool.logo = `/resources/mining-pools/` + block.extras.pool.slug + '.svg';
-                  }
-                }
                 if (this.widget) {
                   return blocks.slice(0, 6);
                 }

frontend/src/app/components/pool-ranking/pool-ranking.component.html

@@ -102,7 +102,7 @@
         <tr *ngFor="let pool of miningStats.pools">
           <td class="d-none d-md-table-cell">{{ pool.rank }}</td>
           <td class="text-right">
-            <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'">
+            <app-pool-logo [pool]="pool" [width]="25" [height]="25"></app-pool-logo>
           </td>
           <td class="pool-name"><a [routerLink]="[('/mining/pool/' + pool.slug) | relativeUrl]">{{ pool.name }}</a></td>
           <td class="" *ngIf="this.miningWindowPreference === '24h'">{{ pool.lastEstimatedHashrate | number: '1.2-2' }} {{

frontend/src/app/components/pool/pool.component.html

@@ -5,8 +5,7 @@
   <!-- Pool overview -->
   <div *ngIf="poolStats$ | async as poolStats; else loadingMain">
     <div style="display:flex" class="mb-3">
-      <img width="50" height="50" src="{{ poolStats['logo'] }}" [alt]="poolStats.pool.name + ' mining pool logo'"
-        onError="this.onerror=null; this.src = '/resources/mining-pools/default.svg'" class="mr-3">
+      <app-pool-logo [pool]="poolStats.pool" [width]="50" [height]="50" class="mr-3"></app-pool-logo>
       <h1 class="m-0 pt-1 pt-md-0">{{ poolStats.pool.name }}</h1>
     </div>
 

frontend/src/app/components/search-form/search-results/search-results.component.html

@@ -47,7 +47,7 @@
     <div class="card-title" i18n="search.mining-pools">Mining Pools</div>
     <ng-template ngFor [ngForOf]="results.pools" let-pool let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + i)" [class.active]="results.hashQuickMatch + results.addresses.length + i === activeIdx" [class.inactive]="!pool.active" type="button" role="option" class="dropdown-item">
-        <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
+        <app-pool-logo [pool]="pool" style="position: relative; top: -1px; margin-right: 10px;"></app-pool-logo>
         <ngb-highlight [result]="pool.name" [term]="results.searchText"></ngb-highlight>
       </button>
     </ng-template>

frontend/src/app/components/search-form/search-results/search-results.component.scss

@@ -26,11 +26,3 @@
 .active {
   background-color: var(--active-bg);
 }
-
-.pool-logo {
-  width: 15px;
-  height: 15px;
-  position: relative;
-  top: -1px;
-  margin-right: 10px;
-}

frontend/src/app/components/transaction/transaction.component.html

@@ -677,7 +677,7 @@
         @if (pool) {
           <td class="wrap-cell">
             <a placement="bottom" [routerLink]="['/mining/pool' | relativeUrl, pool.slug]" class="badge" style="color: #FFF;padding:0;">
-              <img class="pool-logo" [src]="'/resources/mining-pools/' + pool.slug + '.svg'" onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + pool.name + ' mining pool'">
+              <app-pool-logo [pool]="pool" style="position: relative; top: -1px; margin-right: 2px;"></app-pool-logo>
               {{ pool.name  }}
             </a>
           </td>

frontend/src/app/shared/components/pool-logo/pool-logo.component.html

@@ -0,0 +1,11 @@
+<img
+  #poolImg
+  class="pool-logo"
+  [width]="width"
+  [height]="height"
+  [style]="{ width: width + 'px', maxWidth: width + 'px', height: height + 'px' }"
+  [src]="'/resources/mining-pools/' + pool.slug + '.svg'"
+  onLoad="this.style.opacity = 1;"
+  onError="this.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUuMTIgMi44IDE1Ljk4IDE4LjI3Ij4gPHBhdGggZD0iTTEyLjEwMSAyLjkwMDU1QzEyLjIxNDYgMi44MzIyNSAxMi4zNTA4IDIuODExOSAxMi40Nzk0IDIuODQzOTlMMTUuODc1NSAzLjY5MDcxQzE2LjEzMjQgMy43NTQ3NyAxNi4yOTI5IDQuMDA2ODggMTYuMjQ2NyA0LjI2MzcyQzE4LjYxMDggNS4zNzA4OCAyMC4zNzEzIDcuMTk0NjcgMjEuMDYwOSA5LjI0NjYyQzIxLjEzNDMgOS40NjQ3OSAyMS4wNDkyIDkuNzA0ODMgMjAuODU0OCA5LjgyODEyQzIwLjY2MDUgOS45NTE0MSAyMC40MDcxIDkuOTI2MSAyMC4yNDA5IDkuNzY2OEMxOS4wMzA1IDguNjA2MTcgMTcuNDQ2OSA3LjU5NTYxIDE1LjU5OTIgNi44NjU0MkwxNS41NzQ0IDYuOTY1MTNDMTUuNTQyMyA3LjA5MzggMTUuNDYwNCA3LjIwNDQ2IDE1LjM0NjcgNy4yNzI3NkMxNS4yMzMxIDcuMzQxMDYgMTUuMDk2OSA3LjM2MTQgMTQuOTY4MyA3LjMyOTMyTDE0LjQ4MzEgNy4yMDgzNkwxMy41NzU5IDEwLjg0N0MxMy44NDM5IDEwLjkxMzggMTQuMDA2OSAxMS4xODUxIDEzLjk0MDEgMTEuNDUzMUwxMS42NDE4IDIwLjY3MDlDMTEuNjA5OCAyMC43OTk2IDExLjUyNzkgMjAuOTEwMiAxMS40MTQyIDIwLjk3ODVDMTEuMzAwNSAyMS4wNDY4IDExLjE2NDQgMjEuMDY3MiAxMS4wMzU3IDIxLjAzNTFMOC42MDk5OSAyMC40MzAzQzguMzQyMDUgMjAuMzYzNSA4LjE3OSAyMC4wOTIxIDguMjQ1ODEgMTkuODI0MkwxMC41NDQxIDEwLjYwNjRDMTAuNTc2MSAxMC40Nzc3IDEwLjY1OCAxMC4zNjcgMTAuNzcxNyAxMC4yOTg3QzEwLjg4NTQgMTAuMjMwNCAxMS4wMjE1IDEwLjIxMDEgMTEuMTUwMiAxMC4yNDIyTDEyLjA1NzQgNi42MDM1NkwxMS41NzIyIDYuNDgyNTlDMTEuMzA0MyA2LjQxNTc5IDExLjE0MTIgNi4xNDQ0MyAxMS4yMDggNS44NzY0OUwxMS4yMzI5IDUuNzc2NzhDOS4yNTg2NiA1LjU1NDA2IDcuMzg1OTggNS43MDI4OCA1Ljc3MjM3IDYuMTU5NDNDNS41NTA5IDYuMjIyMDkgNS4zMTUyNyA2LjEyNTQ3IDUuMjAxNTUgNS45MjUzN0M1LjA4NzgyIDUuNzI1MjcgNS4xMjUzOSA1LjQ3MzM5IDUuMjkyNTUgNS4zMTUxOEM2Ljg2NDc4IDMuODI3MTMgOS4yNzU0OCAzLjA0MzMyIDExLjg4MjYgMy4xNzU2MkMxMS45MTk2IDMuMDYwOTEgMTEuOTk3IDIuOTYzMDIgMTIuMTAxIDIuOTAwNTVaIiBmaWxsPSIjYjRiNGI0Ij48L3BhdGg+IDwvc3ZnPg=='"
+  [alt]="'Logo of ' + pool.name + ' mining pool'"
+>

frontend/src/app/shared/components/pool-logo/pool-logo.component.scss

@@ -0,0 +1,6 @@
+.pool-logo {
+  position: relative;
+  overflow: hidden;
+  opacity: 0;
+  color: transparent;
+}

frontend/src/app/shared/components/pool-logo/pool-logo.component.ts

@@ -0,0 +1,26 @@
+import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { nextTick } from 'process';
+
+@Component({
+  selector: 'app-pool-logo',
+  templateUrl: './pool-logo.component.html',
+  styleUrls: ['./pool-logo.component.scss']
+})
+export class PoolLogoComponent implements OnChanges{
+  @Input() pool: { slug: string, name: string };
+  @Input() width: number = 15;
+  @Input() height: number = 15;
+
+  @ViewChild('poolImg') img: ElementRef<HTMLImageElement>;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.pool) {
+      if (this.img?.nativeElement) {
+        this.img.nativeElement.style.opacity = '0';
+        setTimeout(() => {
+          this.img.nativeElement.style.opacity = '1';
+        }, 50);
+      }
+    }
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -88,6 +88,7 @@ import { BtcComponent } from './components/btc/btc.component';
 import { FeeRateComponent } from './components/fee-rate/fee-rate.component';
 import { AddressTypeComponent } from './components/address-type/address-type.component';
 import { TruncateComponent } from './components/truncate/truncate.component';
+import { PoolLogoComponent } from './components/pool-logo/pool-logo.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
 import { TimestampComponent } from './components/timestamp/timestamp.component';
 import { ConfirmationsComponent } from './components/confirmations/confirmations.component';
@@ -201,6 +202,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     FeeRateComponent,
     AddressTypeComponent,
     TruncateComponent,
+    PoolLogoComponent,
     SearchResultsComponent,
     TimestampComponent,
     ConfirmationsComponent,
@@ -340,6 +342,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     FeeRateComponent,
     AddressTypeComponent,
     TruncateComponent,
+    PoolLogoComponent,
     SearchResultsComponent,
     TimestampComponent,
     ConfirmationsComponent,