@monygroupcorp/micro-web3 0.1.1 → 1.2.0

package/src/components/WalletButton/WalletButton.js

@@ -0,0 +1,213 @@
+import { FloatingWalletButton } from '../FloatingWalletButton/FloatingWalletButton.js';
+import WalletModal from '../Wallet/WalletModal.js';
+
+class WalletButtonModal extends WalletModal {
+  events() {
+    const baseEvents = typeof super.events === 'function' ? super.events() : {};
+    return {
+      ...baseEvents,
+      'click .wallet-option': async (e) => {
+        const button = e?.target?.closest?.('.wallet-option');
+        const walletType = button?.dataset?.wallet;
+        if (!walletType) {
+          return;
+        }
+        if (this.onWalletSelected) {
+          await this.onWalletSelected(walletType);
+        }
+        this.hide();
+      },
+    };
+  }
+}
+
+export class WalletButton extends FloatingWalletButton {
+  constructor(props) {
+    super(props);
+    this.modalRoot = null;
+  }
+
+  async showWalletModal() {
+    const providerMap =
+      this.walletService?.providerMap ||
+      {
+        rabby: () => (window.ethereum?.isRabby ? window.ethereum : null),
+        rainbow: () => (window.ethereum?.isRainbow ? window.ethereum : null),
+        phantom: () => window.phantom?.ethereum || null,
+        metamask: () => window.ethereum || null,
+      };
+
+    const walletIcons =
+      this.walletService?.walletIcons ||
+      {
+        rabby: '/public/wallets/rabby.webp',
+        rainbow: '/public/wallets/rainbow.webp',
+        phantom: '/public/wallets/phantom.webp',
+        metamask: '/public/wallets/MetaMask.webp',
+      };
+
+    if (!this.walletModal) {
+      this.walletModal = new WalletButtonModal({
+        providerMap,
+        walletIcons,
+        onWalletSelected: async (walletType) => {
+          await this.handleWalletSelection(walletType);
+        },
+      });
+
+      if (!this.modalRoot) {
+        this.modalRoot = document.createElement('div');
+        document.body.appendChild(this.modalRoot);
+      }
+
+      this.walletModal.mount(this.modalRoot);
+    }
+
+    this.walletModal.show();
+  }
+
+  onUnmount() {
+    if (this.modalRoot?.parentNode) {
+      this.modalRoot.parentNode.removeChild(this.modalRoot);
+      this.modalRoot = null;
+    }
+    super.onUnmount();
+  }
+
+  render() {
+    if (this.state.loading) {
+      return `
+        <div class="floating-wallet-button loading">
+          <div class="wallet-spinner"></div>
+        </div>
+      `;
+    }
+
+    const { walletConnected, address, balance, menuOpen } = this.state;
+
+    if (!walletConnected) {
+      return `
+        <div class="floating-wallet-button disconnected" data-ref="wallet-button">
+          <button class="wallet-btn" data-ref="connect-btn">
+            <span class="wallet-mark"></span>
+            <span class="wallet-text">Connect Wallet</span>
+          </button>
+        </div>
+      `;
+    }
+
+    const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+    const classNames = ['floating-wallet-button', 'connected'];
+    if (menuOpen) {
+      classNames.push('menu-open');
+    }
+
+    const markup = `
+      <div class="${classNames.join(' ')}" data-ref="wallet-button">
+        <button class="wallet-btn" data-ref="wallet-btn" title="${this.escapeHtml(address)}\nBalance: ${balance} ETH">
+          <span class="wallet-mark wallet-mark--connected"></span>
+          <span class="wallet-address">${this.escapeHtml(truncatedAddress)}</span>
+          <span class="wallet-disconnect" data-ref="inline-disconnect" title="Disconnect">⏏︎</span>
+        </button>
+        ${this.renderWalletPanel(address, balance, menuOpen)}
+      </div>
+    `;
+
+    return this.minifyHtml(markup);
+  }
+
+  events() {
+    const baseEvents = super.events?.() || {};
+    return {
+      ...baseEvents,
+      'click [data-ref="inline-disconnect"]': (e) => this.handleInlineDisconnect(e),
+      'click [data-ref="wallet-btn"]': (e) => this.handleWalletToggle(e),
+      'click [data-ref="connect-btn"]': (e) => this.handleWalletToggle(e),
+    };
+  }
+
+  renderWalletPanel(address, balance, menuOpen) {
+    const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+
+    const markup = `
+      <div class="wallet-info-panel" data-ref="wallet-panel" aria-hidden="${menuOpen ? 'false' : 'true'}">
+        <div class="wallet-info-row">
+          <span class="wallet-info-label">Address</span>
+          <span class="wallet-info-value">${this.escapeHtml(truncatedAddress)}</span>
+        </div>
+        <div class="wallet-info-row">
+          <span class="wallet-info-label">ETH Balance</span>
+          <span class="wallet-info-value">${balance} ETH</span>
+        </div>
+      </div>
+    `;
+
+    return this.minifyHtml(markup);
+  }
+
+  onStateUpdate(oldState, newState) {
+    if (typeof super.onStateUpdate === 'function') {
+      super.onStateUpdate(oldState, newState);
+    }
+    if (!oldState || oldState.menuOpen !== newState.menuOpen) {
+      if (newState.menuOpen) {
+        this.attachOutsideClickListener();
+      } else {
+        this.detachOutsideClickListener();
+      }
+    }
+  }
+
+  attachOutsideClickListener() {
+    if (this.outsideClickHandler || this.outsideClickTimeout) return;
+    this.outsideClickHandler = (event) => {
+      if (!this.element) return;
+      const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+      const clickedInside =
+        (path.length && path.includes(this.element)) ||
+        (event.target && this.element.contains(event.target));
+      if (!clickedInside) {
+        this.setState({ menuOpen: false });
+      }
+    };
+    this.outsideClickTimeout = window.setTimeout(() => {
+      document.addEventListener('click', this.outsideClickHandler);
+      this.outsideClickTimeout = null;
+    }, 0);
+  }
+
+  detachOutsideClickListener() {
+    if (this.outsideClickTimeout) {
+      window.clearTimeout(this.outsideClickTimeout);
+      this.outsideClickTimeout = null;
+    }
+    if (this.outsideClickHandler) {
+      document.removeEventListener('click', this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
+  }
+
+  setupDOMEventListeners() {
+    // Delegated events handle wiring in this component.
+  }
+
+  handleWalletToggle(e) {
+    this.handleButtonClick(e);
+  }
+
+  handleInlineDisconnect(e) {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    super.handleDisconnect(e);
+  }
+
+  minifyHtml(markup) {
+    return typeof markup === 'string'
+      ? markup.replace(/>\s+</g, '><').trim()
+      : markup;
+  }
+}
+
+export default WalletButton;

package/src/index.js

@@ -4,9 +4,14 @@ 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';
+import { WalletButton } from './components/WalletButton/WalletButton.js';
 import { WalletModal } from './components/Wallet/WalletModal.js';
 import { IpfsImage } from './components/Ipfs/IpfsImage.js';
 import { SwapInterface } from './components/Swap/SwapInterface.js';
@@ -18,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
@@ -26,9 +33,16 @@ export {
   ContractCache,
   PriceService,
   IpfsService,
+  EventIndexer,
+
+  // Storage adapters and settings
+  IndexedDBAdapter,
+  MemoryAdapter,
+  IndexerSettings,
 
   // UI Components
   FloatingWalletButton,
+  WalletButton,
   WalletModal,
   IpfsImage,
   SwapInterface,
@@ -39,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;