feat: improve evm verify error status

CHANGELOG.md

@@ -83,6 +83,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1252](https://github.com/alleslabs/celatone-frontend/pull/1252) Improve EVM verify error details
 - [#1249](https://github.com/alleslabs/celatone-frontend/pull/1249) Improve import order
 - [#1248](https://github.com/alleslabs/celatone-frontend/pull/1248) Support querying multiple evm verification infos
 - [#1246](https://github.com/alleslabs/celatone-frontend/pull/1246) Handle undefined constructor args

src/lib/components/json/TextReadOnly.tsx

@@ -13,9 +13,14 @@ import { CopyButton } from "../copy";
 interface TextReadOnlyProps {
   text: string;
   canCopy?: boolean;
+  showLines?: number;
 }
 
-export const TextReadOnly = ({ text, canCopy }: TextReadOnlyProps) => {
+export const TextReadOnly = ({
+  text,
+  canCopy,
+  showLines,
+}: TextReadOnlyProps) => {
   const editorRef = useRef<AceEditor>(null);
   const { theme } = useCelatoneApp();
 
@@ -54,7 +59,8 @@ export const TextReadOnly = ({ text, canCopy }: TextReadOnlyProps) => {
           showGutter: false,
           printMargin: false,
           indentedSoftWrap: false,
-          maxLines: Infinity,
+          maxLines: showLines ?? Infinity,
+          minLines: showLines,
         }}
         value={text}
         editorProps={{ $blockScrolling: true }}

src/lib/components/modal/evm-verify-status/EvmVerifyAlert.tsx

@@ -6,13 +6,7 @@ interface EvmVerifyAlertProps {
   errorMsg: string;
 }
 export const EvmVerifyAlert = ({ errorMsg }: EvmVerifyAlertProps) => (
-  <Alert
-    p={2}
-    variant="error"
-    gap={{ base: 2, md: 4 }}
-    mb={{ base: 4, md: 6 }}
-    alignItems="flex-start"
-  >
+  <Alert p={2} variant="error" gap={{ base: 2, md: 4 }} alignItems="flex-start">
     <CustomIcon name="alert-triangle-solid" boxSize={4} color="error.main" />
     <AlertDescription>
       <Flex direction="column" gap={1}>

src/lib/components/modal/evm-verify-status/EvmVerifyFailed.tsx

@@ -0,0 +1,52 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { TextReadOnly } from "lib/components/json/TextReadOnly";
+import type { EvmVerifyError } from "lib/types";
+import { jsonPrettify } from "lib/utils";
+import { EvmVerifyAlert } from "./EvmVerifyAlert";
+
+interface EvmVerifyFailedProps {
+  evmVerifyError: EvmVerifyError;
+}
+
+export const EvmVerifyFailed = ({ evmVerifyError }: EvmVerifyFailedProps) => (
+  <>
+    <EvmVerifyAlert errorMsg={evmVerifyError.message} />
+    {typeof evmVerifyError.details === "string" ? (
+      <Flex direction="column" gap={2}>
+        <Text variant="body2" color="text.dark">
+          Compiler Warning
+        </Text>
+        <TextReadOnly
+          text={jsonPrettify(evmVerifyError.details)}
+          canCopy
+          showLines={10}
+        />
+      </Flex>
+    ) : (
+      <>
+        <Flex direction="column" gap={2}>
+          <Text variant="body2" color="text.dark">
+            Expected Bytecode
+          </Text>
+          <TextReadOnly
+            text={evmVerifyError.details.requiredBytecode}
+            canCopy
+            showLines={4}
+          />
+        </Flex>
+        <Flex direction="column" gap={2} mt={2}>
+          <Text variant="body2" color="text.dark">
+            Submitted Bytecode
+          </Text>
+          <TextReadOnly
+            text={jsonPrettify(
+              JSON.stringify(evmVerifyError.details.compiledResults)
+            )}
+            canCopy
+            showLines={10}
+          />
+        </Flex>
+      </>
+    )}
+  </>
+);

src/lib/components/modal/evm-verify-status/index.tsx

@@ -14,7 +14,7 @@ import {
 import type { ReactNode } from "react";
 
 import type { HexAddr20, Option, EvmVerifyInfo } from "lib/types";
-import { EvmVerifyAlert } from "./EvmVerifyAlert";
+import { EvmVerifyFailed } from "./EvmVerifyFailed";
 import { EvmVerifyProcess } from "./EvmVerifyProcess";
 import { EvmVerifyRequestInfo } from "./EvmVerifyRequestInfo";
 import { CustomIcon } from "../../icon";
@@ -50,16 +50,21 @@ export const EvmVerifyStatusModal = ({
       </ModalHeader>
       <ModalCloseButton color="gray.400" />
       <ModalBody p={{ base: 4, md: 6 }}>
-        {evmVerifyInfo?.errorMessage && (
-          <EvmVerifyAlert errorMsg={evmVerifyInfo.errorMessage} />
-        )}
         <Flex direction="column" gap={4}>
           <EvmVerifyRequestInfo
             contractAddress={contractAddress}
             evmVerifyInfo={evmVerifyInfo}
           />
-          <Divider borderColor="gray.700" />
-          {evmVerifyInfo && <EvmVerifyProcess evmVerifyInfo={evmVerifyInfo} />}
+          {evmVerifyInfo ? (
+            evmVerifyInfo.error ? (
+              <EvmVerifyFailed evmVerifyError={evmVerifyInfo.error} />
+            ) : (
+              <>
+                <EvmVerifyProcess evmVerifyInfo={evmVerifyInfo} />
+                <Divider borderColor="gray.700" />
+              </>
+            )
+          ) : null}
           <Button onClick={onClose} variant="outline-primary" mt={2}>
             Close
           </Button>

src/lib/components/modal/evm-verify-status/utils.ts

@@ -52,14 +52,14 @@ export const getProcessSteps = (
     label: "Submitted Source Code",
     ...getProcessStep(
       evmVerifyInfo.submittedTimestamp,
-      evmVerifyInfo.errorMessage
+      evmVerifyInfo.error?.message
     ),
   };
   const step2 = {
     label: "Verifying",
     ...getProcessStep(
       evmVerifyInfo.verifiedTimestamp,
-      evmVerifyInfo.errorMessage,
+      evmVerifyInfo.error?.message,
       step1.state
     ),
   };

src/lib/types/evm.ts

@@ -261,6 +261,31 @@ const zVyperOptimizer = z.enum(["none", "codesize", "gas"]);
 
 const zOptimizer = z.union([zEvmOptimizer, zVyperOptimizer]).optional();
 
+const zCompiledResults = z.array(
+  z.record(z.string(), z.object({ creation: z.string(), deployed: z.string() }))
+);
+
+const zEvmVerifyError = z
+  .preprocess(
+    (val) => JSON.parse(String(val)),
+    z.object({
+      code: z.string(),
+      message: z.string(),
+      details: z.union([
+        z.preprocess(
+          (val) => JSON.parse(String(val)),
+          z.object({
+            required_bytecode: z.string(),
+            compiled_results: zCompiledResults,
+          })
+        ),
+        z.string(),
+      ]),
+    })
+  )
+  .transform(snakeToCamel);
+export type EvmVerifyError = z.infer<typeof zEvmVerifyError>;
+
 // MARK - EvmVerifyInfo
 export const zEvmVerifyInfo = z
   .object({
@@ -279,7 +304,7 @@ export const zEvmVerifyInfo = z
     bytecode_type: z.string(),
     verified_timestamp: zUtcDate.optional(),
     submitted_timestamp: zUtcDate,
-    error_message: z.string().optional(),
+    error_message: zEvmVerifyError.optional(),
     settings: z.string().default("{}"),
     source_files: z.array(zEvmVerifyInfoSourceFile),
   })
@@ -290,5 +315,6 @@ export const zEvmVerifyInfo = z
     libraries: zEvmVerifyInfoLibraries.parse(
       JSON.parse(rest.settings).libraries
     ),
+    error: rest.error_message,
   }));
 export type EvmVerifyInfo = z.infer<typeof zEvmVerifyInfo>;