Update UI

package.json

@@ -23,9 +23,7 @@
     "@angular/platform-browser": "~15.0.4",
     "@angular/platform-browser-dynamic": "~15.0.4",
     "@angular/router": "~15.0.4",
-    "@polkadapt/coingecko": "file:polkadapt/dist/coingecko",
     "@polkadapt/core": "file:polkadapt/dist/core",
-    "@polkadapt/polkascan-explorer": "file:polkadapt/dist/polkascan-explorer",
     "@polkadapt/substrate-rpc": "file:polkadapt/dist/substrate-rpc",
     "@polkadot/api": "9.10.3",
     "@polkadot/ui-shared": "2.9.14",
@@ -35,6 +33,7 @@
     "highcharts": "^10.3.2",
     "highcharts-angular": "^3.0.0",
     "jdenticon": "^3.2.0",
+    "polkadapt": "file:polkadapt",
     "process": "^0.11.10",
     "rxjs": "~7.5.0",
     "stream": "npm:stream-browserify@^3.0.0",
@@ -50,6 +49,8 @@
     "@angular-eslint/template-parser": "15.1.0",
     "@angular/cli": "~15.0.4",
     "@angular/compiler-cli": "~15.0.4",
+    "@polkadapt/coingecko": "^1.1.0",
+    "@polkadapt/polkascan-explorer": "^1.1.0",
     "@polkadot/types": "9.10.3",
     "@types/jasmine": "~4.3.0",
     "@types/node": "^12.11.1",

src/app/app-routing.module.ts

@@ -23,18 +23,19 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com
 const routes: Routes = [
   {
     path: ':network',
-    loadChildren: () => import('./pages/network/network.module').then(m => m.NetworkModule)
+    loadChildren: () =>
+      import('./pages/network/network.module').then((m) => m.NetworkModule),
   },
   {
     path: '',
-    loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule),
+    loadChildren: () =>
+      import('./pages/home/home.module').then((m) => m.HomeModule),
   },
