@monygroupcorp/micro-web3 1.2.4 → 1.3.1

package/src/components/WalletButton/WalletButton.js

@@ -1,213 +1,221 @@
+import { Component, h, render } from '@monygroupcorp/microact';
 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);
+    handleWalletOptionClick(walletType) {
+        if (this.props.onWalletSelected) {
+            this.props.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);
-        },
-      });
+    render() {
+        if (!this.state.isVisible) {
+            return h('div', { className: 'wallet-modal-container', style: { display: 'none' } });
+        }
 
-      if (!this.modalRoot) {
-        this.modalRoot = document.createElement('div');
-        document.body.appendChild(this.modalRoot);
-      }
+        const walletOptions = Object.keys(this.props.providerMap);
+
+        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',
+                                onClick: () => this.handleWalletOptionClick(walletType)
+                            },
+                                h('img', {
+                                    src: this.props.walletIcons[walletType],
+                                    alt: walletType
+                                }),
+                                h('span', null, walletType.charAt(0).toUpperCase() + walletType.slice(1))
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
 
-      this.walletModal.mount(this.modalRoot);
+export class WalletButton extends FloatingWalletButton {
+    constructor(props) {
+        super(props);
+        this.modalRoot = null;
     }
 
-    this.walletModal.show();
-  }
+    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) {
+            if (!this.modalRoot) {
+                this.modalRoot = document.createElement('div');
+                document.body.appendChild(this.modalRoot);
+            }
+
+            render(h(WalletButtonModal, {
+                providerMap,
+                walletIcons,
+                onWalletSelected: async (walletType) => {
+                    await this.handleWalletSelection(walletType);
+                },
+                ref: instance => this.walletModal = instance
+            }), this.modalRoot);
+        }
 
-  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>
-      `;
+        this.walletModal?.show();
     }
 
-    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>
-      `;
+    willUnmount() {
+        if (this.modalRoot?.parentNode) {
+            this.modalRoot.parentNode.removeChild(this.modalRoot);
+            this.modalRoot = null;
+        }
+        super.willUnmount();
     }
 
-    const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
-    const classNames = ['floating-wallet-button', 'connected'];
-    if (menuOpen) {
-      classNames.push('menu-open');
-    }
+    render() {
+        if (this.state.loading) {
+            return h('div', { className: 'floating-wallet-button loading' },
+                h('div', { className: 'wallet-spinner' })
+            );
+        }
 
-    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);
+        const { walletConnected, address, balance, menuOpen } = this.state;
+
+        if (!walletConnected) {
+            return h('div', { className: 'floating-wallet-button disconnected', ref: el => this.element = el },
+                h('button', {
+                    className: 'wallet-btn',
+                    onClick: this.bind(this.handleWalletToggle)
+                },
+                    h('span', { className: 'wallet-mark' }),
+                    h('span', { className: 'wallet-text' }, 'Connect Wallet')
+                )
+            );
+        }
+
+        const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+        const classNames = ['floating-wallet-button', 'connected'];
+        if (menuOpen) {
+            classNames.push('menu-open');
+        }
+
+        return h('div', { className: classNames.join(' '), ref: el => this.element = el },
+            h('button', {
+                className: 'wallet-btn',
+                title: `${this.escapeHtml(address)}\nBalance: ${balance} ETH`,
+                onClick: this.bind(this.handleWalletToggle)
+            },
+                h('span', { className: 'wallet-mark wallet-mark--connected' }),
+                h('span', { className: 'wallet-address' }, this.escapeHtml(truncatedAddress)),
+                h('span', {
+                    className: 'wallet-disconnect',
+                    title: 'Disconnect',
+                    onClick: this.bind(this.handleInlineDisconnect)
+                }, '\u23CF\uFE0E')
+            ),
+            this.renderWalletPanel(address, balance, menuOpen)
+        );
     }
-    if (!oldState || oldState.menuOpen !== newState.menuOpen) {
-      if (newState.menuOpen) {
-        this.attachOutsideClickListener();
-      } else {
-        this.detachOutsideClickListener();
-      }
+
+    renderWalletPanel(address, balance, menuOpen) {
+        const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+
+        return h('div', {
+            className: 'wallet-info-panel',
+            'aria-hidden': menuOpen ? 'false' : 'true'
+        },
+            h('div', { className: 'wallet-info-row' },
+                h('span', { className: 'wallet-info-label' }, 'Address'),
+                h('span', { className: 'wallet-info-value' }, this.escapeHtml(truncatedAddress))
+            ),
+            h('div', { className: 'wallet-info-row' },
+                h('span', { className: 'wallet-info-label' }, 'ETH Balance'),
+                h('span', { className: 'wallet-info-value' }, `${balance} ETH`)
+            )
+        );
     }
-  }
-
-  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;
+
+    didUpdate() {
+        if (this.state.menuOpen) {
+            this.attachOutsideClickListener();
+        } else {
+            this.detachOutsideClickListener();
+        }
     }
-    if (this.outsideClickHandler) {
-      document.removeEventListener('click', this.outsideClickHandler);
-      this.outsideClickHandler = null;
+
+    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);
     }
-  }
 
-  setupDOMEventListeners() {
-    // Delegated events handle wiring in this component.
-  }
+    detachOutsideClickListener() {
+        if (this.outsideClickTimeout) {
+            window.clearTimeout(this.outsideClickTimeout);
+            this.outsideClickTimeout = null;
+        }
+        if (this.outsideClickHandler) {
+            document.removeEventListener('click', this.outsideClickHandler);
+            this.outsideClickHandler = null;
+        }
+    }
 
-  handleWalletToggle(e) {
-    this.handleButtonClick(e);
-  }
+    handleWalletToggle(e) {
+        this.handleButtonClick(e);
+    }
 
-  handleInlineDisconnect(e) {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
+    handleInlineDisconnect(e) {
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        this.handleDisconnect(e);
     }
-    super.handleDisconnect(e);
-  }
-
-  minifyHtml(markup) {
-    return typeof markup === 'string'
-      ? markup.replace(/>\s+</g, '><').trim()
-      : markup;
-  }
 }
 
 export default WalletButton;