Frontend - Leaderboard latest updates #1076

Frontend - Leaderboard latest updates

Author: directcuteo

frontend/package.json

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

frontend/src/app/app.component.html

@@ -1,7 +1,11 @@
 @if (showLandingPage$ | async) {
-  <mina-leaderboard-landing-page></mina-leaderboard-landing-page>
-  <!--  <mina-web-node-landing-page (goToNode)="goToWebNode()"-->
-    <!--                              (stopRequests)="clearNodeUpdateSubscription()"></mina-web-node-landing-page>-->
+  @if (showLeaderboard) {
+    <router-outlet></router-outlet>
+    <!--    <mina-leaderboard-landing-page></mina-leaderboard-landing-page>-->
+  } @else {
+    <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) {
@@ -29,7 +33,7 @@
            [class.no-toolbar]="hideToolbar"
            [class.no-submenus]="subMenusLength < 2"
            [class.mobile]="menu.isMobile"
-           [class.uptime]="showUptime">
+           [class.uptime]="showLeaderboard">
         <router-outlet></router-outlet>
       </div>
       @if (!isDesktop) {

frontend/src/app/app.component.ts

@@ -28,7 +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;
+  showLeaderboard: boolean = CONFIG.showLeaderboard;
   loaded: boolean;
   isDesktop: boolean = isDesktop();
 

frontend/src/app/app.routing.ts

@@ -85,18 +85,13 @@ function generateRoutes(): Routes {
       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) {
+  } else if (CONFIG.showWebNodeLandingPage) {
     routes.push({
       path: '',
       component: WebNodeLandingPageComponent,

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

@@ -142,7 +142,7 @@ export class WebNodeService {
             return throwError(() => new Error(error.message));
           }),
           switchMap(() => this.webnode$.asObservable()),
-          // filter(() => CONFIG.globalConfig.heartbeats),
+          filter(() => CONFIG.globalConfig.heartbeats),
           switchMap(() => timer(0, 60000)),
           switchMap(() => this.heartBeat$),
           switchMap(heartBeat => this.firestore.addHeartbeat(heartBeat)),

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

@@ -6,8 +6,8 @@
        [@dropdownAnimation]="isMenuOpen ? 'open' : 'closed'"
        [class.open]="isMenuOpen"
        (clickOutside)="closeMenu()">
-    <a [class.active]="route === '/'" routerLink="">Mina Web Node</a>
     <a [class.active]="route === '/leaderboard'" routerLink="/leaderboard">Leaderboard</a>
-    <a target="_blank" href="https://docs.google.com/document/d/1Z8A6V2TgY9je1AyeEtA3WTFBYvyBo-eJr-QTydBsXbs/edit?usp=sharing">Round 1 Details</a>
+    <a target="_blank" href="https://docs.google.com/document/d/1Z8A6V2TgY9je1AyeEtA3WTFBYvyBo-eJr-QTydBsXbs/edit?usp=sharing">Program Details</a>
+    <a target="_blank" href="">Prize Draw & Tie-Break Process</a>
   </div>
 </div>

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

@@ -8,7 +8,10 @@
   <main class="flex-1 flex-column">
     <mina-leaderboard-title></mina-leaderboard-title>
     <!--    <ng-container *ngTemplateOutlet="liveResultsInfo"></ng-container>-->
-    <ng-container *ngTemplateOutlet="download"></ng-container>
+    <!--    <ng-container *ngTemplateOutlet="download"></ng-container>-->
+    @if (canDownloadCSV) {
+      <ng-container *ngTemplateOutlet="downloadRestricted"></ng-container>
+    }
     <mina-leaderboard-filters></mina-leaderboard-filters>
     <mina-leaderboard-table></mina-leaderboard-table>
   </main>
@@ -36,6 +39,17 @@
   </div>
 </ng-template>
 
+<ng-template #downloadRestricted>
+  <div class="flex-column">
+    <div class="download-btns fx-row-vert-cent">
+      <button class="fx-row-vert-cent h-lg mr-8" (click)="downloadAll()">
+        <span class="mina-icon icon-200">download</span>
+        <span>Download CSV</span>
+      </button>
+    </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>

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

@@ -41,6 +41,7 @@ import { LeaderboardService } from '@leaderboard/leaderboard.service';
 export class LeaderboardPageComponent extends StoreDispatcher implements OnInit, AfterViewInit {
   isExpanded = false;
   showBanner: boolean = false;
+  canDownloadCSV = localStorage.getItem('download_leaderboard') === 'true';
 
   private readonly SCROLL_THRESHOLD = 100;
   @ViewChild('scrollContainer') private scrollContainer!: ElementRef;
@@ -90,4 +91,8 @@ export class LeaderboardPageComponent extends StoreDispatcher implements OnInit,
   downloadMostProducedBlocks(): void {
     this.leaderboardService.downloadMostProducedBlocks();
   }
+
+  downloadAll(): void {
+    this.leaderboardService.downloadAll();
+  }
 }

frontend/src/app/features/leaderboard/leaderboard.routing.ts

@@ -29,7 +29,7 @@ const routes: Routes = [
   },
   {
     path: '**',
-    redirectTo: '',
+    redirectTo: 'leaderboard',
   },
 ];
 

frontend/src/app/features/leaderboard/leaderboard.service.ts

@@ -4,6 +4,7 @@ import { HeartbeatSummary } from '@shared/types/leaderboard/heartbeat-summary.ty
 import { collection, collectionData, CollectionReference, Firestore, getDocs } from '@angular/fire/firestore';
 import { WebNodeService } from '@core/services/web-node.service';
 import { getElapsedTimeInMinsAndHours } from '@shared/helpers/date.helper';
+import { ONE_THOUSAND, toReadableDate } from '@openmina/shared';
 
 @Injectable({
   providedIn: 'root',
@@ -35,7 +36,7 @@ export class LeaderboardService {
           return ({
             publicKey: score['publicKey'],
             blocksProduced: score['blocksProduced'],
-            isActive: score['lastUpdated'] > Date.now() - 120000,
+            isActive: score['lastHeartbeat'] * ONE_THOUSAND > (Date.now() - 12000),
             uptimePercentage: this.getUptimePercentage(score['score'], this.maxScoreRightNow),
             uptimePrize: false,
             blocksPrize: false,
@@ -232,4 +233,50 @@ export class LeaderboardService {
 
     URL.revokeObjectURL(url);
   }
+
+  async downloadAll(): Promise<void> {
+    const querySnapshot = await getDocs(this.scoresCollection);
+    const scoresData: any[] = [];
+
+    querySnapshot.forEach((doc) => {
+      scoresData.push({ id: doc.id, ...doc.data() });
+    });
+
+    const csvRows = [];
+
+    let filteredData = scoresData
+      .map(row => ({
+        publicKey: row.publicKey,
+        score: row.score + ' / ' + this.maxScoreRightNow,
+        uptime: this.getUptimePercentage(row.score, this.maxScoreRightNow) + '%',
+        uptimeTime: row.score,
+        producedBlocks: row.blocksProduced,
+        lastUpdated: toReadableDate(row.lastUpdated * ONE_THOUSAND),
+      }));
+    filteredData = [...filteredData].sort((a, b) => b.uptimeTime - a.uptimeTime);
+
+    const headers = ['publicKey', 'score', 'uptime', /*'lastUpdated',*/ 'producedBlocks'].map(header => this.camelCaseToTitle(header));
+    csvRows.push(headers.join(','));
+
+    // Map rows
+    filteredData.forEach((row: any) => {
+      const values = headers.map(header => {
+        const key = header.charAt(0).toLowerCase() + header.slice(1); // Convert to corresponding key
+        const escape = ('' + row[key.replace(' ', '')]).replace(/"/g, '\\"');
+        return `"${escape}"`;
+      });
+      csvRows.push(values.join(','));
+    });
+
+    const csvString = csvRows.join('\n');
+    const blob = new Blob([csvString], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `export_${new Date().toISOString().replace(/:/g, '-')}.csv`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+  }
 }