@monygroupcorp/micro-web3 0.1.1 → 1.2.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@monygroupcorp/micro-web3",
-  "version": "0.1.1",
+  "version": "1.2.0",
   "description": "A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.",
-  "main": "dist/micro-web3.cjs.js",
+  "main": "dist/micro-web3.cjs",
   "module": "dist/micro-web3.esm.js",
   "type": "module",
   "scripts": {

package/rollup.config.cjs

@@ -7,7 +7,7 @@ module.exports = [
     input: 'src/index.js',
     output: [
       {
-        file: 'dist/micro-web3.cjs.js',
+        file: 'dist/micro-web3.cjs',
         format: 'cjs',
         sourcemap: true,
       },

package/src/components/FloatingWalletButton/FloatingWalletButton.js

@@ -1,5 +1,6 @@
 import { Component, eventBus } from '@monygroupcorp/microact';
 import WalletModal from '../Wallet/WalletModal.js';
+import { SettingsModal } from '../SettingsModal/SettingsModal.js';
 import { ethers } from 'ethers';
 
 /**
@@ -12,6 +13,7 @@ export class FloatingWalletButton extends Component {
         super();
         this.walletService = props.walletService;
         this.walletModal = null;
+        this.settingsModal = null;
         this.state = {
             walletConnected: false,
             address: null,
@@ -230,13 +232,19 @@ export class FloatingWalletButton extends Component {
 
         // Create WalletModal if not exists
         if (!this.walletModal) {
-            this.walletModal = new WalletModal(
+            this.walletModal = new WalletModal({
                 providerMap,
                 walletIcons,
-                async (walletType) => {
+                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();
@@ -637,6 +645,7 @@ export class FloatingWalletButton extends Component {
                     this.handleMenuItemClick(route);
                 } else if (action === 'settings') {
                     this.setState({ menuOpen: false });
+                    this.openSettings();
                 }
             });
         });
@@ -657,12 +666,25 @@ export class FloatingWalletButton extends Component {
         }
     }
 
+    openSettings() {
+        if (!this.settingsModal) {
+            this.settingsModal = new SettingsModal({ eventBus: eventBus });
+        }
+        this.settingsModal.show();
+    }
+
     onUnmount() {
         // Clean up wallet modal
         if (this.walletModal) {
             this.walletModal.hide();
             this.walletModal = null;
         }
+
+        // Clean up settings modal
+        if (this.settingsModal) {
+            this.settingsModal.hide();
+            this.settingsModal = null;
+        }
     }
 
     escapeHtml(text) {
@@ -672,4 +694,3 @@ export class FloatingWalletButton extends Component {
         return div.innerHTML;
     }
 }
-

package/src/components/SettingsModal/SettingsModal.js

@@ -0,0 +1,371 @@
+// src/components/SettingsModal/SettingsModal.js
+
+import { IndexerSettings } from '../../storage/index.js';
+
+/**
+ * SettingsModal - Modal for user settings including indexer storage controls.
+ *
+ * @example
+ * const modal = new SettingsModal({ eventBus });
+ * modal.show();
+ */
+class SettingsModal {
+  constructor({ eventBus }) {
+    this.eventBus = eventBus;
+    this.element = null;
+    this.overlay = null;
+    this.isVisible = false;
+    this.state = {
+      storageEnabled: true,
+      storageUsed: 0,
+      storageQuota: 0,
+      clearing: false
+    };
+  }
+
+  async show() {
+    if (this.isVisible) return;
+
+    // Load current settings
+    const settings = IndexerSettings.get();
+    const estimate = await IndexerSettings.getStorageEstimate();
+
+    this.state = {
+      storageEnabled: settings.storageEnabled,
+      storageUsed: estimate.used || 0,
+      storageQuota: estimate.quota || 0,
+      clearing: false
+    };
+
+    this._createModal();
+    this.isVisible = true;
+  }
+
+  hide() {
+    if (!this.isVisible) return;
+
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.parentNode.removeChild(this.overlay);
+    }
+    this.overlay = null;
+    this.element = null;
+    this.isVisible = false;
+  }
+
+  _createModal() {
+    // Inject styles if needed
+    SettingsModal.injectStyles();
+
+    // Create overlay
+    this.overlay = document.createElement('div');
+    this.overlay.className = 'mw3-settings-overlay';
+    this.overlay.addEventListener('click', (e) => {
+      if (e.target === this.overlay) this.hide();
+    });
+
+    // Create modal
+    this.element = document.createElement('div');
+    this.element.className = 'mw3-settings-modal';
+    this.element.innerHTML = this._render();
+
+    this.overlay.appendChild(this.element);
+    document.body.appendChild(this.overlay);
+
+    this._setupEventListeners();
+  }
+
+  _render() {
+    const { storageEnabled, storageUsed, storageQuota, clearing } = this.state;
+    const usedMB = (storageUsed / (1024 * 1024)).toFixed(1);
+    const quotaMB = (storageQuota / (1024 * 1024)).toFixed(0);
+
+    return `
+      <div class="mw3-settings-header">
+        <h2>Settings</h2>
+        <button class="mw3-settings-close" data-action="close">&times;</button>
+      </div>
+
+      <div class="mw3-settings-content">
+        <div class="mw3-settings-section">
+          <h3>Data Storage</h3>
+          <p class="mw3-settings-description">
+            Event data is cached locally to improve performance. You can disable this to save space.
+          </p>
+
+          <div class="mw3-settings-row">
+            <label class="mw3-settings-toggle">
+              <input type="checkbox" ${storageEnabled ? 'checked' : ''} data-setting="storageEnabled">
+              <span class="mw3-toggle-slider"></span>
+              <span class="mw3-toggle-label">Enable local event storage</span>
+            </label>
+          </div>
+
+          <div class="mw3-settings-info">
+            <span>Storage used: ${usedMB} MB${quotaMB > 0 ? ` / ${quotaMB} MB` : ''}</span>
+          </div>
+
+          <div class="mw3-settings-row">
+            <button class="mw3-settings-btn mw3-settings-btn--danger" data-action="clearData" ${clearing ? 'disabled' : ''}>
+              ${clearing ? 'Clearing...' : 'Clear All Cached Data'}
+            </button>
+          </div>
+
+          <p class="mw3-settings-note">
+            Disabling storage means event history will need to be re-fetched each session.
+          </p>
+        </div>
+      </div>
+
+      <div class="mw3-settings-footer">
+        <button class="mw3-settings-btn mw3-settings-btn--primary" data-action="close">Done</button>
+      </div>
+    `;
+  }
+
+  _setupEventListeners() {
+    // Close button
+    this.element.querySelectorAll('[data-action="close"]').forEach(btn => {
+      btn.addEventListener('click', () => this.hide());
+    });
+
+    // Storage toggle
+    const toggle = this.element.querySelector('[data-setting="storageEnabled"]');
+    if (toggle) {
+      toggle.addEventListener('change', (e) => {
+        const enabled = e.target.checked;
+        IndexerSettings.set({ storageEnabled: enabled });
+        this.state.storageEnabled = enabled;
+
+        // Emit event so indexer can react
+        this.eventBus.emit('settings:storageChanged', { enabled });
+      });
+    }
+
+    // Clear data button
+    const clearBtn = this.element.querySelector('[data-action="clearData"]');
+    if (clearBtn) {
+      clearBtn.addEventListener('click', async () => {
+        if (this.state.clearing) return;
+
+        this.state.clearing = true;
+        this._updateContent();
+
+        try {
+          await IndexerSettings.clearAllData();
+
+          // Update storage estimate
+          const estimate = await IndexerSettings.getStorageEstimate();
+          this.state.storageUsed = estimate.used || 0;
+          this.state.storageQuota = estimate.quota || 0;
+
+          // Emit event so indexer knows to resync
+          this.eventBus.emit('settings:dataCleared', {});
+        } catch (error) {
+          console.error('[SettingsModal] Failed to clear data:', error);
+        }
+
+        this.state.clearing = false;
+        this._updateContent();
+      });
+    }
+
+    // ESC key to close
+    this._escHandler = (e) => {
+      if (e.key === 'Escape') this.hide();
+    };
+    document.addEventListener('keydown', this._escHandler);
+  }
+
+  _updateContent() {
+    if (this.element) {
+      this.element.innerHTML = this._render();
+      this._setupEventListeners();
+    }
+  }
+
+  static injectStyles() {
+    if (document.getElementById('mw3-settings-styles')) return;
+
+    const style = document.createElement('style');
+    style.id = 'mw3-settings-styles';
+    style.textContent = `
+      .mw3-settings-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10000;
+        backdrop-filter: blur(4px);
+      }
+
+      .mw3-settings-modal {
+        background: linear-gradient(135deg, #1a1a2e, #16213e);
+        border: 1px solid rgba(218, 165, 32, 0.3);
+        border-radius: 12px;
+        width: 90%;
+        max-width: 400px;
+        color: #fff;
+        font-family: 'Lato', system-ui, sans-serif;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+      }
+
+      .mw3-settings-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid rgba(218, 165, 32, 0.2);
+      }
+
+      .mw3-settings-header h2 {
+        margin: 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: rgba(218, 165, 32, 0.95);
+      }
+
+      .mw3-settings-close {
+        background: none;
+        border: none;
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 1.5rem;
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+      }
+
+      .mw3-settings-close:hover {
+        color: #fff;
+      }
+
+      .mw3-settings-content {
+        padding: 1.25rem;
+      }
+
+      .mw3-settings-section h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .mw3-settings-description {
+        margin: 0 0 1rem 0;
+        font-size: 0.8rem;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1.4;
+      }
+
+      .mw3-settings-row {
+        margin-bottom: 1rem;
+      }
+
+      .mw3-settings-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        cursor: pointer;
+      }
+
+      .mw3-settings-toggle input {
+        display: none;
+      }
+
+      .mw3-toggle-slider {
+        width: 44px;
+        height: 24px;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 12px;
+        position: relative;
+        transition: background 0.2s;
+      }
+
+      .mw3-toggle-slider::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 20px;
+        height: 20px;
+        background: #fff;
+        border-radius: 50%;
+        transition: transform 0.2s;
+      }
+
+      .mw3-settings-toggle input:checked + .mw3-toggle-slider {
+        background: rgba(218, 165, 32, 0.8);
+      }
+
+      .mw3-settings-toggle input:checked + .mw3-toggle-slider::after {
+        transform: translateX(20px);
+      }
+
+      .mw3-toggle-label {
+        font-size: 0.875rem;
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      .mw3-settings-info {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.5);
+        margin-bottom: 1rem;
+      }
+
+      .mw3-settings-note {
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.4);
+        margin: 0;
+        font-style: italic;
+      }
+
+      .mw3-settings-btn {
+        padding: 0.625rem 1rem;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        border: none;
+        transition: all 0.2s;
+      }
+
+      .mw3-settings-btn--primary {
+        background: rgba(218, 165, 32, 0.9);
+        color: #1a1a2e;
+      }
+
+      .mw3-settings-btn--primary:hover {
+        background: rgba(218, 165, 32, 1);
+      }
+
+      .mw3-settings-btn--danger {
+        background: rgba(255, 99, 71, 0.2);
+        color: rgba(255, 99, 71, 0.9);
+        border: 1px solid rgba(255, 99, 71, 0.3);
+      }
+
+      .mw3-settings-btn--danger:hover {
+        background: rgba(255, 99, 71, 0.3);
+      }
+
+      .mw3-settings-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .mw3-settings-footer {
+        padding: 1rem 1.25rem;
+        border-top: 1px solid rgba(218, 165, 32, 0.2);
+        display: flex;
+        justify-content: flex-end;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+export { SettingsModal };

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 };