Feature/evm contract verified compiler

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1207](https://github.com/alleslabs/celatone-frontend/pull/1207) Add EVM contract details compiler settings
 - [#1206](https://github.com/alleslabs/celatone-frontend/pull/1206) Add EVM contract details abi
 - [#1204](https://github.com/alleslabs/celatone-frontend/pull/1204) Add EVM contract details deployed bytecode
 - [#1203](https://github.com/alleslabs/celatone-frontend/pull/1203) Fetch EVM verify config from API, and wire up to UIs as initial values

src/lib/pages/evm-contract-details/components/EvmContractDetailsContarct/ContractCompiler.tsx

@@ -0,0 +1,18 @@
+import { Heading, Stack } from "@chakra-ui/react";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { jsonPrettify } from "lib/utils";
+
+interface ContractCompilerProps {
+  compilerSettings: string;
+}
+
+export const ContractCompiler = ({
+  compilerSettings,
+}: ContractCompilerProps) => (
+  <Stack gap={4}>
+    <Heading as="h6" variant="h7">
+      Compiler Setting
+    </Heading>
+    <JsonReadOnly text={jsonPrettify(compilerSettings)} />
+  </Stack>
+);

src/lib/pages/evm-contract-details/components/EvmContractDetailsContarct/index.tsx

@@ -2,12 +2,13 @@ import { Flex, Stack } from "@chakra-ui/react";
 import { NotVerifiedDetails } from "lib/components/evm-verify-section";
 import { HexAddr20 } from "lib/types";
 import { EvmContractDetailsContractTabs } from "../../types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { TypeSwitch } from "lib/components/TypeSwitch";
 import { ContractByteCode, ContractByteCodeProps } from "./ContractByteCode";
 import { ContractAbi } from "./ContractAbi";
 import { useEvmVerifyInfo } from "lib/services/verification/evm";
-import { ErrorFetching } from "lib/components/state";
+import { Loading } from "lib/components/Loading";
+import { ContractCompiler } from "./ContractCompiler";
 
 interface EvmContractDetailsContractProps extends ContractByteCodeProps {
   contractAddress: HexAddr20;
@@ -18,27 +19,39 @@ export const EvmContractDetailsContract = ({
   code,
   deployedCode,
 }: EvmContractDetailsContractProps) => {
-  const { data } = useEvmVerifyInfo(contractAddress);
+  const { data, isLoading } = useEvmVerifyInfo(contractAddress);
 
   const [currentTab, setCurrentTab] = useState(
-    EvmContractDetailsContractTabs.Abi
+    EvmContractDetailsContractTabs.Code
   );
 
-  if (!data) return <ErrorFetching dataName="evm contract information" />;
+  useEffect(() => {
+    if (isLoading || data) return;
+    setCurrentTab(EvmContractDetailsContractTabs.ByteCode);
+  }, [isLoading, data]);
+
+  if (isLoading) return <Loading />;
 
   return (
     <Stack gap={8}>
       {/* // TODO: Support all status */}
       <NotVerifiedDetails contractAddress={contractAddress} />
-      <Flex>
-        <TypeSwitch
-          tabs={Object.values(EvmContractDetailsContractTabs)}
-          onTabChange={setCurrentTab}
-          currentTab={currentTab}
-        />
-      </Flex>
-      {currentTab === EvmContractDetailsContractTabs.Abi && (
-        <ContractAbi abi={data.abi} />
+      {data && (
+        <>
+          <Flex>
+            <TypeSwitch
+              tabs={Object.values(EvmContractDetailsContractTabs)}
+              onTabChange={setCurrentTab}
+              currentTab={currentTab}
+            />
+          </Flex>
+          {currentTab === EvmContractDetailsContractTabs.Compiler && (
+            <ContractCompiler compilerSettings={data.settings} />
+          )}
+          {currentTab === EvmContractDetailsContractTabs.Abi && (
+            <ContractAbi abi={data.abi} />
+          )}
+        </>
       )}
       {currentTab === EvmContractDetailsContractTabs.ByteCode && (
         <ContractByteCode code={code} deployedCode={deployedCode} />