-  {path: '**', component: PageNotFoundComponent}
+  { path: '**', component: PageNotFoundComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

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

@@ -1,49 +1,93 @@
 <div class="width-container ps-topbar-container">
-  <a class="ps-top-bar-brand" [routerLink]="'/'" tabindex="0">
-    <svg viewBox="0 0 189 81" width="189" height="81" xmlns="http://www.w3.org/2000/svg">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="nonzero">
-        <path class="logo-text" d="M147.592561,0 C169.959542,0 188.091561,18.1320199 188.091561,40.499 C188.091561,62.8659801 169.959542,80.998 147.592561,80.998 C125.225581,80.998 107.093561,62.8659801 107.093561,40.499 C107.093561,18.1320199 125.225581,0 147.592561,0 Z M9.4371608,30.6578784 L9.76356145,30.668 C15.4868835,30.668 19.7383951,34.7287664 19.88087,40.216873 L19.8845615,40.502 C19.9667848,45.8182148 15.7478884,50.206724 10.4325615,50.334 C7.96282232,50.334 6.1207278,49.7374631 5.14782043,48.7150445 L5.02056145,48.573 L5.02056145,56.227 L0.00856145201,56.227 L0.00856145201,40.368 C-0.103578074,37.7529541 0.890033058,35.211455 2.74607405,33.3658786 C4.52477999,31.5972013 6.93813474,30.6241829 9.4371608,30.6578784 Z M95.0024286,33.0235514 L95.1745615,33.232 L95.1745615,31.169 L100.089561,31.169 L100.089561,49.851 L95.1745615,49.851 L95.1745615,47.788 C93.8755554,49.4035043 91.9165804,50.3375559 89.8532391,50.3373464 L89.5835615,50.332 C84.4165615,50.332 80.2745615,46.466 80.2745615,40.5 C80.2745615,34.6368621 84.2749651,30.8019346 89.3172329,30.6714386 L89.5835615,30.668 C91.6595754,30.5839722 93.6542767,31.4555607 95.0024286,33.0235514 Z M33.2307497,30.6646196 L33.5455615,30.668 C39.3675615,30.668 43.6655615,34.867 43.6655615,40.499 C43.6655615,46.0355424 39.5120217,50.1882157 33.8402684,50.3273938 L33.5455615,50.331 C29.9705566,50.4264013 26.6255207,48.5736732 24.8099097,45.4925503 C22.9942987,42.4114275 22.9942987,38.5875725 24.8099097,35.5064497 C26.5721204,32.5159481 29.7751128,30.6826453 33.2307497,30.6646196 Z M52.5585615,24.773 L52.5585615,43.473 L52.5645869,43.7649983 C52.6086043,44.7621884 52.9126789,45.4866246 54.0850999,45.5504221 L54.2585615,45.555 L56.0885615,45.555 L56.0837127,49.7937029 L56.0753896,49.8028438 L56.0371646,49.8200262 L55.9527867,49.839708 L55.8050833,49.8600146 L55.5768817,49.8790715 L55.2510093,49.8950044 L54.6348993,49.9081487 L54.2375615,49.91 C50.1817317,49.91 47.7629521,47.9549271 47.6618614,43.7250875 L47.6585615,43.446 L47.6585615,24.773 L52.5585615,24.773 Z M65.4385615,24.775 L65.4385615,39.517 L72.4945615,31.227 L78.5095615,31.227 L71.1405615,39.671 L78.7405615,49.85 L72.6095615,49.85 L67.6745615,42.679 L65.4385615,45.069 L65.4385615,49.85 L60.5385615,49.85 L60.5385615,24.775 L65.4385615,24.775 Z M86.4649779,36.9281198 C85.0078471,38.4423238 84.6166404,40.6898662 85.4764513,42.6073566 C86.3044174,44.4538287 88.1325693,45.6376913 90.1419519,45.6507214 L90.3745615,45.647 C91.7268119,45.658972 93.0233618,45.1139719 93.9602532,44.1401877 C94.8385888,43.2272649 95.3281415,42.0130197 95.3330665,40.7526198 L95.3275615,40.5 C95.3276402,38.3985614 94.0511586,36.5077721 92.1020645,35.7222302 C90.1529704,34.9366883 87.9221087,35.4139158 86.4649779,36.9281198 Z M29.6648964,36.921584 C28.2063462,38.4311674 27.8099527,40.6749134 28.662973,42.5928726 C29.4844,44.4397962 31.3060939,45.6286657 33.3131963,45.6497756 L33.5455615,45.647 C34.903144,45.6737281 36.2105738,45.1340816 37.1540678,44.1575757 C38.0385935,43.2421014 38.5283915,42.0201502 38.5257181,40.7537871 L38.5185615,40.5 C38.5185441,38.4009023 37.2445395,36.5118719 35.2983895,35.7252898 C33.3522396,34.9387078 31.1234467,35.4120006 29.6648964,36.921584 Z M5.884256,36.9211776 C4.42561524,38.4305512 4.02896276,40.6741403 4.88166462,42.5921447 C5.70278493,44.4391119 7.52419012,45.6282353 9.5312054,45.6497306 L9.76356145,45.647 C11.121316,45.6740099 12.4290124,45.1344872 13.3727279,44.1579484 C14.2574612,43.2424433 14.7473896,42.0203471 14.7447192,40.7538201 L14.7375615,40.5 C14.7375581,38.4009904 13.4636715,36.5120122 11.5176453,35.7253589 C9.57161911,34.9387056 7.34289677,35.4118041 5.884256,36.9211776 Z" fill="#FFFFFF"/>
-        <path class="logo-circle" d="M 147.593 0 C 169.96 0 188.092 18.132 188.092 40.499 C 188.092 62.866 169.96 80.998 147.593 80.998 C 128.616 80.998 112.688 67.947 108.295 50.331 C 113.549 50.25 116.608 47.783 116.608 43.991 C 116.608 40.89 114.486 39.108 110.609 38.449 L 110.308 38.401 L 108.056 38.059 L 107.682 37.993 C 107.505 37.96 107.336 37.925 107.175 37.886 C 107.24 36.887 107.34 35.899 107.474 34.922 C 107.772 34.875 108.106 34.85 108.477 34.85 C 110.397 34.936 112.282 35.389 114.03 36.184 L 114.431 36.373 L 116.131 32.46 C 113.856 31.307 111.346 30.7 108.8 30.683 L 108.29 30.686 C 112.677 13.061 128.609 0 147.593 0 Z M 148.442 30.661 L 148.172 30.667 L 147.905 30.67 C 142.863 30.801 138.863 34.636 138.863 40.499 C 138.863 46.362 142.863 50.197 147.905 50.328 L 148.172 50.331 C 150.243 50.413 152.233 49.549 153.588 47.994 L 153.762 47.787 L 153.762 49.85 L 158.678 49.849 L 158.678 31.168 L 153.762 31.168 L 153.762 33.231 C 152.471 31.603 150.509 30.66 148.442 30.661 Z M 129.625 30.661 L 129.012 30.669 C 123.223 30.807 119.367 34.944 119.367 40.497 C 119.367 46.05 123.222 50.187 129.012 50.325 L 129.625 50.333 C 132.322 50.321 134.879 49.125 136.617 47.063 L 136.814 46.821 L 133.228 43.756 C 132.203 44.936 130.724 45.624 129.161 45.647 C 126.559 45.647 124.496 43.623 124.496 40.5 C 124.496 37.397 126.581 35.353 129.181 35.353 C 130.638 35.347 132.025 35.959 133.002 37.029 L 133.171 37.223 L 136.795 34.196 C 135.075 31.97 132.426 30.67 129.625 30.661 Z M 168.776 33.157 L 168.624 33.369 L 168.624 31.169 L 163.724 31.169 L 163.724 49.85 L 168.755 49.85 L 168.755 39.613 C 168.755 36.779 170.548 35.391 172.707 35.391 C 174.948 35.391 176.266 36.766 176.347 39.323 L 176.351 39.574 L 176.351 49.856 L 181.383 49.856 L 181.383 37.956 C 181.477 36 180.743 34.095 179.361 32.708 C 177.978 31.321 176.075 30.581 174.119 30.669 C 172.028 30.552 170.024 31.49 168.776 33.157 Z M 107.142 42.499 L 108.419 42.678 C 110.593 42.986 111.519 43.487 111.519 44.393 C 111.519 45.45 110.482 46.098 108.322 46.144 L 107.691 46.151 L 107.484 46.147 C 107.317 44.946 107.202 43.73 107.142 42.499 Z M 148.963 35.353 C 151.676 35.353 153.885 37.534 153.92 40.246 C 153.954 42.959 151.802 45.196 149.09 45.265 C 146.378 45.335 144.114 43.211 144.01 40.5 C 143.946 39.15 144.44 37.834 145.378 36.86 C 146.315 35.886 147.611 35.341 148.963 35.353 Z" fill="#FF6482"/>
-       </g>
-    </svg>
-  </a>
+  <div class="ps-top-bar-brand" tabindex="0">
+    <img src="/assets/chains/cherry_explorer.png" alt="cherry explorer" />
+  </div>
 
-  <div class="ps-top-bar-block-nr" *ngIf="vars.blockNumber|async as blockNumber">
+  <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}}
+      <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 class="ps-top-bar-block-nr" *ngIf="vars.price | async as price">
+    <button mat-button>{{ vars.currency | async }} {{ price }}</button>
   </div>
 
