mempool/frontend/src/app/bisq/bisq-address/bisq-address.component.html

<div class="container-xl">
  <h1 style="float: left;" i18n="shared.address">Address</h1>
  <a [routerLink]="['/address/' | relativeUrl, addressString]" style="line-height: 56px; margin-left: 10px;">
    <span class="d-inline d-lg-none">{{ addressString | shortenString : 24 }}</span>
    <span class="d-none d-lg-inline">{{ addressString }}</span>
  </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 i18n="address.total-received">Total received</td>
                <td>{{ totalReceived / 100 | number: '1.2-2' }} BSQ</td>
              </tr>
              <tr>
                <td i18n="address.total-sent">Total sent</td>
                <td>{{ totalSent / 100 | number: '1.2-2' }} BSQ</td>
              </tr>
              <tr>
                <td i18n="address.balance">Balance</td>
                <td>{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ (<app-bsq-amount [bsq]="totalReceived - totalSent" [forceFiat]="true" [green]="true"></app-bsq-amount>)</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="w-100 d-block d-md-none"></div>
        <div class="col qrcode-col">
          <div class="qr-wrapper">
            <app-qrcode [data]="addressString"></app-qrcode>
          </div>
        </div>
      </div>

    </div>

    <br>

    <h2>
      <ng-container *ngTemplateOutlet="transactions.length === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: transactions.length}"></ng-container>
      <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
      <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
    </h2>

    <ng-template ngFor let-tx [ngForOf]="transactions">

      <div class="header-bg box" style="padding: 10px; margin-bottom: 10px;">
        <a [routerLink]="['/tx/' | relativeUrl, tx.id]" [state]="{ data: tx }">
          <span style="float: left;" class="d-block d-md-none">{{ tx.id | shortenString : 16 }}</span>
          <span style="float: left;" class="d-none d-md-block">{{ tx.id }}</span>
        </a>
        <div class="float-right">
          {{ tx.time | date:'yyyy-MM-dd HH:mm' }}
        </div>
        <div class="clearfix"></div>
      </div>
  
      <app-bisq-transfers [tx]="tx" [showConfirmations]="true"></app-bisq-transfers>
  
      <br>
    </ng-template>

  </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="w-100 d-block d-md-none"></div>
        <div class="col">
          
        </div>
      </div>
    </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>