Feat(components): add deployed bytecode

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#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
 - [#1202](https://github.com/alleslabs/celatone-frontend/pull/1202) Add EVM contract interaction form
 - [#1201](https://github.com/alleslabs/celatone-frontend/pull/1201) Add EVM contract verification with upload files

src/lib/components/TypeSwitch.tsx

@@ -0,0 +1,79 @@
+import { Flex } from "@chakra-ui/react";
+import { useCallback } from "react";
+
+import { MotionBox } from "lib/components/MotionBox";
+
+interface TypeSwitchProps<T extends string> {
+  tabs: T[];
+  currentTab: T;
+  disabled?: boolean;
+  onTabChange: (newType: T) => void;
+}
+
+export const TypeSwitch = <T extends string>({
+  tabs,
+  currentTab,
+  disabled = false,
+  onTabChange: onTabChangeProps,
+}: TypeSwitchProps<T>) => {
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
+
+  const onTabChange = useCallback(
+    (tab: T) => {
+      onTabChangeProps(tab);
+    },
+    [onTabChangeProps]
+  );
+
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      borderRadius="4px"
+      p={1}
+      direction="row"
+      align="center"
+      position="relative"
+      sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
+    >
+      {tabs.map((tab) => (
+        <MotionBox
+          key={tab}
+          cursor="pointer"
+          p="2px 10px"
+          w="96px"
+          fontSize="12px"
+          fontWeight={700}
+          variants={{
+            active: { color: "var(--chakra-colors-text-main)" },
+            inactive: {
+              color: "var(--chakra-colors-primary-light)",
+            },
+          }}
+          initial="inactive"
+          animate={currentTab === tab ? "active" : "inactive"}
+          onClick={() => onTabChange(tab as T)}
+          zIndex={1}
+          textAlign="center"
+          textTransform="capitalize"
+        >
+          {tab}
+        </MotionBox>
+      ))}
+      <MotionBox
+        w="96px"
+        h="22px"
+        position="absolute"
+        borderRadius="2px"
+        backgroundColor="primary.darker"
+        animate={{
+          left: `${activeIndex * 96 + 4}px`,
+        }}
+        transition={{
+          type: "spring",
+          stiffness: "250",
+          damping: "30",
+        }}
+      />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { Heading, Stack } from "@chakra-ui/react";
+import { TextReadOnly } from "lib/components/json/TextReadOnly";
+import { Option } from "lib/types";
+
+export interface ContractByteCodeProps {
+  byteCode: Option<string>;
+  deployedByteCode: string;
+}
+
+export const ContractByteCode = ({
+  byteCode = "",
+  deployedByteCode,
+}: ContractByteCodeProps) => (
+  <Stack gap={8}>
+    <Stack gap={4}>
+      <Heading as="h6" variant="h7">
+        ByteCode
+      </Heading>
+      <TextReadOnly text={byteCode} canCopy />
+    </Stack>
+    <Stack gap={4}>
+      <Heading as="h6" variant="h7">
+        Deployed ByteCode
+      </Heading>
+      <TextReadOnly text={deployedByteCode} canCopy />
+    </Stack>
+  </Stack>
+);

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

@@ -0,0 +1,41 @@
+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 { TypeSwitch } from "lib/components/TypeSwitch";
+import { ContractByteCode, ContractByteCodeProps } from "./ContractByteCode";
+
+interface EvmContractDetailsContractProps extends ContractByteCodeProps {
+  contractAddress: HexAddr20;
+}
+
+export const EvmContractDetailsContract = ({
+  contractAddress,
+  byteCode,
+  deployedByteCode,
+}: EvmContractDetailsContractProps) => {
+  const [currentTab, setCurrentTab] = useState(
+    EvmContractDetailsContractTabs.ByteCode
+  );
+
+  return (
+    <Stack gap={8}>
+      {/* // TODO: Support all status */}
+      <NotVerifiedDetails contractAddress={contractAddress} />
+      <Flex>
+        <TypeSwitch
+          tabs={Object.values(EvmContractDetailsContractTabs)}
+          onTabChange={setCurrentTab}
+          currentTab={currentTab}
+        />
+      </Flex>
+      {currentTab === EvmContractDetailsContractTabs.ByteCode && (
+        <ContractByteCode
+          byteCode={byteCode}
+          deployedByteCode={deployedByteCode}
+        />
+      )}
+    </Stack>
+  );
+};

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

@@ -24,7 +24,7 @@ import { useEvmTxHashByCosmosTxHash } from "lib/services/tx";
 import type { HexAddr20 } from "lib/types";
 import { isHexWalletAddress, truncate } from "lib/utils";
 
-import { EvmContractDetailsBytecode } from "./components/EvmContractDetailsBytecode";
+import { EvmContractDetailsContract } from "./components/EvmContractDetailsContarct";
 import { EvmContractDetailsOverview } from "./components/EvmContractDetailsOverview";
 import { EvmContractDetailsTop } from "./components/EvmContractDetailsTop";
 import { EvmContractDetailsTxs } from "./components/EvmContractDetailsTxs";
@@ -140,8 +140,9 @@ const EvmContractDetailsBody = ({
               />
             </TabPanel>
             <TabPanel p={0} pt={8}>
-              <EvmContractDetailsBytecode
-                code={evmCodesByAddressData.code}
+              <EvmContractDetailsContract
+                deployedByteCode={evmCodesByAddressData.code}
+                byteCode={evmContractInfoData?.code}
                 contractAddress={contractAddress}
               />
             </TabPanel>

src/lib/pages/evm-contract-details/types.ts

@@ -9,6 +9,13 @@ export enum TabIndex {
   Transactions = "transactions",
 }
 
+export enum EvmContractDetailsContractTabs {
+  Code = "code",
+  Compiler = "compiler",
+  Abi = "abi",
+  ByteCode = "byteCode",
+}
+
 export const zEvmContractDetailsQueryParams = z.object({
   contractAddress: zHexAddr20,
   tab: z.union([

src/lib/pages/interact-contract/components/index.ts

@@ -1,4 +1,3 @@
 export * from "./execute-area";
 export * from "./query-area";
-export * from "./InteractionTypeSwitch";
 export * from "./InteractionWrapper";

src/lib/pages/interact-contract/index.tsx

@@ -20,14 +20,10 @@ import type { BechAddr32, Coin } from "lib/types";
 import { ContractInteractionTabs } from "lib/types";
 import { jsonPrettify, jsonValidate, libDecode } from "lib/utils";
 
-import {
-  ExecuteArea,
-  InteractionTypeSwitch,
-  InteractionWrapper,
-  QueryArea,
-} from "./components";
+import { ExecuteArea, InteractionWrapper, QueryArea } from "./components";
 import type { InteractContractQueryParams } from "./types";
 import { zInteractContractQueryParams } from "./types";
+import { TypeSwitch } from "lib/components/TypeSwitch";
 
 const INTERACT_CONTRACT_PATH_NAME = "/interact-contract";
 
@@ -154,7 +150,8 @@ const InteractContractBody = ({
           {capitalize(selectedType)} Message
         </Heading>
         {!isMobile && (
-          <InteractionTypeSwitch
+          <TypeSwitch
+            tabs={Object.values(ContractInteractionTabs)}
             currentTab={selectedType}
             onTabChange={handleSetSelectedType}
           />

src/lib/services/evm/lcd.ts

@@ -7,6 +7,7 @@ import {
   convertAccountPubkeyToAccountAddress,
   parseWithError,
 } from "lib/utils";
+import { zEvmMsgCreate } from "../types";
 
 export const getEvmParams = (endpoint: string) =>
   axios
@@ -35,9 +36,15 @@ export const getEvmContractInfoSequencer = async (
   const tx = txs.items[0];
   const sender = convertAccountPubkeyToAccountAddress(tx.signerPubkey, prefix);
 
+  const foundMsgCreate = tx.messages.find(
+    (msg) => msg.type === "/minievm.evm.v1.MsgCreate"
+  );
+  const evmMsgCreate = zEvmMsgCreate.parse(foundMsgCreate);
+
   return {
     hash: tx.hash,
     sender,
     created: tx.created,
+    code: evmMsgCreate.code,
   };
 };

src/lib/services/types/tx.ts

@@ -175,6 +175,7 @@ export const zTxsResponseItemFromLcd =
     const messages = txBody.messages.map<Message>((msg, idx) => ({
       log: logs[idx],
       type: msg["@type"],
+      ...msg,
     }));
 
     const { isIbc, isOpinit, isEvm } = messages.reduce(
@@ -490,3 +491,8 @@ export const zSimulateFeeEvm = z
     simulatedGasUsed,
   }));
 export type SimulatedFeeEvm = z.infer<typeof zSimulateFeeEvm>;
+
+export const zEvmMsgCreate = z.object({
+  type: z.literal("/minievm.evm.v1.MsgCreate"),
+  code: z.string(),
+});