create-stylus-ide 1.0.0

package/frontend/lib/blockchain-api.ts

@@ -0,0 +1,374 @@
+/**
+ * Blockchain explorer API client
+ */
+
+import {
+  ExplorerAPIResponse,
+  ContractSourceCode,
+  ParsedContractSource,
+} from "@/types/blockchain";
+import { getExplorerConfig } from "@/lib/blockchain-explorers";
+
+export class BlockchainAPIError extends Error {
+  constructor(
+    message: string,
+    public statusCode?: number,
+    public isNotVerified: boolean = false,
+    public isInvalidAddress: boolean = false,
+    public isAPIKeyMissing: boolean = false
+  ) {
+    super(message);
+    this.name = "BlockchainAPIError";
+  }
+}
+
+/**
+ * Blockchain API Client
+ */
+export class BlockchainAPIClient {
+  private apiKeys: Record<string, string> = {};
+
+  constructor() {
+    // Load API keys from environment (client-side only)
+    if (typeof window !== "undefined") {
+      console.log("🔑 Loading API keys from environment...");
+
+      const arbiscanKey = process.env.NEXT_PUBLIC_ARBISCAN_API_KEY;
+      const etherscanKey = process.env.NEXT_PUBLIC_ETHERSCAN_API_KEY;
+      const basescanKey = process.env.NEXT_PUBLIC_BASESCAN_API_KEY;
+
+      console.log("Available keys:", {
+        arbiscan: !!arbiscanKey,
+        etherscan: !!etherscanKey,
+        basescan: !!basescanKey,
+      });
+
+      this.apiKeys = {
+        "arbiscan.io": arbiscanKey || "",
+        "sepolia.arbiscan.io": arbiscanKey || "", // Use same key for testnet
+        "etherscan.io": etherscanKey || "",
+        "sepolia.etherscan.io": etherscanKey || "",
+        "basescan.org": basescanKey || "",
+      };
+    }
+  }
+
+  /**
+   * Fetch contract source code from explorer
+   */
+  async getContractSource(
+    explorerDomain: string,
+    address: string
+  ): Promise<ContractSourceCode> {
+    const config = getExplorerConfig(explorerDomain);
+
+    if (!config) {
+      throw new BlockchainAPIError(
+        `Unsupported blockchain explorer: ${explorerDomain}`,
+        0,
+        false,
+        false,
+        false
+      );
+    }
+
+    // Get API key for this explorer (for V2: typically your Etherscan API key)
+    const apiKey = this.apiKeys[explorerDomain] || "";
+
+    console.log("🔍 API Key check:", {
+      domain: explorerDomain,
+      hasKey: !!apiKey,
+      keyPreview: apiKey ? apiKey.slice(0, 10) + "..." : "none",
+    });
+
+    if (!apiKey && config.apiKeyRequired) {
+      throw new BlockchainAPIError(
+        `API key required for ${config.name}. Please add NEXT_PUBLIC_ETHERSCAN_API_KEY to your .env.local file.`,
+        0,
+        false,
+        false,
+        true
+      );
+    }
+
+    // --- V2 IMPORTANT: include chainid (default is 1, but you should always pass it) ---
+    // Ensure your BlockchainExplorerConfig includes chainId:number
+    const chainId =
+      (config as any).chainId ??
+      (config.network === "sepolia" && config.chain === "ethereum"
+        ? 11155111
+        : config.network === "mainnet" && config.chain === "ethereum"
+        ? 1
+        : undefined);
+
+    if (!chainId) {
+      throw new BlockchainAPIError(
+        `Missing chainId for explorer ${config.name}. Add chainId to BLOCKCHAIN_EXPLORERS config.`,
+        0
+      );
+    }
+
+    const params = new URLSearchParams({
+      chainid: String(chainId), // ✅ V2
+      module: "contract",
+      action: "getsourcecode",
+      address,
+    });
+
+    if (apiKey) params.set("apikey", apiKey);
+
+    const url = `${config.apiUrl}?${params.toString()}`;
+
+    console.log("📡 API Request:", {
+      url: apiKey ? url.replace(apiKey, "API_KEY_HIDDEN") : url,
+      address,
+      chainId,
+    });
+
+    try {
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new BlockchainAPIError(
+          `Failed to fetch from ${config.name}: ${response.statusText}`,
+          response.status
+        );
+      }
+
+      const data: ExplorerAPIResponse = await response.json();
+
+      console.log("📦 API Response:", {
+        status: data.status,
+        message: data.message,
+        hasResult: !!data.result,
+      });
+
+      // Check API response status
+      if (data.status !== "1") {
+        console.error("❌ API Error Details:", data);
+
+        const resultText = typeof data.result === "string" ? data.result : "";
+        const combinedText = `${data.message || ""} ${resultText || ""}`.trim();
+
+        // V1 deprecation message (means you're still hitting a V1 endpoint somewhere)
+        if (combinedText.toLowerCase().includes("deprecated v1 endpoint")) {
+          throw new BlockchainAPIError(
+            `You are hitting a deprecated V1 endpoint. Ensure config.apiUrl is "https://api.etherscan.io/v2/api" and you pass "chainid" for ${config.chain} ${config.network}.`,
+            0
+          );
+        }
+
+        // Invalid API key (often comes via result text in V2)
+        if (combinedText.toLowerCase().includes("invalid api key")) {
+          throw new BlockchainAPIError(
+            `Invalid API key for ${config.name}. Please check NEXT_PUBLIC_ETHERSCAN_API_KEY.`,
+            0,
+            false,
+            false,
+            true
+          );
+        }
+
+        // Some V2 errors are returned as NOTOK with details in `result`
+        if (data.message === "NOTOK") {
+          throw new BlockchainAPIError(
+            `API request failed: ${
+              resultText || data.message
+            }\n\nChecks:\n1) API key is valid\n2) Contract address is correct\n3) Correct chainid (${chainId}) for ${
+              config.chain
+            } ${config.network}`,
+            0
+          );
+        }
+
+        throw new BlockchainAPIError(
+          `API Error: ${combinedText || "Unknown error"}`,
+          0
+        );
+      }
+
+      // Parse result
+      const result = Array.isArray(data.result) ? data.result[0] : data.result;
+
+      if (!result || typeof result === "string") {
+        throw new BlockchainAPIError("Invalid response from explorer API", 0);
+      }
+
+      const sourceCode = result as ContractSourceCode;
+
+      // Check if contract is verified
+      if (!sourceCode.SourceCode || sourceCode.SourceCode === "") {
+        throw new BlockchainAPIError(
+          "Contract is not verified on this explorer",
+          0,
+          true
+        );
+      }
+
+      console.log("✅ Contract loaded:", sourceCode.ContractName);
+
+      return sourceCode;
+    } catch (error) {
+      if (error instanceof BlockchainAPIError) {
+        throw error;
+      }
+
+      console.error("❌ Network/Unknown error:", error);
+      throw new BlockchainAPIError(
+        "Network error. Please check your connection and try again.",
+        0
+      );
+    }
+  }
+
+  /**
+   * Parse contract source code into files
+   */
+  parseContractSource(sourceCode: ContractSourceCode): ParsedContractSource {
+    const rawSource = sourceCode.SourceCode;
+
+    console.log("🔍 Parsing contract source...");
+    console.log("Raw source length:", rawSource.length);
+    console.log("First 100 chars:", rawSource.substring(0, 100));
+
+    // Check if it's multi-file (JSON format)
+    if (rawSource.startsWith("{")) {
+      try {
+        let parsed: any;
+
+        // Try double-brace format first: {{...}}
+        if (rawSource.startsWith("{{") && rawSource.endsWith("}}")) {
+          console.log("📦 Detected double-brace format");
+          const jsonStr = rawSource.slice(1, -1);
+          parsed = JSON.parse(jsonStr);
+        } else {
+          console.log("📦 Detected standard JSON format");
+          parsed = JSON.parse(rawSource);
+        }
+
+        console.log("Parsed keys:", Object.keys(parsed));
+
+        // Standard JSON format: { "language": "Solidity", "sources": {...} }
+        if (parsed.sources) {
+          console.log("✅ Using standard JSON sources format");
+          console.log("Source files:", Object.keys(parsed.sources));
+
+          const files = Object.entries(parsed.sources).map(
+            ([path, sourceObj]: [string, any]) => {
+              // Clean path
+              const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+
+              // Extract content - handle different structures
+              let content = "";
+              if (typeof sourceObj === "string") {
+                content = sourceObj;
+              } else if (sourceObj && typeof sourceObj === "object") {
+                content = sourceObj.content || sourceObj.source || "";
+              }
+
+              console.log(`  - ${cleanPath}: ${content.length} bytes`);
+
+              return {
+                path: cleanPath,
+                content,
+              };
+            }
+          );
+
+          // Also include language and settings as files if present
+          if (parsed.language) {
+            files.push({
+              path: "metadata/language.txt",
+              content: parsed.language,
+            });
+          }
+
+          if (parsed.settings) {
+            files.push({
+              path: "metadata/settings.json",
+              content: JSON.stringify(parsed.settings, null, 2),
+            });
+          }
+
+          return {
+            type: "multi-file",
+            files: files.filter((f) => f.content && f.content.length > 0), // Filter empty files
+            mainFile: files[0]?.path || "Contract.sol",
+          };
+        }
+
+        // Legacy format: { "Contract.sol": {...}, "OtherFile.sol": {...} }
+        console.log("✅ Using legacy JSON format");
+        const files = Object.entries(parsed)
+          .filter(([key]) => !["language", "settings"].includes(key))
+          .map(([path, sourceObj]: [string, any]) => {
+            const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+
+            let content = "";
+            if (typeof sourceObj === "string") {
+              content = sourceObj;
+            } else if (sourceObj && typeof sourceObj === "object") {
+              content = sourceObj.content || sourceObj.source || "";
+            }
+
+            console.log(`  - ${cleanPath}: ${content.length} bytes`);
+
+            return {
+              path: cleanPath,
+              content,
+            };
+          })
+          .filter((f) => f.content && f.content.length > 0);
+
+        if (files.length === 0) {
+          throw new Error("No valid source files found in JSON");
+        }
+
+        return {
+          type: "multi-file",
+          files,
+          mainFile: files[0]?.path || "Contract.sol",
+        };
+      } catch (error) {
+        console.error("❌ Failed to parse JSON:", error);
+        console.log("Falling back to single file mode");
+      }
+    }
+
+    // Single file or flattened contract
+    console.log("📄 Using single file format");
+    const fileName = `${sourceCode.ContractName}.sol`;
+
+    if (!rawSource || rawSource.length === 0) {
+      throw new Error("Source code is empty");
+    }
+
+    return {
+      type: rawSource.includes("// File:") ? "flattened" : "single",
+      files: [
+        {
+          path: fileName,
+          content: rawSource,
+        },
+      ],
+      mainFile: fileName,
+    };
+  }
+
+  /**
+   * Set API key for an explorer
+   */
+  setAPIKey(explorerDomain: string, apiKey: string): void {
+    this.apiKeys[explorerDomain] = apiKey;
+  }
+
+  /**
+   * Check if API key is set for explorer
+   */
+  hasAPIKey(explorerDomain: string): boolean {
+    return !!this.apiKeys[explorerDomain];
+  }
+}
+
+// Export singleton instance
+export const blockchainAPI = new BlockchainAPIClient();

