Display 100 latest trades.

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