Display 100 latest trades.

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<BisqTransaction[]>(API_BASE_URL + '/address/' + address);
   }
 
-  getMarkets$(): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/markets');
+  getMarkets$(): Observable<Markets> {
+    return this.httpClient.get<Markets>(API_BASE_URL + '/markets/markets');
   }
 
-  getMarketsTicker$(): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/ticker');
+  getMarketsTicker$(): Observable<Tickers> {
+    return this.httpClient.get<Tickers>(API_BASE_URL + '/markets/ticker');
   }
 
-  getMarketsCurrencies$(): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/currencies');
+  getMarketsCurrencies$(): Observable<Currencies> {
+    return this.httpClient.get<Currencies>(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<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);
+  getMarketOffers$(market: string): Observable<Offers> {
+    return this.httpClient.get<Offers>(API_BASE_URL + '/markets/offers?market=' + market);
   }
 
-  getMarketTrades$(market: string): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/trades?market=' + market);
+  getMarketTrades$(market: string): Observable<Trade[]> {
+    return this.httpClient.get<Trade[]>(API_BASE_URL + '/markets/trades?market=' + market);
   }
 
-  getMarketVolumesByTime$(period: string): Observable<any[]> {
-    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/volumes/' + period);
+  getMarketVolumesByTime$(period: string): Observable<HighLowOpenClose[]> {
+    return this.httpClient.get<HighLowOpenClose[]>(API_BASE_URL + '/markets/volumes/' + period);
   }
 
   getAllVolumesDay$(): Observable<MarketVolume[]> {

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

@@ -42,13 +42,42 @@
     </tbody>
   </table>
 
-  <br>
+  <br><br>
+
+  <h2>Trade History (Last 100 trades)</h2>
+  <table class="table table-borderless table-striped">
+    <thead>
+      <th>Date</th>
+      <th>Price</th>
+      <th>Trade amount (BTC)</th>
+      <th>Trade amount</th>
+    </thead>
+    <tbody *ngIf="trades$ | async as trades; else loadingTmpl">
+      <tr *ngFor="let trade of trades">
+        <td>
+          {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
+        </td>
+        <td>
+          <ng-container *ngIf="trade._market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: trade._market.rsymbol }}</span></ng-container>
+          <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
+        </td>
+        <td>
+          <ng-container *ngIf="trade._market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: trade._market.rsymbol }}</span></ng-container>
+          <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + trade._market.rprecision }} {{ trade._market.rsymbol }}</ng-template>
+        </td>
+        <td>
+          <ng-container *ngIf="trade._market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: trade._market.rsymbol }}</span></ng-container>
+          <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + trade._market.lprecision }} {{ trade._market.lsymbol }}</ng-template>
+        </td>
+      </tr> 
+    </tbody>
+  </table>
 
   </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, 5, 6]"><span class="skeleton-loader"></span></td>
+    <td *ngFor="let j of [1, 2, 3, 4]"><span class="skeleton-loader"></span></td>
   </tr>
 </ng-template>

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<any>;
   volumes$: Observable<any>;
+  trades$: Observable<Trade[]>;
 
   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) {

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<any>;
   currency$: Observable<any>;
-  offers$: Observable<any>;
-  trades$: Observable<any>;
+  offers$: Observable<OffersMarket>;
+  trades$: Observable<Trade[]>;
   radioGroupForm: FormGroup;
   defaultInterval = 'day';
 

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 {