package/frontend/lib/blockchain-explorers.ts

@@ -0,0 +1,75 @@
+// lib/blockchain-explorers.ts
+import { BlockchainExplorerConfig } from "@/types/blockchain";
+
+const ETHERSCAN_V2_BASE = "https://api.etherscan.io/v2/api";
+
+export const BLOCKCHAIN_EXPLORERS: Record<string, BlockchainExplorerConfig> = {
+  "etherscan.io": {
+    name: "Etherscan",
+    chain: "ethereum",
+    network: "mainnet",
+    chainId: 1,
+    apiUrl: ETHERSCAN_V2_BASE,
+    explorerUrl: "https://etherscan.io",
+    apiKeyRequired: true,
+  },
+  "sepolia.etherscan.io": {
+    name: "Sepolia Etherscan",
+    chain: "ethereum",
+    network: "sepolia",
+    chainId: 11155111,
+    apiUrl: ETHERSCAN_V2_BASE, // ✅ don't use api-sepolia host for V2
+    explorerUrl: "https://sepolia.etherscan.io",
+    apiKeyRequired: true,
+  },
+  "arbiscan.io": {
+    name: "Arbiscan",
+    chain: "arbitrum",
+    network: "mainnet",
+    chainId: 42161,
+    apiUrl: ETHERSCAN_V2_BASE, // ✅ unified V2 base
+    explorerUrl: "https://arbiscan.io",
+    apiKeyRequired: true,
+  },
+  "sepolia.arbiscan.io": {
+    name: "Arbiscan Sepolia",
+    chain: "arbitrum",
+    network: "sepolia",
+    chainId: 421614,
+    apiUrl: ETHERSCAN_V2_BASE,
+    explorerUrl: "https://sepolia.arbiscan.io",
+    apiKeyRequired: true,
+  },
+  "basescan.org": {
+    name: "Basescan",
+    chain: "base",
+    network: "mainnet",
+    chainId: 8453,
+    apiUrl: ETHERSCAN_V2_BASE,
+    explorerUrl: "https://basescan.org",
+    apiKeyRequired: true,
+  },
+};
+
+/**
+ * Get explorer config by domain
+ */
+export function getExplorerConfig(
+  domain: string
+): BlockchainExplorerConfig | null {
+  return BLOCKCHAIN_EXPLORERS[domain] || null;
+}
+
+/**
+ * Get all supported explorers
+ */
+export function getSupportedExplorers(): BlockchainExplorerConfig[] {
+  return Object.values(BLOCKCHAIN_EXPLORERS);
+}
+
+/**
+ * Check if domain is a supported explorer
+ */
+export function isSupportedExplorer(domain: string): boolean {
+  return domain in BLOCKCHAIN_EXPLORERS;
+}

