Add pagination history to bisq transactions and blocks page.

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

@@ -27,7 +27,7 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="blocks.value ? blocks.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination *ngIf="blocks.value" [size]="paginationSize" [collectionSize]="blocks.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
   </ng-container>
 </div>

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

@@ -4,6 +4,7 @@ import { switchMap, map } from 'rxjs/operators';
 import { Subject, Observable, of, merge } from 'rxjs';
 import { BisqBlock, BisqOutput, BisqTransaction } from '../bisq.interfaces';
 import { SeoService } from 'src/app/services/seo.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-bisq-blocks',
@@ -23,11 +24,11 @@ export class BisqBlocksComponent implements OnInit {
   paginationSize: 'sm' | 'lg' = 'md';
   paginationMaxSize = 10;
 
-  pageSubject$ = new Subject<number>();
-
   constructor(
     private bisqApiService: BisqApiService,
     private seoService: SeoService,
+    private route: ActivatedRoute,
+    private router: Router,
   ) { }
 
   ngOnInit(): void {
@@ -39,8 +40,15 @@ export class BisqBlocksComponent implements OnInit {
       this.paginationMaxSize = 3;
     }
 
-    this.blocks$ = merge(of(1), this.pageSubject$)
+    this.blocks$ = this.route.queryParams
       .pipe(
+        map((queryParams) => {
+          if (queryParams.page) {
+            this.page = parseInt(queryParams.page, 10);
+            return parseInt(queryParams.page, 10);
+          }
+          return 1;
+        }),
         switchMap((page) => this.bisqApiService.listBlocks$((page - 1) * this.itemsPerPage, this.itemsPerPage)),
         map((response) => [response.body, parseInt(response.headers.get('x-total-count'), 10)]),
       );
@@ -57,6 +65,10 @@ export class BisqBlocksComponent implements OnInit {
   }
 
   pageChange(page: number) {
-    this.pageSubject$.next(page);
+    this.router.navigate([], {
+      queryParams: { page: page },
+      replaceUrl: true,
+      queryParamsHandling: 'merge',
+    });
   }
 }

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

@@ -155,7 +155,7 @@
     <div class="clearfix"></div>
 
     <div class="text-center">
-      Error loading transaction
+      Error loading Bisq transaction
       <br><br>
       <i>{{ error.status }}: {{ error.statusText }}</i>
     </div>

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

@@ -94,7 +94,7 @@
 
   <br>
 
-  <ngb-pagination [size]="paginationSize" [collectionSize]="transactions.value ? transactions.value[1] : 0" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
+  <ngb-pagination *ngIf="transactions.value" [size]="paginationSize" [collectionSize]="transactions.value[1]" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true"></ngb-pagination>
 
   </ng-container>
 </div>

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

@@ -1,10 +1,11 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { BisqTransaction, BisqOutput } from '../bisq.interfaces';
-import { Subject, merge, Observable, of } from 'rxjs';
+import { Subject, merge, Observable } from 'rxjs';
 import { switchMap, map } from 'rxjs/operators';
 import { BisqApiService } from '../bisq-api.service';
 import { SeoService } from 'src/app/services/seo.service';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-bisq-transactions',
@@ -20,7 +21,6 @@ export class BisqTransactionsComponent implements OnInit {
   fiveItemsPxSize = 250;
   isLoading = true;
   loadingItems: number[];
-  pageSubject$ = new Subject<number>();
   radioGroupForm: FormGroup;
   types: string[] = [];
 
@@ -32,6 +32,8 @@ export class BisqTransactionsComponent implements OnInit {
     private bisqApiService: BisqApiService,
     private seoService: SeoService,
     private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
   ) { }
 
   ngOnInit(): void {
@@ -63,8 +65,16 @@ export class BisqTransactionsComponent implements OnInit {
     }
 
     this.transactions$ = merge(
-      of(1),
-      this.pageSubject$,
+      this.route.queryParams
+        .pipe(
+          map((queryParams) => {
+            if (queryParams.page) {
+              this.page = parseInt(queryParams.page, 10);
+              return parseInt(queryParams.page, 10);
+            }
+            return 1;
+          })
+        ),
       this.radioGroupForm.valueChanges
         .pipe(
           map((data) => {
@@ -75,6 +85,9 @@ export class BisqTransactionsComponent implements OnInit {
               }
             }
             this.types = types;
+            if (this.page !== 1) {
+              this.pageChange(1);
+            }
             return 1;
           })
         )
@@ -86,7 +99,11 @@ export class BisqTransactionsComponent implements OnInit {
   }
 
   pageChange(page: number) {
-    this.pageSubject$.next(page);
+    this.router.navigate([], {
+      queryParams: { page: page },
+      replaceUrl: true,
+      queryParamsHandling: 'merge',
+    });
   }
 
   calculateTotalOutput(outputs: BisqOutput[]): number {

frontend/src/app/bisq/bisq.routing.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AboutComponent } from '../components/about/about.component';
-import { AddressComponent } from '../components/address/address.component';
 import { BisqTransactionsComponent } from './bisq-transactions/bisq-transactions.component';
 import { BisqTransactionComponent } from './bisq-transaction/bisq-transaction.component';
 import { BisqBlockComponent } from './bisq-block/bisq-block.component';

frontend/src/app/services/state.service.ts

@@ -53,7 +53,7 @@ export class StateService {
   }
 
   setNetworkBasedonUrl(url: string) {
-    switch (url.split('/')[1]) {
+    switch (url.split(/\/|\?|#/)[1]) {
       case 'liquid':
         if (this.network !== 'liquid') {
           this.network = 'liquid';