diff --git a/apps/frontend/src/app/components/editor/editor.component.css b/apps/frontend/src/app/components/editor/editor.component.css index a381834..efd7a44 100644 --- a/apps/frontend/src/app/components/editor/editor.component.css +++ b/apps/frontend/src/app/components/editor/editor.component.css @@ -1,4 +1,13 @@ -/* Monaco Editor Deep Styling */ +/* Editor Container Styles */ +.editor-container { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +} + +/* Monaco Editor Custom Styles */ +:host ::ng-deep .monaco-editor { + padding-top: 0px; +} + :host ::ng-deep .monaco-editor .margin { background-color: #1f2937; } @@ -64,6 +73,29 @@ @apply focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900 rounded-lg; } +/* Editor Footer */ +.editor-footer { + backdrop-filter: blur(10px); + background-color: rgba(31, 41, 55, 0.95); +} + +/* Output panel animations */ +.animate-slide-down { + animation: slide-in-from-top 0.3s ease-out; +} + +/* Custom animations for smooth transitions */ +@keyframes slide-in-from-top { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + /* Code syntax highlighting enhancements */ .code-highlight { @apply font-mono text-sm leading-relaxed; diff --git a/apps/frontend/src/app/components/editor/editor.component.html b/apps/frontend/src/app/components/editor/editor.component.html index 5f19e77..72bb503 100644 --- a/apps/frontend/src/app/components/editor/editor.component.html +++ b/apps/frontend/src/app/components/editor/editor.component.html @@ -73,6 +73,54 @@

Soroban Smar + +
+
+
+
+ +
+ + + + + + + + + +
+ + +
+

+ {{ errorMessage || outputMessage }} +

+
+
+ + + +
+
+
+
diff --git a/apps/frontend/src/app/components/editor/editor.component.ts b/apps/frontend/src/app/components/editor/editor.component.ts index 71c17d0..7f804d9 100644 --- a/apps/frontend/src/app/components/editor/editor.component.ts +++ b/apps/frontend/src/app/components/editor/editor.component.ts @@ -34,6 +34,11 @@ export class EditorComponent implements OnDestroy { isLoading = false; isBrowser = isPlatformBrowser(inject(PLATFORM_ID)); + // Validation and output properties + errorMessage: string = ''; + outputMessage: string = ''; + outputType: 'error' | 'success' | 'info' = 'info'; + editorOptions = { theme: 'vs-dark', language: 'rust', @@ -50,35 +55,97 @@ export class EditorComponent implements OnDestroy { this.timeoutIds.clear(); } + private validateCode(): boolean { + // Clear previous messages + this.clearOutput(); + + // Check if code is empty or only whitespace + if (!this.code || !this.code.trim()) { + this.errorMessage = 'Error: Code cannot be empty or contain only whitespace'; + this.outputType = 'error'; + return false; + } + + // Check code length (50KB limit) + if (this.code.length > 50000) { + this.errorMessage = 'Error: Code exceeds maximum length (50KB). Please reduce code size.'; + this.outputType = 'error'; + return false; + } + + // Basic Rust syntax check - look for common Rust keywords + const rustKeywords = ['fn', 'impl', 'pub', 'struct', 'enum', 'mod', 'use', 'let', 'const', 'static']; + const hasRustKeyword = rustKeywords.some(keyword => this.code.includes(keyword)); + + if (!hasRustKeyword && this.code.trim().length > 10) { + this.errorMessage = 'Warning: Code may not be valid Rust. Please ensure you\'re writing Rust code.'; + this.outputType = 'error'; + return false; + } + + // Check for basic contract structure for Soroban + if (!this.code.includes('contract') && !this.code.includes('soroban')) { + this.errorMessage = 'Info: Consider using Soroban contract structure for smart contract development.'; + this.outputType = 'info'; + // This is just a warning, still allow compilation + } + + return true; + } + + clearOutput(): void { + this.errorMessage = ''; + this.outputMessage = ''; + this.outputType = 'info'; + } + onCompile(): void { - if (this.isLoading || !this.code.trim()) { + if (this.isLoading) { + return; + } + + // Validate code before proceeding + if (!this.validateCode()) { return; } this.isLoading = true; + this.outputMessage = 'Compiling Rust smart contract...'; + this.outputType = 'info'; console.log('Compiling Rust smart contract code:', this.code); // TODO: Implement API call to backend compiler const timeoutId = setTimeout(() => { this.isLoading = false; this.timeoutIds.delete(timeoutId); + this.outputMessage = 'Compilation completed successfully!'; + this.outputType = 'success'; console.log('Compilation complete'); }, 2000) as unknown as number; this.timeoutIds.add(timeoutId); } onTest(): void { - if (this.isLoading || !this.code.trim()) { + if (this.isLoading) { + return; + } + + // Validate code before proceeding + if (!this.validateCode()) { return; } this.isLoading = true; + this.outputMessage = 'Running tests for smart contract...'; + this.outputType = 'info'; console.log('Testing Rust smart contract code:', this.code); // TODO: Implement API call to backend test runner const timeoutId = setTimeout(() => { this.isLoading = false; this.timeoutIds.delete(timeoutId); + this.outputMessage = 'All tests passed successfully!'; + this.outputType = 'success'; console.log('Testing complete'); }, 2000) as unknown as number; this.timeoutIds.add(timeoutId);