create-stylus-ide 1.0.0

package/frontend/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/frontend/scripts/check-env.js

@@ -0,0 +1,52 @@
+const { exec } = require('child_process');
+const { promisify } = require('util');
+
+const execAsync = promisify(exec);
+
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+};
+
+async function checkCommand(command) {
+  try {
+    await execAsync(command, { timeout: 5000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function main() {
+  console.log('\n━━━ Environment Check ━━━\n');
+
+  const checks = {
+    rust: await checkCommand('rustc --version'),
+    cargo: await checkCommand('cargo --version'),
+    wasmTarget: false,
+    cargoStylus: await checkCommand('cargo stylus --version'),
+  };
+
+  try {
+    const { stdout } = await execAsync('rustup target list', { timeout: 5000 });
+    checks.wasmTarget = stdout.includes('wasm32-unknown-unknown (installed)');
+  } catch {}
+
+  console.log(`${checks.rust ? colors.green : colors.red}Rust: ${checks.rust ? '✓' : '✗'}${colors.reset}`);
+  console.log(`${checks.cargo ? colors.green : colors.red}Cargo: ${checks.cargo ? '✓' : '✗'}${colors.reset}`);
+  console.log(`${checks.wasmTarget ? colors.green : colors.red}WASM Target: ${checks.wasmTarget ? '✓' : '✗'}${colors.reset}`);
+  console.log(`${checks.cargoStylus ? colors.green : colors.red}Cargo Stylus: ${checks.cargoStylus ? '✓' : '✗'}${colors.reset}`);
+
+  const allGood = checks.rust && checks.cargo && checks.wasmTarget && checks.cargoStylus;
+
+  if (allGood) {
+    console.log(`\n${colors.green}✓ All requirements met!${colors.reset}`);
+  } else {
+    console.log(`\n${colors.yellow}⚠ Run 'npm run setup' to install missing components${colors.reset}`);
+    process.exit(1);
+  }
+}
+
+main();

package/frontend/scripts/setup.js

@@ -0,0 +1,285 @@
+const { exec, spawn } = require('child_process');
+const { promisify } = require('util');
+const readline = require('readline');
+
+const execAsync = promisify(exec);
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+const colors = {
+  reset: '\x1b[0m',
+  green: '\x1b[32m',
+  red: '\x1b[31m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+};
+
+function log(message, color = colors.reset) {
+  console.log(`${color}${message}${colors.reset}`);
+}
+
+async function checkCommand(command) {
+  try {
+    await execAsync(command, { timeout: 5000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function getRustVersion() {
+  try {
+    const { stdout } = await execAsync('rustc --version', { timeout: 5000 });
+    const match = stdout.match(/rustc (\d+)\.(\d+)\.(\d+)/);
+    if (match) {
+      return {
+        major: parseInt(match[1]),
+        minor: parseInt(match[2]),
+        patch: parseInt(match[3]),
+        string: `${match[1]}.${match[2]}.${match[3]}`
+      };
+    }
+  } catch {}
+  return null;
+}
+
+function isRustVersionSufficient(version, minMajor = 1, minMinor = 88) {
+  if (!version) return false;
+  if (version.major > minMajor) return true;
+  if (version.major === minMajor && version.minor >= minMinor) return true;
+  return false;
+}
+
+async function runCommand(command, description) {
+  log(`\n${description}...`, colors.blue);
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, [], { 
+      shell: true, 
+      stdio: 'inherit' 
+    });
+    
+    child.on('close', (code) => {
+      if (code === 0) {
+        log('✓ Success', colors.green);
+        resolve();
+      } else {
+        log(`✗ Failed with code ${code}`, colors.red);
+        reject(new Error(`Command failed: ${command}`));
+      }
+    });
+  });
+}
+
+async function installRust(platform) {
+  log('\n━━━ Installing Rust ━━━', colors.yellow);
+  
+  if (platform === 'win32') {
+    log('\nWindows detected. Please:', colors.yellow);
+    log('1. Download Rust from: https://rustup.rs');
+    log('2. Run the installer (rustup-init.exe)');
+    log('3. Follow the installation prompts');
+    
+    const answer = await question('\nHave you installed Rust? (y/n): ');
+    if (answer.toLowerCase() !== 'y') {
+      throw new Error('Rust installation required');
+    }
+  } else {
+    // Unix-like systems
+    await runCommand(
+      "curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y",
+      'Downloading and installing Rust'
+    );
+    
+    // Source cargo env
+    log('\nConfiguring shell environment...', colors.blue);
+    process.env.PATH = `${process.env.HOME}/.cargo/bin:${process.env.PATH}`;
+  }
+}
+
+async function updateRust() {
+  log('\n━━━ Updating Rust ━━━', colors.yellow);
+  await runCommand('rustup update stable', 'Updating Rust to latest stable version');
+}
+
+async function installWasmTarget() {
+  log('\n━━━ Adding WASM Target ━━━', colors.yellow);
+  await runCommand(
+    'rustup target add wasm32-unknown-unknown',
+    'Installing wasm32-unknown-unknown target'
+  );
+}
+
+async function installCargoStylus(tryLocked = false) {
+  log('\n━━━ Installing Cargo Stylus ━━━', colors.yellow);
+  
+  const command = tryLocked 
+    ? 'cargo install cargo-stylus --locked'
+    : 'cargo install cargo-stylus';
+  
+  const description = tryLocked
+    ? 'Installing cargo-stylus with locked dependencies (this may take several minutes)'
+    : 'Installing cargo-stylus (this may take several minutes)';
+  
+  try {
+    await runCommand(command, description);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+async function checkStatus() {
+  log('\n━━━ Checking Current Status ━━━', colors.yellow);
+  
+  const checks = {
+    rust: await checkCommand('rustc --version'),
+    cargo: await checkCommand('cargo --version'),
+    wasmTarget: false,
+    cargoStylus: await checkCommand('cargo stylus --version'),
+    rustVersion: null,
+  };
+
+  // Get Rust version
+  checks.rustVersion = await getRustVersion();
+
+  // Check wasm target
+  try {
+    const { stdout } = await execAsync('rustup target list', { timeout: 5000 });
+    checks.wasmTarget = stdout.includes('wasm32-unknown-unknown (installed)');
+  } catch {
+    checks.wasmTarget = false;
+  }
+
+  log(`Rust: ${checks.rust ? '✓' : '✗'}`, checks.rust ? colors.green : colors.red);
+  if (checks.rustVersion) {
+    log(`  Version: ${checks.rustVersion.string}`, colors.cyan);
+  }
+  log(`Cargo: ${checks.cargo ? '✓' : '✗'}`, checks.cargo ? colors.green : colors.red);
+  log(`WASM Target: ${checks.wasmTarget ? '✓' : '✗'}`, checks.wasmTarget ? colors.green : colors.red);
+  log(`Cargo Stylus: ${checks.cargoStylus ? '✓' : '✗'}`, checks.cargoStylus ? colors.green : colors.red);
+
+  return checks;
+}
+
+async function main() {
+  log('\n╔═══════════════════════════════════════╗', colors.blue);
+  log('║   Stylus IDE Environment Setup       ║', colors.blue);
+  log('╚═══════════════════════════════════════╝\n', colors.blue);
+
+  const platform = process.platform;
+  log(`Detected platform: ${platform}`, colors.blue);
+
+  try {
+    // Check current status
+    const status = await checkStatus();
+
+    // Install Rust if missing
+    if (!status.rust || !status.cargo) {
+      const answer = await question('\nRust is not installed. Install now? (y/n): ');
+      if (answer.toLowerCase() === 'y') {
+        await installRust(platform);
+        log('\n⚠ Please restart your terminal and run this script again.', colors.yellow);
+        log('After restarting, run: npm run setup', colors.cyan);
+        process.exit(0);
+      } else {
+        throw new Error('Rust installation required');
+      }
+    }
+
+    // Check Rust version for cargo-stylus compatibility
+    const rustVersion = status.rustVersion;
+    const minRustVersion = { major: 1, minor: 88 };
+    
+    if (rustVersion && !isRustVersionSufficient(rustVersion, minRustVersion.major, minRustVersion.minor)) {
+      log(`\n⚠ Warning: Rust ${rustVersion.string} detected`, colors.yellow);
+      log(`  cargo-stylus v0.6.3+ requires Rust ${minRustVersion.major}.${minRustVersion.minor}+`, colors.yellow);
+      log(`  You may encounter errors during cargo-stylus installation.\n`, colors.yellow);
+      
+      const answer = await question(`Upgrade Rust to latest stable (recommended)? (y/n): `);
+      if (answer.toLowerCase() === 'y') {
+        await updateRust();
+        
+        // Re-check version
+        const newVersion = await getRustVersion();
+        if (newVersion) {
+          log(`\n✓ Rust updated to ${newVersion.string}`, colors.green);
+        }
+      }
+    }
+
+    // Install WASM target
+    if (!status.wasmTarget) {
+      const answer = await question('\nWASM target is not installed. Install now? (y/n): ');
+      if (answer.toLowerCase() === 'y') {
+        await installWasmTarget();
+      } else {
+        throw new Error('WASM target required');
+      }
+    }
+
+    // Install Cargo Stylus
+    if (!status.cargoStylus) {
+      const answer = await question('\nCargo Stylus is not installed. Install now? (y/n): ');
+      if (answer.toLowerCase() === 'y') {
+        // Try normal install first
+        log('\nAttempting standard installation...', colors.blue);
+        const success = await installCargoStylus(false);
+        
+        if (!success) {
+          log('\n⚠ Standard installation failed. This might be due to:', colors.yellow);
+          log('  - Rust version incompatibility', colors.yellow);
+          log('  - Network issues', colors.yellow);
+          log('  - Missing system dependencies\n', colors.yellow);
+          
+          const retryAnswer = await question('Try installation with --locked flag? (y/n): ');
+          if (retryAnswer.toLowerCase() === 'y') {
+            const lockedSuccess = await installCargoStylus(true);
+            
+            if (!lockedSuccess) {
+              log('\n✗ Installation with --locked also failed.', colors.red);
+              log('\nPossible solutions:', colors.yellow);
+              log('1. Update Rust: rustup update stable', colors.cyan);
+              log('2. Check system requirements: https://docs.arbitrum.io/stylus/stylus-quickstart', colors.cyan);
+              log('3. Try manual installation: cargo install cargo-stylus --force', colors.cyan);
+              throw new Error('cargo-stylus installation failed');
+            }
+          } else {
+            throw new Error('cargo-stylus installation required');
+          }
+        }
+      } else {
+        throw new Error('cargo-stylus installation required');
+      }
+    }
+
+    // Final check
+    log('\n━━━ Final Status ━━━', colors.yellow);
+    const finalStatus = await checkStatus();
+    
+    const allGood = finalStatus.rust && finalStatus.cargo && 
+                    finalStatus.wasmTarget && finalStatus.cargoStylus;
+
+    if (allGood) {
+      log('\n✓ Setup complete! You\'re ready to use Stylus IDE.', colors.green);
+      log('\nRun: npm run dev', colors.cyan);
+    } else {
+      log('\n⚠ Some components are still missing.', colors.yellow);
+      log('Please review the errors above and try again.', colors.yellow);
+      process.exit(1);
+    }
+
+  } catch (error) {
+    log(`\n✗ Setup failed: ${error.message}`, colors.red);
+    process.exit(1);
+  } finally {
+    rl.close();
+  }
+}
+
+main();

package/frontend/tailwind.config.ts

@@ -0,0 +1,64 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: "class",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;

package/frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/frontend/types/blockchain.ts

@@ -0,0 +1,63 @@
+/**
+ * Blockchain explorer types
+ */
+
+// types/blockchain.ts
+export interface BlockchainExplorerConfig {
+  name: string;
+  chain: string;
+  network: string;
+  chainId: number; // ✅ add this
+  apiUrl: string;
+  explorerUrl: string;
+  apiKeyRequired: boolean;
+}
+
+export interface ContractSourceCode {
+  SourceCode: string;
+  ABI: string;
+  ContractName: string;
+  CompilerVersion: string;
+  OptimizationUsed: string;
+  Runs: string;
+  ConstructorArguments: string;
+  EVMVersion: string;
+  Library: string;
+  LicenseType: string;
+  Proxy: string;
+  Implementation: string;
+  SwarmSource: string;
+}
+
+export interface ExplorerAPIResponse {
+  status: string;
+  message: string;
+  result: ContractSourceCode[] | string;
+}
+
+export interface ParsedContractSource {
+  type: "single" | "multi-file" | "flattened";
+  files: {
+    path: string;
+    content: string;
+  }[];
+  mainFile: string;
+}
+
+// Add to existing file (keep everything else)
+
+/**
+ * Contract data for interaction (not loading to editor)
+ */
+export interface ContractInteractionData {
+  address: string;
+  name: string;
+  chain: string;
+  network: string;
+  chainId: number;
+  abi: string; // JSON string
+  verified: boolean;
+  compiler?: string;
+  optimization?: boolean;
+  explorerUrl: string;
+}

package/frontend/types/github.ts

@@ -0,0 +1,54 @@
+/**
+ * GitHub API types
+ */
+
+export interface GitHubFile {
+  path: string;
+  mode: string;
+  type: "blob" | "tree";
+  sha: string;
+  size?: number;
+  url: string;
+}
+
+export interface GitHubTree {
+  sha: string;
+  url: string;
+  tree: GitHubFile[];
+  truncated: boolean;
+}
+
+export interface GitHubContent {
+  name: string;
+  path: string;
+  sha: string;
+  size: number;
+  url: string;
+  html_url: string;
+  git_url: string;
+  download_url: string;
+  type: "file" | "dir";
+  content?: string; // Base64 encoded
+  encoding?: string;
+}
+
+export interface GitHubRepo {
+  id: number;
+  name: string;
+  full_name: string;
+  owner: {
+    login: string;
+    avatar_url: string;
+  };
+  description: string | null;
+  default_branch: string;
+  created_at: string;
+  updated_at: string;
+  stargazers_count: number;
+  language: string | null;
+}
+
+export interface GitHubError {
+  message: string;
+  documentation_url?: string;
+}

package/frontend/types/project.ts

@@ -0,0 +1,106 @@
+/**
+ * Project File Structure Types
+ * Core data structures for multi-file project management
+ */
+
+export interface ProjectFile {
+  id: string; // Unique identifier (uuid)
+  path: string; // Full path: 'src/lib.rs'
+  name: string; // File name: 'lib.rs'
+  content: string; // File content
+  language: "rust" | "toml" | "markdown" | "text" | "gitignore";
+  modified: boolean; // Has unsaved changes
+  isOpen: boolean; // Is currently open in a tab
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// ✅ KEEP ONLY THIS ONE ProjectState (delete the duplicate below)
+export interface ProjectState {
+  id: string;
+  name: string;
+  type: "stylus-contract" | "stylus-library";
+  files: ProjectFile[];
+  structure: FileNode[];
+  activeFilePath: string | null;
+  source: string;
+  createdAt: Date;
+  updatedAt: Date;
+  metadata?: {
+    source?: "github" | "blockchain" | "local";
+    owner?: string;
+    repo?: string;
+    branch?: string;
+    url?: string;
+    loadedAt?: string;
+    chain?: string;
+    address?: string;
+    folderPath?: string; // ✅ Make sure this is here
+  };
+}
+
+export interface FileNode {
+  id: string; // Unique identifier
+  name: string; // Display name
+  path: string; // Full path
+  type: "file" | "folder";
+  children?: FileNode[]; // For folders only
+  expanded?: boolean; // Folder expansion state
+  parentId?: string | null; // Parent folder ID
+}
+
+// ❌ DELETE THIS DUPLICATE - You have ProjectState declared twice!
+// export interface ProjectState {
+//   id: string;
+//   name: string;
+//   files: ProjectFile[];
+//   structure: FileNode[];
+//   activeFilePath: string | null;
+//   source: string;
+//   createdAt: Date;
+//   updatedAt: Date;
+//   metadata?: { ... }
+// }
+
+export interface ProjectMetadata {
+  // For GitHub-loaded projects
+  githubUrl?: string;
+  owner?: string;
+  repo?: string;
+  branch?: string;
+
+  // For on-chain loaded contracts
+  contractAddress?: string;
+  chainId?: number;
+  verified?: boolean;
+  verifiedAt?: Date;
+  compiler?: string;
+
+  // General
+  description?: string;
+  tags?: string[];
+}
+
+export interface CreateFileOptions {
+  path: string;
+  content?: string;
+  language?: ProjectFile["language"];
+}
+
+export interface CreateFolderOptions {
+  path: string;
+}
+
+export interface MoveFileOptions {
+  fromPath: string;
+  toPath: string;
+}
+
+export interface RenameOptions {
+  oldPath: string;
+  newPath: string;
+}
+
+// Helper types
+export type FileLanguage = ProjectFile["language"];
+export type ProjectSource = ProjectState["source"];