From 2fca34faaa285312503b4220627875a53c68ce7f Mon Sep 17 00:00:00 2001 From: softsimon Date: Fri, 5 Mar 2021 02:02:21 +0700 Subject: [PATCH] Bisq markets dashboard: Offers list. WIP. --- frontend/src/app/bisq/bisq-api.service.ts | 4 + .../bisq-dashboard.component.html | 2 +- .../bisq-dashboard.component.ts | 1 - .../bisq-market/bisq-market.component.html | 118 ++++++++++++------ .../bisq-market/bisq-market.component.scss | 3 + .../bisq/bisq-market/bisq-market.component.ts | 19 ++- .../lightweight-charts.component.ts | 5 +- 7 files changed, 106 insertions(+), 46 deletions(-) diff --git a/frontend/src/app/bisq/bisq-api.service.ts b/frontend/src/app/bisq/bisq-api.service.ts index 90324e516..783d0369f 100644 --- a/frontend/src/app/bisq/bisq-api.service.ts +++ b/frontend/src/app/bisq/bisq-api.service.ts @@ -60,6 +60,10 @@ 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); + } + getMarket24hVolumes$(): Observable { return this.httpClient.get(API_BASE_URL + '/markets/24hvolumes'); } 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 1da618e8b..55dde5ec9 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html @@ -39,4 +39,4 @@ - \ No newline at end of file + 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 f9178cd07..0fbe8b923 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.ts @@ -32,7 +32,6 @@ export class BisqDashboardComponent implements OnInit { tickers[t].volume = volumes[t]; newTickers.push(tickers[t]); } - console.log(newTickers); newTickers.sort((a, b) => (b.volume && b.volume.volume || 0) - (a.volume && a.volume.volume || 0)); diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html index 6eec86396..bc7190538 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html @@ -5,44 +5,90 @@

{{ currency.market.lname }} - {{ currency.pair }}

- {{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }} - {{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }} + + {{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }} + {{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }} +
- - -
-
- - - - - - - - - -
-
+
+
+ + + + + + + + + +
+
- + + +
+ + +
+ + +
+ + + + + + +
+

+ Buy Offers + Sell Offers +

+ + + + + + + + + + + + + + +
PriceAmount ({{ market.lsymbol }})Amount ({{ market.rsymbol }})
+ {{ offer.price | currency: market.rsymbol }} + {{ offer.price | number: '1.2-' + market.rprecision }} {{ market.rsymbol }} + + {{ offer.amount | currency: market.rsymbol }} + {{ offer.amount | number: '1.2-' + market.lprecision }} {{ market.lsymbol }} + + {{ offer.volume | currency: market.rsymbol }} + {{ offer.volume | number: '1.2-' + market.rprecision }} {{ market.rsymbol }} +
+
+ + \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss index e69de29bb..7db34cf90 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss @@ -0,0 +1,3 @@ +.priceheader { + font-size: 24px; +} 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 54f9b8b43..95eba7301 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.ts +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import { combineLatest, merge, Observable, of } from 'rxjs'; @@ -8,11 +8,13 @@ import { BisqApiService } from '../bisq-api.service'; @Component({ selector: 'app-bisq-market', templateUrl: './bisq-market.component.html', - styleUrls: ['./bisq-market.component.scss'] + styleUrls: ['./bisq-market.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) export class BisqMarketComponent implements OnInit { hlocData$: Observable; currency$: Observable; + offers$: Observable; radioGroupForm: FormGroup; defaultInterval = 'half_hour'; @@ -32,7 +34,6 @@ export class BisqMarketComponent implements OnInit { switchMap((markets) => combineLatest([of(markets), this.route.paramMap])), map(([markets, routeParams]) => { const pair = routeParams.get('pair'); - console.log(markets); return { pair: pair.replace('_', '/').toUpperCase(), market: markets[pair], @@ -40,6 +41,15 @@ export class BisqMarketComponent implements OnInit { }) ); + this.offers$ = this.route.paramMap + .pipe( + map(routeParams => routeParams.get('pair')), + switchMap((marketPair) => this.bisqApiService.getMarketOffers$(marketPair)), + map((offers) => { + return offers[Object.keys(offers)[0]]; + }) + ); + this.hlocData$ = combineLatest([ this.route.paramMap, merge(this.radioGroupForm.get('interval').valueChanges, of(this.defaultInterval)), @@ -55,9 +65,6 @@ export class BisqMarketComponent implements OnInit { return h; }); }), - tap((data) => { - console.log(data); - }), ); } diff --git a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts index 2e4d11e69..1fe72261c 100644 --- a/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts +++ b/frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts @@ -1,10 +1,11 @@ import { createChart, CrosshairMode } from 'lightweight-charts'; -import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core'; @Component({ selector: 'app-lightweight-charts', template: '', - styleUrls: ['./lightweight-charts.component.scss'] + styleUrls: ['./lightweight-charts.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy { @Input() data: any;