@monygroupcorp/micro-web3 1.2.3 → 1.3.0

package/src/components/Swap/SwapInterface.js

@@ -1,4 +1,4 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h, render } from '@monygroupcorp/microact';
 import { TransactionOptions } from './TransactionOptions.js';
 import { MessagePopup } from '../Util/MessagePopup.js';
 import { PriceDisplay } from '../Display/PriceDisplay.js';
@@ -9,7 +9,7 @@ import SwapButton from './SwapButton.js';
 export class SwapInterface extends Component {
     constructor(props) {
         super(props);
-        
+
         this.blockchainService = props.blockchainService;
         this.eventBus = props.eventBus;
 
@@ -21,53 +21,29 @@ export class SwapInterface extends Component {
             freeMint: props.freeMint || false,
             freeSupply: props.freeSupply || 0,
             calculatingAmount: false,
-            isPhase2: props.isPhase2 === null ? null : props.isPhase2, // null means phase is not yet determined
+            isPhase2: props.isPhase2 === null ? null : props.isPhase2,
             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.messagePopup.initialize?.();
         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}`);
+        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;
@@ -77,83 +53,34 @@ export class SwapInterface extends Component {
             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
+                    return execAmount.toFixed(0);
                 } 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
+                    return ethAmount.toString();
                 }
             }
         } catch (error) {
@@ -162,311 +89,110 @@ export class SwapInterface extends Component {
         }
     }
 
-    onMount() {
-        console.log(`[${this.instanceId}] SwapInterface onMount called`);
+    didMount() {
+        console.log(`[${this.instanceId}] SwapInterface didMount 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']
+            ['contractData:updated', this.bind(this.handleContractDataUpdate), 'high'],
+            ['transaction:pending', this.bind(this.handleTransactionEvents), 'normal'],
+            ['transaction:confirmed', this.bind(this.handleTransactionEvents), 'normal'],
+            ['transaction:success', this.bind(this.handleTransactionEvents), 'normal'],
+            ['transaction:error', this.bind(this.handleTransactionEvents), 'normal'],
+            ['balances:updated', this.bind(this.handleBalanceUpdate), 'high'],
+            ['transactionOptions:update', this.bind(this.handleTransactionOptionsUpdate), 'low']
         ];
-        
-        this.eventListeners = eventSubscriptions.map(([event, handler, priority]) => {
-            console.log(`[${this.instanceId}] Subscribing to ${event} with priority ${priority}`);
+
+        this.eventListeners = eventSubscriptions.map(([event, handler]) => {
             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({ 
+            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
+    willUnmount() {
+        console.log(`[${this.instanceId}] SwapInterface willUnmount called`);
         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;
         }
     }
 
+    bindEvents() {
+        // Events are bound inline in render
+    }
+
     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'
-            );
+            this.messagePopup.info(`${direction} transaction. Simulating...`, 'Transaction Pending');
         }
 
-        // For confirmed transactions
         if (event.hash) {
-            this.messagePopup.info(
-                `Transaction confirmed, waiting for completion...`,
-                'Transaction Confirmed'
-            );
+            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' 
+            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();
+            this.setState({
+                ethAmount: '',
+                execAmount: '',
+                calculatingAmount: false
+            });
         }
 
-        // 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'
-            );
-
+            const context = this.state.direction === 'buy' ? 'Buy Failed' : 'Sell Failed';
+            this.messagePopup.error(`${context}: ${errorMessage}`, 'Transaction Failed');
             event.handled = true;
         }
     }
@@ -479,158 +205,99 @@ export class SwapInterface extends Component {
     }
 
     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;
-        
+        const newState = {
+            activeInput: inputType,
+            calculatingAmount: true
+        };
+
         if (this.state.direction === 'buy') {
             if (inputType === 'top') {
-                this.state.ethAmount = value;
+                newState.ethAmount = value;
             } else {
-                this.state.execAmount = value;
+                newState.execAmount = value;
             }
         } else {
             if (inputType === 'top') {
-                this.state.execAmount = value;
+                newState.execAmount = value;
             } else {
-                this.state.ethAmount = value;
+                newState.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.setState(newState);
+
         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
-                        });
-                    }
+                    this.setState({ 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
-                        });
-                    }
+                    this.setState({ 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
-                    });
-                }
+                this.setState({ 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();
-        });
+    handleQuickFill(amount, percentage) {
+        let value;
+
+        if (amount) {
+            value = amount;
+        } else if (percentage) {
+            const { balances } = this.state;
+            const execBalance = balances.exec;
+
+            if (!execBalance || execBalance === '0') {
+                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 fillAmount = (readableBalance * BigInt(percentage)) / BigInt(100);
+            value = fillAmount.toString();
+        }
+
+        this.handleInput('top', value);
     }
 
     isLiquidityDeployed() {
@@ -638,34 +305,27 @@ export class SwapInterface extends Component {
         if (!contractData || !contractData.liquidityPool) {
             return false;
         }
-        const result = contractData.liquidityPool !== '0x0000000000000000000000000000000000000000';
-        console.log('isLiquidityDeployed check:', {
-            liquidityPool: contractData.liquidityPool,
-            result: result
-        });
-        return result;
+        return contractData.liquidityPool !== '0x0000000000000000000000000000000000000000';
     }
 
     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;
@@ -674,7 +334,7 @@ export class SwapInterface extends Component {
                 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();
@@ -683,12 +343,11 @@ export class SwapInterface extends Component {
                 }
             }
 
-            // 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, '');
 
@@ -696,7 +355,7 @@ export class SwapInterface extends Component {
                 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;
@@ -707,19 +366,27 @@ export class SwapInterface extends Component {
                 } 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); }
+                            } catch (e) { }
                             this.approveModal = null;
                         }
