npm - ppi-sdk - Versions diffs - 1.0.0 → 1.1.0 - Mend

ppi-sdk 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (642) hide show

package/tools/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "tools",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "ppi-playground-server.js",
+  "scripts": {
+    "start": "node ppi-playground-server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "express": "^4.18.2"
+  },
+  "keywords": ["ppi", "playground", "blockchain", "payments"],
+  "author": "",
+  "license": "ISC",
+  "description": "PPI Web Playground - Universal Payment Protocol"
+}

package/tools/playground-static/index.html ADDED Viewed

@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PPI Playground - Universal Payment Protocol</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: #333;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        h1 {
+            color: #2d3748;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .tagline {
+            color: #4a5568;
+            margin-bottom: 30px;
+            font-size: 1.1em;
+            line-height: 1.5;
+        }
+        .editor-box {
+            background: #f7fafc;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            border: 2px solid #e2e8f0;
+        }
+        textarea {
+            width: 100%;
+            height: 150px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 14px;
+            padding: 15px;
+            border: 2px solid #cbd5e0;
+            border-radius: 8px;
+            background: white;
+            resize: vertical;
+            margin-bottom: 15px;
+            color: #2d3748;
+            line-height: 1.5;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #4299e1;
+            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+        }
+        .buttons {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+        button {
+            padding: 12px 24px;
+            border-radius: 6px;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+        #execute-btn {
+            background: #48bb78;
+            color: white;
+            flex-grow: 1;
+        }
+        #execute-btn:hover {
+            background: #38a169;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
+        }
+        #execute-btn:disabled {
+            background: #a0aec0;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        #clear-btn {
+            background: #e2e8f0;
+            color: #4a5568;
+        }
+        #clear-btn:hover {
+            background: #cbd5e0;
+        }
+        .output-box {
+            background: #2d3748;
+            border-radius: 10px;
+            padding: 20px;
+            border: 2px solid #4299e1;
+            margin-top: 20px;
+            min-height: 300px;
+        }
+        .output {
+            color: #e2e8f0;
+            font-family: 'Monaco', 'Courier New', monospace;
+            white-space: pre-wrap;
+            min-height: 200px;
+            max-height: 500px;
+            overflow-y: auto;
+            padding: 10px;
+            background: #1a202c;
+            border-radius: 6px;
+            font-size: 14px;
+            line-height: 1.4;
+        }
+        .success { color: #68d391; font-weight: bold; }
+        .error { color: #fc8181; }
+        .info { color: #90cdf4; }
+        .warning { color: #f6ad55; }
+        .chain-tags {
+            display: flex;
+            gap: 10px;
+            margin: 15px 0;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+        .chain {
+            background: #4CAF50;
+            color: white;
+            padding: 8px 15px;
+            border-radius: 20px;
+            font-size: 0.9em;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .chain.casha { background: #667eea; }
+        .chain.ethereum { background: #627eea; }
+        .chain.solana { background: #00ffaa; color: #000; }
+        .status-bar {
+            background: #edf2f7;
+            padding: 12px 20px;
+            border-radius: 8px;
+            margin-top: 25px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        .status-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+        .online { background: #48bb78; }
+        .offline { background: #fc8181; }
+        .pulsing {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .examples-section {
+            background: #f0fff4;
+            border-radius: 10px;
+            padding: 20px;
+            margin-top: 25px;
+            border-left: 5px solid #48bb78;
+        }
+        .examples-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+        .example-card {
+            background: white;
+            border-radius: 8px;
+            padding: 15px;
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .example-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            border-color: #4299e1;
+        }
+        .example-title {
+            font-weight: bold;
+            color: #2d3748;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .example-desc {
+            color: #4a5568;
+            font-size: 0.9em;
+            margin-bottom: 10px;
+            line-height: 1.4;
+        }
+        .example-code {
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 12px;
+            color: #4299e1;
+            background: #f7fafc;
+            padding: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .primitives-badge {
+            background: #4299e1;
+            color: white;
+            padding: 2px 8px;
+            border-radius: 10px;
+            font-size: 0.8em;
+            font-weight: bold;
+            display: inline-block;
+            margin-top: 5px;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: #4299e1;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .header-badge {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.8em;
+            font-weight: bold;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            margin-left: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🌐 PPI Playground - Universal Payment Protocol
+            <span class="header-badge">v1.0 LAUNCH</span>
+        </h1>
+        <p class="tagline">
+            Write once → Run on every blockchain • Connected to Real PPI Compiler<br>
+            <strong>🎯 3 Primitives • 3 Blockchains • Real Compilation</strong>
+        </p>
+        <div class="editor-box">
+            <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #2d3748;">
+                📝 Write PPI Code:
+            </label>
+            <textarea id="code-editor" placeholder="// Example: PPI_SEND(100).to(&quot;alice@casha.com&quot;).withMessage(&quot;Hello!&quot;)
+// Try: PPI_ESCROW(500).from(&quot;buyer&quot;).to(&quot;seller&quot;).withArbitrator(&quot;marketplace&quot;)
+// or: PPI_SPLIT(450).among([&quot;alice&quot;, &quot;bob&quot;, &quot;charlie&quot;]).equal()">PPI_SEND(100).to("alice@casha.com").withMessage("Hello from Real PPI Compiler!")</textarea>
+            <div class="buttons">
+                <button id="execute-btn">▶ Execute with Real PPI Compiler</button>
+                <button id="clear-btn">Clear</button>
+            </div>
+            <div class="chain-tags">
+                <div class="chain casha">✓ Casha DAG</div>
+                <div class="chain ethereum">✓ Ethereum</div>
+                <div class="chain solana">✓ Solana</div>
+                <div style="color: #4a5568; font-size: 0.9em; margin-left: auto; display: flex; align-items: center; gap: 5px;">
+                    <span class="status-dot online"></span>
+                    <span>3 Primitives Available</span>
+                </div>
+            </div>
+        </div>
+        <div class="output-box">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+                <label style="font-weight: bold; color: #e2e8f0; font-size: 1.1em;">🎯 Compilation Output:</label>
+                <div style="font-size: 0.9em; color: #90cdf4;" id="compiler-status">Ready</div>
+            </div>
+            <div id="output" class="output">
+<span class="info">// 🎉 PPI Playground v1.0 LAUNCH</span>
+<span class="info">// Connected to your actual PPI compiler</span>
+<span class="info">//</span>
+<span class="info">// 📋 Available Primitives:</span>
+<span class="info">//   • PPI_SEND()    - Simple payments</span>
+<span class="info">//   • PPI_ESCROW()  - Secure escrow</span>
+<span class="info">//   • PPI_SPLIT()   - Group split payments</span>
+<span class="info">//</span>
+<span class="info">// 🌐 Multi-Chain Support:</span>
+<span class="info">//   • Casha DAG (Instant)</span>
+<span class="info">//   • Ethereum (Smart Contracts)</span>
+<span class="info">//   • Solana (High Speed)</span>
+<span class="info">//</span>
+<span class="success">✅ Status: Connected to PPI Compiler</span>
+<span class="warning">💡 Click an example below or write your own PPI code!</span>
+            </div>
+        </div>
+        <div class="examples-section">
+            <h3 style="margin-top: 0; color: #22543d; margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
+                🚀 Try These Working Examples
+                <span style="font-size: 0.8em; background: #c6f6d5; color: #22543d; padding: 2px 10px; border-radius: 10px;">3 Primitives</span>
+            </h3>
+            <div class="examples-grid" id="examples-grid">
+                <!-- Examples will be loaded by JavaScript -->
+            </div>
+        </div>
+        <div class="status-bar">
+            <div class="status-item">
+                <span class="status-dot online" id="server-dot"></span>
+                <span>🌐 Server: <span id="server-status">Testing...</span></span>
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="compiler-dot"></span>
+                <span>🔧 Compiler: <span id="compiler-connection">Testing...</span></span>
+            </div>
+            <div class="status-item">
+                <span class="status-dot" id="api-dot"></span>
+                <span>📡 API: <span id="api-status">Testing...</span></span>
+            </div>
+            <div class="status-item">
+                <span class="status-dot online"></span>
+                <span>⚡ Live: <span id="primitives-count">3/3</span> Primitives</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Enhanced examples database - ONLY 3 WORKING PRIMITIVES!
+        const examples = [
+            {
+                id: 'send',
+                title: '💰 Simple Send',
+                description: 'Basic payment to any address or wallet',
+                code: `PPI_SEND(50).to("alice@casha.com").withMessage("Lunch money!")`,
+                primitive: 'PPI_SEND',
+                tips: 'Works on all 3 blockchains instantly'
+            },
+            {
+                id: 'escrow',
+                title: '🤝 Escrow Payment',
+                description: 'Secure escrow with arbitrator',
+                code: `PPI_ESCROW(200)
+  .from("buyer@casha.com")
+  .to("seller@casha.com")
+  .withArbitrator("marketplace")
+  .releaseWhen(["delivery_confirmed"])`,
+                primitive: 'PPI_ESCROW',
+                tips: 'Smart contracts on Ethereum & Solana'
+            },
+            {
+                id: 'split',
+                title: '👥 Group Split',
+                description: 'Split payment among multiple people',
+                code: `PPI_SPLIT(450)
+  .among(["alice@casha.com", "bob@casha.com", "charlie@casha.com"])
+  .equal()
+  .withMessage("Dinner bill split")`,
+                primitive: 'PPI_SPLIT',
+                tips: 'Casha DAG & Solana (Ethereum coming soon)'
+            }
+        ];
+        // Initialize examples grid
+        function initExamples() {
+            const grid = document.getElementById('examples-grid');
+            grid.innerHTML = '';
+            examples.forEach(example => {
+                const card = document.createElement('div');
+                card.className = 'example-card';
+                card.innerHTML = `
+                    <div class="example-title">
+                        <span>${example.title}</span>
+                        <span class="primitives-badge">${example.primitive}</span>
+                    </div>
+                    <div class="example-desc">${example.description}</div>
+                    <div style="font-size: 0.8em; color: #48bb78; margin-bottom: 8px;">
+                        ${example.tips}
+                    </div>
+                    <div class="example-code" title="${example.code.replace(/\n/g, ' ')}">
+                        ${example.code.substring(0, 60)}${example.code.length > 60 ? '...' : ''}
+                    </div>
+                `;
+                card.addEventListener('click', () => loadExample(example));
+                grid.appendChild(card);
+            });
+        }
+        // Load example into editor
+        function loadExample(example) {
+            document.getElementById('code-editor').value = example.code;
+            document.getElementById('output').innerHTML =
+                `<span class="info">// Example loaded: ${example.title}</span>\n` +
+                `<span class="success">✅ Using primitive: ${example.primitive}</span>\n` +
+                `<span class="info">💡 ${example.tips}</span>\n\n` +
+                `<span class="info">// Click "Execute" to compile with real PPI compiler.</span>`;
+            // Scroll to editor
+            document.getElementById('code-editor').scrollIntoView({ behavior: 'smooth', block: 'center' });
+            document.getElementById('code-editor').focus();
+        }
+        // Execute PPI code with REAL compiler
+        async function executePPI() {
+            const code = document.getElementById('code-editor').value.trim();
+            const output = document.getElementById('output');
+            const compilerStatus = document.getElementById('compiler-status');
+            const compilerConn = document.getElementById('compiler-connection');
+            const compilerDot = document.getElementById('compiler-dot');
+            const executeBtn = document.getElementById('execute-btn');
+            if (!code) {
+                output.innerHTML = '<span class="error">❌ Please enter some PPI code</span>';
+                return;
+            }
+            // Update UI
+            output.innerHTML = `
+                <span class="info">⏳ Calling real PPI compiler...</span>
+                <span class="info" style="display: flex; align-items: center; gap: 10px;">
+                    <div class="loading"></div>
+                    Compiling across 3 blockchains...
+                </span>
+            `;
+            compilerStatus.textContent = 'Compiling...';
+            compilerStatus.style.color = '#f6ad55';
+            compilerDot.className = 'status-dot pulsing';
+            executeBtn.disabled = true;
+            executeBtn.textContent = '⏳ Compiling...';
+            try {
+                const startTime = Date.now();
+                const response = await fetch('/api/compile', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        code: code
+                    })
+                });
+                const endTime = Date.now();
+                const duration = endTime - startTime;
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                }
+                const result = await response.json();
+                // Display results
+                if (result.success) {
+                    let html = `<span class="success">✅ ${result.message || 'Real PPI Compilation Successful!'}</span>\n`;
+                    html += `<span class="info">⏱️ Compilation time: ${duration}ms</span>\n\n`;
+                    html += `<span class="info"><strong>📝 PPI Operation:</strong></span>\n`;
+                    html += `<span style="color: #fff; background: #2d3748; padding: 5px 10px; border-radius: 4px; display: inline-block; margin: 5px 0;">${result.operation}</span>\n\n`;
+                    if (result.compiled) {
+                        html += `<span class="info"><strong>🔗 Multi-Chain Compilation:</strong></span>\n`;
+                        if (typeof result.compiled === 'object') {
+                            for (const [chain, transaction] of Object.entries(result.compiled)) {
+                                const chainColor = {
+                                    'casha-dag': '#667eea',
+                                    'ethereum': '#627eea',
+                                    'solana': '#00ffaa'
+                                }[chain] || '#4299e1';
+                                const chainName = {
+                                    'casha-dag': 'Casha DAG',
+                                    'ethereum': 'Ethereum',
+                                    'solana': 'Solana'
+                                }[chain] || chain;
+                                html += `\n<span style="color: ${chainColor}; font-weight: bold;">${chainName}:</span> `;
+                                // Special handling for error messages
+                                if (transaction.includes('Error:')) {
+                                    html += `<span style="color: #f6ad55;">${transaction}</span>`;
+                                } else {
+                                    html += `<span style="color: #e2e8f0;">${transaction}</span>`;
+                                }
+                            }
+                        } else {
+                            html += result.compiled;
+                        }
+                    }
+                    if (result.targets) {
+                        html += `\n\n<span class="info"><strong>🌐 Supported Chains:</strong> ${result.targets.join(', ')}</span>`;
+                    }
+                    output.innerHTML = html;
+                    compilerStatus.textContent = 'Success ✅';
+                    compilerStatus.style.color = '#68d391';
+                    compilerConn.textContent = 'Connected ✅';
+                    compilerConn.style.color = '#48bb78';
+                    compilerDot.className = 'status-dot online';
+                    // Update primitive detection
+                    detectPrimitive(code);
+                } else {
+                    output.innerHTML = `<span class="error">❌ Compilation Failed: ${result.error}</span>`;
+                    if (result.fallback) {
+                        output.innerHTML += `\n\n<span class="warning">⚠️ Fallback mode: ${JSON.stringify(result.fallback, null, 2)}</span>`;
+                    }
+                    compilerStatus.textContent = 'Failed ❌';
+                    compilerStatus.style.color = '#fc8181';
+                    compilerDot.className = 'status-dot offline';
+                    // Show helpful suggestions based on error
+                    if (result.error.includes('Unsupported') || result.error.includes('not a function')) {
+                        output.innerHTML += `\n\n<span class="warning">💡 Try these working primitives:</span>`;
+                        output.innerHTML += `\n<span class="info">• PPI_SEND(100).to("address")</span>`;
+                        output.innerHTML += `\n<span class="info">• PPI_ESCROW(200).from("buyer").to("seller")</span>`;
+                        output.innerHTML += `\n<span class="info">• PPI_SPLIT(300).among(["a","b","c"]).equal()</span>`;
+                    }
+                }
+            } catch (error) {
+                console.error('Execution error:', error);
+                output.innerHTML = `<span class="error">❌ Error: ${error.message}</span>`;
+                output.innerHTML += `\n\n<span class="warning">💡 Try these steps:</span>`;
+                output.innerHTML += `\n<span class="info">1. Ensure the PPI server is running</span>`;
+                output.innerHTML += `\n<span class="info">2. Check your PPI syntax</span>`;
+                output.innerHTML += `\n<span class="info">3. Try a simpler example first</span>`;
+                compilerStatus.textContent = 'Error ❌';
+                compilerStatus.style.color = '#fc8181';
+                compilerConn.textContent = 'Connection Failed ❌';
+                compilerConn.style.color = '#fc8181';
+                compilerDot.className = 'status-dot offline';
+            } finally {
+                executeBtn.disabled = false;
+                executeBtn.textContent = '▶ Execute with Real PPI Compiler';
+            }
+        }
+        // Detect which primitive is being used
+        function detectPrimitive(code) {
+            const primitives = ['PPI_SEND', 'PPI_ESCROW', 'PPI_SPLIT'];
+            let detected = null;
+            for (const primitive of primitives) {
+                if (code.includes(primitive + '(')) {
+                    detected = primitive;
+                    break;
+                }
+            }
+            const status = document.getElementById('primitives-count');
+            if (detected) {
+                status.innerHTML = `<strong>${detected}</strong> detected`;
+                status.style.color = '#4299e1';
+            } else {
+                status.innerHTML = '3/3 Primitives';
+                status.style.color = '#48bb78';
+            }
+        }
+        // Check server health
+        async function checkHealth() {
+            const serverStatus = document.getElementById('server-status');
+            const apiStatus = document.getElementById('api-status');
+            const compilerConn = document.getElementById('compiler-connection');
+            const serverDot = document.getElementById('server-dot');
+            const apiDot = document.getElementById('api-dot');
+            const compilerDot = document.getElementById('compiler-dot');
+            try {
+                // Test server connection
+                const healthResponse = await fetch('/api/health');
+                if (healthResponse.ok) {
+                    serverStatus.textContent = 'Connected ✅';
+                    serverStatus.style.color = '#48bb78';
+                    serverDot.className = 'status-dot online';
+                    apiStatus.textContent = 'Ready ✅';
+                    apiStatus.style.color = '#48bb78';
+                    apiDot.className = 'status-dot online';
+                }
+                // Test compiler connection
+                const chainsResponse = await fetch('/api/chains');
+                if (chainsResponse.ok) {
+                    compilerConn.textContent = 'Ready ✅';
+                    compilerConn.style.color = '#48bb78';
+                    compilerDot.className = 'status-dot online';
+                } else {
+                    compilerConn.textContent = 'Testing...';
+                    compilerConn.style.color = '#f6ad55';
+                    compilerDot.className = 'status-dot pulsing';
+                }
+            } catch (error) {
+                console.warn('Health check failed:', error.message);
+                serverStatus.textContent = 'Disconnected ❌';
+                serverStatus.style.color = '#fc8181';
+                serverDot.className = 'status-dot offline';
+                apiStatus.textContent = 'Failed ❌';
+                apiStatus.style.color = '#fc8181';
+                apiDot.className = 'status-dot offline';
+            }
+        }
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize examples
+            initExamples();
+            // Setup event listeners
+            document.getElementById('execute-btn').addEventListener('click', executePPI);
+            document.getElementById('clear-btn').addEventListener('click', function() {
+                document.getElementById('code-editor').value = '';
+                document.getElementById('output').innerHTML =
+                    `<span class="info">// Enter PPI code above and click Execute</span>\n` +
+                    `<span class="info">// Or click an example to get started!</span>`;
+                document.getElementById('primitives-count').innerHTML = '3/3 Primitives';
+                document.getElementById('primitives-count').style.color = '#48bb78';
+            });
+            // Allow Ctrl+Enter to execute
+            document.getElementById('code-editor').addEventListener('keydown', function(e) {
+                if (e.ctrlKey && e.key === 'Enter') {
+                    executePPI();
+                }
+            });
+            // Initial health check
+            checkHealth();
+            // Auto-check every 20 seconds
+            setInterval(checkHealth, 20000);
+        });
+    </script>
+</body>
+</html>