@@ -30,357 +30,6 @@ with full JSDoc documentation.
3030
3131<!-- prettier-ignore-stop -->
3232
33- ```javascript
34- export default {
35- // Core settings
36- production : boolean ,
37- canAddNodes : boolean ,
38- hideNodeStats : boolean ,
39- showWebNodeLandingPage : boolean ,
40- hidePeersPill : boolean ,
41- hideTxPill : boolean ,
42-
43- // Global configuration
44- globalConfig : {
45- features: {
46- dashboard: string [],
47- ' block-production' : string [],
48- mempool: string [],
49- state: string [],
50- },
51- firebase: {
52- projectId: string ,
53- appId: string ,
54- apiKey: string ,
55- authDomain: string ,
56- storageBucket: string ,
57- messagingSenderId: string ,
58- measurementId: string ,
59- },
60- heartbeats: boolean ,
61- },
62-
63- // Error tracking
64- sentry : {
65- dsn: string ,
66- tracingOrigins: string [],
67- },
68-
69- // Node configurations
70- configs : Array <{
71- name: string ,
72- url? : string ,
73- isWebNode? : boolean ,
74- }>,
75- } ;
76- ```
77-
78- ## Configuration Fields Reference
79-
80- ### Core Settings
81-
82- #### `production: boolean`
83-
84- - **Purpose**: Determines if the application runs in production mode
85- - **Default**: `false` for development environments, `true` for production
86- - **Effects**:
87- - Enables/disables debugging features
88- - Controls console logging verbosity
89- - Affects bundle optimization
90-
91- #### `canAddNodes: boolean`
92-
93- - **Purpose**: Controls whether users can dynamically add new node connections
94- - **Default**: `true` for development, `false` for production
95- - **Effects**: Shows/hides " Add Node" functionality in the UI
96-
97- #### `hideNodeStats: boolean`
98-
99- - **Purpose**: Controls visibility of detailed node statistics
100- - **Default**: `false`
101- - **Effects**: Hides performance metrics and detailed node information when
102- `true`
103-
104- #### `showWebNodeLandingPage: boolean`
105-
106- - **Purpose**: Controls whether to display the WebNode-specific landing page
107- - **Default**: `false`
108- - **Effects**: Shows WebNode introduction and setup instructions
109-
110- #### `hidePeersPill: boolean`
111-
112- - **Purpose**: Controls visibility of the peers status indicator
113- - **Default**: `false`
114- - **Effects**: Hides the peers connection pill in the UI
115-
116- #### `hideTxPill: boolean`
117-
118- - **Purpose**: Controls visibility of the transaction pool indicator
119- - **Default**: `false`
120- - **Effects**: Hides the transaction pool status pill in the UI
121-
122- ### Global Configuration
123-
124- #### `globalConfig.features`
125-
126- Controls which features and sub-features are enabled for each module:
127-
128- **`dashboard: string[]`**
129-
130- - Available features: `[]` (empty array enables all dashboard features)
131- - Controls main dashboard functionality
132-
133- **`'block-production': string[]`**
134-
135- - Available features: `['overview', ' won-slots' ]`
136- - `overview`: Block production statistics and metrics
137- - `won-slots`: Detailed view of won slot information
138-
139- **`mempool: string[]`**
140-
141- - Available features: `[]` (empty array enables all mempool features)
142- - Controls transaction pool monitoring
143-
144- **`state: string[]`**
145-
146- - Available features: `['actions']`
147- - `actions`: State transition action monitoring
148-
149- #### `globalConfig.firebase`
150-
151- Firebase integration settings for analytics and real-time features:
152-
153- - **`projectId`**: Firebase project identifier
154- - **`appId`**: Firebase application ID
155- - **`apiKey`**: Firebase API key for client authentication
156- - **`authDomain`**: Firebase authentication domain
157- - **`storageBucket`**: Firebase storage bucket name
158- - **`messagingSenderId`**: Firebase Cloud Messaging sender ID
159- - **`measurementId`**: Google Analytics measurement ID
160-
161- #### `globalConfig.heartbeats: boolean`
162-
163- - **Purpose**: Enables periodic heartbeat signals for monitoring
164- - **Default**: `false`
165- - **Effects**: Sends regular status updates to monitoring systems
166-
167- ### Error Tracking
168-
169- #### `sentry`
170-
171- Sentry error tracking and performance monitoring configuration:
172-
173- **`dsn: string`**
174-
175- - **Purpose**: Sentry Data Source Name for error reporting
176- - **Format**: `https://[key]@[host]/[project-id]`
177-
178- **`tracingOrigins: string[]`**
179-
180- - **Purpose**: List of origins to include in performance tracing
181- - **Example**: `['https://www.openmina.com', ' localhost:4200' ]`
182-
183- ### Node Configurations
184-
185- #### `configs: Array<Config>`
186-
187- Array of node connection configurations:
188-
189- **Config Object Structure:**
190-
191- ```javascript
192- {
193- name : string , // Display name for the node
194- url ?: string , // GraphQL endpoint URL (optional for WebNodes)
195- isWebNode ?: boolean , // True for browser-based WebAssembly nodes
196- }
197- ```
198-
199- **Examples:**
200-
201- ```javascript
202- // Regular node connection
203- {
204- name : ' Production Node' ,
205- url : ' https://api.openmina.com/graphql'
206- }
207-
208- // WebNode (browser-based)
209- {
210- name : ' Web Node' ,
211- isWebNode : true
212- }
213- ```
214-
215- ## Available Environments
216-
217- ### `local.js`
218-
219- Development environment for local node connections:
220-
221- ```javascript
222- export default {
223- production : false ,
224- globalConfig : {
225- features: {
226- dashboard: [],
227- " block-production" : [" overview" , " won-slots" ],
228- },
229- },
230- configs : [
231- {
232- name: " Local Node" ,
233- url: " http://localhost:3085" ,
234- },
235- ],
236- } ;
237- ```
238-
239- ### `production.js`
240-
241- Optimized production environment:
242-
243- ```javascript
244- export default {
245- production : true ,
246- globalConfig : {
247- features: {
248- dashboard: [],
249- " block-production" : [" overview" , " won-slots" ],
250- },
251- },
252- sentry : {
253- dsn:
" https://[email protected] /project-id" ,
254- tracingOrigins: [" https://www.openmina.com" ],
255- },
256- configs : [
257- {
258- name: " Production Node" ,
259- url: " https://production-node.openmina.com" ,
260- },
261- ],
262- } ;
263- ```
264-
265- ### `webnode.js`
266-
267- WebNode browser-based configuration:
268-
269- ```javascript
270- export default {
271- production : true ,
272- canAddNodes : false ,
273- showWebNodeLandingPage : true ,
274- globalConfig : {
275- features: {
276- dashboard: [],
277- " block-production" : [" won-slots" ],
278- },
279- firebase: {
280- /* Firebase config */
281- },
282- },
283- sentry : {
284- /* Sentry config */
285- },
286- configs : [
287- {
288- name: " Web Node" ,
289- isWebNode: true ,
290- },
291- ],
292- } ;
293- ```
294-
295- ### `producer.js`
296-
297- Block producer dashboard configuration:
298-
299- ```javascript
300- export default {
301- production : true ,
302- hideNodeStats : true ,
303- globalConfig : {
304- features: {
305- " block-production" : [" overview" ],
306- },
307- },
308- configs : [
309- {
310- name: " Producer-0" ,
311- url: " https://producer-0.example.com" ,
312- },
313- // Additional producer nodes...
314- ],
315- } ;
316- ```
317-
318- ### `fuzzing.js`
319-
320- Fuzzing test environment:
321-
322- ```javascript
323- export default {
324- production : false ,
325- globalConfig : {
326- features: {
327- dashboard: [],
328- " block-production" : [" overview" , " won-slots" ],
329- },
330- },
331- configs : [
332- {
333- name: " Fuzzing Node" ,
334- url: " http://localhost:3085" ,
335- },
336- ],
337- } ;
338- ```
339-
340- ## Creating Custom Environments
341-
342- To create a new environment configuration:
343-
344- 1. **Create the configuration file** in `frontend/src/assets/environments/`:
345-
346- ```bash
347- cp frontend/src/assets/environments/local.js frontend/src/assets/environments/custom.js
348- ```
349-
350- 2. **Modify the configuration** to suit your needs:
351-
352- ```javascript
353- export default {
354- production : true ,
355- canAddNodes : true ,
356- globalConfig : {
357- features: {
358- dashboard: [],
359- " block-production" : [" overview" ],
360- },
361- },
362- configs : [
363- {
364- name: " Custom Node" ,
365- url: " https://your-node.example.com" ,
366- },
367- ],
368- } ;
369- ```
370-
371- 3. **Add a Makefile target** (optional):
372-
373- ```makefile
374- .PHONY: build-custom
375- build-custom: ## Build the frontend with custom configuration
376- npx ng build --configuration production
377- cp dist/frontend/browser/assets/environments/custom.js \
378- dist/frontend/browser/assets/environments/env.js
379- ```
380-
381- 4. **Update Docker support** (if needed) by adding the environment to
382- `frontend/docker/startup.sh`.
383-
38433## Usage and Integration
38534
38635<!-- prettier-ignore-start -->
@@ -560,16 +209,7 @@ if (CONFIG.hidePeersPill) {
560209}
561210```
562211
563- #### 4. Firebase Integration
564-
565- ```typescript
566- // Initialize Firebase with environment-specific config
567- if (CONFIG.globalConfig.firebase) {
568- initializeApp (CONFIG .globalConfig .firebase );
569- }
570- ```
571-
572- #### 5. Error Tracking
212+ #### 4. Error Tracking
573213
574214```typescript
575215// Configure Sentry with environment-specific DSN
0 commit comments