Merge branch 'develop'

# Conflicts:
#	polkadapt

src/app/app-config.ts

@@ -20,10 +20,10 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 export type SubsquidConfig = {
-  archiveUrl: string,
-  explorerUrl: string;
   giantSquidExplorerUrl: string;
   giantSquidMainUrl: string;
+  giantSquidStatsUrl: string;
+  metaDataUrl: string;
 }
 
 export type NetworkSpecs = {

src/app/app.component.scss

@@ -15,3 +15,7 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+
+app-root {
+  height: 100%;
+}

src/app/components/explorer-menu/explorer-menu.component.scss

@@ -17,14 +17,18 @@
  */
 
 
-.explorer-menu__container {
+body .explorer-menu__container {
   height: 50px;
   display: flex;
+  margin: 0 -16px;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  border-bottom: solid 1px #aaaaaa;
-  background: #fff;
+  background: transparent;
+
+  .mat-mdc-button {
+    --mdc-text-button-label-text-color: #fff;
+  }
 }
 
 .explorer-menu__network-name {

src/app/components/ps-connection-dialog/ps-connection-dialog.component.html

@@ -94,43 +94,33 @@ <h1 *ngIf="vars.network|async as network" mat-dialog-title>{{networkConfig[netwo
 
   <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>
+      <mat-label>Subsquid Giant Squid Explorer URL</mat-label>
       <input disabled
              type="text"
              placeholder="Not set"
              aria-label="URL"
              matInput
-             [value]="urls.explorerUrl">
+             [value]="urls.giantSquidExplorerUrl">
     </mat-form-field>
 
     <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
-      <mat-label>Subsquid Giant Squid Explorer URL</mat-label>
+      <mat-label>Subsquid Giant Squid Main URL</mat-label>
       <input disabled
              type="text"
              placeholder="Not set"
              aria-label="URL"
              matInput
-             [value]="urls.giantSquidExplorerUrl">
+             [value]="urls.giantSquidMainUrl">
     </mat-form-field>
 
     <mat-form-field appearance="fill" style="width: 300px; margin-right: 10px;">
-      <mat-label>Subsquid Giant Squid Main URL</mat-label>
+      <mat-label>Subsquid Giant Squid Stats URL</mat-label>
       <input disabled
              type="text"
              placeholder="Not set"
              aria-label="URL"
              matInput
-             [value]="urls.giantSquidMainUrl">
+             [value]="urls.giantSquidStatsUrl">
     </mat-form-field>
   </form>
 

src/app/components/ps-top-bar/ps-top-bar.component.html

@@ -26,15 +26,51 @@
     </svg>
   </a>
 
-  <div class="ps-top-bar-block-nr" *ngIf="vars.blockNumber|async as blockNumber">
-    <button mat-button [routerLink]="'./block/' + blockNumber">
-      <i class="fas fa-cube"></i> {{blockNumber}}
-    </button>
-  </div>
-
-  <div class="ps-top-bar-block-nr" *ngIf="vars.price|async as price">
-    <button mat-button>{{vars.currency | async}} {{price}}</button>
-  </div>
+  <form [formGroup]="searchForm" (ngSubmit)="submitSearch()" class="ps-top-bar-search-form">
+    <mat-form-field class="ps-top-bar-search">
+      <input matInput formControlName="search"
+             placeholder="Search for account, block, extrinsic" (blur)="resetSearchIfEmpty()" (focus)="showPreviewIfMissing()">
+      <button *ngIf="searchForm.controls.search.valueChanges|async" class="ps-top-bar-search-clear" matSuffix mat-icon-button type="button" aria-label="Clear" (click)="clearSearch()">
+        <mat-icon>close</mat-icon>
+      </button>
+      <button mat-icon-button matSuffix type="submit" [attr.aria-label]="'Search'">
+        <mat-icon *ngIf="(searching|async) === false">search</mat-icon>
+        <mat-spinner *ngIf="searching|async" diameter="24"></mat-spinner>
+      </button>
+    </mat-form-field>
+    <ng-container *ngIf="showPreview|async">
+      <ng-container *ngIf="searchPreviewItems|async as items">
+        <div class="ps-top-bar-search-preview" *ngIf="items.length > 0">
+          <ng-container *ngFor="let item of items">
+            <div *ngIf="item.type === 'account-other-network'">
+              This account belongs to another blockchain. Please choose the correct one with the <button mat-button [matMenuTriggerFor]="networkMenu">network selector</button> tool.
+            </div>
+            <button mat-menu-item *ngIf="item.type !== 'account-other-network'" [routerLink]="'/' + (vars.network|async) + '/' + item.type + '/' + item.value" class="ps-top-bar-search-preview-item">
+              <span class="ps-top-bar-search-preview-label" [ngSwitch]="item.type">
+                <ng-container *ngSwitchCase="'block'">
+                  <img src="/assets/polkadot-icons/block-number.svg" width="18" height="18" title="Finalized Blocks">
+                  Block
+                </ng-container>
+                <ng-container *ngSwitchCase="'extrinsic'">
+                  <img src="/assets/polkadot-icons/transaction.svg" width="18" height="18" title="Finalized Blocks">
+                  Extrinsic
+                </ng-container>
+                <ng-container *ngSwitchCase="'event'">
+                  <img src="/assets/polkadot-icons/events.svg" width="18" height="18" title="Finalized Blocks">
+                  Event
+                </ng-container>
+                <ng-container *ngSwitchCase="'account'">
+                  <img src="/assets/polkadot-icons/wallet.svg" width="18" height="18" title="Finalized Blocks">
+                  Account
+                </ng-container>
+              </span>
+              <span class="ps-top-bar-search-preview-value">{{ item.display || item.value }}</span>
+            </button>
+          </ng-container>
+        </div>
+      </ng-container>
+    </ng-container>
+  </form>
 
   <button *ngIf="vars.network|async as network" class="ps-top-bar-network-selector ps-top-bar-network-option ps-top-bar-network-option--{{network}}" mat-button [matMenuTriggerFor]="networkMenu">
     <span *ngIf="networkConfig[network].image" class="ps-top-bar-network-icon" [style]=" 'background-image: url(\'../../../assets/chains/' + networkConfig[network].image + '\')'"></span>

src/app/components/ps-top-bar/ps-top-bar.component.scss

@@ -29,9 +29,10 @@ ps-top-bar {
 
 .ps-topbar-container {
   display: flex;
-  height: 50px;
+  height: 56px;
   align-items: center;
   justify-content: flex-end;
+  padding: 0;
 }
 
 .ps-top-bar-brand {
@@ -74,6 +75,17 @@ ps-top-bar {
   animation: breathe 1s infinite;
 }
 
+.ps-topbar-container .ps-top-bar-network-selector.mat-mdc-button {
+  border: solid 1px rgba(255,255,255,.5);
+  color: #fff;
+  height: 40px;
+
+  &:hover {
+    background: white;
+    color: #000;
+  }
+}
+
 .ps-top-bar-network-icon {
   background-size: contain;
   background-repeat: no-repeat;
@@ -95,3 +107,93 @@ ps-top-bar {
     fill: white;
   }
 }
+
+ps-top-bar .ps-topbar-container {
+  .ps-top-bar-search-form {
+    position: relative;
+    margin: 0 20px;
+    flex: 0 1 50%;
+    color: #000;
+
+    .mat-mdc-form-field {
+      width: 100%;
+
+      .mat-mdc-form-field-infix {
+        padding: 0;
+        min-height: 40px;
+      }
+
+      .mat-mdc-input-element {
+        min-height: 40px;
+      }
+
+      .mat-mdc-text-field-wrapper {
+        border-radius: 4px;
+      }
+
+      .mat-mdc-progress-spinner {
+        --mdc-circular-progress-active-indicator-color: #f354a1;
+      }
+
+      &:not(.mat-focused, .ng-dirty) {
+        .mdc-text-field {
+          background: #f354a1;
+          color: #fff;
+
+          ::placeholder {
+            color: #fff;
+          }
+        }
+
+        .mat-mdc-progress-spinner {
+          --mdc-circular-progress-active-indicator-color: white;
+        }
+      }
+    }
+
+    .mdc-line-ripple:after {
+      border-color: #f354a1;
+    }
+
+    .mat-mdc-form-field-icon-suffix {
+      margin: -4px 0;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+      position: absolute;
+      z-index: 1;
+      top: 100%;
+    }
+
+    .ps-top-bar-search-clear .mat-icon {
+      font-size: 18px;
+      line-height: 24px;
+    }
+  }
+}
+
+.ps-top-bar-search-preview {
+  position: absolute;
+  z-index: 10000;
+  background: #eee;
+  color: #222;
+  right: 0;
+  left: 0;
+  border-radius: 4px;
+}
+
+.ps-top-bar-search-preview-item {
+  display: block;
+  padding: 4px 0;
+}
+
+.ps-top-bar-search-preview-label {
+  margin-right: 8px;
+  font-size: 11px;
+  text-transform: uppercase;
+
+  img {
+    vertical-align: bottom;
+    margin-right: 3px;
+  }
+}