machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bisq markets: Recent trades. Separate Bisq master page.

Browse Source
This commit is contained in:
softsimon
2021-03-13 18:24:50 +07:00
parent 0de2c105d4
commit 01d5a6cfd9
11 changed files with 235 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/bisq/bisq-api.service.ts
View File

@@ -64,6 +64,10 @@ export class BisqApiService {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
}
getMarketTrades$(market: string): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/trades?market=' + market);
}
getMarketVolumesByTime$(period: string): Observable<any[]> {
return this.httpClient.get<any[]>(API_BASE_URL + '/markets/volumes/' + period);
}

12
frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html
View File

@@ -4,12 +4,12 @@
<table class="table table-borderless table-striped">
<thead>
<th i18n>Rank</th>
<th i18n>Currency</th>
<th i18n>Pair</th>
<th i18n>Price</th>
<th i18n>Volume (7d)</th>
<th i18n>Trades (7d)</th>
<th>Rank</th>
<th>Currency</th>
<th>Pair</th>
<th>Price</th>
<th>Volume (7d)</th>
<th>Trades (7d)</th>
</thead>
<tbody *ngIf="tickers.value; else loadingTmpl">
<tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">

65
frontend/src/app/bisq/bisq-market/bisq-market.component.html
View File

@@ -1,8 +1,8 @@
<div class="container-xl">
<ng-container *ngIf="hlocData$ | async as hlocData">
<ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
<ng-container *ngIf="currency$ | async as currency">
<ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
<h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
<div class="float-left">
<span class="priceheader">
@@ -40,18 +40,50 @@
</div>
</form>
<app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
<div class="float-right small mt-2">Powered by <a href="https://www.tradingview.com/" target="_blank">Tradingview</a></div>
<app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
<br>
<ng-container *ngIf="offers$ | async as offers">
<ng-container *ngIf="offers$ | async as offers; else loadingSpinner">
<div class="row row-cols-1 row-cols-md-2">
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.buys, direction: 'BUY', market: currency.market }"></ng-container>
<ng-container *ngTemplateOutlet="offersList; context: { offers: offers.sells, direction: 'SELL', market: currency.market }"></ng-container>
</div>
</ng-container>
<br>
<ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
<h2>Trade History (Last 100 trades)</h2>
<table class="table table-borderless table-striped">
<thead>
<th>Date</th>
<th>Price ({{ currency.market.rsymbol }})</th>
<th>Trade size ({{ currency.market.rsymbol }})</th>
<th>Trade size ({{ currency.market.lsymbol }})</th>
</thead>
<tbody>
<tr *ngFor="let trade of trades">
<td>
{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
</td>
<td>
<ng-container *ngIf="currency.market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #priceCrypto>{{ trade.price | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="currency.market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
</td>
<td>
<ng-container *ngIf="currency.market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: currency.market.rsymbol }}</span></ng-container>
<ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + currency.market.lprecision }} {{ currency.market.lsymbol }}</ng-template>
</td>
</tr>
</tbody>
</table>
</ng-container>
</ng-container>
</ng-container>
@@ -67,9 +99,9 @@
<table class="table table-borderless table-striped">
<thead>
<th i18n>Price</th>
<th i18n>Amount ({{ market.lsymbol }})</th>
<th i18n>Amount ({{ market.rsymbol }})</th>
<th>Price</th>
<th>Amount ({{ market.lsymbol }})</th>
<th>Amount ({{ market.rsymbol }})</th>
</thead>
<tbody>
<tr *ngFor="let offer of offers">
@@ -88,6 +120,13 @@
</tr>
</tbody>
</table>
</div>
</ng-template>
</div>
</ng-template>
<ng-template #loadingSpinner>
<br>
<br>
<div class="text-center">
<div class="spinner-border text-light"></div>
</div>
</ng-template>

9
frontend/src/app/bisq/bisq-market/bisq-market.component.ts
View File

@@ -16,8 +16,9 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
hlocData$: Observable<any>;
currency$: Observable<any>;
offers$: Observable<any>;
trades$: Observable<any>;
radioGroupForm: FormGroup;
defaultInterval = 'half_hour';
defaultInterval = 'day';
constructor(
private websocketService: WebsocketService,
@@ -43,6 +44,12 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
})
);
this.trades$ = this.route.paramMap
.pipe(
map(routeParams => routeParams.get('pair')),
switchMap((marketPair) => this.bisqApiService.getMarketTrades$(marketPair)),
);
this.offers$ = this.route.paramMap
.pipe(
map(routeParams => routeParams.get('pair')),

23
frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts
View File

@@ -1,5 +1,5 @@
import { createChart, CrosshairMode } from 'lightweight-charts';
import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy } from '@angular/core';
@Component({
selector: 'app-lightweight-charts',
@@ -7,7 +7,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, O
styleUrls: ['./lightweight-charts.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy {
export class LightweightChartsComponent implements OnChanges, OnDestroy {
@Input() data: any;
@Input() volumeData: any;
@Input() precision: number;
@@ -48,29 +48,12 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD
},
priceScaleId: '',
scaleMargins: {
top: 0.8,
top: 0.85,
bottom: 0,
},
});
}
ngAfterViewInit(): void {
/*
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
*/
}
ngOnChanges() {
if (!this.data) {
return;