@monygroupcorp/micro-web3 1.2.4 → 1.3.0

package/src/components/Swap/TransactionOptions.js

@@ -1,10 +1,9 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 export class TransactionOptions extends Component {
     constructor(props) {
         super(props);
-        this.eventBus = props.eventBus;
-        
+
         this.state = {
             nftMintingEnabled: props.nftMintingEnabled || false,
             message: props.message || '',
@@ -15,79 +14,30 @@ export class TransactionOptions extends Component {
             isPhase2: props.isPhase2 === null ? null : props.isPhase2
         };
 
-        this.handleMessageInput = this.handleMessageInput.bind(this);
-        this.handleNFTToggle = this.handleNFTToggle.bind(this);
-        this.handleStoreUpdate = this.handleStoreUpdate.bind(this);
-        
         this.updateTimer = null;
     }
 
-    onMount() {
-        this.contractDataUnsubscribe = this.eventBus.on('contractData:updated', (data) => {
-            this.updateProps({ isPhase2: data.liquidityPool && data.liquidityPool !== '0x0000000000000000000000000000000000000000' });
+    didMount() {
+        this.subscribe('contractData:updated', (data) => {
+            const isPhase2 = data.liquidityPool && data.liquidityPool !== '0x0000000000000000000000000000000000000000';
+            if (this.state.isPhase2 !== isPhase2) {
+                this.setState({ isPhase2 });
+            }
         });
-        
-        this.addEventListeners();
-        this.updateElements();
-    }
-
-    onUnmount() {
-        if (this.contractDataUnsubscribe) this.contractDataUnsubscribe();
-        this.removeEventListeners();
-    }
-
-    updateProps(newProps) {
-        const newState = { ...this.state, ...newProps };
-        const shouldUpdate = this.state.isPhase2 !== newState.isPhase2 ||
-                             this.state.swapDirection !== newState.swapDirection ||
-                             this.state.nftBalance !== newState.nftBalance;
-
-        this.setState(newState);
-
-        if (shouldUpdate) {
-            this.validateTransaction();
-            this.update(); // Re-render if phase or other critical props change
-        } else {
-            this.updateElements(); // Just update dynamic parts
-        }
-    }
-
-    addEventListeners() {
-        const messageInput = this.element.querySelector('#messageInput');
-        const nftToggle = this.element.querySelector('#nftToggle');
-
-        if (messageInput) {
-            this._messageInput = messageInput;
-            messageInput.addEventListener('input', this.handleMessageInput);
-        }
-        if (nftToggle) {
-            this._nftToggle = nftToggle;
-            nftToggle.addEventListener('change', this.handleNFTToggle);
-        }
-    }
-
-    removeEventListeners() {
-        
-        if (this._messageInput) {
-            this._messageInput.removeEventListener('input', this.handleMessageInput);
-        }
-
-        if (this._nftToggle) {
-            this._nftToggle.removeEventListener('change', this.handleNFTToggle);
-        }
     }
 
     validateTransaction() {
         const isMessageValid = this.state.message.length <= 140;
         const isNFTValid = !this.state.nftMintingEnabled || this.state.nftBalance < 10;
         const newIsValid = isMessageValid && isNFTValid;
-        
-        // Only emit if validation state has changed
+
         if (this.state.lastValidationState !== newIsValid) {
-            this.state.lastValidationState = newIsValid;
-            this.state.isValid = newIsValid;
-            
-            this.eventBus.emit('transactionValidation', {
+            this.setState({
+                lastValidationState: newIsValid,
+                isValid: newIsValid
+            });
+
+            this.props.eventBus?.emit('transactionValidation', {
                 isValid: newIsValid,
                 errors: this.getValidationErrors()
             });
@@ -96,11 +46,11 @@ export class TransactionOptions extends Component {
 
     getValidationErrors() {
         const errors = [];
-        
+
         if (this.state.message.length > 140) {
             errors.push('Message must be 140 characters or less');
         }
-        
+
         if (this.state.nftMintingEnabled && this.state.nftBalance >= 10) {
             errors.push('Cannot mint more than 10 NFTs');
         }
@@ -108,131 +58,72 @@ export class TransactionOptions extends Component {
         return errors;
     }
 
-    updateElements() {
-        
-        // Update message input if it's not focused
-        const messageInput = this.element.querySelector('#messageInput');
-        const nftToggle = this.element.querySelector('#nftToggle');
-
-        if (messageInput && !messageInput.matches(':focus')) {
-            messageInput.value = this.state.message;
-        }
-
-        if (nftToggle) {
-            nftToggle.checked = this.state.nftMintingEnabled;
-        }
-
-        // Re-attach event listeners after updating elements
-        this.removeEventListeners();
-        this.addEventListeners();
-
-        // Update character count
-        const characterCount = this.element.querySelector('.character-count');
-        if (characterCount) {
-            characterCount.textContent = `${this.state.message.length}/140`;
-            characterCount.className = `character-count ${this.state.message.length > 140 ? 'error' : ''}`;
-        }
-
-        // Update validation status
-        const validationStatus = this.element.querySelector('.validation-status');
-        if (validationStatus) {
-            validationStatus.className = `validation-status ${this.state.isValid ? 'valid' : 'invalid'}`;
-            validationStatus.innerHTML = this.getValidationErrors()
-                .map(error => `<p class="error">${error}</p>`)
-                .join('');
-        }
-    }
-
-    handleMessageInput(event) {
-        const newMessage = event.target.value || '';
-        
-        // Update state without triggering a re-render
-        this.state = {
-            ...this.state,
-            message: newMessage
-        };
-        
-        // Update elements and ensure listeners
-        this.updateElements();
-        
+    handleMessageInput(e) {
+        const newMessage = e.target.value || '';
+        this.setState({ message: newMessage });
+        this.validateTransaction();
         this.emitStateUpdate();
     }
 
-    handleNFTToggle(event) {
-        const isEnabled = event.target.checked;
-        
-        // Update state without triggering a re-render
-        this.state = {
-            ...this.state,
-            nftMintingEnabled: isEnabled
-        };
-        
-        // Update elements and ensure listeners
-        this.updateElements();
-        
+    handleNFTToggle(e) {
+        const isEnabled = e.target.checked;
+        this.setState({ nftMintingEnabled: isEnabled });
+        this.validateTransaction();
         this.emitStateUpdate();
     }
 
-    // New method to emit state updates
     emitStateUpdate() {
         const updatePayload = {
             message: this.state.message,
             nftMintingEnabled: this.state.nftMintingEnabled
         };
-        this.eventBus.emit('transactionOptions:update', updatePayload);
-    }
-
-    checkPhase2Status() {
-        const { isPhase2 } = this.state;
-        if (isPhase2 === null) {
-            // Phase not yet determined
-            return;
-        }
-        if (this.state.isPhase2 !== isPhase2) {
-            this.setState({ isPhase2 });
-        }
+        this.props.eventBus?.emit('transactionOptions:update', updatePayload);
     }
 
-    template() {
+    render() {
         const { nftMintingEnabled, message, isValid, isPhase2, swapDirection } = this.state;
 
-        if (isPhase2 === null) {
-            return '';
-        }
-        if (isPhase2) {
-            return ''; // No options in Phase 2
-        }
-
-        return `
-            <div class="transaction-options">
-                <div class="option-group ${swapDirection === 'sell' ? 'hidden' : ''}">
-                    <label class="nft-toggle">
-                        <input type="checkbox" 
-                               ${nftMintingEnabled ? 'checked' : ''} 
-                               id="nftToggle">
-                        Mint NFT with transaction
-                    </label>
-                </div>
-                
-                <div class="option-group">
-                    <label for="messageInput">Transaction Message</label>
-                    <textarea id="messageInput" 
-                             maxlength="140" 
-                             placeholder="Enter optional message..."
-                             >${message}</textarea>
-                    <span class="character-count ${message.length > 140 ? 'error' : ''}">
-                        ${message.length}/140
-                    </span>
-                </div>
-
-                <div class="validation-status ${isValid ? 'valid' : 'invalid'}">
-                    ${this.getValidationErrors().map(error => `<p class="error">${error}</p>`).join('')}
-                </div>
-            </div>
-        `;
-    }
-
-    render() {
-        return this.template();
+        if (isPhase2 === null || isPhase2) {
+            return h('div', { className: 'transaction-options empty' });
+        }
+
+        const errors = this.getValidationErrors();
+
+        return h('div', { className: 'transaction-options' },
+            h('div', {
+                className: `option-group ${swapDirection === 'sell' ? 'hidden' : ''}`
+            },
+                h('label', { className: 'nft-toggle' },
+                    h('input', {
+                        type: 'checkbox',
+                        checked: nftMintingEnabled,
+                        onChange: this.bind(this.handleNFTToggle)
+                    }),
+                    'Mint NFT with transaction'
+                )
+            ),
+
+            h('div', { className: 'option-group' },
+                h('label', { htmlFor: 'messageInput' }, 'Transaction Message'),
+                h('textarea', {
+                    id: 'messageInput',
+                    maxLength: 140,
+                    placeholder: 'Enter optional message...',
+                    value: message,
+                    onInput: this.bind(this.handleMessageInput)
+                }),
+                h('span', {
+                    className: `character-count ${message.length > 140 ? 'error' : ''}`
+                }, `${message.length}/140`)
+            ),
+
+            h('div', {
+                className: `validation-status ${isValid ? 'valid' : 'invalid'}`
+            },
+                errors.map((error, index) =>
+                    h('p', { key: index, className: 'error' }, error)
+                )
+            )
+        );
     }
-} 
+}