Frontend - Leaderboard improvements and changes

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;

frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts

@@ -39,7 +39,7 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
       ofType(BlockProductionWonSlotsActions.getSlots, BlockProductionWonSlotsActions.close),
       this.latestActionState(),
       switchMap(({ action, state }) =>
-        action.type === BlockProductionWonSlotsActions.close.type
+        action.type.includes('Close')
           ? EMPTY
           : this.wonSlotsService.getSlots().pipe(
             switchMap(({ slots, epoch }) => {

frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html

@@ -26,10 +26,13 @@
                class="mr-10"></mina-card>
     <div class="custom-card flex-column flex-between tertiary h-100 pb-8 pt-8 pl-12">
       <div class="label">Public Key</div>
-      <div class="pub-key">{{ card5.publicKey | truncateMid: 6: 6 }}</div>
-      <div class="fx-row-vert-cent primary-hover pointer" [copyToClipboard]="card5.publicKey">
-        <span class="mina-icon">content_copy</span>
-        <span>Copy</span>
+      <div class="pub-key fx-row-vert-cent">
+        {{ card5.publicKey | truncateMid: 4: 4 }}
+        <span class="mina-icon pointer icon-300 ml-5 primary-hover" [copyToClipboard]="card5.publicKey">content_copy</span>
+      </div>
+      <div class="fx-row-vert-cent primary-hover pointer" (click)="openInExplorer()">
+        <span class="mina-icon icon-300 mr-5">open_in_new</span>
+        <span>Open in Explorer</span>
       </div>
     </div>
   </div>

frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
 import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state';
-import { lastItem, ONE_BILLION, ONE_THOUSAND } from '@openmina/shared';
+import { lastItem, ONE_BILLION, ONE_THOUSAND, safelyExecuteInBrowser } from '@openmina/shared';
 import { getTimeDiff } from '@shared/helpers/date.helper';
 import { filter } from 'rxjs';
 import {
@@ -12,6 +12,8 @@ import {
   BlockProductionWonSlotsEpoch,
 } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type';
 import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
+import { AppSelectors } from '@app/app.state';
+import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
 
 @Component({
   selector: 'mina-block-production-won-slots-cards',
@@ -28,9 +30,18 @@ export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher imple
   card4: { epochProgress: string; endIn: string; } = { epochProgress: '-', endIn: null };
   card5: { publicKey: string; totalRewards: string } = { publicKey: null, totalRewards: null };
 
+  private minaExplorer: string;
+
   ngOnInit(): void {
     this.listenToSlots();
     this.listenToEpoch();
+    this.listenToActiveNode();
+  }
+
+  private listenToActiveNode(): void {
+    this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => {
+      this.minaExplorer = node.network?.toLowerCase();
+    }, filter(Boolean));
   }
 
   private listenToEpoch(): void {
@@ -80,4 +91,10 @@ export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher imple
   toggleSidePanel(): void {
     this.dispatch2(BlockProductionWonSlotsActions.toggleSidePanel());
   }
+
+  openInExplorer(): void {
+    const network = this.minaExplorer !== 'mainnet' ? (this.minaExplorer + '.') : '';
+    const url = `https://${network}minaexplorer.com/wallet/${this.card5.publicKey}`;
+    safelyExecuteInBrowser(() => window.open(url, '_blank'));
+  }
 }

frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts

@@ -136,7 +136,6 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
         this.stopTimer = true;
         this.stateWhenReachedZero = { globalSlot: this.slot.globalSlot, status: this.slot.status };
         this.remainingTime = '-';
-        this.queryServerOftenToGetTheNewSlotState();
       }
       this.detect();
     } else {
@@ -176,16 +175,6 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
     }
   }
 
-  private queryServerOftenToGetTheNewSlotState(): void {
-    const timer = setInterval(() => {
-      if (!this.stateWhenReachedZero) {
-        clearInterval(timer);
-        return;
-      }
-      this.dispatch2(BlockProductionWonSlotsActions.getSlots());
-    }, 1000);
-  }
-
   closeSidePanel(): void {
     this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS]);
     this.dispatch2(BlockProductionWonSlotsActions.toggleSidePanel());

frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts

@@ -128,7 +128,6 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
     blocks = blocks.slice(1);
 
     this.lengthWithoutRoot = blocks.length ?? null; // 290 or 291
-    console.log(this.lengthWithoutRoot);
 
     this.fetched = blocks.filter(b => ![NodesOverviewNodeBlockStatus.MISSING, NodesOverviewNodeBlockStatus.FETCHING].includes(b.status)).length;
     this.applied = blocks.filter(b => b.status === NodesOverviewNodeBlockStatus.APPLIED).length;

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.html

@@ -1,3 +1,3 @@
-<a href="https://mdvpmchvuew.typeform.com/to/EtWUgcSz" class="gradient fx-row-full-cent p-absolute w-100 pointer">
-  Round 1 Applications Close in 5d 5h 12m - Apply <span class="mina-icon icon-200">arrow_right_alt</span>
+<a href="https://mdvpmchvuew.typeform.com/to/EtWUgcSz" class="gradient fx-row-full-cent w-100 pointer">
+  Round 1 Applications Close Soon <span class="mina-icon icon-200">arrow_right_alt</span>
 </a>

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss

@@ -1,5 +1,14 @@
 @import 'leaderboard-variables';
 
+@keyframes bounceLeftToRight {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(10px);
+  }
+}
+
 .gradient {
   height: 52px;
   background: $mina-brand-gradient;
@@ -13,4 +22,8 @@
   @media (max-width: 767px) {
     font-size: 3.1vw;
   }
+
+  &:hover .mina-icon {
+    animation: bounceLeftToRight .85s infinite ease-out;
+  }
 }

frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss

@@ -36,6 +36,6 @@ h1 {
   margin-bottom: 80px;
   color: $mina-base-primary;
   font-size: 80px;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 80px;
 }