feat: call erc20 factory

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1139](https://github.com/alleslabs/celatone-frontend/pull/1139) Support EVM method call erc20 factory
 - [#1127](https://github.com/alleslabs/celatone-frontend/pull/1127) Add EVM contract details EVM transactions
 - [#1131](https://github.com/alleslabs/celatone-frontend/pull/1131) Support EIP-1559 gas information on EVM Tx details page
 - [#1120](https://github.com/alleslabs/celatone-frontend/pull/1120) Add EVM contract details Cosmos transactions

src/lib/components/EvmMethodChip.tsx

@@ -5,10 +5,13 @@ import { getEvmMethod } from "lib/utils";
 
 interface EvmMethodChipProps {
   txInput: string;
-  width: TagProps["width"];
+  width?: TagProps["width"];
 }
 
-export const EvmMethodChip = ({ txInput, width }: EvmMethodChipProps) => (
+export const EvmMethodChip = ({
+  txInput,
+  width = "144px",
+}: EvmMethodChipProps) => (
   <Tag width={width} height="17px" variant="gray" justifyContent="center">
     {getEvmMethod(txInput)}
   </Tag>

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

@@ -36,7 +36,7 @@ export const EvmTransactionsTable = ({
     "32px",
     "160px",
     "48px",
-    "minmax(140px, 1fr)",
+    "minmax(180px, 1fr)",
     "minmax(160px, 2fr)",
     "48px",
     "minmax(180px, 2fr)",

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

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

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

@@ -72,7 +72,7 @@ export const EvmTransactionsTableRow = ({
         )}
       </TableRow>
       <TableRow>
-        <EvmMethodChip txInput={evmTransaction.tx.input} width="120px" />
+        <EvmMethodChip txInput={evmTransaction.tx.input} />
       </TableRow>
       <TableRow>
         <ExplorerLink

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

@@ -4,6 +4,7 @@ import type { Option } from "lib/types";
 import { getEvmMethod } from "lib/utils";
 
 import {
+  EvmTxCallErc20Factory,
   EvmTxCreateContract,
   EvmTxDefault,
   EvmTxTransfer,
@@ -39,6 +40,8 @@ export const EvmTxMsgDetailsBody = ({
       );
     case "create":
       return <EvmTxCreateContract evmTxData={evmTxData} />;
+    case "call ERC20 factory":
+      return <EvmTxCallErc20Factory evmTxData={evmTxData} />;
     default:
       return <EvmTxDefault evmTxData={evmTxData} />;
   }

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

@@ -0,0 +1,114 @@
+import { Flex, Text } from "@chakra-ui/react";
+
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import type { TxDataJsonRpc } from "lib/services/types";
+import type { HexAddr20, Option } from "lib/types";
+
+import { EvmInfoLabelValue } from "./EvmInfoLabelValue";
+import { EvmTxMethodAccordion } from "./EvmTxMethodAccordion";
+
+interface EvmTxCallErc20FactoryProps {
+  evmTxData: TxDataJsonRpc;
+}
+
+export const EvmTxCallErc20Factory = ({
+  evmTxData,
+}: EvmTxCallErc20FactoryProps) => {
+  const { from, to } = evmTxData.tx;
+  const { logs } = evmTxData.txReceipt;
+  const contractAddress = logs[0]?.address as Option<HexAddr20>;
+
+  return (
+    <EvmTxMethodAccordion
+      msgIcon="instantiate"
+      content={
+        <Flex gap={1}>
+          Create{" "}
+          {contractAddress ? (
+            <Flex gap={1} align="center">
+              <CustomIcon
+                name="contract-address"
+                boxSize={3}
+                color="primary.main"
+              />
+              <ExplorerLink
+                value={contractAddress}
+                type="evm_contract_address"
+                showCopyOnHover
+              />
+            </Flex>
+          ) : (
+            <Text variant="body2" color="text.disabled">
+              -
+            </Text>
+          )}{" "}
+          via ERC20 Factory
+        </Flex>
+      }
+    >
+      <EvmInfoLabelValue
+        label="Creator"
+        value={
+          <ExplorerLink
+            type="user_address"
+            value={from}
+            showCopyOnHover
+            textFormat="normal"
+            fixedHeight={false}
+          />
+        }
+      />
+      <EvmInfoLabelValue
+        label="ERC20 Factory"
+        value={
+          to ? (
+            <Flex gap={1} align="center">
+              <CustomIcon
+                name="contract-address"
+                boxSize={3}
+                color="primary.main"
+              />
+              <ExplorerLink
+                value={to}
+                type="evm_contract_address"
+                showCopyOnHover
+                textFormat="normal"
+                fixedHeight={false}
+              />
+            </Flex>
+          ) : (
+            <Text variant="body2" color="text.disabled">
+              -
+            </Text>
+          )
+        }
+      />
+      <EvmInfoLabelValue
+        label="Created Contract"
+        value={
+          contractAddress ? (
+            <Flex gap={1} align="center">
+              <CustomIcon
+                name="contract-address"
+                boxSize={3}
+                color="primary.main"
+              />
+              <ExplorerLink
+                value={contractAddress}
+                type="evm_contract_address"
+                showCopyOnHover
+                textFormat="normal"
+                fixedHeight={false}
+              />
+            </Flex>
+          ) : (
+            <Text variant="body2" color="text.disabled">
+              -
+            </Text>
+          )
+        }
+      />
+    </EvmTxMethodAccordion>
+  );
+};

src/lib/pages/evm-tx-details/components/evm-tx-method/index.ts

@@ -1,3 +1,4 @@
+export * from "./EvmTxCallErc20Factory";
 export * from "./EvmTxCreateContract";
 export * from "./EvmTxDefault";
 export * from "./EvmTxTransfer";

src/lib/utils/evm.ts

@@ -10,12 +10,15 @@ enum EvmMethod {
   transfer = "0x",
   transferErc20 = "0xa9059cbb",
   create = "0x60806040",
+  callErc20Factory = "0x06ef1a86",
 }
 
 export const getEvmMethod = (txInput: string) => {
   if (txInput === EvmMethod.transfer) return "transfer";
   if (txInput.startsWith(EvmMethod.transferErc20)) return "transfer ERC20";
   if (txInput.startsWith(EvmMethod.create)) return "create";
+  if (txInput.startsWith(EvmMethod.callErc20Factory))
+    return "call ERC20 factory";
   return txInput.slice(0, 10);
 };
 
@@ -54,6 +57,17 @@ export const getEvmToAddress = (
     };
   }
 
+  if (method === "call ERC20 factory") {
+    const { logs } = evmTxData.txReceipt;
+    const contractAddress = logs[0]?.address;
+    if (!contractAddress) return undefined;
+    return {
+      address: contractAddress as HexAddr20,
+      type: "evm_contract_address",
+      isCreatedContract: true,
+    };
+  }
+
   if (to) {
     return {
       address: to,