package/frontend/lib/blockchain-loader.ts

@@ -0,0 +1,112 @@
+/**
+ * Blockchain contract loader - for interaction panel, not editor
+ */
+
+import { ContractInteractionData } from "@/types/blockchain";
+import { BlockchainURLInfo } from "@/lib/url-parser";
+import { blockchainAPI } from "@/lib/blockchain-api";
+import { getExplorerConfig } from "@/lib/blockchain-explorers";
+
+export interface BlockchainLoadProgress {
+  stage: "validating" | "fetching" | "parsing" | "complete" | "error";
+  message: string;
+  progress: number; // 0-100
+  contractName?: string;
+}
+
+export type BlockchainProgressCallback = (
+  progress: BlockchainLoadProgress
+) => void;
+
+/**
+ * Fetch contract data for interaction (not for editor)
+ */
+export async function fetchContractForInteraction(
+  urlInfo: BlockchainURLInfo,
+  onProgress?: BlockchainProgressCallback
+): Promise<ContractInteractionData> {
+  const { explorerDomain, address, chain, network } = urlInfo;
+
+  try {
+    // Stage 1: Validate address format
+    onProgress?.({
+      stage: "validating",
+      message: "Validating contract address...",
+      progress: 10,
+    });
+
+    if (!address.match(/^0x[a-fA-F0-9]{40}$/)) {
+      throw new Error("Invalid Ethereum address format");
+    }
+
+    // Stage 2: Fetch contract source + ABI
+    onProgress?.({
+      stage: "fetching",
+      message: `Fetching contract from ${chain}...`,
+      progress: 40,
+    });
+
+    const sourceCode = await blockchainAPI.getContractSource(
+      explorerDomain,
+      address
+    );
+
+    onProgress?.({
+      stage: "fetching",
+      message: `Found contract: ${sourceCode.ContractName}`,
+      progress: 70,
+      contractName: sourceCode.ContractName,
+    });
+
+    // Stage 3: Extract ABI
+    onProgress?.({
+      stage: "parsing",
+      message: "Extracting contract ABI...",
+      progress: 85,
+    });
+
+    if (!sourceCode.ABI || sourceCode.ABI === "") {
+      throw new Error("Contract ABI not available");
+    }
+
+    // Get explorer config for URL
+    const explorerConfig = getExplorerConfig(explorerDomain);
+    const explorerUrl = explorerConfig
+      ? `${explorerConfig.explorerUrl}/address/${address}`
+      : urlInfo.rawUrl;
+
+    // Build contract interaction data
+    const contractData: ContractInteractionData = {
+      address,
+      name: sourceCode.ContractName,
+      chain,
+      network,
+      chainId: explorerConfig?.chainId || 0,
+      abi: sourceCode.ABI,
+      verified: true,
+      compiler: sourceCode.CompilerVersion,
+      optimization: sourceCode.OptimizationUsed === "1",
+      explorerUrl,
+    };
+
+    onProgress?.({
+      stage: "complete",
+      message: `Ready to interact with ${sourceCode.ContractName}`,
+      progress: 100,
+      contractName: sourceCode.ContractName,
+    });
+
+    return contractData;
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error";
+
+    onProgress?.({
+      stage: "error",
+      message: errorMessage,
+      progress: 0,
+    });
+
+    throw error;
+  }
+}

