Frontend - Leaderboard #1046

Author: directcuteo

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/functions/package-lock.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/package-lock.json

@@ -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/package.json

@@ -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.component.html

@@ -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.component.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.module.ts

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

frontend/src/app/app.routing.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>[] = [];