@monygroupcorp/micro-web3 0.1.3 → 1.2.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@monygroupcorp/micro-web3",
-  "version": "0.1.3",
+  "version": "1.2.1",
   "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,
@@ -47,30 +49,31 @@ export class FloatingWalletButton extends Component {
             let isConnected = this.walletService.isConnected();
             let address = this.walletService.getAddress();
 
-            // If not connected, try to auto-reconnect to last used wallet
+            // If not connected, check if window.ethereum already has connected accounts
             if (!isConnected && typeof window.ethereum !== 'undefined') {
                 try {
-                    const lastWallet = localStorage.getItem('ms2fun_lastWallet');
-
-                    if (lastWallet) {
-                        // Check if that wallet has accounts (without prompting)
-                        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
-                        const hasAccounts = accounts && accounts.length > 0;
-
-                        // Only try to reconnect if the last wallet has accounts
-                        if (hasAccounts) {
-                            try {
-                                await this.walletService.selectWallet(lastWallet);
-                                await this.walletService.connect();
-                                isConnected = this.walletService.isConnected();
-                                address = this.walletService.getAddress();
-
-                                if (isConnected) {
-                                    console.log('[FloatingWalletButton] Auto-reconnected to', lastWallet);
-                                }
-                            } catch (connectError) {
-                                console.log('[FloatingWalletButton] Auto-reconnect not possible');
+                    // eth_accounts returns already-authorized accounts without prompting
+                    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+                    const hasAccounts = accounts && accounts.length > 0;
+
+                    if (hasAccounts) {
+                        // Detect which wallet is active
+                        const walletType = this._detectWalletType();
+                        console.log('[FloatingWalletButton] Detected existing connection:', walletType, accounts[0]);
+
+                        try {
+                            await this.walletService.selectWallet(walletType);
+                            await this.walletService.connect();
+                            isConnected = this.walletService.isConnected();
+                            address = this.walletService.getAddress();
+
+                            if (isConnected) {
+                                console.log('[FloatingWalletButton] Auto-connected to existing session:', walletType);
+                                // Update lastWallet for future sessions
+                                localStorage.setItem('ms2fun_lastWallet', walletType);
                             }
+                        } catch (connectError) {
+                            console.log('[FloatingWalletButton] Could not auto-connect:', connectError.message);
                         }
                     }
                 } catch (error) {
@@ -89,6 +92,21 @@ export class FloatingWalletButton extends Component {
         }
     }
 
+    /**
+     * Detect which wallet type is currently active based on provider flags
+     */
+    _detectWalletType() {
+        if (typeof window.ethereum === 'undefined') return 'metamask';
+
+        // Check specific wallet flags (order matters - more specific first)
+        if (window.ethereum.isRabby) return 'rabby';
+        if (window.ethereum.isRainbow) return 'rainbow';
+        if (window.phantom?.ethereum) return 'phantom';
+
+        // Default to metamask for any EIP-1193 provider
+        return 'metamask';
+    }
+
     /**
      * Load wallet info (balance, EXEC tokens, vault benefactor status)
      */
@@ -643,6 +661,7 @@ export class FloatingWalletButton extends Component {
                     this.handleMenuItemClick(route);
                 } else if (action === 'settings') {
                     this.setState({ menuOpen: false });
+                    this.openSettings();
                 }
             });
         });
@@ -663,12 +682,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) {

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