stylus-toolkit 0.2.10 → 2.0.0

package/dist/utils/gas-estimator.d.ts

@@ -0,0 +1,22 @@
+export interface GasEstimationConfig {
+    baseGas: number;
+    activationGas: number;
+    perByteGas: number;
+}
+export declare class GasEstimator {
+    private static readonly STYLUS_DEPLOY_CONFIG;
+    private static readonly STYLUS_PROFILE_CONFIG;
+    private static readonly EVM_CONFIG;
+    /**
+     * Estimate gas for actual deployment (deploy command).
+     * Includes full 14M activation cost + 2.5x safety buffer.
+     */
+    static estimateDeploymentGas(bytecodeSize: number, language: 'rust' | 'solidity', safetyMultiplier?: number): number;
+    /**
+     * Estimate gas for profiling / TCO comparison.
+     * Uses bytecode storage cost only — no activation overhead.
+     * This gives an honest apples-to-apples comparison with Solidity.
+     */
+    static estimateProfileGas(bytecodeSize: number, language: 'rust' | 'solidity'): number;
+}
+//# sourceMappingURL=gas-estimator.d.ts.map

package/dist/utils/gas-estimator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gas-estimator.d.ts","sourceRoot":"","sources":["../../src/utils/gas-estimator.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,YAAY;IAEvB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAI1C;IAIF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,qBAAqB,CAI3C;IAEF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAIhC;IAEF;;;OAGG;IACH,MAAM,CAAC,qBAAqB,CAC1B,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GAAG,UAAU,EAC7B,gBAAgB,GAAE,MAAU,GAC3B,MAAM;IAST;;;;OAIG;IACH,MAAM,CAAC,kBAAkB,CACvB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GAAG,UAAU,GAC5B,MAAM;CAQV"}

package/dist/utils/gas-estimator.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GasEstimator = void 0;
+class GasEstimator {
+    /**
+     * Estimate gas for actual deployment (deploy command).
+     * Includes full 14M activation cost + 2.5x safety buffer.
+     */
+    static estimateDeploymentGas(bytecodeSize, language, safetyMultiplier = 1) {
+        const config = language === 'rust' ? this.STYLUS_DEPLOY_CONFIG : this.EVM_CONFIG;
+        return Math.ceil(config.baseGas +
+            config.activationGas +
+            (bytecodeSize * config.perByteGas * safetyMultiplier));
+    }
+    /**
+     * Estimate gas for profiling / TCO comparison.
+     * Uses bytecode storage cost only — no activation overhead.
+     * This gives an honest apples-to-apples comparison with Solidity.
+     */
+    static estimateProfileGas(bytecodeSize, language) {
+        const config = language === 'rust' ? this.STYLUS_PROFILE_CONFIG : this.EVM_CONFIG;
+        return Math.ceil(config.baseGas +
+            config.activationGas +
+            (bytecodeSize * config.perByteGas));
+    }
+}
+exports.GasEstimator = GasEstimator;
+// Full deployment config — used by `deploy` command (includes 14M activation)
+GasEstimator.STYLUS_DEPLOY_CONFIG = {
+    baseGas: 21000,
+    activationGas: 14000000,
+    perByteGas: 16,
+};
+// Profiling config — bytecode storage cost only, no activation overhead
+// Activation is a one-time fixed cost; TCO comparison uses per-byte storage
+GasEstimator.STYLUS_PROFILE_CONFIG = {
+    baseGas: 21000,
+    activationGas: 300000,
+    perByteGas: 16,
+};
+GasEstimator.EVM_CONFIG = {
+    baseGas: 21000,
+    activationGas: 32000,
+    perByteGas: 200,
+};
+//# sourceMappingURL=gas-estimator.js.map

package/dist/utils/gas-estimator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gas-estimator.js","sourceRoot":"","sources":["../../src/utils/gas-estimator.ts"],"names":[],"mappings":";;;AAMA,MAAa,YAAY;IAsBvB;;;OAGG;IACH,MAAM,CAAC,qBAAqB,CAC1B,YAAoB,EACpB,QAA6B,EAC7B,mBAA2B,CAAC;QAE5B,MAAM,MAAM,GAAG,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QACjF,OAAO,IAAI,CAAC,IAAI,CACd,MAAM,CAAC,OAAO;YACd,MAAM,CAAC,aAAa;YACpB,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,gBAAgB,CAAC,CACtD,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,kBAAkB,CACvB,YAAoB,EACpB,QAA6B;QAE7B,MAAM,MAAM,GAAG,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;QAClF,OAAO,IAAI,CAAC,IAAI,CACd,MAAM,CAAC,OAAO;YACd,MAAM,CAAC,aAAa;YACpB,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,CACnC,CAAC;IACJ,CAAC;;AAtDH,oCAuDC;AAtDC,8EAA8E;AACtD,iCAAoB,GAAwB;IAClE,OAAO,EAAE,KAAK;IACd,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,wEAAwE;AACxE,4EAA4E;AACpD,kCAAqB,GAAwB;IACnE,OAAO,EAAE,KAAK;IACd,aAAa,EAAE,MAAM;IACrB,UAAU,EAAE,EAAE;CACf,CAAC;AAEsB,uBAAU,GAAwB;IACxD,OAAO,EAAE,KAAK;IACd,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,GAAG;CAChB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stylus-toolkit",
-  "version": "0.2.10",
+  "version": "2.0.0",
   "description": "A comprehensive CLI development environment for Arbitrum Stylus smart contracts with automated gas profiling",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -44,6 +44,7 @@
   "files": [
     "dist/",
     "src/templates/Cargo.lock",
+    "src/dashboard/",
     "README.md",
     "LICENSE"
   ],
