create-stylus-ide 1.0.0

package/frontend/components/orbit/BenchmarkDialog.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Loader2, Zap, TrendingDown, ExternalLink } from 'lucide-react';
+import { arbitrumSepolia } from 'wagmi/chains';
+import { orbitChains, getOrbitChain } from '@/lib/orbit-chains';
+import { createPublicClient, http, type Address, type Abi } from 'viem';
+
+interface BenchmarkResult {
+  chainId: number;
+  chainName: string;
+  gasToken: string;
+  gasUsed: bigint;
+  estimatedCost: string; // in USD
+  success: boolean;
+  error?: string;
+  explorerUrl?: string;
+}
+
+interface BenchmarkDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  abi: Abi;
+  functionName: string;
+  args?: any[];
+  title?: string;
+  description?: string;
+}
+
+export function BenchmarkDialog({
+  open,
+  onOpenChange,
+  abi,
+  functionName,
+  args = [],
+  title = 'Multi-Chain Gas Benchmark',
+  description = 'Compare gas costs across Arbitrum and Orbit chains',
+}: BenchmarkDialogProps) {
+  const [addresses, setAddresses] = useState<Record<number, string>>({
+    [arbitrumSepolia.id]: '',
+    ...Object.fromEntries(orbitChains.map((chain) => [chain.id, ''])),
+  });
+  const [results, setResults] = useState<BenchmarkResult[]>([]);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const allChains = [
+    { id: arbitrumSepolia.id, name: arbitrumSepolia.name, rpc: arbitrumSepolia.rpcUrls.default.http[0], gasToken: 'ETH', explorer: 'https://sepolia.arbiscan.io' },
+    ...orbitChains.map((chain) => ({
+      id: chain.id,
+      name: chain.name,
+      rpc: chain.chain.rpcUrls.default.http[0],
+      gasToken: chain.gasToken,
+      explorer: chain.chain.blockExplorers?.default.url,
+    })),
+  ];
+
+  const runBenchmark = async () => {
+    setIsRunning(true);
+    setResults([]);
+
+    const benchmarkResults: BenchmarkResult[] = [];
+
+    // Filter chains that have addresses
+    const chainsToTest = allChains.filter((chain) => addresses[chain.id]?.trim());
+
+    if (chainsToTest.length === 0) {
+      alert('Please enter at least one contract address');
+      setIsRunning(false);
+      return;
+    }
+
+    // Run benchmarks in parallel
+    await Promise.all(
+      chainsToTest.map(async (chain) => {
+        try {
+          const client = createPublicClient({
+            chain: chain.id === arbitrumSepolia.id 
+              ? arbitrumSepolia 
+              : orbitChains.find(c => c.id === chain.id)!.chain,
+            transport: http(chain.rpc),
+          });
+
+          const contractAddress = addresses[chain.id] as Address;
+
+          // Estimate gas
+          const gas = await client.estimateContractGas({
+            address: contractAddress,
+            abi,
+            functionName,
+            args,
+          });
+
+          // Estimate cost (rough calculation)
+          // Different chains have different gas prices
+          const gasPriceGwei = chain.gasToken === 'ETH' ? 0.02 : 0.01; // Orbit chains typically cheaper
+          const ethPrice = 2500; // $2500 per ETH (rough estimate)
+          const costUSD = ((Number(gas) * gasPriceGwei) / 1e9) * ethPrice;
+
+          benchmarkResults.push({
+            chainId: chain.id,
+            chainName: chain.name,
+            gasToken: chain.gasToken,
+            gasUsed: gas,
+            estimatedCost: costUSD.toFixed(6),
+            success: true,
+            explorerUrl: chain.explorer ? `${chain.explorer}/address/${contractAddress}` : undefined,
+          });
+        } catch (error) {
+          benchmarkResults.push({
+            chainId: chain.id,
+            chainName: chain.name,
+            gasToken: chain.gasToken,
+            gasUsed: BigInt(0),
+            estimatedCost: '0',
+            success: false,
+            error: error instanceof Error ? error.message : 'Unknown error',
+          });
+        }
+      })
+    );
+
+    // Sort by gas used (successful ones first, then by gas)
+    benchmarkResults.sort((a, b) => {
+      if (a.success && !b.success) return -1;
+      if (!a.success && b.success) return 1;
+      return Number(a.gasUsed) - Number(b.gasUsed);
+    });
+
+    setResults(benchmarkResults);
+    setIsRunning(false);
+  };
+
+  const cheapestChain = results.find((r) => r.success);
+  const avgGas = results.filter(r => r.success).length > 0
+    ? results.filter(r => r.success).reduce((sum, r) => sum + Number(r.gasUsed), 0) / results.filter(r => r.success).length
+    : 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Zap className="h-5 w-5 text-primary" />
+            {title}
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Address Input Section */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-medium">Contract Addresses</h3>
+              <p className="text-xs text-muted-foreground">
+                Enter addresses for chains where you deployed
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Arbitrum Sepolia */}
+              <div className="space-y-2">
+                <Label htmlFor="arb-sepolia" className="text-sm">
+                  Arbitrum Sepolia
+                  <span className="ml-1 text-xs text-muted-foreground">(ETH)</span>
+                </Label>
+                <Input
+                  id="arb-sepolia"
+                  placeholder="0x..."
+                  value={addresses[arbitrumSepolia.id]}
+                  onChange={(e) =>
+                    setAddresses({ ...addresses, [arbitrumSepolia.id]: e.target.value })
+                  }
+                  disabled={isRunning}
+                />
+              </div>
+
+              {/* Orbit Chains */}
+              {orbitChains.map((chain) => (
+                <div key={chain.id} className="space-y-2">
+                  <Label htmlFor={`chain-${chain.id}`} className="text-sm flex items-center gap-1">
+                    {chain.name}
+                    <span className="text-xs text-muted-foreground">({chain.gasToken})</span>
+                    {chain.recommended && (
+                      <span className="text-xs bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+                        Orbit
+                      </span>
+                    )}
+                  </Label>
+                  <Input
+                    id={`chain-${chain.id}`}
+                    placeholder="0x..."
+                    value={addresses[chain.id]}
+                    onChange={(e) =>
+                      setAddresses({ ...addresses, [chain.id]: e.target.value })
+                    }
+                    disabled={isRunning}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Run Benchmark Button */}
+          <Button onClick={runBenchmark} disabled={isRunning} className="w-full">
+            {isRunning ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Running Benchmark...
+              </>
+            ) : (
+              <>
+                <Zap className="h-4 w-4 mr-2" />
+                Run Benchmark
+              </>
+            )}
+          </Button>
+
+          {/* Results Section */}
+          {results.length > 0 && (
+            <div className="space-y-4">
+              <h3 className="text-sm font-medium">Benchmark Results</h3>
+
+              {/* Summary Stats */}
+              {cheapestChain && (
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  <div className="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
+                    <div className="flex items-center gap-2 mb-1">
+                      <TrendingDown className="h-4 w-4 text-green-500" />
+                      <span className="text-xs font-medium text-green-400">Cheapest Chain</span>
+                    </div>
+                    <p className="text-sm font-semibold">{cheapestChain.chainName}</p>
+                    <p className="text-xs text-muted-foreground">{Number(cheapestChain.gasUsed).toLocaleString()} gas</p>
+                  </div>
+
+                  <div className="bg-muted rounded-lg p-3">
+                    <span className="text-xs font-medium text-muted-foreground block mb-1">Average Gas</span>
+                    <p className="text-sm font-semibold">{Math.round(avgGas).toLocaleString()}</p>
+                    <p className="text-xs text-muted-foreground">Across {results.filter(r => r.success).length} chains</p>
+                  </div>
+
+                  <div className="bg-muted rounded-lg p-3">
+                    <span className="text-xs font-medium text-muted-foreground block mb-1">Function</span>
+                    <p className="text-sm font-semibold font-mono">{functionName}()</p>
+                    <p className="text-xs text-muted-foreground">{args.length} args</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Results Table */}
+              <div className="border rounded-lg overflow-hidden">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted">
+                    <tr>
+                      <th className="text-left p-3 font-medium">Chain</th>
+                      <th className="text-left p-3 font-medium">Gas Token</th>
+                      <th className="text-right p-3 font-medium">Gas Used</th>
+                      <th className="text-right p-3 font-medium">Est. Cost (USD)</th>
+                      <th className="text-center p-3 font-medium">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {results.map((result, index) => (
+                      <tr
+                        key={result.chainId}
+                        className={`border-t ${
+                          result.success && result.chainId === cheapestChain?.chainId
+                            ? 'bg-green-500/5'
+                            : ''
+                        }`}
+                      >
+                        <td className="p-3">
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{result.chainName}</span>
+                            {result.success && result.chainId === cheapestChain?.chainId && (
+                              <TrendingDown className="h-3 w-3 text-green-500" />
+                            )}
+                            {result.explorerUrl && (
+                              <a
+                                href={result.explorerUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-muted-foreground hover:text-primary"
+                              >
+                                <ExternalLink className="h-3 w-3" />
+                              </a>
+                            )}
+                          </div>
+                        </td>
+                        <td className="p-3">
+                          <span className="text-xs font-mono">{result.gasToken}</span>
+                        </td>
+                        <td className="p-3 text-right font-mono">
+                          {result.success ? Number(result.gasUsed).toLocaleString() : '-'}
+                        </td>
+                        <td className="p-3 text-right font-mono">
+                          {result.success ? `$${result.estimatedCost}` : '-'}
+                        </td>
+                        <td className="p-3 text-center">
+                          {result.success ? (
+                            <span className="text-xs text-green-500">✓ Success</span>
+                          ) : (
+                            <span className="text-xs text-destructive" title={result.error}>
+                              ✗ Failed
+                            </span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Insights */}
+              {cheapestChain && results.filter(r => r.success).length > 1 && (
+                <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4 text-sm">
+                  <p className="font-medium text-blue-400 mb-2">💡 Insights:</p>
+                  <ul className="space-y-1 text-blue-300 text-xs">
+                    {orbitChains.some(c => results.find(r => r.chainId === c.id && r.success)) && (
+                      <li>
+                        • Orbit chains show similar gas usage but may have lower gas prices
+                      </li>
+                    )}
+                    <li>
+                      • Gas costs vary by network load and gas token economics
+                    </li>
+                    <li>
+                      • For high-frequency operations, choose chains with lowest costs
+                    </li>
+                  </ul>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/components/orbit/OrbitExplorer.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ExternalLink, Rocket, Zap, Copy, Check } from 'lucide-react';
+import { orbitChains, type OrbitChainInfo } from '@/lib/orbit-chains';
+import { useSwitchChain } from 'wagmi';
+
+export function OrbitExplorer() {
+  const { switchChain } = useSwitchChain();
+  const [copiedRpc, setCopiedRpc] = useState<number | null>(null);
+
+  const copyRpc = async (chainId: number, rpc: string) => {
+    try {
+      await navigator.clipboard.writeText(rpc);
+      setCopiedRpc(chainId);
+      setTimeout(() => setCopiedRpc(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy RPC:', err);
+    }
+  };
+
+  return (
+    <div className="space-y-5 sm:space-y-6">
+      {/* Header */}
+      <div className="text-center space-y-2 px-1">
+        <div className="flex items-center justify-center gap-2">
+          <Rocket className="h-7 w-7 sm:h-8 sm:w-8 text-primary" />
+          <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">
+            Explore Orbit Chains
+          </h2>
+        </div>
+
+        <p className="text-muted-foreground max-w-2xl mx-auto text-xs sm:text-sm leading-relaxed px-2 sm:px-0">
+          Arbitrum Orbit chains are app-specific L3s with customizable features,
+          lower costs, and tailored infrastructure. Deploy your Stylus contracts
+          to these chains for optimized performance.
+        </p>
+      </div>
+
+      {/* Chain Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+        {orbitChains.map((chain) => (
+          <OrbitChainCard
+            key={chain.id}
+            chain={chain}
+            onSwitchChain={() => switchChain({ chainId: chain.id })}
+            onCopyRpc={() => copyRpc(chain.id, chain.chain.rpcUrls.default.http[0])}
+            isCopied={copiedRpc === chain.id}
+          />
+        ))}
+      </div>
+
+      {/* Why Orbit Section */}
+      <Card className="border-primary/20">
+        <CardHeader className="p-4 sm:p-6">
+          <CardTitle className="flex items-center gap-2 text-base sm:text-lg">
+            <Zap className="h-5 w-5 text-primary" />
+            Why Deploy to Orbit Chains?
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent className="p-4 pt-0 sm:p-6 sm:pt-0 space-y-3 text-sm">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+            <div className="space-y-2">
+              <h4 className="font-medium text-primary text-sm">Cost Optimization</h4>
+              <ul className="space-y-1 text-muted-foreground text-xs leading-relaxed">
+                <li>• Lower gas prices than L2</li>
+                <li>• Custom gas token options</li>
+                <li>• Reduced transaction costs by up to 60%</li>
+              </ul>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium text-primary text-sm">Customization</h4>
+              <ul className="space-y-1 text-muted-foreground text-xs leading-relaxed">
+                <li>• App-specific optimizations</li>
+                <li>• Custom sequencing logic</li>
+                <li>• Tailored governance models</li>
+              </ul>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium text-primary text-sm">Performance</h4>
+              <ul className="space-y-1 text-muted-foreground text-xs leading-relaxed">
+                <li>• Faster block times</li>
+                <li>• Dedicated infrastructure</li>
+                <li>• Predictable throughput</li>
+              </ul>
+            </div>
+
+            <div className="space-y-2">
+              <h4 className="font-medium text-primary text-sm">Stylus Benefits</h4>
+              <ul className="space-y-1 text-muted-foreground text-xs leading-relaxed">
+                <li>• ML inference at lower cost</li>
+                <li>• Complex compute operations</li>
+                <li>• High-frequency contract calls</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Getting Started */}
+      <Card>
+        <CardHeader className="p-4 sm:p-6">
+          <CardTitle className="text-base sm:text-lg">Quick Start Guide</CardTitle>
+          <CardDescription className="text-xs sm:text-sm">
+            Deploy your first contract to an Orbit chain
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="p-4 pt-0 sm:p-6 sm:pt-0 space-y-3 text-sm">
+          <div className="space-y-3">
+            {[
+              {
+                title: 'Get testnet tokens',
+                desc: 'Click the faucet button in the header to get free testnet tokens for any Orbit chain',
+              },
+              {
+                title: 'Switch network',
+                desc: 'Use the chain selector in your wallet or click "Switch Network" on any Orbit card below',
+              },
+              {
+                title: 'Compile and deploy',
+                desc: 'Use the same Stylus contracts - they work on all Orbit chains without modification',
+              },
+              {
+                title: 'Compare gas costs',
+                desc: 'Use the "Benchmark Orbit" feature to compare gas usage across chains',
+              },
+            ].map((step, idx) => (
+              <div key={idx} className="flex items-start gap-3">
+                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary/20 text-primary text-xs font-bold shrink-0">
+                  {idx + 1}
+                </div>
+                <div className="min-w-0">
+                  <p className="font-medium text-sm">{step.title}</p>
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {step.desc}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+interface OrbitChainCardProps {
+  chain: OrbitChainInfo;
+  onSwitchChain: () => void;
+  onCopyRpc: () => void;
+  isCopied: boolean;
+}
+
+function OrbitChainCard({ chain, onSwitchChain, onCopyRpc, isCopied }: OrbitChainCardProps) {
+  const hasExplorer = useMemo(
+    () => Boolean(chain.chain.blockExplorers?.default?.url),
+    [chain.chain.blockExplorers]
+  );
+
+  return (
+    <Card
+      className={[
+        'h-full',
+        chain.recommended ? 'border-primary/50' : '',
+      ].join(' ')}
+    >
+      <CardHeader className="p-4 sm:p-5">
+        <div className="flex items-start justify-between gap-3">
+          <div className="space-y-1 flex-1 min-w-0">
+            <CardTitle className="text-base leading-tight wrap-break-words">
+              {chain.name}
+            </CardTitle>
+            <CardDescription className="text-xs leading-snug">
+              {chain.focus}
+            </CardDescription>
+          </div>
+
+          {chain.recommended && (
+            <Badge variant="default" className="text-[11px] px-2 py-0.5 shrink-0">
+              Recommended
+            </Badge>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="p-4 pt-0 sm:p-5 sm:pt-0 space-y-4">
+        <p className="text-xs text-muted-foreground leading-relaxed">
+          {chain.description}
+        </p>
+
+        {/* Gas Token */}
+        <div className="flex items-center justify-between gap-3 text-xs">
+          <span className="text-muted-foreground">Gas Token:</span>
+          <Badge variant="outline" className="font-mono text-[11px] max-w-[60%] truncate">
+            {chain.gasToken}
+          </Badge>
+        </div>
+
+        {/* Benefits */}
+        <div className="space-y-1">
+          <p className="text-xs font-medium">Key Benefits:</p>
+          <ul className="space-y-0.5">
+            {chain.benefits.slice(0, 2).map((benefit, i) => (
+              <li key={i} className="text-xs text-muted-foreground leading-relaxed">
+                • {benefit}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Actions */}
+        <div className="space-y-2 pt-3 border-t border-border">
+          <Button onClick={onSwitchChain} size="sm" className="w-full">
+            <Rocket className="h-3.5 w-3.5 mr-2" />
+            Switch Network
+          </Button>
+
+          <div className={hasExplorer ? 'grid grid-cols-2 gap-2' : 'grid grid-cols-1'}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCopyRpc}
+              className="text-xs w-full"
+            >
+              {isCopied ? (
+                <>
+                  <Check className="h-3.5 w-3.5 mr-1" />
+                  Copied
+                </>
+              ) : (
+                <>
+                  <Copy className="h-3.5 w-3.5 mr-1" />
+                  Copy RPC
+                </>
+              )}
+            </Button>
+
+            {hasExplorer && (
+              <Button variant="outline" size="sm" asChild className="text-xs w-full">
+                <a
+                  href={chain.chain.blockExplorers!.default.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <ExternalLink className="h-3.5 w-3.5 mr-1" />
+                  Explorer
+                </a>
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Chain ID for reference */}
+        <p className="text-xs text-muted-foreground text-center pt-3 border-t border-border">
+          Chain ID: <span className="font-mono">{chain.id}</span>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}