Frontend - Dynamic Mina Network

frontend/src/app/app.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
-import { catchError, map, Observable, of } from 'rxjs';
+import { map, Observable, of } from 'rxjs';
 import { MinaNode } from '@shared/types/core/environment/mina-env.type';
 import { CONFIG } from '@shared/constants/config';
 import { RustService } from '@core/services/rust.service';
 import { AppNodeDetails, AppNodeStatus } from '@shared/types/app/app-node-details.type';
+import { getNetwork } from '@shared/helpers/mina.helper';
 
 @Injectable({
   providedIn: 'root',
@@ -39,6 +40,7 @@ export class AppService {
           snarks: data.snark_pool.snarks,
           transactions: data.transaction_pool.transactions,
           chainId: data.chain_id,
+          network: getNetwork(data.chain_id),
         } as AppNodeDetails)),
       );
   }

frontend/src/app/features/block-production/overview/slot-details/block-production-overview-slot-details.component.ts

@@ -1,10 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import {
   BlockProductionOverviewSlot,
 } from '@shared/types/block-production/overview/block-production-overview-slot.type';
 import { AppSelectors } from '@app/app.state';
-import { CONFIG } from '@shared/constants/config';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
+import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
+import { filter } from 'rxjs';
 
 @Component({
   selector: 'mina-block-production-overview-slot-details',
@@ -13,7 +14,7 @@ import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-minus-xl flex-column' },
 })
-export class BlockProductionOverviewSlotDetailsComponent extends StoreDispatcher implements OnChanges {
+export class BlockProductionOverviewSlotDetailsComponent extends StoreDispatcher {
   @Input({ required: true }) activeSlot: BlockProductionOverviewSlot;
 
   private minaExplorer: string;
@@ -22,18 +23,15 @@ export class BlockProductionOverviewSlotDetailsComponent extends StoreDispatcher
     this.listenToActiveNode();
   }
 
-  ngOnChanges(): void {
-  }
-
   private listenToActiveNode(): void {
-    this.select(AppSelectors.activeNode, (node) => {
-      this.minaExplorer = node.minaExplorerNetwork ?? CONFIG.globalConfig?.minaExplorerNetwork;
-    });
+    this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => {
+      this.minaExplorer = node.network.toLowerCase();
+    }, filter(Boolean));
   }
 
   viewInMinaExplorer(): void {
-    const network = this.minaExplorer !== 'mainnet' ? this.minaExplorer : '';
-    const url = `https://${network}.minaexplorer.com/block/${this.activeSlot.hash}`;
+    const network = this.minaExplorer !== 'mainnet' ? (this.minaExplorer + '.') : '';
+    const url = `https://${network}minaexplorer.com/block/${this.activeSlot.hash}`;
     window.open(url, '_blank');
   }
 }

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

@@ -19,7 +19,7 @@ import { any, hasValue, noMillisFormat, ONE_THOUSAND, SecDurationConfig, toReada
 import { filter } from 'rxjs';
 import { BlockProductionWonSlotsActions } from '@block-production/won-slots/block-production-won-slots.actions';
 import { AppSelectors } from '@app/app.state';
-import { CONFIG } from '@shared/constants/config';
+import { AppNodeDetails } from '@shared/types/app/app-node-details.type';
 
 @Component({
   selector: 'mina-block-production-won-slots-side-panel',
@@ -68,9 +68,9 @@ export class BlockProductionWonSlotsSidePanelComponent extends StoreDispatcher i
   }
 
   private listenToActiveNode(): void {
-    this.select(AppSelectors.activeNode, (node) => {
-      this.minaExplorer = node.minaExplorerNetwork ?? CONFIG.globalConfig?.minaExplorerNetwork;
-    });
+    this.select(AppSelectors.activeNodeDetails, (node: AppNodeDetails) => {
+      this.minaExplorer = node.network.toLowerCase();
+    }, filter(Boolean));
   }
 
   private listenToActiveSlot(): void {
@@ -108,8 +108,8 @@ 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}`;
+    const network = this.minaExplorer !== 'mainnet' ? (this.minaExplorer + '.') : '';
+    const url = `https://${network}minaexplorer.com/block/${this.slot.hash}`;
     window.open(url, '_blank');
   }