A modular, extensible service console for providers on the M3tering protocol. Features a hook-based architecture for backend extensibility and a UI extension system for frontend customization.

• Make sure Public key is set on the M3ter contract
• Make sure the price for energy has been set on the PriceContext contract
• Make sure the Console has been granted publish permission on the Streamr stream

1. Clone/Update

   git clone https://github.com/M3tering/Console.git
   # or
   cd Console/ && git pull

2. Environment Variables Create .env file:

   PORT=3000
   API_TOKEN=...
   APPLICATION_ID=...
   CONTRACT_LABEL=M3ters
   CHIRPSTACK_HOST=localhost
   MAINNET_RPC=https://sepolia.drpc.org
   PREFERRED_PROVER_NODE=http://34.244.149.153
   ETHEREUM_PRIVATE_KEY="..."
   

3. Docker Build and Run

   sudo docker compose down
   sudo docker compose up -d

• sudo docker ps - list running containers
• sudo docker ps -a - list all containers
• sudo docker compose down - stop container
• sudo docker compose logs - view logs
• sudo docker compose logs -tf - follow logs with timestamps
• sudo docker system prune - cleanup unused containers/images
• sudo docker system prune -a - cleanup everything unused

npm install
npm run dev

The M3tering Console provides two complementary extension systems:

1. Backend Hooks - Hook into the console lifecycle (MQTT, database, message processing)
2. UI Hooks - Add custom icons, panels, and actions to the web interface

Both systems use a config-driven approach where modules are loaded dynamically from paths specified in console.config.json.

{
    "modules": [
        "core/arweave",
        "core/prover",
        "core/streamr",
        "core/is_on",
        "core/prune_sync"
    ],
    "uiModules": {
        "streamr": "core/streamr/ui"
    },
    "streamr": {
        "streamId": [
            "0x567853282663b601bfdb9203819b1fbb3fe18926/m3tering/test"
        ],
        "cronSchedule": "0 * * * *"
    },
    "prune_sync": {
        "cronSchedule": "0 * * * *"
    }
}

• modules: Array of paths to backend hook modules (relative to src/lib/)
• uiModules: Object mapping module IDs to UI module paths (relative to src/lib/)

Backend hooks allow modules to react to console lifecycle events. Each module exports a default class implementing the Hooks interface.

// src/lib/core/my-module/index.ts
import type { Hooks } from "../../../types";

export default class implements Hooks {
  onAfterInit() {
    console.log("My module initialized!");
  }

  onTransactionDistribution(tokenId, decodedPayload, pendingTransactions) {
    // Process transactions
  }
}

Add to console.config.json:

{
  "modules": ["core/my-module"]
}

UI Hooks allow modules to extend the web interface at http://localhost:3000. Modules can add desktop icons, app windows/panels, and trigger-able actions.

// src/lib/core/my-module/ui.ts
import type { UIHooks, UIAppIcon, UIAppWindow, UIAction } from "../../../types";

export default class implements UIHooks {
  getAppIcon(): UIAppIcon {
    return {
      id: "my-module",
      label: "My Module",
      iconHtml: '<i class="nes-icon heart is-medium"></i>',
      buttonClass: "is-primary",
    };
  }

  getAppWindow(): UIAppWindow {
    return {
      id: "my-module",
      title: "My Module Panel",
      contentHtml: `
        <p>Hello from my module!</p>
        <button class="nes-btn is-success" onclick="invokeAction('my-module', 'do-something', this)">
          Do Something
        </button>
      `,
    };
  }

  getActions(): UIAction[] {
    return [
      {
        id: "do-something",
        label: "Do Something",
        handler: async () => {
          // Perform action
          return { message: "Action completed!" };
        },
      },
    ];
  }
}

Add to console.config.json:

{
  "uiModules": {
    "my-module": "core/my-module/ui"
  }
}

interface UIAppIcon {
  id: string;          // Unique identifier
  label: string;       // Display label below icon
  iconHtml: string;    // HTML content (supports NES.css icons)
  buttonClass?: string; // Optional button class (e.g., "is-primary")
}

interface UIAppWindow {
  id: string;           // Must match icon id
  title: string;        // Window title bar text
  contentHtml: string;  // HTML content for window body
  containerClass?: string; // Optional container class
}

interface UIAction {
  id: string;           // Action identifier
  label: string;        // Button label
  buttonClass?: string; // Optional button class
  handler: () => void | Promise<{ message?: string; data?: any }>;
}

From your panel HTML, use the global invokeAction() function:

// invokeAction(moduleId, actionId, buttonElement?)
invokeAction('my-module', 'do-something', this);

The function:

• Shows loading state on the button (if provided)
• Calls POST /api/actions/:moduleId/:actionId
• Displays success/error notification using NES.css styling

POST /api/actions/:moduleId/:actionId

Response: { success: boolean, message?: string, data?: any }