From 7efb9a40e42f993b16df74eaea939732bf9b4ef5 Mon Sep 17 00:00:00 2001 From: Pushkar Mishra Date: Sat, 6 Sep 2025 21:14:32 +0530 Subject: [PATCH 1/2] feat: enhance editor component with output panel and validation Signed-off-by: Pushkar Mishra --- .../components/editor/editor.component.css | 19 ++++- .../components/editor/editor.component.html | 48 +++++++++++++ .../app/components/editor/editor.component.ts | 71 ++++++++++++++++++- 3 files changed, 135 insertions(+), 3 deletions(-) diff --git a/apps/frontend/src/app/components/editor/editor.component.css b/apps/frontend/src/app/components/editor/editor.component.css index 9d3b97f..1ac628b 100644 --- a/apps/frontend/src/app/components/editor/editor.component.css +++ b/apps/frontend/src/app/components/editor/editor.component.css @@ -5,7 +5,7 @@ /* Monaco Editor Custom Styles */ :host ::ng-deep .monaco-editor { - padding-top: 10px; + padding-top: 0px; } :host ::ng-deep .monaco-editor .margin { @@ -88,4 +88,21 @@ button:focus:not(:focus-visible) { .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); + } } \ No newline at end of file diff --git a/apps/frontend/src/app/components/editor/editor.component.html b/apps/frontend/src/app/components/editor/editor.component.html index 520e904..b3f2db3 100644 --- a/apps/frontend/src/app/components/editor/editor.component.html +++ b/apps/frontend/src/app/components/editor/editor.component.html @@ -60,6 +60,54 @@

Soroban Smart Contract Editor

+ +
+
+
+
+ +
+ + + + + + + + + +
+ + +
+

+ {{ 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); From c491b2782f60e06f746fadb0b51f74ba3bf53647 Mon Sep 17 00:00:00 2001 From: Pushkar Mishra Date: Sat, 6 Sep 2025 21:19:50 +0530 Subject: [PATCH 2/2] style: add closing brace to editor.component.css and enhance code syntax highlighting Signed-off-by: Pushkar Mishra --- apps/frontend/src/app/components/editor/editor.component.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/frontend/src/app/components/editor/editor.component.css b/apps/frontend/src/app/components/editor/editor.component.css index a3ee1d9..efd7a44 100644 --- a/apps/frontend/src/app/components/editor/editor.component.css +++ b/apps/frontend/src/app/components/editor/editor.component.css @@ -94,6 +94,8 @@ opacity: 1; transform: translateY(0); } +} + /* Code syntax highlighting enhancements */ .code-highlight { @apply font-mono text-sm leading-relaxed;