machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1113 from mempool/simon/network-language-fix

Browse Source 
Adding current language to network dropdown links
This commit is contained in:
wiz 2022-01-12 16:41:47 +00:00 committed by GitHub
commit 7f17ade65c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 79 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/app.module.ts
View File

@ -58,6 +58,7 @@ import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-poli
import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component'; import { TrademarkPolicyComponent } from './components/trademark-policy/trademark-policy.component';
import { StorageService } from './services/storage.service'; import { StorageService } from './services/storage.service';
import { HttpCacheInterceptor } from './services/http-cache.interceptor'; import { HttpCacheInterceptor } from './services/http-cache.interceptor';
import { LanguageService } from './services/language.service';
import { SponsorComponent } from './components/sponsor/sponsor.component'; import { SponsorComponent } from './components/sponsor/sponsor.component';
import { PushTransactionComponent } from './components/push-transaction/push-transaction.component'; import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@ -128,6 +129,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
AudioService, AudioService,
SeoService, SeoService,
StorageService, StorageService,
LanguageService,
{ provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true } { provide: HTTP_INTERCEPTORS, useClass: HttpCacheInterceptor, multi: true }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]

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

@ -15,13 +15,13 @@
<img src="./resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1"> <img src="./resources/bisq-logo.png" style="width: 25px; height: 25px;" class="mr-1">
</button> </button>
<div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}"> <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
<a [href]="env.MEMPOOL_WEBSITE_URL" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
<h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6> <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
<button ngbDropdownItem class="mainnet active" routerLink="/"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button> <button ngbDropdownItem class="mainnet active" routerLink="/"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</button>
<a [href]="env.LIQUID_WEBSITE_URL" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
<a [href]="env.LIQUID_WEBSITE_URL + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
</div> </div>
</div> </div>

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

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service'; import { Env, StateService } from '../../services/state.service';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
@Component({ @Component({
selector: 'app-bisq-master-page', selector: 'app-bisq-master-page',
@ -12,14 +13,17 @@ export class BisqMasterPageComponent implements OnInit {
navCollapsed = false; navCollapsed = false;
env: Env; env: Env;
isMobile = window.innerWidth <= 767.98; isMobile = window.innerWidth <= 767.98;
urlLanguage: string;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private languageService: LanguageService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.env = this.stateService.env; this.env = this.stateService.env;
this.connectionState$ = this.stateService.connectionState$; this.connectionState$ = this.stateService.connectionState$;
this.urlLanguage = this.languageService.getLanguageForUrl();
} }
collapse(): void { collapse(): void {

1
frontend/src/app/components/block/block.component.ts
View File

@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
@Component({ @Component({
selector: 'app-block', selector: 'app-block',
templateUrl: './block.component.html', templateUrl: './block.component.html',
providers: [RelativeUrlPipe],
styleUrls: ['./block.component.scss'] styleUrls: ['./block.component.scss']
}) })
export class BlockComponent implements OnInit, OnDestroy { export class BlockComponent implements OnInit, OnDestroy {

39
frontend/src/app/components/language-selector/language-selector.component.ts
View File

@ -1,8 +1,8 @@
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { Language, languages } from 'src/app/app.constants'; import { languages } from 'src/app/app.constants';
import { StateService } from 'src/app/services/state.service'; import { LanguageService } from 'src/app/services/language.service';
@Component({ @Component({
selector: 'app-language-selector', selector: 'app-language-selector',
@ -12,42 +12,25 @@ import { StateService } from 'src/app/services/state.service';
}) })
export class LanguageSelectorComponent implements OnInit { export class LanguageSelectorComponent implements OnInit {
languageForm: FormGroup; languageForm: FormGroup;
languages: Language[]; languages = languages;
constructor( constructor(
@Inject(DOCUMENT) private document: Document,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private stateService: StateService, private languageService: LanguageService,
@Inject(DOCUMENT) private document: Document
) { } ) { }
ngOnInit() { ngOnInit() {
this.languages = languages;
this.languageForm = this.formBuilder.group({ this.languageForm = this.formBuilder.group({
language: [''] language: ['en']
}); });
this.setLanguageFromUrl(); this.languageForm.get('language').setValue(this.languageService.getLanguage());
}
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() { changeLanguage() {
const language = this.languageForm.get('language').value; const newLang = this.languageForm.get('language').value;
try { this.languageService.setLanguage(newLang);
document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`; const rawUrlPath = this.languageService.stripLanguageFromUrl(null);
} catch (e) { } this.document.location.href = (newLang !== 'en' ? `/${newLang}` : '') + rawUrlPath;
if (this.stateService.env.BASE_MODULE === 'mempool') {
this.document.location.href = `/${language}/${this.stateService.network}`;
} else {
this.document.location.href = `/${language}`;
}
} }
} }

8
frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
View File

@ -16,11 +16,11 @@
<img src="./resources/{{ network.val === '' ? 'liquid' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1"> <img src="./resources/{{ network.val === '' ? 'liquid' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
</button> </button>
<div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}"> <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
<a [href]="env.MEMPOOL_WEBSITE_URL" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
<h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6> <h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
<a [href]="env.BISQ_WEBSITE_URL" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a> <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
<button ngbDropdownItem class="liquid" [class.active]="network.val === 'liquid'" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button> <button ngbDropdownItem class="liquid" [class.active]="network.val === 'liquid'" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
<button ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" routerLink="/testnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</button> <button ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" routerLink="/testnet"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</button>
</div> </div>

4
frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service'; import { Env, StateService } from '../../services/state.service';
import { merge, Observable, of} from 'rxjs'; import { merge, Observable, of} from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
@Component({ @Component({
selector: 'app-liquid-master-page', selector: 'app-liquid-master-page',
@ -14,15 +15,18 @@ export class LiquidMasterPageComponent implements OnInit {
isMobile = window.innerWidth <= 767.98; isMobile = window.innerWidth <= 767.98;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
network$: Observable<string>; network$: Observable<string>;
urlLanguage: string;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private languageService: LanguageService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.env = this.stateService.env; this.env = this.stateService.env;
this.connectionState$ = this.stateService.connectionState$; this.connectionState$ = this.stateService.connectionState$;
this.network$ = merge(of(''), this.stateService.networkChanged$); this.network$ = merge(of(''), this.stateService.networkChanged$);
this.urlLanguage = this.languageService.getLanguageForUrl();
} }
collapse(): void { collapse(): void {

6
frontend/src/app/components/master-page/master-page.component.html
View File

@ -20,9 +20,9 @@
<button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button> <button ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</button>
<button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button> <button ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</button>
<h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6> <h6 *ngIf="env.LIQUID_ENABLED || env.BISQ_ENABLED" class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
<a [href]="env.BISQ_WEBSITE_URL" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a> <a [href]="env.BISQ_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
<a [href]="env.LIQUID_WEBSITE_URL" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</a>
<a [href]="env.LIQUID_WEBSITE_URL + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><img src="./resources/liquidtestnet-logo.png" style="width: 30px;" class="mr-1"> Liquid Testnet</a>
</div> </div>
</div> </div>

4
frontend/src/app/components/master-page/master-page.component.ts
View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Env, StateService } from '../../services/state.service'; import { Env, StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs'; import { Observable, merge, of } from 'rxjs';
import { LanguageService } from 'src/app/services/language.service';
@Component({ @Component({
selector: 'app-master-page', selector: 'app-master-page',
@ -14,15 +15,18 @@ export class MasterPageComponent implements OnInit {
navCollapsed = false; navCollapsed = false;
isMobile = window.innerWidth <= 767.98; isMobile = window.innerWidth <= 767.98;
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
urlLanguage: string;
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private languageService: LanguageService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.env = this.stateService.env; this.env = this.stateService.env;
this.connectionState$ = this.stateService.connectionState$; this.connectionState$ = this.stateService.connectionState$;
this.network$ = merge(of(''), this.stateService.networkChanged$); this.network$ = merge(of(''), this.stateService.networkChanged$);
this.urlLanguage = this.languageService.getLanguageForUrl();
} }
collapse(): void { collapse(): void {

1
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -12,7 +12,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
selector: 'app-mempool-blocks', selector: 'app-mempool-blocks',
templateUrl: './mempool-blocks.component.html', templateUrl: './mempool-blocks.component.html',
styleUrls: ['./mempool-blocks.component.scss'], styleUrls: ['./mempool-blocks.component.scss'],
providers: [RelativeUrlPipe],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class MempoolBlocksComponent implements OnInit, OnDestroy { export class MempoolBlocksComponent implements OnInit, OnDestroy {

1
frontend/src/app/components/search-form/search-form.component.ts
View File

@ -13,7 +13,6 @@ import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.
selector: 'app-search-form', selector: 'app-search-form',
templateUrl: './search-form.component.html', templateUrl: './search-form.component.html',
styleUrls: ['./search-form.component.scss'], styleUrls: ['./search-form.component.scss'],
providers: [RelativeUrlPipe],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class SearchFormComponent implements OnInit { export class SearchFormComponent implements OnInit {

40
frontend/src/app/services/language.service.ts Normal file
View File

@ -0,0 +1,40 @@
import { DOCUMENT, getLocaleId } from '@angular/common';
import { LOCALE_ID, Inject, Injectable } from '@angular/core';
import { languages } from 'src/app/app.constants';
@Injectable({
providedIn: 'root'
})
export class LanguageService {
private language = 'en';
private languages = languages;
constructor(
@Inject(DOCUMENT) private document: Document,
@Inject(LOCALE_ID) private locale: string,
) {
this.language = getLocaleId(this.locale).substring(0, 2);
}
getLanguage(): string {
return this.language;
}
stripLanguageFromUrl(urlPath: string) {
let rawUrlPath = urlPath ? urlPath : document.location.pathname;
const urlLanguage = this.document.location.pathname.split('/')[1];
if (this.languages.map((lang) => lang.code).indexOf(urlLanguage) != -1) {
rawUrlPath = rawUrlPath.substring(3);
}
return rawUrlPath;
}
getLanguageForUrl(): string {
return this.language === 'en' ? '' : '/' + this.language;
}
setLanguage(language: string): void {
try {
document.cookie = `lang=${language}; expires=Thu, 18 Dec 2050 12:00:00 UTC; path=/`;
} catch (e) { }
}
}

1
frontend/src/app/shared/shared.module.ts
View File

@ -60,6 +60,7 @@ import { ColoredPriceDirective } from './directives/colored-price.directive';
], ],
providers: [ providers: [
VbytesPipe, VbytesPipe,
RelativeUrlPipe,
], ],
exports: [ exports: [
NgbAccordionModule, NgbAccordionModule,