Reusable component & pipe for http error rendering

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

@@ -0,0 +1,4 @@
+<div class="http-error">
+  <p><b><ng-content></ng-content></b></p>
+  <i class="small">({{ error | httpErrorMsg }})</i>
+</div>

frontend/src/app/shared/components/http-error/http-error.component.scss

@@ -0,0 +1,5 @@
+.http-error {
+  width: 100%;
+  margin: 1em auto;
+  text-align: center;
+}

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

@@ -0,0 +1,11 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-http-error',
+  templateUrl: './http-error.component.html',
+  styleUrls: ['./http-error.component.scss']
+})
+export class HttpErrorComponent {
+  @Input() error: HttpErrorResponse | null;
+}

frontend/src/app/shared/pipes/http-error-pipe/http-error.pipe.ts

@@ -0,0 +1,9 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'httpErrorMsg' })
+export class HttpErrorPipe implements PipeTransform {
+  transform(e: HttpErrorResponse | null): string {
+    return e ? `${e.status}: ${e.statusText}` : '';
+  }
+}

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

@@ -21,6 +21,7 @@ import { ScriptpubkeyTypePipe } from './pipes/scriptpubkey-type-pipe/scriptpubke
 import { BytesPipe } from './pipes/bytes-pipe/bytes.pipe';
 import { WuBytesPipe } from './pipes/bytes-pipe/wubytes.pipe';
 import { FiatCurrencyPipe } from './pipes/fiat-currency.pipe';
+import { HttpErrorPipe } from './pipes/http-error-pipe/http-error.pipe';
 import { BlockchainComponent } from '../components/blockchain/blockchain.component';
 import { TimeComponent } from '../components/time/time.component';
 import { ClipboardComponent } from '../components/clipboard/clipboard.component';
@@ -104,6 +105,7 @@ import { ClockFaceComponent } from '../components/clock-face/clock-face.componen
 import { ClockComponent } from '../components/clock/clock.component';
 import { CalculatorComponent } from '../components/calculator/calculator.component';
 import { BitcoinsatoshisPipe } from '../shared/pipes/bitcoinsatoshis.pipe';
+import { HttpErrorComponent } from '../shared/components/http-error/http-error.component';
 
 import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-directives/weight-directives';
 
@@ -133,6 +135,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     Decimal2HexPipe,
     FeeRoundingPipe,
     FiatCurrencyPipe,
+    HttpErrorPipe,
     ColoredPriceDirective,
     BrowserOnlyDirective,
     ServerOnlyDirective,
@@ -208,6 +211,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AccelerationsListComponent,
     AccelerationStatsComponent,
     PendingStatsComponent,
+    HttpErrorComponent,
   ],
   imports: [
     CommonModule,
@@ -262,6 +266,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     VbytesPipe,
     WuBytesPipe,
     FiatCurrencyPipe,
+    HttpErrorPipe,
     CeilPipe,
     ShortenStringPipe,
     CapAddressPipe,
@@ -327,6 +332,7 @@ import { OnlyVsizeDirective, OnlyWeightDirective } from './components/weight-dir
     AccelerationsListComponent,
     AccelerationStatsComponent,
     PendingStatsComponent,
+    HttpErrorComponent,
 
     MempoolBlockOverviewComponent,
     ClockchainComponent,