package/frontend/lib/cargo-template.ts

@@ -0,0 +1,64 @@
+export const CARGO_TOML_TEMPLATE = `[package]
+name = "stylus-hello-world"
+version = "0.1.11"
+edition = "2021"
+license = "MIT OR Apache-2.0"
+homepage = "https://github.com/OffchainLabs/stylus-hello-world"
+repository = "https://github.com/OffchainLabs/stylus-hello-world"
+keywords = ["arbitrum", "ethereum", "stylus", "alloy"]
+description = "Stylus hello world example"
+
+[dependencies]
+alloy-primitives = "=0.8.20"
+alloy-sol-types = "=0.8.20"
+stylus-sdk = "0.9.0"
+hex = { version = "0.4", default-features = false }
+
+[dev-dependencies]
+alloy-primitives = { version = "=0.8.20", features = ["sha3-keccak"] }
+tokio = { version = "1.12.0", features = ["full"] }
+ethers = "2.0"
+eyre = "0.6.8"
+stylus-sdk = { version = "0.9.0", features = ["stylus-test"] }
+dotenv = "0.15.0"
+
+[features]
+default = ["mini-alloc"]
+export-abi = ["stylus-sdk/export-abi"]
+debug = ["stylus-sdk/debug"]
+mini-alloc = ["stylus-sdk/mini-alloc"]
+
+[[bin]]
+name = "stylus-hello-world"
+path = "src/main.rs"
+required-features = ["export-abi"]
+
+[lib]
+crate-type = ["lib", "cdylib"]
+
+[profile.release]
+codegen-units = 1
+strip = true
+lto = true
+panic = "abort"
+opt-level = 3
+`;
+
+export const RUST_TOOLCHAIN_TOML = `[toolchain]
+channel = "1.87.0"
+targets = ["wasm32-unknown-unknown"]
+`;
+
+export const MAIN_RS_TEMPLATE = `#![cfg_attr(not(feature = "export-abi"), no_main)]
+
+#[cfg(feature = "export-abi")]
+fn main() {
+    // Generated by Stylus when #[entrypoint] + #[public] exist in src/lib.rs
+    stylus_hello_world::print_abi("MIT-OR-APACHE-2.0", "pragma solidity ^0.8.23;");
+}
+`;
+
+export const GITIGNORE_TEMPLATE = `target/
+.DS_Store
+Cargo.lock
+`;