From 2d4dff6de8d6fb3b43d7c9f28faff9bbdcfc7893 Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 23 Apr 2021 03:49:55 +0400 Subject: [PATCH] Display 100 latest trades. --- frontend/src/app/bisq/bisq-api.service.ts | 26 +++++++-------- .../bisq-dashboard.component.html | 33 +++++++++++++++++-- .../bisq-dashboard.component.ts | 32 ++++++++++++++---- .../bisq/bisq-market/bisq-market.component.ts | 5 +-- frontend/src/app/bisq/bisq.interfaces.ts | 5 +-- 5 files changed, 75 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/bisq/bisq-api.service.ts b/frontend/src/app/bisq/bisq-api.service.ts index b6f6a08b7..9e90e6054 100644 --- a/frontend/src/app/bisq/bisq-api.service.ts +++ b/frontend/src/app/bisq/bisq-api.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpResponse, HttpParams } from '@angular/common/http'; import { Observable } from 'rxjs'; -import { BisqTransaction, BisqBlock, BisqStats, MarketVolume } from './bisq.interfaces'; +import { BisqTransaction, BisqBlock, BisqStats, MarketVolume, Trade, Markets, Tickers, Offers, Currencies, HighLowOpenClose } from './bisq.interfaces'; const API_BASE_URL = '/bisq/api'; @@ -43,16 +43,16 @@ export class BisqApiService { return this.httpClient.get(API_BASE_URL + '/address/' + address); } - getMarkets$(): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/markets'); + getMarkets$(): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/markets'); } - getMarketsTicker$(): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/ticker'); + getMarketsTicker$(): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/ticker'); } - getMarketsCurrencies$(): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/currencies'); + getMarketsCurrencies$(): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/currencies'); } getMarketsHloc$(market: string, interval: 'minute' | 'half_hour' | 'hour' | 'half_day' | 'day' @@ -60,16 +60,16 @@ export class BisqApiService { return this.httpClient.get(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval); } - getMarketOffers$(market: string): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/offers?market=' + market); + getMarketOffers$(market: string): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/offers?market=' + market); } - getMarketTrades$(market: string): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/trades?market=' + market); + getMarketTrades$(market: string): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/trades?market=' + market); } - getMarketVolumesByTime$(period: string): Observable { - return this.httpClient.get(API_BASE_URL + '/markets/volumes/' + period); + getMarketVolumesByTime$(period: string): Observable { + return this.httpClient.get(API_BASE_URL + '/markets/volumes/' + period); } getAllVolumesDay$(): Observable { diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html index 03eb8df4a..25381ef08 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html @@ -42,13 +42,42 @@ -
+

+ +

Trade History (Last 100 trades)

+ + + + + + + + + + + + + + + +
DatePriceTrade amount (BTC)Trade amount
+ {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }} + + {{ trade.price | currency: trade._market.rsymbol }} + {{ trade.price | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }} + + {{ trade.volume | currency: trade._market.rsymbol }} + {{ trade.volume | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }} + + {{ trade.amount | currency: trade._market.rsymbol }} + {{ trade.amount | number: '1.2-' + trade._market.lprecision }} {{ trade._market.lsymbol }} +
- + diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts index 0f557d2f9..52e1a9393 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts @@ -1,10 +1,11 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { Observable, combineLatest } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, share } from 'rxjs/operators'; import { SeoService } from 'src/app/services/seo.service'; import { StateService } from 'src/app/services/state.service'; import { WebsocketService } from 'src/app/services/websocket.service'; import { BisqApiService } from '../bisq-api.service'; +import { Trade } from '../bisq.interfaces'; @Component({ selector: 'app-bisq-dashboard', @@ -15,6 +16,7 @@ import { BisqApiService } from '../bisq-api.service'; export class BisqDashboardComponent implements OnInit { tickers$: Observable; volumes$: Observable; + trades$: Observable; allowCryptoCoins = ['usdc', 'l-btc', 'bsq']; @@ -53,9 +55,11 @@ export class BisqDashboardComponent implements OnInit { }) ); + const getMarkets = this.bisqApiService.getMarkets$().pipe(share()); + this.tickers$ = combineLatest([ this.bisqApiService.getMarketsTicker$(), - this.bisqApiService.getMarkets$(), + getMarkets, this.bisqApiService.getMarketVolumesByTime$('7d'), ]) .pipe( @@ -71,11 +75,13 @@ export class BisqDashboardComponent implements OnInit { } } - tickers[t].pair_url = t; - tickers[t].pair = t.replace('_', '/').toUpperCase(); - tickers[t].market = markets[t]; - tickers[t].volume = volumes[t]; - newTickers.push(tickers[t]); + const mappedTicker: any = tickers[t]; + + mappedTicker.pair_url = t; + mappedTicker.pair = t.replace('_', '/').toUpperCase(); + mappedTicker.market = markets[t]; + mappedTicker.volume = volumes[t]; + newTickers.push(mappedTicker); } newTickers.sort((a, b) => (b.volume && b.volume.num_trades || 0) - (a.volume && a.volume.num_trades || 0)); @@ -83,6 +89,18 @@ export class BisqDashboardComponent implements OnInit { return newTickers; }) ); + + this.trades$ = combineLatest([ + this.bisqApiService.getMarketTrades$('all'), + getMarkets, + ]) + .pipe( + map(([trades, markets]) => { + return trades.map((trade => { + trade._market = markets[trade.market]; + return trade; + })); + })); } trackByFn(index: number) { diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts index 076208a00..cd4400bab 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts @@ -6,6 +6,7 @@ import { map, switchMap } from 'rxjs/operators'; import { SeoService } from 'src/app/services/seo.service'; import { WebsocketService } from 'src/app/services/websocket.service'; import { BisqApiService } from '../bisq-api.service'; +import { OffersMarket, Trade } from '../bisq.interfaces'; @Component({ selector: 'app-bisq-market', @@ -16,8 +17,8 @@ import { BisqApiService } from '../bisq-api.service'; export class BisqMarketComponent implements OnInit, OnDestroy { hlocData$: Observable; currency$: Observable; - offers$: Observable; - trades$: Observable; + offers$: Observable; + trades$: Observable; radioGroupForm: FormGroup; defaultInterval = 'day'; diff --git a/frontend/src/app/bisq/bisq.interfaces.ts b/frontend/src/app/bisq/bisq.interfaces.ts index edb2f1d76..c8388c20f 100644 --- a/frontend/src/app/bisq/bisq.interfaces.ts +++ b/frontend/src/app/bisq/bisq.interfaces.ts @@ -138,7 +138,7 @@ interface Pair { export interface Offers { [market: string]: OffersMarket; } -interface OffersMarket { +export interface OffersMarket { buys: Offer[] | null; sells: Offer[] | null; } @@ -193,13 +193,14 @@ export interface Ticker { } export interface Trade { - direction: string; + market?: string; price: string; amount: string; volume: string; payment_method: string; trade_id: string; trade_date: number; + _market: Pair; } export interface TradesData {