Display 100 latest trades.

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