-  <button class="ps-top-bar-network-selector ps-top-bar-network-option ps-top-bar-network-option--{{(vars.network|async)}}" mat-button [matMenuTriggerFor]="networkMenu">
-    {{ (vars.network|async) || 'Network' }}
+  <button
+    class="ps-top-bar-network-selector ps-top-bar-network-option ps-top-bar-network-option--{{
+      vars.network | async
+    }}"
+    mat-button
+    [matMenuTriggerFor]="networkMenu"
+  >
+    <div class="network_selector_dropdown">
+      {{ (vars.network | async) || "Network" }}
+      <mat-icon>keyboard_arrow_down</mat-icon>
+    </div>
   </button>
   <mat-menu #networkMenu="matMenu">
-    <button mat-menu-item *ngFor="let network of networks" (click)="setNetwork(network)" class="ps-top-bar-network-option ps-top-bar-network-option--{{network}}">{{ network }}</button>
+    <button
+      mat-menu-item
+      *ngFor="let network of networks"
+      (click)="setNetwork(network)"
+      class="ps-top-bar-network-option ps-top-bar-network-option--{{ network }}"
+    >
+      {{ network }}
+    </button>
   </mat-menu>
 
-  <button *ngIf="vars.network|async" class="ps-top-bar-connection-selector" mat-icon-button (click)="openConnectionDialog()">
-    <ng-container [ngSwitch]="(ns.online | async)">
+  <button
+    *ngIf="vars.network | async"
+    class="ps-top-bar-connection-selector"
+    mat-icon-button
+    (click)="openConnectionDialog()"
+  >
+    <ng-container [ngSwitch]="ns.online | async">
       <mat-icon *ngSwitchCase="false">wifi_off</mat-icon>
       <ng-container *ngSwitchDefault>
-        <ng-container [ngSwitch]="(pa.substrateRpcRegistered|async) === false || (pa.explorerRegistered|async) === false">
+        <ng-container
+          [ngSwitch]="
+            (pa.substrateRpcRegistered | async) === false ||
+            (pa.explorerRegistered | async) === false
+          "
+        >
           <ng-container *ngSwitchCase="true">
             <mat-icon>report_problem</mat-icon>
           </ng-container>
           <ng-container *ngSwitchDefault>
