New base code for mempool blockchain explorerer

frontend/src/app/components/address/address.component.ts

@@ -0,0 +1,65 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ElectrsApiService } from '../../services/electrs-api.service';
+import { switchMap } from 'rxjs/operators';
+import { Address, Transaction } from '../../interfaces/electrs.interface';
+
+@Component({
+  selector: 'app-address',
+  templateUrl: './address.component.html',
+  styleUrls: ['./address.component.scss']
+})
+export class AddressComponent implements OnInit {
+  address: Address;
+  addressString: string;
+  isLoadingAddress = true;
+  transactions: Transaction[];
+  isLoadingTransactions = true;
+  error: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private electrsApiService: ElectrsApiService,
+  ) { }
+
+  ngOnInit() {
+    this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        this.error = undefined;
+        this.isLoadingAddress = true;
+        this.isLoadingTransactions = true;
+        this.transactions = null;
+        this.addressString = params.get('id') || '';
+        return this.electrsApiService.getAddress$(this.addressString);
+      })
+    )
+    .subscribe((address) => {
+      this.address = address;
+      this.isLoadingAddress = false;
+      window.scrollTo(0, 0);
+      this.getAddressTransactions(address.address);
+    },
+    (error) => {
+      console.log(error);
+      this.error = error;
+      this.isLoadingAddress = false;
+    });
+  }
+
+  getAddressTransactions(address: string) {
+    this.electrsApiService.getAddressTransactions$(address)
+      .subscribe((transactions: any) => {
+        this.transactions = transactions;
+        this.isLoadingTransactions = false;
+      });
+  }
+
+  loadMore() {
+    this.isLoadingTransactions = true;
+    this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.transactions[this.transactions.length - 1].txid)
+      .subscribe((transactions) => {
+        this.transactions = this.transactions.concat(transactions);
+        this.isLoadingTransactions = false;
+      });
+  }
+}