Assets list. Native asset updates.

refs #37
This commit is contained in:
softsimon
2020-05-02 16:29:34 +07:00
parent 65b01ccc60
commit b7ac1c85ca
13 changed files with 217 additions and 41 deletions

View File

@@ -24,11 +24,11 @@
<td>Precision</td>
<td>{{ assetContract[3] }}</td>
</tr>
<tr>
<tr *ngIf="!isNativeAsset">
<td>Issuer</td>
<td><a target="_blank" href="{{ 'http://' + assetContract[0] }}">{{ assetContract[0] }}</a></td>
</tr>
<tr>
<tr *ngIf="!isNativeAsset">
<td>Issuance tx</td>
<td><a [routerLink]="['/tx/', asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></td>
</tr>
@@ -38,17 +38,29 @@
<div class="col">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>Circulating amount</td>
<td>{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) / 100000000 | number: '1.0-' + assetContract[3] }}</td>
<tr *ngIf="isNativeAsset">
<td>Pegged in</td>
<td>{{ asset.chain_stats.peg_in_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
<tr>
<tr *ngIf="isNativeAsset">
<td>Pegged out</td>
<td>{{ asset.chain_stats.peg_out_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
<tr *ngIf="!isNativeAsset">
<td>Issued amount</td>
<td>{{ asset.chain_stats.issued_amount / 100000000 | number: '1.0-' + assetContract[3] }}</td>
<td>{{ asset.chain_stats.issued_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
<tr>
<td>Burned amount</td>
<td>{{ asset.chain_stats.burned_amount / 100000000 | number: '1.0-' + assetContract[3] }}</td>
<td>{{ asset.chain_stats.burned_amount / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
<tr *ngIf="!isNativeAsset">
<td>Circulating amount</td>
<td>{{ (asset.chain_stats.issued_amount - asset.chain_stats.burned_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
<tr *ngIf="isNativeAsset">
<td>Circulating amount</td>
<td>{{ (asset.chain_stats.peg_in_amount - asset.chain_stats.burned_amount - asset.chain_stats.peg_out_amount) / 100000000 | number: '1.0-' + assetContract[3] }} {{ assetContract[1] }}</td>
</tr>
</tbody>
</table>
@@ -59,7 +71,7 @@
<br>
<h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} transactions</h2>
<h2><ng-template [ngIf]="transactions?.length">{{ (transactions?.length | number) || '?' }} of </ng-template>{{ txCount | number }} <ng-template [ngIf]="isNativeAsset" [ngIfElse]="defaultAsset">Peg In/Out and Burn Transactions</ng-template><ng-template #defaultAsset>In/Out and Burn Transactions</ng-template></h2>
<app-transactions-list [transactions]="transactions" [showConfirmations]="true" (loadMore)="loadMore()"></app-transactions-list>
@@ -86,26 +98,28 @@
<ng-template [ngIf]="isLoadingAsset && !error">
<ng-template #loadingTmpl>
<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>
</ng-template>
<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>
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
<ng-container *ngTemplateOutlet="loadingTmpl"></ng-container>
</div>
</div>

View File

@@ -19,6 +19,7 @@ import { AssetsService } from 'src/app/services/assets.service';
})
export class AssetComponent implements OnInit, OnDestroy {
network = environment.network;
nativeAssetId = environment.nativeAssetId;
asset: Asset;
assetContract: any;
@@ -26,6 +27,7 @@ export class AssetComponent implements OnInit, OnDestroy {
isLoadingAsset = true;
transactions: Transaction[];
isLoadingTransactions = true;
isNativeAsset = false;
error: any;
mainSubscription: Subscription;
@@ -94,6 +96,8 @@ export class AssetComponent implements OnInit, OnDestroy {
switchMap(([asset, assetsData]) => {
this.asset = asset;
this.assetContract = assetsData[this.asset.asset_id];
console.log(this.assetContract);
this.isNativeAsset = asset.asset_id === this.nativeAssetId;
this.updateChainStats();
this.websocketService.startTrackAsset(asset.asset_id);
this.isLoadingAsset = false;

View File

@@ -21,6 +21,9 @@
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/assets" (click)="collapse()">Assets</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/contributors" (click)="collapse()">Contributors</a>
</li>

View File

@@ -28,11 +28,10 @@
</ng-template>
</td>
<td>
<div>
<ng-template [ngIf]="vin.is_coinbase" [ngIfElse]="regularVin">
Coinbase (Newly Generated Coins)
</ng-template>
<ng-template #regularVin>
<div [ngSwitch]="true">
<ng-container *ngSwitchCase="vin.is_coinbase">Coinbase (Newly Generated Coins)</ng-container>
<ng-container *ngSwitchCase="vin.is_pegin">PEG IN</ng-container>
<ng-container *ngSwitchDefault>
<a [routerLink]="['/address/', vin.prevout.scriptpubkey_address]" title="{{ vin.prevout.scriptpubkey_address }}">
<span class="d-block d-lg-none">{{ vin.prevout.scriptpubkey_address | shortenString : 16 }}</span>
<span class="d-none d-lg-block">{{ vin.prevout.scriptpubkey_address | shortenString : 42 }}</span>
@@ -40,7 +39,7 @@
<div>
<app-address-labels [vin]="vin"></app-address-labels>
</div>
</ng-template>
</ng-container>
</div>
</td>
<td class="text-right nowrap">
@@ -66,7 +65,12 @@
<span class="d-none d-lg-block">{{ vout.scriptpubkey_address | shortenString : 42 }}</span>
</a>
<ng-template #scriptpubkey_type>
{{ vout.scriptpubkey_type | scriptpubkeyType }}
<ng-template [ngIf]="vout.pegout" [ngIfElse]="defaultscriptpubkey_type">
PEG OUT
</ng-template>
<ng-template #defaultscriptpubkey_type>
{{ vout.scriptpubkey_type | scriptpubkeyType }}
</ng-template>
</ng-template>
</td>
<td class="text-right nowrap">