Arrayed Configs support

projects/explorer/src/app/app.component.html

@@ -1,8 +1,11 @@
 <view-app
-  [extensionNavigations]="config.extension?.navigations"
+  [config]="config$ | async"
+  [configTypeOptions]="configTypeOptions"
+  [selectedConfigType]="selectedConfigType$ | async"
   [searchResult]="searchResult$ | async"
   (appSubmitSearchResult)="onSubmitSearchResult($event)"
   (appChangeInputValue)="onChangeInputValue($event)"
+  (appChangeConfigType)="onChangeConfigType($event)"
 >
   <router-outlet></router-outlet>
 </view-app>

projects/explorer/src/app/app.component.ts

@@ -13,7 +13,9 @@ import { mergeMap, map } from 'rxjs/operators';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  config: Config;
+  config$: Observable<Config | undefined>;
+  configTypeOptions?: string[];
+  selectedConfigType$?: Observable<string | undefined>;
 
   searchBoxInputValue$: BehaviorSubject<string> = new BehaviorSubject('');
 
@@ -34,7 +36,9 @@ export class AppComponent {
     public cosmosSDK: CosmosSDKService,
     private readonly configS: ConfigService,
   ) {
-    this.config = this.configS.config;
+    this.config$ = this.configS.config$;
+    this.configTypeOptions = this.configS.configs.map((config) => config.id);
+    this.selectedConfigType$ = this.config$.pipe(map((config) => config?.id));
 
     this.matchBlockHeightPattern$ = this.searchBoxInputValue$.asObservable().pipe(
       map((value) => {
@@ -43,11 +47,14 @@ export class AppComponent {
       }),
     );
 
-    this.matchAccAddressPattern$ = this.searchBoxInputValue$.asObservable().pipe(
-      map((value) => {
-        const prefix = this.config.bech32Prefix?.accAddr ? this.config.bech32Prefix?.accAddr : '';
-        const prefixCount = this.config.bech32Prefix?.accAddr.length
-          ? this.config.bech32Prefix?.accAddr.length
+    this.matchAccAddressPattern$ = combineLatest([
+      this.config$,
+      this.searchBoxInputValue$.asObservable(),
+    ]).pipe(
+      map(([config, value]) => {
+        const prefix = config?.bech32Prefix?.accAddr ? config.bech32Prefix?.accAddr : '';
+        const prefixCount = config?.bech32Prefix?.accAddr.length
+          ? config.bech32Prefix?.accAddr.length
           : 0;
         const regExp = /^[0-9a-z]{39}$/;
         return regExp.test(value.slice(prefixCount)) && value.substring(0, prefixCount) === prefix;
@@ -193,4 +200,8 @@ export class AppComponent {
   onChangeInputValue(value: string) {
     this.searchBoxInputValue$.next(value);
   }
+
+  onChangeConfigType(value: string) {
+    this.configS.setCurrentConfig(value);
+  }
 }

projects/explorer/src/app/models/config.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export type Config = {
   id: string;
@@ -43,10 +44,19 @@ declare const configs: Config[];
   providedIn: 'root',
 })
 export class ConfigService {
-  config: Config;
   configs: Config[];
+  config$: Observable<Config | undefined>;
+  configSubject$: BehaviorSubject<Config | undefined>;
   constructor() {
     this.configs = configs;
-    this.config = configs[Math.floor(Math.random() * configs.length)];
+    this.configSubject$ = new BehaviorSubject<Config | undefined>(undefined);
+    const randomConfig = configs[Math.floor(Math.random() * configs.length)];
+    this.configSubject$.next(randomConfig);
+    this.config$ = this.configSubject$.asObservable();
+  }
+
+  async setCurrentConfig(configID: string) {
+    const selectedConfig = this.configs.find((config) => config.id == configID);
+    this.configSubject$.next(selectedConfig);
   }
 }

projects/explorer/src/app/models/cosmos-sdk.service.ts

@@ -8,33 +8,38 @@ import { first, map } from 'rxjs/operators';
   providedIn: 'root',
 })
 export class CosmosSDKService {
-  restURL$: BehaviorSubject<string>;
-  websocketURL$: BehaviorSubject<string>;
-  chainID$: BehaviorSubject<string>;
+  restURL$: Observable<string>;
+  websocketURL$: Observable<string>;
+  chainID$: Observable<string>;
   sdk$: Observable<{ rest: cosmosclient.CosmosSDK; websocket: cosmosclient.CosmosSDK }>;
 
-  constructor(private readonly config: ConfigService) {
-    if (
-      this.config.config.bech32Prefix?.accAddr &&
-      this.config.config.bech32Prefix?.accPub &&
-      this.config.config.bech32Prefix?.valAddr &&
-      this.config.config.bech32Prefix?.valAddr &&
-      this.config.config.bech32Prefix?.consAddr &&
-      this.config.config.bech32Prefix?.consAddr
-    ) {
-      cosmosclient.config.setBech32Prefix({
-        accAddr: this.config.config.bech32Prefix?.accAddr,
-        accPub: this.config.config.bech32Prefix?.accPub,
-        valAddr: this.config.config.bech32Prefix?.valAddr,
-        valPub: this.config.config.bech32Prefix?.valAddr,
-        consAddr: this.config.config.bech32Prefix?.consAddr,
-        consPub: this.config.config.bech32Prefix?.consAddr,
-      });
-    }
+  constructor(private readonly configS: ConfigService) {
+    this.configS.config$.pipe(
+      map((config) => {
+        if (
+          config &&
+          config.bech32Prefix?.accAddr &&
+          config.bech32Prefix?.accPub &&
+          config.bech32Prefix?.valAddr &&
+          config.bech32Prefix?.valAddr &&
+          config.bech32Prefix?.consAddr &&
+          config.bech32Prefix?.consAddr
+        ) {
+          cosmosclient.config.setBech32Prefix({
+            accAddr: config.bech32Prefix?.accAddr,
+            accPub: config.bech32Prefix?.accPub,
+            valAddr: config.bech32Prefix?.valAddr,
+            valPub: config.bech32Prefix?.valAddr,
+            consAddr: config.bech32Prefix?.consAddr,
+            consPub: config.bech32Prefix?.consAddr,
+          });
+        }
+      }),
+    );
 
-    this.restURL$ = new BehaviorSubject(this.config.config.restURL);
-    this.websocketURL$ = new BehaviorSubject(this.config.config.websocketURL);
-    this.chainID$ = new BehaviorSubject(this.config.config.chainID);
+    this.restURL$ = this.configS.config$.pipe(map((config) => config?.restURL!));
+    this.websocketURL$ = this.configS.config$.pipe(map((config) => config?.websocketURL!));
+    this.chainID$ = this.configS.config$.pipe(map((config) => config?.chainID!));
     this.sdk$ = combineLatest([this.restURL$, this.websocketURL$, this.chainID$]).pipe(
       map(([restURL, websocketURL, chainID]) => ({
         rest: new cosmosclient.CosmosSDK(restURL, chainID),

projects/explorer/src/app/models/monitor.service.ts

@@ -1,7 +1,8 @@
 import { ConfigService } from './config.service';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import { Observable } from 'rxjs';
+import { mergeMap } from 'rxjs/operators';
 
 export type Data = {
   before_date: string;
@@ -16,13 +17,17 @@ export class MonitorService {
   constructor(private readonly http: HttpClient, private readonly config: ConfigService) {}
 
   list(year: number, month: number, day: number, count: number): Observable<Data[]> {
-    return this.http.get<Data[]>(`${this.config.config.extension?.monitor?.monitorURL}/list`, {
-      params: {
-        start_year: year,
-        start_month: month,
-        start_day: day,
-        count: count,
-      },
-    });
+    return this.config.config$.pipe(
+      mergeMap((config) =>
+        this.http.get<Data[]>(`${config?.extension?.monitor?.monitorURL}/list`, {
+          params: {
+            start_year: year,
+            start_month: month,
+            start_day: day,
+            count: count,
+          },
+        }),
+      ),
+    );
   }
 }

projects/explorer/src/app/pages/home/home.component.ts

@@ -21,6 +21,7 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.nodeInfo$ = combined$.pipe(
       mergeMap((sdk) => rest.tendermint.getNodeInfo(sdk.rest).then((res) => res.data)),
     );
+    this.nodeInfo$.subscribe((a) => console.log(a));
 
     this.syncing$ = combined$.pipe(
       mergeMap((sdk) =>

projects/explorer/src/app/pages/home/txs/txs.component.html

@@ -1,7 +1,7 @@
 <view-txs
- [txs]="txs$ | async"
- [txTypeOptions]="txTypeOptions"
- [selectedTxType]="selectedTxType$ | async"
- (selectedTxTypeChanged)="appSelectedTxTypeChanged($event)"
+  [txs]="txs$ | async"
+  [txTypeOptions]="txTypeOptions$ | async"
+  [selectedTxType]="selectedTxType$ | async"
+  (selectedTxTypeChanged)="appSelectedTxTypeChanged($event)"
 >
 </view-txs>

projects/explorer/src/app/pages/home/txs/txs.component.ts

@@ -15,7 +15,7 @@ import { filter, map, mergeMap, switchMap } from 'rxjs/operators';
 export class TxsComponent implements OnInit {
   pollingInterval = 30 * 60;
   txs$?: Observable<InlineResponse20075TxResponse[] | undefined>;
-  txTypeOptions?: string[];
+  txTypeOptions$?: Observable<string[] | undefined>;
   pageSize$: BehaviorSubject<number> = new BehaviorSubject(20);
   pageNumber$: BehaviorSubject<number> = new BehaviorSubject(1);
   txsTotalCount$: Observable<bigint>;
@@ -27,7 +27,9 @@ export class TxsComponent implements OnInit {
     private cosmosSDK: CosmosSDKService,
     private configService: ConfigService,
   ) {
-    this.txTypeOptions = this.configService.config.extension?.messageModules;
+    this.txTypeOptions$ = this.configService.config$.pipe(
+      map((config) => config?.extension?.messageModules),
+    );
     const timer$ = timer(0, this.pollingInterval * 1000);
     const sdk$ = timer$.pipe(mergeMap((_) => this.cosmosSDK.sdk$));
 

projects/explorer/src/app/pages/txs/txs.component.html

@@ -1,4 +1,11 @@
-<view-txs [txs]="txs$ | async" [txTypeOptions]="txTypeOptions" [selectedTxType]="selectedTxType$ | async"
-  [pageInfo]="paginationInfo$ | async" [pageLength]="pageLength$ | async" [pageSizeOptions]="pageSizeOptions"
-  (selectedTxTypeChanged)="appSelectedTxTypeChanged($event)" (paginationChange)="appPaginationChanged($event)">
-</view-txs>
+<view-txs
+  [txs]="txs$ | async"
+  [txTypeOptions]="txTypeOptions$ | async"
+  [selectedTxType]="selectedTxType$ | async"
+  [pageInfo]="paginationInfo$ | async"
+  [pageLength]="pageLength$ | async"
+  [pageSizeOptions]="pageSizeOptions"
+  (selectedTxTypeChanged)="appSelectedTxTypeChanged($event)"
+  (paginationChange)="appPaginationChanged($event)"
+>
+</view-txs>

projects/explorer/src/app/pages/txs/txs.component.ts

@@ -21,7 +21,7 @@ export type PaginationInfo = {
 export class TxsComponent implements OnInit {
   pollingInterval = 30;
   pageSizeOptions = [5, 10, 20, 50, 100];
-  txTypeOptions?: string[];
+  txTypeOptions$?: Observable<string[] | undefined>;
 
   defaultPageSize = this.pageSizeOptions[1];
   defaultPageNumber = 1;
@@ -41,13 +41,15 @@ export class TxsComponent implements OnInit {
     private cosmosSDK: CosmosSDKService,
     private configService: ConfigService,
   ) {
-    this.txTypeOptions = this.configService.config.extension?.messageModules;
+    this.txTypeOptions$ = this.configService.config$.pipe(
+      map((config) => config?.extension?.messageModules),
+    );
     const timer$ = timer(0, this.pollingInterval * 1000);
     const sdk$ = timer$.pipe(mergeMap((_) => this.cosmosSDK.sdk$));
 
-    this.selectedTxType$ = this.route.queryParams.pipe(
-      map((params) =>
-        this.txTypeOptions?.includes(params.txType) ? params.txType : this.defaultTxType,
+    this.selectedTxType$ = combineLatest([this.txTypeOptions$, this.route.queryParams]).pipe(
+      map(([options, params]) =>
+        options?.includes(params.txType) ? params.txType : this.defaultTxType,
       ),
     );
 

projects/explorer/src/app/views/app.component.html

@@ -12,6 +12,15 @@
       <h1 class="align-middle">Telescope</h1>
     </mat-toolbar>
 
+    <mat-form-field appearance="fill" class="w-full">
+      <mat-label>Change Node</mat-label>
+      <mat-select [(value)]="selectedConfigType" (valueChange)="onChangeConfigType($event)">
+        <mat-option *ngFor="let configType of configTypeOptions" [value]="configType">
+          {{ configType }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <mat-nav-list>
       <mat-list-item routerLink="/">
         <mat-icon class="mr-2" color="primary">other_houses</mat-icon>Home
@@ -28,7 +37,7 @@ <h1 class="align-middle">Telescope</h1>
       <mat-list-item routerLink="/cosmos/gov/proposals">
         <mat-icon class="mr-2" color="primary">message</mat-icon>Votes
       </mat-list-item>
-      <ng-template ngFor let-extension [ngForOf]="extensionNavigations">
+      <ng-template ngFor let-extension [ngForOf]="config?.extension?.navigations">
         <ng-container *ngIf="extension?.name && extension?.link">
           <a mat-list-item [href]="extension.link">
             <mat-icon class="mr-2" color="primary"> {{ extension.icon }}</mat-icon>

projects/explorer/src/app/views/app.component.ts

@@ -1,3 +1,4 @@
+import { Config } from '../models/config.service';
 import { SearchResult } from './toolbar/toolbar.component';
 import { Component, OnInit, ViewChild, Input, Output, EventEmitter, NgZone } from '@angular/core';
 import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav';
@@ -11,17 +12,26 @@ import { BehaviorSubject, combineLatest } from 'rxjs';
 })
 export class AppComponent implements OnInit {
   @Input()
-  extensionNavigations?: { name: string; link: string; icon: string }[];
+  config?: Config | null;
 
   @Input()
   searchResult?: SearchResult | null;
 
+  @Input()
+  configTypeOptions?: string[];
+
+  @Input()
+  selectedConfigType?: string | null;
+
   @Output()
   appSubmitSearchResult: EventEmitter<SearchResult>;
 
   @Output()
   appChangeInputValue: EventEmitter<string>;
 
+  @Output()
+  appChangeConfigType: EventEmitter<string>;
+
   @ViewChild('drawer')
   sidenav!: MatSidenav;
 
@@ -32,6 +42,7 @@ export class AppComponent implements OnInit {
   constructor(private router: Router, private ngZone: NgZone) {
     this.appSubmitSearchResult = new EventEmitter();
     this.appChangeInputValue = new EventEmitter();
+    this.appChangeConfigType = new EventEmitter();
 
     window.onresize = (_) => {
       this.ngZone.run(() => {
@@ -67,4 +78,8 @@ export class AppComponent implements OnInit {
   onChangeInputValue(inputValue: string) {
     this.appChangeInputValue.emit(inputValue);
   }
+
+  onChangeConfigType(selectedConfigType: string): void {
+    this.appChangeConfigType.emit(selectedConfigType);
+  }
 }

projects/portal/src/app/app.component.html

@@ -1,7 +1,11 @@
 <view-app
+  [config]="config$ | async"
+  [configTypeOptions]="configTypeOptions"
+  [selectedConfigType]="selectedConfigType$ | async"
   [searchResult]="searchResult$ | async"
   (appSubmitSearchResult)="onSubmitSearchResult($event)"
   (appChangeInputValue)="onChangeInputValue($event)"
+  (appChangeConfigType)="onChangeConfigType($event)"
 >
   <router-outlet></router-outlet>
 </view-app>