@monygroupcorp/micro-web3 0.1.1 → 0.1.3

package/package.json

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

package/src/components/FloatingWalletButton/FloatingWalletButton.js

@@ -230,13 +230,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();
@@ -672,4 +678,3 @@ export class FloatingWalletButton extends Component {
         return div.innerHTML;
     }
 }
-

package/src/components/WalletButton/WalletButton.js

@@ -0,0 +1,213 @@
+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);
+        }
+        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);
+        },
+      });
+
+      if (!this.modalRoot) {
+        this.modalRoot = document.createElement('div');
+        document.body.appendChild(this.modalRoot);
+      }
+
+      this.walletModal.mount(this.modalRoot);
+    }
+
+    this.walletModal.show();
+  }
+
+  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>
+      `;
+    }
+
+    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>
+      `;
+    }
+
+    const truncatedAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
+    const classNames = ['floating-wallet-button', 'connected'];
+    if (menuOpen) {
+      classNames.push('menu-open');
+    }
+
+    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);
+    }
+    if (!oldState || oldState.menuOpen !== newState.menuOpen) {
+      if (newState.menuOpen) {
+        this.attachOutsideClickListener();
+      } else {
+        this.detachOutsideClickListener();
+      }
+    }
+  }
+
+  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;
+    }
+    if (this.outsideClickHandler) {
+      document.removeEventListener('click', this.outsideClickHandler);
+      this.outsideClickHandler = null;
+    }
+  }
+
+  setupDOMEventListeners() {
+    // Delegated events handle wiring in this component.
+  }
+
+  handleWalletToggle(e) {
+    this.handleButtonClick(e);
+  }
+
+  handleInlineDisconnect(e) {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    super.handleDisconnect(e);
+  }
+
+  minifyHtml(markup) {
+    return typeof markup === 'string'
+      ? markup.replace(/>\s+</g, '><').trim()
+      : markup;
+  }
+}
+
+export default WalletButton;

package/src/index.js

@@ -7,6 +7,7 @@ import * as IpfsService from './services/IpfsService.js';
 
 // UI Components
 import { FloatingWalletButton } from './components/FloatingWalletButton/FloatingWalletButton.js';
+import { WalletButton } from './components/WalletButton/WalletButton.js';
 import { WalletModal } from './components/Wallet/WalletModal.js';
 import { IpfsImage } from './components/Ipfs/IpfsImage.js';
 import { SwapInterface } from './components/Swap/SwapInterface.js';
@@ -29,6 +30,7 @@ export {
 
   // UI Components
   FloatingWalletButton,
+  WalletButton,
   WalletModal,
   IpfsImage,
   SwapInterface,
@@ -40,4 +42,4 @@ export {
   PriceDisplay,
   BalanceDisplay,
   MessagePopup
-};
+};