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

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;
      });
  }
}