Bisq markets: Recent trades. Separate Bisq master page.

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;
+  }
+}