Bisq markets: Display terms of service and language selector (except on official markets).

refs #510

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

@@ -33,8 +33,6 @@
           <div class="chart-container">
             <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
               <app-lightweight-charts [height]="300" [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="2"></app-lightweight-charts>      
-              <br>
-              <div class="text-center"><a href="" [routerLink]="['/market/btc_usd' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
             </ng-container>
           </div>
         </div>
@@ -47,8 +45,6 @@
           <div class="chart-container">
             <ng-container *ngIf="volumes$ | async as volumes; else loadingSpinner">
               <app-lightweight-charts-area [height]="300" [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
-              <br>
-              <div class="text-center"><a href="" [routerLink]="['/markets' | relativeUrl]" i18n="dashboard.view-all">View all &raquo;</a></div>
             </ng-container>
           </div>
         </div>
@@ -105,6 +101,12 @@
   </ng-container>
   </div>
 
+  <app-language-selector *ngIf="!stateService.env.OFFICIAL_BISQ_MARKETS"></app-language-selector>
+
+  <div class="text-small text-center mt-3">
+    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+  </div>
+
 </div>
 
 <ng-template #loadingTmpl>

frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.scss

@@ -28,7 +28,7 @@
 }
 
 .chart-container {
-  height: 350px;
+  height: 300px;
 }
 
 .big-fiat {

frontend/src/app/components/language-selector/language-selector.component.html

@@ -0,0 +1,5 @@
+<div [formGroup]="languageForm" class="text-small text-center mt-4">
+    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()">
+        <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
+    </select>
+</div>

frontend/src/app/components/language-selector/language-selector.component.ts

@@ -0,0 +1,48 @@
+import { DOCUMENT } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Language, languages } from 'src/app/app.constants';
+import { StateService } from 'src/app/services/state.service';
+
+@Component({
+  selector: 'app-language-selector',
+  templateUrl: './language-selector.component.html',
+  styleUrls: ['./language-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LanguageSelectorComponent implements OnInit {
+  languageForm: FormGroup;
+  languages: Language[];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private stateService: StateService,
+    @Inject(DOCUMENT) private document: Document
+  ) { }
+
+  ngOnInit() {
+    this.languages = languages;
+
+    this.languageForm = this.formBuilder.group({
+      language: ['']
+    });
+    this.setLanguageFromUrl();
+  }
+
+  setLanguageFromUrl() {
+    const urlLanguage = this.document.location.pathname.split('/')[1];
+    if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) {
+      this.languageForm.get('language').setValue(urlLanguage);
+    } else {
+      this.languageForm.get('language').setValue('en');
+    }
+  }
+
+  changeLanguage() {
+    const language = this.languageForm.get('language').value;
+    try {
+      document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
+    } catch (e) { }
+    this.document.location.href = `/${language}/${this.stateService.network}`;
+  }
+}

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

@@ -133,11 +133,7 @@
     </div>
   </button>
 
-  <div [formGroup]="languageForm" class="text-small text-center mt-4">
+  <app-language-selector></app-language-selector>
-    <select formControlName="language" class="custom-select custom-select-sm form-control-secondary form-control mx-auto" style="width: 130px;" (change)="changeLanguage()">
-      <option *ngFor="let lang of languages" [value]="lang.code">{{ lang.name }}</option>
-    </select>
-  </div>
 
   <div class="text-small text-center mt-3">
     <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>

frontend/src/app/dashboard/dashboard.component.ts

@@ -7,12 +7,10 @@ import { MempoolInfo, TransactionStripped } from '../interfaces/websocket.interf
 import { ApiService } from '../services/api.service';
 import { StateService } from '../services/state.service';
 import * as Chartist from '@mempool/chartist';
-import { DOCUMENT, formatDate } from '@angular/common';
+import { formatDate } from '@angular/common';
 import { WebsocketService } from '../services/websocket.service';
 import { SeoService } from '../services/seo.service';
 import { StorageService } from '../services/storage.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { languages, Language } from '../app.constants';
 
 interface MempoolBlocksData {
   blocks: number;
@@ -58,8 +56,6 @@ export class DashboardComponent implements OnInit {
   mempoolTransactionsWeightPerSecondData: any;
   mempoolStats$: Observable<MempoolStatsData>;
   transactionsWeightPerSecondOptions: any;
-  languageForm: FormGroup;
-  languages: Language[];
 
   constructor(
     @Inject(LOCALE_ID) private locale: string,
@@ -68,12 +64,9 @@ export class DashboardComponent implements OnInit {
     private websocketService: WebsocketService,
     private seoService: SeoService,
     private storageService: StorageService,
-    private formBuilder: FormBuilder,
-    @Inject(DOCUMENT) private document: Document
   ) { }
 
   ngOnInit(): void {
-    this.languages = languages;
     this.seoService.resetTitle();
     this.websocketService.want(['blocks', 'stats', 'mempool-blocks', 'live-2h-chart']);
     this.network$ = merge(of(''), this.stateService.networkChanged$);
@@ -82,11 +75,6 @@ export class DashboardComponent implements OnInit {
       map((indicators) => indicators.mempool !== undefined ? indicators.mempool : 100)
     );
 
-    this.languageForm = this.formBuilder.group({
-      language: ['']
-    });
-    this.setLanguageFromUrl();
-
     this.mempoolInfoData$ = combineLatest([
       this.stateService.mempoolInfo$,
       this.stateService.vbytesPerSecond$
@@ -102,7 +90,7 @@ export class DashboardComponent implements OnInit {
           progressClass = 'bg-warning';
         }
 
-        let mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100)
+        const mempoolSizePercentage = (mempoolInfo.usage / mempoolInfo.maxmempool * 100)
         let mempoolSizeProgress = 'bg-danger';
         if (mempoolSizePercentage <= 50) {
           mempoolSizeProgress = 'bg-success';
@@ -257,21 +245,4 @@ export class DashboardComponent implements OnInit {
     }
     this.storageService.setValue('dashboard-collapsed', this.collapseLevel);
   }
-
-  setLanguageFromUrl() {
-    const urlLanguage = this.document.location.pathname.split('/')[1];
-    if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) > -1) {
-      this.languageForm.get('language').setValue(urlLanguage);
-    } else {
-      this.languageForm.get('language').setValue('en');
-    }
-  }
-
-  changeLanguage() {
-    const language = this.languageForm.get('language').value;
-    try {
-      document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
-    } catch (e) { }
-    this.document.location.href = `/${language}/${this.stateService.network}`;
-  }
 }

frontend/src/app/shared/shared.module.ts

@@ -18,6 +18,7 @@ import { NgbNavModule, NgbTooltipModule, NgbButtonsModule, NgbPaginationModule,
 import { TxFeaturesComponent } from '../components/tx-features/tx-features.component';
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     FiatComponent,
     TxFeaturesComponent,
     TxFeeRatingComponent,
+    LanguageSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,
@@ -64,6 +66,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     FiatComponent,
     TxFeaturesComponent,
     TxFeeRatingComponent,
+    LanguageSelectorComponent,
     ScriptpubkeyTypePipe,
     RelativeUrlPipe,
     Hex2asciiPipe,