61 lines
2.7 KiB
HTML
61 lines
2.7 KiB
HTML
<div class="container-xl">
|
|
|
|
<h1 i18n="Bisq markets title">Bisq Trading Volume</h1>
|
|
|
|
<div id="volumeHolder">
|
|
<ng-template #loadingVolumes>
|
|
<div class="text-center loadingVolumes">
|
|
<div class="spinner-border text-light"></div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
|
|
<app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<h1>
|
|
<ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
|
|
<ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
|
|
</h1>
|
|
<ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
|
|
|
|
<table class="table table-borderless table-striped">
|
|
<thead>
|
|
<th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
|
|
<th i18n>Price</th>
|
|
<th><ng-container i18n="Trading volume 7D">Volume (7d)</ng-container> <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
|
|
<th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
|
|
</thead>
|
|
<tbody *ngIf="tickers.value; else loadingTmpl">
|
|
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
|
|
<td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
|
|
<td>
|
|
<app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
|
|
<ng-template #fiat>
|
|
<span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
|
|
</ng-template>
|
|
</td>
|
|
<td>
|
|
<app-fiat [value]="ticker.volume?.volume"></app-fiat>
|
|
</td>
|
|
<td>{{ ticker.volume?.num_trades }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<br><br>
|
|
|
|
<h2 i18n="Latest Trades header">Latest Trades</h2>
|
|
<app-bisq-trades [trades$]="trades$"></app-bisq-trades>
|
|
|
|
</ng-container>
|
|
</div>
|
|
|
|
<ng-template #loadingTmpl>
|
|
<tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
|
|
<td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
|
|
</tr>
|
|
</ng-template>
|