74 lines
3.3 KiB
HTML
74 lines
3.3 KiB
HTML
<div [ngClass]="{'widget': widget, 'address-container': !widget}">
|
|
<div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div style="min-height: 295px">
|
|
<table class="table table-borderless">
|
|
<thead style="vertical-align: middle;">
|
|
<th class="address text-left" [ngClass]="{'widget': widget}" i18n="shared.address">Address</th>
|
|
<th class="amount text-right" [ngClass]="{'widget': widget}" i18n="address.balance">Balance</th>
|
|
</thead>
|
|
<tbody *ngIf="federationAddresses$ | async as addresses; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
|
|
<ng-container *ngIf="widget; else regularRows">
|
|
<tr *ngFor="let address of addresses | slice:0:5">
|
|
<td class="address text-left widget">
|
|
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
|
|
<app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
|
|
</a>
|
|
</td>
|
|
<td class="amount text-right widget">
|
|
<app-amount [satoshis]="+address.balance" [noFiat]="true" [forceBtc]="true"></app-amount>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
<ng-template #regularRows>
|
|
<tr *ngFor="let address of addresses | slice:(page - 1) * pageSize:page * pageSize">
|
|
<td class="address text-left">
|
|
<a href="{{ env.MEMPOOL_WEBSITE_URL + '/address/' + address.bitcoinaddress }}" target="_blank" style="color:#b86d12">
|
|
<app-truncate [text]="address.bitcoinaddress" [lastChars]="6"></app-truncate>
|
|
</a>
|
|
</td>
|
|
<td class="amount text-right">
|
|
<app-amount [satoshis]="+address.balance" [noFiat]="true" [forceBtc]="true"></app-amount>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</tbody>
|
|
<ng-template #skeleton>
|
|
<tbody *ngIf="widget; else regularRowsSkeleton">
|
|
<tr *ngFor="let item of skeletonLines">
|
|
<td class="address text-left widget">
|
|
<span class="skeleton-loader" style="max-width: 400px"></span>
|
|
</td>
|
|
<td class="amount text-right widget">
|
|
<span class="skeleton-loader" style="max-width: 350px"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<ng-template #regularRowsSkeleton>
|
|
<tr *ngFor="let item of skeletonLines">
|
|
<td class="address text-left">
|
|
<span class="skeleton-loader" style="max-width: 600px"></span>
|
|
</td>
|
|
<td class="amount text-right">
|
|
<span class="skeleton-loader" style="max-width: 400px"></span>
|
|
</td>
|
|
</tr>
|
|
</ng-template>
|
|
</ng-template>
|
|
</table>
|
|
|
|
<ngb-pagination *ngIf="!widget && federationAddresses$ | async as addresses" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
|
|
[collectionSize]="addresses.length" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
|
|
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
|
|
</ngb-pagination>
|
|
|
|
<ng-template [ngIf]="!widget">
|
|
<div class="clearfix"></div>
|
|
<br>
|
|
</ng-template>
|
|
</div>
|
|
|
|
</div>
|