fix: improve contract error handling (#733)

* prevent errors from covering code

* extract relevant info from compilation errors

* compact finality window field

* increase error height

* support basic error messages

---------

Co-authored-by: Den <den@Deniss-MacBook-Pro.local>

Author: denishacquin

frontend/src/components/Simulator/ContractsPanel.vue

@@ -31,7 +31,7 @@ const showHome = computed(() => store.currentContractId === '');
 
       <div
         v-if="!!error"
-        class="w-full shrink-0 bg-red-500 px-2 py-1 text-sm text-white"
+        class="max-h-[160px] w-full shrink-0 overflow-y-auto whitespace-pre-wrap bg-red-500 bg-opacity-80 px-2 py-1 text-xs text-white"
       >
         {{ error }}
       </div>

frontend/src/hooks/useContractQueries.ts

@@ -67,15 +67,29 @@ export function useContractQueries() {
       return mockContractSchema;
     }
 
-    const result = await genlayer.client?.getContractSchemaForCode(
-      contract.value?.content ?? '',
-    );
-
-    schema.value = result;
-
-    return schema.value;
+    try {
+      const result = await genlayer.client?.getContractSchemaForCode(
+        contract.value?.content ?? '',
+      );
+
+      schema.value = result;
+      return schema.value;
+    } catch (error: any) {
+      const errorMessage = extractErrorMessage(error);
+      throw new Error(errorMessage);
+    }
   }
 
+  const extractErrorMessage = (error: any) => {
+    try {
+      const details = JSON.parse(error.details);
+      const message = details.data.error.args[1].stderr;
+      return message;
+    } catch (err) {
+      return error.details;
+    }
+  };
+
   const isDeploying = ref(false);
 
   async function deployContract(

frontend/src/views/Simulator/RunDebugView.vue

@@ -71,6 +71,7 @@ const isFinalityWindowValid = computed(() => {
             testId="input-finalityWindow"
             :disabled="false"
             class="w-20"
+            tiny
           />
         </div>