-            <mat-icon [class.connecting]="(pa.substrateRpcConnected|async) === false || (pa.explorerWsConnected|async) === false">wifi</mat-icon>
+            <mat-icon
+              [class.connecting]="
+                (pa.substrateRpcConnected | async) === false ||
+                (pa.explorerWsConnected | async) === false
+              "
+              >wifi</mat-icon
+            >
           </ng-container>
         </ng-container>
       </ng-container>
     </ng-container>
   </button>
 
-  <a href="https://github.com/polkascan" target="_blank" class="github-link">
-    <svg height="24" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true">
-      <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+  <a
+    href="https://github.com/CherryNetwork/explorer"
+    target="_blank"
+    class="github-link"
+  >
+    <svg
+      height="24"
+      aria-hidden="true"
+      viewBox="0 0 16 16"
+      version="1.1"
+      width="24"
+      data-view-component="true"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      ></path>
     </svg>
   </a>
 </div>

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

@@ -48,11 +48,18 @@ ps-top-bar {
 }
 
 .ps-top-bar-brand svg {
-  width: 93px;
+  width: 85px;
   height: 40px;
   order: 0;
 }
 
+.ps-top-bar-brand img {
+  width: 110px;
+  height: 30px;
+  order: 0;
+  object-fit: contain;
+}
+
 .ps-top-bar-brand-img {
   height: 100%;
   object-fit: contain;
@@ -74,13 +81,10 @@ ps-top-bar {
   animation: breathe 1s infinite;
 }
 
-.network-polkadot {
-}
-
 .ps-top-bar-network-selector,
 .ps-top-bar-network-option {
   &:before {
-    content: '';
+    content: "";
     background-size: contain;
     background-repeat: no-repeat;
     background-position: 50% 50%;
@@ -92,27 +96,41 @@ ps-top-bar {
   }
 }
 
+.network_selector_dropdown {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
 .ps-top-bar-network-option--polkadot {
   &:before {
     display: inline-block;
     margin-right: 0.3rem;
-    background-image: url('../../../assets/chains/polkadot.svg');
+    background-image: url("../../../assets/chains/polkadot.svg");
   }
 }
 
 .ps-top-bar-network-option--kusama {
   &:before {
     display: inline-block;
     margin-right: 0.3rem;
-    background-image: url('../../../assets/chains/kusama.svg');
+    background-image: url("../../../assets/chains/kusama.svg");
   }
 }
 
 .ps-top-bar-network-option--rococo {
   &:before {
     display: inline-block;
     margin-right: 0.3rem;
-    background-image: url('../../../assets/chains/rococo.svg');
+    background-image: url("../../../assets/chains/rococo.svg");
+  }
+}
+.ps-top-bar-network-option--cherry {
+  &:before {
+    display: inline-block;
+    margin-right: 0.3rem;
+    background-image: url("../../../assets/chains/cherry_mini_logo.svg");
   }
 }
 

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

@@ -24,7 +24,7 @@ import {
   OnDestroy,
   OnInit,
   Renderer2,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { Router } from '@angular/router';
@@ -41,32 +41,30 @@ import { PsConnectionDialogComponent } from '../ps-connection-dialog/ps-connecti
   selector: 'ps-top-bar',
   styleUrls: ['ps-top-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
 })
 export class PsTopBarComponent implements OnInit, OnDestroy {
   networks: string[];
   networkLabel = new BehaviorSubject('');
 
   private destroyer = new Subject();
 
-  constructor(private host: ElementRef,
-              private renderer: Renderer2,
-              private cd: ChangeDetectorRef,
-              private router: Router,
-              private config: AppConfig,
-              public pa: PolkadaptService,
-              public ns: NetworkService,
-              public vars: VariablesService,
-              public dialog: MatDialog) {
-  }
+  constructor(
+    private host: ElementRef,
+    private renderer: Renderer2,
+    private cd: ChangeDetectorRef,
+    private router: Router,
+    private config: AppConfig,
+    public pa: PolkadaptService,
+    public ns: NetworkService,
+    public vars: VariablesService,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit(): void {
     this.networks = Object.keys(this.config.networks);
     this.vars.network
-      .pipe(
-        takeUntil(this.destroyer),
-        distinctUntilChanged()
-      )
+      .pipe(takeUntil(this.destroyer), distinctUntilChanged())
       .subscribe((network) => {
         if (network) {
           this.networkLabel.next('Network');
@@ -86,8 +84,7 @@ export class PsTopBarComponent implements OnInit, OnDestroy {
 
   openConnectionDialog(): void {
     this.dialog.open(PsConnectionDialogComponent, {
-      width: '600px'
+      width: '600px',
     });
   }
 }
-