Feature/EVM txs logs

CHANGELOG.md

@@ -39,7 +39,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
-- [#1250](https://github.com/alleslabs/celatone-frontend/pull/1250) Add evm code snippet modal and fix input fields
+- [#1257](https://github.com/alleslabs/celatone-frontend/pull/1257) Add EVM transaction event logs
+- [#1250](https://github.com/alleslabs/celatone-frontend/pull/1250) Add EVM code snippet modal and fix input fields
 - [#1247](https://github.com/alleslabs/celatone-frontend/pull/1247) Support multi address creation txs
 - [#1245](https://github.com/alleslabs/celatone-frontend/pull/1245) Support assets from assetlist in chain config
 - [#1244](https://github.com/alleslabs/celatone-frontend/pull/1244) Add EVM contract verify alert info to both Solidity and Vyper upload file(s) and contract code

src/lib/components/LabelText.tsx

@@ -12,6 +12,7 @@ export interface LabelTextProps extends FlexProps {
   children?: string | JSX.Element;
   helperText1?: string;
   helperText2?: string;
+  minWidth?: string;
 }
 
 export const LabelText = ({
@@ -23,10 +24,11 @@ export const LabelText = ({
   children,
   helperText1,
   helperText2,
+  minWidth,
   ...flexProps
 }: LabelTextProps) => (
   <Flex direction="column" gap={1} {...flexProps}>
-    <Flex align="center" gap={1}>
+    <Flex align="center" gap={1} minWidth={minWidth}>
       <Text
         variant={isSmall ? "body3" : "body2"}
         color={labelColor}

src/lib/components/TypeSwitch.tsx

@@ -8,25 +8,27 @@ interface TypeSwitchProps<T extends string> {
   currentTab: T;
   disabled?: boolean;
   onTabChange: (newType: T) => void;
+  disabledScrollToTop?: boolean;
 }
 
 export const TypeSwitch = <T extends string>({
   tabs,
   currentTab,
   disabled = false,
   onTabChange: onTabChangeProps,
+  disabledScrollToTop,
 }: TypeSwitchProps<T>) => {
   const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
 
   const onTabChange = useCallback(
     (tab: T) => {
       onTabChangeProps(tab);
       const content = document.getElementById("content");
-      if (content) {
+      if (content && !disabledScrollToTop) {
         content.scrollTo({ top: 0 });
       }
     },
-    [onTabChangeProps]
+    [onTabChangeProps, disabledScrollToTop]
   );
 
   return (
@@ -37,6 +39,7 @@ export const TypeSwitch = <T extends string>({
       direction="row"
       align="center"
       position="relative"
+      height="fit-content"
       sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
     >
       {tabs.map((tab) => (

src/lib/components/forms/SelectInput.tsx

@@ -118,7 +118,7 @@ export const SelectInput = <
         option: (provided) => ({
           ...provided,
           color: "text.main",
-          fontSize: "16px",
+          fontSize: size === "sm" ? "14px" : "16px",
           _hover: {
             bg: "gray.700",
           },

src/lib/pages/evm-tx-details/components/EvmTxMsgDetails.tsx

@@ -1,9 +1,13 @@
-import { Alert, AlertDescription, Flex } from "@chakra-ui/react";
+import { Alert, AlertDescription, Flex, Text } from "@chakra-ui/react";
 
+import plur from "plur";
+import { DividerWithArrow } from "lib/components/DividerWithArrow";
 import { CustomIcon } from "lib/components/icon";
 import type { TxData, TxDataJsonRpc } from "lib/services/types";
+import { useEvmVerifyInfos } from "lib/services/verification/evm";
 import type { Option } from "lib/types";
 
+import { EvmEventBox } from "./evm-event-box";
 import { EvmInputData } from "./EvmInputData";
 import { EvmTxMsgDetailsBody } from "./EvmTxMsgDetailsBody";
 
@@ -17,23 +21,46 @@ export const EvmTxMsgDetails = ({
   evmTxData,
   cosmosTxData,
   evmDenom,
-}: EvmTxMsgDetailsProps) => (
-  <Flex direction="column" flex={1} gap={4} w="full">
-    {cosmosTxData.isTxFailed && (
-      <Alert variant="error" mb={2} alignItems="center" overflow="unset">
-        <Flex gap={2} align="start">
-          <CustomIcon
-            name="alert-triangle-solid"
-            color="error.main"
-            boxSize={4}
-          />
-          <AlertDescription wordBreak="break-word">
-            {cosmosTxData.rawLog}
-          </AlertDescription>
-        </Flex>
-      </Alert>
-    )}
-    <EvmTxMsgDetailsBody evmTxData={evmTxData} evmDenom={evmDenom} />
-    <EvmInputData txInput={evmTxData.tx.input} txTo={evmTxData.tx.to} />
-  </Flex>
-);
+}: EvmTxMsgDetailsProps) => {
+  const { data } = useEvmVerifyInfos(
+    evmTxData.txReceipt.logs.map((log) => log.address)
+  );
+
+  return (
+    <Flex direction="column" flex={1} gap={4} w="full">
+      {cosmosTxData.isTxFailed && (
+        <Alert variant="error" mb={2} alignItems="center" overflow="unset">
+          <Flex gap={2} align="start">
+            <CustomIcon
+              name="alert-triangle-solid"
+              color="error.main"
+              boxSize={4}
+            />
+            <AlertDescription wordBreak="break-word">
+              {cosmosTxData.rawLog}
+            </AlertDescription>
+          </Flex>
+        </Alert>
+      )}
+      <EvmTxMsgDetailsBody evmTxData={evmTxData} evmDenom={evmDenom} />
+      <EvmInputData txInput={evmTxData.tx.input} txTo={evmTxData.tx.to} />
+      {!!evmTxData.txReceipt.logs.length && (
+        <>
+          <DividerWithArrow />
+          <Text variant="body2" fontWeight={500} color="text.dark">
+            {plur("Event Log", evmTxData.txReceipt.logs.length)}
+          </Text>
+          <Flex direction="column" gap={3} w="full">
+            {evmTxData.txReceipt.logs.map((log) => (
+              <EvmEventBox
+                key={log.logIndex.toString()}
+                log={log}
+                evmVerifyInfo={data?.[log.address] ?? null}
+              />
+            ))}
+          </Flex>
+        </>
+      )}
+    </Flex>
+  );
+};

src/lib/pages/evm-tx-details/components/evm-event-box/evm-event-box-data.tsx

@@ -0,0 +1,157 @@
+import { Box, Checkbox, Flex, Stack, Text } from "@chakra-ui/react";
+import type { LogDescription } from "ethers";
+import { useState } from "react";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { SelectInput } from "lib/components/forms";
+import { TextReadOnly } from "lib/components/json/TextReadOnly";
+import type { TxReceiptJsonRpcLog } from "lib/services/types";
+import type { Nullish } from "lib/types";
+import { EvmEventBoxDecoded } from "./evm-event-box-decoded";
+import { EvmEventBoxTabs } from "../../types";
+
+interface EvmEventBoxDataProps
+  extends Pick<TxReceiptJsonRpcLog, "data" | "topics"> {
+  tab: EvmEventBoxTabs;
+  parsedLog: Nullish<LogDescription>;
+}
+
+const EvmEventBoxDataBody = ({ text }: { text: string }) => {
+  const count0x = text.match(/^0+/)?.[0].length || 0;
+  const isAddress = count0x >= 24;
+  const options = [
+    {
+      label: "Hex",
+      value: "hex",
+      isDisabled: false,
+    },
+    {
+      label: "Text",
+      value: "text",
+      isDisabled: false,
+    },
+    {
+      label: "Number",
+      value: "number",
+      isDisabled: false,
+    },
+    {
+      label: "Address",
+      value: "address",
+      isDisabled: !isAddress,
+    },
+  ];
+
+  const [value, setValue] = useState<string | undefined>(options[0].value);
+
+  const handleDecodeText = () => {
+    switch (value) {
+      case "address":
+        return "0x" + text.slice(-40);
+      case "number":
+        return parseInt(text, 16);
+      case "text":
+        return Buffer.from(text, "hex").toString("binary");
+      default:
+        return text;
+    }
+  };
+
+  return (
+    <Flex
+      gap={4}
+      alignItems={{
+        base: "flex-start",
+        md: "center",
+      }}
+      wordBreak="break-all"
+    >
+      <Box minWidth="110px">
+        <SelectInput
+          classNamePrefix="chakra-react-select"
+          size="sm"
+          options={options}
+          placeholder=""
+          value={options.find(
+            ({ value: optionValue }) => optionValue === value
+          )}
+          onChange={(newValue) => setValue(newValue?.value)}
+          menuPortalTarget={document.body}
+        />
+      </Box>
+      {value === "address" ? (
+        <ExplorerLink
+          value={handleDecodeText().toString()}
+          type="user_address"
+          openNewTab
+          textFormat="normal"
+        />
+      ) : (
+        <Text variant="body2" fontFamily="mono">
+          {handleDecodeText()}
+        </Text>
+      )}
+    </Flex>
+  );
+};
+
+export const EvmEventBoxData = ({
+  data,
+  topics,
+  tab,
+  parsedLog,
+}: EvmEventBoxDataProps) => {
+  const [isFormatted, setIsFormatted] = useState(false);
+
+  return tab === EvmEventBoxTabs.Hex || data.trim() === "0x" ? (
+    <Stack gap={1} w="full">
+      {isFormatted ? (
+        <Box
+          minH={{ base: "360px", md: "auto" }}
+          px={3}
+          py={4}
+          position="relative"
+          borderWidth="thin"
+          borderColor="gray.700"
+          borderRadius="8px"
+          transition="all 0.25s ease-in-out"
+          _hover={{
+            borderColor: "gray.600",
+            "& .copy-button-box": { display: "block" },
+          }}
+        >
+          <Stack gap={2}>
+            {data
+              .slice(2)
+              .match(/.{1,64}/g)
+              ?.map((d, index) => (
+                <EvmEventBoxDataBody text={d} key={`${d}-${index}`} />
+              ))}
+          </Stack>
+        </Box>
+      ) : (
+        <TextReadOnly text={data} canCopy />
+      )}
+      {data.trim() !== "0x" && (
+        <Checkbox
+          isChecked={isFormatted}
+          onChange={(e) => setIsFormatted(e.target.checked)}
+        >
+          <Text variant="body3">Formatted</Text>
+        </Checkbox>
+      )}
+    </Stack>
+  ) : (
+    <Stack gap={2} p={4} borderRadius={8} bgColor="gray.800" w="full">
+      {parsedLog &&
+        parsedLog.fragment.inputs
+          .slice(topics.length - 1)
+          .map((input, index) => (
+            <EvmEventBoxDecoded
+              key={input.name}
+              input={input}
+              decode={parsedLog.args.slice(topics.length - 1)[index]}
+            />
+          ))}
+    </Stack>
+  );
+};

src/lib/pages/evm-tx-details/components/evm-event-box/evm-event-box-decoded.tsx

@@ -0,0 +1,68 @@
+import { Flex, Grid, Tag, Text } from "@chakra-ui/react";
+import type { ParamType } from "ethers";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { TextReadOnly } from "lib/components/json/TextReadOnly";
+import { jsonPrettify } from "lib/utils";
+
+interface EvmEventBoxDecodedProps {
+  index?: number;
+  input: ParamType;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  decode: any;
+}
+
+const EvmEventBoxDecodedBody = ({
+  decode,
+  baseType,
+}: Pick<EvmEventBoxDecodedProps, "decode"> & {
+  baseType: string;
+}) => {
+  switch (baseType) {
+    case "address":
+      return (
+        <ExplorerLink
+          value={decode.toString()}
+          type="user_address"
+          openNewTab
+          textFormat="normal"
+        />
+      );
+    case "tuple":
+      return <TextReadOnly text={jsonPrettify(JSON.stringify(decode))} />;
+    case "array":
+      return (
+        <Text variant="body2" fontFamily="mono">
+          [{decode.toString()}]
+        </Text>
+      );
+    default:
+      return (
+        <Text variant="body2" fontFamily="mono">
+          {decode.toString()}
+        </Text>
+      );
+  }
+};
+
+export const EvmEventBoxDecoded = ({
+  index,
+  input,
+  decode,
+}: EvmEventBoxDecodedProps) => (
+  <Grid
+    gap={1}
+    gridTemplateColumns="minmax(max-content,180px) 1fr"
+    wordBreak="break-all"
+  >
+    <Flex gap={2} alignItems="center">
+      {index !== undefined && (
+        <Text variant="body2" fontFamily="mono">
+          [{index + 1}]
+        </Text>
+      )}
+      <Text variant="body2">{input.name}</Text>
+      <Tag variant="gray">{input.type}</Tag>
+    </Flex>
+    <EvmEventBoxDecodedBody decode={decode} baseType={input.baseType} />
+  </Grid>
+);