Bisq markets: Recent trades. Separate Bisq master page.

frontend/src/app/app-routing.module.ts

@@ -16,8 +16,9 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { LatestBlocksComponent } from './components/latest-blocks/latest-blocks.component';
 import { ApiDocsComponent } from './components/api-docs/api-docs.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 
-const routes: Routes = [
+let routes: Routes = [
   {
     path: '',
     component: MasterPageComponent,
@@ -283,6 +284,18 @@ const routes: Routes = [
   },
 ];
 
+const browserWindow = window || {};
+// @ts-ignore
+const browserWindowEnv = browserWindow.__env || {};
+
+if (browserWindowEnv && browserWindowEnv.OFFICIAL_BISQ_MARKETS) {
+  routes = [{
+    path: '',
+    component: BisqMasterPageComponent,
+    loadChildren: () => import('./bisq/bisq.module').then(m => m.BisqModule)
+  }];
+}
+
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
     initialNavigation: 'enabled'

frontend/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { WebsocketService } from './services/websocket.service';
 import { AddressLabelsComponent } from './components/address-labels/address-labels.component';
 import { MempoolBlocksComponent } from './components/mempool-blocks/mempool-blocks.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
+import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { AboutComponent } from './components/about/about.component';
 import { TelevisionComponent } from './components/television/television.component';
 import { StatisticsComponent } from './components/statistics/statistics.component';
@@ -55,6 +56,7 @@ import { HttpCacheInterceptor } from './services/http-cache.interceptor';
     AppComponent,
     AboutComponent,
     MasterPageComponent,
+    BisqMasterPageComponent,
     TelevisionComponent,
     BlockchainComponent,
     StartComponent,

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

@@ -64,6 +64,10 @@ export class BisqApiService {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/offers?market=' + market);
   }
 
+  getMarketTrades$(market: string): Observable<any[]> {
+    return this.httpClient.get<any[]>(API_BASE_URL + '/markets/trades?market=' + market);
+  }
+
   getMarketVolumesByTime$(period: string): Observable<any[]> {
     return this.httpClient.get<any[]>(API_BASE_URL + '/markets/volumes/' + period);
   }

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

@@ -4,12 +4,12 @@
 
   <table class="table table-borderless table-striped">
     <thead>
-      <th i18n>Rank</th>
+      <th>Rank</th>
-      <th i18n>Currency</th>
+      <th>Currency</th>
-      <th i18n>Pair</th>
+      <th>Pair</th>
-      <th i18n>Price</th>
+      <th>Price</th>
-      <th i18n>Volume (7d)</th>
+      <th>Volume (7d)</th>
-      <th i18n>Trades (7d)</th>
+      <th>Trades (7d)</th>
     </thead>
     <tbody *ngIf="tickers.value; else loadingTmpl">
       <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn; let i = index">

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

@@ -1,8 +1,8 @@
 <div class="container-xl">
 
-  <ng-container *ngIf="hlocData$ | async as hlocData">
+  <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
 
-    <ng-container *ngIf="currency$ | async as currency">
+    <ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
       <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
       <div class="float-left">
         <span class="priceheader">
@@ -40,18 +40,50 @@
         </div>
       </form>
 
-      <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>
+      <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>      
-      
-      <div class="float-right small mt-2">Powered by <a href="https://www.tradingview.com/" target="_blank">Tradingview</a></div>
-      
       <br>
 
-      <ng-container *ngIf="offers$ | async as offers">
+      <ng-container *ngIf="offers$ | async as offers; else loadingSpinner">
         <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>
+
+      <br>
+
+      <ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
+        <h2>Trade History (Last 100 trades)</h2>
+
+        <table class="table table-borderless table-striped">
+          <thead>
+            <th>Date</th>
+            <th>Price ({{ currency.market.rsymbol }})</th>
+            <th>Trade size ({{ currency.market.rsymbol }})</th>
+            <th>Trade size ({{ currency.market.lsymbol }})</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let trade of trades">
+              <td>
+                {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
+              </td>
+              <td>
+                <ng-container *ngIf="currency.market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: currency.market.rsymbol }}</span></ng-container>
+                <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
+              </td>
+              <td>
+                <ng-container *ngIf="currency.market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: currency.market.rsymbol }}</span></ng-container>
+                <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
+              </td>
+              <td>
+                <ng-container *ngIf="currency.market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: currency.market.rsymbol }}</span></ng-container>
+                <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + currency.market.lprecision }} {{ currency.market.lsymbol }}</ng-template>
+              </td>
+            </tr> 
+          </tbody>
+        </table>
+      </ng-container>
+
     </ng-container>
   </ng-container>
 
@@ -67,9 +99,9 @@
 
     <table class="table table-borderless table-striped">
       <thead>
-        <th i18n>Price</th>
+        <th>Price</th>
-        <th i18n>Amount ({{ market.lsymbol }})</th>
+        <th>Amount ({{ market.lsymbol }})</th>
-        <th i18n>Amount ({{ market.rsymbol }})</th>
+        <th>Amount ({{ market.rsymbol }})</th>
       </thead>
       <tbody>
         <tr *ngFor="let offer of offers">
@@ -88,6 +120,13 @@
         </tr> 
       </tbody>
     </table>
-  </div>           
+  </div>
-  
+</ng-template>
-</ng-template>
+
+<ng-template #loadingSpinner>
+  <br>
+  <br>
+  <div class="text-center">
+    <div class="spinner-border text-light"></div>
+  </div>
+</ng-template>

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

@@ -16,8 +16,9 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
   hlocData$: Observable<any>;
   currency$: Observable<any>;
   offers$: Observable<any>;
+  trades$: Observable<any>;
   radioGroupForm: FormGroup;
-  defaultInterval = 'half_hour';
+  defaultInterval = 'day';
 
   constructor(
     private websocketService: WebsocketService,
@@ -43,6 +44,12 @@ export class BisqMarketComponent implements OnInit, OnDestroy {
         })
       );
 
