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

<div class="container">
  <h1 style="float: left;">Address</h1>
  <a [routerLink]="['/address/', addressString]" style="line-height: 56px; 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>