@monygroupcorp/micro-web3 0.1.0

package/src/components/Swap/SwapInterface.js

@@ -0,0 +1,972 @@
+import { Component } from '@monygroupcorp/microact';
+import { TransactionOptions } from './TransactionOptions.js';
+import { MessagePopup } from '../Util/MessagePopup.js';
+import { PriceDisplay } from '../Display/PriceDisplay.js';
+import { ApprovalModal } from '../Modal/ApprovalModal.js';
+import { SwapInputs } from './SwapInputs.js';
+import SwapButton from './SwapButton.js';
+
+export class SwapInterface extends Component {
+    constructor(props) {
+        super(props);
+        
+        this.blockchainService = props.blockchainService;
+        this.eventBus = props.eventBus;
+
+        this.state = {
+            direction: props.direction || 'buy',
+            ethAmount: '',
+            execAmount: '',
+            activeInput: null,
+            freeMint: props.freeMint || false,
+            freeSupply: props.freeSupply || 0,
+            calculatingAmount: false,
+            isPhase2: props.isPhase2 === null ? null : props.isPhase2, // null means phase is not yet determined
+            dataReady: props.dataReady || false,
+            balances: props.balances || { eth: '0', exec: '0' },
+            price: props.price || { current: 0 },
+            contractData: props.contractData || {},
+        };
+        
+        // Store the address - could be a promise or a direct value
+        this._address = props.address || null;
+        
+        // Initialize child components
+        this.transactionOptions = new TransactionOptions();
+        this.messagePopup = new MessagePopup('status-message');
+        this.priceDisplay = new PriceDisplay({ price: this.state.price, contractData: this.state.contractData });
+        this.messagePopup.initialize();
+        
+        this.swapInputs = null; // Initialized in initializeChildComponents
+        
+        this.swapButton = new SwapButton({
+            direction: this.state.direction,
+            disabled: false,
+            onClick: this.handleSwap.bind(this)
+        });
+        
+        this.calculateTimer = null;
+        
+        // Bind event handlers that are passed in props
+        this.onDirectionChange = props.onDirectionChange;
+
+        this.handleTransactionEvents = this.handleTransactionEvents.bind(this);
+        this.handleBalanceUpdate = this.handleBalanceUpdate.bind(this);
+        this.handleTransactionOptionsUpdate = this.handleTransactionOptionsUpdate.bind(this);
+        
+        this.transactionOptionsState = {
+            message: '',
+            nftMintingEnabled: false
+        };
+
+        this.approveModal = null;
+        this.eventListeners = [];
+        this.instanceId = Math.random().toString(36).substring(2, 9);
+        console.log(`🔵 SwapInterface instance created: ${this.instanceId}`);
+    }
+
+    // Add new method to handle balance updates
+    handleBalanceUpdate(update) {
+        // Update state from the event detail or props
+        const newBalances = update.balances || this.props.balances;
+        const newFreeMint = update.freeMint !== undefined ? update.freeMint : this.props.freeMint;
+        const newFreeSupply = update.freeSupply !== undefined ? update.freeSupply : this.props.freeSupply;
+
+        this.setState({
+            balances: newBalances,
+            freeMint: newFreeMint,
+            freeSupply: newFreeSupply
+        });
+        
+        // Update swap inputs component with new balance info directly
+        if (this.swapInputs) {
+            this.swapInputs.updateProps({
+                freeMint: newFreeMint
+            });
+        }
+    }
+
+    updateElements() {
+        // Update child components with new props
+        // Use requestAnimationFrame to batch updates and prevent multiple renders
+        requestAnimationFrame(() => {
+            if (this.swapInputs) {
+                this.swapInputs.updateProps({
+                    direction: this.state.direction,
+                    ethAmount: this.state.ethAmount,
+                    execAmount: this.state.execAmount,
+                    calculatingAmount: this.state.calculatingAmount,
+                    freeMint: this.state.freeMint,
+                    isPhase2: this.state.isPhase2
+                });
+            }
+            
+            if (this.swapButton) {
+                this.swapButton.updateProps({
+                    direction: this.state.direction
+                });
+            }
+        });
+    }
+
+    async calculateSwapAmount(amount, inputType) {
+        // Handle empty or invalid input
+        if (!amount || isNaN(parseFloat(amount))) {
+            return '';
+        }
+
+        try {
+            if (this.isLiquidityDeployed()) {
+                // Phase 2: Use Uniswap-style calculations
+                const price = this.state.price.current;
+                console.log('calculateSwapAmount price', price);
+                
+                if (inputType === 'eth') {
+                    // Calculate EXEC amount based on ETH input
+                    const ethAmount = parseFloat(amount);
+                    // Apply a 5% reduction to account for 4% tax + slippage
+                    const execAmount = (ethAmount / price * 1000000) * 0.95;
+                    console.log('calculateSwapAmount execAmount', execAmount);
+                    return execAmount.toFixed(0); // Use integer amounts for EXEC
+                } else {
+                    // Calculate ETH amount based on EXEC input
+                    const execAmount = parseFloat(amount);
+                    // Add a 5.5% buffer for 4% tax + slippage + price impact
+                    const ethAmount = (execAmount / 1000000) * price * 1.055;
+                    console.log('calculateSwapAmount ethAmount', ethAmount);
+                    return ethAmount.toFixed(6);
+                }
+            } else {
+                // Phase 1: Use bonding curve logic
+                if (inputType === 'eth') {
+                    // Calculate how much EXEC user will receive for their ETH
+                    const execAmount = await this.blockchainService.getExecForEth(amount);
+
+                    // Check if user is eligible for free mint
+                    const { freeSupply, freeMint } = this.state;
+                    console.log('calculateSwapAmount freeMint', freeMint);
+                    // If free supply is available and user hasn't claimed their free mint
+                    const freeMintBonus = (freeSupply > 0 && !freeMint) ? 1000000 : 0;
+                    
+                    // Round down to ensure we don't exceed maxCost
+                    return Math.floor(execAmount + freeMintBonus).toString();
+                } else {
+                    // Calculate how much ETH user will receive for their EXEC
+                    const ethAmount = await this.blockchainService.getEthForExec(amount);
+                    return ethAmount.toString(); // Use more decimals for precision
+                }
+            }
+        } catch (error) {
+            console.error('Error calculating swap amount:', error);
+            return '';
+        }
+    }
+
+    onMount() {
+        console.log(`[${this.instanceId}] SwapInterface onMount called`);
+        this.bindEvents();
+        
+        const eventSubscriptions = [
+            ['contractData:updated', this.handleContractDataUpdate.bind(this), 'high'],
+            ['transaction:pending', this.handleTransactionEvents, 'normal'],
+            ['transaction:confirmed', this.handleTransactionEvents, 'normal'],
+            ['transaction:success', this.handleTransactionEvents, 'normal'],
+            ['transaction:error', this.handleTransactionEvents, 'normal'],
+            ['balances:updated', this.handleBalanceUpdate, 'high'],
+            ['transactionOptions:update', this.handleTransactionOptionsUpdate, 'low']
+        ];
+        
+        this.eventListeners = eventSubscriptions.map(([event, handler, priority]) => {
+            console.log(`[${this.instanceId}] Subscribing to ${event} with priority ${priority}`);
+            return this.eventBus.on(event, handler);
+        });
+
+        // Check if we already have data and can determine phase immediately
+        const { contractData } = this.state;
+        if (contractData && contractData.liquidityPool !== undefined) {
+            const isPhase2 = this.isLiquidityDeployed();
+            this.setState({ 
+                isPhase2: isPhase2,
+                dataReady: true
+            });
+            this.initializeChildComponents();
+        }
+        
+        this.update();
+            
+        requestAnimationFrame(() => {
+            this.mountChildComponents();
+        });
+    }
+
+    updateProps(newProps) {
+        // Update state based on new props from parent
+        const oldState = { ...this.state };
+        const newState = {
+            ...this.state,
+            ...newProps
+        };
+
+        if (this.shouldUpdate(oldState, newState)) {
+            this.setState(newState);
+        }
+    }
+    
+    /**
+     * Initialize child components that depend on phase
+     * This is called once phase is determined (either in onMount or handleContractDataUpdate)
+     */
+    initializeChildComponents() {
+        // Only initialize if phase is known and SwapInputs hasn't been created yet
+        if (this.state.isPhase2 === null) {
+            console.log(`[${this.instanceId}] Phase not yet determined, skipping SwapInputs initialization`);
+            return;
+        }
+        
+        if (!this.swapInputs) {
+            console.log(`[${this.instanceId}] Initializing SwapInputs with phase ${this.state.isPhase2 ? '2' : '1'}`);
+            this.swapInputs = new SwapInputs({
+                direction: this.state.direction,
+                ethAmount: this.state.ethAmount,
+                execAmount: this.state.execAmount,
+                calculatingAmount: this.state.calculatingAmount,
+                freeMint: this.state.freeMint,
+                isPhase2: this.state.isPhase2,
+                onInput: this.handleInput.bind(this)
+            });
+        }
+    }
+    
+    // Add method to explicitly mount child components
+    mountChildComponents() {
+        // Mount price display
+        const priceContainer = this.element.querySelector('.price-display-container');
+        if (priceContainer && (!this.priceDisplay.element || !priceContainer.contains(this.priceDisplay.element))) {
+            console.log(`[${this.instanceId}] Mounting PriceDisplay component`);
+            this.priceDisplay.mount(priceContainer);
+        }
+        
+        // Mount transaction options
+        const optionsContainer = this.element.querySelector('.transaction-options-container');
+        if (optionsContainer && this.transactionOptions && 
+            (!this.transactionOptions.element || !optionsContainer.contains(this.transactionOptions.element))) {
+            console.log(`[${this.instanceId}] Mounting TransactionOptions component`);
+            this.transactionOptions.mount(optionsContainer);
+        }
+        
+        // Mount swap inputs
+        const inputsContainer = this.element.querySelector('.swap-inputs-container');
+        if (inputsContainer && this.swapInputs) {
+            this.swapInputs.mount(inputsContainer);
+        }
+        
+        // Mount quick fill buttons
+        const quickFillContainer = this.element.querySelector('.quick-fill-buttons-container');
+        if (quickFillContainer) {
+            // Create a wrapper for just the quick fill buttons
+            quickFillContainer.innerHTML = '<div class="quick-fill-buttons"></div>';
+            const quickFillButtons = quickFillContainer.querySelector('.quick-fill-buttons');
+            if (quickFillButtons) {
+                // Render quick fill buttons directly
+                const { direction } = this.state;
+                quickFillButtons.innerHTML = direction === 'buy' ? 
+                    `<button data-amount="0.0025">0.0025</button>
+                    <button data-amount="0.01">0.01</button>
+                    <button data-amount="0.05">0.05</button>
+                    <button data-amount="0.1">0.1</button>`
+                :
+                    `<button data-percentage="25">25%</button>
+                    <button data-percentage="50">50%</button>
+                    <button data-percentage="75">75%</button>
+                    <button data-percentage="100">100%</button>`;
+                
+                // Attach event listeners
+                quickFillButtons.addEventListener('click', (e) => {
+                    if (e.target.dataset.amount || e.target.dataset.percentage) {
+                        this.handleQuickFill(e);
+                    }
+                });
+            }
+        }
+        
+        // Mount direction switch in the slot within swap-inputs
+        const directionSwitchSlot = this.element.querySelector('.direction-switch-slot');
+        if (directionSwitchSlot) {
+            directionSwitchSlot.innerHTML = '<button class="direction-switch">↑↓</button>';
+            directionSwitchSlot.querySelector('.direction-switch').addEventListener('click', (e) => {
+                this.handleDirectionSwitch(e);
+            });
+        }
+        
+        // Mount swap button
+        const buttonContainer = this.element.querySelector('.swap-button-container');
+        if (buttonContainer && this.swapButton) {
+            this.swapButton.mount(buttonContainer);
+        }
+    }
+
+    onUnmount() {
+        console.log(`[${this.instanceId}] SwapInterface onUnmount called`);
+        // Unsubscribe from all events
+        this.eventListeners.forEach(unsubscribe => {
+            if (typeof unsubscribe === 'function') {
+                unsubscribe();
+            }
+        });
+        
+        // Clear the list
+        this.eventListeners = [];
+        
+        // Remove child components
+        if (this.transactionOptions && this.transactionOptions.element) {
+            this.transactionOptions.element.remove();
+        }
+        
+        // Ensure price display is cleaned up
+        if (this.priceDisplay) {
+            try {
+                this.priceDisplay.unmount();
+            } catch (e) {
+                console.warn('Error unmounting price display:', e);
+            }
+            this.priceDisplay = null;
+        }
+        
+        // Unmount sub-components
+        if (this.swapInputs) {
+            try {
+                this.swapInputs.unmount();
+            } catch (e) {
+                console.warn('Error unmounting swap inputs:', e);
+            }
+            this.swapInputs = null;
+        }
+        
+        // Quick fill and direction switch are handled inline, no unmount needed
+        
+        if (this.swapButton) {
+            try {
+                this.swapButton.unmount();
+            } catch (e) {
+                console.warn('Error unmounting swap button:', e);
+            }
+            this.swapButton = null;
+        }
+        
+        // Make sure to close and clean up any open approval modal
+        if (this.approveModal) {
+            try {
+                // Close the modal - this will trigger the approveModal:closed event
+                // which will clean up related event listeners
+                this.approveModal.handleClose();
+            } catch (e) {
+                console.warn('Error closing approval modal during unmount:', e);
+            }
+            this.approveModal = null;
+        }
+        
+        // Clear any pending timers
+        if (this.calculateTimer) {
+            clearTimeout(this.calculateTimer);
+            this.calculateTimer = null;
+        }
+    }
+
+    handleTransactionEvents(event) {
+        console.log(`[${this.instanceId}] handleTransactionEvents called with:`, {
+            type: event?.type,
+            hasError: !!event?.error,
+            hasHash: !!event?.hash,
+            eventId: event?.id || 'none',
+            handled: event?.handled || false
+        });
+        
+        // Skip if this event has already been handled by this instance
+        if (event?.handledBy?.includes(this.instanceId)) {
+            console.log(`[${this.instanceId}] Event already handled by this instance, skipping`);
+            return;
+        }
+        
+        // Mark this event as handled by this instance
+        if (!event.handledBy) {
+            event.handledBy = [];
+        }
+        event.handledBy.push(this.instanceId);
+        
+        const direction = this.state.direction === 'buy' ? 'Buy' : 'Sell';
+
+        // Check if this is a transaction event
+        if (!event || !event.type) {
+            console.warn('Invalid transaction event:', event);
+            return;
+        }
+
+        // For transaction events - only show if it's not an error
+        if ((event.type === 'buy' || event.type === 'sell' || event.type === 'swap') && !event.error) {
+            console.log(`[${this.instanceId}] Showing transaction pending message for type:`, event.type);
+            this.messagePopup.info(
+                `${direction} transaction. Simulating...`,
+                'Transaction Pending'
+            );
+        }
+
+        // For confirmed transactions
+        if (event.hash) {
+            this.messagePopup.info(
+                `Transaction confirmed, waiting for completion...`,
+                'Transaction Confirmed'
+            );
+        }
+
+        // For successful transactions
+        if (event.receipt && (event.type === 'buy' || event.type === 'sell' || event.type === 'swap')) {
+            const amount = this.state.direction === 'buy' 
+                ? this.state.execAmount + ' EXEC'
+                : this.state.ethAmount + ' ETH';
+                
+            this.messagePopup.success(
+                `Successfully ${direction.toLowerCase() === 'buy' ? 'bought' : 'sold'} ${amount}`,
+                'Transaction Complete'
+            );
+
+            // Clear inputs after successful transaction
+            this.state.ethAmount = '';
+            this.state.execAmount = '';
+            this.state.calculatingAmount = false;
+            
+            // Update child components directly
+            if (this.swapInputs) {
+                this.swapInputs.updateProps({
+                    ethAmount: '',
+                    execAmount: '',
+                    calculatingAmount: false
+                });
+            }
+
+            // Re-mount child components after state update
+            this.mountChildComponents();
+        }
+
+        // For error transactions
+        if (event.error && !event.handled) {
+            console.log(`[${this.instanceId}] Handling error in handleTransactionEvents:`, event.error);
+            
+            let errorMessage = event.error?.message || 'Transaction failed';
+            
+            if (errorMessage.includes('Contract call')) {
+                const parts = errorMessage.split(': ');
+                errorMessage = parts[parts.length - 1];
+            }
+            
+            const context = this.state.direction === 'buy' ? 
+                'Buy Failed' : 
+                'Sell Failed';
+            
+            this.messagePopup.error(
+                `${context}: ${errorMessage}`,
+                'Transaction Failed'
+            );
+
+            event.handled = true;
+        }
+    }
+
+    handleTransactionOptionsUpdate(options) {
+        this.transactionOptionsState = {
+            message: options.message,
+            nftMintingEnabled: options.nftMintingEnabled
+        };
+    }
+
+    handleInput(inputType, value) {
+        // Clear any existing timer
+        if (this.calculateTimer) {
+            clearTimeout(this.calculateTimer);
+        }
+
+        // Update state directly without triggering re-render
+        // We'll update the child components directly instead
+        this.state.activeInput = inputType;
+        this.state.calculatingAmount = true;
+        
+        if (this.state.direction === 'buy') {
+            if (inputType === 'top') {
+                this.state.ethAmount = value;
+            } else {
+                this.state.execAmount = value;
+            }
+        } else {
+            if (inputType === 'top') {
+                this.state.execAmount = value;
+            } else {
+                this.state.ethAmount = value;
+            }
+        }
+        
+        // Update child components directly without triggering parent re-render
+        if (this.swapInputs) {
+            this.swapInputs.updateProps({
+                direction: this.state.direction,
+                ethAmount: this.state.ethAmount,
+                execAmount: this.state.execAmount,
+                calculatingAmount: this.state.calculatingAmount,
+                freeMint: this.state.freeMint,
+                isPhase2: this.state.isPhase2
+            });
+        }
+
+        // Set debounced calculation
+        this.calculateTimer = setTimeout(async () => {
+            try {
+                const isEthInput = (this.state.direction === 'buy') === (inputType === 'top');
+                const calculatedAmount = await this.calculateSwapAmount(value, isEthInput ? 'eth' : 'exec');
+                
+                // Update the opposite input after calculation
+                if (isEthInput) {
+                    this.state.execAmount = calculatedAmount;
+                    this.state.calculatingAmount = false;
+                    
+                    // Update child component directly
+                    if (this.swapInputs) {
+                        this.swapInputs.updateProps({
+                            execAmount: calculatedAmount,
+                            calculatingAmount: false
+                        });
+                    }
+                } else {
+                    this.state.ethAmount = calculatedAmount;
+                    this.state.calculatingAmount = false;
+                    
+                    // Update child component directly
+                    if (this.swapInputs) {
+                        this.swapInputs.updateProps({
+                            ethAmount: calculatedAmount,
+                            calculatingAmount: false
+                        });
+                    }
+                }
+            } catch (error) {
+                console.error('Error calculating swap amount:', error);
+                this.state.calculatingAmount = false;
+                
+                // Update child component directly
+                if (this.swapInputs) {
+                    this.swapInputs.updateProps({
+                        calculatingAmount: false
+                    });
+                }
+            }
+        }, 750);
+    }
+
+    events() {
+        // Events are now handled by child components
+        return {};
+    }
+
+    /**
+     * Override shouldUpdate to prevent re-renders on input changes
+     * Input changes are handled by child components directly
+     */
+    shouldUpdate(oldState, newState) {
+        if (!oldState || !newState) return true;
+        if (oldState === newState) return false;
+        
+        // Don't update if only input values changed (ethAmount, execAmount, activeInput, calculatingAmount)
+        // These are handled by child components directly
+        const inputOnlyChanges = 
+            oldState.ethAmount !== newState.ethAmount ||
+            oldState.execAmount !== newState.execAmount ||
+            oldState.activeInput !== newState.activeInput ||
+            oldState.calculatingAmount !== newState.calculatingAmount;
+        
+        // If only input values changed, don't re-render (child components handle it)
+        if (inputOnlyChanges && 
+            oldState.direction === newState.direction &&
+            oldState.freeMint === newState.freeMint &&
+            oldState.freeSupply === newState.freeSupply &&
+            oldState.isPhase2 === newState.isPhase2 &&
+            oldState.dataReady === newState.dataReady) {
+            return false;
+        }
+        
+        // Update for other state changes (direction, phase, dataReady, etc.)
+        return true;
+    }
+
+    handleDirectionSwitch(e) {
+        // Prevent default button behavior and stop propagation
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        // Clear any pending calculations
+        if (this.calculateTimer) {
+            clearTimeout(this.calculateTimer);
+        }
+
+        const newDirection = this.state.direction === 'buy' ? 'sell' : 'buy';
+        
+        console.log('Direction Switch - Current State:', {
+            direction: this.state.direction,
+            newDirection,
+            freeMint: this.state.freeMint,
+            freeSupply: this.state.freeSupply
+        });
+
+        // Use setState instead of directly modifying state
+        this.setState({
+            direction: newDirection,
+            calculatingAmount: false,
+            activeInput: null
+        });
+
+        // Notify parent component of the change
+        if (this.onDirectionChange) {
+            this.onDirectionChange(newDirection);
+        }
+
+        // Update child components with new direction
+        requestAnimationFrame(() => {
+            this.mountChildComponents();
+        });
+    }
+
+    isLiquidityDeployed() {
+        const { contractData } = this.state;
+        if (!contractData || !contractData.liquidityPool) {
+            return false;
+        }
+        const result = contractData.liquidityPool !== '0x0000000000000000000000000000000000000000';
+        console.log('isLiquidityDeployed check:', {
+            liquidityPool: contractData.liquidityPool,
+            result: result
+        });
+        return result;
+    }
+
+    async handleSwap() {
+        try {
+            // Validate inputs
+            if (this.state.calculatingAmount) {
+                this.messagePopup.info('Please wait for the calculation to complete', 'Loading');
+                return;
+            }
+            
+            const { ethAmount, execAmount, direction, balances, freeMint } = this.state;
+            
+            if (!ethAmount || !execAmount || parseFloat(ethAmount) <= 0 || parseFloat(execAmount) <= 0) {
+                this.messagePopup.info('Please enter valid amounts', 'Invalid Input');
+                return;
+            }
+            
+            // Check if user has enough balance
+            if (direction === 'buy') {
+                let ethBalance = parseFloat(this.blockchainService.formatEther(balances.eth || '0'));
+                const ethNeeded = parseFloat(ethAmount);
+                
+                if (isNaN(ethNeeded) || isNaN(ethBalance) || ethNeeded > ethBalance) {
+                    this.messagePopup.info(`Not enough ETH balance. You have ${ethBalance.toFixed(6)} ETH, need ${ethNeeded} ETH`, 'Insufficient Balance');
+                    return;
+                }
+            } else {
+                const execAmountClean = execAmount.replace(/,/g, '');
+                const execBalance = BigInt(balances.exec || 0);
+                const execNeeded = BigInt(parseInt(execAmountClean) || 0);
+                
+                if (execNeeded > execBalance) {
+                    const execBalanceFormatted = parseInt(balances.exec || 0).toLocaleString();
+                    const execNeededFormatted = parseInt(execAmountClean).toLocaleString();
+                    this.messagePopup.info(`Not enough EXEC balance. You have ${execBalanceFormatted} EXEC, need ${execNeededFormatted} EXEC`, 'Insufficient Balance');
+                    return;
+                }
+            }
+
+            // Check if a free mint token is being sold
+            if (direction === 'sell' && parseInt(execAmount.replace(/,/g, '')) <= 1000000 && freeMint) {
+                this.messagePopup.info('Free minted tokens cannot be sold directly.', 'Free Mint Restriction');
+                return;
+            }
+            
+            const isLiquidityDeployed = this.isLiquidityDeployed();
+            const cleanExecAmount = this.state.execAmount.replace(/,/g, '');
+
+            if (isLiquidityDeployed) {
+                const ethValue = this.blockchainService.parseEther(this.state.ethAmount);
+                const execAmountBI = this.blockchainService.parseExec(cleanExecAmount);
+                const address = await this.getAddress();
+                
+                if (!address) {
+                    this.messagePopup.error('No wallet address available. Please reconnect your wallet.', 'Wallet Error');
+                    return;
+                }
+
+                if (this.state.direction === 'buy') {
+                    await this.blockchainService.swapExactEthForTokenSupportingFeeOnTransfer(address, { amount: execAmountBI }, ethValue);
+                } else {
+                    const routerAddress = this.blockchainService.swapRouter?.address || this.blockchainService.swapRouterAddress;
+                    const routerAllowance = await this.blockchainService.getApproval(address, routerAddress);
+                    
+                    if (BigInt(routerAllowance) < BigInt(execAmountBI)) {
+                        if (this.approveModal) {
+                            try {
+                                this.eventBus.off('approve:complete');
+                                this.approveModal.handleClose();
+                            } catch (e) { console.warn('Error closing existing approval modal:', e); }
+                            this.approveModal = null;
+                        }
+                        
+                        this.approveModal = new ApproveModal(cleanExecAmount, this.blockchainService, address);
+                        this.approveModal.mount(document.body);
+                        
+                        this.eventBus.once('approve:complete', async () => {
+                            try {
+                                await this.blockchainService.swapExactTokenForEthSupportingFeeOnTransferV2(address, { amount: execAmountBI });
+                            } catch (error) {
+                                this.messagePopup.error(`Swap Failed: ${error.message}`, 'Transaction Failed');
+                            }
+                        });
+                        
+                        this.eventBus.once('approveModal:closed', () => {
+                            this.approveModal = null;
+                        });
+                        
+                        this.approveModal.show();
+                        return;
+                    }
+
+                    await this.blockchainService.swapExactTokenForEthSupportingFeeOnTransferV2(address, { amount: execAmountBI });
+                }
+            } else {
+                // Bonding curve logic
+                let proof;
+                try {
+                    const currentTier = await this.blockchainService.getCurrentTier();
+                    proof = await this.blockchainService.getMerkleProof(this.address, currentTier);
+                    if (!proof) {
+                        this.messagePopup.error(`You are not whitelisted for Tier ${currentTier + 1}.`, 'Not Whitelisted');
+                        return;
+                    }
+                } catch (error) {
+                    this.messagePopup.error('Failed to verify whitelist status.', 'Whitelist Check Failed');
+                    return;
+                }
+                
+                let adjustedExecAmount = cleanExecAmount;
+                if (this.state.direction === 'buy' && this.state.freeSupply > 0 && !this.state.freeMint) {
+                    const numAmount = parseInt(cleanExecAmount);
+                    adjustedExecAmount = Math.max(0, numAmount - 1000000).toString();
+                }
+
+                const ethValue = this.blockchainService.parseEther(this.state.ethAmount);
+                const execAmountBI = this.blockchainService.parseExec(adjustedExecAmount);
+
+                if (this.state.direction === 'buy') {
+                    await this.blockchainService.buyBonding({
+                        amount: execAmountBI,
+                        maxCost: ethValue,
+                        mintNFT: this.transactionOptionsState.nftMintingEnabled,
+                        proof: proof.proof,
+                        message: this.transactionOptionsState.message
+                    }, ethValue);
+                } else {
+                    const minReturn = BigInt(ethValue) * BigInt(999) / BigInt(1000);
+                    await this.blockchainService.sellBonding({
+                        amount: execAmountBI,
+                        minReturn: minReturn,
+                        proof: proof.proof,
+                        message: this.transactionOptionsState.message
+                    });
+                }
+            }
+        } catch (error) {
+            console.error('Swap failed:', error);
+            let errorMessage = error.message;
+            if (errorMessage.includes('Contract call')) {
+                const parts = errorMessage.split(': ');
+                errorMessage = parts[parts.length - 1];
+            }
+            const context = this.state.direction === 'buy' ? 'Buy Failed' : 'Sell Failed';
+            this.messagePopup.error(`${context}: ${errorMessage}`, 'Transaction Failed');
+        }
+    }
+
+    handleQuickFill(e) {
+        e.preventDefault();
+        
+        const amount = e.target.dataset.amount;
+        const percentage = e.target.dataset.percentage;
+        
+        let value;
+        
+        if (amount) {
+            value = amount;
+        } else if (percentage) {
+            const { balances } = this.state;
+            const execBalance = balances.exec;
+            
+            if (!execBalance || execBalance === '0') {
+                console.warn('No EXEC balance available for quick fill');
+                return;
+            }
+
+            let readableBalance = BigInt(execBalance) / BigInt(1e18);
+            
+            if (this.state.freeMint) {
+                readableBalance = readableBalance - BigInt(1000000);    
+                if (readableBalance <= 0) {
+                    this.messagePopup.info('You only have free mint tokens which cannot be sold.', 'Cannot Quick Fill');
+                    return;
+                }
+            }
+
+            const amount = (readableBalance * BigInt(percentage)) / BigInt(100);
+            value = amount.toString();
+        }
+
+        this.handleInput('top', value);
+    }
+
+    handleContractDataUpdate() {
+        try {
+            const previousPhase = this.state.isPhase2;
+            const wasDataReady = this.state.dataReady;
+            const phaseWasUnknown = previousPhase === null;
+            
+            const { contractData } = this.state;
+            const isPhase2 = this.isLiquidityDeployed();
+            
+            this.state.isPhase2 = isPhase2;
+            this.state.dataReady = true;
+            
+            if (phaseWasUnknown && this.state.isPhase2 !== null) {
+                console.log(`[${this.instanceId}] Phase determined: ${isPhase2 ? 'Phase 2' : 'Phase 1'}`);
+                this.initializeChildComponents();
+                this.setState({ dataReady: true, isPhase2 });
+                requestAnimationFrame(() => this.mountChildComponents());
+                return;
+            }
+            
+            if (!wasDataReady && this.state.dataReady) {
+                console.log(`[${this.instanceId}] Data ready, mounting child components`);
+                this.setState({ dataReady: true, isPhase2 });
+                requestAnimationFrame(() => this.mountChildComponents());
+                return;
+            }
+            
+            if (previousPhase !== this.state.isPhase2) {
+                console.log(`Phase changed`);
+                if (this.swapInputs) {
+                    this.swapInputs.updateProps({ isPhase2: this.state.isPhase2 });
+                }
+                const priceContainer = this.element.querySelector('.price-display-container');
+                if (priceContainer && this.priceDisplay) {
+                    this.priceDisplay.mount(priceContainer);
+                }
+                return;
+            }
+            
+            const priceContainer = this.element.querySelector('.price-display-container');
+            if (priceContainer && this.priceDisplay) {
+                const shouldRemount = !this.priceDisplay.element || !priceContainer.contains(this.priceDisplay.element);
+                if (shouldRemount) {
+                    this.priceDisplay.mount(priceContainer);
+                } else {
+                    this.priceDisplay.update();
+                }
+            }
+        } catch (error) {
+            console.error('Error in handleContractDataUpdate:', error);
+            if (!this.state.dataReady) {
+                this.state.dataReady = true;
+                this.state.isPhase2 = this.isLiquidityDeployed();
+                if (!this.element || !this.element.innerHTML) {
+                    this.update();
+                }
+            }
+        }
+    }
+
+    render() {
+        console.log('🎨 SwapInterface.render - Starting render');
+        const { direction, isPhase2, dataReady, balances, freeMint, freeSupply } = this.state;
+
+        if (!dataReady || isPhase2 === null) {
+            return `
+                <div class="price-display-container"></div>
+                <div class="quick-fill-buttons-container"></div>
+                <div class="swap-inputs-container">
+                    <div style="padding: 20px; text-align: center;">Loading swap interface...</div>
+                </div>
+                <div class="transaction-options-container"></div>
+                <div class="swap-button-container"></div>
+            `;
+        }
+
+        console.log('Render - Current State:', { direction, freeMint, freeSupply, isPhase2 });
+        
+        const formattedEthBalance = parseFloat(balances.eth).toFixed(6);
+        const formattedExecBalance = parseInt(balances.exec).toLocaleString();
+        const availableExecBalance = direction === 'sell' && freeMint
+            ? `Available: ${(parseInt(balances.exec) - 1000000).toLocaleString()}`
+            : `Balance: ${formattedExecBalance}`;
+        
+        const result = `
+            <div class="price-display-container"></div>
+            ${direction === 'sell' && freeMint && !isPhase2 ? 
+                `<div class="free-mint-notice">You have 1,000,000 $EXEC you received for free that cannot be sold here.</div>` 
+                : direction === 'buy' && freeSupply > 0 && !freeMint && !isPhase2 ?
+                `<div class="free-mint-notice free-mint-bonus">1,000,000 $EXEC will be added to your purchase. Thank you.</div>`
+                : ''
+            }
+            <div class="quick-fill-buttons-container"></div>
+            <div class="swap-inputs-container"></div>
+            <div class="transaction-options-container"></div>
+            <div class="swap-button-container"></div>
+        `;
+        console.log('🎨 SwapInterface.render - Completed render');
+        return result;
+    }
+
+    /**
+     * Get the user's wallet address, resolving any promise if needed
+     * @returns {Promise<string>} Resolved address
+     */
+    async getAddress() {
+        try {
+            // Resolve the address if it's a Promise
+            const resolvedAddress = await Promise.resolve(this._address);
+            
+            // Log the resolved address for debugging
+            console.log(`[${this.instanceId}] Resolved address: ${resolvedAddress}`);
+            
+            return resolvedAddress;
+        } catch (error) {
+            console.error(`[${this.instanceId}] Error resolving address:`, error);
+            return null;
+        }
+    }
+    
+    /**
+     * Update the user's wallet address
+     * @param {string} newAddress - The new wallet address
+     */
+    setAddress(newAddress) {
+        this._address = newAddress;
+    }
+    
+    /**
+     * Property to maintain backward compatibility with old code
+     */
+    get address() {
+        return this._address;
+    }
+    
+    /**
+     * Property setter to maintain backward compatibility
+     */
+    set address(newAddress) {
+        this._address = newAddress;
+    }
+}