Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
362 changes: 1 addition & 361 deletions website/docs/developers/frontend/environment-configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,357 +30,6 @@ with full JSDoc documentation.

<!-- prettier-ignore-stop -->

```javascript
export default {
// Core settings
production: boolean,
canAddNodes: boolean,
hideNodeStats: boolean,
showWebNodeLandingPage: boolean,
hidePeersPill: boolean,
hideTxPill: boolean,

// Global configuration
globalConfig: {
features: {
dashboard: string[],
'block-production': string[],
mempool: string[],
state: string[],
},
firebase: {
projectId: string,
appId: string,
apiKey: string,
authDomain: string,
storageBucket: string,
messagingSenderId: string,
measurementId: string,
},
heartbeats: boolean,
},

// Error tracking
sentry: {
dsn: string,
tracingOrigins: string[],
},

// Node configurations
configs: Array<{
name: string,
url?: string,
isWebNode?: boolean,
}>,
};
```

## Configuration Fields Reference

### Core Settings

#### `production: boolean`

- **Purpose**: Determines if the application runs in production mode
- **Default**: `false` for development environments, `true` for production
- **Effects**:
- Enables/disables debugging features
- Controls console logging verbosity
- Affects bundle optimization

#### `canAddNodes: boolean`

- **Purpose**: Controls whether users can dynamically add new node connections
- **Default**: `true` for development, `false` for production
- **Effects**: Shows/hides "Add Node" functionality in the UI

#### `hideNodeStats: boolean`

- **Purpose**: Controls visibility of detailed node statistics
- **Default**: `false`
- **Effects**: Hides performance metrics and detailed node information when
`true`

#### `showWebNodeLandingPage: boolean`

- **Purpose**: Controls whether to display the WebNode-specific landing page
- **Default**: `false`
- **Effects**: Shows WebNode introduction and setup instructions

#### `hidePeersPill: boolean`

- **Purpose**: Controls visibility of the peers status indicator
- **Default**: `false`
- **Effects**: Hides the peers connection pill in the UI

#### `hideTxPill: boolean`

- **Purpose**: Controls visibility of the transaction pool indicator
- **Default**: `false`
- **Effects**: Hides the transaction pool status pill in the UI

### Global Configuration

#### `globalConfig.features`

Controls which features and sub-features are enabled for each module:

**`dashboard: string[]`**

- Available features: `[]` (empty array enables all dashboard features)
- Controls main dashboard functionality

**`'block-production': string[]`**

- Available features: `['overview', 'won-slots']`
- `overview`: Block production statistics and metrics
- `won-slots`: Detailed view of won slot information

**`mempool: string[]`**

- Available features: `[]` (empty array enables all mempool features)
- Controls transaction pool monitoring

**`state: string[]`**

- Available features: `['actions']`
- `actions`: State transition action monitoring

#### `globalConfig.firebase`

Firebase integration settings for analytics and real-time features:

- **`projectId`**: Firebase project identifier
- **`appId`**: Firebase application ID
- **`apiKey`**: Firebase API key for client authentication
- **`authDomain`**: Firebase authentication domain
- **`storageBucket`**: Firebase storage bucket name
- **`messagingSenderId`**: Firebase Cloud Messaging sender ID
- **`measurementId`**: Google Analytics measurement ID

#### `globalConfig.heartbeats: boolean`

- **Purpose**: Enables periodic heartbeat signals for monitoring
- **Default**: `false`
- **Effects**: Sends regular status updates to monitoring systems

### Error Tracking

#### `sentry`

Sentry error tracking and performance monitoring configuration:

**`dsn: string`**

- **Purpose**: Sentry Data Source Name for error reporting
- **Format**: `https://[key]@[host]/[project-id]`

**`tracingOrigins: string[]`**

- **Purpose**: List of origins to include in performance tracing
- **Example**: `['https://www.openmina.com', 'localhost:4200']`

### Node Configurations

#### `configs: Array<Config>`

Array of node connection configurations:

**Config Object Structure:**

```javascript
{
name: string, // Display name for the node
url?: string, // GraphQL endpoint URL (optional for WebNodes)
isWebNode?: boolean, // True for browser-based WebAssembly nodes
}
```

**Examples:**

```javascript
// Regular node connection
{
name: 'Production Node',
url: 'https://api.openmina.com/graphql'
}

// WebNode (browser-based)
{
name: 'Web Node',
isWebNode: true
}
```

## Available Environments

### `local.js`

Development environment for local node connections:

```javascript
export default {
production: false,
globalConfig: {
features: {
dashboard: [],
"block-production": ["overview", "won-slots"],
},
},
configs: [
{
name: "Local Node",
url: "http://localhost:3085",
},
],
};
```

### `production.js`

Optimized production environment:

```javascript
export default {
production: true,
globalConfig: {
features: {
dashboard: [],
"block-production": ["overview", "won-slots"],
},
},
sentry: {
dsn: "https://[email protected]/project-id",
tracingOrigins: ["https://www.openmina.com"],
},
configs: [
{
name: "Production Node",
url: "https://production-node.openmina.com",
},
],
};
```

### `webnode.js`

WebNode browser-based configuration:

```javascript
export default {
production: true,
canAddNodes: false,
showWebNodeLandingPage: true,
globalConfig: {
features: {
dashboard: [],
"block-production": ["won-slots"],
},
firebase: {
/* Firebase config */
},
},
sentry: {
/* Sentry config */
},
configs: [
{
name: "Web Node",
isWebNode: true,
},
],
};
```

### `producer.js`

Block producer dashboard configuration:

```javascript
export default {
production: true,
hideNodeStats: true,
globalConfig: {
features: {
"block-production": ["overview"],
},
},
configs: [
{
name: "Producer-0",
url: "https://producer-0.example.com",
},
// Additional producer nodes...
],
};
```

### `fuzzing.js`

Fuzzing test environment:

```javascript
export default {
production: false,
globalConfig: {
features: {
dashboard: [],
"block-production": ["overview", "won-slots"],
},
},
configs: [
{
name: "Fuzzing Node",
url: "http://localhost:3085",
},
],
};
```

## Creating Custom Environments

To create a new environment configuration:

1. **Create the configuration file** in `frontend/src/assets/environments/`:

```bash
cp frontend/src/assets/environments/local.js frontend/src/assets/environments/custom.js
```

2. **Modify the configuration** to suit your needs:

```javascript
export default {
production: true,
canAddNodes: true,
globalConfig: {
features: {
dashboard: [],
"block-production": ["overview"],
},
},
configs: [
{
name: "Custom Node",
url: "https://your-node.example.com",
},
],
};
```

3. **Add a Makefile target** (optional):

```makefile
.PHONY: build-custom
build-custom: ## Build the frontend with custom configuration
npx ng build --configuration production
cp dist/frontend/browser/assets/environments/custom.js \
dist/frontend/browser/assets/environments/env.js
```

4. **Update Docker support** (if needed) by adding the environment to
`frontend/docker/startup.sh`.

## Usage and Integration

<!-- prettier-ignore-start -->
Expand Down Expand Up @@ -560,16 +209,7 @@ if (CONFIG.hidePeersPill) {
}
```

#### 4. Firebase Integration

```typescript
// Initialize Firebase with environment-specific config
if (CONFIG.globalConfig.firebase) {
initializeApp(CONFIG.globalConfig.firebase);
}
```

#### 5. Error Tracking
#### 4. Error Tracking

```typescript
// Configure Sentry with environment-specific DSN
Expand Down
Loading