@monygroupcorp/micro-web3 1.2.4 → 1.3.0

package/src/components/Modal/ApprovalModal.js

@@ -1,72 +1,39 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 import { MessagePopup } from '../Util/MessagePopup.js';
 
 export class ApprovalModal extends Component {
     constructor(props) {
         super(props);
         console.log('[DEBUG] ApproveModal constructor called with amount:', props.amount, 'and address:', props.userAddress);
-        
+
         this.blockchainService = props.blockchainService;
         this.eventBus = props.eventBus;
         this.amount = props.amount;
         this.userAddress = props.userAddress;
 
         this.messagePopup = new MessagePopup('approve-status');
-        this.handleApprove = this.handleApprove.bind(this);
-        this.handleClose = this.handleClose.bind(this);
         this.isClosing = false;
         this.modalId = Math.random().toString(36).substring(2, 9);
+
+        this.state = {
+            status: 'idle', // idle, pending, success, error
+            statusMessage: ''
+        };
+
         console.log(`[DEBUG] ApproveModal instance created with ID: ${this.modalId}`);
     }
 
-    onMount() {
+    didMount() {
         console.log(`[DEBUG-${this.modalId}] ApproveModal mounted to DOM`);
-        super.onMount();
-        this.setupEventListeners();
-    }
-
-    setupEventListeners() {
-        const approveButton = this.element.querySelector('.approve-button');
-        const closeButton = this.element.querySelector('.approve-modal-close');
-        const overlay = this.element.querySelector('.approve-modal-overlay');
-        
-        approveButton?.addEventListener('click', this.handleApprove);
-        closeButton?.addEventListener('click', this.handleClose);
-        overlay?.addEventListener('click', (e) => {
-            if (e.target === overlay) this.handleClose();
-        });
     }
 
     async handleApprove() {
         console.log(`[DEBUG-${this.modalId}] Approve button clicked`);
         try {
-            // Disable the button immediately to prevent multiple clicks
-            const approveButton = this.element.querySelector('.approve-button');
-            if (!approveButton) {
-                console.error(`[DEBUG-${this.modalId}] Approve button not found in the modal`);
-                return;
-            }
-            
-            console.log(`[DEBUG-${this.modalId}] Approve button found, disabling and updating text`);
-            const statusMessage = this.element.querySelector('.status-message') || 
-                document.createElement('div');
-            
-            if (!statusMessage.classList.contains('status-message')) {
-                statusMessage.className = 'status-message';
-                const modalContent = this.element.querySelector('.approve-modal-content');
-                if (modalContent) {
-                    console.log(`[DEBUG-${this.modalId}] Adding status message to modal content`);
-                    modalContent.appendChild(statusMessage);
-                } else {
-                    console.error(`[DEBUG-${this.modalId}] Modal content not found`);
-                }
-            }
-            
-            statusMessage.textContent = 'Waiting for wallet confirmation...';
-            statusMessage.className = 'status-message pending';
-            
-            approveButton.disabled = true;
-            approveButton.textContent = 'Approving...';
+            this.setState({
+                status: 'pending',
+                statusMessage: 'Waiting for wallet confirmation...'
+            });
 
             // Get user address if not provided
             if (!this.userAddress) {
@@ -91,16 +58,16 @@ export class ApprovalModal extends Component {
             console.log(`[DEBUG-${this.modalId}] Parsing amount: ${this.amount}`);
             const parsedAmount = this.blockchainService.parseExec(this.amount);
             console.log(`[DEBUG-${this.modalId}] Parsed amount: ${parsedAmount}`);
-            
+
             // Get router address
             const routerAddress = this.blockchainService.swapRouter?.address || this.blockchainService.swapRouter;
             console.log(`[DEBUG-${this.modalId}] Router address for approval: ${routerAddress}`);
-            
+
             // Call the standard setApproval method
             console.log(`[DEBUG-${this.modalId}] Approving ${this.amount} EXEC tokens from ${this.userAddress} to ${routerAddress}`);
-            
-            statusMessage.textContent = 'Transaction submitted, waiting for confirmation...';
-            
+
+            this.setState({ statusMessage: 'Transaction submitted, waiting for confirmation...' });
+
             // Send the approval transaction
             console.log(`[DEBUG-${this.modalId}] Calling blockchainService.setApproval`);
             try {
@@ -110,58 +77,43 @@ export class ApprovalModal extends Component {
                 console.error(`[DEBUG-${this.modalId}] Transaction error:`, txError);
                 throw txError;
             }
-            
+
             // Update status message
-            statusMessage.textContent = 'Approval successful!';
-            statusMessage.className = 'status-message success';
-            
+            this.setState({
+                status: 'success',
+                statusMessage: 'Approval successful!'
+            });
+
             // Wait briefly to show success message
             console.log(`[DEBUG-${this.modalId}] Approval successful, waiting before emitting event`);
             await new Promise(resolve => setTimeout(resolve, 1500));
-            
+
             // Emit success event
             console.log(`[DEBUG-${this.modalId}] Emitting approve:complete event`);
             this.eventBus.emit('approve:complete');
-            
+
             // Close modal
             console.log(`[DEBUG-${this.modalId}] Calling handleClose after successful approval`);
             this.handleClose();
 
         } catch (error) {
             console.error(`[DEBUG-${this.modalId}] Approval failed:`, error);
-            
+
             let errorMessage = error.message;
             if (errorMessage.includes('Contract call')) {
                 const parts = errorMessage.split(': ');
                 errorMessage = parts[parts.length - 1];
             }
-            
-            // Update status message in the modal
-            const statusMessage = this.element.querySelector('.status-message') || 
-                document.createElement('div');
-            
-            if (!statusMessage.classList.contains('status-message')) {
-                statusMessage.className = 'status-message';
-                const modalContent = this.element.querySelector('.approve-modal-content');
-                if (modalContent) {
-                    modalContent.appendChild(statusMessage);
-                }
-            }
-            
-            statusMessage.textContent = `Error: ${errorMessage}`;
-            statusMessage.className = 'status-message error';
-            
+
+            this.setState({
+                status: 'error',
+                statusMessage: `Error: ${errorMessage}`
+            });
+
             this.messagePopup.error(
                 `Approval Failed: ${errorMessage}`,
                 'Transaction Failed'
             );
-
-            // Re-enable button
-            const approveButton = this.element.querySelector('.approve-button');
-            if (approveButton) {
-                approveButton.disabled = false;
-                approveButton.textContent = 'Approve';
-            }
         }
     }
 
@@ -173,9 +125,9 @@ export class ApprovalModal extends Component {
             return;
         }
         this.isClosing = true;
-        
+
         console.log(`[DEBUG-${this.modalId}] Closing approval modal`);
-        
+
         try {
             // Remove the modal from the DOM
             if (this.element && this.element.parentNode) {
@@ -184,11 +136,11 @@ export class ApprovalModal extends Component {
             } else {
                 console.warn(`[DEBUG-${this.modalId}] Modal element or parent not found during close`);
             }
-            
+
             // Emit a closed event
             console.log(`[DEBUG-${this.modalId}] Emitting approveModal:closed event`);
             this.eventBus.emit('approveModal:closed');
-            
+
             // Clean up any resources
             console.log(`[DEBUG-${this.modalId}] Calling dispose method`);
             this.dispose();
@@ -196,19 +148,11 @@ export class ApprovalModal extends Component {
             console.error(`[DEBUG-${this.modalId}] Error closing approval modal:`, error);
         }
     }
-    
+
     // Properly dispose of the component
     dispose() {
         console.log(`[DEBUG-${this.modalId}] Disposing component resources`);
-        
-        // Remove event listeners
-        const approveButton = this.element?.querySelector('.approve-button');
-        const closeButton = this.element?.querySelector('.approve-modal-close');
-        const overlay = this.element?.querySelector('.approve-modal-overlay');
-        
-        approveButton?.removeEventListener('click', this.handleApprove);
-        closeButton?.removeEventListener('click', this.handleClose);
-        
+
         // Clear references
         this.isClosing = true;
         this.blockchainService = null;
@@ -219,67 +163,64 @@ export class ApprovalModal extends Component {
     show() {
         console.log(`[DEBUG-${this.modalId}] Show method called`);
         this.isClosing = false;
-        this.element.style.display = 'block';
+        if (this.element) {
+            this.element.style.display = 'block';
+        }
         console.log(`[DEBUG-${this.modalId}] Modal set to display:block`);
     }
 
     hide() {
         console.log(`[DEBUG-${this.modalId}] Hide method called`);
-        this.element.style.display = 'none';
-    }
-
-    events() {
-        console.log(`[DEBUG-${this.modalId}] Setting up event handlers`);
-        return {
-            'click .approve-button': (e) => {
-                console.log(`[DEBUG-${this.modalId}] Approve button clicked, calling handleApprove`);
-                this.handleApprove();
-            },
-            'click .approve-modal-close': (e) => {
-                console.log(`[DEBUG-${this.modalId}] Close button clicked, calling handleClose`);
-                this.handleClose();
-            },
-            'click .approve-modal-overlay': (e) => {
-                console.log(`[DEBUG-${this.modalId}] Overlay clicked`, e.target, e.currentTarget);
-                if (e.target === e.currentTarget) {
-                    console.log(`[DEBUG-${this.modalId}] Overlay direct click detected, calling handleClose`);
-                    this.handleClose();
-                }
-            }
-        };
+        if (this.element) {
+            this.element.style.display = 'none';
+        }
     }
 
     render() {
         // Get router address directly from the blockchain service instead of the store
         const routerAddress = this.blockchainService.swapRouter?.address || this.blockchainService.swapRouter;
         const formattedAmount = parseInt(this.amount).toLocaleString();
+        const { status, statusMessage } = this.state;
+        const isApproving = status === 'pending';
 
-        return `
-            <div class="approve-modal-overlay">
-                <div class="approve-modal">
-                    <button class="approve-modal-close">&times;</button>
-                    <div class="approve-modal-content">
-                        <h2>Approve Router</h2>
-                        <p>Before selling your $EXEC tokens, you need to approve the router contract to spend them.</p>
-                        
-                        <div class="approve-details">
-                            <div class="approve-info">
-                                <span class="label">Amount to Approve:</span>
-                                <span class="value">${formattedAmount} $EXEC</span>
-                            </div>
-                            <div class="approve-info">
-                                <span class="label">Router Address:</span>
-                                <span class="value">${routerAddress}</span>
-                            </div>
-                        </div>
-
-                        <button class="approve-button">
-                            Approve
-                        </button>
-                    </div>
-                </div>
-            </div>
-        `;
+        return h('div', {
+            className: 'approve-modal-overlay',
+            onClick: (e) => {
+                if (e.target === e.currentTarget) this.handleClose();
+            }
+        },
+            h('div', { className: 'approve-modal' },
+                h('button', {
+                    className: 'approve-modal-close',
+                    onClick: this.bind(this.handleClose)
+                }, '\u00D7'),
+                h('div', { className: 'approve-modal-content' },
+                    h('h2', null, 'Approve Router'),
+                    h('p', null, 'Before selling your $EXEC tokens, you need to approve the router contract to spend them.'),
+
+                    h('div', { className: 'approve-details' },
+                        h('div', { className: 'approve-info' },
+                            h('span', { className: 'label' }, 'Amount to Approve:'),
+                            h('span', { className: 'value' }, `${formattedAmount} $EXEC`)
+                        ),
+                        h('div', { className: 'approve-info' },
+                            h('span', { className: 'label' }, 'Router Address:'),
+                            h('span', { className: 'value' }, routerAddress)
+                        )
+                    ),
+
+                    statusMessage && h('div', {
+                        className: `status-message ${status}`
+                    }, statusMessage),
+
+                    h('button', {
+                        className: 'approve-button',
+                        disabled: isApproving,
+                        onClick: this.bind(this.handleApprove)
+                    }, isApproving ? 'Approving...' : 'Approve')
+                )
+            )
+        );
     }
 
     static get styles() {
@@ -370,7 +311,7 @@ export class ApprovalModal extends Component {
             .approve-button:hover:not(:disabled) {
                 background-color: #0056b3;
             }
-            
+
             .status-message {
                 margin-top: 12px;
                 padding: 10px;
@@ -378,21 +319,23 @@ export class ApprovalModal extends Component {
                 text-align: center;
                 font-size: 14px;
             }
-            
+
             .status-message.pending {
                 background-color: #2c3e50;
                 color: #f1c40f;
             }
-            
+
             .status-message.success {
                 background-color: #27ae60;
                 color: white;
             }
-            
+
             .status-message.error {
                 background-color: #c0392b;
                 color: white;
             }
         `;
     }
-}export default ApprovalModal;
+}
+
+export default ApprovalModal;