@monygroupcorp/micro-web3 1.2.3 → 1.3.0

package/src/components/FloatingWalletButton/FloatingWalletButton.js

@@ -1,4 +1,4 @@
-import { Component, eventBus } from '@monygroupcorp/microact';
+import { Component, h, render, eventBus } from '@monygroupcorp/microact';
 import WalletModal from '../Wallet/WalletModal.js';
 import { SettingsModal } from '../SettingsModal/SettingsModal.js';
 import { ethers } from 'ethers';
@@ -10,7 +10,7 @@ import { ethers } from 'ethers';
  */
 export class FloatingWalletButton extends Component {
     constructor(props) {
-        super();
+        super(props);
         this.walletService = props.walletService;
         this.walletModal = null;
         this.settingsModal = null;
@@ -26,10 +26,10 @@ export class FloatingWalletButton extends Component {
         };
     }
 
-    onMount() {
-        console.log('[FloatingWalletButton] onMount called');
-        this.initialize(); 
-        this.setupDOMEventListeners();
+    didMount() {
+        console.log('[FloatingWalletButton] didMount called');
+        this.initialize();
+        this.setupClickOutsideHandler();
     }
 
     async initialize() {
@@ -171,12 +171,12 @@ export class FloatingWalletButton extends Component {
 
     setupEventListeners() {
         // Listen for wallet connection
-        const unsubscribeConnected = eventBus.on('wallet:connected', async (data) => {
+        this.subscribe('wallet:connected', async (data) => {
             await this.loadWalletInfo(data.address);
         });
 
         // Listen for wallet disconnection
-        const unsubscribeDisconnected = eventBus.on('wallet:disconnected', () => {
+        this.subscribe('wallet:disconnected', () => {
             this.setState({
                 walletConnected: false,
                 address: null,
@@ -188,16 +188,9 @@ export class FloatingWalletButton extends Component {
         });
 
         // Listen for wallet/account change
-        const unsubscribeChanged = eventBus.on('wallet:changed', async (data) => {
+        this.subscribe('wallet:changed', async (data) => {
             await this.loadWalletInfo(data.address);
         });
-
-        // Register cleanup
-        this.registerCleanup(() => {
-            unsubscribeConnected();
-            unsubscribeDisconnected();
-            unsubscribeChanged();
-        });
     }
 
     setupClickOutsideHandler() {
@@ -217,7 +210,7 @@ export class FloatingWalletButton extends Component {
         });
     }
 
-    async handleButtonClick(e) {
+    handleButtonClick(e) {
         e.preventDefault();
         e.stopPropagation();
 
@@ -226,11 +219,11 @@ export class FloatingWalletButton extends Component {
             this.setState({ menuOpen: !this.state.menuOpen });
         } else {
             // Show wallet connection modal
-            await this.showWalletModal();
+            this.showWalletModal();
         }
     }
 
-    async showWalletModal() {
+    showWalletModal() {
         // Get provider map and icons from this.walletService
         const providerMap = {
             rabby: () => window.ethereum?.isRabby ? window.ethereum : null,
@@ -248,22 +241,21 @@ export class FloatingWalletButton extends Component {
 
         // Create WalletModal if not exists
         if (!this.walletModal) {
-            this.walletModal = new WalletModal({
+            if (!this.modalRoot) {
+                this.modalRoot = document.createElement('div');
+                document.body.appendChild(this.modalRoot);
+            }
+            render(h(WalletModal, {
                 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);
+                ref: instance => this.walletModal = instance
+            }), this.modalRoot);
         }
 
-        this.walletModal.show();
+        this.walletModal?.show();
     }
 
     async handleWalletSelection(walletType) {
@@ -297,12 +289,12 @@ export class FloatingWalletButton extends Component {
         }
     }
 
-    async handleDisconnect(e) {
+    handleDisconnect(e) {
         e.preventDefault();
         e.stopPropagation();
 
         try {
-            await this.walletService.disconnect();
+            this.walletService.disconnect();
             this.setState({ menuOpen: false });
         } catch (error) {
             console.error('[FloatingWalletButton] Failed to disconnect:', error);
@@ -544,142 +536,105 @@ export class FloatingWalletButton extends Component {
     render() {
         console.log('[FloatingWalletButton] render called, loading:', this.state.loading, 'walletConnected:', this.state.walletConnected);
         if (this.state.loading) {
-            return `
-                <div class="floating-wallet-button loading">
-                    <div class="wallet-spinner"></div>
-                </div>
-            `;
+            return h('div', { className: 'floating-wallet-button loading' },
+                h('div', { className: 'wallet-spinner' })
+            );
         }
 
         const { walletConnected, address, balance, menuOpen, hasExecTokens, isVaultBenefactor } = this.state;
 
         if (!walletConnected) {
             // Not connected - show "Connect" button
-            return `
-                <div class="floating-wallet-button disconnected" data-ref="wallet-button">
-                    <button class="wallet-btn" data-ref="connect-btn">
-                        <span class="wallet-icon">🦊</span>
-                        <span class="wallet-text">Connect</span>
-                    </button>
-                </div>
-            `;
+            return h('div', { className: 'floating-wallet-button disconnected', ref: el => this.element = el },
+                h('button', {
+                    className: 'wallet-btn',
+                    onClick: this.bind(this.handleButtonClick)
+                },
+                    h('span', { className: 'wallet-icon' }, '\uD83E\uDD8A'),
+                    h('span', { className: 'wallet-text' }, 'Connect')
+                )
+            );
         }
 
         // Connected - show abbreviated address
         const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
 
-        return `
-            <div class="floating-wallet-button connected ${menuOpen ? 'menu-open' : ''}" data-ref="wallet-button">
-                <button class="wallet-btn" data-ref="wallet-btn" title="${this.escapeHtml(address)}\nBalance: ${balance} ETH">
-                    <span class="wallet-icon">🦊</span>
-                    <span class="wallet-address">${this.escapeHtml(truncatedAddress)}</span>
-                </button>
-
-                ${menuOpen ? this.renderDropdownMenu(address, balance, hasExecTokens, isVaultBenefactor) : ''}
-            </div>
-        `;
+        return h('div', {
+            className: `floating-wallet-button connected ${menuOpen ? 'menu-open' : ''}`,
+            ref: el => this.element = el
+        },
+            h('button', {
+                className: 'wallet-btn',
+                title: `${this.escapeHtml(address)}\nBalance: ${balance} ETH`,
+                onClick: this.bind(this.handleButtonClick)
+            },
+                h('span', { className: 'wallet-icon' }, '\uD83E\uDD8A'),
+                h('span', { className: 'wallet-address' }, this.escapeHtml(truncatedAddress))
+            ),
+            menuOpen && this.renderDropdownMenu(address, balance, hasExecTokens, isVaultBenefactor)
+        );
     }
 
     renderDropdownMenu(address, balance, hasExecTokens, isVaultBenefactor) {
         const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
 
-        return `
-            <div class="wallet-dropdown-menu" data-ref="dropdown-menu">
-                <div class="dropdown-header">
-                    <div class="dropdown-address">${this.escapeHtml(truncatedAddress)}</div>
-                    <div class="dropdown-balance">${balance} ETH</div>
-                </div>
-
-                <div class="dropdown-divider"></div>
-
-                <div class="dropdown-items">
-                    <button class="dropdown-item" data-route="/portfolio" data-ref="menu-item">
-                        <span class="item-icon">📊</span>
-                        <span class="item-label">Portfolio</span>
-                    </button>
-
-                    ${hasExecTokens ? `
-                        <button class="dropdown-item" data-route="/governance" data-ref="menu-item">
-                            <span class="item-icon">🗳️</span>
-                            <span class="item-label">Governance</span>
-                        </button>
-                    ` : ''}
-
-                    <button class="dropdown-item" data-route="/staking" data-ref="menu-item">
-                        <span class="item-icon">🎯</span>
-                        <span class="item-label">Staking</span>
-                    </button>
-
-                    ${isVaultBenefactor ? `
-                        <button class="dropdown-item" data-route="/portfolio?filter=vaults" data-ref="menu-item">
-                            <span class="item-icon">💰</span>
-                            <span class="item-label">Vault Positions</span>
-                        </button>
-                    ` : ''}
-                </div>
-
-                <div class="dropdown-divider"></div>
-
-                <div class="dropdown-items">
-                    <button class="dropdown-item" data-action="settings" data-ref="menu-item">
-                        <span class="item-icon">⚙️</span>
-                        <span class="item-label">Settings</span>
-                    </button>
-
-                    <button class="dropdown-item disconnect" data-ref="disconnect-btn">
-                        <span class="item-icon">🔌</span>
-                        <span class="item-label">Disconnect</span>
-                    </button>
-                </div>
-            </div>
-        `;
-    }
-
-    setupDOMEventListeners() {
-        console.log('[FloatingWalletButton] setupDOMEventListeners called, element:', this.element);
-        if (!this.element) return;
-
-        // Main button click handler - use querySelector directly since getRef only takes one param
-        const mainBtn = this.element.querySelector('.wallet-btn');
-        console.log('[FloatingWalletButton] mainBtn found:', mainBtn);
-
-        if (mainBtn) {
-            mainBtn.addEventListener('click', (e) => this.handleButtonClick(e));
-        }
-
-        // Menu item click handlers
-        const menuItems = Array.from(this.element.querySelectorAll('.dropdown-item[data-route], .dropdown-item[data-action]'));
-        menuItems.forEach(item => {
-            item.addEventListener('click', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                const route = item.getAttribute('data-route');
-                const action = item.getAttribute('data-action');
-
-                if (route) {
-                    this.handleMenuItemClick(route);
-                } else if (action === 'settings') {
-                    this.setState({ menuOpen: false });
-                    this.openSettings();
-                }
-            });
-        });
-
-        // Disconnect button handler
-        const disconnectBtn = this.element.querySelector('.dropdown-item.disconnect');
-        if (disconnectBtn) {
-            disconnectBtn.addEventListener('click', (e) => this.handleDisconnect(e));
-        }
-    }
-
-    onStateUpdate(oldState, newState) {
-        // Re-setup DOM listeners when state changes
-        if (oldState.menuOpen !== newState.menuOpen) {
-            this.setTimeout(() => {
-                this.setupDOMEventListeners();
-            }, 0);
-        }
+        return h('div', { className: 'wallet-dropdown-menu' },
+            h('div', { className: 'dropdown-header' },
+                h('div', { className: 'dropdown-address' }, this.escapeHtml(truncatedAddress)),
+                h('div', { className: 'dropdown-balance' }, `${balance} ETH`)
+            ),
+            h('div', { className: 'dropdown-divider' }),
+            h('div', { className: 'dropdown-items' },
+                h('button', {
+                    className: 'dropdown-item',
+                    onClick: () => this.handleMenuItemClick('/portfolio')
+                },
+                    h('span', { className: 'item-icon' }, '\uD83D\uDCCA'),
+                    h('span', { className: 'item-label' }, 'Portfolio')
+                ),
+                hasExecTokens && h('button', {
+                    className: 'dropdown-item',
+                    onClick: () => this.handleMenuItemClick('/governance')
+                },
+                    h('span', { className: 'item-icon' }, '\uD83D\uDDF3\uFE0F'),
+                    h('span', { className: 'item-label' }, 'Governance')
+                ),
+                h('button', {
+                    className: 'dropdown-item',
+                    onClick: () => this.handleMenuItemClick('/staking')
+                },
+                    h('span', { className: 'item-icon' }, '\uD83C\uDFAF'),
+                    h('span', { className: 'item-label' }, 'Staking')
+                ),
+                isVaultBenefactor && h('button', {
+                    className: 'dropdown-item',
+                    onClick: () => this.handleMenuItemClick('/portfolio?filter=vaults')
+                },
+                    h('span', { className: 'item-icon' }, '\uD83D\uDCB0'),
+                    h('span', { className: 'item-label' }, 'Vault Positions')
+                )
+            ),
+            h('div', { className: 'dropdown-divider' }),
+            h('div', { className: 'dropdown-items' },
+                h('button', {
+                    className: 'dropdown-item',
+                    onClick: () => {
+                        this.setState({ menuOpen: false });
+                        this.openSettings();
+                    }
+                },
+                    h('span', { className: 'item-icon' }, '\u2699\uFE0F'),
+                    h('span', { className: 'item-label' }, 'Settings')
+                ),
+                h('button', {
+                    className: 'dropdown-item disconnect',
+                    onClick: this.bind(this.handleDisconnect)
+                },
+                    h('span', { className: 'item-icon' }, '\uD83D\uDD0C'),
+                    h('span', { className: 'item-label' }, 'Disconnect')
+                )
+            )
+        );
     }
 
     openSettings() {
@@ -689,7 +644,7 @@ export class FloatingWalletButton extends Component {
         this.settingsModal.show();
     }
 
-    onUnmount() {
+    willUnmount() {
         // Clean up wallet modal
         if (this.walletModal) {
             this.walletModal.hide();