@@ -56,16 +57,19 @@
     "dotenv": "^16.3.1",
     "ethers": "^6.9.0",
     "execa": "^5.1.1",
+    "express": "^4.18.2",
     "fast-csv": "^4.3.6",
     "fs-extra": "^11.2.0",
     "handlebars": "^4.7.8",
     "inquirer": "^8.2.6",
     "json2csv": "^6.0.0-alpha.2",
+    "open": "^8.4.2",
     "ora": "^5.4.1",
     "solc": "^0.8.33",
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+    "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^8.2.10",
     "@types/jest": "^29.5.11",

package/src/dashboard/dashboard.js

@@ -0,0 +1,276 @@
+async function loadData() {
+  try {
+    const response = await fetch('/data.json');
+    if (!response.ok) {
+      throw new Error('Failed to load data');
+    }
+    return await response.json();
+  } catch (error) {
+    throw new Error(`Error loading data: ${error.message}`);
+  }
+}
+
+function calculateStats(data) {
+  if (data.length === 0) {
+    return {
+      totalProfiles: 0,
+      avgSavings: 0,
+      maxSavings: 0,
+      contractsProfiled: 0
+    };
+  }
+
+  const totalProfiles = data.length;
+  const avgSavings = data.reduce((sum, r) => sum + r.tco.tcoPercentage, 0) / totalProfiles;
+  const maxSavings = Math.max(...data.map(r => r.tco.tcoPercentage));
+  const uniqueContracts = new Set(data.map(r => r.contractName));
+  const contractsProfiled = uniqueContracts.size;
+
+  return {
+    totalProfiles,
+    avgSavings: avgSavings.toFixed(2),
+    maxSavings: maxSavings.toFixed(2),
+    contractsProfiled
+  };
+}
+
+function renderStats(stats) {
+  const statsContainer = document.getElementById('stats');
+  statsContainer.innerHTML = `
+    <div class="stat-card">
+      <div class="stat-label">Total Profiles</div>
+      <div class="stat-value">${stats.totalProfiles}</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Average TCO Savings</div>
+      <div class="stat-value ${stats.avgSavings < 0 ? 'negative' : ''}">${stats.avgSavings}%</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Maximum Savings</div>
+      <div class="stat-value">${stats.maxSavings}%</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">Contracts Profiled</div>
+      <div class="stat-value">${stats.contractsProfiled}</div>
+    </div>
+  `;
+}
+
+function renderCharts(data) {
+  if (data.length === 0) {
+    return;
+  }
+
+  // TCO Trend Chart
+  const tcoCtx = document.getElementById('tcoChart').getContext('2d');
+  new Chart(tcoCtx, {
+    type: 'line',
+    data: {
+      labels: data.map(r => new Date(r.timestamp).toLocaleDateString()),
+      datasets: [
+        {
+          label: 'Rust (Stylus) TCO',
+          data: data.map(r => r.tco.rustTCO),
+          borderColor: 'rgb(139, 92, 246)',
+          backgroundColor: 'rgba(139, 92, 246, 0.1)',
+          tension: 0.4,
+          fill: true
+        },
+        {
+          label: 'Solidity TCO',
+          data: data.map(r => r.tco.solidityTCO),
+          borderColor: 'rgb(239, 68, 68)',
+          backgroundColor: 'rgba(239, 68, 68, 0.1)',
+          tension: 0.4,
+          fill: true
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: false
+        },
+        legend: {
+          labels: {
+            color: '#e2e8f0'
+          }
+        }
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8'
+          }
+        },
+        x: {
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8'
+          }
+        }
+      }
+    }
+  });
+
+  // Savings Percentage Chart
+  const savingsCtx = document.getElementById('savingsChart').getContext('2d');
+  new Chart(savingsCtx, {
+    type: 'bar',
+    data: {
+      labels: data.map((r, i) => `${r.contractName} (${new Date(r.timestamp).toLocaleDateString()})`),
+      datasets: [{
+        label: 'TCO Savings %',
+        data: data.map(r => r.tco.tcoPercentage),
+        backgroundColor: data.map(r => r.tco.tcoPercentage >= 0 ? 'rgba(16, 185, 129, 0.8)' : 'rgba(239, 68, 68, 0.8)'),
+        borderColor: data.map(r => r.tco.tcoPercentage >= 0 ? 'rgb(16, 185, 129)' : 'rgb(239, 68, 68)'),
+        borderWidth: 1
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: false
+        },
+        legend: {
+          labels: {
+            color: '#e2e8f0'
+          }
+        }
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8',
+            callback: function(value) {
+              return value + '%';
+            }
+          }
+        },
+        x: {
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8',
+            maxRotation: 45,
+            minRotation: 45
+          }
+        }
+      }
+    }
+  });
+
+  // Costs Breakdown Chart
+  const costsCtx = document.getElementById('costsChart').getContext('2d');
+  const latestData = data[data.length - 1];
+
+  new Chart(costsCtx, {
+    type: 'bar',
+    data: {
+      labels: ['Deployment', 'Execution (100 calls)'],
+      datasets: [
+        {
+          label: 'Rust (Stylus)',
+          data: [
+            latestData.rustProfile.deploymentGas,
+            latestData.tco.rustTCO - latestData.rustProfile.deploymentGas
+          ],
+          backgroundColor: 'rgba(139, 92, 246, 0.8)',
+          borderColor: 'rgb(139, 92, 246)',
+          borderWidth: 1
+        },
+        {
+          label: 'Solidity',
+          data: [
+            latestData.solidityProfile.deploymentGas,
+            latestData.tco.solidityTCO - latestData.solidityProfile.deploymentGas
+          ],
+          backgroundColor: 'rgba(239, 68, 68, 0.8)',
+          borderColor: 'rgb(239, 68, 68)',
+          borderWidth: 1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: false
+        },
+        legend: {
+          labels: {
+            color: '#e2e8f0'
+          }
+        }
+      },
+      scales: {
+        y: {
+          beginAtZero: true,
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8',
+            callback: function(value) {
+              return value.toLocaleString() + ' gas';
+            }
+          }
+        },
+        x: {
+          grid: {
+            color: '#334155'
+          },
+          ticks: {
+            color: '#94a3b8'
+          }
+        }
+      }
+    }
+  });
+}
+
+async function renderDashboard() {
+  const loadingEl = document.getElementById('loading');
+  const errorEl = document.getElementById('error');
+  const dashboardEl = document.getElementById('dashboard');
+
+  try {
+    const data = await loadData();
+
+    loadingEl.style.display = 'none';
+
+    if (data.length === 0) {
+      errorEl.style.display = 'block';
+      document.getElementById('error-message').textContent = 'No profiling data available yet. Run "stylus-toolkit profile" to generate data.';
+      return;
+    }
+
+    const stats = calculateStats(data);
+    renderStats(stats);
+    renderCharts(data);
+
+    dashboardEl.style.display = 'block';
+  } catch (error) {
+    loadingEl.style.display = 'none';
+    errorEl.style.display = 'block';
+    document.getElementById('error-message').textContent = error.message;
+  }
+}
+
+renderDashboard();

