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

Merge pull request #2631 from mononaut/subnet-navigation

Browse Source 
Maintain routing when switching network
This commit is contained in:
wiz 2022-10-16 07:29:39 +09:00 committed by GitHub
commit 992ea6da3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 199 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/app/app-routing.module.ts
View File

@ -74,12 +74,14 @@ let routes: Routes = [
children: [], children: [],
component: AddressComponent, component: AddressComponent,
data: { data: {
ogImage: true ogImage: true,
networkSpecific: true,
} }
}, },
{ {
path: 'tx', path: 'tx',
component: StartComponent, component: StartComponent,
data: { networkSpecific: true },
children: [ children: [
{ {
path: ':id', path: ':id',
@ -90,6 +92,7 @@ let routes: Routes = [
{ {
path: 'block', path: 'block',
component: StartComponent, component: StartComponent,
data: { networkSpecific: true },
children: [ children: [
{ {
path: ':id', path: ':id',
@ -102,6 +105,7 @@ let routes: Routes = [
}, },
{ {
path: 'block-audit', path: 'block-audit',
data: { networkSpecific: true },
children: [ children: [
{ {
path: ':id', path: ':id',
@ -121,12 +125,13 @@ let routes: Routes = [
{ {
path: 'lightning', path: 'lightning',
loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule), loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule),
data: { preload: browserWindowEnv && browserWindowEnv.LIGHTNING === true }, data: { preload: browserWindowEnv && browserWindowEnv.LIGHTNING === true, networks: ['bitcoin'] },
}, },
], ],
}, },
{ {
path: 'status', path: 'status',
data: { networks: ['bitcoin', 'liquid'] },
component: StatusViewComponent component: StatusViewComponent
}, },
{ {
@ -185,11 +190,13 @@ let routes: Routes = [
children: [], children: [],
component: AddressComponent, component: AddressComponent,
data: { data: {
ogImage: true ogImage: true,
networkSpecific: true,
} }
}, },
{ {
path: 'tx', path: 'tx',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -200,6 +207,7 @@ let routes: Routes = [
}, },
{ {
path: 'block', path: 'block',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -213,6 +221,7 @@ let routes: Routes = [
}, },
{ {
path: 'block-audit', path: 'block-audit',
data: { networkSpecific: true },
children: [ children: [
{ {
path: ':id', path: ':id',
@ -230,12 +239,14 @@ let routes: Routes = [
}, },
{ {
path: 'lightning', path: 'lightning',
data: { networks: ['bitcoin'] },
loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule) loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
}, },
], ],
}, },
{ {
path: 'status', path: 'status',
data: { networks: ['bitcoin', 'liquid'] },
component: StatusViewComponent component: StatusViewComponent
}, },
{ {
@ -291,11 +302,13 @@ let routes: Routes = [
children: [], children: [],
component: AddressComponent, component: AddressComponent,
data: { data: {
ogImage: true ogImage: true,
networkSpecific: true,
} }
}, },
{ {
path: 'tx', path: 'tx',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -306,6 +319,7 @@ let routes: Routes = [
}, },
{ {
path: 'block', path: 'block',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -319,6 +333,7 @@ let routes: Routes = [
}, },
{ {
path: 'block-audit', path: 'block-audit',
data: { networkSpecific: true },
children: [ children: [
{ {
path: ':id', path: ':id',
@ -336,6 +351,7 @@ let routes: Routes = [
}, },
{ {
path: 'lightning', path: 'lightning',
data: { networks: ['bitcoin'] },
loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule) loadChildren: () => import('./lightning/lightning.module').then(m => m.LightningModule)
}, },
], ],
@ -359,6 +375,7 @@ let routes: Routes = [
}, },
{ {
path: 'status', path: 'status',
data: { networks: ['bitcoin', 'liquid'] },
component: StatusViewComponent component: StatusViewComponent
}, },
{ {
@ -422,11 +439,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
children: [], children: [],
component: AddressComponent, component: AddressComponent,
data: { data: {
ogImage: true ogImage: true,
networkSpecific: true,
} }
}, },
{ {
path: 'tx', path: 'tx',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -437,6 +456,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'block', path: 'block',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -450,18 +470,22 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'assets', path: 'assets',
data: { networks: ['liquid'] },
component: AssetsNavComponent, component: AssetsNavComponent,
children: [ children: [
{ {
path: 'all', path: 'all',
data: { networks: ['liquid'] },
component: AssetsComponent, component: AssetsComponent,
}, },
{ {
path: 'asset/:id', path: 'asset/:id',
data: { networkSpecific: true },
component: AssetComponent component: AssetComponent
}, },
{ {
path: 'group/:id', path: 'group/:id',
data: { networkSpecific: true },
component: AssetGroupComponent component: AssetGroupComponent
}, },
{ {
@ -482,6 +506,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'status', path: 'status',
data: { networks: ['bitcoin', 'liquid'] },
component: StatusViewComponent component: StatusViewComponent
}, },
{ {
@ -532,11 +557,13 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
children: [], children: [],
component: AddressComponent, component: AddressComponent,
data: { data: {
ogImage: true ogImage: true,
networkSpecific: true,
} }
}, },
{ {
path: 'tx', path: 'tx',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -547,6 +574,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'block', path: 'block',
data: { networkSpecific: true },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -560,22 +588,27 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'assets', path: 'assets',
data: { networks: ['liquid'] },
component: AssetsNavComponent, component: AssetsNavComponent,
children: [ children: [
{ {
path: 'featured', path: 'featured',
data: { networkSpecific: true },
component: AssetsFeaturedComponent, component: AssetsFeaturedComponent,
}, },
{ {
path: 'all', path: 'all',
data: { networks: ['liquid'] },
component: AssetsComponent, component: AssetsComponent,
}, },
{ {
path: 'asset/:id', path: 'asset/:id',
data: { networkSpecific: true },
component: AssetComponent component: AssetComponent
}, },
{ {
path: 'group/:id', path: 'group/:id',
data: { networkSpecific: true },
component: AssetGroupComponent component: AssetGroupComponent
}, },
{ {
@ -609,6 +642,7 @@ if (browserWindowEnv && browserWindowEnv.BASE_MODULE === 'liquid') {
}, },
{ {
path: 'status', path: 'status',
data: { networks: ['bitcoin', 'liquid']},
component: StatusViewComponent component: StatusViewComponent
}, },
{ {

7
frontend/src/app/bisq/bisq.routing.module.ts
View File

@ -20,14 +20,17 @@ const routes: Routes = [
}, },
{ {
path: 'markets', path: 'markets',
data: { networks: ['bisq'] },
component: BisqDashboardComponent, component: BisqDashboardComponent,
}, },
{ {
path: 'transactions', path: 'transactions',
data: { networks: ['bisq'] },
component: BisqTransactionsComponent component: BisqTransactionsComponent
}, },
{ {
path: 'market/:pair', path: 'market/:pair',
data: { networkSpecific: true },
component: BisqMarketComponent, component: BisqMarketComponent,
}, },
{ {
@ -36,6 +39,7 @@ const routes: Routes = [
}, },
{ {
path: 'tx/:id', path: 'tx/:id',
data: { networkSpecific: true },
component: BisqTransactionComponent component: BisqTransactionComponent
}, },
{ {
@ -45,14 +49,17 @@ const routes: Routes = [
}, },
{ {
path: 'block/:id', path: 'block/:id',
data: { networkSpecific: true },
component: BisqBlockComponent, component: BisqBlockComponent,
}, },
{ {
path: 'address/:id', path: 'address/:id',
data: { networkSpecific: true },
component: BisqAddressComponent, component: BisqAddressComponent,
}, },
{ {
path: 'stats', path: 'stats',
data: { networks: ['bisq'] },
component: BisqStatsComponent, component: BisqStatsComponent,
}, },
{ {

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

@ -44,13 +44,13 @@
<app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> <app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images>
</button> </button>
<div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}"> <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '/')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['signet'] || '/signet')" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['testnet'] || '/testnet')" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> 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 ngbDropdownItem class="mainnet active" routerLink="/"><app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a> <a ngbDropdownItem class="mainnet active" [routerLink]="networkPaths['bisq'] || '/'"><app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a>
<a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + (networkPaths['liquid'] || '/')" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a>
<a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + (networkPaths['liquidtestnet'] || '/testnet')" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a>
</div> </div>
</div> </div>

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

@ -3,6 +3,7 @@ import { Env, StateService } from '../../services/state.service';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { LanguageService } from '../../services/language.service'; import { LanguageService } from '../../services/language.service';
import { EnterpriseService } from '../../services/enterprise.service'; import { EnterpriseService } from '../../services/enterprise.service';
import { NavigationService } from '../../services/navigation.service';
@Component({ @Component({
selector: 'app-bisq-master-page', selector: 'app-bisq-master-page',
@ -15,17 +16,23 @@ export class BisqMasterPageComponent implements OnInit {
env: Env; env: Env;
isMobile = window.innerWidth <= 767.98; isMobile = window.innerWidth <= 767.98;
urlLanguage: string; urlLanguage: string;
networkPaths: { [network: string]: string };
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private languageService: LanguageService, private languageService: LanguageService,
private enterpriseService: EnterpriseService, private enterpriseService: EnterpriseService,
private navigationService: NavigationService,
) { } ) { }
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(); this.urlLanguage = this.languageService.getLanguageForUrl();
this.navigationService.subnetPaths.subscribe((paths) => {
console.log('network paths updated...');
this.networkPaths = paths;
});
} }
collapse(): void { collapse(): void {

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

@ -49,13 +49,13 @@
<app-svg-images [name]="network.val === '' ? 'liquid' : network.val" width="22" height="22" viewBox="0 0 125 125" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images> <app-svg-images [name]="network.val === '' ? 'liquid' : network.val" width="22" height="22" viewBox="0 0 125 125" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
</button> </button>
<div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}"> <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/signet'" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['signet'] || '/signet')" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
<a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet</a> <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['testnet'] || '/testnet')" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> 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 + urlLanguage" ngbDropdownItem class="mainnet"><app-svg-images name="bisq" width="22" height="22" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a> <a [href]="env.BISQ_WEBSITE_URL + urlLanguage + (networkPaths['bisq'] || '')" ngbDropdownItem class="mainnet"><app-svg-images name="bisq" width="22" height="22" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a>
<a ngbDropdownItem class="liquid mr-1" [class.active]="network.val === 'liquid'" routerLink="/"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a> <a ngbDropdownItem class="liquid mr-1" [class.active]="network.val === 'liquid'" [routerLink]="networkPaths['liquid'] || '/'"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a>
<a ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" routerLink="/testnet"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a> <a ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquidtestnet'" [routerLink]="networkPaths['liquidtestnet'] || '/testnet'"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a>
</div> </div>
</div> </div>

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

@ -3,6 +3,7 @@ import { Env, StateService } from '../../services/state.service';
import { merge, Observable, of} from 'rxjs'; import { merge, Observable, of} from 'rxjs';
import { LanguageService } from '../../services/language.service'; import { LanguageService } from '../../services/language.service';
import { EnterpriseService } from '../../services/enterprise.service'; import { EnterpriseService } from '../../services/enterprise.service';
import { NavigationService } from '../../services/navigation.service';
@Component({ @Component({
selector: 'app-liquid-master-page', selector: 'app-liquid-master-page',
@ -17,11 +18,13 @@ export class LiquidMasterPageComponent implements OnInit {
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
network$: Observable<string>; network$: Observable<string>;
urlLanguage: string; urlLanguage: string;
networkPaths: { [network: string]: string };
constructor( constructor(
private stateService: StateService, private stateService: StateService,
private languageService: LanguageService, private languageService: LanguageService,
private enterpriseService: EnterpriseService, private enterpriseService: EnterpriseService,
private navigationService: NavigationService,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -29,6 +32,10 @@ export class LiquidMasterPageComponent implements OnInit {
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(); this.urlLanguage = this.languageService.getLanguageForUrl();
this.navigationService.subnetPaths.subscribe((paths) => {
console.log('network paths updated...');
this.networkPaths = paths;
});
} }
collapse(): void { collapse(): void {

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

@ -22,13 +22,13 @@
<app-svg-images [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images> <app-svg-images [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
</button> </button>
<div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}"> <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
<a ngbDropdownItem class="mainnet" routerLink="/"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a> <a ngbDropdownItem class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
<a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" routerLink="/signet"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a> <a ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet" [class.active]="network.val === 'signet'" [routerLink]="networkPaths['signet'] || '/signet'"><app-svg-images name="signet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Signet</a>
<a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" routerLink="/testnet"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet</a> <a ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet" [class.active]="network.val === 'testnet'" [routerLink]="networkPaths['testnet'] || '/testnet'"><app-svg-images name="testnet" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Testnet</a>
<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 + urlLanguage" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a> <a [href]="env.BISQ_WEBSITE_URL + urlLanguage + (networkPaths['bisq'] || '')" ngbDropdownItem *ngIf="env.BISQ_ENABLED" class="bisq"><app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Bisq</a>
<a [href]="env.LIQUID_WEBSITE_URL + urlLanguage" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + (networkPaths['liquid'] || '')" ngbDropdownItem *ngIf="env.LIQUID_ENABLED" class="liquid" [class.active]="network.val === 'liquid'"><app-svg-images name="liquid" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid</a>
<a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + '/testnet'" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a> <a [href]="env.LIQUID_WEBSITE_URL + urlLanguage + (networkPaths['liquidtestnet'] || '/testnet')" ngbDropdownItem *ngIf="env.LIQUID_TESTNET_ENABLED" class="liquidtestnet" [class.active]="network.val === 'liquid'"><app-svg-images name="liquidtestnet" width="22" height="22" viewBox="0 0 125 125" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</a>
</div> </div>
</div> </div>

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

@ -3,6 +3,7 @@ import { Env, StateService } from '../../services/state.service';
import { Observable, merge, of } from 'rxjs'; import { Observable, merge, of } from 'rxjs';
import { LanguageService } from '../../services/language.service'; import { LanguageService } from '../../services/language.service';
import { EnterpriseService } from '../../services/enterprise.service'; import { EnterpriseService } from '../../services/enterprise.service';
import { NavigationService } from '../../services/navigation.service';
@Component({ @Component({
selector: 'app-master-page', selector: 'app-master-page',
@ -18,11 +19,13 @@ export class MasterPageComponent implements OnInit {
officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE; officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
urlLanguage: string; urlLanguage: string;
subdomain = ''; subdomain = '';
networkPaths: { [network: string]: string };
constructor( constructor(
public stateService: StateService, public stateService: StateService,
private languageService: LanguageService, private languageService: LanguageService,
private enterpriseService: EnterpriseService, private enterpriseService: EnterpriseService,
private navigationService: NavigationService,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -31,6 +34,10 @@ export class MasterPageComponent implements OnInit {
this.network$ = merge(of(''), this.stateService.networkChanged$); this.network$ = merge(of(''), this.stateService.networkChanged$);
this.urlLanguage = this.languageService.getLanguageForUrl(); this.urlLanguage = this.languageService.getLanguageForUrl();
this.subdomain = this.enterpriseService.getSubdomain(); this.subdomain = this.enterpriseService.getSubdomain();
this.navigationService.subnetPaths.subscribe((paths) => {
console.log('network paths updated...');
this.networkPaths = paths;
});
} }
collapse(): void { collapse(): void {

1
frontend/src/app/docs/docs.routing.module.ts
View File

@ -39,6 +39,7 @@ if (browserWindowEnv.BASE_MODULE && (browserWindowEnv.BASE_MODULE === 'bisq' ||
}, },
{ {
path: 'faq', path: 'faq',
data: { networks: ['bitcoin'] },
component: DocsComponent component: DocsComponent
}, },
{ {

20
frontend/src/app/graphs/graphs.routing.module.ts
View File

@ -37,10 +37,12 @@ const routes: Routes = [
children: [ children: [
{ {
path: 'mining/pool/:slug', path: 'mining/pool/:slug',
data: { networks: ['bitcoin'] },
component: PoolComponent, component: PoolComponent,
}, },
{ {
path: 'mining', path: 'mining',
data: { networks: ['bitcoin'] },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -51,6 +53,7 @@ const routes: Routes = [
}, },
{ {
path: 'mempool-block/:id', path: 'mempool-block/:id',
data: { networks: ['bitcoin', 'liquid'] },
component: StartComponent, component: StartComponent,
children: [ children: [
{ {
@ -61,62 +64,77 @@ const routes: Routes = [
}, },
{ {
path: 'graphs', path: 'graphs',
data: { networks: ['bitcoin', 'liquid'] },
component: GraphsComponent, component: GraphsComponent,
children: [ children: [
{ {
path: 'mempool', path: 'mempool',
data: { networks: ['bitcoin', 'liquid'] },
component: StatisticsComponent, component: StatisticsComponent,
}, },
{ {
path: 'mining/hashrate-difficulty', path: 'mining/hashrate-difficulty',
data: { networks: ['bitcoin'] },
component: HashrateChartComponent, component: HashrateChartComponent,
}, },
{ {
path: 'mining/pools-dominance', path: 'mining/pools-dominance',
data: { networks: ['bitcoin'] },
component: HashrateChartPoolsComponent, component: HashrateChartPoolsComponent,
}, },
{ {
path: 'mining/pools', path: 'mining/pools',
data: { networks: ['bitcoin'] },
component: PoolRankingComponent, component: PoolRankingComponent,
}, },
{ {
path: 'mining/block-fees', path: 'mining/block-fees',
data: { networks: ['bitcoin'] },
component: BlockFeesGraphComponent, component: BlockFeesGraphComponent,
}, },
{ {
path: 'mining/block-rewards', path: 'mining/block-rewards',
data: { networks: ['bitcoin'] },
component: BlockRewardsGraphComponent, component: BlockRewardsGraphComponent,
}, },
{ {
path: 'mining/block-fee-rates', path: 'mining/block-fee-rates',
data: { networks: ['bitcoin'] },
component: BlockFeeRatesGraphComponent, component: BlockFeeRatesGraphComponent,
}, },
{ {
path: 'mining/block-sizes-weights', path: 'mining/block-sizes-weights',
data: { networks: ['bitcoin'] },
component: BlockSizesWeightsGraphComponent, component: BlockSizesWeightsGraphComponent,
}, },
{ {
path: 'lightning/nodes-networks', path: 'lightning/nodes-networks',
data: { networks: ['bitcoin'] },
component: NodesNetworksChartComponent, component: NodesNetworksChartComponent,
}, },
{ {
path: 'lightning/capacity', path: 'lightning/capacity',
data: { networks: ['bitcoin'] },
component: LightningStatisticsChartComponent, component: LightningStatisticsChartComponent,
}, },
{ {
path: 'lightning/nodes-per-isp', path: 'lightning/nodes-per-isp',
data: { networks: ['bitcoin'] },
component: NodesPerISPChartComponent, component: NodesPerISPChartComponent,
}, },
{ {
path: 'lightning/nodes-per-country', path: 'lightning/nodes-per-country',
data: { networks: ['bitcoin'] },
component: NodesPerCountryChartComponent, component: NodesPerCountryChartComponent,
}, },
{ {
path: 'lightning/nodes-map', path: 'lightning/nodes-map',
data: { networks: ['bitcoin'] },
component: NodesMap, component: NodesMap,
}, },
{ {
path: 'lightning/nodes-channels-map', path: 'lightning/nodes-channels-map',
data: { networks: ['bitcoin'] },
component: NodesChannelsMap, component: NodesChannelsMap,
}, },
{ {
@ -125,6 +143,7 @@ const routes: Routes = [
}, },
{ {
path: 'mining/block-prediction', path: 'mining/block-prediction',
data: { networks: ['bitcoin'] },
component: BlockPredictionGraphComponent, component: BlockPredictionGraphComponent,
}, },
] ]
@ -141,6 +160,7 @@ const routes: Routes = [
}, },
{ {
path: 'tv', path: 'tv',
data: { networks: ['bitcoin', 'liquid'] },
component: TelevisionComponent component: TelevisionComponent
}, },
]; ];

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

@ -21,10 +21,12 @@ const routes: Routes = [
}, },
{ {
path: 'node/:public_key', path: 'node/:public_key',
data: { networkSpecific: true },
component: NodeComponent, component: NodeComponent,
}, },
{ {
path: 'channel/:short_id', path: 'channel/:short_id',
data: { networkSpecific: true },
component: ChannelComponent, component: ChannelComponent,
}, },
{ {

90
frontend/src/app/services/navigation.service.ts Normal file
View File

@ -0,0 +1,90 @@
import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { StateService } from './state.service';
const networkModules = {
bitcoin: {
subnets: [
{ name: 'mainnet', path: '' },
{ name: 'testnet', path: '/testnet' },
{ name: 'signet', path: '/signet' },
],
},
liquid: {
subnets: [
{ name: 'liquid', path: '' },
{ name: 'liquidtestnet', path: '/testnet' },
],
},
bisq: {
subnets: [
{ name: 'bisq', path: '' },
],
},
};
const networks = Object.keys(networkModules);
@Injectable({
providedIn: 'root'
})
export class NavigationService {
subnetPaths = new BehaviorSubject<Record<string,string>>({});
constructor(
private stateService: StateService,
private router: Router,
) {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => this.router.routerState.snapshot.root),
).subscribe((state) => {
this.updateSubnetPaths(state);
});
}
// For each network (bitcoin/liquid/bisq), find and save the longest url path compatible with the current route
updateSubnetPaths(root: ActivatedRouteSnapshot): void {
let path = '';
const networkPaths = {};
let route = root;
// traverse the router state tree until all network paths are set, or we reach the end of the tree
while (!networks.reduce((acc, network) => acc && !!networkPaths[network], true) && route) {
// 'networkSpecific' paths may correspond to valid routes on other networks, but aren't directly compatible
// (e.g. we shouldn't link a mainnet transaction page to the same txid on testnet or liquid)
if (route.data?.networkSpecific) {
networks.forEach(network => {
if (networkPaths[network] == null) {
networkPaths[network] = path;
}
});
}
// null or empty networks list is shorthand for "compatible with every network"
if (route.data?.networks?.length) {
// if the list is non-empty, only those networks are compatible
networks.forEach(network => {
if (!route.data.networks.includes(network)) {
if (networkPaths[network] == null) {
networkPaths[network] = path;
}
}
});
}
if (route.url?.length) {
path = [path, ...route.url.map(segment => segment.path).filter(path => {
return path.length && !['testnet', 'signet'].includes(path);
})].join('/');
}
route = route.firstChild;
}
const subnetPaths = {};
Object.entries(networkModules).forEach(([key, network]) => {
network.subnets.forEach(subnet => {
subnetPaths[subnet.name] = subnet.path + (networkPaths[key] != null ? networkPaths[key] : path);
});
});
this.subnetPaths.next(subnetPaths);
}
}