feat: evm proxy contract and checksum

CHANGELOG.md

@@ -79,6 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1242](https://github.com/alleslabs/celatone-frontend/pull/1242) Fix EVM proxy contract details and checksum address
 - [#1236](https://github.com/alleslabs/celatone-frontend/pull/1236) Remove unnecessary configs for users in custom network configs
 - [#1228](https://github.com/alleslabs/celatone-frontend/pull/1228) Refactor EVM verification form path and form type location
 - [#1215](https://github.com/alleslabs/celatone-frontend/pull/1215) Bump react wallet widget package to support http endpoints

src/lib/hooks/useFormatAddresses.ts

@@ -1,35 +1,49 @@
 import { useCallback } from "react";
 
-import { useConvertHexAddress } from "lib/app-provider";
-import type { BechAddr, HexAddr } from "lib/types";
+import { useCelatoneApp, useConvertHexAddress } from "lib/app-provider";
+import { type HexAddr, zBechAddr, zHexAddr } from "lib/types";
 import {
   bech32AddressToHex,
   isHexModuleAddress,
   isHexWalletAddress,
+  toChecksumAddress,
   unpadHexAddress,
 } from "lib/utils";
 
 export const useFormatAddresses = () => {
+  const {
+    chainConfig: {
+      features: { move },
+    },
+  } = useCelatoneApp();
   const { convertHexWalletAddress, convertHexModuleAddress } =
     useConvertHexAddress();
 
+  const formatHexAddress = useCallback(
+    (address: HexAddr) => {
+      if (move.enabled) return unpadHexAddress(address);
+      return toChecksumAddress(address);
+    },
+    [move.enabled]
+  );
+
   return useCallback(
     (address: string) => {
       if (isHexWalletAddress(address))
         return {
-          address: convertHexWalletAddress(address as HexAddr),
-          hex: unpadHexAddress(address as HexAddr),
+          address: convertHexWalletAddress(zHexAddr.parse(address)),
+          hex: formatHexAddress(zHexAddr.parse(address)),
         };
       if (isHexModuleAddress(address))
         return {
-          address: convertHexModuleAddress(address as HexAddr),
-          hex: unpadHexAddress(address as HexAddr),
+          address: convertHexModuleAddress(zHexAddr.parse(address)),
+          hex: formatHexAddress(zHexAddr.parse(address)),
         };
       return {
-        address: address as BechAddr,
-        hex: unpadHexAddress(bech32AddressToHex(address as BechAddr)),
+        address: zBechAddr.parse(address),
+        hex: formatHexAddress(bech32AddressToHex(zBechAddr.parse(address))),
       };
     },
-    [convertHexModuleAddress, convertHexWalletAddress]
+    [convertHexModuleAddress, convertHexWalletAddress, formatHexAddress]
   );
 };

src/lib/pages/account-details/components/nfts/NftsSectionSequencer.tsx

@@ -6,7 +6,12 @@ import { useMobile } from "lib/app-provider";
 import { Loading } from "lib/components/Loading";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import { useNftsByAccountByCollectionSequencer } from "lib/services/nft";
-import type { HexAddr, HexAddr32, Option } from "lib/types";
+import {
+  type HexAddr,
+  type HexAddr32,
+  type Option,
+  zHexAddr32,
+} from "lib/types";
 
 import { FilterItem } from "./FilterItem";
 import { NftsByCollectionSequencer } from "./NftsByCollectionSequencer";
@@ -72,7 +77,7 @@ export const NftsSectionSequencer = ({
               collectionName={nfts[0].collectionName}
               onClick={() =>
                 handleOnClick({
-                  collectionAddress: collectionAddress as HexAddr32,
+                  collectionAddress: zHexAddr32.parse(collectionAddress),
                   nftsCount: nfts.length,
                 })
               }

src/lib/pages/account-details/hooks/useAccountRedirect.ts

@@ -6,7 +6,12 @@ import {
 } from "lib/app-provider";
 import { useEvmCodesByAddress } from "lib/services/evm";
 import { useContractData } from "lib/services/wasm/contract";
-import type { BechAddr, BechAddr32, HexAddr, HexAddr20 } from "lib/types";
+import {
+  type BechAddr,
+  type BechAddr32,
+  type HexAddr,
+  zHexAddr20,
+} from "lib/types";
 import { isHexWalletAddress } from "lib/utils";
 
 export const useAccountRedirect = (bechAddr: BechAddr, hexAddr: HexAddr) => {
@@ -24,7 +29,7 @@ export const useAccountRedirect = (bechAddr: BechAddr, hexAddr: HexAddr) => {
 
   const { data: evmCodes, isFetching: isEvmCodesFetching } =
     useEvmCodesByAddress(
-      hexAddr as HexAddr20,
+      zHexAddr20.parse(hexAddr),
       evm.enabled && isHexWalletAddress(hexAddr)
     );
 

src/lib/pages/contract-details/components/ContractTop.tsx

@@ -177,7 +177,7 @@ export const ContractTop = ({
                 fontWeight={500}
                 whiteSpace="nowrap"
               >
-                Contract Address
+                Contract Address:
               </Text>
               <CopyLink
                 value={contractAddress}
@@ -195,7 +195,7 @@ export const ContractTop = ({
                 variant="body2"
                 fontWeight={500}
               >
-                Label
+                Label:
               </Text>
               <Text variant="body2" wordBreak="break-word">
                 {contract.label}
@@ -212,7 +212,7 @@ export const ContractTop = ({
                   variant="body2"
                   fontWeight={500}
                 >
-                  Public Name
+                  Public Name:
                 </Text>
                 <Text variant="body2" className="ellipsis">
                   {publicInfo.name}

src/lib/pages/evm-contract-details/components/EvmContractDetailsTop.tsx

@@ -4,18 +4,22 @@ import { useConvertHexAddress, useInternalNavigate } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { TotalValue } from "lib/components/TotalValue";
-import type { HexAddr20 } from "lib/types";
+import type { EvmVerifyInfo, HexAddr20, Option } from "lib/types";
 import { TabIndex } from "../types";
 import { getInteractTabsIndex } from "../utils";
 
 interface EvmContractDetailsTopProps {
   contractAddress: HexAddr20;
-  isVerified: boolean;
+  evmVerifyInfo: Option<EvmVerifyInfo>;
+  proxyTargetAddress: Option<HexAddr20>;
+  proxyTargetEvmVerifyInfo: Option<EvmVerifyInfo>;
 }
 
 export const EvmContractDetailsTop = ({
   contractAddress,
-  isVerified,
+  evmVerifyInfo,
+  proxyTargetAddress,
+  proxyTargetEvmVerifyInfo,
 }: EvmContractDetailsTopProps) => {
   const navigate = useInternalNavigate();
   const { convertHexWalletAddress } = useConvertHexAddress();
@@ -26,8 +30,8 @@ export const EvmContractDetailsTop = ({
       justifyContent="space-between"
       gap={4}
     >
-      <Stack gap={4}>
-        <Flex gap={2} align="center">
+      <Stack gap={1}>
+        <Flex gap={2} marginBottom={3} align="center">
           <CustomIcon
             name="contract-address"
             boxSize={5}
@@ -37,7 +41,7 @@ export const EvmContractDetailsTop = ({
             Contract Details
           </Heading>
         </Flex>
-        <Flex columnGap={2} flexDirection={{ md: "row", base: "column" }}>
+        <Flex columnGap={2} flexDirection={{ base: "column", md: "row" }}>
           <Text variant="body2" fontWeight={500} color="text.dark">
             Contract Address:
           </Text>
@@ -47,7 +51,7 @@ export const EvmContractDetailsTop = ({
               amptrackSection="contract_top"
               type="contract_address"
             />
-            {isVerified && (
+            {!!evmVerifyInfo?.isVerified && (
               <CustomIcon
                 name="verification-solid"
                 boxSize={4}
@@ -56,9 +60,44 @@ export const EvmContractDetailsTop = ({
             )}
           </Flex>
         </Flex>
+        {!!evmVerifyInfo?.isVerified && evmVerifyInfo.contractName && (
+          <Flex
+            columnGap={2}
+            flexDirection={{ md: "row", base: "column" }}
+            minHeight={6}
+          >
+            <Text variant="body2" fontWeight={500} color="text.dark">
+              Contract Name:
+            </Text>
+            <Text variant="body2" className="ellipsis">
+              {evmVerifyInfo.contractName}
+            </Text>
+          </Flex>
+        )}
+        {proxyTargetAddress && (
+          <Flex columnGap={2} flexDirection={{ md: "row", base: "column" }}>
+            <Text variant="body2" fontWeight={500} color="text.dark">
+              Implementation Address:
+            </Text>
+            <Flex alignItems="center">
+              <CopyLink
+                value={proxyTargetAddress}
+                amptrackSection="contract_top"
+                type="contract_address"
+              />
+              {!!proxyTargetEvmVerifyInfo?.isVerified && (
+                <CustomIcon
+                  name="verification-solid"
+                  boxSize={4}
+                  color="secondary.main"
+                />
+              )}
+            </Flex>
+          </Flex>
+        )}
       </Stack>
       <Stack gap={4}>
-        {isVerified && (
+        {!!evmVerifyInfo?.isVerified && (
           <Grid gap={2} templateColumns={{ md: "repeat(2, 1fr)", base: "1fr" }}>
             <Button
               variant="outline-primary"

src/lib/pages/evm-contract-details/components/evm-contract-details-overview/OverviewProxyTargetInfo.tsx

@@ -0,0 +1,43 @@
+import { Heading, HStack, Stack, Text } from "@chakra-ui/react";
+import { useMobile } from "lib/app-provider";
+import { ExplorerLink } from "lib/components/ExplorerLink";
+import { CustomIcon } from "lib/components/icon";
+import { EvmVerifyInfo, HexAddr20, Option } from "lib/types";
+
+interface OverviewProxyTargetInfoProps {
+  proxyTargetAddressHex: HexAddr20;
+  proxyTargetEvmVerifyInfo: Option<EvmVerifyInfo>;
+}
+
+export const OverviewProxyTargetInfo = ({
+  proxyTargetAddressHex,
+  proxyTargetEvmVerifyInfo,
+}: OverviewProxyTargetInfoProps) => {
+  const isMobile = useMobile();
+
+  return (
+    <Stack spacing={1}>
+      <Heading as="h6" variant="h6">
+        Proxy target contract
+      </Heading>
+      <HStack spacing={2} alignItems="center">
+        <Text variant="body2" color="text.dark">
+          Implementation Address:
+        </Text>
+        <ExplorerLink
+          type="evm_contract_address"
+          value={proxyTargetAddressHex}
+          textFormat={isMobile ? "truncate" : "normal"}
+          showCopyOnHover
+        />
+        {proxyTargetEvmVerifyInfo?.isVerified && (
+          <CustomIcon
+            name="verification-solid"
+            boxSize={4}
+            color="secondary.main"
+          />
+        )}
+      </HStack>
+    </Stack>
+  );
+};