@monygroupcorp/micro-web3 1.2.3 → 1.3.0

package/src/components/SyncProgressBar/SyncProgressBar.js

@@ -1,238 +1,206 @@
 // src/components/SyncProgressBar/SyncProgressBar.js
 
+import { Component, h, render } from '@monygroupcorp/microact';
+
 /**
  * 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'));
+ * render(h(SyncProgressBar, { indexer, eventBus }), 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');
+class SyncProgressBar extends Component {
+    constructor(props) {
+        super(props);
+
+        if (!props.indexer) {
+            throw new Error('SyncProgressBar requires indexer instance');
+        }
+        if (!props.eventBus) {
+            throw new Error('SyncProgressBar requires eventBus instance');
+        }
+
+        this.indexer = props.indexer;
+        this.eventBus = props.eventBus;
+
+        this.state = {
+            status: 'initializing',
+            progress: 0,
+            currentBlock: 0,
+            latestBlock: 0,
+            error: null
+        };
     }
 
-    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');
-    }
+    didMount() {
+        this.subscribe('indexer:syncProgress', (data) => {
+            this.setState({
+                status: 'syncing',
+                progress: data.progress,
+                currentBlock: data.currentBlock,
+                latestBlock: data.latestBlock
+            });
+        });
+
+        this.subscribe('indexer:syncComplete', () => {
+            this.setState({ status: 'synced', progress: 1 });
+        });
 
-    // Create element
-    this.element = document.createElement('div');
-    this.element.className = 'mw3-sync-progress';
-    container.appendChild(this.element);
+        this.subscribe('indexer:error', (data) => {
+            this.setState({ status: 'error', error: data.message });
+        });
 
-    // Subscribe to events
-    this._setupListeners();
+        this.subscribe('indexer:paused', () => {
+            this.setState({ status: 'paused' });
+        });
 
-    // Initial render
-    this._updateState(this.indexer.sync.getStatus());
-    this._render();
+        this.subscribe('indexer:resumed', () => {
+            this.setState({ status: 'syncing' });
+        });
 
-    return this;
-  }
+        // Initial status
+        const initialStatus = this.indexer.sync?.getStatus?.();
+        if (initialStatus) {
+            this.setState(initialStatus);
+        }
+    }
 
-  unmount() {
-    // Cleanup subscriptions
-    for (const unsub of this.unsubscribers) {
-      unsub();
+    handleRetry() {
+        this.indexer.sync?.resync?.();
     }
-    this.unsubscribers = [];
 
-    // Remove element
-    if (this.element && this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
+    handleResume() {
+        this.indexer.sync?.resume?.();
     }
-    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);
+
+    render() {
+        const { status, progress, currentBlock, latestBlock, error } = this.state;
+        const percent = Math.round(progress * 100);
+
+        return h('div', { className: `mw3-sync-progress mw3-sync-progress--${status}` },
+            status === 'syncing' && [
+                h('div', {
+                    key: 'bar',
+                    className: 'mw3-sync-progress__bar',
+                    style: { width: `${percent}%` }
+                }),
+                h('span', { key: 'text', className: 'mw3-sync-progress__text' }, `Syncing... ${percent}%`)
+            ],
+
+            status === 'synced' &&
+                h('span', { className: 'mw3-sync-progress__text' },
+                    `Synced to block ${latestBlock.toLocaleString()}`
+                ),
+
+            status === 'error' && [
+                h('span', { key: 'text', className: 'mw3-sync-progress__text' },
+                    `Sync failed: ${error || 'Unknown error'}`
+                ),
+                h('button', {
+                    key: 'retry',
+                    className: 'mw3-sync-progress__retry',
+                    onClick: this.bind(this.handleRetry)
+                }, 'Retry')
+            ],
+
+            status === 'paused' && [
+                h('span', { key: 'text', className: 'mw3-sync-progress__text' }, 'Sync paused'),
+                h('button', {
+                    key: 'resume',
+                    className: 'mw3-sync-progress__resume',
+                    onClick: this.bind(this.handleResume)
+                }, 'Resume')
+            ],
+
+            status === 'initializing' &&
+                h('span', { className: 'mw3-sync-progress__text' }, 'Initializing...')
+        );
     }
-  }
-
-  _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);
     }
-  }
-
-  /**
-   * 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/components/Util/MessagePopup.js

@@ -1,4 +1,4 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 export class MessagePopup extends Component {
     constructor(props) {
@@ -11,7 +11,7 @@ export class MessagePopup extends Component {
     show(options) {
         const { title = '', message = '', type = 'info', duration = 5000 } = options;
         const id = Date.now() + Math.random();
-        
+
         const newMessage = { id, title, message, type };
         this.setState({ messages: [...this.state.messages, newMessage] });
 
@@ -41,29 +41,31 @@ export class MessagePopup extends Component {
         this.show({ title, message, type: 'info' });
     }
 
-    render() {
-        return `
-            <div id="message-popup-container">
-                ${this.state.messages.map(msg => `
-                    <div class="message-popup ${msg.type}" data-id="${msg.id}">
-                        <div class="message-content">
-                            ${msg.title ? `<div class="message-title">${msg.title}</div>` : ''}
-                            <div class="message-text">${msg.message}</div>
-                        </div>
-                        <button class="close-button" data-id="${msg.id}">&times;</button>
-                    </div>
-                `).join('')}
-            </div>
-        `;
+    handleClose(id) {
+        this.close(id);
     }
 
-    events() {
-        return {
-            'click .close-button': (e) => {
-                const id = parseFloat(e.target.dataset.id);
-                this.close(id);
-            }
-        };
+    render() {
+        const { messages } = this.state;
+
+        return h('div', { id: 'message-popup-container' },
+            messages.map(msg =>
+                h('div', {
+                    key: msg.id,
+                    className: `message-popup ${msg.type}`,
+                    'data-id': msg.id
+                },
+                    h('div', { className: 'message-content' },
+                        msg.title && h('div', { className: 'message-title' }, msg.title),
+                        h('div', { className: 'message-text' }, msg.message)
+                    ),
+                    h('button', {
+                        className: 'close-button',
+                        onClick: () => this.handleClose(msg.id)
+                    }, '\u00D7')
+                )
+            )
+        );
     }
 
     static get styles() {
@@ -156,4 +158,4 @@ export class MessagePopup extends Component {
             }
         `;
     }
-} 
+}

package/src/components/Wallet/WalletModal.js

@@ -1,33 +1,13 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 export class WalletModal extends Component {
     constructor(props) {
         super(props);
-        this.providerMap = props.providerMap;
-        this.walletIcons = props.walletIcons;
-        this.onWalletSelected = props.onWalletSelected;
-        
         this.state = {
             isVisible: false,
         };
     }
 
-    events() {
-        return {
-            'click .wallet-modal-close': this.hide,
-            'click .wallet-modal-overlay': (e) => {
-                if (e.target === e.currentTarget) this.hide();
-            },
-            'click .wallet-option': async (e) => {
-                const walletType = e.currentTarget.dataset.wallet;
-                if (this.onWalletSelected) {
-                    await this.onWalletSelected(walletType);
-                }
-                this.hide();
-            }
-        };
-    }
-
     show() {
         this.setState({ isVisible: true });
     }
@@ -36,34 +16,55 @@ export class WalletModal extends Component {
         this.setState({ isVisible: false });
     }
 
+    handleWalletClick(walletType) {
+        if (this.props.onWalletSelected) {
+            this.props.onWalletSelected(walletType);
+        }
+        this.hide();
+    }
+
     render() {
         if (!this.state.isVisible) {
-            return '<div class="wallet-modal-container" style="display: none;"></div>';
+            return h('div', { className: 'wallet-modal-container', style: { display: 'none' } });
         }
 
-        const walletOptions = Object.keys(this.providerMap).map(walletType => `
-            <button class="wallet-option" data-wallet="${walletType}">
-                <img src="${this.walletIcons[walletType]}" alt="${walletType}">
-                <span>${walletType.charAt(0).toUpperCase() + walletType.slice(1)}</span>
-            </button>
-        `).join('');
+        const walletOptions = Object.keys(this.props.providerMap);
 
-        return `
-            <div class="wallet-modal-container">
-                <div class="wallet-modal-overlay">
-                    <div class="wallet-modal">
-                        <div class="wallet-modal-header">
-                            <h3>Select Your Wallet</h3>
-                            <button class="wallet-modal-close">&times;</button>
-                        </div>
-                        <div class="wallet-options">
-                            ${walletOptions}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
+        return h('div', { className: 'wallet-modal-container' },
+            h('div', {
+                className: 'wallet-modal-overlay',
+                onClick: (e) => {
+                    if (e.target === e.currentTarget) this.hide();
+                }
+            },
+                h('div', { className: 'wallet-modal' },
+                    h('div', { className: 'wallet-modal-header' },
+                        h('h3', null, 'Select Your Wallet'),
+                        h('button', {
+                            className: 'wallet-modal-close',
+                            onClick: this.bind(this.hide)
+                        }, '\u00D7')
+                    ),
+                    h('div', { className: 'wallet-options' },
+                        walletOptions.map(walletType =>
+                            h('button', {
+                                key: walletType,
+                                className: 'wallet-option',
+                                'data-wallet': walletType,
+                                onClick: () => this.handleWalletClick(walletType)
+                            },
+                                h('img', {
+                                    src: this.props.walletIcons[walletType],
+                                    alt: walletType
+                                }),
+                                h('span', null, walletType.charAt(0).toUpperCase() + walletType.slice(1))
+                            )
+                        )
+                    )
+                )
+            )
+        );
     }
 }
 
-export default WalletModal; 
+export default WalletModal;