Frontend - Leaderboard CSV files

frontend/cypress/e2e/block-production/won-slots/side-panel.cy.ts

@@ -101,7 +101,6 @@ describe('BLOCK PRODUCTION WON SLOTS SIDE PANEL', () => {
                 .then((state: BlockProductionWonSlotsState) => {
                   expect(state.activeSlot.globalSlot).to.equal(expectedActiveSlot.globalSlot);
                   expect(state.activeSlot.height).to.equal(expectedActiveSlot.height);
-                  console.log(expectedActiveSlot.times);
                 })
                 .get('mina-block-production-won-slots-side-panel .percentage')
                 .should('have.text', ([

frontend/package.json

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

frontend/src/app/app.component.ts

@@ -78,7 +78,6 @@ export class AppComponent extends StoreDispatcher implements OnInit {
   }
 
   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

@@ -128,6 +128,21 @@ export class AppGlobalErrorhandler implements ErrorHandler {
   }
 }
 
+const firebaseProviders = [
+  provideClientHydration(),
+  provideHttpClient(withFetch()),
+  provideFirebaseApp(() => initializeApp(CONFIG.globalConfig.firebase)),
+  provideAnalytics(() => getAnalytics()),
+  ScreenTrackingService,
+  // provideAppCheck(() => {
+  //   // TODO get a reCAPTCHA Enterprise here https://console.cloud.google.com/security/recaptcha?project=_
+  //   const provider = new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */);
+  //   return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
+  // }),
+  providePerformance(() => getPerformance()),
+  provideFirestore(() => getFirestore()),
+];
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -181,18 +196,7 @@ export class AppGlobalErrorhandler implements ErrorHandler {
       deps: [Sentry.TraceService],
       multi: true,
     },
-    provideClientHydration(),
-    provideHttpClient(withFetch()),
-    provideFirebaseApp(() => initializeApp(CONFIG.globalConfig.firebase)),
-    provideAnalytics(() => getAnalytics()),
-    ScreenTrackingService,
-    // provideAppCheck(() => {
-    //   // TODO get a reCAPTCHA Enterprise here https://console.cloud.google.com/security/recaptcha?project=_
-    //   const provider = new ReCaptchaEnterpriseProvider(/* reCAPTCHA Enterprise site key */);
-    //   return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
-    // }),
-    providePerformance(() => getPerformance()),
-    provideFirestore(() => getFirestore()),
+    ...[CONFIG.globalConfig.firebase ? firebaseProviders : []],
   ],
   bootstrap: [AppComponent],
   exports: [

frontend/src/app/app.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { map, Observable, of, tap } from 'rxjs';
+import { map, Observable, of } from 'rxjs';
 import { MinaNode } from '@shared/types/core/environment/mina-env.type';
 import { CONFIG } from '@shared/constants/config';
 import { RustService } from '@core/services/rust.service';
@@ -8,15 +8,13 @@ import { getNetwork } from '@shared/helpers/mina.helper';
 import { getLocalStorage, nanOrElse, ONE_MILLION } from '@openmina/shared';
 import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
 import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
-import { FirestoreService } from '@core/services/firestore.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AppService {
 
-  constructor(private rust: RustService,
-              private firestoreService: FirestoreService) { }
+  constructor(private rust: RustService) { }
 
   getActiveNode(nodes: MinaNode[]): Observable<MinaNode> {
     const nodeName = new URL(location.href).searchParams.get('node');
@@ -54,16 +52,6 @@ export class AppService {
           producingBlockGlobalSlot: data.current_block_production_attempt?.won_slot.global_slot,
           producingBlockStatus: data.current_block_production_attempt?.status,
         } as AppNodeDetails)),
-        tap((details: any) => {
-          // undefined not allowed. Firestore does not accept undefined values
-          // foreach undefined value, we set it to null
-          Object.keys(details).forEach((key: string) => {
-            if (details[key] === undefined) {
-              details[key] = null;
-            }
-          });
-          // this.firestoreService.addHeartbeat(details);
-        }),
       );
   }
 

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

@@ -1,17 +1,7 @@
-import { Injectable } from '@angular/core';
-import {
-  Firestore,
-  CollectionReference,
-  collection,
-  addDoc,
-  doc,
-  setDoc,
-  updateDoc,
-  deleteDoc,
-  DocumentData,
-} from '@angular/fire/firestore';
+import { Injectable, Optional } from '@angular/core';
+import { collection, CollectionReference, deleteDoc, doc, DocumentData, Firestore, updateDoc } from '@angular/fire/firestore';
 import { HttpClient } from '@angular/common/http';
-import { catchError, EMPTY, Observable, of } from 'rxjs';
+import { catchError, Observable, of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
@@ -20,9 +10,11 @@ export class FirestoreService {
   private heartbeatCollection: CollectionReference<DocumentData>;
   private cloudFunctionUrl = 'https://us-central1-webnode-gtm-test.cloudfunctions.net/handleValidationAndStore';
 
-  constructor(private firestore: Firestore,
+  constructor(@Optional() private firestore: Firestore,
               private http: HttpClient) {
-    this.heartbeatCollection = collection(this.firestore, 'heartbeat');
+    if (this.firestore) {
+      this.heartbeatCollection = collection(this.firestore, 'heartbeat');
+    }
   }
 
   addHeartbeat(data: any): Observable<any> {

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

@@ -15,7 +15,6 @@ 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,7 +60,6 @@ export class WebNodeService {
   }
 
   loadWasm$(): Observable<void> {
-    console.log('Loading wasm');
     this.webNodeStartTime = Date.now();
 
     if (isBrowser()) {

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

@@ -18,12 +18,12 @@
         padding: 0 24px;
         border-radius: 44px;
         font-size: 16px;
-        transition: all 0.15s ease;
         background-color: $mina-base-divider;
         color: $black;
         cursor: pointer;
         position: relative;
         overflow: hidden;
+        transition: all 0.15s ease;
 
         &:hover {
           box-shadow: 0 2px 4px 0 $black3;
@@ -106,7 +106,6 @@
         .search input,
         .search input::placeholder {
           font-size: 3.3vw;
-
         }
       }
     }

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

@@ -7,7 +7,8 @@
   <mina-leaderboard-header></mina-leaderboard-header>
   <main class="flex-1 flex-column">
     <mina-leaderboard-title></mina-leaderboard-title>
-    <ng-container *ngTemplateOutlet="liveResultsInfo"></ng-container>
+    <!--    <ng-container *ngTemplateOutlet="liveResultsInfo"></ng-container>-->
+    <ng-container *ngTemplateOutlet="download"></ng-container>
     <mina-leaderboard-filters></mina-leaderboard-filters>
     <mina-leaderboard-table></mina-leaderboard-table>
   </main>
@@ -34,3 +35,23 @@
     </div>
   </div>
 </ng-template>
+
+<ng-template #download>
+  <div class="flex-column">
+    <p class="mt-16 mb-8">Download Public Keys that qualify for the following Prizes:</p>
+    <div class="download-btns fx-row-vert-cent">
+      <button class="fx-row-vert-cent h-lg mr-8" (click)="downloadUptimeLottery()">
+        <span class="mina-icon icon-200">download</span>
+        <span>Uptime Lottery</span>
+      </button>
+      <button class="fx-row-vert-cent h-lg mr-8" (click)="downloadHighestUptime()">
+        <span class="mina-icon icon-200">download</span>
+        <span>Highest Uptime</span>
+      </button>
+      <button class="fx-row-vert-cent h-lg" (click)="downloadMostProducedBlocks()">
+        <span class="mina-icon icon-200">download</span>
+        <span>Most Produced Blocks</span>
+      </button>
+    </div>
+  </div>
+</ng-template>

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

@@ -86,3 +86,39 @@ main {
   font-weight: 400;
   line-height: 24px;
 }
+
+p {
+  font-size: 16px;
+  line-height: 24px;
+  color: $mina-base-primary;
+}
+
+.download-btns {
+  color: $mina-base-primary;
+  margin-bottom: 80px;
+
+  button {
+    border-radius: 999px;
+    font-size: 20px;
+    gap: 8px;
+    padding: 0 16px;
+    font-weight: 300;
+    transition: all 0.15s ease;
+
+    &:hover {
+      box-shadow: 0 2px 4px 0 $black3;
+    }
+
+    &:nth-child(1) {
+      background-color: $mina-brand-aqua;
+    }
+
+    &:nth-child(2) {
+      background-color: $mina-brand-lilac;
+    }
+
+    &:nth-child(3) {
+      background-color: $mina-brand-peony;
+    }
+  }
+}

frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts

@@ -6,6 +6,7 @@ import { untilDestroyed } from '@ngneat/until-destroy';
 import { trigger, state, style, animate, transition } from '@angular/animations';
 import { ManualDetection } from '@openmina/shared';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { LeaderboardService } from '@leaderboard/leaderboard.service';
 
 @Component({
   selector: 'mina-leaderboard-page',
@@ -44,7 +45,8 @@ export class LeaderboardPageComponent extends StoreDispatcher implements OnInit,
   private readonly SCROLL_THRESHOLD = 100;
   @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
 
-  constructor(private destroyRef: DestroyRef) {
+  constructor(private destroyRef: DestroyRef,
+              private leaderboardService: LeaderboardService) {
     super();
   }
 
@@ -76,4 +78,16 @@ export class LeaderboardPageComponent extends StoreDispatcher implements OnInit,
         }
       });
   }
+
+  downloadUptimeLottery(): void {
+    this.leaderboardService.downloadUptimeLottery();
+  }
+
+  downloadHighestUptime(): void {
+    this.leaderboardService.downloadHighestUptime();
+  }
+
+  downloadMostProducedBlocks(): void {
+    this.leaderboardService.downloadMostProducedBlocks();
+  }
 }

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

@@ -11,7 +11,7 @@ h1 {
   font-weight: 300;
   font-size: 80px;
   color: $black6;
-  margin-bottom: 80px;
+  margin-bottom: 56px;
   margin-top: 0;
 
   @media (max-width: 1023px) {