feat: improve evm denom and amount for methods

CHANGELOG.md

@@ -60,6 +60,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1133](https://github.com/alleslabs/celatone-frontend/pull/1133) Refactor evm denom and amount for each method
+
 ### Bug fixes
 
 - [#1134](https://github.com/alleslabs/celatone-frontend/pull/1134) Fix evm contract evm txs loading state and evm tx details ui

package.json

@@ -138,6 +138,7 @@
     "snake-case": "^3.0.4",
     "use-clamp-text": "^1.1.0",
     "uuid": "^9.0.1",
+    "web3-utils": "^4.3.1",
     "zod": "^3.22.4"
   },
   "resolutions": {

src/lib/app-provider/env.ts

@@ -146,7 +146,6 @@ export enum CELATONE_QUERY_KEYS {
   EVM_CONTRACT_INFO_SEQUENCER = "CELATONE_QUERY_EVM_CONTRACT_INFO_SEQUENCER",
   EVM_TX_HASH_BY_COSMOS_TX_HASH = "CELATONE_QUERY_EVM_TX_HASH_BY_COSMOS_TX_HASH",
   EVM_TX_HASHES_BY_COSMOS_TX_HASHES = "CELATONE_QUERY_EVM_TX_HASHES_BY_COSMOS_TX_HASHES",
-  EVM_DENOM_BY_ADDRESS_LCD = "CELATONE_QUERY_EVM_DENOM_BY_ADDRESS_LCD",
   COSMOS_TX_HASH_BY_EVM_TX_HASH = "CELATONE_QUERY_COSMOS_TX_HASH_BY_EVM_TX_HASH",
   // RESOURCE
   RESOURCES_BY_ADDRESS = "CELATONE_QUERY_RESOURCES_BY_ADDRESS",

src/lib/components/EvmToCell.tsx

@@ -1,17 +1,17 @@
 import { Flex, Text } from "@chakra-ui/react";
 
-import type { HexAddr20, Nullable } from "lib/types";
+import type { Option } from "lib/types";
+import type { EvmToAddress } from "lib/utils";
 
 import { ExplorerLink } from "./ExplorerLink";
 import { CustomIcon } from "./icon";
 
 interface EvmToCellProps {
-  to: Nullable<HexAddr20>;
-  contractAddress: Nullable<HexAddr20>;
+  toAddress: Option<EvmToAddress>;
 }
 
-export const EvmToCell = ({ to, contractAddress }: EvmToCellProps) => {
-  if (contractAddress)
+export const EvmToCell = ({ toAddress }: EvmToCellProps) => {
+  if (toAddress?.isCreatedContract)
     return (
       <Flex direction="column">
         <Text variant="body3" color="text.disabled">
@@ -24,16 +24,22 @@ export const EvmToCell = ({ to, contractAddress }: EvmToCellProps) => {
             color="primary.main"
           />
           <ExplorerLink
-            value={contractAddress}
-            type="evm_contract_address"
+            value={toAddress.address}
+            type={toAddress.type}
             showCopyOnHover
           />
         </Flex>
       </Flex>
     );
 
-  if (to)
-    return <ExplorerLink value={to} type="user_address" showCopyOnHover />;
+  if (toAddress)
+    return (
+      <ExplorerLink
+        value={toAddress.address}
+        type={toAddress.type}
+        showCopyOnHover
+      />
+    );
 
   return (
     <Text variant="body2" color="text.dark">

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

@@ -17,6 +17,8 @@ import {
   formatPrice,
   formatUTC,
   formatUTokenWithPrecision,
+  getEvmAmount,
+  getEvmToAddress,
   getTokenLabel,
 } from "lib/utils";
 
@@ -33,12 +35,10 @@ export const EvmTransactionsTableMobileCard = ({
   showTimestamp,
 }: EvmTransactionsTableMobileCardProps) => {
   const navigate = useInternalNavigate();
+  const toAddress = getEvmToAddress(evmTransaction);
+  const { amount, denom } = getEvmAmount(evmTransaction, evmDenom);
 
-  const token = coinToTokenWithValue(
-    evmDenom ?? "",
-    evmTransaction.tx.value.toString(),
-    assetInfos
-  );
+  const token = coinToTokenWithValue(denom, amount, assetInfos);
   return (
     <MobileCardTemplate
       onClick={() =>
@@ -83,10 +83,7 @@ export const EvmTransactionsTableMobileCard = ({
             </Flex>
             <Flex direction="column" flex={1} gap={1}>
               <MobileLabel label="To" />
-              <EvmToCell
-                to={evmTransaction.tx.to}
-                contractAddress={evmTransaction.txReceipt.contractAddress}
-              />
+              <EvmToCell toAddress={toAddress} />
             </Flex>
           </Flex>
           <Flex direction="column" mt={3}>

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

@@ -16,6 +16,8 @@ import {
   formatPrice,
   formatUTC,
   formatUTokenWithPrecision,
+  getEvmAmount,
+  getEvmToAddress,
   getTokenLabel,
 } from "lib/utils";
 
@@ -35,18 +37,16 @@ export const EvmTransactionsTableRow = ({
   showTimestamp,
 }: EvmTransactionsTableRowProps) => {
   const navigate = useInternalNavigate();
+  const toAddress = getEvmToAddress(evmTransaction);
+  const { amount, denom } = getEvmAmount(evmTransaction, evmDenom);
 
   const onRowSelect = (txHash: string) =>
     navigate({
       pathname: "/evm-txs/[txHash]",
       query: { txHash },
     });
 
-  const token = coinToTokenWithValue(
-    evmDenom ?? "",
-    evmTransaction.tx.value.toString(),
-    assetInfos
-  );
+  const token = coinToTokenWithValue(denom, amount, assetInfos);
   return (
     <Grid
       className="copier-wrapper"
@@ -85,10 +85,7 @@ export const EvmTransactionsTableRow = ({
         <CustomIcon name="arrow-right" boxSize={5} color="gray.600" />
       </TableRow>
       <TableRow>
-        <EvmToCell
-          to={evmTransaction.tx.to}
-          contractAddress={evmTransaction.txReceipt.contractAddress}
-        />
+        <EvmToCell toAddress={toAddress} />
       </TableRow>
       <TableRow flexDirection="column" alignItems="start">
         <Text variant="body2">

src/lib/pages/block-details/components/BlockEvmTxsTablesSequencer.tsx

@@ -65,7 +65,7 @@ export const BlockEvmTxsTablesSequencer = ({
           id={tableHeaderId}
         >
           <CustomTab count={cosmosTxs?.length}>Cosmos</CustomTab>
-          <CustomTab count={evmTxs?.length}>Evm</CustomTab>
+          <CustomTab count={evmTxs?.length}>EVM</CustomTab>
         </TabList>
         <TabPanels>
           <TabPanel p={0} pt={{ base: 0, md: 6 }}>

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

@@ -98,7 +98,10 @@ export const EvmTxTransfer = ({
           isSupportedToken(amount) ? (
             <TokenCard token={amount} minW={{ base: "full", md: "50%" }} />
           ) : (
-            <UnsupportedToken token={amount} />
+            <UnsupportedToken
+              token={amount}
+              minW={{ base: "full", md: "50%" }}
+            />
           )
         }
       />

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

@@ -4,12 +4,13 @@ import { EvmMethodChip } from "lib/components/EvmMethodChip";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { TokenCard, UnsupportedToken } from "lib/components/token";
-import { useEvmDenomByAddressLcd } from "lib/services/evm";
 import type { TxDataJsonRpc } from "lib/services/types";
-import type { AssetInfos, HexAddr20, Option } from "lib/types";
+import type { AssetInfos, Option } from "lib/types";
 import {
   coinToTokenWithValue,
+  convertToEvmDenom,
   formatTokenWithValue,
+  getEvmToAddress,
   hexToBig,
   isSupportedToken,
 } from "lib/utils";
@@ -27,15 +28,12 @@ export const EvmTxTransferErc20 = ({
   assetInfos,
 }: EvmTxTransferErc20Props) => {
   const { from, input, to: erc20Contract } = evmTxData.tx;
-  const { data: evmDenom } = useEvmDenomByAddressLcd(
-    erc20Contract as HexAddr20
-  );
 
-  const to = `0x${evmTxData.tx.input.slice(34, 74)}`;
+  const toAddress = getEvmToAddress(evmTxData);
   const amountBig = hexToBig(evmTxData.tx.input.slice(74, 138));
 
   const amount = coinToTokenWithValue(
-    evmDenom ?? "",
+    erc20Contract ? convertToEvmDenom(erc20Contract) : "",
     amountBig.toString(),
     assetInfos
   );
@@ -54,10 +52,10 @@ export const EvmTxTransferErc20 = ({
           />{" "}
           <EvmMethodChip txInput={input} width="110px" />{" "}
           {formatTokenWithValue(amount)} to{" "}
-          {to ? (
+          {toAddress?.address ? (
             <ExplorerLink
-              type="user_address"
-              value={to}
+              type={toAddress.type}
+              value={toAddress.address}
               showCopyOnHover
               textVariant="body1"
             />
@@ -84,13 +82,19 @@ export const EvmTxTransferErc20 = ({
       <EvmInfoLabelValue
         label="To"
         value={
-          <ExplorerLink
-            type="user_address"
-            value={to}
-            showCopyOnHover
-            textFormat="normal"
-            fixedHeight={false}
-          />
+          toAddress ? (
+            <ExplorerLink
+              type={toAddress.type}
+              value={toAddress.address}
+              showCopyOnHover
+              textFormat="normal"
+              fixedHeight={false}
+            />
+          ) : (
+            <Text variant="body2" color="text.disabled">
+              -
+            </Text>
+          )
         }
       />
       <EvmInfoLabelValue