If bisq tx not found, check for regular tx and redirect to /tx/

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html

@@ -2,7 +2,7 @@
 
   <h1 class="float-left mr-3 mb-md-3">Transaction</h1>
 
-  <ng-template [ngIf]="!isLoading" [ngIfElse]="isLoadingTmpl">
+  <ng-template [ngIf]="!isLoading && !error">
 
     <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2 mt-1 mt-md-3">{{ latestBlock.height - bisqTx.blockHeight + 1 }} confirmation<ng-container *ngIf="latestBlock.height - bisqTx.blockHeight + 1 > 1">s</ng-container></button>
 
@@ -62,7 +62,7 @@
 
   </ng-template>
 
-  <ng-template #isLoadingTmpl>
+  <ng-template [ngIf="isLoading && !error">
 
     <div class="clearfix"></div>
 
@@ -131,4 +131,14 @@
 
   </ng-template>
 
+  <ng-template [ngIf]="error">
+    <div class="clearfix"></div>
+
+    <div class="text-center">
+      Error loading transaction
+      <br>
+      <i>{{ error.status }}: {{ error.statusText }}</i>
+    </div>
+  </ng-template>
+
 </div>

frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts

@@ -1,12 +1,14 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { BisqTransaction } from 'src/app/bisq/bisq.interfaces';
-import { switchMap, map } from 'rxjs/operators';
+import { switchMap, map, catchError } from 'rxjs/operators';
 import { of, Observable, Subscription } from 'rxjs';
 import { StateService } from 'src/app/services/state.service';
 import { Block } from 'src/app/interfaces/electrs.interface';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { ElectrsApiService } from 'src/app/services/electrs-api.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-bisq-transaction',
@@ -19,31 +21,64 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
   txId: string;
   price: number;
   isLoading = true;
+  error = null;
   subscription: Subscription;
 
   constructor(
     private route: ActivatedRoute,
     private bisqApiService: BisqApiService,
+    private electrsApiService: ElectrsApiService,
     private stateService: StateService,
     private seoService: SeoService,
+    private router: Router,
   ) { }
 
   ngOnInit(): void {
     this.subscription = this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
         this.isLoading = true;
+        this.error = null;
         document.body.scrollTo(0, 0);
         this.txId = params.get('id') || '';
         this.seoService.setTitle('Transaction: ' + this.txId, true);
         if (history.state.data) {
           return of(history.state.data);
         }
-        return this.bisqApiService.getTransaction$(this.txId);
+        return this.bisqApiService.getTransaction$(this.txId)
+          .pipe(
+            catchError((bisqTxError: HttpErrorResponse) => {
+              if (bisqTxError.status === 404) {
+                return this.electrsApiService.getTransaction$(this.txId)
+                  .pipe(
+                    catchError((txError: HttpErrorResponse) => {
+                      console.log(txError);
+                      this.error = txError;
+                      return of(null);
+                    })
+                  );
+              }
+              this.error = bisqTxError;
+              return of(null);
+            })
+          );
       })
     )
     .subscribe((tx) => {
       this.isLoading = false;
+
+      if (!tx) {
+        return;
+      }
+
+      if (tx.version) {
+        this.router.navigate(['/tx/', this.txId], { state: { data: tx, bsqTx: true }});
+        return;
+      }
+
       this.bisqTx = tx;
+    },
+    (error) => {
+      this.error = error;
     });
 
     this.latestBlock$ = this.stateService.blocks$.pipe(map((([block]) => block)));

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

@@ -244,7 +244,7 @@
 
   <ng-template [ngIf]="error">
 
-    <div class="text-center" *ngIf="waitingForTransaction">
+    <div class="text-center" *ngIf="waitingForTransaction; else errorTemplate">
       <h3>Transaction not found.</h3>
       <h5>Waiting for it to appear in the mempool...</h5>
       <div class="spinner-border text-light mt-2"></div>