Frontend - Leaderboard improvements and changes #1064

Frontend - Leaderboard improvements and changes

Author: directcuteo

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.103",
+  "version": "1.0.121",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",

frontend/src/app/app.component.html

@@ -28,7 +28,8 @@
            class="overflow-hidden"
            [class.no-toolbar]="hideToolbar"
            [class.no-submenus]="subMenusLength < 2"
-           [class.mobile]="menu.isMobile">
+           [class.mobile]="menu.isMobile"
+           [class.uptime]="showUptime">
         <router-outlet></router-outlet>
       </div>
       @if (!isDesktop) {

frontend/src/app/app.component.scss

@@ -76,8 +76,10 @@ mat-sidenav-content {
     margin-bottom: 4px;
     border-top-right-radius: 6px;
 
-    &.no-toolbar {
-      height: calc(100% - #{$subMenus} - #{$tabs});
+
+    &.uptime {
+      $toolbar: 130px;
+      height: calc(100% - #{$toolbar} - #{$subMenus} - #{$tabs});
     }
 
     &.no-submenus {
@@ -86,6 +88,14 @@ mat-sidenav-content {
       &.no-toolbar {
         height: 100%;
       }
+
+      &.uptime {
+        height: calc(100% - #{$toolbar} - #{$subMenus});
+      }
+    }
+
+    &.no-toolbar {
+      height: calc(100% - #{$subMenus} - #{$tabs});
     }
   }
 }

frontend/src/app/app.component.ts

@@ -28,6 +28,7 @@ export class AppComponent extends StoreDispatcher implements OnInit {
   readonly showLeaderboardPage$: Observable<boolean> = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url.startsWith(`/${Routes.LEADERBOARD}`)));
   subMenusLength: number = 0;
   hideToolbar: boolean = CONFIG.hideToolbar;
+  showUptime: boolean = CONFIG.showLeaderboard;
   loaded: boolean;
   isDesktop: boolean = isDesktop();
 
@@ -54,31 +55,30 @@ export class AppComponent extends StoreDispatcher implements OnInit {
         localStorage.setItem('webnodeArgs', args);
       }
     }
+    this.select(getMergedRoute, () => {
+      this.loaded = true;
+      this.detect();
+    }, filter(Boolean), take(1));
 
-    this.select(
-      getMergedRoute,
-      () => this.initAppFunctionalities(),
-      filter(Boolean),
-      take(1),
-      filter((route: MergedRoute) => route.url !== '/' && !route.url.startsWith('/?') && !route.url.startsWith('/leaderboard')),
-    );
-    this.select(
-      getMergedRoute,
-      () => {
-        this.loaded = true;
-        this.detect();
-      },
-      filter(Boolean),
-      take(1),
-    );
+    if (CONFIG.showLeaderboard && CONFIG.showWebNodeLandingPage) {
+      /* frontend with some landing page */
+      this.select(getMergedRoute, () => {
+        this.initAppFunctionalities();
+      }, filter((route: MergedRoute) => route?.url.startsWith('/loading-web-node')), take(1));
+
+    } else if (!CONFIG.showLeaderboard && !CONFIG.showWebNodeLandingPage) {
+      /* normal frontend (no landing pages) */
+      this.initAppFunctionalities();
+    }
   }
 
   goToWebNode(): void {
-    this.router.navigate([Routes.LOADING_WEB_NODE], { queryParamsHandling: 'merge' });
+    // this.router.navigate([Routes.LOADING_WEB_NODE], { queryParamsHandling: 'merge' });
     this.initAppFunctionalities();
   }
 
   private initAppFunctionalities(): void {
+    console.log('initAppFunctionalities');
     if (this.webNodeService.hasWebNodeConfig() && !this.webNodeService.isWebNodeLoaded()) {
       if (!getWindow()?.location.href.includes(`/${Routes.LOADING_WEB_NODE}`)) {
         this.router.navigate([Routes.LOADING_WEB_NODE], { queryParamsHandling: 'preserve' });

frontend/src/app/app.module.ts

@@ -43,6 +43,7 @@ import { BlockProductionPillComponent } from '@app/layout/block-production-pill/
 import { MenuTabsComponent } from '@app/layout/menu-tabs/menu-tabs.component';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
 import { LeaderboardModule } from '@leaderboard/leaderboard.module';
+import { UptimePillComponent } from '@app/layout/uptime-pill/uptime-pill.component';
 
 registerLocaleData(localeFr, 'fr');
 registerLocaleData(localeEn, 'en');
@@ -166,6 +167,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     BlockProductionPillComponent,
     MenuTabsComponent,
     LeaderboardModule,
+    UptimePillComponent,
   ],
   providers: [
     THEME_PROVIDER,

frontend/src/app/app.routing.ts

@@ -2,6 +2,9 @@ import { NgModule } from '@angular/core';
 import { NoPreloading, RouterModule, Routes } from '@angular/router';
 import { CONFIG, getFirstFeature } from '@shared/constants/config';
 import { WebNodeLandingPageComponent } from '@app/layout/web-node-landing-page/web-node-landing-page.component';
+import { getMergedRoute, MergedRoute } from '@openmina/shared';
+import { filter, take } from 'rxjs';
+import { landingPageGuard } from '@shared/guards/landing-page.guard';
 
 const APP_TITLE: string = 'Open Mina';
 
@@ -24,6 +27,7 @@ function generateRoutes(): Routes {
       path: 'dashboard',
       loadChildren: () => import('@dashboard/dashboard.module').then(m => m.DashboardModule),
       title: DASHBOARD_TITLE,
+      canActivate: [landingPageGuard],
     },
     {
       path: 'nodes',
@@ -45,6 +49,7 @@ function generateRoutes(): Routes {
       path: 'state',
       loadChildren: () => import('@state/state.module').then(m => m.StateModule),
       title: STATE_TITLE,
+      canActivate: [landingPageGuard],
     },
     {
       path: 'snarks',
@@ -55,16 +60,19 @@ function generateRoutes(): Routes {
       path: 'block-production',
       loadChildren: () => import('@block-production/block-production.module').then(m => m.BlockProductionModule),
       title: BLOCK_PRODUCTION_TITLE,
+      canActivate: [landingPageGuard],
     },
     {
       path: 'mempool',
       loadChildren: () => import('@mempool/mempool.module').then(m => m.MempoolModule),
       title: MEMPOOL_TITLE,
+      canActivate: [landingPageGuard],
     },
     {
       path: 'benchmarks',
       loadChildren: () => import('@benchmarks/benchmarks.module').then(m => m.BenchmarksModule),
       title: BENCHMARKS_TITLE,
+      canActivate: [landingPageGuard],
     },
     {
       path: 'fuzzing',
@@ -75,12 +83,19 @@ function generateRoutes(): Routes {
       path: 'loading-web-node',
       loadChildren: () => import('@web-node/web-node.module').then(m => m.WebNodeModule),
       title: WEBNODE_TITLE,
+      canActivate: [landingPageGuard],
     },
-    {
+    // {
+    //   path: '',
+    //   loadChildren: () => import('@leaderboard/leaderboard.module').then(m => m.LeaderboardModule),
+    // },
+  ];
+  if (CONFIG.showLeaderboard) {
+    routes.push({
       path: '',
       loadChildren: () => import('@leaderboard/leaderboard.module').then(m => m.LeaderboardModule),
-    },
-  ];
+    });
+  }
   if (CONFIG.showWebNodeLandingPage) {
     routes.push({
       path: '',

frontend/src/app/core/helpers/file-progress.helper.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject } from 'rxjs';
 import { safelyExecuteInBrowser } from '@openmina/shared';
 
-const WASM_FILE_SIZE = 31705944;
+const WASM_FILE_SIZE = 31556926;
 
 class AssetMonitor {
   readonly downloads: Map<string, any> = new Map();

frontend/src/app/core/services/firestore.service.ts

@@ -11,7 +11,7 @@ import {
   DocumentData,
 } from '@angular/fire/firestore';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { catchError, EMPTY, Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -27,7 +27,12 @@ export class FirestoreService {
 
   addHeartbeat(data: any): Observable<any> {
     console.log('Posting to cloud function:', data);
-    return this.http.post(this.cloudFunctionUrl, { data });
+    return this.http.post(this.cloudFunctionUrl, { data }).pipe(
+      catchError(error => {
+        console.error('Error while posting to cloud function:', error);
+        return error;
+      }),
+    );
   }
 
   updateHeartbeat(id: string, data: any): Promise<void> {

frontend/src/app/core/services/rust.service.ts

@@ -15,6 +15,7 @@ export class RustService {
               private webNodeService: WebNodeService) {}
 
   changeRustNode(node: MinaNode): void {
+    console.log('Changing Rust node to:', node);
     this.node = node;
   }
 

frontend/src/app/core/services/web-node.service.ts

@@ -60,6 +60,7 @@ export class WebNodeService {
   }
 
   loadWasm$(): Observable<void> {
+    console.log('Loading wasm');
     this.webNodeStartTime = Date.now();
 
     if (isBrowser()) {
@@ -142,9 +143,14 @@ export class WebNodeService {
             return throwError(() => new Error(error.message));
           }),
           switchMap(() => this.webnode$.asObservable()),
+          // filter(() => CONFIG.globalConfig.heartbeats),
           switchMap(() => timer(0, 60000)),
           switchMap(() => this.heartBeat$),
           switchMap(heartBeat => this.firestore.addHeartbeat(heartBeat)),
+          catchError(error => {
+            console.log('Error from heartbeat api:', error);
+            return of(null);
+          }),
         );
     }
     return EMPTY;