Bisq markets dashboard: Offers list. WIP.

frontend/src/app/bisq/bisq-api.service.ts

@@ -60,6 +60,10 @@ export class BisqApiService {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/hloc?market=' + market + '&interval=' + interval);
   }
 
+  getMarketOffers$(market: string): Observable<any[]> {
+    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
+  }
+
   getMarket24hVolumes$(): Observable<any[]> {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/24hvolumes');
   }

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));
 

frontend/src/app/bisq/bisq-market/bisq-market.component.html

@@ -5,12 +5,12 @@
     <ng-container *ngIf="currency$ | async as currency">
       <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
       <div class="float-left">
-        <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</ng-container>
+        <span class="priceheader">
+          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
           <ng-template #headerPriceCrypto>{{ hlocData[hlocData.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
+        </span> 
       </div>
   
-    </ng-container>
-  
       <form [formGroup]="radioGroupForm" class="mb-3 float-right">
         <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
           <label ngbButtonLabel class="btn-primary btn-sm">
@@ -44,5 +44,51 @@
       </form>
 
       <app-lightweight-charts [data]="hlocData"></app-lightweight-charts>
+
+      <br>
+
+      <ng-container *ngIf="offers$ | async as offers">
+        <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>
+    </ng-container>
+  </ng-container>
+
 </div>
+
+
+<ng-template #offersList let-offers="offers" let-direction="direction", let-market="market">
+  <div class="col">
+    <h2>
+      <ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers">Buy Offers</ng-template>
+      <ng-template #sellOffers>Sell Offers</ng-template>
+    </h2>
+
+    <table class="table table-borderless table-striped">
+      <thead>
+        <th i18n>Price</th>
+        <th i18n>Amount ({{ market.lsymbol }})</th>
+        <th i18n>Amount ({{ market.rsymbol }})</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let offer of offers">
+          <td>
+            <ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
+            <ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
+          </td>
+          <td>
+            <ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
+            <ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} {{ market.lsymbol }}</ng-template>
+          </td>
+          <td>
+            <ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
+            <ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
+          </td>
+        </tr> 
+      </tbody>
+    </table>
+  </div>           
+  
+</ng-template>

frontend/src/app/bisq/bisq-market/bisq-market.component.scss

@@ -0,0 +1,3 @@
+.priceheader {
+    font-size: 24px;
+}

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<any>;
   currency$: Observable<any>;
+  offers$: Observable<any>;
   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);
-      }),
     );
   }
 

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: '<ng-component></ng-component>',
-  styleUrls: ['./lightweight-charts.component.scss']
+  styleUrls: ['./lightweight-charts.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() data: any;