@monygroupcorp/micro-web3 0.1.0 → 0.1.3

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

@@ -6,7 +6,8 @@ import PriceService from './services/PriceService.js';
 import * as IpfsService from './services/IpfsService.js';
 
 // UI Components
-import { WalletSplash } from './components/Wallet/WalletSplash.js';
+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';
@@ -28,7 +29,8 @@ export {
   IpfsService,
 
   // UI Components
-  WalletSplash,
+  FloatingWalletButton,
+  WalletButton,
   WalletModal,
   IpfsImage,
   SwapInterface,
@@ -40,4 +42,4 @@ export {
   PriceDisplay,
   BalanceDisplay,
   MessagePopup
-};
+};

package/src/services/BlockchainService.js

@@ -51,13 +51,13 @@ class BlockchainService {
             await this.initializeProvider();
             this.connectionState = 'connected';
             this.setupNetworkListeners();
-            this.this.eventBus.emit('blockchain:initialized');
+            this.eventBus.emit('blockchain:initialized');
             this.isInitializing = false;
             return true;
         } catch (error) {
             this.connectionState = 'error';
             this.isInitializing = false;
-            this.this.eventBus.emit('blockchain:error', error);
+            this.eventBus.emit('blockchain:error', error);
             throw this.wrapError(error, 'Blockchain initialization failed');
         }
     }
@@ -91,7 +91,7 @@ class BlockchainService {
 
                 const network = await this.provider.getNetwork();
                 if (network.chainId !== targetNetwork) {
-                    this.this.eventBus.emit('network:switching', { from: network.chainId, to: targetNetwork, automatic: true });
+                    this.eventBus.emit('network:switching', { from: network.chainId, to: targetNetwork, automatic: true });
                     try {
                         this.isInternalNetworkChange = true;
                         await window.ethereum.request({
@@ -100,10 +100,10 @@ class BlockchainService {
                         });
                         this.provider = new ethers.providers.Web3Provider(window.ethereum);
                         this.signer = this.provider.getSigner();
-                        this.this.eventBus.emit('network:switched', { from: network.chainId, to: targetNetwork, success: true });
+                        this.eventBus.emit('network:switched', { from: network.chainId, to: targetNetwork, success: true });
                     } catch (switchError) {
                         this.isInternalNetworkChange = false;
-                        this.this.eventBus.emit('network:switched', { from: network.chainId, to: targetNetwork, success: false, error: switchError.message });
+                        this.eventBus.emit('network:switched', { from: network.chainId, to: targetNetwork, success: false, error: switchError.message });
                         if (switchError.code === 4902) {
                             await window.ethereum.request({
                                 method: 'wallet_addEthereumChain',
@@ -150,7 +150,7 @@ class BlockchainService {
             } else {
                 console.warn('Liquidity pool address is zero, skipping V2 pool contract initialization.');
             }
-            this.this.eventBus.emit('contract:updated');
+            this.eventBus.emit('contract:updated');
         } catch (error) {
             throw this.wrapError(error, 'Contract initialization failed');
         }

package/src/services/WETHService.js

@@ -0,0 +1,52 @@
+import { ethers } from 'ethers';
+
+const WETH_ADDRESS = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2';
+const WETH_ABI = [
+  'function deposit() payable',
+  'function withdraw(uint256 wad)',
+  'function balanceOf(address) view returns (uint256)',
+];
+
+class WETHService {
+  constructor(walletService) {
+    this.walletService = walletService;
+    this.contract = null;
+  }
+
+  async _getContract() {
+    if (this.contract) return this.contract;
+
+    const provider = this.walletService.getProvider();
+    if (!provider) {
+      throw new Error('Wallet not connected');
+    }
+
+    const signer = provider.getSigner();
+    this.contract = new ethers.Contract(WETH_ADDRESS, WETH_ABI, signer);
+    return this.contract;
+  }
+
+  async deposit(amount) {
+    const contract = await this._getContract();
+    const tx = await contract.deposit({ value: ethers.utils.parseEther(amount) });
+    await tx.wait();
+  }
+
+  async withdraw(amount) {
+    const contract = await this._getContract();
+    const tx = await contract.withdraw(ethers.utils.parseEther(amount));
+    await tx.wait();
+  }
+
+  async getBalance() {
+    const contract = await this._getContract();
+    const address = this.walletService.getAddress();
+    if (!address) {
+      return '0';
+    }
+    const balance = await contract.balanceOf(address);
+    return ethers.utils.formatEther(balance);
+  }
+}
+
+export default WETHService;

package/src/services/WalletService.js

@@ -538,4 +538,5 @@ class WalletService {
     }
 }
 
-export default WalletService; 
+export default WalletService;
+