-
-
+@if ((isPending || nodeIsBootstrapping || isCalculatingVRF || isLoading) && emptySlots) {
+
+
+
+ @if (isPending || isLoading) {
+
Loading
+ } @else if (nodeIsBootstrapping) {
+
Waiting For Sync
+
Only a synced node can calculate block production rights
+ } @else {
+
Calculating Block Producing Rights
+
+ Epoch {{ epoch }} - Slot {{ vrfStats?.evaluated }}/{{ vrfStats?.total }}
+
+ }
-
+} @else {
+
+
+
+
+
+
+ @if (isDesktop) {
+
+ }
+
+
+ @if (!emptySlots) {
+
+ } @else {
+
+
cancel_presentation
+
No won slots yet
+
+ New won slots will appear here when the node receives them
+
+
+ }
+
+
-
-
+
+
+}
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss
index 76009ed69f..053b423114 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.scss
@@ -1,3 +1,18 @@
-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%;
+ }
+ }
+}
+
+.mina-icon {
+ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' -25, 'opsz' 24 !important;
}
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts
index 666a02d44d..15951b189e 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.component.ts
@@ -1,37 +1,73 @@
import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
-import { getMergedRoute, isDesktop, isMobile, MergedRoute } from '@openmina/shared';
-import { debounceTime, filter, fromEvent, skip, take, timer } from 'rxjs';
+import { getMergedRoute, isDesktop, MergedRoute } from '@openmina/shared';
+import { take, timer } from 'rxjs';
import { untilDestroyed } from '@ngneat/until-destroy';
import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
import { AppSelectors } from '@app/app.state';
import { BlockProductionWonSlotsSelectors } from '@block-production/won-slots/block-production-won-slots.state';
+import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type';
+import { animate, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'mina-block-production-won-slots',
templateUrl: './block-production-won-slots.component.html',
styleUrls: ['./block-production-won-slots.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
+ animations: [
+ trigger('fadeInOut', [
+ transition(':enter', [
+ style({ opacity: 0 }),
+ animate('400ms ease-in', style({ opacity: 1 })),
+ ]),
+ transition(':leave', [
+ animate('400ms ease-out', style({ opacity: 0 })),
+ ]),
+ ]),
+ ],
})
export class BlockProductionWonSlotsComponent extends StoreDispatcher implements OnInit, OnDestroy {
showSidePanel: boolean = isDesktop();
+ isDesktop: boolean = isDesktop();
+ nodeIsBootstrapping: boolean = false;
+ isPending: boolean = true;
+ isCalculatingVRF: boolean = false;
+ vrfStats: {
+ evaluated: number;
+ total: number;
+ };
+ epoch: number;
+ emptySlots: boolean = true;
+ isLoading: boolean = true;
constructor(protected el: ElementRef) { super(); }
ngOnInit(): void {
this.listenToActiveNode();
+ this.listenToNodeChange();
timer(10000, 10000)
.pipe(untilDestroyed(this))
.subscribe(() => {
this.dispatch2(BlockProductionWonSlotsActions.getSlots());
});
this.listenToResize();
+ this.listenToActiveEpoch();
+ this.listenToSlots();
+ }
+
+ private listenToNodeChange(): void {
+ this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => {
+ this.nodeIsBootstrapping = node?.status === AppNodeStatus.BOOTSTRAP;
+ this.isPending = node?.status === AppNodeStatus.PENDING;
+ this.detect();
+ });
}
private listenToActiveNode(): void {
this.select(AppSelectors.activeNode, () => {
this.select(getMergedRoute, (data: MergedRoute) => {
+ this.isLoading = true;
this.dispatch2(BlockProductionWonSlotsActions.init({ activeSlotRoute: data.params['id'] }));
}, take(1));
});
@@ -44,6 +80,29 @@ export class BlockProductionWonSlotsComponent extends StoreDispatcher implements
});
}
+ private listenToActiveEpoch(): void {
+ this.select(BlockProductionWonSlotsSelectors.epoch, (activeEpoch) => {
+ this.epoch = activeEpoch?.epochNumber;
+ this.vrfStats = activeEpoch.vrfStats;
+ this.isCalculatingVRF = activeEpoch.vrfStats?.evaluated < activeEpoch.vrfStats?.total;
+ this.detect();
+ });
+ }
+
+ private listenToSlots(): void {
+ this.select(BlockProductionWonSlotsSelectors.slots, (slots) => {
+ const emptySlots = slots.length === 0;
+ if (emptySlots !== this.emptySlots) {
+ this.emptySlots = emptySlots;
+ this.detect();
+ }
+ });
+ this.select(BlockProductionWonSlotsSelectors.serverResponded, (responded) => {
+ this.isLoading = !responded;
+ this.detect();
+ });
+ }
+
override ngOnDestroy(): void {
super.ngOnDestroy();
this.dispatch2(BlockProductionWonSlotsActions.close());
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts
index 6cb1e24b4f..68f2412866 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.effects.ts
@@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { MinaState, selectMinaState } from '@app/app.setup';
import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { Effect } 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';
@@ -9,13 +9,8 @@ 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';
@@ -27,6 +22,7 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
readonly init$: Effect;
readonly getSlots$: Effect;
+ readonly setActiveSlotNumber$: Effect;
constructor(private router: Router,
private actions$: Actions,
@@ -47,17 +43,26 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
? EMPTY
: this.wonSlotsService.getSlots().pipe(
switchMap(({ slots, epoch }) => {
- const activeSlotRoute = state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY].activeSlotRoute;
+ 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 (newActiveSlot) {
- routes.push(newActiveSlot.globalSlot.toString());
+ if (
+ newActiveSlot && isDesktop()
+ || (activeSlotRoute && !bpState.activeSlot)
+ || (activeSlotRoute && bpState.openSidePanel)
+ ) {
+ routes.push(newActiveSlot?.globalSlot.toString() ?? '');
}
return fromPromise(this.router.navigate(routes, { queryParamsHandling: 'merge' })).pipe(map(() => ({
slots,
@@ -74,5 +79,13 @@ export class BlockProductionWonSlotsEffects extends BaseEffect {
activeSlot: undefined,
})),
));
+
+ this.setActiveSlotNumber$ = createEffect(() => this.actions$.pipe(
+ ofType(BlockProductionWonSlotsActions.setActiveSlotNumber),
+ this.latestActionState(),
+ map(({ action, state }) => BlockProductionWonSlotsActions.setActiveSlot({
+ slot: state.blockProduction[BLOCK_PRODUCTION_WON_SLOTS_KEY].slots.find(s => s.globalSlot === action.slotNumber),
+ })),
+ ));
}
}
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts
index df36ef612c..ce1b55df9c 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.module.ts
+++ b/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,
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts
index 9243daa5f7..8cd720605e 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.reducer.ts
@@ -1,6 +1,6 @@
import { createReducer, on } from '@ngrx/store';
import { BlockProductionWonSlotsState } from '@block-production/won-slots/block-production-won-slots.state';
-import { isMobile, sort, SortDirection, TableSort } from '@openmina/shared';
+import { isDesktop, isMobile, sort, SortDirection, TableSort } from '@openmina/shared';
import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
import {
BlockProductionWonSlotsSlot,
@@ -24,6 +24,7 @@ const initialState: BlockProductionWonSlotsState = {
sortBy: 'slotTime',
sortDirection: SortDirection.ASC,
},
+ serverResponded: false,
};
export const blockProductionWonSlotsReducer = createReducer(
@@ -31,6 +32,7 @@ export const blockProductionWonSlotsReducer = createReducer(
on(BlockProductionWonSlotsActions.init, (state, { activeSlotRoute }) => ({
...state,
activeSlotRoute,
+ serverResponded: false,
})),
on(BlockProductionWonSlotsActions.getSlotsSuccess, (state, { slots, epoch, activeSlot }) => ({
...state,
@@ -38,7 +40,8 @@ export const blockProductionWonSlotsReducer = createReducer(
epoch,
filteredSlots: filterSlots(sortSlots(slots, state.sort), state.filters),
activeSlot,
- openSidePanel: !!activeSlot,
+ openSidePanel: state.activeSlot ? state.openSidePanel : isDesktop(),
+ serverResponded: true,
})),
on(BlockProductionWonSlotsActions.setActiveSlot, (state, { slot }) => ({
...state,
@@ -56,7 +59,12 @@ export const blockProductionWonSlotsReducer = createReducer(
filters,
filteredSlots: filterSlots(sortSlots(state.slots, state.sort), filters),
})),
- on(BlockProductionWonSlotsActions.toggleSidePanel, state => ({ ...state, openSidePanel: !state.openSidePanel })),
+ on(BlockProductionWonSlotsActions.toggleSidePanel, state => ({
+ ...state,
+ openSidePanel: !state.openSidePanel,
+ activeSlot: state.openSidePanel ? undefined : state.activeSlot,
+ activeSlotRoute: state.openSidePanel ? undefined : state.activeSlotRoute,
+ })),
on(BlockProductionWonSlotsActions.close, () => initialState),
);
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts
index fb6e7bfbab..fa83219e63 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.service.ts
@@ -5,16 +5,13 @@ 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: BlockProductionModule,
+ providedIn: 'root',
})
export class BlockProductionWonSlotsService {
@@ -25,11 +22,11 @@ export class BlockProductionWonSlotsService {
.pipe(
map((response: WonSlotResponse) => {
if (!response) {
- throw new Error('Empty response from /stats/block_producer');
+ return { slots: [], epoch: undefined };
}
const attemptsSlots = response.attempts.map((attempt: Attempt) => {
attempt.won_slot.slot_time = Math.floor(attempt.won_slot.slot_time / ONE_MILLION); // converted to milliseconds
- attempt.active = BlockProductionWonSlotsService.getActive(attempt);
+ attempt.active = this.getActive(attempt);
let slot = {
epoch: attempt.won_slot.epoch,
message: this.getMessage(attempt),
@@ -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,
@@ -102,17 +99,22 @@ export class BlockProductionWonSlotsService {
return {
slots: [...attemptsSlots, ...futureWonSlots],
epoch: {
+ epochNumber: response.current_epoch,
start: response.epoch_start,
end: response.epoch_end,
currentGlobalSlot: response.current_global_slot,
currentTime: response.current_time,
+ vrfStats: {
+ evaluated: response.current_epoch_vrf_stats?.evaluated_slots,
+ total: response.current_epoch_vrf_stats?.total_slots,
+ },
},
};
}),
);
}
- private static getActive(attempt: Attempt): boolean {
+ private getActive(attempt: Attempt): boolean {
const slotTime = attempt.won_slot.slot_time;
const now = Date.now();
return slotTime <= now && (now < 3 * 60 * 1000 + slotTime) && !attempt.times?.discarded;
@@ -120,10 +122,10 @@ 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) {
@@ -131,9 +133,9 @@ export class BlockProductionWonSlotsService {
} 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 {
@@ -158,6 +160,17 @@ export interface WonSlotResponse {
current_time: number;
epoch_end: number;
epoch_start: number;
+ current_epoch: number;
+ current_epoch_vrf_stats: {
+ evaluated_slots: number;
+ total_slots: number;
+ };
+ vrf_stats: {
+ [epochNumber: string]: {
+ evaluated_slots: number;
+ total_slots: number;
+ };
+ };
}
interface Attempt {
diff --git a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts
index 1a0f211b2a..f97282a156 100644
--- a/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts
+++ b/frontend/src/app/features/block-production/won-slots/block-production-won-slots.state.ts
@@ -21,6 +21,7 @@ export interface BlockProductionWonSlotsState {
openSidePanel: boolean;
filters: BlockProductionWonSlotsFilters;
sort: TableSort
;
+ serverResponded: boolean;
}
@@ -36,6 +37,7 @@ const activeSlot = select(state => state.activeSlot);
const filters = select(state => state.filters);
const sort = select(state => state.sort);
const openSidePanel = select(state => state.openSidePanel);
+const serverResponded = select(state => state.serverResponded);
export const BlockProductionWonSlotsSelectors = {
epoch,
@@ -45,4 +47,5 @@ export const BlockProductionWonSlotsSelectors = {
filters,
sort,
openSidePanel,
+ serverResponded,
};
diff --git a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html
index 37d961d2b3..e20de21d1f 100644
--- a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html
+++ b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.html
@@ -2,38 +2,31 @@
-
diff --git a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts
index bc5a056ce0..57c63f1808 100644
--- a/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts
+++ b/frontend/src/app/features/block-production/won-slots/cards/block-production-won-slots-cards.component.ts
@@ -22,12 +22,11 @@ import { BlockProductionWonSlotsActions } from '@block-production/won-slots/bloc
})
export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher implements OnInit {
- card1: { epoch: number; startedAgo: string; } = { epoch: null, startedAgo: null };
- card2: { nextWonSlot: string; slot: number; } = { nextWonSlot: '-', slot: null };
- card3: { wonSlots: number; slotsUsed: number; } = { wonSlots: null, slotsUsed: null };
- card4: { acceptedBlocks: number; lastBlockTime: string; } = { acceptedBlocks: null, lastBlockTime: null };
- card5: { epochProgress: string; endIn: string; } = { epochProgress: '-', endIn: null };
- card6: { totalRewards: string; } = { totalRewards: null };
+ card1: { nextWonSlot: string; slot: number; } = { nextWonSlot: '-', slot: null };
+ card2: { wonSlots: number; slotsUsed: number; } = { wonSlots: null, slotsUsed: null };
+ card3: { acceptedBlocks: number; lastBlockTime: string; } = { acceptedBlocks: null, lastBlockTime: null };
+ card4: { epochProgress: string; endIn: string; } = { epochProgress: '-', endIn: null };
+ card5: { totalRewards: string; } = { totalRewards: null };
ngOnInit(): void {
this.listenToSlots();
@@ -36,12 +35,9 @@ export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher imple
private listenToEpoch(): void {
this.select(BlockProductionWonSlotsSelectors.epoch, (epoch: BlockProductionWonSlotsEpoch) => {
- const epochStartTime = this.addMinutesToTimestamp(Math.floor(epoch.currentTime / ONE_BILLION), -(epoch.currentGlobalSlot - epoch.start) * 3);
- this.card1.startedAgo = getTimeDiff(Math.floor(epochStartTime * ONE_THOUSAND)).diff;
-
const epochEndTime = this.addMinutesToTimestamp(epoch.currentTime / ONE_BILLION, (epoch.end - epoch.currentGlobalSlot) * 3);
- this.card5.endIn = getTimeDiff(epochEndTime * ONE_THOUSAND).diff;
- this.card5.epochProgress = Math.floor((epoch.currentGlobalSlot - epoch.start) / (epoch.end - epoch.start) * 100) + '%';
+ this.card4.endIn = getTimeDiff(epochEndTime * ONE_THOUSAND).diff;
+ this.card4.epochProgress = Math.floor((epoch.currentGlobalSlot - epoch.start) / (epoch.end - epoch.start) * 100) + '%';
this.detect();
}, filter(Boolean));
@@ -49,29 +45,28 @@ export class BlockProductionWonSlotsCardsComponent extends StoreDispatcher imple
private listenToSlots(): void {
this.select(BlockProductionWonSlotsSelectors.slots, (slots: BlockProductionWonSlotsSlot[]) => {
- this.card1.epoch = slots[0].epoch;
const nextSlot = slots.find(s => s.status === BlockProductionWonSlotsStatus.Scheduled || !s.status);
if (nextSlot) {
- this.card2.nextWonSlot = getTimeDiff(nextSlot.slotTime).diff;
- this.card2.slot = nextSlot.globalSlot;
+ this.card1.nextWonSlot = getTimeDiff(nextSlot.slotTime).diff;
+ this.card1.slot = nextSlot.globalSlot;
} else {
- this.card2.nextWonSlot = 'Now';
- this.card2.slot = slots.find(s => s.active)?.globalSlot;
+ this.card1.nextWonSlot = 'Now';
+ this.card1.slot = slots.find(s => s.active)?.globalSlot;
}
- this.card3.wonSlots = slots.length;
- this.card3.slotsUsed = slots.filter(
+ this.card2.wonSlots = slots.length;
+ this.card2.slotsUsed = slots.filter(
s => [BlockProductionWonSlotsStatus.Canonical, BlockProductionWonSlotsStatus.Orphaned, BlockProductionWonSlotsStatus.Discarded].includes(s.status),
).length;
- this.card4.acceptedBlocks = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical).length;
- this.card4.lastBlockTime = getTimeDiff(lastItem(slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical))?.slotTime).diff;
+ this.card3.acceptedBlocks = slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical).length;
+ this.card3.lastBlockTime = getTimeDiff(lastItem(slots.filter(s => s.status === BlockProductionWonSlotsStatus.Canonical))?.slotTime).diff;
- this.card6.totalRewards = slots
+ this.card5.totalRewards = slots
.filter(s => [BlockProductionWonSlotsStatus.Canonical].includes(s.status))
.map(s => s.coinbaseRewards + s.txFeesRewards).reduce((a, b) => a + b, 0).toFixed(0);
- this.card6.totalRewards = isNaN(+this.card6.totalRewards) ? '0' : this.card6.totalRewards;
+ this.card5.totalRewards = isNaN(+this.card5.totalRewards) ? '0' : this.card5.totalRewards;
this.detect();
}, filter(slots => slots.length > 0));
}
diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html
index 4c48efdc23..dc6ca90815 100644
--- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html
+++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.html
@@ -1,13 +1,19 @@
-
-
{{ title }}
+
+
+ @if (isMobile) {
+
+ }
+
{{ title }}
+
@if (percentage !== null && percentage !== undefined) {
{{ percentage }}%
}
- @if (isMobile) {
-
close
- }
-
+
Global slot
diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss
index d2b6dceb15..bb189a824f 100644
--- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss
+++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.scss
@@ -1,10 +1,23 @@
@import 'openmina';
+$blue: #57d7ff;
+$pink: #fda2ff;
+$orange: #ff833d;
+
+:host {
+ //linear-gradient(64deg, rgba(87, 215, 255, 0.15) 10%, rgba(253, 162, 255, 0.15) 60%, rgba(255, 131, 61, 0.15) 82%)
+ background: linear-gradient(70deg, rgba($blue, .15) 5%, rgba($pink, .15) 45%, rgba($orange, .15) 90%);
+}
+
+.top {
+ border-bottom: 2px solid transparent;
+}
+
.progress-bar {
overflow: hidden;
height: 6px;
left: 0;
- bottom: 0;
+ bottom: -3px;
transition: width 0.4s ease-in-out;
min-width: 20px;
diff --git a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts
index 6183ba1631..486440ef00 100644
--- a/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts
+++ b/frontend/src/app/features/block-production/won-slots/side-panel/block-production-won-slots-side-panel.component.ts
@@ -1,12 +1,4 @@
-import {
- ChangeDetectionStrategy,
- Component,
- OnDestroy,
- OnInit,
- TemplateRef,
- ViewChild,
- ViewContainerRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef } 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 {
@@ -15,25 +7,20 @@ import {
BlockProductionWonSlotTimes,
} from '@shared/types/block-production/won-slots/block-production-won-slots-slot.type';
import { getTimeDiff } from '@shared/helpers/date.helper';
-import {
- any,
- hasValue,
- isMobile,
- noMillisFormat,
- ONE_THOUSAND,
- SecDurationConfig,
- toReadableDate,
-} from '@openmina/shared';
+import { any, hasValue, isDesktop, isMobile, noMillisFormat, ONE_THOUSAND, safelyExecuteInBrowser, SecDurationConfig, toReadableDate } from '@openmina/shared';
import { filter } from 'rxjs';
import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
import { AppSelectors } from '@app/app.state';
import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
+import { Router } from '@angular/router';
+import { Routes } from '@shared/enums/routes.enum';
@Component({
selector: 'mina-block-production-won-slots-side-panel',
templateUrl: './block-production-won-slots-side-panel.component.html',
styleUrls: ['./block-production-won-slots-side-panel.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
+ host: { class: 'flex-column h-100' },
})
export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher implements OnInit, OnDestroy {
@@ -70,6 +57,8 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
@ViewChild('discarded') private discardedTemplate: TemplateRef
;
+ constructor(private router: Router) {super();}
+
ngOnInit(): void {
this.listenToActiveSlot();
this.parseRemainingTime();
@@ -119,7 +108,7 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
viewInMinaExplorer(): void {
const network = this.minaExplorer !== 'mainnet' ? (this.minaExplorer + '.') : '';
const url = `https://${network}minaexplorer.com/block/${this.slot.hash}`;
- window.open(url, '_blank');
+ safelyExecuteInBrowser(() => window.open(url, '_blank'));
}
private get getVrfText(): string {
@@ -198,6 +187,7 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
}
closeSidePanel(): void {
+ this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS]);
this.dispatch2(BlockProductionWonSlotsActions.toggleSidePanel());
}
@@ -205,4 +195,5 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
super.ngOnDestroy();
clearInterval(this.timer);
}
+
}
diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html
index 3e42122963..1c4d6d44ca 100644
--- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html
+++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.html
@@ -6,7 +6,7 @@
*ngIf="row.active || row.status === BlockProductionWonSlotsStatus.Committed; else icon">
schedule
+ class="schedule mina-icon icon-200 f-20">schedule
circle
diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss
index 25d6f79317..f8fc4575fc 100644
--- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss
+++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.scss
@@ -1,5 +1,9 @@
@import 'openmina';
+$blue: #57d7ff;
+$pink: #fda2ff;
+$orange: #ff833d;
+
.mina-icon.f-big {
font-variation-settings: 'FILL' 1, 'wght' 400 !important;
}
@@ -36,6 +40,21 @@
border-color: $selected-primary !important;
border-top-color: transparent !important;
}
+
+ .schedule,
+ .Scheduled,
+ .Producing {
+ background: linear-gradient(5deg, $blue 30%, $pink 55%, $orange 100%);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .schedule {
+ @media (max-width: 767px) {
+ font-size: 16px !important;
+ }
+ }
}
.fx-row-vert-cent {
diff --git a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts
index 0334986ccb..4f23b56c9c 100644
--- a/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts
+++ b/frontend/src/app/features/block-production/won-slots/table/block-production-won-slots-table.component.ts
@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MinaTableRustWrapper } from '@shared/base-classes/mina-table-rust-wrapper.class';
-import { getMergedRoute, MergedRoute, SecDurationConfig, TableColumnList } from '@openmina/shared';
+import { getMergedRoute, isDesktop, MergedRoute, SecDurationConfig, TableColumnList } from '@openmina/shared';
import { Router } from '@angular/router';
import { SnarksWorkPoolToggleSidePanel } from '@snarks/work-pool/snarks-work-pool.actions';
import { filter, take } from 'rxjs';
@@ -57,7 +57,7 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper<
}
protected override setupTable(): void {
- this.table.gridTemplateColumns = [210, 140, 90, 140, 120, 120, 120, 120, 150, 150];
+ this.table.gridTemplateColumns = isDesktop() ? [210, 140, 90, 142, 120, 120, 120, 124, 159, 150] : [150, 100, 90, 130, 100, 105, 100, 114, 139, 130];
this.table.propertyForActiveCheck = 'globalSlot';
this.table.thGroupsTemplate = this.thGroupsTemplate;
this.table.sortAction = BlockProductionWonSlotsActions.sort;
@@ -96,7 +96,7 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper<
this.table.activeRow = slot;
this.table.detect();
this.detect();
- }, filter(Boolean));
+ });
}
private scrollToElement(): void {
@@ -107,11 +107,11 @@ export class BlockProductionWonSlotsTableComponent extends MinaTableRustWrapper<
this.onRowClick(this.table.rows[i]);
}
- protected override onRowClick(slot: BlockProductionWonSlotsSlot): void {
+ protected override onRowClick(slot: BlockProductionWonSlotsSlot, isRealClick?: boolean): void {
if (!slot) {
return;
}
- if (this.table.activeRow?.globalSlot !== slot?.globalSlot) {
+ if (this.table.activeRow?.globalSlot !== slot?.globalSlot || isRealClick) {
this.dispatch2(BlockProductionWonSlotsActions.setActiveSlot({ slot }));
this.router.navigate([Routes.BLOCK_PRODUCTION, Routes.WON_SLOTS, slot.globalSlot], { queryParamsHandling: 'merge' });
}
diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html
index 46037f53df..0e89fd94b9 100644
--- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html
+++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.html
@@ -1,38 +1,46 @@
-
-
-
Last 290 blocks
-
{{ syncProgress }}
-
-
-
+
+
+
+ @if (appliedPercentage === 100) {
+
check_circle
+ } @else {
+
+ }
+
Last 290 blocks
+
{{ remaining ? 'ETA ~' + remaining + 's' : syncProgress }}
-
+
diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss
index 51d9324e02..687cb478cd 100644
--- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.scss
@@ -1,42 +1,16 @@
-@import 'openmina';
-.progress-bar {
- overflow: hidden;
- height: 6px;
- left: 0;
- bottom: 0;
- transition: width 0.6s ease-in-out;
- min-width: 20px;
-
- .highlight {
- height: 4px;
- top: 1px;
- left: -50px;
- width: 50px;
- background: radial-gradient($success-primary, $success-primary, $success-primary, $success-primary, transparent, transparent);
- border-radius: 20px;
- animation: move 9s linear infinite;
+:host {
+ .mina-icon {
+ font-variation-settings: 'FILL' 1, 'wght' 300 !important;
}
- .progress {
- height: 2px;
- background-color: $success-primary;
- top: 2px;
- left: 0;
- }
-}
+ @media (max-width: 767px) {
+ .mobile mina-card {
+ width: 33.333%;
-@keyframes move {
- 0% {
- left: -50px;
- }
- 10% {
- left: -50px;
- }
- 80% {
- left: 100%;
- }
- 100% {
- left: 100%;
+ &:not(:first-child) {
+ padding-left: 10px !important;
+ }
+ }
}
}
diff --git a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts
index bd29e3cb04..465b5bdbd4 100644
--- a/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts
+++ b/frontend/src/app/features/dashboard/dashboard-blocks-sync/dashboard-blocks-sync.component.ts
@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
import { selectDashboardNodesAndPeers } from '@dashboard/dashboard.state';
import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
-import { filter } from 'rxjs';
import { NodesOverviewNodeBlockStatus } from '@shared/types/nodes/dashboard/nodes-overview-block.type';
-import { lastItem, ONE_MILLION } from '@openmina/shared';
+import { isDesktop, lastItem, ONE_MILLION } from '@openmina/shared';
import { DashboardPeer } from '@shared/types/dashboard/dashboard.peer';
+import { SentryService } from '@core/services/sentry.service';
const PENDING = 'Pending';
const SYNCED = 'Synced';
@@ -28,6 +28,12 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
bestTipBlockSyncedText: string = PENDING;
targetBlock: number;
syncProgress: string;
+ isDesktop: boolean = isDesktop();
+ remaining: number;
+
+ private syncStartTime: number = Date.now();
+
+ constructor(private sentryService: SentryService) {super();}
ngOnInit(): void {
this.listenToNodesChanges();
@@ -47,8 +53,36 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
this.targetBlock = undefined;
this.syncProgress = undefined;
} else {
+ const blocks = nodes[0].blocks;
+
+ const blocksFetched = blocks.filter(b => b.fetchEnd).length;
+ const blocksApplied = blocks.filter(b => b.applyEnd).length;
+ if (blocksApplied < 291) {
+
+ const syncStart = Math.min(...blocks.map(b => b.fetchStart).filter(Boolean)) / ONE_MILLION;
+ const now = Date.now();
+ const secondsPassed = (now - syncStart) / 1000;
+
+ const fetchWeight = 1;
+ const applyWeight = 5;
+
+ // Apply weights: 1 for each fetched block, and 5 for each applied block
+ const weightedBlocksTotal = (blocksFetched * fetchWeight) + (blocksApplied * applyWeight);
+ const blocksPerSecond = weightedBlocksTotal / secondsPassed;
+
+ if (blocksPerSecond > 0) {
+ const weightedBlocksRemaining = (291 * fetchWeight) + (291 * applyWeight) - weightedBlocksTotal;
+ const secondsRemaining = weightedBlocksRemaining / blocksPerSecond;
+ this.remaining = Math.ceil(secondsRemaining);
+ }
+ } else {
+ this.remaining = null;
+ }
+
this.extractNodesData(nodes);
this.extractPeersData(peers);
+
+ this.sentryService.updateBlockSyncStatus(nodes[0].blocks, this.syncStartTime);
}
this.detect();
});
@@ -69,6 +103,9 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
this.bestTipBlock = blocks[0].height;
this.bestTipBlockSyncedText = 'Fetched ' + this.calculateProgressTime(nodes[0].bestTipReceivedTimestamp * ONE_MILLION).slice(7);
this.syncProgress = this.bestTipBlockSyncedText.slice(8);
+ if (lastItem(blocks).status !== NodesOverviewNodeBlockStatus.APPLIED) {
+ this.syncProgress = 'Pending';
+ }
}
if (blocks.length === 291) {
@@ -85,8 +122,8 @@ export class DashboardBlocksSyncComponent extends StoreDispatcher implements OnI
this.fetched = blocks.filter(b => ![NodesOverviewNodeBlockStatus.MISSING, NodesOverviewNodeBlockStatus.FETCHING].includes(b.status)).length;
this.applied = blocks.filter(b => b.status === NodesOverviewNodeBlockStatus.APPLIED).length;
- this.fetchedPercentage = Math.round(this.fetched * 100 / 291) + '%';
- this.appliedPercentage = Math.round(this.applied * 100 / 291);
+ this.fetchedPercentage = Math.round(this.fetched * 100 / 290) + '%';
+ this.appliedPercentage = Math.round(this.applied * 100 / 290);
}
private calculateProgressTime(timestamp: number): string {
diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html
index def4089c6b..84703092f4 100644
--- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html
+++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.html
@@ -1,12 +1,14 @@
-
-
-
Ledgers
-
{{ progress }}
-
-
-
+
+
+
+ @if (totalProgress === 100) {
+
check_circle
+ } @else {
+
+ }
+
Ledgers
+
{{ progress }}
Staking ledger
-
{{ stakingProgress | number: '1.0-0' }}%
-
+ @if (stakingProgress === 100) {
+
100%
+ } @else if (remainingStakingLedger) {
+
ETA ~{{ remainingStakingLedger }}s
+ }
Next epoch ledger
-
- {{ nextProgress | number: '1.0-0' }}%
-
+ @if (nextProgress === 100) {
+
100%
+ } @else if (remainingNextLedger) {
+
ETA ~{{ remainingNextLedger }}s
+ }
Snarked ledger at the root
-
- {{ rootSnarkedProgress | number: '1.0-0' }}%
-
+ @if (rootSnarkedProgress === 100) {
+
100%
+ } @else if (remainingRootSnarkedLedger) {
+
ETA ~{{ remainingRootSnarkedLedger }}s
+ }
Staged ledger at the root
-
- {{ rootStagedProgress | number: '1.0-0' }}%
-
+ @if ((rootStagedProgress === 100 || !isWebNode) && rootSnarkedProgress === 100) {
+
{{ rootStagedProgress }}%
+ } @else if (remainingReconstruct && remainingRootStagedLedgerFetchParts + remainingReconstruct) {
+
ETA ~{{ remainingRootStagedLedgerFetchParts + remainingReconstruct }}s
+ }
diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss
index 331b09ebc6..acb2f24ab6 100644
--- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.scss
@@ -1,44 +1,7 @@
@import 'openmina';
-.progress-bar {
- overflow: hidden;
- height: 6px;
- left: 0;
- bottom: 0;
- transition: width 0.6s ease-in-out;
- min-width: 20px;
-
- .highlight {
- height: 4px;
- top: 1px;
- left: -50px;
- width: 50px;
- background: radial-gradient($success-primary, $success-primary, $success-primary, $success-primary, transparent, transparent);
- border-radius: 20px;
- animation: move 9s linear infinite;
- }
-
- .progress {
- height: 2px;
- background-color: $success-primary;
- top: 2px;
- left: 0;
- }
-}
-
-@keyframes move {
- 0% {
- left: -50px;
- }
- 10% {
- left: -50px;
- }
- 80% {
- left: 100%;
- }
- 100% {
- left: 100%;
- }
+.mina-icon {
+ font-variation-settings: 'FILL' 1, 'wght' 300 !important;
}
.group {
@@ -53,7 +16,7 @@
top: -5px;
left: 10px;
width: 1px;
- height: calc(100% - 13px);
+ height: calc(100% + 10px);
background-color: $base-divider;
}
@@ -63,7 +26,7 @@
&::before {
content: '';
position: absolute;
- top: calc(50% - 1px);
+ top: calc(50% + 0px);
left: -29px;
width: 20px;
height: 1px;
@@ -72,6 +35,10 @@
}
}
+ &:last-child .steps::before {
+ height: calc(100% - 13px);
+ }
+
&.pending {
.group-title {
color: $base-tertiary;
@@ -83,9 +50,13 @@
}
&.success {
+ .group-title {
+ color: $success-primary;
+ }
+
.steps::before,
.steps .step::before {
- background-color: $success-tertiary;
+ background-color: $base-tertiary;
}
}
diff --git a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts
index bb4d2ea011..b0c46c1526 100644
--- a/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts
+++ b/frontend/src/app/features/dashboard/dashboard-ledger/dashboard-ledger.component.ts
@@ -1,12 +1,4 @@
-import {
- ChangeDetectionStrategy,
- Component,
- OnDestroy,
- OnInit,
- TemplateRef,
- ViewChild,
- ViewContainerRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
import { selectDashboardNodesAndRpcStats } from '@dashboard/dashboard.state';
import {
@@ -15,12 +7,14 @@ import {
NodesOverviewLedgerStepState,
NodesOverviewRootStagedLedgerStep,
} from '@shared/types/nodes/dashboard/nodes-overview-ledger.type';
-import { filter } from 'rxjs';
import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
import { ONE_MILLION, SecDurationConfig } from '@openmina/shared';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type';
+import { AppSelectors } from '@app/app.state';
+import { MinaNode } from '@shared/types/core/environment/mina-env.type';
+import { SentryService } from '@core/services/sentry.service';
type LedgerConfigMap = {
stakingEpoch: SecDurationConfig,
@@ -85,19 +79,41 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
rootSnarkedProgress: number = 0;
rootStagedProgress: number = 0;
totalProgress: number;
+ isWebNode: boolean;
+
+ private startSync: number = Date.now();
@ViewChild('tooltipRef') private tooltipRef: TemplateRef<{ start: number, end: number }>;
private overlayRef: OverlayRef;
constructor(private overlay: Overlay,
- private viewContainerRef: ViewContainerRef) {
+ private viewContainerRef: ViewContainerRef,
+ private sentryService: SentryService) {
super();
}
ngOnInit(): void {
+ this.listenToActiveNode();
this.listenToNodesChanges();
}
+ private listenToActiveNode(): void {
+ this.select(AppSelectors.activeNode, (node: MinaNode) => {
+ this.isWebNode = node.isWebNode;
+ });
+ }
+
+ remainingStakingLedger: number;
+ private previousStakingLedgerDownloaded: number;
+ remainingNextLedger: number;
+ private previousNextLedgerDownloaded: number;
+ remainingRootSnarkedLedger: number;
+ private previousRootSnarkedLedgerDownloaded: number;
+ remainingRootStagedLedgerFetchParts: number;
+ private previousRootStagedLedgerDownloaded: number;
+ remainingReconstruct: number = 20;
+ private reconstructTimer: any;
+
private listenToNodesChanges(): void {
this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => {
if (nodes.length === 0) {
@@ -132,10 +148,77 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
rootStaged: getConfig(this.ledgers.rootStaged.state),
};
this.setProgressTime();
+
+ const stakingLedgerStartTime = this.ledgers.stakingEpoch.snarked.fetchHashesStart / ONE_MILLION;
+ const currentStakingLedgerDownloaded = rpcStats.stakingLedger?.fetched;
+ if (
+ this.previousStakingLedgerDownloaded && currentStakingLedgerDownloaded &&
+ stakingLedgerStartTime < Date.now()
+ ) {
+ const timeSinceDownloadStarted = Date.now() - stakingLedgerStartTime;
+ const remaining = rpcStats.stakingLedger?.estimation - currentStakingLedgerDownloaded;
+ const remainingTime = (remaining / currentStakingLedgerDownloaded) * timeSinceDownloadStarted;
+ this.remainingStakingLedger = Math.floor(remainingTime / 1000);
+ }
+ this.previousStakingLedgerDownloaded = currentStakingLedgerDownloaded;
+
+ const nextLedgerStartTime = this.ledgers.nextEpoch.snarked.fetchHashesStart / ONE_MILLION;
+ const currentNextLedgerDownloaded = rpcStats.nextLedger?.fetched;
+ if (
+ this.previousNextLedgerDownloaded && currentNextLedgerDownloaded &&
+ nextLedgerStartTime < Date.now()
+ ) {
+ const timeSinceDownloadStarted = Date.now() - nextLedgerStartTime;
+ const remaining = rpcStats.nextLedger?.estimation - currentNextLedgerDownloaded;
+ const remainingTime = (remaining / currentNextLedgerDownloaded) * timeSinceDownloadStarted;
+ this.remainingNextLedger = Math.floor(remainingTime / 1000);
+ }
+ this.previousNextLedgerDownloaded = currentNextLedgerDownloaded;
+
+ const rootSnarkedLedgerStartTime = this.ledgers.rootSnarked.snarked.fetchHashesStart / ONE_MILLION;
+ const currentRootSnarkedLedgerDownloaded = rpcStats.snarkedRootLedger?.fetched;
+ if (
+ this.previousRootSnarkedLedgerDownloaded && currentRootSnarkedLedgerDownloaded &&
+ rootSnarkedLedgerStartTime < Date.now()
+ ) {
+ const timeSinceDownloadStarted = Date.now() - rootSnarkedLedgerStartTime;
+ const remaining = rpcStats.snarkedRootLedger?.estimation - currentRootSnarkedLedgerDownloaded;
+ const remainingTime = (remaining / currentRootSnarkedLedgerDownloaded) * timeSinceDownloadStarted;
+ this.remainingRootSnarkedLedger = Math.floor(remainingTime / 1000);
+ }
+ this.previousRootSnarkedLedgerDownloaded = currentRootSnarkedLedgerDownloaded;
+
+ if (this.isWebNode) {
+ const rootStagedLedgerStartTime = this.ledgers.rootStaged.staged.fetchPartsStart / ONE_MILLION;
+ const currentRootStagedLedgerDownloaded = rpcStats.stagedRootLedger?.fetched;
+ if (
+ this.previousRootStagedLedgerDownloaded && currentRootStagedLedgerDownloaded &&
+ rootStagedLedgerStartTime < Date.now()
+ ) {
+ const timeSinceDownloadStarted = Date.now() - rootStagedLedgerStartTime;
+ const remaining = rpcStats.stagedRootLedger?.estimation - currentRootStagedLedgerDownloaded;
+ const remainingTime = (remaining / currentRootStagedLedgerDownloaded) * timeSinceDownloadStarted;
+ this.remainingRootStagedLedgerFetchParts = Math.floor(remainingTime / 1000);
+ }
+ this.previousRootStagedLedgerDownloaded = currentRootStagedLedgerDownloaded;
+ }
+
this.stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
this.nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
- this.rootSnarkedProgress = rpcStats.rootLedger?.fetched / rpcStats.rootLedger?.estimation * 100 || 0;
- this.rootStagedProgress = this.ledgers.rootStaged.staged.fetchPartsEnd ? 50 : 0;
+ this.rootSnarkedProgress = rpcStats.snarkedRootLedger?.fetched / rpcStats.snarkedRootLedger?.estimation * 100 || 0;
+
+ this.rootStagedProgress = 0;
+ if (this.ledgers.rootStaged.staged.fetchPartsEnd) {
+ this.rootStagedProgress += 50;
+ }
+ if (this.ledgers.rootStaged.staged.reconstructEnd) {
+ this.rootStagedProgress += 50;
+ }
+ if (this.rootStagedProgress < 100 && this.isWebNode && this.ledgers.rootStaged.staged.fetchPartsEnd && !this.reconstructTimer) {
+ this.startTimerForReconstruct();
+ } else if (this.rootStagedProgress === 100) {
+ clearTimeout(this.reconstructTimer);
+ }
if (this.ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
this.stakingProgress = 100;
@@ -150,11 +233,23 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
this.rootStagedProgress = 100;
}
this.totalProgress = (this.stakingProgress + this.nextProgress + this.rootSnarkedProgress + this.rootStagedProgress) / 4;
+
+ this.sentryService.updateLedgerSyncStatus(this.ledgers);
}
this.detect();
});
}
+ startTimerForReconstruct(): void {
+ this.reconstructTimer = setInterval(() => {
+ this.remainingReconstruct = this.remainingReconstruct - 1;
+ this.detect();
+ if (this.remainingReconstruct === Math.floor(Math.random() * 2) + 2) {
+ clearTimeout(this.reconstructTimer);
+ }
+ }, 1000);
+ }
+
show(event: MouseEvent, start: number, end: number): void {
if (this.overlayRef?.hasAttached()) {
this.overlayRef.detach();
@@ -183,9 +278,7 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
}
hide(): void {
- if (this.overlayRef?.hasAttached()) {
- this.overlayRef.detach();
- }
+ this.overlayRef?.dispose();
}
private get emptyConfig(): SecDurationConfig {
@@ -205,11 +298,6 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
};
}
- override ngOnDestroy(): void {
- super.ngOnDestroy();
- this.hide();
- }
-
private setProgressTime(): void {
if (!this.ledgers.stakingEpoch.snarked.fetchHashesStart) {
return;
@@ -238,4 +326,9 @@ export class DashboardLedgerComponent extends StoreDispatcher implements OnInit,
return `${action} <1m ago`;
}
}
+
+ override ngOnDestroy(): void {
+ super.ngOnDestroy();
+ this.hide();
+ }
}
diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html
index cc24d97e3d..6b758e9783 100644
--- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html
+++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.html
@@ -1,19 +1,13 @@
-
-
-
-
-
Peers
-
+
+
+ @if (stats.connected) {
+
check_circle
+ } @else {
+
+ }
+
Peers
-
+
-
-
-
- account_tree
-
-
-
diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss
index 818da2c61d..6e1afba0ea 100644
--- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.scss
@@ -1,60 +1,3 @@
-@import 'openmina';
-
-:host {
- max-width: 384px;
-}
-
-.loading-icon {
- animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
- 0% {
- transform: rotate(0);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-
-.progress-bar {
- overflow: hidden;
- height: 6px;
- left: 0;
- bottom: 0;
- transition: width 0.6s ease-in-out;
- min-width: 20px;
-
- .highlight {
- height: 4px;
- top: 1px;
- left: -50px;
- width: 50px;
- background: radial-gradient($success-primary, $success-primary, $success-primary, $success-primary, transparent, transparent);
- border-radius: 20px;
- animation: move 9s linear infinite;
- }
-
- .progress {
- height: 2px;
- background-color: $success-primary;
- top: 2px;
- left: 0;
- }
-}
-
-@keyframes move {
- 0% {
- left: -50px;
- }
- 10% {
- left: -50px;
- }
- 80% {
- left: 100%;
- }
- 100% {
- left: 100%;
- }
+.mina-icon {
+ font-variation-settings: 'FILL' 1, 'wght' 300 !important;
}
diff --git a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts
index 3c8b63e204..ff47a7e17f 100644
--- a/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts
+++ b/frontend/src/app/features/dashboard/dashboard-network/dashboard-network.component.ts
@@ -3,7 +3,6 @@ import { DashboardPeersStats } from '@shared/types/dashboard/dashboard-peers-sta
import { selectDashboardPeersStats } from '@dashboard/dashboard.state';
import { skip } from 'rxjs';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
-import { NodesOverviewLedgerStepState } from '@shared/types/nodes/dashboard/nodes-overview-ledger.type';
@Component({
selector: 'mina-dashboard-network',
diff --git a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss
index bb3787a918..53e4ca2058 100644
--- a/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard-peers-minimal-table/dashboard-peers-minimal-table.component.scss
@@ -14,6 +14,7 @@
:host ::ng-deep cdk-virtual-scroll-viewport {
overflow-y: auto !important;
+ border-bottom: none !important;
}
.fx-row-vert-cent {
diff --git a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.html b/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.html
deleted file mode 100644
index 549dcca28f..0000000000
--- a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
-
-
- margin
-
-
-
diff --git a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.scss b/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.scss
deleted file mode 100644
index 17d80cb52d..0000000000
--- a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import 'openmina';
-
-.tracing-container {
- gap: 8px;
-
- mina-dashboard-ledger {
- width: 100%;
- max-width: 410px;
- min-width: 250px;
- }
-
- mina-dashboard-blocks-sync {
- width: 100%;
- max-width: 640px;
- }
-
- @media (max-width: 1374px) {
- display: flex;
- flex-direction: column;
- }
-}
-
-.loading-icon {
- animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
- 0% {
- transform: rotate(0);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
diff --git a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.ts b/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.ts
deleted file mode 100644
index 7af4da1482..0000000000
--- a/frontend/src/app/features/dashboard/dashboard-transition-frontier/dashboard-transition-frontier.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
-import { selectDashboardNodes } from '@dashboard/dashboard.state';
-import { NodesOverviewNode, NodesOverviewNodeKindType } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
-
-@Component({
- selector: 'mina-dashboard-transition-frontier',
- templateUrl: './dashboard-transition-frontier.component.html',
- styleUrls: ['./dashboard-transition-frontier.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- host: { class: 'flex-column flex-1' },
-})
-export class DashboardTransitionFrontierComponent extends StoreDispatcher implements OnInit {
-
- loading: boolean = true;
-
- ngOnInit(): void {
- this.listenToNodesChanges();
- }
-
- private listenToNodesChanges(): void {
- this.select(selectDashboardNodes, (nodes: NodesOverviewNode[]) => {
- this.loading = !nodes.length || nodes[0].kind !== NodesOverviewNodeKindType.SYNCED;
- this.detect();
- });
- }
-}
diff --git a/frontend/src/app/features/dashboard/dashboard.component.html b/frontend/src/app/features/dashboard/dashboard.component.html
index 97e54aa457..7e2a718d84 100644
--- a/frontend/src/app/features/dashboard/dashboard.component.html
+++ b/frontend/src/app/features/dashboard/dashboard.component.html
@@ -1,4 +1,18 @@
-
+
+
diff --git a/frontend/src/app/features/dashboard/dashboard.component.scss b/frontend/src/app/features/dashboard/dashboard.component.scss
index cd151fd9f7..6f38a175ae 100644
--- a/frontend/src/app/features/dashboard/dashboard.component.scss
+++ b/frontend/src/app/features/dashboard/dashboard.component.scss
@@ -4,6 +4,89 @@
background-color: $base-background;
}
-div {
+.comps {
gap: 8px;
+ padding-right: 8px;
+}
+
+mina-dashboard-network {
+ max-width: 384px;
+}
+
+mina-dashboard-ledger {
+ width: 100%;
+ max-width: 384px;
+ min-width: 250px;
+}
+
+mina-dashboard-blocks-sync {
+ width: 100%;
+ max-width: 644px;
+}
+
+@media (max-width: 767px) {
+ mina-dashboard-network,
+ mina-dashboard-ledger,
+ mina-dashboard-blocks-sync {
+ max-width: 100%;
+ }
+}
+
+.header {
+ transition: height .6s ease-in, opacity .4s .4s ease-in;
+
+ &.hide {
+ height: 0 !important;
+ opacity: 0;
+ }
+
+ @media (max-width: 767px) {
+ &.hide {
+ height: 8px !important;
+ }
+ .primary {
+ padding-left: 4px;
+ }
+ }
+}
+
+.progress-bar {
+ overflow: hidden;
+ height: 4px;
+ left: 0;
+ top: -2px;
+ transition: width 0.6s ease-in-out;
+ min-width: 20px;
+
+ .highlight {
+ height: 4px;
+ top: 1px;
+ left: -50px;
+ width: 50px;
+ background: radial-gradient($success-primary, $success-primary, $success-primary, $success-primary, transparent, transparent);
+ border-radius: 20px;
+ animation: move 9s linear infinite;
+ }
+
+ .progress {
+ height: 2px;
+ background-color: $success-primary;
+ top: 2px;
+ left: 0;
+ }
+}
+
+@keyframes move {
+ 0% {
+ left: -50px;
+ }
+ 10% {
+ left: -50px;
+ }
+ 80% {
+ left: 100%;
+ }
+ 100% {
+ left: 100%;
+ }
}
diff --git a/frontend/src/app/features/dashboard/dashboard.component.ts b/frontend/src/app/features/dashboard/dashboard.component.ts
index cc2dbaaf7e..1ff872cf57 100644
--- a/frontend/src/app/features/dashboard/dashboard.component.ts
+++ b/frontend/src/app/features/dashboard/dashboard.component.ts
@@ -1,33 +1,162 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
import { DashboardGetData, DashboardInit } from '@dashboard/dashboard.actions';
-import { filter, skip, tap, timer } from 'rxjs';
-import { untilDestroyed } from '@ngneat/until-destroy';
+import { filter, skip, Subscription, tap, timer } from 'rxjs';
import { AppSelectors } from '@app/app.state';
+import { selectDashboardNodesAndRpcStats, selectDashboardPeersStats } from '@dashboard/dashboard.state';
+import { DashboardPeersStats } from '@shared/types/dashboard/dashboard-peers-stats.type';
+import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
+import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type';
+import { NodesOverviewLedgerStepState } from '@shared/types/nodes/dashboard/nodes-overview-ledger.type';
+import { NodesOverviewNodeBlockStatus } from '@shared/types/nodes/dashboard/nodes-overview-block.type';
+import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type';
+import { untilDestroyed } from '@ngneat/until-destroy';
@Component({
selector: 'mina-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
- host: { class: 'h-100 w-100 flex-row' },
+ host: { class: 'h-100 w-100 flex-column' },
})
-export class DashboardComponent extends StoreDispatcher implements OnInit {
+export class DashboardComponent extends StoreDispatcher implements OnInit, OnDestroy {
+
+ updateAction: string;
+ updateDetail: string;
+ connectedProgress: number = 0;
+ ledgerProgress: number = 0;
+ blockSyncProgress: number = 0;
+
+ private connected: boolean = false;
+ timer: Subscription;
+ lastStatus: AppNodeStatus;
ngOnInit(): void {
+ // this.document.getElementById('mina-content').style.borderTopLeftRadius = '0';
+ this.updateAction = 'Connecting to peers';
+
this.listenToNodeChanging();
+ this.listenToPeersChanges();
+ this.getDashboardData();
+ this.listenToNodesChanges();
+ }
+
+ private getDashboardData(): void {
this.dispatch(DashboardInit);
- timer(4000, 4000)
- .pipe(
- tap(() => this.dispatch(DashboardGetData)),
- untilDestroyed(this),
- )
- .subscribe();
+ this.resetTimer();
}
private listenToNodeChanging(): void {
this.select(AppSelectors.activeNode, () => {
this.dispatch(DashboardGetData, { force: true });
- }, filter(Boolean), skip(1), untilDestroyed(this));
+ }, filter(Boolean), skip(1));
+ this.select(AppSelectors.activeNodeDetails, (details: AppNodeDetails) => {
+ if (this.lastStatus !== details.status) {
+ this.lastStatus = details.status;
+ this.resetTimer();
+ }
+ });
+ }
+
+ private resetTimer(): void {
+ this.timer?.unsubscribe();
+ const timerInterval = this.lastStatus === AppNodeStatus.SYNCED || this.lastStatus === AppNodeStatus.OFFLINE ? 5000 : 1000;
+ this.timer = timer(timerInterval, timerInterval)
+ .pipe(
+ tap(() => this.dispatch(DashboardGetData)),
+ untilDestroyed(this),
+ ).subscribe();
}
+
+ private listenToPeersChanges(): void {
+ this.select(selectDashboardPeersStats, (stats: DashboardPeersStats) => {
+ if (this.connected && stats.connected === 0 || !this.connected) {
+ if (stats.connected > 0) {
+ this.updateAction = 'Downloading Staking Epoch Ledger';
+ } else if (stats.connecting > 0) {
+ this.updateAction = `Connecting to ${stats.connecting} peer${stats.connecting !== 1 ? 's' : ''}`;
+ } else {
+ this.updateAction = 'Looking for peers';
+ }
+ if (stats.connected) {
+ this.connectedProgress = 33;
+ } else {
+ this.connectedProgress = 0;
+ this.ledgerProgress = 0;
+ this.blockSyncProgress = 0;
+ }
+ this.detect();
+ }
+ this.connected = stats.connected > 0;
+ }, skip(1));
+ }
+
+ private listenToNodesChanges(): void {
+ this.select(selectDashboardNodesAndRpcStats, ([nodes, rpcStats]: [NodesOverviewNode[], DashboardRpcStats]) => {
+ if (nodes.length !== 0) {
+ const ledgers = nodes[0].ledgers;
+
+ let stakingProgress = rpcStats.stakingLedger?.fetched / rpcStats.stakingLedger?.estimation * 100 || 0;
+ let nextProgress = rpcStats.nextLedger?.fetched / rpcStats.nextLedger?.estimation * 100 || 0;
+ let rootSnarkedProgress = rpcStats.snarkedRootLedger?.fetched / rpcStats.snarkedRootLedger?.estimation * 100 || 0;
+ let rootStagedProgress = rpcStats.stagedRootLedger?.fetched / rpcStats.stagedRootLedger?.estimation * 100 || 0;
+
+ if (ledgers.stakingEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
+ stakingProgress = 100;
+ this.updateAction = 'Downloading Next Epoch Ledger';
+ }
+ if (ledgers.nextEpoch.state === NodesOverviewLedgerStepState.SUCCESS) {
+ nextProgress = 100;
+ this.updateAction = 'Downloading Root Snarked Ledger';
+ }
+ if (ledgers.rootSnarked.state === NodesOverviewLedgerStepState.SUCCESS) {
+ rootSnarkedProgress = 100;
+ this.updateAction = 'Downloading Root Staged Ledger';
+ }
+ if (ledgers.rootStaged.state === NodesOverviewLedgerStepState.SUCCESS) {
+ rootStagedProgress = 100;
+ this.updateAction = 'Fetching Blocks';
+ }
+ const ledgerProgressTotal = (stakingProgress + nextProgress + rootSnarkedProgress + rootStagedProgress) / 4;
+ this.ledgerProgress = ledgerProgressTotal * 0.33;
+ if (ledgerProgressTotal !== 100) {
+ this.blockSyncProgress = 0;
+ this.detect();
+ return;
+ }
+
+ let blocks = nodes[0].blocks;
+
+ blocks = blocks.slice(1);
+
+ const fetched = blocks.filter(b => ![NodesOverviewNodeBlockStatus.MISSING, NodesOverviewNodeBlockStatus.FETCHING].includes(b.status)).length;
+ const fetchedPercentage = Math.round(fetched * 100 / 291);
+
+ const applied = blocks.filter(b => b.status === NodesOverviewNodeBlockStatus.APPLIED).length;
+ const appliedPercentage = Math.round(applied * 100 / 291);
+ this.blockSyncProgress = appliedPercentage * 0.34;
+
+ if (fetchedPercentage < 100) {
+ this.updateAction = `Fetching Blocks (${fetchedPercentage}%)`;
+ } else if (appliedPercentage < 100) {
+ this.updateAction = `Applying Blocks (${appliedPercentage}%)`;
+ } else {
+ this.updateAction = '';
+ }
+
+ } else {
+ this.ledgerProgress = 0;
+ this.blockSyncProgress = 0;
+ }
+ this.detect();
+ });
+ }
+
+ override ngOnDestroy(): void {
+ super.ngOnDestroy();
+ }
+
+ // cleanup() {
+ // document.getElementById('mina-content').style.borderTopLeftRadius = '6px';
+ // }
}
diff --git a/frontend/src/app/features/dashboard/dashboard.module.ts b/frontend/src/app/features/dashboard/dashboard.module.ts
index e06adfdf47..ed91563182 100644
--- a/frontend/src/app/features/dashboard/dashboard.module.ts
+++ b/frontend/src/app/features/dashboard/dashboard.module.ts
@@ -9,13 +9,9 @@ import { LoadingSpinnerComponent } from '@shared/loading-spinner/loading-spinner
import { CopyComponent } from '@openmina/shared';
import { DashboardNetworkComponent } from './dashboard-network/dashboard-network.component';
import { DashboardLedgerComponent } from './dashboard-ledger/dashboard-ledger.component';
-import {
- DashboardTransitionFrontierComponent,
-} from './dashboard-transition-frontier/dashboard-transition-frontier.component';
import { DashboardBlocksSyncComponent } from './dashboard-blocks-sync/dashboard-blocks-sync.component';
-import {
- DashboardPeersMinimalTableComponent,
-} from './dashboard-peers-minimal-table/dashboard-peers-minimal-table.component';
+import { DashboardPeersMinimalTableComponent } from './dashboard-peers-minimal-table/dashboard-peers-minimal-table.component';
+import { BlockProductionPillComponent } from '@app/layout/block-production-pill/block-production-pill.component';
@NgModule({
@@ -23,7 +19,6 @@ import {
DashboardComponent,
DashboardNetworkComponent,
DashboardLedgerComponent,
- DashboardTransitionFrontierComponent,
DashboardBlocksSyncComponent,
DashboardPeersMinimalTableComponent,
],
@@ -33,6 +28,7 @@ import {
EffectsModule.forFeature(DashboardEffects),
LoadingSpinnerComponent,
CopyComponent,
+ BlockProductionPillComponent,
],
})
export class DashboardModule {}
diff --git a/frontend/src/app/features/dashboard/dashboard.reducer.ts b/frontend/src/app/features/dashboard/dashboard.reducer.ts
index 7ee9016523..0d9a23b56d 100644
--- a/frontend/src/app/features/dashboard/dashboard.reducer.ts
+++ b/frontend/src/app/features/dashboard/dashboard.reducer.ts
@@ -24,7 +24,8 @@ const initialState: DashboardState = {
peerResponses: [],
stakingLedger: null,
nextLedger: null,
- rootLedger: null,
+ snarkedRootLedger: null,
+ stagedRootLedger: null,
},
nodeBootstrappingPercentage: 0,
appliedBlocks: 0,
diff --git a/frontend/src/app/features/dashboard/dashboard.service.ts b/frontend/src/app/features/dashboard/dashboard.service.ts
index 889502a595..507f5c89c3 100644
--- a/frontend/src/app/features/dashboard/dashboard.service.ts
+++ b/frontend/src/app/features/dashboard/dashboard.service.ts
@@ -52,19 +52,23 @@ export class DashboardService {
);
}
- private mapMessageProgressResponse(response: MessageProgressResponse): DashboardRpcStats {
- const peerResponses = Object.keys(response.messages_stats).map(peerId => ({
+ private mapMessageProgressResponse(progress: MessageProgressResponse): DashboardRpcStats {
+ const peerResponses = Object.keys(progress.messages_stats).map(peerId => ({
peerId,
requestsMade: Object
- .keys(response.messages_stats[peerId].responses)
- .reduce((sum: number, curr: string) => sum + response.messages_stats[peerId].responses[curr], 0),
+ .keys(progress.messages_stats[peerId].responses)
+ .reduce((sum: number, curr: string) => sum + progress.messages_stats[peerId].responses[curr], 0),
} as DashboardPeerRpcResponses));
return {
peerResponses,
- stakingLedger: response.staking_ledger_sync,
- nextLedger: response.next_epoch_ledger_sync,
- rootLedger: response.root_ledger_sync,
+ stakingLedger: progress.staking_ledger_sync,
+ nextLedger: progress.next_epoch_ledger_sync,
+ snarkedRootLedger: progress.root_ledger_sync,
+ stagedRootLedger: {
+ fetched: progress.root_ledger_sync?.staged?.fetched,
+ estimation: progress.root_ledger_sync?.staged?.total,
+ },
};
}
}
@@ -84,7 +88,12 @@ export interface MessageProgressResponse {
messages_stats: MessagesStats;
staking_ledger_sync: Estimation;
next_epoch_ledger_sync: Estimation;
- root_ledger_sync: Estimation;
+ root_ledger_sync: Estimation & {
+ staged: {
+ fetched: number;
+ total: number;
+ }
+ };
}
export interface MessagesStats {
diff --git a/frontend/src/app/features/dashboard/dashboard.state.ts b/frontend/src/app/features/dashboard/dashboard.state.ts
index 5e002c51e7..f84b91456c 100644
--- a/frontend/src/app/features/dashboard/dashboard.state.ts
+++ b/frontend/src/app/features/dashboard/dashboard.state.ts
@@ -3,7 +3,6 @@ import { createFeatureSelector, createSelector, MemoizedSelector } from '@ngrx/s
import { MinaState } from '@app/app.setup';
import { DashboardPeersStats } from '@shared/types/dashboard/dashboard-peers-stats.type';
import { TableSort } from '@openmina/shared';
-import { DashboardPeersSort } from '@dashboard/dashboard.actions';
import { NodesOverviewNode } from '@shared/types/nodes/dashboard/nodes-overview-node.type';
import { DashboardRpcStats } from '@shared/types/dashboard/dashboard-rpc-stats.type';
@@ -33,5 +32,4 @@ export const selectDashboardPeersStats = select((state: DashboardState): Dashboa
export const selectDashboardPeersSort = select((state: DashboardState): TableSort
=> state.peersSort);
export const selectDashboardNodes = select((state: DashboardState): NodesOverviewNode[] => state.nodes);
export const selectDashboardNodesAndPeers = select((state: DashboardState): [NodesOverviewNode[], DashboardPeer[]] => [state.nodes, state.peers]);
-export const selectDashboardRpcStats = select((state: DashboardState): DashboardRpcStats => state.rpcStats);
export const selectDashboardNodesAndRpcStats = select((state: DashboardState): [NodesOverviewNode[], DashboardRpcStats] => [state.nodes, state.rpcStats]);
diff --git a/frontend/src/app/features/dashboard/mina-card/mina-card.component.html b/frontend/src/app/features/dashboard/mina-card/mina-card.component.html
deleted file mode 100644
index a83c6194b1..0000000000
--- a/frontend/src/app/features/dashboard/mina-card/mina-card.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
- {{ label }}
- {{ icon }}
-
-{{ value ?? '-' }}
-{{ hint }}
diff --git a/frontend/src/app/features/dashboard/mina-card/mina-card.component.scss b/frontend/src/app/features/dashboard/mina-card/mina-card.component.scss
deleted file mode 100644
index a5a87f8b45..0000000000
--- a/frontend/src/app/features/dashboard/mina-card/mina-card.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-:host {
- height: 128px;
- width: 128px;
-
- @media (max-width: 700px) {
- height: 140px;
- width: 140px;
- }
-}
-
-.mina-icon {
- margin-left: 3px;
-}
-
-.value {
- font-size: 24px;
- letter-spacing: 0.15px;
-}
diff --git a/frontend/src/app/features/dashboard/mina-card/mina-card.component.ts b/frontend/src/app/features/dashboard/mina-card/mina-card.component.ts
deleted file mode 100644
index 9681cbd29a..0000000000
--- a/frontend/src/app/features/dashboard/mina-card/mina-card.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
- selector: 'mina-card',
- templateUrl: './mina-card.component.html',
- styleUrls: ['./mina-card.component.scss'],
- changeDetection: ChangeDetectionStrategy.OnPush,
- host: { class: 'flex-column flex-between pt-8 pb-8 pl-12 border-rad-8 bg-surface' },
-})
-export class MinaCardComponent {
-
- @Input() color: string = 'var(--base-primary)';
- @Input() labelColor: string = 'var(--base-primary)';
- @Input() hintColor: string = 'var(--base-tertiary)';
- @Input() icon: string;
- @Input() label: string | number;
- @Input() value: string | number;
- @Input() hint: string | number;
- @Input() tooltipText: string;
-
-}
diff --git a/frontend/src/app/features/mempool/mempool.service.ts b/frontend/src/app/features/mempool/mempool.service.ts
index 649d0ff0c1..94f302a8fb 100644
--- a/frontend/src/app/features/mempool/mempool.service.ts
+++ b/frontend/src/app/features/mempool/mempool.service.ts
@@ -8,7 +8,7 @@ import {
ZkappCommand,
} from '@shared/types/mempool/mempool-transaction.type';
import { decodeMemo, removeUnicodeEscapes } from '@shared/helpers/transaction.helper';
-import { ONE_BILLION } from '@openmina/shared';
+import { getLocalStorage, ONE_BILLION } from '@openmina/shared';
@Injectable({
providedIn: 'root',
@@ -31,7 +31,7 @@ export class MempoolService {
const memo = decodeMemo(tx.data[1].payload.common.memo);
return {
kind: MempoolTransactionKind.PAYMENT,
- txHash: tx.hash.join(''),
+ txHash: tx.hash,
sender: tx.data[1].payload.common.fee_payer_pk,
fee: Number(tx.data[1].payload.common.fee),
amount: Number(tx.data[1].payload.body[1].amount) / ONE_BILLION,
@@ -39,14 +39,14 @@ export class MempoolService {
memo: removeUnicodeEscapes(memo),
transactionData: tx.data[1],
sentFromStressingTool: memo.includes('S.T.'),
- sentByMyBrowser: memo.includes(localStorage.getItem('browserId')),
+ sentByMyBrowser: memo.includes(getLocalStorage()?.getItem('browserId')),
} as MempoolTransaction;
case MempoolTransactionResponseKind.ZkappCommand:
const zkapp = tx.data[1] as ZkappCommand;
const zkMemo = decodeMemo(zkapp.memo);
return {
kind: MempoolTransactionKind.ZK_APP,
- txHash: tx.hash.join(''),
+ txHash: tx.hash,
sender: zkapp.fee_payer.body.public_key,
fee: Number(zkapp.fee_payer.body.fee),
amount: null,
@@ -54,7 +54,7 @@ export class MempoolService {
memo: removeUnicodeEscapes(zkMemo),
transactionData: tx.data[1],
sentFromStressingTool: zkMemo.includes('S.T.'),
- sentByMyBrowser: zkMemo.includes(localStorage.getItem('browserId')),
+ sentByMyBrowser: zkMemo.includes(getLocalStorage()?.getItem('browserId')),
} as MempoolTransaction;
}
});
@@ -64,7 +64,7 @@ export class MempoolService {
export interface MempoolTransactionResponse {
data: [MempoolTransactionResponseKind, SignedCommand | ZkappCommand];
- hash: number[];
+ hash: string;
}
export enum MempoolTransactionResponseKind {
diff --git a/frontend/src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.ts b/frontend/src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.ts
index a8e044d207..5b90dbc1b3 100644
--- a/frontend/src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.ts
+++ b/frontend/src/app/features/network/messages/network-messages-side-panel/network-messages-side-panel.component.ts
@@ -8,7 +8,7 @@ import {
selectNetworkFullMessage,
selectNetworkMessageHex,
} from '@network/messages/network-messages.state';
-import { downloadJson, downloadJsonFromURL, ExpandTracking, MinaJsonViewerComponent } from '@openmina/shared';
+import { downloadJson, downloadJsonFromURL, ExpandTracking, MinaJsonViewerComponent, safelyExecuteInBrowser } from '@openmina/shared';
import { filter } from 'rxjs';
import { Router } from '@angular/router';
import { Routes } from '@shared/enums/routes.enum';
@@ -154,6 +154,8 @@ export class NetworkMessagesSidePanelComponent extends StoreDispatcher implement
}
copyToClipboard(): void {
- this.clipboard.copy(window.location.href);
+ safelyExecuteInBrowser(() => {
+ this.clipboard.copy(window.location.href);
+ });
}
}
diff --git a/frontend/src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts b/frontend/src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts
index 755b73c63e..1f290c00dc 100644
--- a/frontend/src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts
+++ b/frontend/src/app/features/network/splits/dashboard-splits-graph/dashboard-splits-graph.component.ts
@@ -16,6 +16,7 @@ import { DashboardSplitsSet } from '@shared/types/network/splits/dashboard-split
import { DashboardSplitsSetActivePeer } from '@network/splits/dashboard-splits.actions';
import { eigs } from 'mathjs';
import * as math from 'mathjs';
+import { getLocalStorage } from '@openmina/shared';
type DashboardSplitsPeerSimulation = DashboardSplitsPeer & SimulationNodeDatum;
type DashboardSplitsLinkSimulation = {
@@ -128,7 +129,7 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
console.log('Laplacian Matrix:', laplacianMatrix);
// check is same as localstorage
- let item = localStorage.getItem('laplacianMatrix');
+ let item = getLocalStorage()?.getItem('laplacianMatrix');
if (item) {
let storedMatrix = JSON.parse(item);
let storedMatrixString = JSON.stringify(storedMatrix);
@@ -139,7 +140,7 @@ export class DashboardSplitsGraphComponent extends StoreDispatcher implements On
console.log('Laplacian Matrix is different from the stored one');
}
}
- localStorage.setItem('laplacianMatrix', JSON.stringify(laplacianMatrix));
+ getLocalStorage()?.setItem('laplacianMatrix', JSON.stringify(laplacianMatrix));
const computeEigenvalues = async (matrix: number[][]): Promise => {
return eigs(matrix).values as number[];
diff --git a/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.scss b/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.scss
index 60c7f13cc0..d747628141 100644
--- a/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.scss
+++ b/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.scss
@@ -8,7 +8,7 @@
border-bottom: 1px solid $base-tertiary;
&:last-child {
- min-width: 600px;
+ min-width: 510px;
}
}
}
diff --git a/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.ts b/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.ts
index efc1983514..d720f69351 100644
--- a/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.ts
+++ b/frontend/src/app/features/nodes/overview/nodes-overview-table/nodes-overview-table.component.ts
@@ -37,11 +37,6 @@ export class NodesOverviewTableComponent extends MinaTableRustWrapper implements OnDestroy {
activeResource: MemoryResource;
- tooltipWidth: number = Math.max(window.innerWidth - 40, 1500);
+ tooltipWidth: number = isBrowser() ? Math.max(window.innerWidth - 40, 1500) : 0;
position: TooltipPosition = TooltipPosition.RIGHT;
protected readonly tableHeads: TableColumnList = [
diff --git a/frontend/src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.ts b/frontend/src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.ts
index 6cf4e6ef52..538d5f0777 100644
--- a/frontend/src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.ts
+++ b/frontend/src/app/features/resources/memory/memory-resources-treemap/memory-resources-treemap.component.ts
@@ -32,7 +32,7 @@ import { ResourcesSizePipe } from '@resources/memory/memory-resources.pipe';
import { MemoryResourcesSetActiveResource } from '@resources/memory/memory-resources.actions';
import { untilDestroyed } from '@ngneat/until-destroy';
import { TreemapView } from '@shared/types/resources/memory/treemap-view.type';
-import { isDesktop, TooltipService } from '@openmina/shared';
+import { isDesktop, safelyExecuteInBrowser, TooltipService } from '@openmina/shared';
import { AppSelectors } from '@app/app.state';
@Component({
@@ -83,9 +83,11 @@ export class MemoryResourcesTreemapComponent extends StoreDispatcher implements
private listenToResizeEvent(): void {
this.ngZone.runOutsideAngular(() => {
- fromEvent(window, 'resize')
- .pipe(untilDestroyed(this), debounceTime(200))
- .subscribe(() => this.redrawChart());
+ safelyExecuteInBrowser(() =>
+ fromEvent(window, 'resize')
+ .pipe(untilDestroyed(this), debounceTime(200))
+ .subscribe(() => this.redrawChart()),
+ );
this.select(
AppSelectors.menu,
() => this.redrawChart(),
@@ -358,7 +360,10 @@ export class MemoryResourcesTreemapComponent extends StoreDispatcher implements
const x = event.clientX - tooltipWidth / 2 + xMargin;
const y = event.clientY + yMargin;
- const maxX = window.innerWidth - tooltipWidth - xMargin;
+ let maxX = 0;
+ safelyExecuteInBrowser(() => {
+ maxX = window.innerWidth - tooltipWidth - xMargin;
+ });
if (x > maxX) {
this.tooltip.style.left = maxX + 'px';
} else {
diff --git a/frontend/src/app/features/resources/memory/memory-resources.reducer.ts b/frontend/src/app/features/resources/memory/memory-resources.reducer.ts
index 9d4978bbcb..df61e6ff4e 100644
--- a/frontend/src/app/features/resources/memory/memory-resources.reducer.ts
+++ b/frontend/src/app/features/resources/memory/memory-resources.reducer.ts
@@ -8,13 +8,14 @@ import {
MemoryResourcesActions,
} from '@resources/memory/memory-resources.actions';
import { TreemapView } from '@shared/types/resources/memory/treemap-view.type';
+import { getLocalStorage, nanOrElse } from '@openmina/shared';
const initialState: MemoryResourcesState = {
resource: undefined,
activeResource: undefined,
breadcrumbs: [],
- granularity: Number(localStorage.getItem('memory-granularity')) || 512,
- treemapView: localStorage.getItem('memory-view') as TreemapView || TreemapView.BINARY,
+ granularity: nanOrElse(Number(getLocalStorage()?.getItem('memory-granularity')), 512),
+ treemapView: getLocalStorage()?.getItem('memory-view') as TreemapView || TreemapView.BINARY,
};
export function memoryResourcesReducer(state: MemoryResourcesState = initialState, action: MemoryResourcesActions): MemoryResourcesState {
@@ -51,7 +52,7 @@ export function memoryResourcesReducer(state: MemoryResourcesState = initialStat
}
case MEMORY_RESOURCES_SET_GRANULARITY: {
- localStorage.setItem('memory-granularity', String(action.payload));
+ getLocalStorage()?.setItem('memory-granularity', String(action.payload));
return {
...state,
granularity: action.payload,
@@ -62,7 +63,7 @@ export function memoryResourcesReducer(state: MemoryResourcesState = initialStat
}
case MEMORY_RESOURCES_SET_TREEMAP_VIEW: {
- localStorage.setItem('memory-view', String(action.payload));
+ getLocalStorage()?.setItem('memory-view', String(action.payload));
return {
...state,
treemapView: action.payload,
diff --git a/frontend/src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.ts b/frontend/src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.ts
index 68ca64921b..da9442c169 100644
--- a/frontend/src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.ts
+++ b/frontend/src/app/features/snarks/scan-state/scan-state-side-panel/scan-state-side-panel.component.ts
@@ -11,6 +11,7 @@ import { TemplatePortal } from '@angular/cdk/portal';
import { ScanStateLeaf } from '@shared/types/snarks/scan-state/scan-state-leaf.type';
import { AppSelectors } from '@app/app.state';
import { getFeaturesConfig } from '@shared/constants/config';
+import { getWindow } from '@openmina/shared';
@Component({
selector: 'mina-scan-state-side-panel',
@@ -124,8 +125,8 @@ export class ScanStateSidePanelComponent extends StoreDispatcher implements OnIn
goToWorkPool(): void {
const queryParams = this.router.parseUrl(this.router.url).queryParams;
- let url = `${window.location.origin}/${Routes.SNARKS}/${Routes.WORK_POOL}/${this.activeLeaf.bundle_job_id}`;
+ let url = `${getWindow()?.location.origin}/${Routes.SNARKS}/${Routes.WORK_POOL}/${this.activeLeaf.bundle_job_id}`;
url += `?node=${queryParams['node']}`;
- window.open(url, '_blank');
+ getWindow()?.open(url, '_blank');
}
}
diff --git a/frontend/src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.ts b/frontend/src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.ts
index 3ef320c3cc..61b9bfe01b 100644
--- a/frontend/src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.ts
+++ b/frontend/src/app/features/snarks/scan-state/scan-state-tree-chart/scan-state-tree-chart.component.ts
@@ -4,7 +4,7 @@ import { ScanStateTree } from '@shared/types/snarks/scan-state/scan-state-tree.t
import { ScanStateLeaf, ScanStateLeafStatus } from '@shared/types/snarks/scan-state/scan-state-leaf.type';
import { debounceTime, delay, distinctUntilChanged, filter, fromEvent, skip, tap } from 'rxjs';
import { untilDestroyed } from '@ngneat/until-destroy';
-import { any, hasValue, isMobile } from '@openmina/shared';
+import { any, hasValue, isMobile, safelyExecuteInBrowser } from '@openmina/shared';
import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
import { ScanStateSetActiveLeaf } from '@snarks/scan-state/scan-state.actions';
import { Router } from '@angular/router';
@@ -110,9 +110,11 @@ export class ScanStateTreeChartComponent extends StoreDispatcher implements OnIn
}
private handleResizing(): void {
- fromEvent(window, 'resize')
- .pipe(untilDestroyed(this), debounceTime(200))
- .subscribe(() => this.redrawChart());
+ safelyExecuteInBrowser(() => {
+ fromEvent(window, 'resize')
+ .pipe(untilDestroyed(this), debounceTime(200))
+ .subscribe(() => this.redrawChart());
+ });
this.select(selectScanStateSideBarResized, () => this.redrawChart(), filter(Boolean));
this.select(selectScanStateOpenSidePanel, () => this.redrawChart(), delay(400), skip(1));
this.select(AppSelectors.menu, () => this.redrawChart(),
@@ -372,9 +374,11 @@ export class ScanStateTreeChartComponent extends StoreDispatcher implements OnIn
const chartLeft = this.chartContainer.nativeElement.getBoundingClientRect().left;
let desiredLeft = Math.min(nodeRect.left + nodeRect.width / 2 - tooltipWidth / 2, chartLeft + this.width - tooltipWidth);
desiredLeft = Math.max(desiredLeft, chartLeft);
- selection
- .style('left', `${desiredLeft}px`)
- .style('top', `${nodeRect.bottom + window.scrollY + 12}px`);
+ safelyExecuteInBrowser(() => {
+ selection
+ .style('left', `${desiredLeft}px`)
+ .style('top', `${nodeRect.bottom + window.scrollY + 12}px`);
+ });
}
private mouseOutHandler(event: MouseEvent & { target: HTMLElement }, d: any): void {
diff --git a/frontend/src/app/features/snarks/scan-state/scan-state.reducer.ts b/frontend/src/app/features/snarks/scan-state/scan-state.reducer.ts
index d78d12936c..1c7832a573 100644
--- a/frontend/src/app/features/snarks/scan-state/scan-state.reducer.ts
+++ b/frontend/src/app/features/snarks/scan-state/scan-state.reducer.ts
@@ -10,9 +10,9 @@ import {
SCAN_STATE_START,
SCAN_STATE_TOGGLE_SIDE_PANEL,
SCAN_STATE_TOGGLE_TREE_VIEW,
- ScanStateActions
+ ScanStateActions,
} from '@snarks/scan-state/scan-state.actions';
-import { isDesktop } from '@openmina/shared';
+import { getLocalStorage, isDesktop } from '@openmina/shared';
const initialState: ScanStateState = {
block: undefined,
@@ -21,7 +21,7 @@ const initialState: ScanStateState = {
openSidePanel: isDesktop(),
sideBarResized: 0,
stream: true,
- treeView: JSON.parse(localStorage.getItem('scan_state_tree_view')) || false,
+ treeView: JSON.parse(getLocalStorage()?.getItem('scan_state_tree_view') ?? 'false') || false,
highlightSnarkPool: true,
};
@@ -90,7 +90,7 @@ export function reducer(state: ScanStateState = initialState, action: ScanStateA
}
case SCAN_STATE_TOGGLE_TREE_VIEW: {
- localStorage.setItem('scan_state_tree_view', JSON.stringify(!state.treeView));
+ getLocalStorage()?.setItem('scan_state_tree_view', JSON.stringify(!state.treeView));
return {
...state,
diff --git a/frontend/src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.ts b/frontend/src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.ts
index cc2a04989a..3bc9a53d3c 100644
--- a/frontend/src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.ts
+++ b/frontend/src/app/features/snarks/work-pool/snarks-work-pool-side-panel/snarks-work-pool-side-panel.component.ts
@@ -7,6 +7,7 @@ import { Router } from '@angular/router';
import { Routes } from '@shared/enums/routes.enum';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
+import { getWindow } from '@openmina/shared';
@Component({
selector: 'mina-snarks-work-pool-side-panel',
@@ -89,9 +90,9 @@ export class SnarksWorkPoolSidePanelComponent extends StoreDispatcher implements
goToScanState(): void {
const queryParams = this.router.parseUrl(this.router.url).queryParams;
const jobId = this.router.url.split('/').pop().split('?')[0];
- let url = `${window.location.origin}/${Routes.SNARKS}/${Routes.SCAN_STATE}`;
+ let url = `${getWindow()?.location.origin}/${Routes.SNARKS}/${Routes.SCAN_STATE}`;
url += `?node=${queryParams['node']}`;
url += `&jobId=${jobId}`;
- window.open(url, '_blank');
+ getWindow()?.open(url, '_blank');
}
}
diff --git a/frontend/src/app/features/webnode/web-node-initialization/web-node-initialization.component.html b/frontend/src/app/features/webnode/web-node-initialization/web-node-initialization.component.html
new file mode 100644
index 0000000000..5fac9c6f20
--- /dev/null
+++ b/frontend/src/app/features/webnode/web-node-initialization/web-node-initialization.component.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Produce blocks,
+ right in your browser
+
+
+
{{ loadingMessage || downloadingMessage }}
+
+
+
+
+
+
+ @for (item of loading; track $index) {
+
+ @if (item.status === WebNodeStepStatus.LOADING) {
+
+ } @else if (item.status === WebNodeStepStatus.PENDING) {
+
panorama_fish_eye
+ } @else {
+
check_circle
+ }
+
{{ item.name }}
+
+
+ }
+
+
+
+
;
+
+ constructor(private errorHandler: GlobalErrorHandlerService,
+ private webNodeService: WebNodeService,
+ private router: Router) { super(); }
+
+ ngOnInit(): void {
+ if (!this.webNodeService.hasWebNodeConfig()) {
+ this.router.navigate([getFirstFeature()]);
+ return;
+ }
+ safelyExecuteInBrowser(() => {
+ window.dispatchEvent(new CustomEvent('startWebNode'));
+ });
+ this.stepsPercentages = this.getStepPercentages();
+ if (this.webNodeService.isWebNodeLoaded()) {
+ this.loading.forEach((step: WebNodeLoadingStep) => {
+ step.loaded = true;
+ step.status = WebNodeStepStatus.DONE;
+ });
+ this.ready = true;
+ return;
+ }
+ this.fetchProgress();
+ this.listenToErrorIssuing();
+ this.checkWebNodeProgress();
+ this.fetchPeersInformation();
+ }
+
+ ngAfterViewInit(): void {
+ this.buildProgressBar();
+ }
+
+ private checkWebNodeProgress(): void {
+ this.webNodeService.webnodeProgress$.pipe(untilDestroyed(this)).subscribe((state: string) => {
+ if (state === 'Loaded') {
+ this.updateLoadingMessage('~5 seconds left');
+ setTimeout(() => {
+ if (!this.hasError && this.loading[1].status !== WebNodeStepStatus.DONE) {
+ this.updateLoadingMessage('Slower than usual');
+ this.hasWarn = true;
+ this.detect();
+ }
+ }, 5000);
+ this.loading[0].loaded = true;
+ this.loading[0].status = WebNodeStepStatus.DONE;
+ this.loading[1].status = WebNodeStepStatus.LOADING;
+ this.advanceProgressFor2ndStep();
+ } else if (state === 'Started') {
+ this.updateLoadingMessage('~3 seconds left');
+ setTimeout(() => {
+ if (!this.hasError && this.loading[2].status !== WebNodeStepStatus.DONE) {
+ this.updateLoadingMessage('Slower than usual');
+ this.hasWarn = true;
+ this.detect();
+ }
+ }, 3500);
+ clearInterval(this.secondStepInterval);
+ this.loading[0].loaded = true;
+ this.loading[1].loaded = true;
+ this.loading[0].status = WebNodeStepStatus.DONE;
+ this.loading[1].status = WebNodeStepStatus.DONE;
+ this.loading[2].status = WebNodeStepStatus.LOADING;
+ this.advanceProgressFor3rdStep();
+ } else if (state === 'Connected') {
+ this.updateLoadingMessage('Web Node is ready');
+ clearInterval(this.thirdStepInterval);
+ this.loading[0].status = WebNodeStepStatus.DONE;
+ this.loading[1].status = WebNodeStepStatus.DONE;
+ this.loading[2].status = WebNodeStepStatus.DONE;
+ this.loading.forEach((step: WebNodeLoadingStep) => step.loaded = true);
+ this.goToEndProgress();
+ }
+ this.detect();
+ });
+ }
+
+ private getStepPercentages(): number[] {
+ // random between 65 and 80
+ const first = Math.floor(Math.random() * 15) + 65;
+ // random between 15 and 17
+ const second = Math.floor(Math.random() * 2) + 15;
+ const third = 100 - first - second;
+ return [first, second, third];
+ }
+
+ private advanceProgressFor2ndStep(): void {
+ // first step is done, now we are working on the second step.
+ // each second add 1% to the progress.
+ // but the second step is only 10% of the total progress.
+ // so never go above 10%. Stop at 9% if the second step is not done yet.
+ let progress = 0;
+ this.secondStepInterval = setInterval(() => {
+ if (progress < this.stepsPercentages[1] - 1) {
+ progress += 0.125;
+ this.updateProgressBar(this.stepsPercentages[0] + progress);
+ }
+ }, 75);
+ }
+
+ private async advanceProgressFor3rdStep(): Promise {
+ // second step is done, now we are working on the third step.
+ // each second add 1% to the progress.
+ // but the third step is only 10% of the total progress.
+ // so never go above 10%. Stop at 9% if the third step is not done yet.
+
+ const currentProgress = this.progress;
+ const targetProgress = this.stepsPercentages[0] + this.stepsPercentages[1] - 1;
+ // run fast 5 increments to reach the target progress
+ const diff = targetProgress - currentProgress;
+
+ for (let i = 0; i < diff; i++) {
+ await new Promise(resolve => setTimeout(resolve, 25));
+ this.updateProgressBar(currentProgress + i);
+ this.detect();
+ }
+
+ let progress = 0;
+ this.thirdStepInterval = setInterval(() => {
+ if (progress < this.stepsPercentages[2] - 1) {
+ progress += 0.125;
+ this.updateProgressBar(this.stepsPercentages[0] + this.stepsPercentages[1] + progress);
+ }
+ }, 75);
+ }
+
+ private goToEndProgress(): void {
+ // increase it to 100% to make sure it's done.
+ // make it smooth, do a lot of increases from where it left
+ // to make it look like it's finishing.
+
+ let progress = this.progress;
+ let interval = setInterval(() => {
+ if (progress <= 100) {
+ progress += 1;
+ this.updateProgressBar(progress);
+ } else {
+ clearInterval(interval);
+ }
+ }, 30);
+ setTimeout(() => this.detect(), 500);
+ }
+
+ private fetchPeersInformation(): void {
+ timer(0, 1000).pipe(
+ switchMap(() => this.webNodeService.peers$),
+ untilDestroyed(this),
+ ).subscribe();
+ }
+
+ private updateLoadingMessage(message: string): void {
+ if (this.hasError || this.hasWarn) {
+ return;
+ }
+ this.loadingMessage = message;
+ }
+
+ private listenToErrorIssuing(): void {
+ this.errorHandler.errors$
+ .pipe(filter(errors => !!errors.length), untilDestroyed(this))
+ .subscribe((error: string) => {
+ this.errors.push(error);
+ this.loadingMessage = error;
+ this.hasError = true;
+ this.markErrorOnD3();
+
+ this.detect();
+ });
+ }
+
+ private fetchProgress(): void {
+ FileProgressHelper.progress$.pipe(
+ filter(Boolean),
+ untilDestroyed(this),
+ ).subscribe((progress) => {
+ this.downloadingMessage = `Downloading ${(progress.downloaded / 1e6).toFixed(1)} of ${(progress.totalSize / 1e6).toFixed(1)} MB`;
+ if (this.svg) {
+ const totalProgress = (progress.progress * this.stepsPercentages[0]) / 100;
+ this.updateProgressBar(totalProgress);
+ }
+ this.detect();
+ });
+ }
+
+ goToDashboard(): void {
+ if (!this.ready) {
+ return;
+ }
+ this.router.navigate([getFirstFeature()]);
+ }
+
+ private buildProgressBar(): void {
+ const width = this.chartContainer.nativeElement.offsetWidth;
+ const height = this.chartContainer.nativeElement.offsetHeight;
+ const barWidth = 4;
+ const progress = 0;
+
+ this.svg = d3
+ .select(this.chartContainer.nativeElement)
+ .append('svg')
+ .attr('width', width)
+ .attr('height', height);
+
+ this.progressBar = this.svg.append('g')
+ .attr('transform', `translate(${width / 2}, ${height / 2})`);
+
+ const radius = Math.min(width, height) / 2 - barWidth;
+
+ this.progressBar.append('circle')
+ .attr('r', radius)
+ .attr('fill', 'none')
+ .attr('stroke', 'var(--base-tertiary2)')
+ .attr('stroke-width', 1);
+
+ this.arc = d3.arc()
+ .innerRadius(radius - barWidth)
+ .outerRadius(radius)
+ .startAngle(0)
+ .endAngle(Math.PI * 2 * (progress / 100));
+
+ this.progressBar.append('path')
+ .attr('d', this.arc)
+ .attr('opacity', 0.8)
+ .attr('fill', 'url(#progress-gradient)');
+
+ const defs = this.svg.append('defs');
+ const gradient = defs.append('linearGradient')
+ .attr('id', 'progress-gradient')
+ .attr('x1', '0%')
+ .attr('x2', '75%')
+ .attr('y1', '25%')
+ .attr('y2', '0%');
+
+ gradient.append('stop')
+ .attr('offset', '8%')
+ .attr('stop-color', '#57d7ff');
+ gradient.append('stop')
+ .attr('offset', '60%')
+ .attr('stop-color', '#fda2ff');
+ gradient.append('stop')
+ .attr('offset', '100%')
+ .attr('stop-color', '#ff833d');
+
+ this.progressBar.append('text')
+ .attr('text-anchor', 'middle')
+ .attr('alignment-baseline', 'central')
+ .attr('dominant-baseline', 'central')
+ .attr('font-size', '40px')
+ .attr('fill', 'var(--base-primary)')
+ .attr('opacity', 0.8)
+ .attr('dx', '-.2em')
+ .text((progress).toFixed(0));
+ this.progressBar.append('text')
+ .attr('class', 'symbol')
+ .attr('text-anchor', 'middle')
+ .attr('alignment-baseline', 'central')
+ .attr('dominant-baseline', 'central')
+ .attr('font-size', '20px')
+ .attr('fill', 'var(--base-tertiary)')
+ .attr('opacity', 0.8)
+ .attr('dy', '-.3em')
+ .attr('dx', '1.5em')
+ .text('%');
+ }
+
+ private updateProgressBar(newProgress: number): void {
+ if (newProgress >= 100) {
+ this.ready = true;
+ newProgress = 100;
+ this.detect();
+ setTimeout(() => this.detect(), 500);
+ }
+ this.progress = newProgress;
+ this.arc.endAngle(Math.PI * 2 * (newProgress / 100));
+ this.progressBar
+ .select('path')
+ .attr('d', this.arc);
+ this.progressBar
+ .select('text')
+ .text((newProgress).toFixed(0));
+ const numberOfDigits = newProgress.toFixed(0).length + 1;
+ this.progressBar.select('.symbol')
+ .attr('dx', `${numberOfDigits * 0.45}em`)
+ .text('%');
+ }
+
+ private markErrorOnD3(): void {
+ this.progressBar.select('path').attr('fill', 'var(--warn-primary)');
+ this.progressBar.select('text').attr('fill', 'var(--warn-primary)');
+ this.progressBar.select('.symbol').attr('fill', 'var(--warn-primary)');
+ this.progressBar.select('path').attr('opacity', 0.4);
+ this.progressBar.select('text').attr('opacity', 0.8);
+ this.progressBar.select('.symbol').attr('opacity', 0.4);
+ }
+}
diff --git a/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.html b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.html
new file mode 100644
index 0000000000..ef3d9e3b80
--- /dev/null
+++ b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.html
@@ -0,0 +1,50 @@
+
+@if (isPhone) {
+
+
iOS
+
+
Your iOS {{ iOSVersion ?? '' }} isn't supported
+
+ To use the Web Node please update your device to the latest iOS version.
+
+
+
+
Learn how to update
+
+
+
Your browser isn't supported
+
+
To run a Mina node in your browser,
+
we recommend one of the following.
+
+
+
+
+
+
+
+ Chrome
+
+
+
+ Safari
+
+
+
+ Edge
+
+
+
+
You entered Dev mode!
+
+ Run Web Node
+
+}
diff --git a/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.scss b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.scss
new file mode 100644
index 0000000000..e44bc5b434
--- /dev/null
+++ b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.scss
@@ -0,0 +1,68 @@
+@import 'openmina';
+
+.header {
+ height: 56px;
+
+ .mina-svg {
+ height: 32px;
+ }
+}
+
+.phone-content,
+.browser-content {
+ height: calc(100% - 56px);
+
+ .ios {
+ width: 96px;
+ height: 96px;
+ font-size: 30px;
+ border-radius: 100px;
+ }
+
+ .ios-box {
+ margin-top: 40px;
+ margin-bottom: 40px;
+ padding: 0 32px;
+ }
+
+ .learn-btn {
+ background-color: $base-background;
+ color: $base-primary;
+ max-width: 330px;
+ margin: 0 12px;
+ filter: invert(1);
+ }
+
+ .headline {
+ font-size: 20px;
+ line-height: 30px;
+ margin-bottom: 8px;
+ }
+
+ .img-wrapper {
+ margin-top: 24px;
+ gap: 30px;
+ }
+
+ img {
+ height: 44px;
+ width: 44px;
+ }
+
+ .sub-headline {
+ font-size: 16px;
+ }
+
+ .browser {
+ margin-top: 64px;
+ }
+}
+
+.browser-content {
+ max-width: 600px;
+
+ img {
+ height: 56px;
+ width: 56px;
+ }
+}
diff --git a/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.ts b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.ts
new file mode 100644
index 0000000000..37ffb3247a
--- /dev/null
+++ b/frontend/src/app/features/webnode/web-node-not-supported/web-node-not-supported.component.ts
@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
+import { iOSversion, sendSentryEvent } from '@shared/helpers/webnode.helper';
+import { safelyExecuteInBrowser } from '@openmina/shared';
+
+const code = [1, 2, 3, 2];
+
+@Component({
+ selector: 'mina-web-node-not-supported',
+ standalone: true,
+ imports: [],
+ templateUrl: './web-node-not-supported.component.html',
+ styleUrl: './web-node-not-supported.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: { class: 'h-100 flex-column align-center' },
+})
+export class WebNodeNotSupportedComponent {
+
+ @Input() isPhone!: boolean;
+
+ @Output() bypassUnsupportedDevice = new EventEmitter();
+
+ iOSVersion: string = iOSversion().join('.');
+ devMode: boolean = false;
+ private codeVerifier: number[] = [];
+
+ constructor(private platform: Platform) {}
+
+ addDevKey2(): void {
+ this.codeVerifier.push(code[this.codeVerifier.length]);
+ this.checkCode();
+ }
+
+ addDevKey(key: number): void {
+ this.codeVerifier.push(key);
+ this.checkCode();
+ }
+
+ private checkCode(): void {
+ if (this.codeVerifier.length === code.length) {
+ if (this.codeVerifier.every((v, i) => v === code[i])) {
+ this.devMode = true;
+ } else {
+ this.codeVerifier = [];
+ }
+ }
+ }
+
+ c_hcK1_V_a_l_id(input: HTMLInputElement): void {
+ if (input.value === 'allowme') {
+ sendSentryEvent('A developer is testing the app on ' + this.platform, 'debug');
+ this.bypassUnsupportedDevice.emit();
+ }
+ }
+
+ howToUpdate(): void {
+ safelyExecuteInBrowser(() => window.open('https://support.apple.com/en-us/118575', '_blank'));
+ }
+}
diff --git a/frontend/src/app/features/webnode/webnode.component.html b/frontend/src/app/features/webnode/webnode.component.html
new file mode 100644
index 0000000000..71207172ed
--- /dev/null
+++ b/frontend/src/app/features/webnode/webnode.component.html
@@ -0,0 +1,5 @@
+@if (supported) {
+
+
+
+ @if (!isMobile) {
+
schedule
+ }
+
Block Production
+
+ @if (text) {
+ {{ text }}
+ } @else {
+ @if (producingIn) {
+ in
+ {{ producingIn }}
+ } @else {
+ in ...
+ }
+ }
+
+
+
+
Build Details
+
+ close
+
+
+
diff --git a/frontend/src/app/layout/env-build-modal/env-build-modal.component.scss b/frontend/src/app/layout/env-build-modal/env-build-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/app/layout/env-build-modal/env-build-modal.component.ts b/frontend/src/app/layout/env-build-modal/env-build-modal.component.ts
new file mode 100644
index 0000000000..f88cc05b1b
--- /dev/null
+++ b/frontend/src/app/layout/env-build-modal/env-build-modal.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, EventEmitter } from '@angular/core';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
+import { ManualDetection, MinaJsonViewerComponent } from '@openmina/shared';
+
+@Component({
+ selector: 'mina-env-build-modal',
+ standalone: true,
+ imports: [
+ MinaJsonViewerComponent,
+ ],
+ templateUrl: './env-build-modal.component.html',
+ styleUrl: './env-build-modal.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: { class: 'flex-column w-100 bg-surface border-rad-6 border pb-12' },
+})
+export class EnvBuildModalComponent extends ManualDetection {
+ envBuild: AppEnvBuild;
+ close: EventEmitter = new EventEmitter();
+}
diff --git a/frontend/src/app/layout/error-preview/error-preview.component.ts b/frontend/src/app/layout/error-preview/error-preview.component.ts
index d75d835854..71f80dac62 100644
--- a/frontend/src/app/layout/error-preview/error-preview.component.ts
+++ b/frontend/src/app/layout/error-preview/error-preview.component.ts
@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, ComponentRef, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { MinaState } from '@app/app.setup';
-import { ManualDetection } from '@openmina/shared';
+import { isDesktop, isMobile, ManualDetection } from '@openmina/shared';
import { selectErrorPreviewErrors } from '@error-preview/error-preview.state';
import { filter, take } from 'rxjs';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
@@ -23,6 +23,7 @@ export class ErrorPreviewComponent extends ManualDetection implements OnInit {
newError: MinaError;
unreadErrors: boolean;
openedOverlay: boolean;
+ isMobile: boolean = isMobile();
private overlayRef: OverlayRef;
private errorListComponent: ComponentRef;
diff --git a/frontend/src/app/layout/menu-tabs/menu-tabs.component.html b/frontend/src/app/layout/menu-tabs/menu-tabs.component.html
new file mode 100644
index 0000000000..cfa70df50e
--- /dev/null
+++ b/frontend/src/app/layout/menu-tabs/menu-tabs.component.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+ commit
+ Build
+
+
+ {{ envBuild ? envBuild.git.commit_hash.slice(0, 6) : '' }}..
+ open_in_full
+
+
+
+
+ wifi_tethering
+ {{ network }}
+
+
+ {{ chainId?.slice(0, 6) }}..
+ content_copy
+
+
+
+
+ wb_sunny
+ Light
+
+ @if (currentTheme === ThemeType.LIGHT) {
+
check
+ }
+
+
+
+ dark_mode
+ Dark
+
+ @if (currentTheme === ThemeType.DARK) {
+
check
+ }
+
+
diff --git a/frontend/src/app/layout/menu-tabs/menu-tabs.component.scss b/frontend/src/app/layout/menu-tabs/menu-tabs.component.scss
new file mode 100644
index 0000000000..19811948a3
--- /dev/null
+++ b/frontend/src/app/layout/menu-tabs/menu-tabs.component.scss
@@ -0,0 +1,28 @@
+@import 'openmina';
+
+:host {
+ height: 56px;
+
+ .menus {
+ gap: 12px;
+
+ .menu {
+ color: $base-tertiary;
+ min-width: 72px;
+ flex: 1 0 auto;
+
+ &.active {
+ color: $selected-primary;
+
+ .mina-icon {
+ color: $selected-primary;
+ font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
+ }
+ }
+ }
+ }
+}
+
+.theme {
+ font-variation-settings: 'FILL' 1, 'wght' 200 !important;
+}
diff --git a/frontend/src/app/layout/menu-tabs/menu-tabs.component.ts b/frontend/src/app/layout/menu-tabs/menu-tabs.component.ts
new file mode 100644
index 0000000000..de338345d4
--- /dev/null
+++ b/frontend/src/app/layout/menu-tabs/menu-tabs.component.ts
@@ -0,0 +1,174 @@
+import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
+import {
+ getMergedRoute,
+ HorizontalMenuComponent, isDesktop,
+ MergedRoute,
+ OpenminaEagerSharedModule,
+ removeParamsFromURL,
+ ThemeSwitcherService,
+ ThemeType,
+} from '@openmina/shared';
+import { getAvailableFeatures } from '@shared/constants/config';
+import { MENU_ITEMS, MenuItem } from '@app/layout/menu/menu.component';
+import { filter, map, merge, skip, take, tap } from 'rxjs';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { MinaNode } from '@shared/types/core/environment/mina-env.type';
+import { AppSelectors } from '@app/app.state';
+import { RouterLink } from '@angular/router';
+import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { MinaNetwork } from '@shared/types/core/mina/mina.type';
+import { EnvBuildModalComponent } from '@app/layout/env-build-modal/env-build-modal.component';
+
+@UntilDestroy()
+@Component({
+ selector: 'mina-menu-tabs',
+ standalone: true,
+ imports: [
+ HorizontalMenuComponent,
+ RouterLink,
+ OpenminaEagerSharedModule,
+ ],
+ templateUrl: './menu-tabs.component.html',
+ styleUrl: './menu-tabs.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ host: { class: 'flex-column w-100' },
+})
+export class MenuTabsComponent extends StoreDispatcher implements OnInit {
+
+ menuItems: MenuItem[] = this.allowedMenuItems;
+ activeRoute: string;
+ activeNode: MinaNode;
+ network?: MinaNetwork;
+ chainId?: string;
+ envBuild: AppEnvBuild;
+ isOpenMore: boolean;
+ currentTheme: ThemeType;
+ readonly trackMenus = (_: number, item: MenuItem): string => item.name;
+ readonly ThemeType = ThemeType;
+
+ @ViewChild('dropdown') private dropdown: TemplateRef;
+
+ private overlayRef: OverlayRef;
+
+ constructor(private overlay: Overlay,
+ private viewContainerRef: ViewContainerRef,
+ private themeService: ThemeSwitcherService) {super();}
+
+ ngOnInit(): void {
+ this.currentTheme = this.themeService.activeTheme;
+ this.listenToActiveNodeChange();
+ this.listenToEnvBuild();
+ this.listenToNetwork();
+
+ let lastUrl: string;
+ this.store.select(getMergedRoute)
+ .pipe(
+ filter(Boolean),
+ map((route: MergedRoute) => route.url),
+ filter(url => url !== lastUrl),
+ tap(url => lastUrl = url),
+ untilDestroyed(this),
+ )
+ .subscribe((url: string) => {
+ this.activeRoute = removeParamsFromURL(url).split('/')[1];
+ this.detect();
+ });
+ }
+
+ changeTheme(type: ThemeType): void {
+ this.closeOverlay();
+ if (type === this.currentTheme) {
+ return;
+ }
+ this.themeService.changeTheme();
+ this.currentTheme = this.themeService.activeTheme;
+ }
+
+
+ private listenToActiveNodeChange(): void {
+ this.select(AppSelectors.activeNode, (node: MinaNode) => {
+ this.activeNode = node;
+ this.menuItems = this.allowedMenuItems;
+ this.detect();
+ }, filter(node => !!node));
+ }
+
+ private get allowedMenuItems(): MenuItem[] {
+ const features = getAvailableFeatures(this.activeNode || { features: {} } as any);
+ return MENU_ITEMS.filter((opt: MenuItem) => features.find(f => f === opt.name.toLowerCase().split(' ').join('-')));
+ }
+
+ private listenToEnvBuild(): void {
+ this.select(AppSelectors.envBuild, (env: AppEnvBuild) => {
+ this.envBuild = env;
+ this.detect();
+ });
+ }
+
+ private listenToNetwork(): void {
+ this.select(AppSelectors.activeNodeDetails, ({ chainId, network }) => {
+ this.chainId = chainId;
+ this.network = network as MinaNetwork;
+ this.detect();
+ }, filter(Boolean));
+ }
+
+ openMore(anchor: HTMLDivElement): void {
+ this.isOpenMore = true;
+ if (this.overlayRef?.hasAttached()) {
+ this.closeOverlay();
+ return;
+ }
+ this.overlayRef = this.overlay.create({
+ hasBackdrop: false,
+ width: window.innerWidth - 6,
+ positionStrategy: this.overlay.position()
+ .flexibleConnectedTo(anchor)
+ .withPositions([{
+ originX: 'start',
+ originY: 'top',
+ overlayX: 'start',
+ overlayY: 'bottom',
+ offsetY: -10,
+ offsetX: -4,
+ }]),
+ });
+
+ const portal = new TemplatePortal(this.dropdown, this.viewContainerRef);
+ this.overlayRef.attach(portal);
+ }
+
+ closeOverlay(): void {
+ this.overlayRef?.dispose();
+ this.isOpenMore = false;
+ this.detect();
+ }
+
+ openEnvBuildModal(): void {
+ this.closeOverlay();
+ this.overlayRef = this.overlay.create({
+ hasBackdrop: true,
+ backdropClass: 'openmina-backdrop',
+ width: 'calc(100% - 8px)',
+ height: 'calc(100% - 8px)',
+ positionStrategy: this.overlay.position().global().centerVertically().centerHorizontally(),
+ });
+
+ const portal = new ComponentPortal(EnvBuildModalComponent);
+ const component = this.overlayRef.attach(portal);
+ component.instance.envBuild = this.envBuild;
+ component.instance.detect();
+
+ merge(
+ component.instance.close,
+ this.overlayRef.backdropClick(),
+ )
+ .pipe(take(1))
+ .subscribe(() => this.overlayRef.dispose());
+
+ }
+
+}
diff --git a/frontend/src/app/layout/menu/menu.component.html b/frontend/src/app/layout/menu/menu.component.html
index 474dbd42f5..c4e13250c8 100644
--- a/frontend/src/app/layout/menu/menu.component.html
+++ b/frontend/src/app/layout/menu/menu.component.html
@@ -47,7 +47,22 @@
-
+
+
+
+ commit
+ Build
+
+
+ {{ envBuild ? envBuild.git.commit_hash.slice(0, 6) : '' }}..
+ open_in_full
+
+
+
+
- {{ chainId.slice(0, 6) }}..
+ {{ chainId?.slice(0, 6) }}..
content_copy
diff --git a/frontend/src/app/layout/menu/menu.component.scss b/frontend/src/app/layout/menu/menu.component.scss
index 1e8329053b..81b7ae7000 100644
--- a/frontend/src/app/layout/menu/menu.component.scss
+++ b/frontend/src/app/layout/menu/menu.component.scss
@@ -5,7 +5,6 @@
padding: 8px 12px;
border: none;
border-radius: 0;
- border-bottom: 1px solid $base-divider;
background-color: unset;
transition: width 200ms ease-out, background-color 80ms;
@@ -103,7 +102,7 @@
}
}
-@media (max-width: 768px) {
+@media (max-width: 767px) {
.menu {
.menu-toggle {
height: 56px !important;
@@ -148,7 +147,7 @@
transform: translate(0) rotate(0);
animation: rotWithOpc 0.3s linear;
- @media (min-width: 769px) {
+ @media (min-width: 768px) {
left: 42px;
&.collapsed {
transform: translate(-75px, -76px) rotate(-90deg);
diff --git a/frontend/src/app/layout/menu/menu.component.ts b/frontend/src/app/layout/menu/menu.component.ts
index 49d59de000..97486f0e83 100644
--- a/frontend/src/app/layout/menu/menu.component.ts
+++ b/frontend/src/app/layout/menu/menu.component.ts
@@ -6,7 +6,8 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { AppMenu } from '@shared/types/app/app-menu.type';
import { AppActions } from '@app/app.actions';
import {
- getMergedRoute,
+ getMergedRoute, isDesktop,
+ isMobile,
ManualDetection,
MergedRoute,
removeParamsFromURL,
@@ -15,17 +16,21 @@ import {
TooltipPosition,
} from '@openmina/shared';
import { MinaNode } from '@shared/types/core/environment/mina-env.type';
-import { filter, map, tap } from 'rxjs';
+import { filter, map, merge, take, tap } from 'rxjs';
import { CONFIG, getAvailableFeatures } from '@shared/constants/config';
import { MinaNetwork } from '@shared/types/core/mina/mina.type';
+import { AppEnvBuild } from '@shared/types/app/app-env-build.type';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { EnvBuildModalComponent } from '@app/layout/env-build-modal/env-build-modal.component';
-interface MenuItem {
+export interface MenuItem {
name: string;
icon: string;
tooltip?: string;
}
-const MENU_ITEMS: MenuItem[] = [
+export const MENU_ITEMS: MenuItem[] = [
{ name: 'Dashboard', icon: 'dashboard' },
{ name: 'Block Production', icon: 'library_add' },
{ name: 'Nodes', icon: 'margin' },
@@ -57,14 +62,20 @@ export class MenuComponent extends ManualDetection implements OnInit {
activeRoute: string;
network?: MinaNetwork;
chainId?: string;
+ envBuild: AppEnvBuild;
- constructor(private store: Store
,
+ private overlayRef: OverlayRef;
+
+ constructor(private overlay: Overlay,
+ private store: Store,
private themeService: ThemeSwitcherService) { super(); }
ngOnInit(): void {
this.currentTheme = this.themeService.activeTheme;
this.listenToCollapsingMenu();
this.listenToActiveNodeChange();
+ this.listenToEnvBuild();
+
let lastUrl: string;
this.store.select(getMergedRoute)
.pipe(
@@ -118,6 +129,18 @@ export class MenuComponent extends ManualDetection implements OnInit {
});
}
+ private listenToEnvBuild(): void {
+ this.store.select(AppSelectors.envBuild)
+ .pipe(
+ filter(Boolean),
+ untilDestroyed(this),
+ )
+ .subscribe((env: AppEnvBuild | undefined) => {
+ this.envBuild = env;
+ this.detect();
+ });
+ }
+
private get allowedMenuItems(): MenuItem[] {
const features = getAvailableFeatures(this.activeNode || { features: {} } as any);
return MENU_ITEMS.filter((opt: MenuItem) => features.find(f => f === opt.name.toLowerCase().split(' ').join('-')));
@@ -140,4 +163,28 @@ export class MenuComponent extends ManualDetection implements OnInit {
collapseMenu(): void {
this.store.dispatch(AppActions.changeMenuCollapsing({ isCollapsing: !this.menu.collapsed }));
}
+
+ openEnvBuildModal(): void {
+ this.overlayRef = this.overlay.create({
+ hasBackdrop: true,
+ backdropClass: 'openmina-backdrop',
+ width: '99%',
+ height: '99%',
+ maxWidth: 600,
+ maxHeight: 460,
+ positionStrategy: this.overlay.position().global().centerVertically().centerHorizontally(),
+ });
+
+ const portal = new ComponentPortal(EnvBuildModalComponent);
+ const component = this.overlayRef.attach(portal);
+ component.instance.envBuild = this.envBuild;
+ component.instance.detect();
+
+ merge(
+ component.instance.close,
+ this.overlayRef.backdropClick(),
+ )
+ .pipe(take(1))
+ .subscribe(() => this.overlayRef.dispose());
+ }
}
diff --git a/frontend/src/app/layout/parse-files/parse-files.component.html b/frontend/src/app/layout/parse-files/parse-files.component.html
new file mode 100644
index 0000000000..ad62091962
--- /dev/null
+++ b/frontend/src/app/layout/parse-files/parse-files.component.html
@@ -0,0 +1,12 @@
+parse-files works!
+
+
+
File Contents:
+
{{ fileContent }}
+
+
-
-
+
blur_circular
-
- {{ details.transactions }} Txs
- {{ details.snarks }} SNARKs
-
+
{{ details.transactions }} Tx{{ details.transactions | plural }}
+
{{ details.snarks }} SNARK{{ details.snarks | plural }}
-
language
- @if (!isMobile) {
-
{{ details.peers }} Peers
-
{{ details.download }} / {{ details.upload }} MBps
- }
+
{{ details.peersConnected }} Peer{{ details.peersConnected | plural }}
-
@@ -32,85 +28,87 @@
-
dns
-
- {{ details.status }}
- # {{ details.blockHeight }}{{ blockTimeAgo ? blockTimeAgo + ' ago' : '' }}
-
+ @if (!isMobile) {
+
dns
+ }
+
{{ details.status }}
+
# {{ details.blockHeight }}
+
{{ blockTimeAgo ? blockTimeAgo + ' ago' : '' }}
-
-
-
+ @if (!isMobile || (isMobile && switchForbidden)) {
+
+
{{ !switchForbidden ? activeNode?.name : 'All Nodes' }}
-
- arrow_drop_down
+ @if (!switchForbidden && (canAddNodes || nodes.length > 1)) {
+ arrow_drop_down
+ }
+
+ }
-
Mempools
+ class="bg-surface-top secondary border-rad-8 popup-box-shadow-weak p-8 pb-5 w-100 h-100">
+
Mempool
Transactions
-
{{ details.transactions }}
+
{{ details.transactions }}
SNARKs
-
{{ details.snarks }}
+
{{ details.snarks }}
+ class="bg-surface-top secondary border-rad-8 popup-box-shadow-weak p-8 pb-5 w-100 h-100">
Network Traffic
Connected Peers
-
{{ details.peers }}
+
{{ details.peersConnected }}
-
Download
-
{{ details.download }} MB/s
+
Connecting Peers
+
{{ details.peersConnecting }}
-
Upload
-
{{ details.upload }} MB/s
+
Disconnected Peers
+
{{ details.peersDisconnected }}
+ class="node-status-popup secondary bg-surface-top border-rad-8 popup-box-shadow-weak p-8 pb-5 w-100 h-100 text-nowrap">
Node Status
MINA short history
-
{{ details.status }}
+
{{ details.status }}
Latest applied block
-
{{ details.blockHeight }}
+
{{ details.blockHeight }}
Last updated
-
{{ blockTimeAgo ? blockTimeAgo + ' ago' : '' }}
+
{{ blockTimeAgo ? blockTimeAgo + ' ago' : '' }}
diff --git a/frontend/src/app/layout/server-status/server-status.component.scss b/frontend/src/app/layout/server-status/server-status.component.scss
index 505c0ea331..a3de40e2d0 100644
--- a/frontend/src/app/layout/server-status/server-status.component.scss
+++ b/frontend/src/app/layout/server-status/server-status.component.scss
@@ -100,24 +100,46 @@
.chip {
gap: 4px;
- margin-left: 4px;
+ }
+
+ @media (max-width: 767px) {
+ width: 100%;
+ &.h-sm,
+ .h-sm {
+ height: 32px !important;
+ }
}
}
.node-status {
- &.can-add-nodes {
- .chip,
- .chip::before {
- border-bottom-right-radius: 0 !important;
- border-top-right-radius: 0 !important;
+
+ @media (min-width: 768px) {
+ &.can-add-nodes {
+ .chip,
+ .chip::before {
+ border-bottom-right-radius: 0 !important;
+ border-top-right-radius: 0 !important;
+ }
}
- }
- .chip {
+ .chip {
+ &,
+ &::before {
+ border-top-right-radius: 0 !important;
+ border-bottom-right-radius: 0 !important;
+ }
+ }
+ }
+ @media (max-width: 767px) {
+ font-size: 12px;
&,
- &::before {
- border-top-right-radius: 0 !important;
- border-bottom-right-radius: 0 !important;
+ .shine-parent,
+ .chip {
+ width: 100%;
+ margin: 0 !important;
+ }
+ .chip {
+ justify-content: center;
}
}
diff --git a/frontend/src/app/layout/server-status/server-status.component.ts b/frontend/src/app/layout/server-status/server-status.component.ts
index 60dba80042..4f459b9705 100644
--- a/frontend/src/app/layout/server-status/server-status.component.ts
+++ b/frontend/src/app/layout/server-status/server-status.component.ts
@@ -62,8 +62,7 @@ export class ServerStatusComponent extends StoreDispatcher implements OnInit {
protected readonly AppNodeStatus = AppNodeStatus;
protected readonly canAddNodes = CONFIG.canAddNodes;
- @Input() switchForbidden: boolean;
-
+ switchForbidden: boolean;
isMobile: boolean;
activeNode: MinaNode;
details: AppNodeDetails;
@@ -73,7 +72,7 @@ export class ServerStatusComponent extends StoreDispatcher implements OnInit {
@ViewChild('overlayOpener') private overlayOpener: ElementRef
;
- private nodes: MinaNode[] = [];
+ nodes: MinaNode[] = [];
private tooltipOverlayRef: OverlayRef;
private nodePickerOverlayRef: OverlayRef;
private nodePickerComponent: ComponentRef;
@@ -162,7 +161,7 @@ export class ServerStatusComponent extends StoreDispatcher implements OnInit {
minWidth: isMobile() ? '100%' : '220px',
scrollStrategy: this.overlay.scrollStrategies.close(),
positionStrategy: this.overlay.position()
- .flexibleConnectedTo(this.overlayOpener.nativeElement)
+ .flexibleConnectedTo(this.overlayOpener ? this.overlayOpener.nativeElement : (event.target as HTMLElement))
.withPositions([{
originX: 'end',
originY: 'bottom',
diff --git a/frontend/src/app/layout/toolbar/loading.reducer.ts b/frontend/src/app/layout/toolbar/loading.reducer.ts
index 8f9666026f..6fcb7d8253 100644
--- a/frontend/src/app/layout/toolbar/loading.reducer.ts
+++ b/frontend/src/app/layout/toolbar/loading.reducer.ts
@@ -8,16 +8,8 @@ import {
STATE_ACTIONS_GET_EARLIEST_SLOT,
STATE_ACTIONS_GET_EARLIEST_SLOT_SUCCESS,
} from '@state/actions/state-actions.actions';
-import {
- NODES_OVERVIEW_CLOSE,
- NODES_OVERVIEW_GET_NODES_SUCCESS,
- NODES_OVERVIEW_INIT,
-} from '@nodes/overview/nodes-overview.actions';
-import {
- NODES_BOOTSTRAP_CLOSE,
- NODES_BOOTSTRAP_GET_NODES_SUCCESS,
- NODES_BOOTSTRAP_INIT,
-} from '@nodes/bootstrap/nodes-bootstrap.actions';
+import { NODES_OVERVIEW_CLOSE, NODES_OVERVIEW_GET_NODES_SUCCESS, NODES_OVERVIEW_INIT } from '@nodes/overview/nodes-overview.actions';
+import { NODES_BOOTSTRAP_CLOSE, NODES_BOOTSTRAP_GET_NODES_SUCCESS, NODES_BOOTSTRAP_INIT } from '@nodes/bootstrap/nodes-bootstrap.actions';
import { NODES_LIVE_CLOSE, NODES_LIVE_GET_NODES_SUCCESS, NODES_LIVE_INIT } from '@nodes/live/nodes-live.actions';
import {
SNARKS_WORK_POOL_CLOSE,
@@ -27,17 +19,8 @@ import {
SNARKS_WORK_POOL_INIT,
} from '@snarks/work-pool/snarks-work-pool.actions';
import { SCAN_STATE_CLOSE, SCAN_STATE_GET_BLOCK_SUCCESS, SCAN_STATE_INIT } from '@snarks/scan-state/scan-state.actions';
-import { DASHBOARD_CLOSE, DASHBOARD_GET_DATA_SUCCESS, DASHBOARD_INIT } from '@dashboard/dashboard.actions';
-import {
- MEMORY_RESOURCES_CLOSE,
- MEMORY_RESOURCES_GET,
- MEMORY_RESOURCES_GET_SUCCESS,
-} from '@resources/memory/memory-resources.actions';
-import {
- NETWORK_NODE_DHT_CLOSE,
- NETWORK_NODE_DHT_GET_PEERS_SUCCESS,
- NETWORK_NODE_DHT_INIT,
-} from '@network/node-dht/network-node-dht.actions';
+import { MEMORY_RESOURCES_CLOSE, MEMORY_RESOURCES_GET, MEMORY_RESOURCES_GET_SUCCESS } from '@resources/memory/memory-resources.actions';
+import { NETWORK_NODE_DHT_CLOSE, NETWORK_NODE_DHT_GET_PEERS_SUCCESS, NETWORK_NODE_DHT_INIT } from '@network/node-dht/network-node-dht.actions';
import {
NETWORK_BOOTSTRAP_STATS_CLOSE,
NETWORK_BOOTSTRAP_STATS_GET_BOOTSTRAP_STATS_SUCCESS,
@@ -48,7 +31,8 @@ import {
BENCHMARKS_WALLETS_CLOSE,
BENCHMARKS_WALLETS_GET_ALL_TXS,
BENCHMARKS_WALLETS_GET_ALL_TXS_SUCCESS,
- BENCHMARKS_WALLETS_GET_WALLETS, BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS,
+ BENCHMARKS_WALLETS_GET_WALLETS,
+ BENCHMARKS_WALLETS_GET_WALLETS_SUCCESS,
} from '@benchmarks/wallets/benchmarks-wallets.actions';
export type LoadingState = string[];
@@ -60,8 +44,6 @@ export function loadingReducer(state: LoadingState = initialState, action: Featu
/* ------------ ADD ------------ */
case `[${APP_PREFIX}] Init`:
- case DASHBOARD_INIT:
-
case `[${BLOCK_PRODUCTION_PREFIX} Overview] Get Slots`:
case `[${BLOCK_PRODUCTION_PREFIX} Won Slots] Init`:
@@ -90,11 +72,6 @@ export function loadingReducer(state: LoadingState = initialState, action: Featu
case `[${APP_PREFIX}] Init Success`:
return remove(state, `[${APP_PREFIX}] Init`);
- case DASHBOARD_GET_DATA_SUCCESS:
- return remove(state, DASHBOARD_INIT);
- case DASHBOARD_CLOSE:
- return remove(state, [DASHBOARD_INIT]);
-
case `[${BLOCK_PRODUCTION_PREFIX} Overview] Get Slots Success`:
return remove(state, `[${BLOCK_PRODUCTION_PREFIX} Overview] Get Slots`);
case `[${BLOCK_PRODUCTION_PREFIX} Overview] Close`:
diff --git a/frontend/src/app/layout/toolbar/toolbar.component.html b/frontend/src/app/layout/toolbar/toolbar.component.html
index 9d2980871f..0bdd8f4ad4 100644
--- a/frontend/src/app/layout/toolbar/toolbar.component.html
+++ b/frontend/src/app/layout/toolbar/toolbar.component.html
@@ -1,16 +1,25 @@
- 
+ 
-### Setup Option 2: Clone the Repository
+---
-1. **Clone this repository:**
+## Release Process
- ```bash
- git clone https://github.com/openmina/openmina.git
- ```
+**This project is in beta**. We maintain a monthly release cycle, providing [updates every month](https://github.com/openmina/openmina/releases).
-2. **Navigate to the repository:**
- ```bash
- cd openmina
- ```
-### Launch
-**Run the following command to start the demo:**
+## Core Features
-```bash
-docker compose -f docker-compose.local.producers.yml up --pull always --force-recreate
-```
-
-And finally:
-
-**Open your browser and visit [http://localhost:8070](http://localhost:8070)**
-
-You should see the following screen:
-
-
-
-## Description
-
-The Open Mina Node is a Mina node written completely in Rust and capable of verifying blocks of transactions, producing blocks and generating SNARKs.
-
-In the design of the Open Mina node, we are utilizing much of the same logic as in the Mina Web Node. The key difference is that unlike the Web Node, which is an in-browser node with limited resources, the Open Mina node is able to perform resource-intensive tasks such as SNARK proof generation.
-
-## Overview of the Node’s current functionalities
-
-| Current functionalities | In Development | Future Plans |
-| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | --------------------------------------------------- |
-| ☑ **Produce and prove blocks** (with and without transactions). | ☐ Receiving and broadcasting transactions from/into the transaction pool. | ☐ Direct transfer of MINA funds using Webnode |
-| ☑ **Produce SNARK proofs** for transactions. | ☐ A block replayer that uses data from the archive nodes | ☐ O1JS support for Webnode. |
-| ☑ **Connect to the network** and sync up to the best tip block | | |
-| ☑ **Validate and apply new blocks** and transactions to update consensus and ledger state. | | |
-| ☑ **Broadcast messages**: blocks, SNARK pool | | |
-
-Please note that receiving and broadcasting transactions from/into the transaction pool is already possible, but is still an early alpha version and needs more work.
-
-## Updates to the Front End
-
-We've added two new pages to the node's front end:
-
-### Mempool
-
-
-
-Shows a list of the transactions from the pool and a side panel detail.
-
-### Benchmarks
-
-
-
-The benchmarks page helps us to send transactions. The transactions are signed in the front end by the Mina signer.
-Every user can send transactions and they can see in the mempool whether the transactions were sent by their node.
-
-## Launch the block producer demo
-
-Run the Open Mina block producer node by following this [guide](https://github.com/openmina/openmina/blob/main/docs/producer-demo.md).
-
-## How to launch the node (with Docker compose):
-
-From the directory containing the Docker Compose files (either the root of the cloned repository or the directory where the released Docker Compose files were extracted):
-
-```
-docker compose up --pull always
-```
-
-Then visit http://localhost:8070 in your browser.
-
-
-
-By default, `docker compose up` will use the latest node and frontend images available (tagged with `latest`), but specific versions can be selected by using the `OPENMINA_TAG` and `OPENMINA_FRONTEND_TAG` variables.
-
-## How to launch the node (without Docker compose):
-
-This installation guide has been tested on Debian and Ubuntu and should work on most distributions of Linux.
-
-**Pre-requisites:**
-
-Ubuntu or Debian-based Linux distribution with the following packages installed:
-
-- `curl`
-- `git`
-- `libssl-dev`
-- `pkg-config`
-- `protobuf-compiler`
-- `build-essential`
-
-Example (debian-based):
-
-```sh
-# Either using "sudo" or as the "root" user
-sudo apt install curl git libssl-dev pkg-config protobuf-compiler build-essential
-```
-
-Example (macOS):
-
-If you have not yet installed homebrew:
-
-```sh
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-```
-
-```sh
-brew install curl git openssl pkg-config protobuf gcc make
-```
-
-**Steps (for Debian-based Linux distros and macOS):**
-
-Open up the command line and enter the following:
-
-And then:
-
-```sh
-# Install rustup and set the default Rust toolchain to 1.80 (newer versions work too)
-curl https://sh.rustup.rs -sSf | sh -s -- -y --default-toolchain 1.80
-# Setup the current shell with rustup
-source "$HOME/.cargo/env"
-# Clone the openmina repository
-git clone https://github.com/openmina/openmina.git
-cd openmina/
-# Build and run the node
-cargo run --release -p cli node
-```
-
-## How to launch the UI:
-
-## Prerequisites
-
-### 1. Node.js v20.11.1
-
-#### MacOS
-
-```bash
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-brew install node@20.11.1
-```
-
-#### Linux
-
-```bash
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
-source ~/.bashrc
-nvm install 20.11.1
-```
-
-#### 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.
-
-### 2. Angular CLI v16.2.0
-
-```bash
-npm install -g @angular/cli@16.2.0
-```
-
-### 3. Installation
-
-Open a terminal and navigate to this project's root directory
-
-```bash
-cd PROJECT_LOCATION/openmina/frontend
-```
-
-Install the dependencies
-
-```bash
-npm install
-```
-
-## Run the application
-
-```bash
-npm start
-```
+- **Mina Network**: Connect to peers, sync up, broadcast messages
+- **Block Production**: Produces, validates, and applies blocks according to Mina's consensus.
+- **SNARK Generation**: Produce SNARK proofs for transactions
+- **Debugging**: A block replayer that uses data from the archive nodes
## Repository Structure
-- [core/](core) - Provides basic types needed to be shared across different
- components of the node.
+- [core/](core) - Provides basic types needed to be shared across different components of the node.
- [ledger/](ledger) - Mina ledger implementation in Rust.
- [snark/](snark) - Snark/Proof verification.
- [p2p/](p2p) - P2p implementation for OpenMina node.
- [node/](node) - Combines all the business logic of the node.
- - [native/](node/native) - OS specific pieces of the node, which is
- used to run the node natively (Linux/Mac/Windows).
+ - [native/](node/native) - OS specific pieces of the node, which is used to run the node natively (Linux/Mac/Windows).
- [testing/](node/testing) - Testing framework for OpenMina node.
- [cli/](cli) - OpenMina cli.
- [frontend/](frontend) - OpenMina frontend.
-[Details regarding architecture](ARCHITECTURE.md)
-
## The Open Mina Documentation
+### What is Open Mina?
+
- [Why we are developing Open Mina](docs/why-openmina.md)
-- What is Open Mina?
- - [Openmina Node](#the-open-mina-node)
- - [The Mina Web Node](https://github.com/openmina/webnode/blob/main/README.md)
-- Core components
- - [P2P communication](https://github.com/openmina/openmina/blob/documentation/docs/p2p_service.md)
- - [GossipSub](https://github.com/openmina/mina-wiki/blob/3ea9041e52fb2e606918f6c60bd3a32b8652f016/p2p/mina-gossip.md)
- - [Scan state](docs/scan-state.md)
- - [SNARKs](docs/snark-work.md)
-- Developer tools
- - [Debugger](https://github.com/openmina/mina-network-debugger/blob/main/README.md)
- - [Front End](https://github.com/openmina/mina-frontend/blob/main/README.md)
- - [Dashboard](https://github.com/openmina/mina-frontend/blob/main/docs/MetricsTracing.md#Dashboard)
-- [Testing](docs/testing/testing.md)
-- How to run
- - [Launch Openmina node](#how-to-launch-without-docker-compose)
- - [Launch Node with UI](#how-to-launch-with-docker-compose)
- - [Debugger](https://github.com/openmina/mina-network-debugger?tab=readme-ov-file#Preparing-for-build)
- - [Web Node](https://github.com/openmina/webnode/blob/main/README.md#try-out-the-mina-web-node)
-- External links
- - [Medium](https://medium.com/openmina)
- - [Twitter](https://twitter.com/viable_systems)
+
+### Core components
+
+- [P2P communication](https://github.com/openmina/openmina/blob/documentation/docs/p2p_service.md)
+ - [GossipSub](https://github.com/openmina/mina-wiki/blob/3ea9041e52fb2e606918f6c60bd3a32b8652f016/p2p/mina-gossip.md)
+- [Scan state](docs/scan-state.md)
+- [SNARKs](docs/snark-work.md)
+
+### Developer tools
+
+- [Front End](./docs/building-from-source-guide.md#how-to-launch-the-ui)
+
+### Testing Framework for Mina
+
+- [Full Testing Documentation](docs/testing/testing.md)
+
+### How to run
+
+- [Non-Block Producing Node](./docs/alpha-testing-guide.md)
+- [Block Producing Node](./docs/block-producer-guide.md)
+- [Local Block Production Demo](./docs/local-demo-guide.md)
[changelog]: ./CHANGELOG.md
+[beta-badge]: https://img.shields.io/badge/status-beta-yellow
[changelog-badge]: https://img.shields.io/badge/changelog-Changelog-%23E05735
[release-badge]: https://img.shields.io/github/v/release/openmina/openmina
[release-link]: https://github.com/openmina/openmina/releases/latest
diff --git a/cli/Cargo.toml b/cli/Cargo.toml
index 4583f8783e..9acf6026fc 100644
--- a/cli/Cargo.toml
+++ b/cli/Cargo.toml
@@ -1,6 +1,6 @@
[package]
name = "cli"
-version = "0.11.0"
+version = "0.12.0"
edition = "2021"
license = "Apache-2.0"
diff --git a/cli/replay_dynamic_effects/Cargo.toml b/cli/replay_dynamic_effects/Cargo.toml
index 99df2ad7df..2f9d41f8e3 100644
--- a/cli/replay_dynamic_effects/Cargo.toml
+++ b/cli/replay_dynamic_effects/Cargo.toml
@@ -1,6 +1,6 @@
[package]
name = "replay_dynamic_effects"
-version = "0.11.0"
+version = "0.12.0"
edition = "2021"
license = "Apache-2.0"
diff --git a/cli/replay_dynamic_effects/src/lib.rs b/cli/replay_dynamic_effects/src/lib.rs
index 29b7bcc3b4..f788b95c75 100644
--- a/cli/replay_dynamic_effects/src/lib.rs
+++ b/cli/replay_dynamic_effects/src/lib.rs
@@ -1,5 +1,5 @@
use ::node::{ActionWithMeta, Store};
-use openmina_node_invariants::{InvariantResult, Invariants};
+use openmina_node_invariants::{InvariantIgnoreReason, InvariantResult, Invariants};
use openmina_node_native::NodeService;
pub mod ret {
@@ -33,6 +33,8 @@ extern "C" fn replay_dynamic_effects(
) -> u8 {
for (invariant, res) in Invariants::check_all(store, action) {
match res {
+ InvariantResult::Ignored(InvariantIgnoreReason::GlobalInvariantNotInTestingCluster) => {
+ }
InvariantResult::Violation(violation) => {
eprintln!(
"Invariant({}) violated! violation: {violation}",
diff --git a/cli/src/commands/node/mod.rs b/cli/src/commands/node/mod.rs
index fde5d76d9a..1f837271ce 100644
--- a/cli/src/commands/node/mod.rs
+++ b/cli/src/commands/node/mod.rs
@@ -169,9 +169,9 @@ impl Node {
// warning, this overrides `OPENMINA_P2P_SEC_KEY`
if let (Some(key_file), Some(password)) = (&self.libp2p_keypair, &self.libp2p_password) {
- match AccountSecretKey::from_encrypted_file(key_file, password) {
+ match SecretKey::from_encrypted_file(key_file, password) {
Ok(sk) => {
- node_builder.p2p_sec_key(SecretKey::from_bytes(sk.to_bytes()));
+ node_builder.p2p_sec_key(sk.clone());
node::core::info!(
node::core::log::system_time();
summary = "read sercret key from file",
@@ -226,10 +226,12 @@ impl Node {
if let Some(producer_key_path) = self.producer_key {
let password = &self.producer_key_password;
- node::core::info!(node::core::log::system_time(); summary = "loading provers index");
- let provers = BlockProver::make(Some(block_verifier_index), Some(work_verifier_index));
- node::core::info!(node::core::log::system_time(); summary = "loaded provers index");
- node_builder.block_producer_from_file(provers, producer_key_path, password)?;
+ openmina_core::thread::spawn(|| {
+ node::core::info!(node::core::log::system_time(); summary = "loading provers index");
+ BlockProver::make(Some(block_verifier_index), Some(work_verifier_index));
+ node::core::info!(node::core::log::system_time(); summary = "loaded provers index");
+ });
+ node_builder.block_producer_from_file(producer_key_path, password, None)?;
if let Some(pub_key) = self.coinbase_receiver {
node_builder
diff --git a/clippy.toml b/clippy.toml
new file mode 100644
index 0000000000..c592911cd6
--- /dev/null
+++ b/clippy.toml
@@ -0,0 +1 @@
+allow-unwrap-in-tests=true
\ No newline at end of file
diff --git a/core/Cargo.toml b/core/Cargo.toml
index acc29c0767..7d1af1ad45 100644
--- a/core/Cargo.toml
+++ b/core/Cargo.toml
@@ -1,6 +1,6 @@
[package]
name = "openmina-core"
-version = "0.11.0"
+version = "0.12.0"
edition = "2021"
license = "Apache-2.0"
@@ -8,6 +8,7 @@ license = "Apache-2.0"
lazy_static = "1.4.0"
once_cell = "1"
serde = { version = "1.0.147", features = ["rc"] }
+serde_json = "1.0"
slab = { version = "0.4.7", features = ["serde"] }
tracing = { version = "0.1", features = ["std"] }
sha2 = "0.10.6"
@@ -20,11 +21,17 @@ md5 = "0.7.0"
multihash = { version = "0.18.1", features = ["blake2b"] }
openmina-macros = { path = "../macros" }
openmina-fuzzer = { path = "../fuzzer", optional = true }
+argon2 = { version = "0.5.3", features = ["std"] }
+crypto_secretbox = { version = "0.1.1", features = ["std"] }
+base64 = "0.22"
+bs58 = "0.4.0"
+thiserror = "1.0.37"
mina-hasher = { workspace = true }
mina-p2p-messages = { workspace = true }
+poseidon = { workspace = true }
hex = "0.4.3"
-ark-ff = { version = "0.3.0", features = [ "parallel", "asm", "std" ] }
+ark-ff = { workspace = true }
[target.'cfg(not(target_family = "wasm"))'.dependencies]
redux = { workspace = true, features=["serializable_callbacks"] }
@@ -33,6 +40,8 @@ redux = { workspace = true, features=["serializable_callbacks"] }
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
wasm_thread = { version = "0.3", features = [ "es_modules" ] }
+js-sys = "0.3"
+web-sys = { version = "0.3", features = ["Window", "Response"] }
[dev-dependencies]
serde_json = { version = "1" }
diff --git a/core/src/consensus.rs b/core/src/consensus.rs
index 5429dbf07d..bd149eba74 100644
--- a/core/src/consensus.rs
+++ b/core/src/consensus.rs
@@ -7,7 +7,7 @@ use time::{macros::format_description, OffsetDateTime};
use crate::constants::constraint_constants;
pub use crate::constants::{
- checkpoint_window_size_in_slots, grace_period_end, slots_per_window, CHECKPOINTS_PER_YEAR,
+ checkpoint_window_size_in_slots, slots_per_window, CHECKPOINTS_PER_YEAR,
};
// TODO get constants from elsewhere
@@ -39,21 +39,21 @@ pub fn is_short_range_fork(a: &MinaConsensusState, b: &MinaConsensusState) -> bo
if s1.epoch_count.as_u32() == s2.epoch_count.as_u32() + 1
&& s2_epoch_slot >= slots_per_epoch * 2 / 3
{
- crate::log::debug!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("s2 is 1 epoch behind and not in seed update range: {} vs {}", s1.staking_epoch_data.lock_checkpoint, s2.next_epoch_data.lock_checkpoint));
+ crate::log::trace!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("s2 is 1 epoch behind and not in seed update range: {} vs {}", s1.staking_epoch_data.lock_checkpoint, s2.next_epoch_data.lock_checkpoint));
// S1 is one epoch ahead of S2 and S2 is not in the seed update range
s1.staking_epoch_data.lock_checkpoint == s2.next_epoch_data.lock_checkpoint
} else {
- crate::log::debug!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("chains are from different epochs"));
+ crate::log::trace!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("chains are from different epochs"));
false
}
};
- crate::log::debug!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("epoch count: {} vs {}", a.epoch_count.as_u32(), b.epoch_count.as_u32()));
+ crate::log::trace!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("epoch count: {} vs {}", a.epoch_count.as_u32(), b.epoch_count.as_u32()));
if a.epoch_count == b.epoch_count {
let a_prev_lock_checkpoint = &a.staking_epoch_data.lock_checkpoint;
let b_prev_lock_checkpoint = &b.staking_epoch_data.lock_checkpoint;
// Simple case: blocks have same previous epoch, so compare previous epochs' lock_checkpoints
- crate::log::debug!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("checkpoints: {} vs {}", a_prev_lock_checkpoint, b_prev_lock_checkpoint));
+ crate::log::trace!(crate::log::system_time(); kind = "is_short_range_fork", msg = format!("checkpoints: {} vs {}", a_prev_lock_checkpoint, b_prev_lock_checkpoint));
a_prev_lock_checkpoint == b_prev_lock_checkpoint
} else {
// Check for previous epoch case using both orientations
@@ -75,7 +75,9 @@ pub fn relative_min_window_density(b1: &MinaConsensusState, b2: &MinaConsensusSt
let projected_window = {
// Compute shift count
- let shift_count = (max_slot - global_slot(b1) - 1).clamp(0, SUB_WINDOWS_PER_WINDOW);
+ let shift_count = max_slot
+ .saturating_sub(global_slot(b1) + 1)
+ .min(SUB_WINDOWS_PER_WINDOW);
// Initialize projected window
let mut projected_window = b1
diff --git a/core/src/constants.rs b/core/src/constants.rs
index 7d99d64772..070adfbddc 100644
--- a/core/src/constants.rs
+++ b/core/src/constants.rs
@@ -107,19 +107,6 @@ pub fn checkpoint_window_size_in_slots() -> u32 {
size_in_slots as u32
}
-pub fn grace_period_end(constants: &v2::MinaBaseProtocolConstantsCheckedValueStableV1) -> u32 {
- let slots = {
- const NUM_DAYS: u64 = 3;
- let n_days_ms = days_to_ms(NUM_DAYS);
- let n_days = n_days_ms / constraint_constants().block_window_duration_ms;
- (n_days as u32).min(constants.slots_per_epoch.as_u32())
- };
- match constraint_constants().fork.as_ref() {
- None => slots,
- Some(fork) => slots + fork.global_slot_since_genesis,
- }
-}
-
pub const DEFAULT_GENESIS_TIMESTAMP_MILLISECONDS: u64 = 1707157200000;
pub const PROTOCOL_TRANSACTION_VERSION: u8 = 3;
diff --git a/core/src/distributed_pool.rs b/core/src/distributed_pool.rs
new file mode 100644
index 0000000000..7346caa20a
--- /dev/null
+++ b/core/src/distributed_pool.rs
@@ -0,0 +1,219 @@
+use std::cmp::Ord;
+use std::collections::BTreeMap;
+use std::ops::RangeBounds;
+
+use crate::bug_condition;
+
+#[derive(Clone)]
+pub struct DistributedPool