diff --git a/frontend/app/docs/api-reference/page.tsx b/frontend/app/docs/api-reference/page.tsx new file mode 100644 index 0000000..69883b3 --- /dev/null +++ b/frontend/app/docs/api-reference/page.tsx @@ -0,0 +1,114 @@ +import { apiSections } from "../data"; +import CodeBlock from "../components/CodeBlock"; + +export default function ApiReferencePage() { + return ( +
+

API Reference

+

+ Complete reference for all Stellar Suite commands, their parameters, return types, + and usage examples. +

+ +
+

On this page

+ +
+ + {apiSections.map((section) => ( +
+

+ {section.title} +

+

{section.description}

+ + {section.methods.map((method) => ( +
+
+

+ {method.name} +

+
+

{method.description}

+ +
+

+ Signature +

+
+ {method.signature} +
+
+ + {method.parameters.length > 0 && ( +
+

+ Parameters +

+
+ + + + + + + + + + + {method.parameters.map((param) => ( + + + + + + + ))} + +
NameTypeRequiredDescription
{param.name}{param.type} + {param.required ? ( + Yes + ) : ( + No + )} + {param.description}
+
+
+ )} + +
+

+ Returns +

+
+ {method.returnType} +
+
+ +
+

+ Example +

+ +
+
+ ))} +
+ ))} +
+ ); +} diff --git a/frontend/app/docs/components/CodeBlock.tsx b/frontend/app/docs/components/CodeBlock.tsx new file mode 100644 index 0000000..a65363a --- /dev/null +++ b/frontend/app/docs/components/CodeBlock.tsx @@ -0,0 +1,55 @@ +"use client"; + +import { useState } from "react"; +import { Copy, Check } from "lucide-react"; + +interface CodeBlockProps { + code: string; + language?: string; + title?: string; + showLineNumbers?: boolean; +} + +export default function CodeBlock({ code, language = "typescript", title, showLineNumbers = false }: CodeBlockProps) { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + await navigator.clipboard.writeText(code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + const lines = code.split("\n"); + + return ( +
+ {title && ( +
+ {title} + {language} +
+ )} +
+ + 
+          
+            {lines.map((line, i) => (
+              

+                {showLineNumbers && (
+                  {i + 1}
+                )}
+                {line}
+              

+            ))}
+          
+
+
+
+ ); +} diff --git a/frontend/app/docs/components/CodePlayground.tsx b/frontend/app/docs/components/CodePlayground.tsx new file mode 100644 index 0000000..cc6c32e --- /dev/null +++ b/frontend/app/docs/components/CodePlayground.tsx @@ -0,0 +1,190 @@ +"use client"; + +import { useState } from "react"; +import { Play, RotateCcw, Copy, Check } from "lucide-react"; + +const EXAMPLE_TEMPLATES: Record = { + "Deploy Contract": `// Deploy a contract to testnet +const result = await stellarSuite.deployContract({ + network: 'testnet', + source: 'dev', +}); + +console.log('Contract ID:', result.contractId); +console.log('TX Hash:', result.txHash);`, + + "Simulate Transaction": `// Simulate a token transfer +const result = await stellarSuite.simulateTransaction({ + contractId: 'CABC...XYZ', + function: 'transfer', + args: [ + 'GABC...sender', + 'GXYZ...receiver', + BigInt(1000000) + ] +}); + +console.log('Cost:', result.cost); +console.log('Return:', result.result);`, + + "Check RPC Health": `// Check health of all configured endpoints +const statuses = await stellarSuite.checkRpcHealth(); + +statuses.forEach(status => { + console.log( + status.name + ':', + status.healthy ? 'OK' : 'DOWN', + '(' + status.latencyMs + 'ms)' + ); +});`, + + "Build Contract": `// Build the current contract with release mode +await stellarSuite.buildContract({ + release: true, + target: 'wasm32-unknown-unknown' +}); + +console.log('Build completed successfully!');`, +}; + +export default function CodePlayground() { + const [code, setCode] = useState(EXAMPLE_TEMPLATES["Deploy Contract"]); + const [output, setOutput] = useState(""); + const [isRunning, setIsRunning] = useState(false); + const [copied, setCopied] = useState(false); + const [activeTemplate, setActiveTemplate] = useState("Deploy Contract"); + + const handleRun = () => { + setIsRunning(true); + setOutput(""); + + setTimeout(() => { + const lines: string[] = []; + const codeLines = code.split("\n"); + codeLines.forEach((line) => { + const logMatch = line.match(/console\.log\((.+)\)/); + if (logMatch) { + const content = logMatch[1] + .replace(/['"`]/g, "") + .replace(/,\s*/g, " ") + .replace(/result\.\w+/g, "") + .replace(/status\.\w+/g, ""); + lines.push("> " + content); + } + }); + + if (lines.length === 0) { + lines.push("> Execution completed successfully."); + } + + lines.push(""); + lines.push("--- Simulation complete (not a real execution) ---"); + + setOutput(lines.join("\n")); + setIsRunning(false); + }, 1200); + }; + + const handleReset = () => { + setCode(EXAMPLE_TEMPLATES[activeTemplate]); + setOutput(""); + }; + + const handleCopy = async () => { + await navigator.clipboard.writeText(code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + const handleTemplateChange = (name: string) => { + setActiveTemplate(name); + setCode(EXAMPLE_TEMPLATES[name]); + setOutput(""); + }; + + return ( +
+
+
+ {Object.keys(EXAMPLE_TEMPLATES).map((name) => ( + + ))} +
+
+ +
+
+
+ editor.ts +
+ + +
+
+