@monygroupcorp/micro-web3 1.2.4 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monygroupcorp/micro-web3",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.",
   "main": "dist/micro-web3.cjs",
   "module": "dist/micro-web3.esm.js",
@@ -20,7 +20,7 @@
   "author": "arthurt <mony.group.corporation@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "@monygroupcorp/microact": ">=0.1.0"
+    "@monygroupcorp/microact": ">=0.2.0"
   },
   "dependencies": {
     "ethers": "^5.7.2"

package/src/components/BondingCurve/BondingCurve.js

@@ -1,4 +1,4 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 export class BondingCurve extends Component {
     constructor(props) {
@@ -14,13 +14,12 @@ export class BondingCurve extends Component {
             liquidityPool: props.contractData?.liquidityPool || null,
             chainId: props.chainId || null
         };
+        this.canvasRef = null;
     }
 
-    onMount() {
-        this.unsubscribeEvents = [
-            this.eventBus.on('contractData:updated', (data) => this.updateProps({ contractData: data })),
-            this.eventBus.on('price:updated', (data) => this.updateProps({ price: data.price }))
-        ];
+    didMount() {
+        this.subscribe('contractData:updated', (data) => this.handleContractDataUpdate(data));
+        this.subscribe('price:updated', (data) => this.handlePriceUpdate(data));
 
         this.resizeHandler = () => requestAnimationFrame(() => this.drawCurve());
         window.addEventListener('resize', this.resizeHandler);
@@ -32,40 +31,39 @@ export class BondingCurve extends Component {
         }
     }
 
-    updateProps(newProps) {
-        const newState = { ...this.state };
-        let shouldUpdate = false;
-
-        if (newProps.contractData) {
-            const { contractData } = newProps;
-            newState.totalBondingSupply = contractData.totalBondingSupply;
-            newState.totalMessages = contractData.totalMessages;
-            newState.totalNFTs = contractData.totalNFTs;
-            newState.contractEthBalance = contractData.contractEthBalance;
-            if (newState.liquidityPool !== contractData.liquidityPool) {
-                newState.liquidityPool = contractData.liquidityPool;
-                shouldUpdate = true; // Phase changed
-            }
-            newState.dataReady = true;
-            shouldUpdate = true;
-        }
-        if (newProps.price !== undefined) {
-            newState.currentPrice = newProps.price;
-            shouldUpdate = true;
+    willUnmount() {
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
         }
-        if (newProps.chainId !== undefined) {
-            newState.chainId = newProps.chainId;
-            shouldUpdate = true;
+    }
+
+    handleContractDataUpdate(contractData) {
+        const newState = {
+            totalBondingSupply: contractData.totalBondingSupply,
+            totalMessages: contractData.totalMessages,
+            totalNFTs: contractData.totalNFTs,
+            contractEthBalance: contractData.contractEthBalance,
+            dataReady: true
+        };
+
+        const oldLiquidityPool = this.state.liquidityPool;
+        if (oldLiquidityPool !== contractData.liquidityPool) {
+            newState.liquidityPool = contractData.liquidityPool;
         }
-        
+
         this.setState(newState);
 
-        if (shouldUpdate) {
-            if (this.isLiquidityDeployed()) {
-                this.renderDexToolsChart();
-            } else {
-                this.drawCurve();
-            }
+        if (this.isLiquidityDeployed()) {
+            this.renderDexToolsChart();
+        } else {
+            this.drawCurve();
+        }
+    }
+
+    handlePriceUpdate(data) {
+        this.setState({ currentPrice: data.price });
+        if (!this.isLiquidityDeployed()) {
+            this.drawCurve();
         }
     }
 
@@ -75,57 +73,27 @@ export class BondingCurve extends Component {
     }
 
     renderDexToolsChart() {
+        if (!this.containerRef) return;
+
         try {
-        const container = this.element.querySelector('.bonding-curve');
-        if (!container) {
-            return;
-        }
+            const networkName = this.getNetworkName(this.state.chainId);
+            const chartUrl = `https://www.dextools.io/widget-chart/en/${networkName}/pe-light/${this.state.liquidityPool}?theme=dark&chartType=2&chartResolution=30&drawingToolbars=false`;
 
-        // Clear any existing content
-        container.innerHTML = '';
-
-        // Construct the DEXTools URL dynamically
-        const networkName = this.getNetworkName(this.state.chainId);
-        const chartUrl = `https://www.dextools.io/widget-chart/en/${networkName}/pe-light/${this.state.liquidityPool}?theme=dark&chartType=2&chartResolution=30&drawingToolbars=false`;
-
-        // Use exact DEXTools iframe format from share button
-            // Note: This will fail on localhost due to X-Frame-Options, but that's expected
-        container.innerHTML = `
-            <iframe 
-                id="dextools-widget"
-                title="$EXEC DEXTools Trading Chart"
-                width="100%"
-                height="100%"
-                src="${chartUrl}"
-                style="border: none;"
-                    onerror="console.warn('DEXTools chart failed to load (expected on localhost)')"
-            ></iframe>
-        `;
-            
-            // Add error handler for iframe load failures (expected on localhost)
-            const iframe = container.querySelector('#dextools-widget');
-            if (iframe) {
-                iframe.onerror = () => {
-                    console.warn('DEXTools chart iframe failed to load (expected on localhost due to X-Frame-Options)');
-                    // Show a fallback message instead of breaking
-                    container.innerHTML = `
-                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #888;">
-                            <div>Chart will be available in production</div>
-                        </div>
-                    `;
-                };
-            }
+            // Clear and insert iframe
+            this.containerRef.innerHTML = '';
+            const iframe = document.createElement('iframe');
+            iframe.id = 'dextools-widget';
+            iframe.title = '$EXEC DEXTools Trading Chart';
+            iframe.width = '100%';
+            iframe.height = '100%';
+            iframe.src = chartUrl;
+            iframe.style.border = 'none';
+            iframe.onerror = () => {
+                this.containerRef.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #888;"><div>Chart unavailable</div></div>';
+            };
+            this.containerRef.appendChild(iframe);
         } catch (error) {
             console.error('Error rendering DEXTools chart:', error);
-            // Don't let chart errors break the component
-            const container = this.element.querySelector('.bonding-curve');
-            if (container) {
-                container.innerHTML = `
-                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #888;">
-                        <div>Chart unavailable (expected on localhost)</div>
-                    </div>
-                `;
-            }
         }
     }
 
@@ -133,27 +101,24 @@ export class BondingCurve extends Component {
         const networks = {
             1: 'ether',
             5: 'goerli',
-            // Add more networks as needed
         };
         return networks[chainId] || 'ether';
     }
 
     drawCurve() {
-        const canvas = this.element.querySelector('#curveChart');
-        if (!canvas) {
-            return;
-        }
+        if (!this.canvasRef) return;
 
+        const canvas = this.canvasRef;
         const ctx = canvas.getContext('2d');
-        
+
         canvas.width = canvas.offsetWidth;
         canvas.height = canvas.offsetHeight;
-        
+
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         this.drawBaseCurve(ctx, canvas);
 
         if (this.state.dataReady) {
-            this.drawDataElements(ctx);
+            this.drawDataElements(ctx, canvas);
         } else {
             this.drawPlaceholderLabels(ctx);
         }
@@ -169,11 +134,11 @@ export class BondingCurve extends Component {
         this.drawCurvePath(ctx, points);
     }
 
-    drawDataElements(ctx) {
+    drawDataElements(ctx, canvas) {
         const curve = (x) => Math.pow(0.1 + (x * 0.8), 3.5);
         const maxPrice = 0.08;
-        const currentPosition = Math.max(0.1, Math.min(0.9, Math.pow(this.state.currentPrice / maxPrice, 1/3.5)));
-        const points = this.calculateCurvePoints(this.element.querySelector('#curveChart'), curve);
+        const currentPosition = Math.max(0.1, Math.min(0.9, Math.pow(this.state.currentPrice / maxPrice, 1 / 3.5)));
+        const points = this.calculateCurvePoints(canvas, curve);
         this.drawCurrentPosition(ctx, points, currentPosition);
         this.drawLabels(ctx);
     }
@@ -210,24 +175,24 @@ export class BondingCurve extends Component {
 
     drawCurrentPosition(ctx, points, currentPosition) {
         const segmentSize = 0.05;
-        const startIndex = Math.floor((currentPosition - segmentSize/2) * points.length);
-        const endIndex = Math.floor((currentPosition + segmentSize/2) * points.length);
-        
+        const startIndex = Math.floor((currentPosition - segmentSize / 2) * points.length);
+        const endIndex = Math.floor((currentPosition + segmentSize / 2) * points.length);
+
         if (startIndex >= 0 && endIndex < points.length) {
             const curveColor = getComputedStyle(document.documentElement).getPropertyValue('--bonding-curve-color').trim() || '#764ba2';
             ctx.beginPath();
             ctx.strokeStyle = curveColor;
             ctx.lineWidth = 4;
-            
+
             ctx.moveTo(points[startIndex].x, points[startIndex].y);
             for (let i = startIndex; i <= endIndex; i++) {
                 ctx.lineTo(points[i].x, points[i].y);
             }
             ctx.stroke();
-            
+
             const centerIndex = Math.floor((startIndex + endIndex) / 2);
             const centerPoint = points[centerIndex];
-            
+
             ctx.beginPath();
             ctx.arc(centerPoint.x, centerPoint.y, 4, 0, Math.PI * 2);
             ctx.fillStyle = '#FF0000';
@@ -244,23 +209,22 @@ export class BondingCurve extends Component {
         ctx.fillText(`Total NFTs: ${this.state.totalNFTs.toLocaleString()}`, 10, 80);
         ctx.fillText(`Contract ETH Balance: ${this.state.contractEthBalance}`, 10, 100);
     }
-    
-    unmount() {
-        if (this.unsubscribeEvents) {
-            this.unsubscribeEvents.forEach(unsubscribe => unsubscribe());
-        }
-        if (this.resizeHandler) {
-            window.removeEventListener('resize', this.resizeHandler);
-        }
-        super.unmount();
-    }
 
     render() {
-        return `
-            <div class="bonding-curve marble-bg">
-                ${this.isLiquidityDeployed() ? '' : '<canvas id="curveChart"></canvas>'}
-            </div>
-        `;
+        const isLiquidityDeployed = this.isLiquidityDeployed();
+
+        return h('div', {
+            className: 'bonding-curve marble-bg',
+            ref: el => this.containerRef = el
+        },
+            !isLiquidityDeployed && h('canvas', {
+                id: 'curveChart',
+                ref: el => {
+                    this.canvasRef = el;
+                    if (el) this.drawCurve();
+                }
+            })
+        );
     }
 
     static get styles() {
@@ -293,4 +257,4 @@ export class BondingCurve extends Component {
     }
 }
 
-export default BondingCurve;
+export default BondingCurve;

package/src/components/Display/BalanceDisplay.js

@@ -1,4 +1,4 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 export class BalanceDisplay extends Component {
     constructor(props) {
@@ -9,73 +9,49 @@ export class BalanceDisplay extends Component {
             loading: props.loading !== undefined ? props.loading : true,
             error: props.error || null,
         };
-        
-        this.handleBalanceUpdate = this.handleBalanceUpdate.bind(this);
     }
 
-    template() {
-        const { balances, loading, error } = this.state;
-        
-        return `
-            <div class="balance-display marble-bg ${loading ? 'loading' : ''} ${error ? 'error' : ''}">
-                <div class="balance-header">
-                    <h3>Your Balances</h3>
-                    ${balances.lastUpdated ? `
-                        <span class="last-updated">
-                            Last updated: ${new Date(balances.lastUpdated).toLocaleTimeString()}
-                        </span>
-                    ` : ''}
-                </div>
-                
-                <div class="balance-content">
-                    ${loading ? `
-                        <div class="loading-indicator">Loading balances...</div>
-                    ` : error ? `
-                        <div class="error-message">${error}</div>
-                    ` : `
-                        <div class="balance-grid">
-                            <div class="balance-item eth">
-                                <span class="label">ETH Balance</span>
-                                <span class="amount">${balances.eth}</span>
-                            </div>
-                            <div class="balance-item exec">
-                                <span class="label">EXEC Balance</span>
-                                <span class="amount">${balances.exec}</span>
-                            </div>
-                        </div>
-                    `}
-                </div>
-            </div>
-        `;
-    }
-
-    render() {
-        return this.template();
-    }
-
-    onMount() {
+    didMount() {
         if (this.eventBus) {
-            this.unsubscribeEvents = [
-                this.eventBus.on('balances:updated', this.handleBalanceUpdate)
-            ];
+            this.subscribe('balances:updated', this.bind(this.handleBalanceUpdate));
         }
     }
 
-    onUnmount() {
-        if (this.unsubscribeEvents) {
-            this.unsubscribeEvents.forEach(unsubscribe => unsubscribe());
-        }
+    handleBalanceUpdate(balances) {
+        this.setState({ balances, loading: false, error: null });
     }
 
-    updateProps(newProps) {
-        this.setState({
-            balances: newProps.balances !== undefined ? newProps.balances : this.state.balances,
-            loading: newProps.loading !== undefined ? newProps.loading : this.state.loading,
-            error: newProps.error !== undefined ? newProps.error : this.state.error,
-        });
-    }
+    render() {
+        const { balances, loading, error } = this.state;
 
-    handleBalanceUpdate(balances) {
-        this.setState({ balances, loading: false, error: null });
+        const classNames = ['balance-display', 'marble-bg'];
+        if (loading) classNames.push('loading');
+        if (error) classNames.push('error');
+
+        return h('div', { className: classNames.join(' ') },
+            h('div', { className: 'balance-header' },
+                h('h3', null, 'Your Balances'),
+                balances.lastUpdated && h('span', { className: 'last-updated' },
+                    `Last updated: ${new Date(balances.lastUpdated).toLocaleTimeString()}`
+                )
+            ),
+
+            h('div', { className: 'balance-content' },
+                loading
+                    ? h('div', { className: 'loading-indicator' }, 'Loading balances...')
+                    : error
+                        ? h('div', { className: 'error-message' }, error)
+                        : h('div', { className: 'balance-grid' },
+                            h('div', { className: 'balance-item eth' },
+                                h('span', { className: 'label' }, 'ETH Balance'),
+                                h('span', { className: 'amount' }, balances.eth)
+                            ),
+                            h('div', { className: 'balance-item exec' },
+                                h('span', { className: 'label' }, 'EXEC Balance'),
+                                h('span', { className: 'amount' }, balances.exec)
+                            )
+                        )
+            )
+        );
     }
-} 
+}

package/src/components/Display/PriceDisplay.js

@@ -1,4 +1,4 @@
-import { Component } from '@monygroupcorp/microact';
+import { Component, h } from '@monygroupcorp/microact';
 
 // Add event name constants
 const EVENTS = {
@@ -18,38 +18,15 @@ export class PriceDisplay extends Component {
             loading: props.loading !== undefined ? props.loading : true,
             error: props.error || null
         };
-        
-        this.handlePriceUpdate = this.handlePriceUpdate.bind(this);
-        this.handleStatusUpdate = this.handleStatusUpdate.bind(this);
     }
 
-    onMount() {
+    didMount() {
         if (this.eventBus) {
-            this.eventBus.on(EVENTS.UPDATE.PRICE, this.handlePriceUpdate);
-            this.eventBus.on(EVENTS.UPDATE.STATUS, this.handleStatusUpdate);
+            this.subscribe(EVENTS.UPDATE.PRICE, this.bind(this.handlePriceUpdate));
+            this.subscribe(EVENTS.UPDATE.STATUS, this.bind(this.handleStatusUpdate));
         }
     }
 
-    onUnmount() {
-        if (this.eventBus) {
-            this.eventBus.off(EVENTS.UPDATE.PRICE, this.handlePriceUpdate);
-            this.eventBus.off(EVENTS.UPDATE.STATUS, this.handleStatusUpdate);
-        }
-    }
-
-    updateProps(newProps) {
-        this.setState({
-            price: newProps.price !== undefined ? newProps.price : this.state.price,
-            lastUpdated: newProps.lastUpdated !== undefined ? newProps.lastUpdated : this.state.lastUpdated,
-            loading: newProps.loading !== undefined ? newProps.loading : this.state.loading,
-            error: newProps.error !== undefined ? newProps.error : this.state.error
-        });
-    }
-
-    setState(newState) {
-        super.setState(newState);
-    }
-
     handlePriceUpdate({ price }) {
         this.setState({
             price: price || 0,
@@ -61,51 +38,46 @@ export class PriceDisplay extends Component {
         this.setState({ loading, error });
     }
 
-    template() {
+    render() {
         const { price, lastUpdated, loading, error } = this.state;
-        
-        if (loading) return `
-            <div class="price-display loading marble-bg">
-                <div class="price-header">
-                    <h3>Cult Exec </h3>
-                    <h3>Bonding Curve Presale</h3>
-                </div>
-                <div class="price-content">
-                    <div class="loading-indicator">Loading...</div>
-                </div>
-            </div>`;
-            
-        if (error) return `
-            <div class="price-display error marble-bg">
-                <div class="price-header">
-                    <h3>Cult Exec </h3>
-                    <h3>Bonding Curve Presale</h3>
-                </div>
-                <div class="price-content">
-                    <div class="error-message">Error: ${error}</div>
-                </div>
-            </div>`;
-        
-        return `
-            <div class="price-display marble-bg">
-                <div class="price-header">
-                    <h3>Cult Exec </h3>
-                    <h3>Bonding Curve Presale</h3>
-                </div>
-                
-                <div class="price-content">
-                    <div class="price-value">
-                        <span class="amount">${Number(price).toFixed(8)}</span>
-                        <span class="currency">ETH / Cult Exec</span>
-                    </div>
-                </div>
-            </div>
-        `;
-    }
 
-    render() {
-        const result = this.template();
-        return result;
+        if (loading) {
+            return h('div', { className: 'price-display loading marble-bg' },
+                h('div', { className: 'price-header' },
+                    h('h3', null, 'Cult Exec '),
+                    h('h3', null, 'Bonding Curve Presale')
+                ),
+                h('div', { className: 'price-content' },
+                    h('div', { className: 'loading-indicator' }, 'Loading...')
+                )
+            );
+        }
+
+        if (error) {
+            return h('div', { className: 'price-display error marble-bg' },
+                h('div', { className: 'price-header' },
+                    h('h3', null, 'Cult Exec '),
+                    h('h3', null, 'Bonding Curve Presale')
+                ),
+                h('div', { className: 'price-content' },
+                    h('div', { className: 'error-message' }, `Error: ${error}`)
+                )
+            );
+        }
+
+        return h('div', { className: 'price-display marble-bg' },
+            h('div', { className: 'price-header' },
+                h('h3', null, 'Cult Exec '),
+                h('h3', null, 'Bonding Curve Presale')
+            ),
+
+            h('div', { className: 'price-content' },
+                h('div', { className: 'price-value' },
+                    h('span', { className: 'amount' }, Number(price).toFixed(8)),
+                    h('span', { className: 'currency' }, 'ETH / Cult Exec')
+                )
+            )
+        );
     }
 
     // Add component styles
@@ -211,4 +183,4 @@ export class PriceDisplay extends Component {
             }
         `;
     }
-} 
+}