Frontend redesign Dashboard and Block Production

frontend/README.md

@@ -4,31 +4,31 @@ This is a simple Angular application that will help you to see the behaviour of
 
 ## Prerequisites
 
-### 1. Node.js v20.11.1
+### 1. Node.js v23.1.0
 
 #### MacOS
 
 ```bash
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-brew install node@20.11.1
+brew install node@23.1.0
 ```
 
 #### Linux
 
 ```bash
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
 source ~/.bashrc
-nvm install 20.11.1
+nvm install 23.1.0
 ```
 
 #### Windows
 
-Download [Node.js v20.11.1](https://nodejs.org/) from the official website, open the installer and follow the prompts to complete the installation.
+Download [Node.js v23.1.0](https://nodejs.org/) from the official website, open the installer and follow the prompts to complete the installation.
 
-### 2. Angular CLI v16.2.0
+### 2. Angular CLI v17.3.0
 
 ```bash
-npm install -g @angular/cli@16.2.0
+npm install -g @angular/cli@17.3.0
 ```
 
 ### 3. Installation

frontend/httpd.conf

@@ -211,9 +211,8 @@ LoadModule rewrite_module modules/mod_rewrite.so
     RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
     RewriteRule ^ - [L]
 
-    # If the requested resource doesn't exist, use index.html
-    RewriteCond %{REQUEST_URI} ^/index\.html$
-    RewriteRule ^(.*)$ $1?bust=$RANDOM [L,QSA]
+    # Rewrite all other requests to index.html
+    RewriteRule ^(.*)$ /index.html [L]
 </IfModule>
 
 SSLProxyEngine On

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",
@@ -42,7 +42,7 @@
     "@ngrx/router-store": "^17.2.0",
     "@ngrx/store": "^17.2.0",
     "@nguniversal/express-engine": "^7.0.2",
-    "@openmina/shared": "^0.108.0",
+    "@openmina/shared": "^0.116.0",
     "@sentry/angular": "^8.35.0",
     "@sentry/cli": "^2.38.2",
     "@sentry/tracing": "^7.114.0",

frontend/src/app/app.component.scss

@@ -2,7 +2,7 @@
 
 mat-sidenav {
   width: 160px;
-  border-right: 1px solid $base-divider;
+  border-right: none;
   background-color: $base-background;
   transition: 200ms ease-out !important;
   visibility: visible !important;
@@ -55,24 +55,31 @@ mat-sidenav-content {
   color: inherit;
   background-color: $base-surface;
 
-  @media (max-width: 699px) {
+  @media (max-width: 767px) {
     background-color: $base-background;
   }
 }
 
 .mina-content {
   $toolbar: 40px;
   height: calc(100% - #{$toolbar});
+  border-top-left-radius: 6px;
+  overflow: hidden;
+  background-color: $base-surface;
 
   &.no-toolbar {
     height: 100%;
   }
 
   &.mobile {
-    $toolbar: 56px;
+    $toolbar: 96px;
     $subMenus: 56px;
     $tabs: 56px;
     height: calc(100% - #{$toolbar} - #{$subMenus} - #{$tabs});
+    margin-left: 4px;
+    margin-right: 4px;
+    margin-bottom: 4px;
+    border-top-right-radius: 6px;
 
     &.no-toolbar {
       height: calc(100% - #{$subMenus} - #{$tabs});

frontend/src/app/app.effects.ts

@@ -89,7 +89,6 @@ export class AppEffects extends BaseEffect {
       filter(() => !this.requestInProgress),
       tap(() => this.requestInProgress = true),
       switchMap(() => this.appService.getActiveNodeDetails()),
-      tap(() => this.requestInProgress = false),
       map(details => AppActions.getNodeDetailsSuccess({ details })),
       catchErrorAndRepeat2(MinaErrorType.GENERIC, AppActions.getNodeDetailsSuccess({
         details: {
@@ -106,6 +105,7 @@ export class AppEffects extends BaseEffect {
           producingBlockStatus: null,
         },
       })),
+      tap(() => this.requestInProgress = false),
     ));
   }
 }

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

@@ -0,0 +1 @@
+<span [tooltip]="'Started ' + startedAgo + ' ago'">{{ epoch }}</span>

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

@@ -0,0 +1,46 @@
+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 { filter } from 'rxjs';
+import { BlockProductionWonSlotsSlot } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
+import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type';
+import { ONE_BILLION, ONE_THOUSAND } from '@openmina/shared';
+import { getTimeDiff } from '@shared/helpers/date.helper';
+
+@Component({
+  selector: 'mina-block-production-won-slots-epoch',
+  templateUrl: './block-production-won-slots-epoch.component.html',
+  styleUrl: './block-production-won-slots-epoch.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'h-lg pl-12 f-600 fx-row-vert-cent border-bottom' },
+})
+export class BlockProductionWonSlotsEpochComponent extends StoreDispatcher implements OnInit {
+  epoch: string;
+  startedAgo: string;
+
+  ngOnInit(): void {
+    this.listenToEpoch();
+    this.listenToEpoch2();
+  }
+
+  private listenToEpoch(): void {
+    this.select(BlockProductionWonSlotsSelectors.slots, (slots: BlockProductionWonSlotsSlot[]) => {
+      this.epoch = 'Epoch ' + slots[0].epoch;
+      this.detect();
+    }, filter(slots => slots.length > 0));
+  }
+
+  private listenToEpoch2(): void {
+    this.select(BlockProductionWonSlotsSelectors.epoch, (epoch: BlockProductionWonSlotsEpoch) => {
+      const epochStartTime = this.addMinutesToTimestamp(Math.floor(epoch.currentTime / ONE_BILLION), -(epoch.currentGlobalSlot - epoch.start) * 3);
+      this.startedAgo = getTimeDiff(Math.floor(epochStartTime * ONE_THOUSAND)).diff;
+
+      this.detect();
+    }, filter(Boolean));
+  }
+
+  private addMinutesToTimestamp(timestampInSeconds: number, minutesToAdd: number): number {
+    const secondsToAdd = minutesToAdd * 60;
+    return timestampInSeconds + secondsToAdd;
+  }
+}

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

@@ -8,7 +8,10 @@
 
 <ng-template #left>
   <div class="flex-column h-100">
-    <mina-block-production-won-slots-cards></mina-block-production-won-slots-cards>
+    <mina-block-production-won-slots-epoch></mina-block-production-won-slots-epoch>
+    @if (isDesktop) {
+      <mina-block-production-won-slots-cards></mina-block-production-won-slots-cards>
+    }
     <div class="flex-column flex-1">
       <mina-block-production-won-slots-filters></mina-block-production-won-slots-filters>
       <mina-block-production-won-slots-table class="h-minus-xl"></mina-block-production-won-slots-table>

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

@@ -1,3 +1,14 @@
-mina-block-production-won-slots-cards + div {
+@media (max-width: 767px) {
+  :host ::ng-deep mina-horizontal-resizable-container aside {
+    right: unset !important;
+    transition: left .4s cubic-bezier(.22, 1, .36, 1) !important;
 
+    &.in-view {
+      left: 0;
+    }
+
+    &:not(.in-view) {
+      left: -100%;
+    }
+  }
 }

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

@@ -16,6 +16,7 @@ import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/bl
 export class BlockProductionWonSlotsComponent extends StoreDispatcher implements OnInit, OnDestroy {
 
   showSidePanel: boolean = isDesktop();
+  isDesktop: boolean = isDesktop();
 
   constructor(protected el: ElementRef) { super(); }
 

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

@@ -1,21 +1,16 @@
 import { Injectable } from '@angular/core';
 import { MinaState, selectMinaState } from '@app/app.setup';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { Effect, isDesktop } from '@openmina/shared';
+import { Effect, isDesktop, isMobile } from '@openmina/shared';
 import { EMPTY, map, switchMap } from 'rxjs';
 import { catchErrorAndRepeat2 } from '@shared/constants/store-functions';
 import { MinaErrorType } from '@shared/types/error-preview/mina-error-type.enum';
 import { Store } from '@ngrx/store';
 import { BaseEffect } from '@shared/base-classes/mina-rust-base.effect';
 import { BlockProductionModule } from '@block-production/block-production.module';
 import { BlockProductionWonSlotsService } from '@block-production/won-slots/block-production-won-slots.service';
-import {
-  BLOCK_PRODUCTION_WON_SLOTS_KEY,
-  BlockProductionWonSlotsActions,
-} from '@block-production/won-slots/block-production-won-slots.actions';
-import {
-  BlockProductionWonSlotsStatus,
-} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
+import { BLOCK_PRODUCTION_WON_SLOTS_KEY, BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
+import { BlockProductionWonSlotsStatus } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
 import { Router } from '@angular/router';
 import { Routes } from '@shared/enums/routes.enum';
 import { fromPromise } from 'rxjs/internal/observable/innerFrom';
@@ -51,11 +46,15 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
               const bpState = state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY];
               const activeSlotRoute = bpState.activeSlotRoute;
               let newActiveSlot = slots.find(s => s.globalSlot.toString() === activeSlotRoute);
-              if (!activeSlotRoute || (activeSlotRoute && !newActiveSlot)) {
+              if (
+                (isDesktop() && !activeSlotRoute)
+                || (activeSlotRoute && !newActiveSlot)
+                || (isMobile() && !activeSlotRoute && bpState.slots.length === 0)
+              ) {
                 newActiveSlot = slots.find(s => s.active)
                   ?? slots.find(s => s.status === BlockProductionWonSlotsStatus.Committed)
                   ?? slots.find(s => s.status === BlockProductionWonSlotsStatus.Scheduled)
-                  ?? null;
+                  ?? slots.find(s => !s.status);
               }
               const routes: string[] = [Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS];
               if (

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

@@ -20,6 +20,7 @@ import {
   BlockProductionWonSlotsCardsComponent,
 } from '@block-production/won-slots/cards/block-production-won-slots-cards.component';
 import { SharedModule } from '@shared/shared.module';
+import { BlockProductionWonSlotsEpochComponent } from '@block-production/won-slots/block-production-won-slots-epoch/block-production-won-slots-epoch.component';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import { SharedModule } from '@shared/shared.module';
     BlockProductionWonSlotsSidePanelComponent,
     BlockProductionWonSlotsFiltersComponent,
     BlockProductionWonSlotsCardsComponent,
+    BlockProductionWonSlotsEpochComponent,
   ],
   imports: [
     CommonModule,

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

@@ -59,8 +59,8 @@ export const blockProductionWonSlotsReducer = createReducer(
   on(BlockProductionWonSlotsActions.toggleSidePanel, state => ({
     ...state,
     openSidePanel: !state.openSidePanel,
-    activeSlot: !state.openSidePanel ? state.activeSlot : undefined,
-    activeSlotRoute: !state.openSidePanel ? state.activeSlotRoute : undefined,
+    activeSlot: state.openSidePanel ? undefined : state.activeSlot,
+    activeSlotRoute: state.openSidePanel ? undefined : state.activeSlotRoute,
   })),
   on(BlockProductionWonSlotsActions.close, () => initialState),
 );

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

@@ -5,13 +5,10 @@ import {
   BlockProductionWonSlotsSlot,
   BlockProductionWonSlotsStatus,
 } from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
-import { BlockProductionModule } from '@block-production/block-production.module';
-import { hasValue, nanOrElse, ONE_BILLION, ONE_MILLION } from '@openmina/shared';
+import { hasValue, isDesktop, nanOrElse, ONE_BILLION, ONE_MILLION } from '@openmina/shared';
 import { getTimeDiff } from '@shared/helpers/date.helper';
 import { RustService } from '@core/services/rust.service';
-import {
-  BlockProductionWonSlotsEpoch,
-} from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type';
+import { BlockProductionWonSlotsEpoch } from '@shared/types/block-production/won-slots/block-production-won-slots-epoch.type';
 
 @Injectable({
   providedIn: 'root',
@@ -90,7 +87,7 @@ export class BlockProductionWonSlotsService {
           const futureWonSlots = response.future_won_slots.map((slot: WonSlot) => {
             slot.slot_time = Math.floor(slot.slot_time / ONE_MILLION);
             return {
-              message: 'Upcoming Won Slot',
+              message: this.getMessage({ won_slot: slot } as Attempt),
               age: this.calculateTimeAgo({ won_slot: slot }),
               slotTime: slot.slot_time,
               globalSlot: slot.global_slot,
@@ -120,20 +117,20 @@ export class BlockProductionWonSlotsService {
 
   private getMessage(attempt: Attempt): string {
     if (attempt.active) {
-      return 'Produced';
+      return 'Producing';
     }
     if (attempt.status === BlockProductionWonSlotsStatus.Scheduled) {
-      return 'Production Scheduled';
+      return (isDesktop() ? 'Production ' : '') + 'Scheduled';
     } else if (attempt.status === BlockProductionWonSlotsStatus.Canonical) {
       return 'Produced Block';
     } else if (attempt.status === BlockProductionWonSlotsStatus.Orphaned) {
       return BlockProductionWonSlotsStatus.Orphaned + ' Block';
     } else if (attempt.status === BlockProductionWonSlotsStatus.Discarded) {
       return BlockProductionWonSlotsStatus.Discarded + ' Block';
     } else if (attempt.status === BlockProductionWonSlotsStatus.Committed) {
-      return 'Waiting for Confirmation';
+      return isDesktop() ? 'Waiting for Confirmation' : 'Confirming';
     }
-    return 'Upcoming Won Slot';
+    return (isDesktop() ? 'Upcoming ' : '') + 'Won Slot';
   }
 
   private calculateTimeAgo({ active, won_slot }: { active?: boolean; won_slot: WonSlot }): string {