Merge pull request #1242 from alleslabs/feat/proxy-contract-verify

feat: evm proxy contract and checksum

.eslintrc.json

@@ -26,6 +26,14 @@
     "eqeqeq": "error",
     "semi": "error",
 
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "disallowTypeAnnotations": true,
+        "fixStyle": "separate-type-imports",
+        "prefer": "type-imports"
+      }
+    ],
     "@typescript-eslint/no-empty-object-type": "off",
     "sonarjs/no-duplicate-string": ["error", { "threshold": 3 }],
     "sonarjs/cognitive-complexity": ["error", 27],

CHANGELOG.md

@@ -80,6 +80,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) Improve 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/config/theme/index.ts

@@ -2,7 +2,7 @@ import { CHAIN } from "env";
 import { DEFAULT_THEME } from "./default";
 import { INITIA_THEME } from "./initia";
 import { SEI_THEME } from "./sei";
-import { Option } from "lib/types";
+import type { Option } from "lib/types";
 
 export const getTheme = (chain: Option<string>) => {
   switch (chain) {

src/lib/app-fns/tx/common/postEvm.tsx

@@ -1,6 +1,6 @@
 import { EstimatedFeeEvmRender } from "lib/components/EstimatedFeeEvmRender";
 import { ExplorerLink } from "lib/components/ExplorerLink";
-import { TxReceiptJsonRpc } from "lib/services/types";
+import type { TxReceiptJsonRpc } from "lib/services/types";
 import type { TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 

src/lib/app-fns/tx/common/sendingEvm.tsx

@@ -1,7 +1,7 @@
 import { Spinner } from "@chakra-ui/react";
 import { EstimatedFeeEvmRender } from "lib/components/EstimatedFeeEvmRender";
 
-import { SimulatedFeeEvm } from "lib/services/types";
+import type { SimulatedFeeEvm } from "lib/services/types";
 import type { TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 

src/lib/app-fns/tx/evm/requestEvm.tsx

@@ -5,7 +5,7 @@ import type { SignAndBroadcastEvm } from "lib/app-provider/hooks";
 import { EstimatedFeeEvmRender } from "lib/components/EstimatedFeeEvmRender";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
-import { SimulatedFeeEvm, TxReceiptJsonRpc } from "lib/services/types";
+import type { SimulatedFeeEvm, TxReceiptJsonRpc } from "lib/services/types";
 import type { HexAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { catchTxError, postEvmTx } from "../common";

src/lib/app-provider/hooks/useSignAndBroadcastEvm.ts

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 
-import { TransactionRequest } from "ethers";
+import type { TransactionRequest } from "ethers";
 import { getEthGetTransactionReceipt } from "lib/services/evm/json-rpc";
-import { TxReceiptJsonRpc } from "lib/services/types";
+import type { TxReceiptJsonRpc } from "lib/services/types";
 import { convertCosmosChainIdToEvmChainId, sleep } from "lib/utils";
 import { useCelatoneApp } from "../contexts";
 import { useCurrentChain } from "./useCurrentChain";

src/lib/app-provider/tx/evm/requestEvm.ts

@@ -3,7 +3,7 @@ import { useCallback } from "react";
 import { trackTxSucceed } from "lib/amplitude";
 import { requestEvmTx } from "lib/app-fns/tx/evm/requestEvm";
 import { useSignAndBroadcastEvm } from "lib/app-provider/hooks";
-import { SimulatedFeeEvm } from "lib/services/types";
+import type { SimulatedFeeEvm } from "lib/services/types";
 import type { HexAddr20 } from "lib/types";
 
 export interface RequestEvmStreamParams {

src/lib/components/ContractCmdButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@chakra-ui/react";
-import { Option } from "lib/types";
+import type { Option } from "lib/types";
 
 interface ContractCmdButtonProps {
   cmd: Option<string>;

src/lib/components/EstimatedFeeEvmRender.tsx

@@ -1,9 +1,9 @@
 import { Spinner } from "@chakra-ui/react";
-import Big from "big.js";
+import type Big from "big.js";
 
 import { useAssetInfos } from "lib/services/assetService";
 import { useEvmParams } from "lib/services/evm";
-import { Option } from "lib/types";
+import type { Option } from "lib/types";
 import { coinToTokenWithValue, formatTokenWithValue } from "lib/utils";
 
 export const EstimatedFeeEvmRender = ({

src/lib/components/editor/EditorFileBody.tsx

@@ -1,5 +1,6 @@
-import { Flex, FlexProps, Text } from "@chakra-ui/react";
-import { SourceTreeNode } from "./types";
+import type { FlexProps } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
+import type { SourceTreeNode } from "./types";
 import { CustomIcon } from "../icon";
 import { Tooltip } from "../Tooltip";
 

src/lib/components/editor/EditorSidebar.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
-import { SourceTreeNode } from "./types";
+import type { SourceTreeNode } from "./types";
 import { Box, Flex } from "@chakra-ui/react";
 import { EditorFileBody } from "./EditorFileBody";
-import { Nullable } from "lib/types";
+import type { Nullable } from "lib/types";
 
 export interface EditorSidebarProps {
   sourceTreeNode: SourceTreeNode[];

src/lib/components/editor/EditorTop.tsx

@@ -1,8 +1,8 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
-import { SourceTreeNode } from "./types";
+import type { SourceTreeNode } from "./types";
 import { EditorFileBody } from "./EditorFileBody";
 import { CustomIcon } from "../icon";
-import { Nullable } from "lib/types";
+import type { Nullable } from "lib/types";
 import { Fragment } from "react";
 
 interface EditorTopProps {

src/lib/components/editor/FullEditor.tsx

@@ -1,16 +1,14 @@
 import { Box, Grid, Stack, Text } from "@chakra-ui/react";
 import { generateSourceTree } from "./helpers";
-import { FilePath, SourceTreeNode } from "./types";
+import type { FilePath, SourceTreeNode } from "./types";
 import { EditorSidebar } from "./EditorSidebar";
 import { useEffect, useState } from "react";
 import { EditorTop } from "./EditorTop";
-import { Nullable } from "lib/types";
+import type { Nullable } from "lib/types";
 import { Editor } from "./Editor";
 import { useMobile } from "lib/app-provider";
-import {
-  FullEditorSidebarMobile,
-  FullEditorSidebarMobileProps,
-} from "./FullEditorSidebarMobile";
+import type { FullEditorSidebarMobileProps } from "./FullEditorSidebarMobile";
+import { FullEditorSidebarMobile } from "./FullEditorSidebarMobile";
 
 interface FullEditorProps
   extends Pick<FullEditorSidebarMobileProps, "isOpen" | "onClose"> {

src/lib/components/editor/FullEditorSidebarMobile.tsx

@@ -8,7 +8,8 @@ import {
   DrawerOverlay,
   Heading,
 } from "@chakra-ui/react";
-import { EditorSidebar, EditorSidebarProps } from "./EditorSidebar";
+import type { EditorSidebarProps } from "./EditorSidebar";
+import { EditorSidebar } from "./EditorSidebar";
 
 export interface FullEditorSidebarMobileProps extends EditorSidebarProps {
   isOpen: boolean;

src/lib/components/editor/helpers.ts

@@ -1,5 +1,6 @@
 import { last, split } from "lodash";
-import { EXTENSION_LIB, FilePath, SourceTreeNode } from "./types";
+import type { FilePath, SourceTreeNode } from "./types";
+import { EXTENSION_LIB } from "./types";
 
 export const generateSourceTree = (
   filesPath: FilePath[],

src/lib/components/editor/types.ts

@@ -1,4 +1,4 @@
-import { Option } from "lib/types";
+import type { Option } from "lib/types";
 
 export const EXTENSION_LIB = ["sol", "vy"];
 

src/lib/components/evm-abi/EvmAbiForm.tsx

@@ -1,5 +1,5 @@
-import { JsonFragmentType } from "ethers";
-import { JsonDataType } from "lib/types";
+import type { JsonFragmentType } from "ethers";
+import type { JsonDataType } from "lib/types";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { FormFields } from "./fields";

src/lib/components/evm-abi/fields/BaseField.tsx

@@ -1,5 +1,6 @@
-import { FieldProps } from "./types";
-import { FieldValues, useController } from "react-hook-form";
+import type { FieldProps } from "./types";
+import type { FieldValues } from "react-hook-form";
+import { useController } from "react-hook-form";
 import { FormControl, FormErrorMessage, Input } from "@chakra-ui/react";
 import { getRules } from "./utils";
 

src/lib/components/evm-abi/fields/BoolField.tsx

@@ -1,6 +1,8 @@
-import { SelectInput, SelectInputOption } from "lib/components/forms";
-import { FieldValues, useController } from "react-hook-form";
-import { FieldProps } from "./types";
+import type { SelectInputOption } from "lib/components/forms";
+import { SelectInput } from "lib/components/forms";
+import type { FieldValues } from "react-hook-form";
+import { useController } from "react-hook-form";
+import type { FieldProps } from "./types";
 
 const BOOL_FIELD_OPTIONS: SelectInputOption<string>[] = [
   {

src/lib/components/evm-abi/fields/Field.tsx

@@ -1,8 +1,8 @@
-import { FieldValues } from "react-hook-form";
+import type { FieldValues } from "react-hook-form";
 import { BaseField } from "./BaseField";
 import { BoolField } from "./BoolField";
 import { TupleField } from "./TupleField";
-import { FieldProps } from "./types";
+import type { FieldProps } from "./types";
 
 export const Field = <T extends FieldValues>({
   type,

src/lib/components/evm-abi/fields/FieldTemplate.tsx

@@ -1,10 +1,11 @@
 import { Button, Flex, Text } from "@chakra-ui/react";
 import { CustomIcon } from "lib/components/icon";
-import { Option } from "lib/types";
-import { FieldPath, FieldValues, useController } from "react-hook-form";
+import type { Option } from "lib/types";
+import type { FieldPath, FieldValues } from "react-hook-form";
+import { useController } from "react-hook-form";
 import { getDefaultValueFromDimensions } from "../utils";
 import { Field } from "./Field";
-import { FieldProps } from "./types";
+import type { FieldProps } from "./types";
 
 interface FieldTemplateProps<T extends FieldValues> extends FieldProps<T> {
   dimensions?: Option<number>[];

src/lib/components/evm-abi/fields/TupleField.tsx

@@ -1,10 +1,11 @@
 import { Flex } from "@chakra-ui/react";
-import { JsonFragmentType } from "ethers";
-import { FieldPath, FieldValues, useWatch } from "react-hook-form";
+import type { JsonFragmentType } from "ethers";
+import type { FieldPath, FieldValues } from "react-hook-form";
+import { useWatch } from "react-hook-form";
 import { getTypeDimensions } from "../utils";
 import { FieldTemplate } from "./FieldTemplate";
 import { TypeLabel } from "./TypeLabel";
-import { FieldProps } from "./types";
+import type { FieldProps } from "./types";
 
 interface TupleFieldProps<T extends FieldValues> extends FieldProps<T> {
   components: ReadonlyArray<JsonFragmentType>;

src/lib/components/evm-abi/fields/index.tsx

@@ -1,6 +1,6 @@
-import { Control, FieldValues, Path } from "react-hook-form";
+import type { Control, FieldValues, Path } from "react-hook-form";
 import { TupleField } from "./TupleField";
-import { JsonFragmentType } from "ethers";
+import type { JsonFragmentType } from "ethers";
 import { BaseField } from "./BaseField";
 import { TypeLabel } from "./TypeLabel";
 import { useEvmParams } from "lib/services/evm";

src/lib/components/evm-abi/fields/types.ts

@@ -1,5 +1,5 @@
-import { JsonFragmentType } from "ethers";
-import { Control, FieldPath, FieldValues } from "react-hook-form";
+import type { JsonFragmentType } from "ethers";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
 export interface FieldProps<T extends FieldValues>
   extends Omit<JsonFragmentType, "name"> {

src/lib/components/evm-abi/fields/utils.ts

@@ -1,6 +1,6 @@
 import { big } from "lib/types";
 import { is0x, isHex, isHex20Bytes, isHexFixedBytes } from "lib/utils";
-import { FieldValues, UseControllerProps } from "react-hook-form";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
 
 const validateAddress = (v: string) =>
   isHex20Bytes(v) ? undefined : "Invalid address";

src/lib/components/evm-abi/utils.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
-import { JsonFragmentType } from "ethers";
-import { JsonDataType, Option } from "lib/types";
+import type { JsonFragmentType } from "ethers";
+import type { JsonDataType, Option } from "lib/types";
 import { isPositiveInt } from "lib/utils";
 
 export const getTypeDimensions = (type = "") => {

src/lib/components/evm-verify-section/FailedDetails.tsx

@@ -1,7 +1,7 @@
 import { Button, HStack, Text } from "@chakra-ui/react";
 
 import { useInternalNavigate, useMobile } from "lib/app-provider";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import type { HexAddr20 } from "lib/types";
 import { formatUTC } from "lib/utils";
 import { EvmVerifyStatusModalWithTrigger } from "../modal/evm-verify-status";

src/lib/components/evm-verify-section/InProgressDetails.tsx

@@ -1,7 +1,7 @@
 import { Button, Text } from "@chakra-ui/react";
 
 import type { HexAddr20 } from "lib/types";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import { EvmVerifyStatusModalWithTrigger } from "../modal/evm-verify-status";
 
 interface InProgressDetailsProps {

src/lib/components/evm-verify-section/index.tsx

@@ -3,7 +3,7 @@ import { Flex } from "@chakra-ui/react";
 import type { HexAddr20, Option } from "lib/types";
 
 import { NotVerifiedDetails } from "./NotVerifiedDetails";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import { useMobile } from "lib/app-provider";
 import { VerifiedDetails } from "./VerifiedDetails";
 import { FailedDetails } from "./FailedDetails";

src/lib/components/modal/evm-verify-status/EvmVerifyProcess.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { useMobile } from "lib/app-provider";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import { getProcessSteps } from "./utils";
 import { formatUTC } from "lib/utils";
 import { EvmVerifyProcessStepIcon } from "./EvmVerifyProcessStepIcon";

src/lib/components/modal/evm-verify-status/EvmVerifyRequestInfo.tsx

@@ -1,7 +1,8 @@
 import type { HexAddr20, Option } from "lib/types";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import { Flex, HStack } from "@chakra-ui/react";
-import { Divider, Text, TextProps } from "@chakra-ui/react";
+import type { TextProps } from "@chakra-ui/react";
+import { Divider, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { formatUTC, getLicenseTypeLabel } from "lib/utils";
 import { useMobile } from "lib/app-provider";

src/lib/components/modal/evm-verify-status/index.tsx

@@ -15,7 +15,7 @@ import type { ReactNode } from "react";
 
 import { CustomIcon } from "../../icon";
 import type { HexAddr20, Option } from "lib/types";
-import { EvmVerifyInfo } from "lib/types";
+import type { EvmVerifyInfo } from "lib/types";
 import { EvmVerifyRequestInfo } from "./EvmVerifyRequestInfo";
 import { EvmVerifyAlert } from "./EvmVerifyAlert";
 import { EvmVerifyProcess } from "./EvmVerifyProcess";

src/lib/components/modal/evm-verify-status/utils.ts

@@ -1,5 +1,4 @@
-import { EvmVerifyInfo } from "lib/types";
-import type { Option } from "lib/types";
+import type { EvmVerifyInfo, Option } from "lib/types";
 
 enum ProcessStepState {
   PENDING = "Pending",

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]
   );
 };