@monygroupcorp/micro-web3 1.2.3 → 1.3.0

package/src/components/Swap/SwapButton.js

@@ -1,10 +1,10 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 /**
  * SwapButton Component
- * 
+ *
  * Main swap action button with state management.
- * 
+ *
  * @class SwapButton
  * @extends Component
  */
@@ -16,36 +16,7 @@ export class SwapButton extends Component {
      * @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;
-                    }
-                }
-            }
-        }
+        super(props);
     }
 
     /**
@@ -59,23 +30,16 @@ export class SwapButton extends Component {
         }
     }
 
-    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>
-        `;
+        return h('button', {
+            className: 'swap-button',
+            disabled: disabled,
+            onClick: this.bind(this.handleClick)
+        }, buttonText);
     }
 }
 
 export default SwapButton;
-

package/src/components/Swap/SwapInputs.js

@@ -1,77 +1,8 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } 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);
-            }
-        }
     }
 
     /**
@@ -86,52 +17,59 @@ export class SwapInputs extends Component {
         }
     }
 
-    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 { direction, ethAmount, execAmount, calculatingAmount, freeMint, balances = { eth: '0', exec: '0' } } = 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>
-        `;
+        const topValue = direction === 'buy' ? ethAmount : execAmount;
+        const bottomValue = direction === 'buy'
+            ? (calculatingAmount ? 'Loading...' : execAmount)
+            : (calculatingAmount ? 'Loading...' : ethAmount);
+
+        const topSymbol = direction === 'buy' ? 'ETH' : '$EXEC';
+        const bottomSymbol = direction === 'buy' ? '$EXEC' : 'ETH';
+
+        const topBalance = direction === 'buy' ? `Balance: ${formattedEthBalance}` : availableExecBalance;
+        const bottomBalance = direction === 'buy' ? `Balance: ${formattedExecBalance}` : `Balance: ${formattedEthBalance}`;
+
+        return h('div', { className: 'swap-inputs' },
+            h('div', { className: 'input-container' },
+                h('input', {
+                    type: 'text',
+                    className: 'top-input',
+                    value: topValue,
+                    placeholder: '0.0',
+                    pattern: '^[0-9]*[.]?[0-9]*$',
+                    onInput: (e) => this.handleInput(e, 'top')
+                }),
+                h('div', { className: 'token-info' },
+                    h('span', { className: 'token-symbol' }, topSymbol),
+                    h('span', { className: 'token-balance' }, topBalance)
+                )
+            ),
+            h('div', { className: 'direction-switch-slot' }),
+            h('div', { className: 'input-container' },
+                h('input', {
+                    type: 'text',
+                    className: 'bottom-input',
+                    value: bottomValue,
+                    placeholder: '0.0',
+                    pattern: '^[0-9]*[.]?[0-9]*$',
+                    onInput: (e) => this.handleInput(e, 'bottom')
+                }),
+                h('div', { className: 'token-info' },
+                    h('span', { className: 'token-symbol' }, bottomSymbol),
+                    h('span', { className: 'token-balance' }, bottomBalance)
+                )
+            )
+        );
     }
 }
 
 export default SwapInputs;
-