@monygroupcorp/micro-web3 0.1.0

package/src/components/Swap/TransactionOptions.js

@@ -0,0 +1,238 @@
+import { Component } 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 || '',
+            isValid: props.isValid !== undefined ? props.isValid : true,
+            nftBalance: props.nftBalance || 0,
+            swapDirection: props.swapDirection || 'buy',
+            lastValidationState: true,
+            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' });
+        });
+        
+        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', {
+                isValid: newIsValid,
+                errors: this.getValidationErrors()
+            });
+        }
+    }
+
+    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');
+        }
+
+        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();
+        
+        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();
+        
+        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 });
+        }
+    }
+
+    template() {
+        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();
+    }
+} 

package/src/components/Util/MessagePopup.js

@@ -0,0 +1,159 @@
+import { Component } from '@monygroupcorp/microact';
+
+export class MessagePopup extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            messages: []
+        };
+    }
+
+    show(options) {
+        const { title = '', message = '', type = 'info', duration = 5000 } = options;
+        const id = Date.now() + Math.random();
+        
+        const newMessage = { id, title, message, type };
+        this.setState({ messages: [...this.state.messages, newMessage] });
+
+        if (duration > 0) {
+            setTimeout(() => this.close(id), duration);
+        }
+    }
+
+    close(id) {
+        const messages = this.state.messages.filter(msg => msg.id !== id);
+        this.setState({ messages });
+    }
+
+    error(message, title = 'Error') {
+        this.show({ title, message, type: 'error' });
+    }
+
+    success(message, title = 'Success') {
+        this.show({ title, message, type: 'success' });
+    }
+
+    warning(message, title = 'Warning') {
+        this.show({ title, message, type: 'warning' });
+    }
+
+    info(message, title = 'Info') {
+        this.show({ title, message, type: 'info' });
+    }
+
+    render() {
+        return `
+            <div id="message-popup-container">
+                ${this.state.messages.map(msg => `
+                    <div class="message-popup ${msg.type}" data-id="${msg.id}">
+                        <div class="message-content">
+                            ${msg.title ? `<div class="message-title">${msg.title}</div>` : ''}
+                            <div class="message-text">${msg.message}</div>
+                        </div>
+                        <button class="close-button" data-id="${msg.id}">&times;</button>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    events() {
+        return {
+            'click .close-button': (e) => {
+                const id = parseFloat(e.target.dataset.id);
+                this.close(id);
+            }
+        };
+    }
+
+    static get styles() {
+        return `
+            #message-popup-container {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 10000;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .message-popup {
+                background: #ffffff;
+                border-radius: 8px;
+                padding: 15px 20px;
+                min-width: 300px;
+                max-width: 400px;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-start;
+                animation: slideIn 0.3s ease;
+                border-left: 4px solid #2196F3;
+            }
+
+            .message-popup.error {
+                border-left-color: #f44336;
+            }
+
+            .message-popup.success {
+                border-left-color: #4CAF50;
+            }
+
+            .message-popup.warning {
+                border-left-color: #ff9800;
+            }
+
+            .message-content {
+                flex-grow: 1;
+                margin-right: 10px;
+            }
+
+            .message-title {
+                font-weight: bold;
+                margin-bottom: 5px;
+            }
+
+            .message-text {
+                font-size: 14px;
+                color: #666;
+            }
+
+            .close-button {
+                background: none;
+                border: none;
+                color: #999;
+                cursor: pointer;
+                font-size: 20px;
+                padding: 0;
+                line-height: 1;
+            }
+
+            .close-button:hover {
+                color: #666;
+            }
+
+            @keyframes slideIn {
+                from {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+                to {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+            }
+
+            @keyframes fadeOut {
+                from {
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+                to {
+                    transform: translateX(100%);
+                    opacity: 0;
+                }
+            }
+        `;
+    }
+} 

package/src/components/Wallet/WalletModal.js

@@ -0,0 +1,69 @@
+import { Component } from '@monygroupcorp/microact';
+
+export class WalletModal extends Component {
+    constructor(props) {
+        super(props);
+        this.providerMap = props.providerMap;
+        this.walletIcons = props.walletIcons;
+        this.onWalletSelected = props.onWalletSelected;
+        
+        this.state = {
+            isVisible: false,
+        };
+    }
+
+    events() {
+        return {
+            'click .wallet-modal-close': this.hide,
+            'click .wallet-modal-overlay': (e) => {
+                if (e.target === e.currentTarget) this.hide();
+            },
+            'click .wallet-option': async (e) => {
+                const walletType = e.currentTarget.dataset.wallet;
+                if (this.onWalletSelected) {
+                    await this.onWalletSelected(walletType);
+                }
+                this.hide();
+            }
+        };
+    }
+
+    show() {
+        this.setState({ isVisible: true });
+    }
+
+    hide() {
+        this.setState({ isVisible: false });
+    }
+
+    render() {
+        if (!this.state.isVisible) {
+            return '<div class="wallet-modal-container" style="display: none;"></div>';
+        }
+
+        const walletOptions = Object.keys(this.providerMap).map(walletType => `
+            <button class="wallet-option" data-wallet="${walletType}">
+                <img src="${this.walletIcons[walletType]}" alt="${walletType}">
+                <span>${walletType.charAt(0).toUpperCase() + walletType.slice(1)}</span>
+            </button>
+        `).join('');
+
+        return `
+            <div class="wallet-modal-container">
+                <div class="wallet-modal-overlay">
+                    <div class="wallet-modal">
+                        <div class="wallet-modal-header">
+                            <h3>Select Your Wallet</h3>
+                            <button class="wallet-modal-close">&times;</button>
+                        </div>
+                        <div class="wallet-options">
+                            ${walletOptions}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+export default WalletModal;