@monygroupcorp/micro-web3 0.1.3 → 1.2.1

package/src/components/SyncProgressBar/SyncProgressBar.js

@@ -0,0 +1,238 @@
+// src/components/SyncProgressBar/SyncProgressBar.js
+
+/**
+ * SyncProgressBar - UI component showing indexer sync status.
+ *
+ * @example
+ * import { SyncProgressBar } from '@monygroupcorp/micro-web3/components';
+ * const progressBar = new SyncProgressBar({ indexer, eventBus });
+ * progressBar.mount(document.getElementById('sync-status'));
+ */
+class SyncProgressBar {
+  constructor({ indexer, eventBus }) {
+    if (!indexer) {
+      throw new Error('SyncProgressBar requires indexer instance');
+    }
+    if (!eventBus) {
+      throw new Error('SyncProgressBar requires eventBus instance');
+    }
+
+    this.indexer = indexer;
+    this.eventBus = eventBus;
+    this.element = null;
+    this.unsubscribers = [];
+
+    this.state = {
+      status: 'initializing',
+      progress: 0,
+      currentBlock: 0,
+      latestBlock: 0,
+      error: null
+    };
+  }
+
+  mount(container) {
+    if (typeof container === 'string') {
+      container = document.querySelector(container);
+    }
+    if (!container) {
+      throw new Error('SyncProgressBar: Invalid container');
+    }
+
+    // Create element
+    this.element = document.createElement('div');
+    this.element.className = 'mw3-sync-progress';
+    container.appendChild(this.element);
+
+    // Subscribe to events
+    this._setupListeners();
+
+    // Initial render
+    this._updateState(this.indexer.sync.getStatus());
+    this._render();
+
+    return this;
+  }
+
+  unmount() {
+    // Cleanup subscriptions
+    for (const unsub of this.unsubscribers) {
+      unsub();
+    }
+    this.unsubscribers = [];
+
+    // Remove element
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+    this.element = null;
+  }
+
+  _setupListeners() {
+    const listeners = [
+      ['indexer:syncProgress', (data) => {
+        this._updateState({
+          status: 'syncing',
+          progress: data.progress,
+          currentBlock: data.currentBlock,
+          latestBlock: data.latestBlock
+        });
+      }],
+      ['indexer:syncComplete', () => {
+        this._updateState({ status: 'synced', progress: 1 });
+      }],
+      ['indexer:error', (data) => {
+        this._updateState({ status: 'error', error: data.message });
+      }],
+      ['indexer:paused', () => {
+        this._updateState({ status: 'paused' });
+      }],
+      ['indexer:resumed', () => {
+        this._updateState({ status: 'syncing' });
+      }]
+    ];
+
+    for (const [event, handler] of listeners) {
+      const unsub = this.eventBus.on(event, handler);
+      this.unsubscribers.push(unsub);
+    }
+  }
+
+  _updateState(updates) {
+    this.state = { ...this.state, ...updates };
+    this._render();
+  }
+
+  _render() {
+    if (!this.element) return;
+
+    const { status, progress, currentBlock, latestBlock, error } = this.state;
+
+    // Update class for state
+    this.element.className = `mw3-sync-progress mw3-sync-progress--${status}`;
+
+    if (status === 'syncing') {
+      const percent = Math.round(progress * 100);
+      this.element.innerHTML = `
+        <div class="mw3-sync-progress__bar" style="width: ${percent}%"></div>
+        <span class="mw3-sync-progress__text">Syncing... ${percent}%</span>
+      `;
+    } else if (status === 'synced') {
+      this.element.innerHTML = `
+        <span class="mw3-sync-progress__text">Synced to block ${latestBlock.toLocaleString()}</span>
+      `;
+    } else if (status === 'error') {
+      this.element.innerHTML = `
+        <span class="mw3-sync-progress__text">Sync failed: ${error || 'Unknown error'}</span>
+        <button class="mw3-sync-progress__retry">Retry</button>
+      `;
+
+      // Add retry handler
+      const retryBtn = this.element.querySelector('.mw3-sync-progress__retry');
+      if (retryBtn) {
+        retryBtn.onclick = () => this.indexer.sync.resync();
+      }
+    } else if (status === 'paused') {
+      this.element.innerHTML = `
+        <span class="mw3-sync-progress__text">Sync paused</span>
+        <button class="mw3-sync-progress__resume">Resume</button>
+      `;
+
+      const resumeBtn = this.element.querySelector('.mw3-sync-progress__resume');
+      if (resumeBtn) {
+        resumeBtn.onclick = () => this.indexer.sync.resume();
+      }
+    } else {
+      this.element.innerHTML = `
+        <span class="mw3-sync-progress__text">Initializing...</span>
+      `;
+    }
+  }
+
+  /**
+   * Inject default styles into document.
+   * Call once at app startup if not using custom CSS.
+   */
+  static injectStyles() {
+    if (document.getElementById('mw3-sync-progress-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'mw3-sync-progress-styles';
+    style.textContent = `
+      .mw3-sync-progress {
+        position: relative;
+        height: 24px;
+        background: var(--mw3-sync-bg, #f0f0f0);
+        border-radius: 4px;
+        overflow: hidden;
+        font-family: system-ui, sans-serif;
+        font-size: 12px;
+      }
+
+      .mw3-sync-progress__bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: var(--mw3-sync-bar, #4caf50);
+        transition: width 0.3s ease;
+      }
+
+      .mw3-sync-progress__text {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: var(--mw3-sync-text, #333);
+        padding: 0 8px;
+      }
+
+      .mw3-sync-progress--synced {
+        background: var(--mw3-sync-bar, #4caf50);
+      }
+
+      .mw3-sync-progress--synced .mw3-sync-progress__text {
+        color: white;
+      }
+
+      .mw3-sync-progress--error {
+        background: var(--mw3-sync-error, #f44336);
+      }
+
+      .mw3-sync-progress--error .mw3-sync-progress__text {
+        color: white;
+        justify-content: space-between;
+      }
+
+      .mw3-sync-progress__retry,
+      .mw3-sync-progress__resume {
+        background: rgba(255,255,255,0.2);
+        border: 1px solid rgba(255,255,255,0.4);
+        border-radius: 3px;
+        color: white;
+        padding: 2px 8px;
+        cursor: pointer;
+        font-size: 11px;
+      }
+
+      .mw3-sync-progress__retry:hover,
+      .mw3-sync-progress__resume:hover {
+        background: rgba(255,255,255,0.3);
+      }
+
+      .mw3-sync-progress--paused {
+        background: var(--mw3-sync-paused, #ff9800);
+      }
+
+      .mw3-sync-progress--paused .mw3-sync-progress__text {
+        color: white;
+        justify-content: space-between;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+export { SyncProgressBar };

package/src/index.js

@@ -4,6 +4,10 @@ import WalletService from './services/WalletService.js';
 import ContractCache from './services/ContractCache.js';
 import PriceService from './services/PriceService.js';
 import * as IpfsService from './services/IpfsService.js';
+import EventIndexer from './services/EventIndexer.js';
+
+// Storage adapters and settings
+import { IndexedDBAdapter, MemoryAdapter, IndexerSettings } from './storage/index.js';
 
 // UI Components
 import { FloatingWalletButton } from './components/FloatingWalletButton/FloatingWalletButton.js';
@@ -19,6 +23,8 @@ import { BondingCurve } from './components/BondingCurve/BondingCurve.js';
 import { PriceDisplay } from './components/Display/PriceDisplay.js';
 import { BalanceDisplay } from './components/Display/BalanceDisplay.js';
 import { MessagePopup } from './components/Util/MessagePopup.js';
+import { SyncProgressBar } from './components/SyncProgressBar/SyncProgressBar.js';
+import { SettingsModal } from './components/SettingsModal/SettingsModal.js';
 
 export {
   // Services
@@ -27,6 +33,12 @@ export {
   ContractCache,
   PriceService,
   IpfsService,
+  EventIndexer,
+
+  // Storage adapters and settings
+  IndexedDBAdapter,
+  MemoryAdapter,
+  IndexerSettings,
 
   // UI Components
   FloatingWalletButton,
@@ -41,5 +53,7 @@ export {
   BondingCurve,
   PriceDisplay,
   BalanceDisplay,
-  MessagePopup
+  MessagePopup,
+  SyncProgressBar,
+  SettingsModal
 };

package/src/indexer/EntityResolver.js

@@ -0,0 +1,218 @@
+// src/indexer/EntityResolver.js
+
+/**
+ * Entity resolver for EventIndexer.
+ * Provides the Entities API for domain-level queries.
+ */
+class EntityResolver {
+  constructor(queryEngine, entityDefinitions = {}) {
+    this.queryEngine = queryEngine;
+    this.definitions = entityDefinitions;
+    this.entityAPIs = {};
+
+    // Create API for each entity
+    for (const [name, definition] of Object.entries(entityDefinitions)) {
+      this.entityAPIs[name] = this._createEntityAPI(name, definition);
+    }
+  }
+
+  /**
+   * Get entity API by name.
+   * @param {string} name - Entity name
+   * @returns {EntityQueryable}
+   */
+  getEntity(name) {
+    return this.entityAPIs[name];
+  }
+
+  /**
+   * Get all entity APIs (for proxy access).
+   * @returns {Object}
+   */
+  getAllEntities() {
+    return this.entityAPIs;
+  }
+
+  _createEntityAPI(name, definition) {
+    const self = this;
+
+    return {
+      /**
+       * Query entities.
+       * @param {EntityWhereClause} where - Filter conditions
+       * @returns {Promise<Entity[]>}
+       */
+      async query(where = {}) {
+        return self._queryEntities(name, definition, where);
+      },
+
+      /**
+       * Get single entity by key.
+       * @param {string|number} key - Entity key value
+       * @returns {Promise<Entity|null>}
+       */
+      async get(key) {
+        const entities = await self._queryEntities(name, definition, {
+          [definition.key]: key
+        });
+        return entities[0] || null;
+      },
+
+      /**
+       * Subscribe to entity changes.
+       * @param {EntityWhereClause} where - Filter conditions
+       * @param {Function} callback - Called when entities change
+       * @returns {Function} Unsubscribe function
+       */
+      subscribe(where, callback) {
+        // Subscribe to source event and related events
+        const eventTypes = self._getRelevantEventTypes(definition);
+
+        return self.queryEngine.subscribe(eventTypes, async () => {
+          const entities = await self._queryEntities(name, definition, where);
+          callback(entities);
+        });
+      },
+
+      /**
+       * Count entities.
+       * @param {EntityWhereClause} where - Filter conditions
+       * @returns {Promise<number>}
+       */
+      async count(where = {}) {
+        const entities = await self._queryEntities(name, definition, where);
+        return entities.length;
+      }
+    };
+  }
+
+  async _queryEntities(name, definition, where = {}) {
+    // Separate status filter from direct filters
+    const statusFilter = where.status;
+    const directFilters = { ...where };
+    delete directFilters.status;
+
+    // Query source events
+    const sourceResult = await this.queryEngine.query(definition.source, {
+      where: directFilters,
+      limit: 10000 // Get all matching source events
+    });
+
+    // Get event checker for status/computed evaluation
+    const eventChecker = await this.queryEngine.getEventChecker();
+
+    // Prefetch events needed for status evaluation
+    const relevantEventTypes = this._getRelevantEventTypes(definition);
+    await eventChecker.prefetch(relevantEventTypes);
+
+    // Build entities from source events
+    const entities = [];
+    for (const sourceEvent of sourceResult.events) {
+      const entity = await this._buildEntity(name, definition, sourceEvent, eventChecker);
+
+      // Apply status filter
+      if (statusFilter && entity.status !== statusFilter) {
+        continue;
+      }
+
+      entities.push(entity);
+    }
+
+    return entities;
+  }
+
+  async _buildEntity(name, definition, sourceEvent, eventChecker) {
+    const entity = {
+      _type: name,
+      _sourceEvent: sourceEvent,
+      ...sourceEvent.data
+    };
+
+    // Add key field explicitly
+    entity[definition.key] = sourceEvent.data[definition.key] || sourceEvent.indexed[definition.key];
+
+    // Evaluate status
+    if (definition.status) {
+      entity.status = this._evaluateStatus(entity, definition.status, eventChecker);
+    }
+
+    // Evaluate computed fields
+    if (definition.computed) {
+      for (const [fieldName, computeFn] of Object.entries(definition.computed)) {
+        try {
+          entity[fieldName] = computeFn(entity, eventChecker);
+        } catch (error) {
+          console.error(`[EntityResolver] Error computing ${fieldName}:`, error);
+          entity[fieldName] = null;
+        }
+      }
+    }
+
+    // Resolve relations (lazy - only resolve when accessed)
+    if (definition.relations) {
+      for (const [relationName, relationDef] of Object.entries(definition.relations)) {
+        Object.defineProperty(entity, relationName, {
+          get: () => this._resolveRelation(entity, relationDef),
+          enumerable: true
+        });
+      }
+    }
+
+    return entity;
+  }
+
+  _evaluateStatus(entity, statusDef, eventChecker) {
+    // Check each status condition in order
+    for (const [statusName, condition] of Object.entries(statusDef)) {
+      if (statusName === 'default') continue;
+
+      try {
+        if (condition(entity, eventChecker)) {
+          return statusName;
+        }
+      } catch (error) {
+        console.error(`[EntityResolver] Error evaluating status ${statusName}:`, error);
+      }
+    }
+
+    return statusDef.default || 'unknown';
+  }
+
+  async _resolveRelation(entity, relationDef) {
+    const relatedEntity = this.entityAPIs[relationDef.entity];
+    if (!relatedEntity) return null;
+
+    const foreignKeyValue = entity[relationDef.foreignKey];
+    if (foreignKeyValue === undefined) return null;
+
+    if (relationDef.type === 'many') {
+      return relatedEntity.query({ [relationDef.foreignKey]: foreignKeyValue });
+    } else {
+      return relatedEntity.get(foreignKeyValue);
+    }
+  }
+
+  _getRelevantEventTypes(definition) {
+    const types = new Set([definition.source]);
+
+    // Add events referenced in status conditions
+    if (definition.status) {
+      for (const condition of Object.values(definition.status)) {
+        if (typeof condition === 'function') {
+          // Try to extract event names from function source
+          // This is a best-effort heuristic
+          const fnStr = condition.toString();
+          const matches = fnStr.match(/events\.has\(['"](\w+)['"]/g) || [];
+          for (const match of matches) {
+            const eventName = match.match(/['"](\w+)['"]/)?.[1];
+            if (eventName) types.add(eventName);
+          }
+        }
+      }
+    }
+
+    return Array.from(types);
+  }
+}
+
+export default EntityResolver;