+    this.trades$ = this.route.paramMap
+      .pipe(
+        map(routeParams => routeParams.get('pair')),
+        switchMap((marketPair) => this.bisqApiService.getMarketTrades$(marketPair)),
+      );
+
     this.offers$ = this.route.paramMap
       .pipe(
         map(routeParams => routeParams.get('pair')),

frontend/src/app/bisq/lightweight-charts/lightweight-charts.component.ts

@@ -1,5 +1,5 @@
 import { createChart, CrosshairMode } from 'lightweight-charts';
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, OnDestroy } from '@angular/core';
 
 @Component({
   selector: 'app-lightweight-charts',
@@ -7,7 +7,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, O
   styleUrls: ['./lightweight-charts.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class LightweightChartsComponent implements OnChanges, OnDestroy {
   @Input() data: any;
   @Input() volumeData: any;
   @Input() precision: number;
@@ -48,29 +48,12 @@ export class LightweightChartsComponent implements AfterViewInit, OnChanges, OnD
       },
       priceScaleId: '',
       scaleMargins: {
-        top: 0.8,
+        top: 0.85,
         bottom: 0,
       },
     });
   }
 
-  ngAfterViewInit(): void {
-    /*
-    lineSeries.setData([
-        { time: '2019-04-11', value: 80.01 },
-        { time: '2019-04-12', value: 96.63 },
-        { time: '2019-04-13', value: 76.64 },
-        { time: '2019-04-14', value: 81.89 },
-        { time: '2019-04-15', value: 74.43 },
-        { time: '2019-04-16', value: 80.01 },
-        { time: '2019-04-17', value: 96.63 },
-        { time: '2019-04-18', value: 76.64 },
-        { time: '2019-04-19', value: 81.89 },
-        { time: '2019-04-20', value: 74.43 },
-    ]);
-    */
-  }
-
   ngOnChanges() {
     if (!this.data) {
       return;

frontend/src/app/components/bisq-master-page/bisq-master-page.component.html

@@ -0,0 +1,30 @@
+<header>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+  <a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
+    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+      <img [src]="officialMempoolSpace ? './resources/mempool-space-logo.png' : './resources/mempool-logo.png'" height="35" width="140" class="logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }">
+      <div class="connection-badge">
+        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+      </div>
+    </ng-container>
+  </a>
+
+  <div class="navbar-collapse" id="navbarCollapse">
+    <ul class="navbar-nav mr-auto pt-2 pb-2 pb-md-0 pt-md-0">
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
+      </li>
+      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active">
+        <a class="nav-link" [routerLink]="['/api' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'cogs']" [fixedWidth]="true" i18n-title="master-page.api" title="API"></fa-icon></a>
+      </li>
+    </ul>
+  </div>
+</nav>
+</header>
+
+<br />
+
+<router-outlet></router-outlet>
+
+<br>

frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss

@@ -0,0 +1,85 @@
+li.nav-item.active {
+  background-color: #653b9c;
+}
+
+fa-icon {
+  font-size: 1.66em;
+}
+
+.navbar {
+  z-index: 100;
+}
+
+li.nav-item {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+@media (min-width: 768px) {
+  .navbar {
+    padding: 0rem 2rem;
+  }
+  fa-icon {
+    font-size: 1.2em;
+  }
+  .dropdown-container {
+    margin-right: 16px;
+  }
+  li.nav-item {
+    padding: 10px;
+  }
+}
+
+li.nav-item a {
+  color: #ffffff;
+}
+
+.navbar-nav {
+  flex-direction: row;
+  justify-content: center;
+}
+
+nav {
+  box-shadow: 0px 0px 15px 0px #000;
+}
+
+.connection-badge {
+  position: absolute;
+  top: 13px;
+  left: 0px;
+  width: 140px;
+}
+
+.badge {
+  margin: 0 auto;
+  display: table;
+}
+
+.mainnet.active {
+  background-color: #653b9c;
+}
+
+.liquid.active {
+  background-color: #116761;
+}
+
+.testnet.active {
+  background-color: #1d486f;
+}
+
+.signet.active {
+  background-color: #6f1d5d;
+}
+
+.dropdown-divider {
+  border-top: 1px solid #121420;
+}
+
+.dropdown-toggle::after {
+  vertical-align: 0.1em;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items:center;
+}

frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Env, StateService } from '../../services/state.service';
+import { Observable, merge, of } from 'rxjs';
+
+@Component({
+  selector: 'app-bisq-master-page',
+  templateUrl: './bisq-master-page.component.html',
+  styleUrls: ['./bisq-master-page.component.scss'],
+})
+export class BisqMasterPageComponent implements OnInit {
+  env: Env;
+  connectionState$: Observable<number>;
+  navCollapsed = false;
+  isMobile = window.innerWidth <= 767.98;
+  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.env = this.stateService.env;
+    this.connectionState$ = this.stateService.connectionState$;
+  }
+
+  collapse(): void {
+    this.navCollapsed = !this.navCollapsed;
+  }
+}

frontend/src/app/services/state.service.ts

@@ -24,6 +24,7 @@ export interface Env {
   ITEMS_PER_PAGE: number;
   KEEP_BLOCKS_AMOUNT: number;
   OFFICIAL_MEMPOOL_SPACE: boolean;
+  OFFICIAL_BISQ_MARKETS: boolean;
   NGINX_PROTOCOL?: string;
   NGINX_HOSTNAME?: string;
   NGINX_PORT?: string;
@@ -33,6 +34,7 @@ const defaultEnv: Env = {
   'TESTNET_ENABLED': false,
   'SIGNET_ENABLED': false,
   'LIQUID_ENABLED': false,
+  'OFFICIAL_BISQ_MARKETS': false,
   'BISQ_ENABLED': false,
   'BISQ_SEPARATE_BACKEND': false,
   'ITEMS_PER_PAGE': 10,