@monygroupcorp/micro-web3 0.1.0

package/src/components/Swap/SwapButton.js

@@ -0,0 +1,81 @@
+import { Component } from '@monygroupcorp/microact';
+
+/**
+ * SwapButton Component
+ * 
+ * Main swap action button with state management.
+ * 
+ * @class SwapButton
+ * @extends Component
+ */
+export class SwapButton extends Component {
+    /**
+     * @param {Object} props - Component props
+     * @param {string} props.direction - Current swap direction ('buy' or 'sell')
+     * @param {boolean} props.disabled - Whether button should be disabled
+     * @param {Function} props.onClick - Callback when button is clicked
+     */
+    constructor(props = {}) {
+        super();
+        this.props = props;
+    }
+
+    /**
+     * Update component props
+     * @param {Object} newProps - New props to merge
+     */
+    updateProps(newProps) {
+        const oldProps = { ...this.props };
+        this.props = { ...this.props, ...newProps };
+        
+        // Only update if the button text would actually change
+        const oldText = oldProps.direction === 'buy' ? 'Buy $EXEC' : 'Sell $EXEC';
+        const newText = this.props.direction === 'buy' ? 'Buy $EXEC' : 'Sell $EXEC';
+        
+        if (oldText !== newText || oldProps.disabled !== this.props.disabled) {
+            // Only update if something actually changed
+            if (this.element) {
+                const button = this.element.querySelector('.swap-button');
+                if (button) {
+                    button.textContent = newText;
+                    if (this.props.disabled) {
+                        button.disabled = true;
+                    } else {
+                        button.disabled = false;
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Handle button click
+     * @param {Event} e - Click event
+     */
+    handleClick(e) {
+        e.preventDefault();
+        if (!this.props.disabled && this.props.onClick) {
+            this.props.onClick(e);
+        }
+    }
+
+    events() {
+        return {
+            'click .swap-button': (e) => this.handleClick(e)
+        };
+    }
+
+    render() {
+        const { direction, disabled } = this.props;
+        const buttonText = direction === 'buy' ? 'Buy $EXEC' : 'Sell $EXEC';
+
+        return `
+            <button class="swap-button" ${disabled ? 'disabled' : ''}>
+                ${buttonText}
+            </button>
+        `;
+    }
+}
+
+export default SwapButton;
+

package/src/components/Swap/SwapInputs.js

@@ -0,0 +1,137 @@
+import { Component } from '@monygroupcorp/microact';
+
+export class SwapInputs extends Component {
+    constructor(props = {}) {
+        super(props);
+        this.props = {
+            balances: { eth: '0', exec: '0' },
+            ...props
+        };
+    }
+
+    /**
+     * Update component props
+     * @param {Object} newProps - New props to merge
+     */
+    updateProps(newProps) {
+        this.props = { ...this.props, ...newProps };
+        // Don't call update() directly as it will destroy input elements and lose focus
+        // Instead, update only the parts that changed
+        this.updateSelectively(newProps);
+    }
+    
+    /**
+     * Update only specific parts of the UI without destroying inputs
+     * @param {Object} changedProps - Props that changed
+     */
+    updateSelectively(changedProps) {
+        if (!this.element) return;
+        
+        if (changedProps.direction !== undefined || changedProps.freeMint !== undefined || changedProps.balances !== undefined) {
+            const { balances, direction, freeMint } = this.props;
+            const formattedEthBalance = parseFloat(balances.eth || 0).toFixed(6);
+            const formattedExecBalance = parseInt(balances.exec || 0).toLocaleString();
+            const availableExecBalance = direction === 'sell' && freeMint
+                ? `Available: ${(parseInt(balances.exec || 0) - 1000000).toLocaleString()}`
+                : `Balance: ${formattedExecBalance}`;
+            
+            const balanceDisplays = this.element.querySelectorAll('.token-balance');
+            balanceDisplays.forEach((display, index) => {
+                const isTopInput = index === 0;
+                if (direction === 'buy') {
+                    display.textContent = isTopInput ? `Balance: ${formattedEthBalance}` : `Balance: ${formattedExecBalance}`;
+                } else {
+                    display.textContent = isTopInput ? availableExecBalance : `Balance: ${formattedEthBalance}`;
+                }
+            });
+            
+            const tokenSymbols = this.element.querySelectorAll('.token-symbol');
+            tokenSymbols.forEach((symbol, index) => {
+                const isTopInput = index === 0;
+                if (direction === 'buy') {
+                    symbol.textContent = isTopInput ? 'ETH' : '$EXEC';
+                } else {
+                    symbol.textContent = isTopInput ? '$EXEC' : 'ETH';
+                }
+            });
+        }
+        
+        const topInput = this.element.querySelector('.top-input');
+        const bottomInput = this.element.querySelector('.bottom-input');
+        
+        if (changedProps.calculatingAmount !== undefined || changedProps.execAmount !== undefined || changedProps.ethAmount !== undefined) {
+            const { direction, ethAmount, execAmount, calculatingAmount } = this.props;
+            
+            if (topInput && !topInput.matches(':focus')) {
+                topInput.value = direction === 'buy' ? ethAmount : execAmount;
+            }
+            
+            if (bottomInput && !bottomInput.matches(':focus')) {
+                bottomInput.value = direction === 'buy' 
+                    ? (calculatingAmount ? 'Loading...' : execAmount)
+                    : (calculatingAmount ? 'Loading...' : ethAmount);
+            }
+        }
+    }
+
+    /**
+     * Handle input change events
+     * @param {Event} e - Input event
+     * @param {string} inputType - 'top' or 'bottom'
+     */
+    handleInput(e, inputType) {
+        const value = e.target.value;
+        if (this.props.onInput) {
+            this.props.onInput(inputType, value);
+        }
+    }
+
+    events() {
+        return {
+            'input .top-input': (e) => this.handleInput(e, 'top'),
+            'input .bottom-input': (e) => this.handleInput(e, 'bottom')
+        };
+    }
+
+    render() {
+        const { direction, ethAmount, execAmount, calculatingAmount, freeMint, balances } = this.props;
+        
+        const formattedEthBalance = parseFloat(balances.eth || 0).toFixed(6);
+        const formattedExecBalance = parseInt(balances.exec || 0).toLocaleString();
+        
+        const availableExecBalance = direction === 'sell' && freeMint
+            ? `Available: ${(parseInt(balances.exec || 0) - 1000000).toLocaleString()}`
+            : `Balance: ${formattedExecBalance}`;
+
+        return `
+            <div class="swap-inputs">
+                <div class="input-container">
+                    <input type="text" 
+                           class="top-input" 
+                           value="${direction === 'buy' ? ethAmount : execAmount}" 
+                           placeholder="0.0"
+                           pattern="^[0-9]*[.]?[0-9]*$">
+                    <div class="token-info">
+                        <span class="token-symbol">${direction === 'buy' ? 'ETH' : '$EXEC'}</span>
+                        <span class="token-balance">Balance: ${direction === 'buy' ? formattedEthBalance : availableExecBalance}</span>
+                    </div>
+                </div>
+                <div class="direction-switch-slot"></div>
+                <div class="input-container">
+                    <input type="text" 
+                           class="bottom-input" 
+                           value="${direction === 'buy' ? (calculatingAmount ? 'Loading...' : execAmount) : (calculatingAmount ? 'Loading...' : ethAmount)}" 
+                           placeholder="0.0"
+                           pattern="^[0-9]*[.]?[0-9]*$">
+                    <div class="token-info">
+                        <span class="token-symbol">${direction === 'buy' ? '$EXEC' : 'ETH'}</span>
+                        <span class="token-balance">Balance: ${direction === 'buy' ? formattedExecBalance : formattedEthBalance}</span>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+export default SwapInputs;
+