create-stylus-ide 1.0.0

package/frontend/components/github/LoadFromGitHubDialog.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Github, Loader2 } from 'lucide-react';
+import { parseURL } from '@/lib/url-parser';
+
+interface LoadFromGitHubDialogProps {
+  onLoadURL: (url: string) => void;
+  isLoading?: boolean;
+}
+
+export function LoadFromGitHubDialog({ onLoadURL, isLoading }: LoadFromGitHubDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (!url.trim()) {
+      setError('Please enter a GitHub URL');
+      return;
+    }
+
+    const parsed = parseURL(url.trim());
+
+    if (parsed.type !== 'github') {
+      setError('Please enter a valid GitHub repository URL');
+      return;
+    }
+
+    onLoadURL(url.trim());
+    setOpen(false);
+    setUrl('');
+  };
+
+  const exampleRepos = [
+    {
+      name: 'Stylus Hello World',
+      url: 'https://github.com/OffchainLabs/stylus-hello-world',
+    },
+    {
+      name: 'Stylus Workshop',
+      url: 'https://github.com/OffchainLabs/stylus-workshop-rust-solidity',
+    },
+  ];
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-2">
+          <Github className="h-4 w-4" />
+          <span className="hidden md:inline">Load from GitHub</span>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Load from GitHub</DialogTitle>
+          <DialogDescription>
+            Enter a GitHub repository URL to load it into the IDE
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="github-url">Repository URL</Label>
+            <Input
+              id="github-url"
+              placeholder="https://github.com/owner/repo"
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setError('');
+              }}
+              disabled={isLoading}
+            />
+            {error && <p className="text-sm text-red-500">{error}</p>}
+          </div>
+
+          {/* Example Repos */}
+          <div className="space-y-2">
+            <Label className="text-xs text-muted-foreground">Quick Examples:</Label>
+            <div className="space-y-1">
+              {exampleRepos.map((repo) => (
+                <button
+                  key={repo.url}
+                  type="button"
+                  onClick={() => setUrl(repo.url)}
+                  className="block w-full text-left text-xs text-blue-500 hover:text-blue-600 hover:underline"
+                  disabled={isLoading}
+                >
+                  {repo.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Loading...
+              </>
+            ) : (
+              'Load Repository'
+            )}
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/components/github/URLCopyButton.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Check, Link2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface URLCopyButtonProps {
+  githubUrl: string;
+  branch?: string;
+  file?: string;
+  folderPath?: string;
+}
+
+export function URLCopyButton({ githubUrl, branch, file, folderPath }: URLCopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    // Build shareable URL
+    const baseUrl = window.location.origin;
+    const params = new URLSearchParams();
+    
+    params.set('url', githubUrl);
+    if (branch) params.set('branch', branch);
+    if (file) params.set('file', file);
+    if (folderPath) params.set('path', folderPath);
+    
+    const shareUrl = `${baseUrl}/?${params.toString()}`;
+    
+    navigator.clipboard.writeText(shareUrl);
+    setCopied(true);
+    
+    toast.success('Link copied!', {
+      description: 'Share this URL to open this exact project state',
+    });
+    
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-6 text-xs gap-1"
+      onClick={handleCopy}
+    >
+      {copied ? (
+        <>
+          <Check className="h-3 w-3" />
+          Copied
+        </>
+      ) : (
+        <>
+          <Link2 className="h-3 w-3" />
+          Share
+        </>
+      )}
+    </Button>
+  );
+}

package/frontend/components/interact/ContractInteraction.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { BookOpen, Edit, Loader2, ExternalLink } from 'lucide-react';
+import { useAccount, useChainId, usePublicClient, useWalletClient } from 'wagmi';
+import { parseABI, groupFunctionsByType, formatFunctionSignature, ParsedFunction } from '@/lib/abi-parser';
+import { encodeFunctionData, decodeFunctionResult, type Address } from 'viem';
+import { arbitrum, arbitrumSepolia } from 'wagmi/chains';
+
+interface ContractInteractionProps {
+  contractAddress: string;
+  abi: string;
+}
+
+export function ContractInteraction({ contractAddress, abi }: ContractInteractionProps) {
+  const [inputValues, setInputValues] = useState<Record<string, string[]>>({});
+  const [results, setResults] = useState<Record<string, any>>({});
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+
+  const { address: userAddress, isConnected } = useAccount();
+  const chainId = useChainId();
+  const publicClient = usePublicClient();
+  const { data: walletClient } = useWalletClient();
+
+  const functions = parseABI(abi);
+  const { read: readFunctions, write: writeFunctions } = groupFunctionsByType(functions);
+
+  const getExplorerUrl = () => {
+    if (chainId === arbitrumSepolia.id) {
+      return `https://sepolia.arbiscan.io/address/${contractAddress}`;
+    }
+    if (chainId === arbitrum.id) {
+      return `https://arbiscan.io/address/${contractAddress}`;
+    }
+    return `https://sepolia.arbiscan.io/address/${contractAddress}`;
+  };
+
+  const handleInputChange = (funcName: string, index: number, value: string) => {
+    setInputValues((prev) => ({
+      ...prev,
+      [funcName]: {
+        ...prev[funcName],
+        [index]: value,
+      },
+    }));
+  };
+
+  const getInputValues = (funcName: string, func: ParsedFunction): any[] => {
+    const values = inputValues[funcName] || [];
+    return func.inputs.map((input, index) => {
+      const value = values[index] || '';
+
+      // Convert based on type
+      if (input.type.includes('uint') || input.type.includes('int')) {
+        return value ? BigInt(value) : BigInt(0);
+      }
+      if (input.type === 'bool') {
+        return value.toLowerCase() === 'true';
+      }
+      if (input.type === 'address') {
+        return value as Address;
+      }
+      if (input.type.includes('bytes')) {
+        return value as `0x${string}`;
+      }
+      return value;
+    });
+  };
+
+  const handleRead = async (func: ParsedFunction) => {
+    if (!publicClient) return;
+
+    const funcKey = func.name;
+    setLoading((prev) => ({ ...prev, [funcKey]: true }));
+    setResults((prev) => ({ ...prev, [funcKey]: undefined }));
+
+    try {
+      const args = getInputValues(funcKey, func);
+
+      const data = await publicClient.readContract({
+        address: contractAddress as Address,
+        abi: [func],
+        functionName: func.name,
+        args: args.length > 0 ? args : undefined,
+      });
+
+      setResults((prev) => ({
+        ...prev,
+        [funcKey]: { success: true, data },
+      }));
+    } catch (error) {
+      console.error('Read error:', error);
+      setResults((prev) => ({
+        ...prev,
+        [funcKey]: {
+          success: false,
+          error: error instanceof Error ? error.message : 'Read failed',
+        },
+      }));
+    } finally {
+      setLoading((prev) => ({ ...prev, [funcKey]: false }));
+    }
+  };
+
+  const handleWrite = async (func: ParsedFunction) => {
+    if (!walletClient || !userAddress) {
+      alert('Please connect your wallet');
+      return;
+    }
+
+    const funcKey = func.name;
+    setLoading((prev) => ({ ...prev, [funcKey]: true }));
+    setResults((prev) => ({ ...prev, [funcKey]: undefined }));
+
+    try {
+      const args = getInputValues(funcKey, func);
+
+      const hash = await walletClient.writeContract({
+        address: contractAddress as Address,
+        abi: [func],
+        functionName: func.name,
+        args: args.length > 0 ? args : undefined,
+        account: userAddress,
+      });
+
+      // Wait for transaction
+      if (publicClient) {
+        const receipt = await publicClient.waitForTransactionReceipt({ hash });
+
+        setResults((prev) => ({
+          ...prev,
+          [funcKey]: {
+            success: true,
+            txHash: hash,
+            status: receipt.status,
+          },
+        }));
+      } else {
+        setResults((prev) => ({
+          ...prev,
+          [funcKey]: { success: true, txHash: hash },
+        }));
+      }
+    } catch (error) {
+      console.error('Write error:', error);
+      setResults((prev) => ({
+        ...prev,
+        [funcKey]: {
+          success: false,
+          error: error instanceof Error ? error.message : 'Transaction failed',
+        },
+      }));
+    } finally {
+      setLoading((prev) => ({ ...prev, [funcKey]: false }));
+    }
+  };
+
+  const renderFunctionCard = (func: ParsedFunction, isWrite: boolean) => {
+    const funcKey = func.name;
+    const isLoading = loading[funcKey];
+    const result = results[funcKey];
+
+    return (
+      <Card key={func.name}>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base font-mono">{func.name}</CardTitle>
+          <CardDescription className="text-xs">
+            {formatFunctionSignature(func)}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {func.inputs.length > 0 && (
+            <div className="space-y-2">
+              {func.inputs.map((input, index) => (
+                <div key={index} className="space-y-1">
+                  <Label className="text-xs">
+                    {input.name || `param${index}`} ({input.type})
+                  </Label>
+                  <Input
+                    placeholder={`Enter ${input.type}`}
+                    value={inputValues[funcKey]?.[index] || ''}
+                    onChange={(e) =>
+                      handleInputChange(funcKey, index, e.target.value)
+                    }
+                    disabled={isLoading}
+                    className="h-8 text-sm"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          <Button
+            onClick={() => (isWrite ? handleWrite(func) : handleRead(func))}
+            disabled={isLoading || (isWrite && !isConnected)}
+            size="sm"
+            variant={isWrite ? 'default' : 'outline'}
+            className="w-full"
+          >
+            {isLoading ? (
+              <>
+                <Loader2 className="h-3 w-3 mr-2 animate-spin" />
+                {isWrite ? 'Sending...' : 'Reading...'}
+              </>
+            ) : (
+              <>{isWrite ? 'Write' : 'Read'}</>
+            )}
+          </Button>
+
+          {result && (
+            <div
+              className={`p-3 rounded-md text-xs ${result.success
+                  ? 'bg-green-500/10 border border-green-500/20'
+                  : 'bg-red-500/10 border border-red-500/20'
+                }`}
+            >
+              {result.success ? (
+                <div className="space-y-1">
+                  {result.data !== undefined && (
+                    <div>
+                      <span className="font-medium">Result: </span>
+                      <code className="break-all">
+                        {typeof result.data === 'bigint'
+                          ? result.data.toString()
+                          : JSON.stringify(result.data)}
+                      </code>
+                    </div>
+                  )}
+                  {result.txHash && (
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">Tx: </span>
+                      <code className="flex-1 break-all">{result.txHash}</code>
+                      <a
+                        href={`${getExplorerUrl().replace('/address/', '/tx/')}/${result.txHash}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-400 hover:text-blue-300"
+                      >
+                        <ExternalLink className="h-3 w-3" />
+                      </a>
+                    </div>
+                  )}
+                  {result.status && (
+                    <div>
+                      <span className="font-medium">Status: </span>
+                      {result.status === 'success' ? '✓ Success' : '✗ Failed'}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="text-red-400">{result.error}</div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    );
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 border-b border-border space-y-2">
+        <div className="flex items-center justify-between">
+          <h2 className="font-semibold">Contract Interaction</h2>
+          <a
+            href={getExplorerUrl()}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
+          >
+            View on Explorer
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+        <div className="text-xs font-mono text-muted-foreground break-all">
+          {contractAddress}
+        </div>
+      </div>
+
+      <Tabs defaultValue="read" className="flex-1 flex flex-col min-h-0">
+        <TabsList className="mx-4 mt-4 grid w-[calc(100%-2rem)] grid-cols-2">
+          <TabsTrigger value="read" className="flex items-center gap-2">
+            <BookOpen className="h-4 w-4" />
+            Read ({readFunctions.length})
+          </TabsTrigger>
+          <TabsTrigger value="write" className="flex items-center gap-2">
+            <Edit className="h-4 w-4" />
+            Write ({writeFunctions.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="read" className="flex-1 overflow-auto p-4 space-y-3 mt-0">
+          {readFunctions.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No read functions available
+            </p>
+          ) : (
+            readFunctions.map((func) => renderFunctionCard(func, false))
+          )}
+        </TabsContent>
+
+        <TabsContent value="write" className="flex-1 overflow-auto p-4 space-y-3 mt-0">
+          {!isConnected ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              Connect your wallet to write to the contract
+            </p>
+          ) : writeFunctions.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No write functions available
+            </p>
+          ) : (
+            writeFunctions.map((func) => renderFunctionCard(func, true))
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

package/frontend/components/interact/ContractPlaceholder.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { FileText, Zap } from 'lucide-react';
+
+export function ContractPlaceholder() {
+    return (
+        <div className="h-full flex flex-col bg-card">
+            {/* Header */}
+            <div className="p-3 sm:p-4 border-b border-border flex items-center justify-between shrink-0">
+                <div className="flex items-center gap-2">
+                    <FileText className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
+                    <h2 className="font-semibold text-sm sm:text-base">Contract Interaction</h2>
+                </div>
+            </div>
+
+            {/* Placeholder Content */}
+            <div className="flex-1 flex items-center justify-center p-6">
+                <div className="text-center space-y-4 max-w-sm">
+                    <div className="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
+                        <Zap className="h-8 w-8 text-muted-foreground" />
+                    </div>
+                    <div className="space-y-2">
+                        <h3 className="font-semibold text-lg">No Contract Deployed</h3>
+                        <p className="text-sm text-muted-foreground">
+                            Deploy a contract to interact with its functions. Once deployed, you'll be able to read from and write to your smart contract.
+                        </p>
+                    </div>
+                    <div className="text-xs text-muted-foreground bg-muted/50 rounded-lg p-3">
+                        <p className="font-medium mb-1">To get started:</p>
+                        <ol className="text-left space-y-1">
+                            <li>1. Write your Stylus contract</li>
+                            <li>2. Compile successfully</li>
+                            <li>3. Connect your wallet</li>
+                            <li>4. Click Deploy</li>
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}