A lightweight component for monitoring subgraph statuses. Supports vanilla JS, React, Next.js, and CDN integration.
- π Easy integration with Web Components, React, or plain JS
- π¨ Supports
light
,dark
, andauto
themes - π Automatic refreshing of subgraph statuses
β οΈ Robust error handling for partial or failed responses- π CDN-ready or available via npm
- π¦ Minimal bundle size
npm install monitor-widget
# or
yarn add monitor-widget
<script
type="module"
src="https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/vanilla.mjs"
></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/vanilla.mjs"
></script>
<monitor-widget
subgraph-ids="Qm123...,Qm456..."
status-endpoint="http://localhost:3000/status"
refresh-interval-ms="10000"
theme="auto"
></monitor-widget>
You can try out the widget live on CodePen.
Attribute | Type | Required | Description |
---|---|---|---|
subgraph-ids |
string |
β | Comma-separated list of subgraph IDs |
status-endpoint |
string |
β | API endpoint URL for fetching subgraph status |
refresh-interval-ms |
number |
β | Refresh interval in milliseconds (default false). |
theme |
string |
β | Theme mode: light , dark , or auto (default) |
import { MonitorWidget } from 'monitor-widget/react';
<MonitorWidget
subgraphIds={['Qm123...', 'Qm456...']}
statusEndpoint="http://localhost:3000/status"
refreshIntervalMs={10000}
theme="auto" // "light" | "dark"
/>;
You can try out the widget live on StackBlitz.
Prop | Type | Required | Description |
---|---|---|---|
subgraphIds |
string[] |
β | Array of subgraph IDs |
statusEndpoint |
string |
β | API endpoint URL for fetching subgraph status |
refreshIntervalMs |
number |
β | Refresh interval in milliseconds (default: false). |
theme |
string |
β | Theme mode: light , dark , or auto (default) |
<div id="monitor-container"></div>
<script type="module">
import { WidgetApp } from 'https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/core.mjs';
const app = new WidgetApp({
subgraphIds: ['Qm123...', 'Qm456...'],
statusEndpoint: 'http://localhost:3000/status',
refreshIntervalMs: 10000,
theme: 'auto', // "light" | "dark"
});
app.render(document.getElementById('monitor-container'));
</script>
You can try out the widget live on CodePen.
Option | Type | Required | Description |
---|---|---|---|
subgraphIds |
string[] |
β | Array of subgraph IDs |
statusEndpoint |
string |
β | API endpoint URL for fetching subgraph status |
refreshIntervalMs |
number |
β | Refresh interval (default: false). |
theme |
string |
β | Theme mode: light , dark , or auto (default) |
The widget supports the following themes:
- π Dark mode
- βοΈ Light mode
- βοΈ Auto mode (based on user's OS preference)
Customize further by overriding CSS variables or adding your own styles.
Feel free to open issues, submit pull requests, or suggest improvements!
MIT