package/src/dashboard/index.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Stylus Toolkit - Gas Analytics Dashboard</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      background: #0f172a;
+      color: #e2e8f0;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+
+    header {
+      margin-bottom: 40px;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 10px;
+    }
+
+    .subtitle {
+      color: #94a3b8;
+      font-size: 1.1rem;
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 40px;
+    }
+
+    .stat-card {
+      background: #1e293b;
+      border-radius: 12px;
+      padding: 24px;
+      border: 1px solid #334155;
+    }
+
+    .stat-label {
+      color: #94a3b8;
+      font-size: 0.875rem;
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+      color: #10b981;
+    }
+
+    .stat-value.negative {
+      color: #ef4444;
+    }
+
+    .chart-container {
+      background: #1e293b;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+      border: 1px solid #334155;
+    }
+
+    .chart-title {
+      font-size: 1.5rem;
+      margin-bottom: 20px;
+      color: #f1f5f9;
+    }
+
+    canvas {
+      max-height: 400px;
+    }
+
+    .loading {
+      text-align: center;
+      padding: 60px;
+      color: #94a3b8;
+    }
+
+    .error {
+      background: #7f1d1d;
+      border: 1px solid #991b1b;
+      border-radius: 12px;
+      padding: 20px;
+      color: #fecaca;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>Stylus Toolkit Analytics</h1>
+      <p class="subtitle">Real-time gas profiling insights for your Arbitrum Stylus contracts</p>
+    </header>
+
+    <div id="loading" class="loading">
+      <p>Loading analytics data...</p>
+    </div>
+
+    <div id="error" class="error" style="display: none;">
+      <h3>Error Loading Data</h3>
+      <p id="error-message"></p>
+    </div>
+
+    <div id="dashboard" style="display: none;">
+      <div id="stats" class="stats-grid"></div>
+
+      <div class="chart-container">
+        <h2 class="chart-title">Total Cost of Ownership (TCO) Trends</h2>
+        <canvas id="tcoChart"></canvas>
+      </div>
+
+      <div class="chart-container">
+        <h2 class="chart-title">Gas Savings by Contract</h2>
+        <canvas id="savingsChart"></canvas>
+      </div>
+
+      <div class="chart-container">
+        <h2 class="chart-title">Deployment vs Execution Costs</h2>
+        <canvas id="costsChart"></canvas>
+      </div>
+    </div>
+  </div>
+
+  <script src="dashboard.js"></script>
+</body>
+</html>