@monygroupcorp/micro-web3 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@monygroupcorp/micro-web3",
+  "version": "0.1.0",
+  "description": "A lean, reusable Web3 toolkit with components for wallet connection, IPFS, and common Web3 UI patterns.",
+  "main": "dist/micro-web3.cjs.js",
+  "module": "dist/micro-web3.esm.js",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "web3",
+    "wallet",
+    "ipfs",
+    "react",
+    "minimal",
+    "framework"
+  ],
+  "author": "arthurt <mony.group.corporation@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@monygroupcorp/microact": ">=0.1.0"
+  },
+  "dependencies": {
+    "ethers": "^5.7.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.55.1"
+  }
+}

package/rollup.config.cjs

@@ -0,0 +1,36 @@
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const terser = require('@rollup/plugin-terser');
+
+module.exports = [
+  {
+    input: 'src/index.js',
+    output: [
+      {
+        file: 'dist/micro-web3.cjs.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: 'dist/micro-web3.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+      {
+        file: 'dist/micro-web3.umd.js',
+        format: 'umd',
+        name: 'microWeb3',
+        sourcemap: true,
+        globals: {
+          '@monygroupcorp/microact': 'microact'
+        }
+      }
+    ],
+    plugins: [
+      nodeResolve(),
+      commonjs(),
+      terser()
+    ],
+    external: ['@monygroupcorp/microact']
+  }
+];

package/src/components/BondingCurve/BondingCurve.js

@@ -0,0 +1,296 @@
+import { Component } from '@monygroupcorp/microact';
+
+export class BondingCurve extends Component {
+    constructor(props) {
+        super(props);
+        this.eventBus = props.eventBus;
+        this.state = {
+            currentPrice: props.price || 0,
+            totalBondingSupply: props.contractData?.totalBondingSupply || 0,
+            totalMessages: props.contractData?.totalMessages || 0,
+            totalNFTs: props.contractData?.totalNFTs || 0,
+            dataReady: props.dataReady || false,
+            contractEthBalance: props.contractData?.contractEthBalance || 0,
+            liquidityPool: props.contractData?.liquidityPool || null,
+            chainId: props.chainId || 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 }))
+        ];
+
+        this.resizeHandler = () => requestAnimationFrame(() => this.drawCurve());
+        window.addEventListener('resize', this.resizeHandler);
+
+        if (this.isLiquidityDeployed()) {
+            this.renderDexToolsChart();
+        } else {
+            this.drawCurve();
+        }
+    }
+
+    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;
+        }
+        if (newProps.chainId !== undefined) {
+            newState.chainId = newProps.chainId;
+            shouldUpdate = true;
+        }
+        
+        this.setState(newState);
+
+        if (shouldUpdate) {
+            if (this.isLiquidityDeployed()) {
+                this.renderDexToolsChart();
+            } else {
+                this.drawCurve();
+            }
+        }
+    }
+
+    isLiquidityDeployed() {
+        const { liquidityPool } = this.state;
+        return liquidityPool && liquidityPool !== '0x0000000000000000000000000000000000000000';
+    }
+
+    renderDexToolsChart() {
+        try {
+        const container = this.element.querySelector('.bonding-curve');
+        if (!container) {
+            return;
+        }
+
+        // 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>
+                    `;
+                };
+            }
+        } 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>
+                `;
+            }
+        }
+    }
+
+    getNetworkName(chainId) {
+        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;
+        }
+
+        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);
+        } else {
+            this.drawPlaceholderLabels(ctx);
+        }
+    }
+
+    drawBaseCurve(ctx, canvas) {
+        const curveColor = getComputedStyle(document.documentElement).getPropertyValue('--bonding-curve-color').trim() || '#764ba2';
+        ctx.strokeStyle = curveColor;
+        ctx.lineWidth = 2;
+
+        const curve = (x) => Math.pow(0.1 + (x * 0.8), 3.5);
+        const points = this.calculateCurvePoints(canvas, curve);
+        this.drawCurvePath(ctx, points);
+    }
+
+    drawDataElements(ctx) {
+        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);
+        this.drawCurrentPosition(ctx, points, currentPosition);
+        this.drawLabels(ctx);
+    }
+
+    drawPlaceholderLabels(ctx) {
+        ctx.fillStyle = '#666666';
+        ctx.font = '12px Courier New';
+        ctx.fillText('Loading price data...', 10, 20);
+        ctx.fillText('Loading supply data...', 10, 40);
+        ctx.fillText('Loading NFT data...', 10, 60);
+    }
+
+    calculateCurvePoints(canvas, curve) {
+        const points = [];
+        const numPoints = 100;
+        for (let i = 0; i <= numPoints; i++) {
+            const x = i / numPoints;
+            const y = curve(x);
+            const canvasX = x * canvas.width * 0.8 + canvas.width * 0.1;
+            const canvasY = canvas.height * 0.9 - y * canvas.height * 0.8;
+            points.push({ x: canvasX, y: canvasY });
+        }
+        return points;
+    }
+
+    drawCurvePath(ctx, points) {
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        ctx.stroke();
+    }
+
+    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);
+        
+        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';
+            ctx.fill();
+        }
+    }
+
+    drawLabels(ctx) {
+        ctx.fillStyle = '#666666';
+        ctx.font = '12px Courier New';
+        ctx.fillText(`${this.state.currentPrice.toFixed(4)} ETH / EXEC`, 10, 20);
+        ctx.fillText(`Total Supply: ${this.state.totalBondingSupply.toLocaleString()} EXEC`, 10, 40);
+        ctx.fillText(`Total Messages: ${this.state.totalMessages.toLocaleString()}`, 10, 60);
+        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>
+        `;
+    }
+
+    static get styles() {
+        return `
+            .bonding-curve {
+                width: 100%;
+                height: 90%;
+                min-height: 400px;
+                background: #1a1a1a;
+                border-radius: 8px;
+                padding: 0px;
+                overflow: hidden;
+                position: relative;
+            }
+
+            #curveChart {
+                width: 100%;
+                height: 100%;
+            }
+
+            #dextools-widget {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                border: none;
+            }
+        `;
+    }
+}
+
+export default BondingCurve;

package/src/components/Display/BalanceDisplay.js

@@ -0,0 +1,81 @@
+import { Component } from '@monygroupcorp/microact';
+
+export class BalanceDisplay extends Component {
+    constructor(props) {
+        super(props);
+        this.eventBus = props.eventBus;
+        this.state = {
+            balances: props.balances || { eth: '0', exec: '0', lastUpdated: null },
+            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() {
+        if (this.eventBus) {
+            this.unsubscribeEvents = [
+                this.eventBus.on('balances:updated', this.handleBalanceUpdate)
+            ];
+        }
+    }
+
+    onUnmount() {
+        if (this.unsubscribeEvents) {
+            this.unsubscribeEvents.forEach(unsubscribe => unsubscribe());
+        }
+    }
+
+    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,
+        });
+    }
+
+    handleBalanceUpdate(balances) {
+        this.setState({ balances, loading: false, error: null });
+    }
+} 

package/src/components/Display/PriceDisplay.js

@@ -0,0 +1,214 @@
+import { Component } from '@monygroupcorp/microact';
+
+// Add event name constants
+const EVENTS = {
+    UPDATE: {
+        PRICE: 'price:updated',
+        STATUS: 'price:status'
+    }
+};
+
+export class PriceDisplay extends Component {
+    constructor(props) {
+        super(props);
+        this.eventBus = props.eventBus;
+        this.state = {
+            price: props.price || 0,
+            lastUpdated: props.lastUpdated || null,
+            loading: props.loading !== undefined ? props.loading : true,
+            error: props.error || null
+        };
+        
+        this.handlePriceUpdate = this.handlePriceUpdate.bind(this);
+        this.handleStatusUpdate = this.handleStatusUpdate.bind(this);
+    }
+
+    onMount() {
+        if (this.eventBus) {
+            this.eventBus.on(EVENTS.UPDATE.PRICE, this.handlePriceUpdate);
+            this.eventBus.on(EVENTS.UPDATE.STATUS, 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,
+            loading: false
+        });
+    }
+
+    handleStatusUpdate({ loading, error }) {
+        this.setState({ loading, error });
+    }
+
+    template() {
+        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;
+    }
+
+    // Add component styles
+    static get styles() {
+        return `
+            .price-display {
+                background: #1a1a1a;
+                border-radius: 8px;
+                padding: 16px;
+                margin-bottom: 16px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            }
+
+            .price-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 12px;
+            }
+
+            .price-header h3 {
+                margin: 0;
+                color: var(--price-display-header-color, var(--color-text-primary, #333));
+                font-size: 16px;
+            }
+
+            .last-updated {
+                color: #666;
+                font-size: 12px;
+            }
+
+            .price-content {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-height: 48px;
+            }
+
+            .price-value {
+                font-size: 24px;
+                font-weight: bold;
+                color: #fff;
+            }
+
+            .amount {
+                margin-right: 8px;
+            }
+
+            .currency {
+                color: var(--price-display-currency-color, var(--color-accent, #764ba2));
+            }
+
+            .loading-indicator {
+                color: #666;
+                font-style: italic;
+            }
+
+            .error-message {
+                color: #ff4444;
+                font-size: 14px;
+            }
+
+            /* Loading state animation */
+            .price-display.loading .price-content {
+                opacity: 0.7;
+            }
+
+            .price-display.loading .loading-indicator:after {
+                content: '';
+                animation: loading-dots 1.5s infinite;
+            }
+
+            @keyframes loading-dots {
+                0% { content: '.'; }
+                33% { content: '..'; }
+                66% { content: '...'; }
+            }
+
+            /* Error state styles */
+            .price-display.error {
+                border: 1px solid #ff4444;
+            }
+
+            /* Mobile responsive styles */
+            @media (max-width: 768px) {
+                .price-display {
+                    margin: 8px;
+                    padding: 12px;
+                }
+
+                .price-header {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+
+                .last-updated {
+                    margin-top: 4px;
+                }
+
+                .price-value {
+                    font-size: 20px;
+                }
+            }
+        `;
+    }
+}