create-stylus-ide 1.0.0

package/frontend/components/wallet/FaucetButton.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useChainId, useAccount } from 'wagmi';
+import { arbitrumSepolia } from 'wagmi/chains';
+import { Button } from '@/components/ui/button';
+import { Droplet, ExternalLink, Info } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+const FAUCETS = [
+  {
+    name: 'Triangle Platform',
+    url: 'https://faucet.triangleplatform.com/arbitrum/sepolia',
+    description: '0.001 ETH - No requirements',
+    recommended: true,
+  },
+  {
+    name: 'LearnWeb3 Faucet',
+    url: 'https://learnweb3.io/faucets/arbitrum_sepolia',
+    description: '0.0001 ETH - GitHub login',
+    recommended: true,
+  },
+  {
+    name: 'Arbitrum Bridge (Sepolia → Arb Sepolia)',
+    url: 'https://bridge.arbitrum.io/?destinationChain=arbitrum-sepolia&sourceChain=sepolia',
+    description: 'Bridge from Ethereum Sepolia',
+    isBridge: true,
+  },
+  {
+    name: 'Alchemy Faucet',
+    url: 'https://www.alchemy.com/faucets/arbitrum-sepolia',
+    description: 'Requires Alchemy account',
+  },
+  {
+    name: 'Chainlink Faucet',
+    url: 'https://faucets.chain.link/arbitrum-sepolia',
+    description: 'Requires mainnet balance',
+  },
+
+  // Orbit chain faucets
+  {
+    name: 'XAI Testnet Faucet',
+    url: 'https://faucet.xai.games',
+    description: 'Get sXAI testnet tokens',
+    isOrbit: true,
+  },
+  {
+    name: 'ApeChain Curtis Faucet',
+    url: 'https://curtis.hub.caldera.xyz/',
+    description: 'Get APE testnet tokens (via Caldera)',
+    isOrbit: true,
+  },
+  {
+    name: 'Nitrogen Testnet Faucet',
+    url: 'https://nitrogen-faucet.altlayer.io/',
+    description: 'Get ETH for Nitrogen testnet',
+    isOrbit: true,
+  },
+];
+
+// Ethereum Sepolia faucets (to bridge from)
+const ETH_SEPOLIA_FAUCETS = [
+  {
+    name: 'Alchemy Sepolia Faucet',
+    url: 'https://www.alchemy.com/faucets/ethereum-sepolia',
+    description: 'Get ETH Sepolia first',
+  },
+  {
+    name: 'Infura Sepolia Faucet',
+    url: 'https://www.infura.io/faucet/sepolia',
+    description: 'Alternative Sepolia source',
+  },
+];
+
+export function FaucetButton() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const chainId = useChainId();
+  const { address } = useAccount();
+
+  // ✅ Prevent hydration mismatch: render nothing until client mounted
+  if (!mounted) {
+    return null;
+  }
+
+  const recommendedFaucets = FAUCETS.filter((f) => f.recommended);
+  const bridgeFaucets = FAUCETS.filter((f) => f.isBridge);
+  const orbitFaucets = FAUCETS.filter((f) => f.isOrbit);
+  const otherFaucets = FAUCETS.filter((f) => !f.recommended && !f.isBridge && !f.isOrbit);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm" className="hidden sm:flex">
+          <Droplet className="h-4 w-4 mr-2" />
+          Faucet
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="w-80 max-h-96 overflow-y-auto custom-scrollbar">
+        <DropdownMenuLabel className="flex items-center gap-2">
+          <Droplet className="h-4 w-4" />
+          Get Free Testnet ETH
+        </DropdownMenuLabel>
+
+        <div className="px-2 py-2">
+          <Alert className="border-blue-500/20 bg-blue-500/10">
+            <Info className="h-4 w-4 text-blue-400" />
+            <AlertDescription className="text-xs text-blue-400">
+              You're on <strong>Arbitrum Sepolia</strong> (testnet) - all ETH is free!
+            </AlertDescription>
+          </Alert>
+        </div>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Direct Faucets (Recommended)
+        </DropdownMenuLabel>
+
+        {recommendedFaucets.map((faucet) => (
+          <DropdownMenuItem key={faucet.name} asChild className="cursor-pointer">
+            <a
+              href={faucet.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between w-full"
+            >
+              <div className="flex-1">
+                <div className="font-medium text-sm flex items-center gap-2">
+                  {faucet.name}
+                  <span className="text-xs bg-green-500/20 text-green-400 px-1.5 py-0.5 rounded">
+                    Easy
+                  </span>
+                </div>
+                <div className="text-xs text-muted-foreground">{faucet.description}</div>
+              </div>
+              <ExternalLink className="h-4 w-4 ml-2 shrink-0" />
+            </a>
+          </DropdownMenuItem>
+        ))}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Bridge Method (2 Steps)
+        </DropdownMenuLabel>
+
+        <div className="px-2 py-2 text-xs text-muted-foreground space-y-2">
+          <div>
+            <strong>Step 1:</strong> Get ETH Sepolia from:
+          </div>
+          {ETH_SEPOLIA_FAUCETS.map((faucet) => (
+            <a
+              key={faucet.name}
+              href={faucet.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 hover:text-foreground pl-4"
+            >
+              <ExternalLink className="h-3 w-3" />
+              {faucet.name}
+            </a>
+          ))}
+          <div className="pt-1">
+            <strong>Step 2:</strong> Bridge to Arbitrum Sepolia:
+          </div>
+        </div>
+
+        {bridgeFaucets.map((faucet) => (
+          <DropdownMenuItem key={faucet.name} asChild className="cursor-pointer">
+            <a
+              href={faucet.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between w-full"
+            >
+              <div className="flex-1">
+                <div className="font-medium text-sm">{faucet.name}</div>
+                <div className="text-xs text-muted-foreground">{faucet.description}</div>
+              </div>
+              <ExternalLink className="h-4 w-4 ml-2 shrink-0" />
+            </a>
+          </DropdownMenuItem>
+        ))}
+
+        {/* ✅ Orbit section */}
+        {orbitFaucets.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Orbit Chain Faucets
+            </DropdownMenuLabel>
+
+            {orbitFaucets.map((faucet) => (
+              <DropdownMenuItem key={faucet.name} asChild className="cursor-pointer">
+                <a
+                  href={faucet.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-start justify-between w-full"
+                >
+                  <div className="flex-1">
+                    <div className="font-medium text-sm">{faucet.name}</div>
+                    <div className="text-xs text-muted-foreground">{faucet.description}</div>
+                  </div>
+                  <ExternalLink className="h-4 w-4 ml-2 shrink-0" />
+                </a>
+              </DropdownMenuItem>
+            ))}
+          </>
+        )}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-xs text-muted-foreground">Other Options</DropdownMenuLabel>
+
+        {otherFaucets.map((faucet) => (
+          <DropdownMenuItem key={faucet.name} asChild className="cursor-pointer">
+            <a
+              href={faucet.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between w-full"
+            >
+              <div className="flex-1">
+                <div className="font-medium text-sm">{faucet.name}</div>
+                <div className="text-xs text-muted-foreground">{faucet.description}</div>
+              </div>
+              <ExternalLink className="h-4 w-4 ml-2 shrink-0" />
+            </a>
+          </DropdownMenuItem>
+        ))}
+
+        {address && (
+          <>
+            <DropdownMenuSeparator />
+            <div className="px-2 py-2 text-xs text-muted-foreground">
+              <strong>Your Address:</strong>
+              <code className="block mt-1 break-all bg-muted p-1 rounded">{address}</code>
+            </div>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/frontend/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/frontend/hooks/useAICompletion.ts

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+interface UseAICompletionReturn {
+  isLoading: boolean;
+  completion: string;
+  error: string | null;
+  generateCompletion: (prompt: string, context: string) => Promise<void>;
+  clearCompletion: () => void;
+}
+
+export function useAICompletion(): UseAICompletionReturn {
+  const [isLoading, setIsLoading] = useState(false);
+  const [completion, setCompletion] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const generateCompletion = useCallback(
+    async (prompt: string, context: string) => {
+      setIsLoading(true);
+      setCompletion("");
+      setError(null);
+
+      try {
+        const response = await fetch("/api/complete", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ prompt, context }),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to generate completion");
+        }
+
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+
+        if (!reader) {
+          throw new Error("No response body");
+        }
+
+        let accumulatedText = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          accumulatedText += chunk;
+          setCompletion(accumulatedText);
+        }
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Completion failed";
+        setError(errorMessage);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  const clearCompletion = useCallback(() => {
+    setCompletion("");
+    setError(null);
+  }, []);
+
+  return {
+    isLoading,
+    completion,
+    error,
+    generateCompletion,
+    clearCompletion,
+  };
+}

package/frontend/hooks/useBlockchainLoader.ts

@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { ContractInteractionData } from "@/types/blockchain";
+import { BlockchainURLInfo } from "@/lib/url-parser";
+import {
+  fetchContractForInteraction,
+  BlockchainLoadProgress,
+} from "@/lib/blockchain-loader";
+
+export function useBlockchainLoader() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [progress, setProgress] = useState<BlockchainLoadProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadFromBlockchain = useCallback(
+    async (
+      urlInfo: BlockchainURLInfo
+    ): Promise<ContractInteractionData | null> => {
+      setIsLoading(true);
+      setError(null);
+      setProgress(null);
+
+      try {
+        const contractData = await fetchContractForInteraction(
+          urlInfo,
+          (progressUpdate) => {
+            setProgress(progressUpdate);
+          }
+        );
+
+        setIsLoading(false);
+        return contractData;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Unknown error";
+        setError(errorMessage);
+        setIsLoading(false);
+        return null;
+      }
+    },
+    []
+  );
+
+  const reset = useCallback(() => {
+    setIsLoading(false);
+    setProgress(null);
+    setError(null);
+  }, []);
+
+  return {
+    isLoading,
+    progress,
+    error,
+    loadFromBlockchain,
+    reset,
+  };
+}

package/frontend/hooks/useChats.ts

@@ -0,0 +1,137 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  timestamp: number;
+}
+
+interface UseChatReturn {
+  messages: Message[];
+  isLoading: boolean;
+  error: string | null;
+  sendMessage: (content: string, context?: string) => Promise<void>;
+  clearMessages: () => void;
+}
+
+export function useChat(): UseChatReturn {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const sendMessage = useCallback(
+    async (content: string, context?: string) => {
+      if (!content.trim()) return;
+
+      // Add user message
+      const userMessage: Message = {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content: content.trim(),
+        timestamp: Date.now(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+      setIsLoading(true);
+      setError(null);
+
+      // Create assistant message placeholder
+      const assistantMessageId = `assistant-${Date.now()}`;
+      const assistantMessage: Message = {
+        id: assistantMessageId,
+        role: "assistant",
+        content: "",
+        timestamp: Date.now(),
+      };
+
+      setMessages((prev) => [...prev, assistantMessage]);
+
+      try {
+        // Cancel previous request if exists
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+
+        abortControllerRef.current = new AbortController();
+
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: messages.map((m) => ({
+              role: m.role,
+              content: m.content,
+            })),
+            context,
+          }),
+          signal: abortControllerRef.current.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to get response");
+        }
+
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+
+        if (!reader) {
+          throw new Error("No response body");
+        }
+
+        let accumulatedContent = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          accumulatedContent += chunk;
+
+          // Update assistant message with accumulated content
+          setMessages((prev) =>
+            prev.map((msg) =>
+              msg.id === assistantMessageId
+                ? { ...msg, content: accumulatedContent }
+                : msg
+            )
+          );
+        }
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          // Request was cancelled, ignore
+          return;
+        }
+
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to send message";
+        setError(errorMessage);
+
+        // Remove failed assistant message
+        setMessages((prev) =>
+          prev.filter((msg) => msg.id !== assistantMessageId)
+        );
+      } finally {
+        setIsLoading(false);
+        abortControllerRef.current = null;
+      }
+    },
+    [messages]
+  );
+
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+
+  return {
+    messages,
+    isLoading,
+    error,
+    sendMessage,
+    clearMessages,
+  };
+}