New base code for mempool blockchain explorerer

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

@@ -0,0 +1,100 @@
+<div class="container">
+  <h1 style="float: left;">Address</h1>
+  <a [routerLink]="['/address/', addressString]" style="line-height: 55px; margin-left: 10px;">{{ addressString }}</a>
+  <app-clipboard [text]="addressString"></app-clipboard>
+  <br>
+
+  <div class="clearfix"></div>
+
+  <ng-template [ngIf]="!isLoadingAddress && !error">
+    <div class="box">
+
+      <div class="row">
+        <div class="col">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td>Number of transactions</td>
+                <td>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }}</td>
+              </tr>
+              <tr>
+                <td>Total received</td>
+                <td>{{ (address.chain_stats.funded_txo_sum + address.mempool_stats.funded_txo_sum) / 100000000 | number: '1.2-2' }} BTC</td>
+              </tr>
+              <tr>
+                <td>Total sent</td>
+                <td>{{ (address.chain_stats.spent_txo_sum + address.mempool_stats.spent_txo_sum) / 100000000 | number: '1.2-2' }} BTC</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col text-right">
+          <div class="qr-wrapper">
+            <app-qrcode [data]="address.address"></app-qrcode>
+            <!--qrcode id="qrCode" [qrdata]="address.address" [size]="128" [level]="'M'"></qrcode>-->
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <br>
+
+    <h2><ng-template [ngIf]="transactions?.length">{{ transactions?.length || '?' }} of </ng-template>{{ address.chain_stats.tx_count + address.mempool_stats.tx_count }} transactions</h2>
+
+    <app-transactions-list [transactions]="transactions" [showConfirmations]="true"></app-transactions-list>
+
+    <div class="text-center">
+      <ng-template [ngIf]="isLoadingTransactions">
+        <div class="spinner-border"></div>
+        <br><br>
+      </ng-template>
+      <button *ngIf="transactions?.length && transactions?.length !== (address.chain_stats.tx_count + address.mempool_stats.tx_count)" type="button" class="btn btn-primary" (click)="loadMore()">Load more</button>
+    </div>
+
+  </ng-template>
+
+  <ng-template [ngIf]="isLoadingAddress && !error">
+
+    <div class="box">
+      <div class="row">
+        <div class="col">
+          <table class="table table-borderless table-striped">
+            <tbody>
+              <tr>
+                <td colspan="2"><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td colspan="2"><span class="skeleton-loader"></span></td>
+              </tr>
+              <tr>
+                <td colspan="2"><span class="skeleton-loader"></span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="col">
+          
+        </div>
+      </div>
+    </div>
+
+    <br>
+
+    <div class="text-center">
+      <div class="spinner-border"></div>
+      <br><br>
+    </div>
+  </ng-template>
+
+  <ng-template [ngIf]="error">
+    <div class="text-center">
+      Error loading address data.
+      <br>
+      <i>{{ error.error }}</i>
+    </div>
+  </ng-template>
+
+</div>
+
+<br>

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

@@ -0,0 +1,10 @@
+.header-bg {
+  font-size: 14px;
+}
+
+.qr-wrapper {
+  background-color: #FFF;
+  padding: 10px;
+  display: inline-block;
+  margin-right: 25px;
+}

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