fix: evm create null to

CHANGELOG.md

@@ -90,6 +90,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1243](https://github.com/alleslabs/celatone-frontend/pull/1243) Fix EVM Create checked by null To instead
 - [#1241](https://github.com/alleslabs/celatone-frontend/pull/1241) Fix EVM contract details interaction filter
 - [#1239](https://github.com/alleslabs/celatone-frontend/pull/1239) Fix check verified EVM contract and minor EVM contract details
 - [#1238](https://github.com/alleslabs/celatone-frontend/pull/1238) Fix EVM verify external docs link and EVM contract details mobile

src/lib/components/EvmMethodChip.tsx

@@ -1,18 +1,21 @@
 import { Tag } from "@chakra-ui/react";
 import type { TagProps } from "@chakra-ui/react";
+import type { HexAddr20, Nullable } from "lib/types";
 
 import { getEvmMethod } from "lib/utils";
 
 interface EvmMethodChipProps {
   txInput: string;
+  txTo: Nullable<HexAddr20>;
   width?: TagProps["width"];
 }
 
 export const EvmMethodChip = ({
   txInput,
+  txTo,
   width = "144px",
 }: EvmMethodChipProps) => (
   <Tag width={width} height="17px" variant="gray" justifyContent="center">
-    {getEvmMethod(txInput)}
+    {getEvmMethod(txInput, txTo)}
   </Tag>
 );

src/lib/components/EvmToCell.tsx

@@ -1,7 +1,7 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import type { Option } from "lib/types";
-import type { EvmToAddress } from "lib/utils";
+import type { EvmToAddress, HexAddr20, Option } from "lib/types";
+import { EvmMethodName } from "lib/types";
 
 import { ExplorerLink } from "./ExplorerLink";
 import { CustomIcon } from "./icon";
@@ -10,40 +10,52 @@ interface EvmToCellProps {
   toAddress: Option<EvmToAddress>;
 }
 
+const EvmToCellCreate = ({
+  address,
+}: {
+  address: HexAddr20;
+  evmTxHash?: string;
+}) => (
+  <Flex direction="column">
+    <Text variant="body3" color="text.disabled">
+      Created Contract
+    </Text>
+    {/* TODO: fix contract addresses */}
+    <Flex gap={1} align="center">
+      <CustomIcon name="contract-address" boxSize={3} color="primary.main" />
+      <ExplorerLink
+        value={address}
+        type="evm_contract_address"
+        showCopyOnHover
+      />
+    </Flex>
+  </Flex>
+);
+
 export const EvmToCell = ({ toAddress }: EvmToCellProps) => {
-  if (toAddress?.isCreatedContract)
+  if (!toAddress)
     return (
-      <Flex direction="column">
-        <Text variant="body3" color="text.disabled">
-          Created Contract
-        </Text>
-        <Flex gap={1} align="center">
-          <CustomIcon
-            name="contract-address"
-            boxSize={3}
-            color="primary.main"
-          />
-          <ExplorerLink
-            value={toAddress.address}
-            type={toAddress.type}
-            showCopyOnHover
-          />
-        </Flex>
-      </Flex>
+      <Text variant="body2" color="text.dark">
+        -
+      </Text>
     );
 
-  if (toAddress)
+  if (toAddress.toType === EvmMethodName.Create)
     return (
-      <ExplorerLink
-        value={toAddress.address}
-        type={toAddress.type}
-        showCopyOnHover
+      <EvmToCellCreate
+        address={toAddress.address}
+        evmTxHash={toAddress.evmTxHash}
       />
     );
 
+  if (toAddress.toType === EvmMethodName.CallErc20Factory)
+    return <EvmToCellCreate address={toAddress.address} />;
+
   return (
-    <Text variant="body2" color="text.dark">
-      -
-    </Text>
+    <ExplorerLink
+      value={toAddress.address}
+      type="user_address"
+      showCopyOnHover
+    />
   );
 };

src/lib/components/table/evm-transactions/EvmTransactionsTableMobileCard.tsx

@@ -66,7 +66,10 @@ export const EvmTransactionsTableMobileCard = ({
           </Flex>
           <Flex direction="column" flex={2} gap={1}>
             <MobileLabel label="Method" />
-            <EvmMethodChip txInput={evmTransaction.tx.input} />
+            <EvmMethodChip
+              txInput={evmTransaction.tx.input}
+              txTo={evmTransaction.tx.to}
+            />
           </Flex>
         </Flex>
       }

src/lib/components/table/evm-transactions/EvmTransactionsTableRow.tsx

@@ -72,7 +72,10 @@ export const EvmTransactionsTableRow = ({
         )}
       </TableRow>
       <TableRow>
-        <EvmMethodChip txInput={evmTransaction.tx.input} />
+        <EvmMethodChip
+          txInput={evmTransaction.tx.input}
+          txTo={evmTransaction.tx.to}
+        />
       </TableRow>
       <TableRow>
         <ExplorerLink

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

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 
 import {
   useEvmTxHashesByCosmosTxHashes,
+  useEvmTxsDataJsonRpc,
   useTxsByAddressPaginationSequencer,
-  useTxsDataJsonRpc,
 } from "lib/services/tx";
 import type { TxDataWithTimeStampJsonRpc } from "lib/services/types";
 import type { BechAddr20, Nullish } from "lib/types";
@@ -38,7 +38,7 @@ export const useContractDetailsEvmTxs = (address: BechAddr20) => {
     data: newEvmTxsData,
     isFetching: isNewEvmTxsDataFetching,
     isError: isNewEvmTxsDataError,
-  } = useTxsDataJsonRpc(
+  } = useEvmTxsDataJsonRpc(
     newEvmTxHashes?.filter((tx) => tx !== null) as string[],
     !isCosmosTxsFetching && !isNewEvmHashesFetching
   );

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

@@ -2,17 +2,19 @@ import { Flex, Heading } from "@chakra-ui/react";
 import { useMemo, useState } from "react";
 
 import { TextReadOnly } from "lib/components/json/TextReadOnly";
+import type { HexAddr20, Nullable } from "lib/types";
 import { EvmMethodName } from "lib/types";
 import { getEvmMethod } from "lib/utils";
 
 import { EvmDataFormatSwitch, EvmDataFormatTabs } from "./EvmDataFormatSwitch";
 
 interface EvmInputDataProps {
-  inputData: string;
+  txInput: string;
+  txTo: Nullable<HexAddr20>;
 }
 
-export const EvmInputData = ({ inputData }: EvmInputDataProps) => {
-  const evmMethod = getEvmMethod(inputData);
+export const EvmInputData = ({ txInput, txTo }: EvmInputDataProps) => {
+  const evmMethod = getEvmMethod(txInput, txTo);
   const showFormatOption =
     evmMethod !== EvmMethodName.Transfer && evmMethod !== EvmMethodName.Create;
   const [tab, setTab] = useState<EvmDataFormatTabs>(
@@ -25,8 +27,8 @@ export const EvmInputData = ({ inputData }: EvmInputDataProps) => {
         const chunkSize = 64;
         const formattedData: string[] = [];
 
-        const methodId = inputData.slice(0, 10);
-        const remainingData = inputData.slice(10);
+        const methodId = txInput.slice(0, 10);
+        const remainingData = txInput.slice(10);
 
         formattedData.push(`MethodID: ${methodId}`);
 
@@ -39,12 +41,12 @@ export const EvmInputData = ({ inputData }: EvmInputDataProps) => {
         return formattedData.join("\n");
       }
       case EvmDataFormatTabs.UTF8:
-        return Buffer.from(inputData.slice(2), "hex").toString("binary");
+        return Buffer.from(txInput.slice(2), "hex").toString("binary");
       case EvmDataFormatTabs.Raw:
       default:
-        return inputData;
+        return txInput;
     }
-  }, [inputData, tab]);
+  }, [txInput, tab]);
 
   return (
     <>

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

@@ -34,6 +34,6 @@ export const EvmTxMsgDetails = ({
       </Alert>
     )}
     <EvmTxMsgDetailsBody evmTxData={evmTxData} evmDenom={evmDenom} />
-    <EvmInputData inputData={evmTxData.tx.input} />
+    <EvmInputData txInput={evmTxData.tx.input} txTo={evmTxData.tx.to} />
   </Flex>
 );

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

@@ -21,7 +21,7 @@ export const EvmTxMsgDetailsBody = ({
   evmTxData,
   evmDenom,
 }: EvmTxMsgDetailsBodyProps) => {
-  const method = getEvmMethod(evmTxData.tx.input);
+  const method = getEvmMethod(evmTxData.tx.input, evmTxData.tx.to);
   const { data: assetInfos } = useAssetInfos({
     withPrices: true,
   });

src/lib/pages/evm-tx-details/components/evm-tx-method/EvmTxCreateContract.tsx

@@ -17,6 +17,8 @@ export const EvmTxCreateContract = ({
   const { from } = evmTxData.tx;
   const { contractAddress } = evmTxData.txReceipt;
 
+  // TODO: fix contract addresses
+
   return (
     <EvmTxMethodAccordion
       msgIcon="instantiate"

src/lib/pages/evm-tx-details/components/evm-tx-method/EvmTxTransfer.tsx

@@ -45,7 +45,7 @@ export const EvmTxTransfer = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_send_address"
           />{" "}
-          <EvmMethodChip txInput={input} width="65px" />{" "}
+          <EvmMethodChip txInput={input} txTo={to} width="65px" />{" "}
           {formatTokenWithValue(amount)} to{" "}
           {to ? (
             <ExplorerLink

src/lib/pages/evm-tx-details/components/evm-tx-method/EvmTxTransferErc20.tsx

@@ -9,9 +9,8 @@ import type { AssetInfos, Option } from "lib/types";
 import {
   coinToTokenWithValue,
   convertToEvmDenom,
+  extractErc20TransferInput,
   formatTokenWithValue,
-  getEvmToAddress,
-  hexToBig,
   isSupportedToken,
 } from "lib/utils";
 
@@ -29,12 +28,11 @@ export const EvmTxTransferErc20 = ({
 }: EvmTxTransferErc20Props) => {
   const { from, input, to: erc20Contract } = evmTxData.tx;
 
-  const toAddress = getEvmToAddress(evmTxData);
-  const amountBig = hexToBig(evmTxData.tx.input.slice(74, 138));
+  const { address, amount } = extractErc20TransferInput(input);
 
-  const amount = coinToTokenWithValue(
+  const amountToken = coinToTokenWithValue(
     erc20Contract ? convertToEvmDenom(erc20Contract) : "",
-    amountBig.toString(),
+    amount.toString(),
     assetInfos
   );
 
@@ -50,20 +48,14 @@ export const EvmTxTransferErc20 = ({
             textVariant="body1"
             ampCopierSection="tx_page_message_header_send_address"
           />{" "}
-          <EvmMethodChip txInput={input} width="110px" />{" "}
-          {formatTokenWithValue(amount)} to{" "}
-          {toAddress?.address ? (
-            <ExplorerLink
-              type={toAddress.type}
-              value={toAddress.address}
-              showCopyOnHover
-              textVariant="body1"
-            />
-          ) : (
-            <Text variant="body2" color="text.disabled">
-              -
-            </Text>
-          )}
+          <EvmMethodChip txInput={input} txTo={erc20Contract} width="110px" />{" "}
+          {formatTokenWithValue(amountToken)} to{" "}
+          <ExplorerLink
+            type="user_address"
+            value={address}
+            showCopyOnHover
+            textVariant="body1"
+          />
         </Box>
       }
     >
@@ -82,19 +74,13 @@ export const EvmTxTransferErc20 = ({
       <EvmInfoLabelValue
         label="To"
         value={
-          toAddress ? (
-            <ExplorerLink
-              type={toAddress.type}
-              value={toAddress.address}
-              showCopyOnHover
-              textFormat="normal"
-              fixedHeight={false}
-            />
-          ) : (
-            <Text variant="body2" color="text.disabled">
-              -
-            </Text>
-          )
+          <ExplorerLink
+            type="user_address"
+            value={address}
+            showCopyOnHover
+            textFormat="normal"
+            fixedHeight={false}
+          />
         }
       />
       <EvmInfoLabelValue
@@ -125,11 +111,11 @@ export const EvmTxTransferErc20 = ({
       <EvmInfoLabelValue
         label="Transferred Token"
         value={
-          isSupportedToken(amount) ? (
-            <TokenCard token={amount} minW={{ base: "full", md: "50%" }} />
+          isSupportedToken(amountToken) ? (
+            <TokenCard token={amountToken} minW={{ base: "full", md: "50%" }} />
           ) : (
             <UnsupportedToken
-              token={amount}
+              token={amountToken}
               minW={{ base: "full", md: "50%" }}
             />
           )

src/lib/pages/evm-tx-details/data.ts

@@ -6,8 +6,8 @@ import { useBlockDataJsonRpc } from "lib/services/block";
 import { useEvmParams } from "lib/services/evm";
 import {
   useCosmosTxHashByEvmTxHash,
+  useEvmTxDataJsonRpc,
   useTxData,
-  useTxDataJsonRpc,
 } from "lib/services/tx";
 import type { TxData, TxDataJsonRpc } from "lib/services/types";
 import { type Option, type Ratio, type TokenWithValue } from "lib/types";
@@ -41,7 +41,7 @@ export const useEvmTxDetailsData = (evmTxHash: string): EvmTxDetailsData => {
     withPrices: true,
   });
   const { data: evmTxData, isLoading: isLoadingEvmTxData } =
-    useTxDataJsonRpc(evmTxHash);
+    useEvmTxDataJsonRpc(evmTxHash);
   const { data: cosmosTxHash } = useCosmosTxHashByEvmTxHash(evmTxHash);
   const { data: cosmosTxData, isLoading: isLoadingCosmosTxData } = useTxData(
     cosmosTxHash,

src/lib/pages/tx-details/components/evm-related-tx-section/index.tsx

@@ -7,7 +7,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
-import { useTxDataJsonRpc } from "lib/services/tx";
+import { useEvmTxDataJsonRpc } from "lib/services/tx";
 import { formatEvmTxHash, getEvmToAddress } from "lib/utils";
 
 import { EvmRelatedField } from "./EvmRelatedField";
@@ -18,7 +18,7 @@ interface EvmRelatedTxSectionProps {
 
 const EvmRelatedTxSectionBody = ({ evmTxHash }: EvmRelatedTxSectionProps) => {
   const isMobile = useMobile();
-  const { data, isLoading } = useTxDataJsonRpc(evmTxHash);
+  const { data, isLoading } = useEvmTxDataJsonRpc(evmTxHash);
 
   if (isLoading) return <Loading my={0} py={0} />;
   if (!data)
@@ -41,7 +41,7 @@ const EvmRelatedTxSectionBody = ({ evmTxHash }: EvmRelatedTxSectionProps) => {
         />
       </EvmRelatedField>
       <EvmRelatedField label="Method">
-        <EvmMethodChip txInput={data.tx.input} width={36} />
+        <EvmMethodChip txInput={data.tx.input} txTo={data.tx.to} width={36} />
       </EvmRelatedField>
       <EvmRelatedField label="Sender">
         <ExplorerLink