Modified connection dialog. Added simple bottom bar with disclaimer.

polkascan · Aug 7, 2023 · 58de68a · 58de68a
1 parent 7567906
commit 58de68a
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 73 deletions.
diff --git a/src/app/app-config.ts b/src/app/app-config.ts
@@ -19,17 +19,18 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
-type NetworkConfig = {
+export type SubsquidConfig = {
+  archiveUrl: string,
+  explorerUrl: string;
+  giantSquidExplorerUrl: string;
+  giantSquidMainUrl: string;
+}
+
+export type NetworkConfig = {
   [network: string]: {
     substrateRpcUrlArray: string[];
     explorerWsUrlArray: string[];
-    subsquid: {
-      archiveUrl: string,
-      explorerUrl: string;
-      giantSquidExplorerUrl: string;
-      giantSquidMainUrl: string;
-      balancesUrl: string;
-    };
+    subsquid: SubsquidConfig;
     coingecko: {
       coinId: string;
     };
@@ -40,7 +41,9 @@ type NetworkConfig = {
 export class AppConfig {
   networks: NetworkConfig;
 
-  constructor(private readonly http: HttpClient) {}
+  constructor(private readonly http: HttpClient) {
+  }
+
   public load(): Promise<void> {
     return this.http
       .get<NetworkConfig>('assets/config.json')

diff --git a/src/app/components/ps-connection-dialog/ps-connection-dialog.component.html b/src/app/components/ps-connection-dialog/ps-connection-dialog.component.html
@@ -16,75 +16,124 @@
   ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<h1 mat-dialog-title>{{vars.network|async}} connection</h1>
+<h1 mat-dialog-title>{{vars.network|async}} connections</h1>
 <div mat-dialog-content>
   <p *ngIf="(ns.online | async) === false" class="ps-connection-dialog--browser-offline">Your browser is offline</p>
   <p>Select or enter connection endpoints:</p>
-    <form [formGroup]="substrateRpcUrlForm" (ngSubmit)="submitSubstrateRpcUrl()">
-      <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
-        <mat-label>{{vars.network|async}} node URL</mat-label>
-        <input type="text"
-               placeholder="Enter URL"
-               aria-label="URL"
-               matInput
-               formControlName="url"
-               [matAutocomplete]="substrateUrlOptionsAuto">
-        <mat-autocomplete #substrateUrlOptionsAuto="matAutocomplete" (optionSelected)="submitSubstrateRpcUrl()">
-          <mat-option *ngFor="let option of pa.substrateRpcUrls|async" [value]="option">
-            {{option}}
-          </mat-option>
-        </mat-autocomplete>
-        <span class="mat-select-arrow" style="position: absolute; right: 0; top: 10px;"></span>
-      </mat-form-field>
-      <button mat-stroked-button color="primary" type="submit" style="margin-right: 10px;" [disabled]="(ns.online | async) === false">Connect</button>
-      <ng-container *ngIf="(ns.online | async) === true">
-        <ng-container [ngSwitch]="pa.substrateRpcRegistered|async">
-          <ng-container *ngSwitchCase="true">
-            <ng-container [ngSwitch]="pa.substrateRpcConnected|async">
-              <span *ngSwitchCase="true" style="color: green">(connected)</span>
-              <span *ngSwitchCase="false" style="font-style: italic">(connecting)</span>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngSwitchCase="false">
-            <span style="color: red;">(error)</span>
+  <form [formGroup]="substrateRpcUrlForm" (ngSubmit)="submitSubstrateRpcUrl()">
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Node URL</mat-label>
+      <input type="text"
+             placeholder="Enter URL"
+             aria-label="URL"
+             matInput
+             formControlName="url"
+             [matAutocomplete]="substrateUrlOptionsAuto">
+      <mat-autocomplete #substrateUrlOptionsAuto="matAutocomplete" (optionSelected)="submitSubstrateRpcUrl()">
+        <mat-option *ngFor="let option of pa.substrateRpcUrls|async" [value]="option">
+          {{option}}
+        </mat-option>
+      </mat-autocomplete>
+      <span class="mat-select-arrow" style="position: absolute; right: 0; top: 10px;"></span>
+    </mat-form-field>
+    <button mat-stroked-button color="primary" type="submit" style="margin-right: 10px;"
+            [disabled]="(ns.online | async) === false">Connect
+    </button>
+    <ng-container *ngIf="(ns.online | async) === true">
+      <ng-container [ngSwitch]="pa.substrateRpcRegistered|async">
+        <ng-container *ngSwitchCase="true">
+          <ng-container [ngSwitch]="pa.substrateRpcConnected|async">
+            <span *ngSwitchCase="true" style="color: green">(connected)</span>
+            <span *ngSwitchCase="false" style="font-style: italic">(connecting)</span>
           </ng-container>
         </ng-container>
+        <ng-container *ngSwitchCase="false">
+          <span style="color: red;">(error)</span>
+        </ng-container>
       </ng-container>
-    </form>
+    </ng-container>
+  </form>
 
-    <form *ngIf="pa.availableAdapters[ns.currentNetwork.value].explorerApi" [formGroup]="explorerWsUrlForm" (ngSubmit)="submitExplorerWsUrl()">
-      <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
-        <mat-label>{{vars.network|async}} Polkascan URL</mat-label>
-        <input type="text"
-               placeholder="Enter URL"
-               aria-label="URL"
-               matInput
-               formControlName="url"
-               [matAutocomplete]="explorerWsUrlOptionsAuto">
-        <mat-autocomplete #explorerWsUrlOptionsAuto="matAutocomplete" (optionSelected)="submitExplorerWsUrl()">
-          <mat-option *ngFor="let option of pa.explorerWsUrls|async" [value]="option">
-            {{option}}
-          </mat-option>
-        </mat-autocomplete>
-        <span class="mat-select-arrow" style="position: absolute; right: 0; top: 10px;"></span>
-      </mat-form-field>
-      <button mat-stroked-button color="primary" type="submit" style="margin-right: 10px;" [disabled]="(ns.online | async) === false">Connect</button>
-      <ng-container *ngIf="(ns.online | async) === true">
-        <ng-container [ngSwitch]="pa.explorerRegistered|async">
-          <ng-container *ngSwitchCase="true">
-            <ng-container [ngSwitch]="pa.explorerWsConnected|async">
-              <span *ngSwitchCase="true" style="color: green">(connected)</span>
-              <span *ngSwitchCase="false" style="font-style: italic">(connecting)</span>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngSwitchCase="false">
-            <span style="color: red;">(error)</span>
+  <form *ngIf="pa.availableAdapters[ns.currentNetwork.value].explorerApi" [formGroup]="explorerWsUrlForm"
+        (ngSubmit)="submitExplorerWsUrl()">
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Polkascan URL</mat-label>
+      <input type="text"
+             placeholder="Enter URL"
+             aria-label="URL"
+             matInput
+             formControlName="url"
+             [matAutocomplete]="explorerWsUrlOptionsAuto">
+      <mat-autocomplete #explorerWsUrlOptionsAuto="matAutocomplete" (optionSelected)="submitExplorerWsUrl()">
+        <mat-option *ngFor="let option of pa.explorerWsUrls|async" [value]="option">
+          {{option}}
+        </mat-option>
+      </mat-autocomplete>
+      <span class="mat-select-arrow" style="position: absolute; right: 0; top: 10px;"></span>
+    </mat-form-field>
+    <button mat-stroked-button color="primary" type="submit" style="margin-right: 10px;"
+            [disabled]="(ns.online | async) === false">Connect
+    </button>
+    <ng-container *ngIf="(ns.online | async) === true">
+      <ng-container [ngSwitch]="pa.explorerRegistered|async">
+        <ng-container *ngSwitchCase="true">
+          <ng-container [ngSwitch]="pa.explorerWsConnected|async">
+            <span *ngSwitchCase="true" style="color: green">(connected)</span>
+            <span *ngSwitchCase="false" style="font-style: italic">(connecting)</span>
           </ng-container>
         </ng-container>
+        <ng-container *ngSwitchCase="false">
+          <span style="color: red;">(error)</span>
+        </ng-container>
       </ng-container>
+    </ng-container>
+
+    <span style="margin-left: 10px; color: red; white-space: nowrap"
+          *ngIf="(pa.explorerDataErrors|async)?.length as dataErrorCount">{{ dataErrorCount }} errors</span>
+  </form>
+
+  <form *ngIf="(subsquidUrls | async) as urls">
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Subsquid Archive URL</mat-label>
+      <input disabled
+             type="text"
+             placeholder="Not set"
+             aria-label="URL"
+             matInput
+             [value]="urls.archiveUrl">
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Subsquid Explorer URL</mat-label>
+      <input disabled
+             type="text"
+             placeholder="Not set"
+             aria-label="URL"
+             matInput
+             [value]="urls.explorerUrl">
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Subsquid Giant Squid Explorer URL</mat-label>
+      <input disabled
+             type="text"
+             placeholder="Not set"
+             aria-label="URL"
+             matInput
+             [value]="urls.giantSquidExplorerUrl">
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
+      <mat-label>Subsquid Giant Squid Main URL</mat-label>
+      <input disabled
+             type="text"
+             placeholder="Not set"
+             aria-label="URL"
+             matInput
+             [value]="urls.giantSquidMainUrl">
+    </mat-form-field>
+  </form>
 
-      <span style="margin-left: 10px; color: red; white-space: nowrap" *ngIf="(pa.explorerDataErrors|async)?.length as dataErrorCount">{{ dataErrorCount }} errors</span>
-    </form>
 </div>
 <div mat-dialog-actions>
   <button mat-button mat-dialog-close cdkFocusInitial>Close</button>

diff --git a/src/app/components/ps-connection-dialog/ps-connection-dialog.component.ts b/src/app/components/ps-connection-dialog/ps-connection-dialog.component.ts
@@ -24,12 +24,13 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { combineLatestWith, map, Observable, Subject, take } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 import { PolkadaptService } from '../../services/polkadapt.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { VariablesService } from '../../services/variables.service';
 import { NetworkService } from '../../services/network.service';
+import { AppConfig, SubsquidConfig } from '../../app-config';
 
 @Component({
   templateUrl: 'ps-connection-dialog.component.html',
@@ -46,13 +47,16 @@ export class PsConnectionDialogComponent implements OnInit, OnDestroy {
     url: new FormControl('')
   });
 
+  subsquidUrls: Observable<SubsquidConfig | null> | undefined;
+
   private destroyer = new Subject<void>();
 
   constructor(
     public dialogRef: MatDialogRef<PsConnectionDialogComponent>,
     public pa: PolkadaptService,
     public ns: NetworkService,
-    public vars: VariablesService
+    public vars: VariablesService,
+    private config: AppConfig
   ) {
   }
 
@@ -68,6 +72,17 @@ export class PsConnectionDialogComponent implements OnInit, OnDestroy {
         this.explorerWsUrlForm.setValue({url});
       }
     });
+
+    this.subsquidUrls = this.pa.subsquidRegistered.pipe(
+      combineLatestWith(this.ns.currentNetwork),
+      map(([registered, network]) => {
+        if (registered) {
+          const config = this.config?.networks[network];
+          return config.subsquid;
+        }
+        return null;
+      })
+    )
   }
 
   ngOnDestroy(): void {

diff --git a/src/app/pages/network/network.component.html b/src/app/pages/network/network.component.html
@@ -22,4 +22,11 @@
     <explorer-menu></explorer-menu>
     <router-outlet></router-outlet>
   </div>
+  <div class="network-explorer-bottom-bar" *ngIf="showBottomBar">
+    <div><small *ngIf="subsquidRegistered | async">Provided by <a href="https://www.subsquid.io/" target="_blank">Subsquid</a>.</small></div>
+    <div><small>Polkascan Foundation offers no warranties or guarantees concerning the accuracy of the data provided.</small></div>
+    <div class="network-explorer-close-bottom-bar">
+      <button mat-icon-button (click)="showBottomBar = false"><mat-icon>close</mat-icon></button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/pages/network/network.component.scss b/src/app/pages/network/network.component.scss
@@ -17,5 +17,20 @@
  */
 
 .network-explorer-container {
-  padding-bottom: 100px;
+  padding-bottom: 120px;
+}
+
+.network-explorer-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 16px;
+  background: var(--ps-top-bar-bg-color);
+  color: var(--ps-top-bar-text-color);
+  padding: 0 8px;
 }
diff --git a/src/app/pages/network/network.component.ts b/src/app/pages/network/network.component.ts
@@ -20,8 +20,10 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
 import { ActivatedRoute } from '@angular/router';
 import { distinctUntilChanged, filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import { NetworkService } from '../../services/network.service';
-import { Subject } from 'rxjs';
+import { combineLatestWith, Observable, Subject } from 'rxjs';
 import { VariablesService } from '../../services/variables.service';
+import { PolkadaptService } from '../../services/polkadapt.service';
+import { AppConfig } from '../../app-config';
 
 @Component({
   selector: 'app-network',
@@ -30,11 +32,17 @@ import { VariablesService } from '../../services/variables.service';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NetworkComponent implements OnInit, OnDestroy {
+  subsquidRegistered: Observable<boolean>;
+  showBottomBar = true;
+
   private destroyer = new Subject<void>();
 
   constructor(private route: ActivatedRoute,
               private ns: NetworkService,
-              public vars: VariablesService) {
+              private pa: PolkadaptService,
+              public vars: VariablesService
+  ) {
+    this.subsquidRegistered = this.pa.subsquidRegistered.asObservable();
   }
 
   ngOnInit(): void {