-                        
-                        this.approveModal = new ApproveModal(cleanExecAmount, this.blockchainService, address);
-                        this.approveModal.mount(document.body);
-                        
+
+                        const modalRoot = document.createElement('div');
+                        document.body.appendChild(modalRoot);
+
+                        render(h(ApprovalModal, {
+                            amount: cleanExecAmount,
+                            blockchainService: this.blockchainService,
+                            userAddress: address,
+                            eventBus: this.eventBus,
+                            ref: instance => this.approveModal = instance
+                        }), modalRoot);
+
                         this.eventBus.once('approve:complete', async () => {
                             try {
                                 await this.blockchainService.swapExactTokenForEthSupportingFeeOnTransferV2(address, { amount: execAmountBI });
@@ -727,19 +394,21 @@ export class SwapInterface extends Component {
                                 this.messagePopup.error(`Swap Failed: ${error.message}`, 'Transaction Failed');
                             }
                         });
-                        
+
                         this.eventBus.once('approveModal:closed', () => {
+                            if (modalRoot.parentNode) {
+                                modalRoot.parentNode.removeChild(modalRoot);
+                            }
                             this.approveModal = null;
                         });
-                        
-                        this.approveModal.show();
+
+                        this.approveModal?.show();
                         return;
                     }
 
                     await this.blockchainService.swapExactTokenForEthSupportingFeeOnTransferV2(address, { amount: execAmountBI });
                 }
             } else {
-                // Bonding curve logic
                 let proof;
                 try {
                     const currentTier = await this.blockchainService.getCurrentTier();
@@ -752,7 +421,7 @@ export class SwapInterface extends Component {
                     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);
@@ -792,181 +461,131 @@ export class SwapInterface extends Component {
         }
     }
 
-    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();
-                }
+
+            if (previousPhase === null || !wasDataReady) {
+                this.setState({
+                    isPhase2,
+                    dataReady: true
+                });
+            } else if (previousPhase !== isPhase2) {
+                this.setState({ isPhase2 });
             }
         } 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;
+            return await Promise.resolve(this._address);
         } 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;
     }
-}
+
+    render() {
+        const { direction, isPhase2, dataReady, balances, freeMint, freeSupply, ethAmount, execAmount, calculatingAmount } = this.state;
+
+        if (!dataReady || isPhase2 === null) {
+            return h('div', { className: 'swap-interface' },
+                h('div', { className: 'price-display-container' }),
+                h('div', { className: 'quick-fill-buttons-container' }),
+                h('div', { className: 'swap-inputs-container', style: { padding: '20px', textAlign: 'center' } },
+                    'Loading swap interface...'
+                ),
+                h('div', { className: 'transaction-options-container' }),
+                h('div', { className: 'swap-button-container' })
+            );
+        }
+
+        const formattedEthBalance = parseFloat(balances.eth).toFixed(6);
+        const formattedExecBalance = parseInt(balances.exec).toLocaleString();
+
+        return h('div', { className: 'swap-interface' },
+            h(PriceDisplay, {
+                price: this.state.price,
+                contractData: this.state.contractData,
+                eventBus: this.eventBus
+            }),
+
+            // Free mint notice
+            direction === 'sell' && freeMint && !isPhase2 &&
+                h('div', { className: 'free-mint-notice' },
+                    'You have 1,000,000 $EXEC you received for free that cannot be sold here.'
+                ),
+            direction === 'buy' && freeSupply > 0 && !freeMint && !isPhase2 &&
+                h('div', { className: 'free-mint-notice free-mint-bonus' },
+                    '1,000,000 $EXEC will be added to your purchase. Thank you.'
+                ),
+
+            // Quick fill buttons
+            h('div', { className: 'quick-fill-buttons-container' },
+                h('div', { className: 'quick-fill-buttons' },
+                    direction === 'buy' ? [
+                        h('button', { key: '0.0025', onClick: () => this.handleQuickFill('0.0025') }, '0.0025'),
+                        h('button', { key: '0.01', onClick: () => this.handleQuickFill('0.01') }, '0.01'),
+                        h('button', { key: '0.05', onClick: () => this.handleQuickFill('0.05') }, '0.05'),
+                        h('button', { key: '0.1', onClick: () => this.handleQuickFill('0.1') }, '0.1')
+                    ] : [
+                        h('button', { key: '25', onClick: () => this.handleQuickFill(null, 25) }, '25%'),
+                        h('button', { key: '50', onClick: () => this.handleQuickFill(null, 50) }, '50%'),
+                        h('button', { key: '75', onClick: () => this.handleQuickFill(null, 75) }, '75%'),
+                        h('button', { key: '100', onClick: () => this.handleQuickFill(null, 100) }, '100%')
+                    ]
+                )
+            ),
+
+            // Swap inputs
+            h(SwapInputs, {
+                direction,
+                ethAmount,
+                execAmount,
+                calculatingAmount,
+                freeMint,
+                balances,
+                isPhase2,
+                onInput: this.bind(this.handleInput)
+            }),
+
+            // Direction switch
+            h('div', { className: 'direction-switch-container' },
+                h('button', {
+                    className: 'direction-switch',
+                    onClick: this.bind(this.handleDirectionSwitch)
+                }, '\u2195')
+            ),
+
+            // Transaction options (Phase 1 only)
+            !isPhase2 && h(TransactionOptions, {
+                eventBus: this.eventBus,
+                swapDirection: direction,
+                isPhase2
+            }),
+
+            // Swap button
+            h(SwapButton, {
+                direction,
+                disabled: calculatingAmount,
+                onClick: this.bind(this.handleSwap)
+            })
+        );
+    }
+}