@monygroupcorp/micro-web3 0.1.0 → 0.1.3

package/src/components/FloatingWalletButton/FloatingWalletButton.js

@@ -0,0 +1,680 @@
+import { Component, eventBus } from '@monygroupcorp/microact';
+import WalletModal from '../Wallet/WalletModal.js';
+import { ethers } from 'ethers';
+
+/**
+ * FloatingWalletButton component
+ * Persistent floating wallet button (bottom-right corner) with power user dropdown menu
+ * Replaces WalletSplash for non-blocking wallet connection
+ */
+export class FloatingWalletButton extends Component {
+    constructor(props) {
+        super();
+        this.walletService = props.walletService;
+        this.walletModal = null;
+        this.state = {
+            walletConnected: false,
+            address: null,
+            balance: '0.00',
+            loading: true,
+            menuOpen: false,
+            // Conditional menu items
+            hasExecTokens: false,
+            isVaultBenefactor: false
+        };
+    }
+
+    onMount() {
+        console.log('[FloatingWalletButton] onMount called');
+        this.initialize(); 
+        this.setupDOMEventListeners();
+    }
+
+    async initialize() {
+        await this.checkWalletConnection();
+        this.setupEventListeners();
+    }
+
+    async checkWalletConnection() {
+        console.log('[FloatingWalletButton] checkWalletConnection called');
+        try {
+            // Initialize wallet service if needed
+            if (!this.walletService.isInitialized) {
+                await this.walletService.initialize();
+            }
+
+            // Check if wallet service thinks it's connected
+            let isConnected = this.walletService.isConnected();
+            let address = this.walletService.getAddress();
+
+            // If not connected, try to auto-reconnect to last used wallet
+            if (!isConnected && typeof window.ethereum !== 'undefined') {
+                try {
+                    const lastWallet = localStorage.getItem('ms2fun_lastWallet');
+
+                    if (lastWallet) {
+                        // Check if that wallet has accounts (without prompting)
+                        const accounts = await window.ethereum.request({ method: 'eth_accounts' });
+                        const hasAccounts = accounts && accounts.length > 0;
+
+                        // Only try to reconnect if the last wallet has accounts
+                        if (hasAccounts) {
+                            try {
+                                await this.walletService.selectWallet(lastWallet);
+                                await this.walletService.connect();
+                                isConnected = this.walletService.isConnected();
+                                address = this.walletService.getAddress();
+
+                                if (isConnected) {
+                                    console.log('[FloatingWalletButton] Auto-reconnected to', lastWallet);
+                                }
+                            } catch (connectError) {
+                                console.log('[FloatingWalletButton] Auto-reconnect not possible');
+                            }
+                        }
+                    }
+                } catch (error) {
+                    console.log('[FloatingWalletButton] Could not check existing accounts:', error);
+                }
+            }
+
+            if (isConnected && address) {
+                await this.loadWalletInfo(address);
+            } else {
+                this.setState({ loading: false, walletConnected: false });
+            }
+        } catch (error) {
+            console.error('[FloatingWalletButton] Error checking wallet connection:', error);
+            this.setState({ loading: false, walletConnected: false });
+        }
+    }
+
+    /**
+     * Load wallet info (balance, EXEC tokens, vault benefactor status)
+     */
+    async loadWalletInfo(address) {
+        try {
+            // Get ETH balance
+            let provider = this.walletService.ethersProvider;
+            if (!provider && typeof window.ethereum !== 'undefined') {
+                provider = new ethers.providers.Web3Provider(window.ethereum);
+            }
+
+            let balance = '0.00';
+            if (provider && address) {
+                const balanceWei = await provider.getBalance(address);
+                balance = parseFloat(ethers.utils.formatEther(balanceWei)).toFixed(4);
+            }
+
+            // TODO: Check EXEC token holdings for governance menu visibility
+            // const hasExecTokens = await this.checkExecTokens(address);
+            const hasExecTokens = false; // Placeholder for now
+
+            // TODO: Check vault benefactor status
+            // const isVaultBenefactor = await this.checkVaultBenefactor(address);
+            const isVaultBenefactor = false; // Placeholder for now
+
+            this.setState({
+                walletConnected: true,
+                address,
+                balance,
+                loading: false,
+                hasExecTokens,
+                isVaultBenefactor
+            });
+        } catch (error) {
+            console.error('[FloatingWalletButton] Failed to load wallet info:', error);
+            this.setState({
+                walletConnected: true,
+                address,
+                loading: false
+            });
+        }
+    }
+
+    /**
+     * TODO: Check if user holds EXEC tokens
+     */
+    async checkExecTokens(address) {
+        // Will implement when ERC404 adapter is wired up
+        // const execBalance = await ERC404Adapter.balanceOf(address, EXEC_TOKEN_ADDRESS);
+        // return execBalance > 0;
+        return false;
+    }
+
+    /**
+     * TODO: Check if user is a vault benefactor
+     */
+    async checkVaultBenefactor(address) {
+        // Will implement when vault adapters are wired up
+        // Iterate vaults, check getBenefactorShares(address) > 0
+        return false;
+    }
+
+    setupEventListeners() {
+        // Listen for wallet connection
+        const unsubscribeConnected = eventBus.on('wallet:connected', async (data) => {
+            await this.loadWalletInfo(data.address);
+        });
+
+        // Listen for wallet disconnection
+        const unsubscribeDisconnected = eventBus.on('wallet:disconnected', () => {
+            this.setState({
+                walletConnected: false,
+                address: null,
+                balance: '0.00',
+                menuOpen: false,
+                hasExecTokens: false,
+                isVaultBenefactor: false
+            });
+        });
+
+        // Listen for wallet/account change
+        const unsubscribeChanged = eventBus.on('wallet:changed', async (data) => {
+            await this.loadWalletInfo(data.address);
+        });
+
+        // Register cleanup
+        this.registerCleanup(() => {
+            unsubscribeConnected();
+            unsubscribeDisconnected();
+            unsubscribeChanged();
+        });
+    }
+
+    setupClickOutsideHandler() {
+        const handleClickOutside = (e) => {
+            if (!this.element) return;
+
+            // Check if click is outside the floating wallet button
+            if (!this.element.contains(e.target) && this.state.menuOpen) {
+                this.setState({ menuOpen: false });
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+
+        this.registerCleanup(() => {
+            document.removeEventListener('click', handleClickOutside);
+        });
+    }
+
+    async handleButtonClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (this.state.walletConnected) {
+            // Toggle dropdown menu
+            this.setState({ menuOpen: !this.state.menuOpen });
+        } else {
+            // Show wallet connection modal
+            await this.showWalletModal();
+        }
+    }
+
+    async showWalletModal() {
+        // Get provider map and icons from this.walletService
+        const 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 = {
+            rabby: '/public/wallets/rabby.webp',
+            rainbow: '/public/wallets/rainbow.webp',
+            phantom: '/public/wallets/phantom.webp',
+            metamask: '/public/wallets/MetaMask.webp'
+        };
+
+        // Create WalletModal if not exists
+        if (!this.walletModal) {
+            this.walletModal = new 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);
+        }
+
+        this.walletModal.show();
+    }
+
+    async handleWalletSelection(walletType) {
+        try {
+            // Select the wallet
+            await this.walletService.selectWallet(walletType);
+
+            // Store the selected wallet in localStorage for future auto-reconnect
+            localStorage.setItem('ms2fun_lastWallet', walletType);
+
+            // Connect to the wallet
+            await this.walletService.connect();
+
+            // Wallet is now connected (event listener will update state)
+
+        } catch (error) {
+            console.error('[FloatingWalletButton] Error connecting wallet:', error);
+            // TODO: Show error message
+        }
+    }
+
+    handleMenuItemClick(route) {
+        // Close menu
+        this.setState({ menuOpen: false });
+
+        // Navigate to route
+        if (window.router) {
+            window.router.navigate(route);
+        } else {
+            window.location.href = route;
+        }
+    }
+
+    async handleDisconnect(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        try {
+            await this.walletService.disconnect();
+            this.setState({ menuOpen: false });
+        } catch (error) {
+            console.error('[FloatingWalletButton] Failed to disconnect:', error);
+        }
+    }
+
+  static get styles() {
+    return `
+    /* FloatingWalletButton - Bottom-right floating wallet connection button with power user dropdown */
+
+    .floating-wallet-button {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        z-index: 9999; /* Above all content */
+    }
+
+    .floating-wallet-button .wallet-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1.25rem;
+        background: linear-gradient(135deg, rgba(139, 69, 19, 0.9), rgba(101, 67, 33, 0.9));
+        border: 2px solid rgba(218, 165, 32, 0.6);
+        border-radius: 50px;
+        color: #fff;
+        font-family: 'Cinzel', serif;
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(10px);
+    }
+
+    .floating-wallet-button .wallet-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(218, 165, 32, 0.4);
+        border-color: rgba(218, 165, 32, 0.8);
+        background: linear-gradient(135deg, rgba(160, 82, 45, 0.95), rgba(120, 80, 50, 0.95));
+    }
+
+    .floating-wallet-button .wallet-btn:active {
+        transform: translateY(0);
+    }
+
+    /* Wallet icon */
+    .floating-wallet-button .wallet-icon {
+        font-size: 1.2rem;
+        line-height: 1;
+    }
+
+    /* Wallet text/address */
+    .floating-wallet-button .wallet-text,
+    .floating-wallet-button .wallet-address {
+        font-size: 0.875rem;
+        white-space: nowrap;
+    }
+
+    /* Loading state */
+    .floating-wallet-button.loading {
+        pointer-events: none;
+    }
+
+    .floating-wallet-button .wallet-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(218, 165, 32, 0.3);
+        border-top-color: rgba(218, 165, 32, 0.9);
+        border-radius: 50%;
+        animation: wallet-spin 0.8s linear infinite;
+    }
+
+    @keyframes wallet-spin {
+        to { transform: rotate(360deg); }
+    }
+
+    /* Dropdown menu */
+    .wallet-dropdown-menu {
+        position: absolute;
+        bottom: calc(100% + 0.5rem);
+        right: 0;
+        min-width: 240px;
+        background: linear-gradient(135deg, rgba(139, 69, 19, 0.98), rgba(101, 67, 33, 0.98));
+        border: 2px solid rgba(218, 165, 32, 0.6);
+        border-radius: 12px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(15px);
+        overflow: hidden;
+        animation: dropdown-slide-up 0.2s ease-out;
+    }
+
+    @keyframes dropdown-slide-up {
+        from {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    /* Dropdown header */
+    .wallet-dropdown-menu .dropdown-header {
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.3);
+        border-bottom: 1px solid rgba(218, 165, 32, 0.3);
+    }
+
+    .wallet-dropdown-menu .dropdown-address {
+        font-family: 'Cinzel', serif;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: rgba(218, 165, 32, 0.95);
+        margin-bottom: 0.25rem;
+    }
+
+    .wallet-dropdown-menu .dropdown-balance {
+        font-family: 'Lato', sans-serif;
+        font-size: 0.75rem;
+        color: rgba(255, 255, 255, 0.7);
+    }
+
+    /* Dropdown divider */
+    .wallet-dropdown-menu .dropdown-divider {
+        height: 1px;
+        background: linear-gradient(90deg,
+            transparent,
+            rgba(218, 165, 32, 0.3) 50%,
+            transparent
+        );
+        margin: 0;
+    }
+
+    /* Dropdown items */
+    .wallet-dropdown-menu .dropdown-items {
+        padding: 0.5rem;
+    }
+
+    .wallet-dropdown-menu .dropdown-item {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        width: 100%;
+        padding: 0.75rem 1rem;
+        background: transparent;
+        border: none;
+        border-radius: 8px;
+        color: rgba(255, 255, 255, 0.9);
+        font-family: 'Lato', sans-serif;
+        font-size: 0.875rem;
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+
+    .wallet-dropdown-menu .dropdown-item:hover {
+        background: rgba(218, 165, 32, 0.15);
+        color: #fff;
+    }
+
+    .wallet-dropdown-menu .dropdown-item:active {
+        background: rgba(218, 165, 32, 0.25);
+    }
+
+    .wallet-dropdown-menu .dropdown-item .item-icon {
+        font-size: 1.125rem;
+        line-height: 1;
+        opacity: 0.9;
+    }
+
+    .wallet-dropdown-menu .dropdown-item .item-label {
+        flex: 1;
+    }
+
+    /* Disconnect button special styling */
+    .wallet-dropdown-menu .dropdown-item.disconnect {
+        color: rgba(255, 99, 71, 0.9);
+    }
+
+    .wallet-dropdown-menu .dropdown-item.disconnect:hover {
+        background: rgba(255, 99, 71, 0.15);
+        color: rgba(255, 99, 71, 1);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+        .floating-wallet-button {
+            bottom: 1rem;
+            right: 1rem;
+        }
+
+        .floating-wallet-button .wallet-btn {
+            padding: 0.625rem 1rem;
+            font-size: 0.8rem;
+        }
+
+        .wallet-dropdown-menu {
+            min-width: 200px;
+            right: 0;
+        }
+
+        .wallet-dropdown-menu .dropdown-item {
+            padding: 0.625rem 0.875rem;
+            font-size: 0.8rem;
+        }
+    }
+
+    /* Small screens - even more compact */
+    @media (max-width: 480px) {
+        .floating-wallet-button {
+            bottom: 0.75rem;
+            right: 0.75rem;
+        }
+
+        .floating-wallet-button .wallet-btn {
+            padding: 0.5rem 0.875rem;
+            font-size: 0.75rem;
+        }
+
+        .floating-wallet-button .wallet-icon {
+            font-size: 1rem;
+        }
+
+        .wallet-dropdown-menu {
+            min-width: 180px;
+        }
+    }
+
+    /* Ensure menu appears above button when open */
+    .floating-wallet-button.menu-open .wallet-btn {
+        border-color: rgba(218, 165, 32, 0.9);
+        background: linear-gradient(135deg, rgba(160, 82, 45, 0.95), rgba(120, 80, 50, 0.95));
+    }
+    `;
+  }
+
+    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>
+            `;
+        }
+
+        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>
+            `;
+        }
+
+        // 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>
+        `;
+    }
+
+    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 });
+                }
+            });
+        });
+
+        // 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);
+        }
+    }
+
+    onUnmount() {
+        // Clean up wallet modal
+        if (this.walletModal) {
+            this.walletModal.hide();
+            this.walletModal = null;
+        }
+    }
+
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}