Frontend - Leaderboard

frontend/angular.json

@@ -48,7 +48,8 @@
             ],
             "sourceMap": true,
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/aos/dist/aos.css"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
@@ -58,7 +59,9 @@
                 "src/assets/images"
               ]
             },
-            "scripts": []
+            "scripts": [
+              "node_modules/aos/dist/aos.js"
+            ]
           },
           "configurations": {
             "production": {

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.79",
+  "version": "1.0.95",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -20,7 +20,8 @@
     "prerender": "ng run frontend:prerender",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org openmina-uv --project openmina ./dist/frontend/browser && sentry-cli sourcemaps upload --org openmina-uv --project openmina ./dist/frontend/browser",
     "copy-env": "cp dist/frontend/browser/assets/environments/webnode.js dist/frontend/browser/assets/environments/env.js",
-    "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy"
+    "deploy": "npm run prebuild && npm run build:prod && npm run copy-env && firebase deploy",
+    "deploy:leaderboard": "npm run prebuild && npm run build:prod && cp dist/frontend/browser/assets/environments/leaderboard.js dist/frontend/browser/assets/environments/env.js && firebase deploy"
   },
   "private": true,
   "dependencies": {
@@ -47,6 +48,7 @@
     "@sentry/angular": "^8.35.0",
     "@sentry/cli": "^2.38.2",
     "@sentry/tracing": "^7.114.0",
+    "aos": "^2.3.4",
     "base-x": "^5.0.0",
     "bs58check": "^4.0.0",
     "buffer": "^6.0.3",

frontend/src/app/app.component.html

@@ -1,8 +1,11 @@
 @if (showLandingPage$ | async) {
-  <mina-web-node-landing-page (goToNode)="goToWebNode()"
-                              (stopRequests)="clearNodeUpdateSubscription()"></mina-web-node-landing-page>
+  <mina-leaderboard-landing-page></mina-leaderboard-landing-page>
+  <!--  <mina-web-node-landing-page (goToNode)="goToWebNode()"-->
+    <!--                              (stopRequests)="clearNodeUpdateSubscription()"></mina-web-node-landing-page>-->
 } @else if (showLoadingWebNodePage$ | async) {
   <router-outlet></router-outlet>
+} @else if (showLeaderboardPage$ | async) {
+  <router-outlet></router-outlet>
 } @else if (loaded) {
   <mat-sidenav-container [hasBackdrop]="false"
                          class="w-100 h-100"

frontend/src/app/app.component.ts

@@ -11,6 +11,8 @@ import { Router } from '@angular/router';
 import { Routes } from '@shared/enums/routes.enum';
 import { WebNodeService } from '@core/services/web-node.service';
 
+declare var AOS: any;
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -23,6 +25,7 @@ export class AppComponent extends StoreDispatcher implements OnInit {
   readonly menu$: Observable<AppMenu> = this.select$(AppSelectors.menu);
   readonly showLandingPage$: Observable<boolean> = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url === '/' || route.url.startsWith('/?')));
   readonly showLoadingWebNodePage$: Observable<boolean> = this.select$(getMergedRoute).pipe(filter(Boolean), map((route: MergedRoute) => route.url.startsWith(`/${Routes.LOADING_WEB_NODE}`)));
+  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;
   loaded: boolean;
@@ -33,6 +36,8 @@ export class AppComponent extends StoreDispatcher implements OnInit {
   constructor(private breakpointObserver: BreakpointObserver,
               private router: Router,
               private webNodeService: WebNodeService) {
+    AOS.init();
+
     super();
     safelyExecuteInBrowser(() => {
       if (any(window).Cypress) {
@@ -55,7 +60,7 @@ export class AppComponent extends StoreDispatcher implements OnInit {
       () => this.initAppFunctionalities(),
       filter(Boolean),
       take(1),
-      filter((route: MergedRoute) => route.url !== '/' && !route.url.startsWith('/?')),
+      filter((route: MergedRoute) => route.url !== '/' && !route.url.startsWith('/?') && !route.url.startsWith('/leaderboard')),
     );
     this.select(
       getMergedRoute,

frontend/src/app/app.module.ts

@@ -42,6 +42,7 @@ import { getPerformance, providePerformance } from '@angular/fire/performance';
 import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component';
 import { MenuTabsComponent } from '@app/layout/menu-tabs/menu-tabs.component';
 import { getFirestore, provideFirestore } from '@angular/fire/firestore';
+import { LeaderboardModule } from '@leaderboard/leaderboard.module';
 
 registerLocaleData(localeFr, 'fr');
 registerLocaleData(localeEn, 'en');
@@ -164,6 +165,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     WebNodeLandingPageComponent,
     BlockProductionPillComponent,
     MenuTabsComponent,
+    LeaderboardModule,
   ],
   providers: [
     THEME_PROVIDER,
@@ -179,15 +181,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
     },
     provideClientHydration(),
     provideHttpClient(withFetch()),
-    provideFirebaseApp(() => initializeApp({
-      'projectId': 'openminawebnode',
-      'appId': '1:120031499786:web:9af56c50ebce25c619f1f3',
-      'storageBucket': 'openminawebnode.firebasestorage.app',
-      'apiKey': 'AIzaSyBreMkb5-8ANb5zL6yWKgRAk9owbDS1g9s',
-      'authDomain': 'openminawebnode.firebaseapp.com',
-      'messagingSenderId': '120031499786',
-      'measurementId': 'G-V0ZC81T9RQ',
-    })),
+    provideFirebaseApp(() => initializeApp(CONFIG.globalConfig.firebase)),
     provideAnalytics(() => getAnalytics()),
     ScreenTrackingService,
     // provideAppCheck(() => {

frontend/src/app/app.routing.ts

@@ -76,6 +76,10 @@ function generateRoutes(): Routes {
       loadChildren: () => import('@web-node/web-node.module').then(m => m.WebNodeModule),
       title: WEBNODE_TITLE,
     },
+    {
+      path: '',
+      loadChildren: () => import('@leaderboard/leaderboard.module').then(m => m.LeaderboardModule),
+    },
   ];
   if (CONFIG.showWebNodeLandingPage) {
     routes.push({

frontend/src/app/app.service.ts

@@ -62,7 +62,7 @@ export class AppService {
               details[key] = null;
             }
           });
-          this.firestoreService.addHeartbeat(details);
+          // this.firestoreService.addHeartbeat(details);
         }),
       );
   }

frontend/src/app/app.setup.ts

@@ -38,6 +38,8 @@ import { benchmarksReducer } from '@benchmarks/benchmarks.reducer';
 import { fuzzingReducer } from '@fuzzing/fuzzing.reducer';
 import { FuzzingState } from '@fuzzing/fuzzing.state';
 import { FuzzingAction } from '@fuzzing/fuzzing.actions';
+import { LeaderboardState } from '@leaderboard/leaderboard.state';
+import { leaderboardReducer } from '@leaderboard/leaderboard.reducer';
 
 export interface MinaState {
   [APP_KEY]: AppState;
@@ -53,6 +55,7 @@ export interface MinaState {
   snarks: SnarksState;
   benchmarks: BenchmarksState;
   fuzzing: FuzzingState;
+  leaderboard: LeaderboardState;
 }
 
 type MinaAction =
@@ -80,6 +83,7 @@ export const reducers: ActionReducerMap<MinaState, MinaAction> = {
   snarks: snarksReducer,
   benchmarks: benchmarksReducer,
   fuzzing: fuzzingReducer,
+  leaderboard: leaderboardReducer,
 };
 
 export const metaReducers: MetaReducer<MinaState, MinaAction>[] = [];

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 = 30653596;
+const WASM_FILE_SIZE = 31705944;
 
 class AssetMonitor {
   readonly downloads: Map<string, any> = new Map();

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

@@ -10,20 +10,24 @@ import {
   deleteDoc,
   DocumentData,
 } from '@angular/fire/firestore';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class FirestoreService {
   private heartbeatCollection: CollectionReference<DocumentData>;
+  private cloudFunctionUrl = 'https://us-central1-webnode-gtm-test.cloudfunctions.net/handleValidationAndStore';
 
-  constructor(private firestore: Firestore) {
+  constructor(private firestore: Firestore,
+              private http: HttpClient) {
     this.heartbeatCollection = collection(this.firestore, 'heartbeat');
   }
 
-  addHeartbeat(data: any): Promise<void> {
-    const docRef = doc(this.heartbeatCollection); // Auto-generated ID
-    return setDoc(docRef, data);
+  addHeartbeat(data: any): Observable<any> {
+    console.log('Posting to cloud function:', data);
+    return this.http.post(this.cloudFunctionUrl, { data });
   }
 
   updateHeartbeat(id: string, data: any): Promise<void> {

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

@@ -1,12 +1,15 @@
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, catchError, EMPTY, filter, from, fromEvent, map, merge, Observable, of, switchMap, tap, throwError } from 'rxjs';
+import { BehaviorSubject, catchError, EMPTY, filter, from, fromEvent, map, merge, Observable, of, switchMap, tap, throwError, timer } from 'rxjs';
 import base from 'base-x';
 import { any, isBrowser, safelyExecuteInBrowser } from '@openmina/shared';
 import { HttpClient } from '@angular/common/http';
 import { sendSentryEvent } from '@shared/helpers/webnode.helper';
 import { DashboardPeerStatus } from '@shared/types/dashboard/dashboard.peer';
 import { FileProgressHelper } from '@core/helpers/file-progress.helper';
 import { CONFIG } from '@shared/constants/config';
+import firebase from 'firebase/compat';
+import FirebaseStorageError = firebase.storage.FirebaseStorageError;
+import { FirestoreService } from '@core/services/firestore.service';
 
 export interface PrivateStake {
   publicKey: string;
@@ -33,7 +36,8 @@ export class WebNodeService {
   privateStake: PrivateStake;
   noBlockProduction: boolean = false;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient,
+              private firestore: FirestoreService) {
     FileProgressHelper.initDownloadProgress();
     const basex = base('123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz');
     safelyExecuteInBrowser(() => {
@@ -120,6 +124,7 @@ export class WebNodeService {
               }
             })();
             console.log('webnode config:', !!this.webNodeKeyPair.privateKey, this.webNodeNetwork, urls);
+            console.log(this.privateStake);
             let privateKey = this.privateStake ? [this.privateStake.stake, this.privateStake.password] : this.webNodeKeyPair.privateKey;
             if (this.noBlockProduction) {
               privateKey = null;
@@ -131,13 +136,15 @@ export class WebNodeService {
             any(window).webnode = webnode;
             this.webnode$.next(webnode);
             this.webnodeProgress$.next('Started');
-
           }),
           catchError((error) => {
             sendSentryEvent('WebNode failed to start: ' + error.message);
             return throwError(() => new Error(error.message));
           }),
           switchMap(() => this.webnode$.asObservable()),
+          switchMap(() => timer(0, 60000)),
+          switchMap(() => this.heartBeat$),
+          switchMap(heartBeat => this.firestore.addHeartbeat(heartBeat)),
         );
     }
     return EMPTY;
@@ -228,6 +235,13 @@ export class WebNodeService {
     );
   }
 
+  get heartBeat$(): Observable<any> {
+    return this.webnode$.asObservable().pipe(
+      filter(Boolean),
+      switchMap(webnode => from(webnode.make_heartbeat())),
+    );
+  }
+
   actions$(path: string): Observable<any> {
     let slot: string | number = path.split('?id=')[1];
     if (!isNaN(Number(slot))) {

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

@@ -0,0 +1,26 @@
+<section class="fx-row-vert-cent w-100">
+  <div class="filters fx-row-vert-cent w-100 flex-between">
+    <div class="fx-row-vert-cent">
+      <div class="sort h-md fx-row-vert-cent" [class.active]="currentSort.sortBy === 'uptimePercentage'" (click)="sortBy('uptimePercentage')">
+        <div class="sort-content">
+          <span class="mina-icon icon-300"
+                [class.flip]="currentSort.sortDirection === SortDirection.DSC"
+                [class.show]="currentSort.sortBy === 'uptimePercentage'">arrow_upward</span>
+          <span class="text f-400">Uptime</span>
+        </div>
+      </div>
+      <div class="sort h-md fx-row-vert-cent ml-8" [class.active]="currentSort.sortBy === 'blocksProduced'" (click)="sortBy('blocksProduced')">
+        <div class="sort-content">
+          <span class="mina-icon icon-300"
+                [class.flip]="currentSort.sortDirection === SortDirection.DSC"
+                [class.show]="currentSort.sortBy === 'blocksProduced'">arrow_upward</span>
+          <span class="text f-400">Block Production</span>
+        </div>
+      </div>
+    </div>
+    <div class="search p-relative fx-row-vert-cent ml-10" (click)="inputElement.focus()">
+      <span class="mina-icon icon-300 p-absolute">search</span>
+      <input type="text" placeholder="Search Address" #inputElement class="w-100">
+    </div>
+  </div>
+</section>