feat: interaction section

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1208](https://github.com/alleslabs/celatone-frontend/pull/1208) Implement evm interaction section
 - [#1207](https://github.com/alleslabs/celatone-frontend/pull/1207) Add EVM contract details compiler settings
 - [#1206](https://github.com/alleslabs/celatone-frontend/pull/1206) Add EVM contract details abi
 - [#1204](https://github.com/alleslabs/celatone-frontend/pull/1204) Add EVM contract details deployed bytecode

src/lib/amplitude/types.ts

@@ -91,6 +91,9 @@ export enum AmpEvent {
   ACTION_MOVE_EXECUTE = "Action Move Execute",
   ACTION_MOVE_PUBLISH = "Action Move Publish",
   ACTION_EXECUTE_SCRIPT = "Action Execute Script",
+  ACTION_EVM_WRITE = "Action Evm Write",
+  ACTION_EVM_READ = "Action Evm Read",
+  ACTION_EVM_READ_AGAIN = "Action Evm Read Again",
   // INTERACTS
   USE_SELECT_NETWORK = "Use Select Network",
   USE_CLICK_WALLET = "Use Click Wallet",

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

@@ -10,10 +10,12 @@ import type { HexAddr, TxResultRendering } from "lib/types";
 import { TxStreamPhase } from "lib/types";
 import { catchTxError, postEvmTx } from "../common";
 import { sendingEvmTx } from "../common/sendingEvm";
+import { toBeHex } from "ethers";
 
 interface RequestEvmTxParams {
   to: HexAddr;
   data: string;
+  value: string;
   estimatedFee: SimulatedFeeEvm;
   signAndBroadcastEvm: SignAndBroadcastEvm;
   onTxSucceed?: () => void;
@@ -23,6 +25,7 @@ interface RequestEvmTxParams {
 export const requestEvmTx = ({
   to,
   data,
+  value,
   estimatedFee,
   signAndBroadcastEvm,
   onTxSucceed,
@@ -31,7 +34,7 @@ export const requestEvmTx = ({
   return pipe(
     sendingEvmTx(estimatedFee),
     postEvmTx<TxReceiptJsonRpc>({
-      postFn: () => signAndBroadcastEvm({ to, data }),
+      postFn: () => signAndBroadcastEvm({ to, data, value: toBeHex(value) }),
     }),
     (txResult) => {
       onTxSucceed?.();

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

@@ -33,7 +33,7 @@ export const useGetAddressTypeByLength = () => {
   return useCallback(
     (address: Option<string>): AddressReturnType =>
       address
-        ? addressLengthMap[address.length] ?? "invalid_address"
+        ? (addressLengthMap[address.length] ?? "invalid_address")
         : "invalid_address",
     [addressLengthMap]
   );

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

@@ -16,7 +16,7 @@ export const useExampleAddresses = () => {
 
     // reverse the bytes so the initial characters are different from the user address
     const evmContract = "0x" + toHex(Uint8Array.from(bytes20).reverse());
-    const wasmContract = toBech32(
+    const contract = toBech32(
       bech32Prefix,
       Uint8Array.from(bytes32.reverse())
     ) as BechAddr32;
@@ -25,7 +25,7 @@ export const useExampleAddresses = () => {
 
     return {
       user,
-      wasmContract,
+      contract,
       evmContract,
       validator,
     };

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

@@ -9,6 +9,7 @@ import type { HexAddr20 } from "lib/types";
 export interface RequestEvmStreamParams {
   to: HexAddr20;
   data: string;
+  value: string;
   estimatedFee?: SimulatedFeeEvm;
   onTxSucceed?: () => void;
   onTxFailed?: () => void;
@@ -21,6 +22,7 @@ export const useRequestEvmTx = () => {
     async ({
       to,
       data,
+      value,
       estimatedFee,
       onTxSucceed,
       onTxFailed,
@@ -30,6 +32,7 @@ export const useRequestEvmTx = () => {
       return requestEvmTx({
         to,
         data,
+        value,
         estimatedFee,
         signAndBroadcastEvm,
         onTxSucceed: () => {

src/lib/components/ContractInputSection.tsx

@@ -26,7 +26,7 @@ export const ContractInputSection = ({
 }: ContractInputSectionProps) => {
   const [isChangeContract, setIsChangeContract] = useState(false);
   const { address } = useCurrentChain();
-  const { wasmContract: contractExample } = useExampleAddresses();
+  const { contract: contractExample } = useExampleAddresses();
   const { control, setValue, watch } = useForm({
     defaultValues: {
       contractAddress: "",

src/lib/components/EstimatedFeeEvmRender.tsx

@@ -3,15 +3,16 @@ import Big from "big.js";
 
 import { useAssetInfos } from "lib/services/assetService";
 import { useEvmParams } from "lib/services/evm";
+import { Option } from "lib/types";
 import { coinToTokenWithValue, formatTokenWithValue } from "lib/utils";
 
 export const EstimatedFeeEvmRender = ({
   gasPrice,
   gasUsed,
   loading,
 }: {
-  gasPrice: Big;
-  gasUsed: Big;
+  gasPrice: Option<Big>;
+  gasUsed: Option<Big>;
   loading: boolean;
 }) => {
   const { data: assetInfos, isLoading: isAssetInfoLoading } = useAssetInfos({
@@ -29,7 +30,7 @@ export const EstimatedFeeEvmRender = ({
     );
 
   const feeDenom = evmParams?.params.feeDenom;
-  if (!feeDenom) return <>--</>;
+  if (!gasPrice || !gasUsed || !feeDenom) return <>--</>;
 
   const feeAmount = gasPrice.mul(gasUsed);
   const feeToken = coinToTokenWithValue(

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

@@ -8,17 +8,19 @@ import { cloneDeep } from "lodash";
 
 interface EvmAbiFormProps {
   types: ReadonlyArray<JsonFragmentType>;
-  isPayable: boolean;
+  isPayable?: boolean;
   initialData?: JsonDataType[];
-  propsOnChange?: (data: JsonDataType[]) => void;
+  propsOnChangeInputs?: (data: JsonDataType[]) => void;
+  propsOnChangeValue?: (value: string) => void;
   isDisabled?: boolean;
 }
 
 export const EvmAbiForm = ({
   types,
-  isPayable,
+  isPayable = false,
   initialData,
-  propsOnChange,
+  propsOnChangeInputs,
+  propsOnChangeValue,
   isDisabled,
 }: EvmAbiFormProps) => {
   const defaultValues = useMemo(
@@ -29,22 +31,26 @@ export const EvmAbiForm = ({
 
   const { control, reset, watch } = useForm<{
     inputs: JsonDataType[];
-    payableAmount: string;
+    value: string;
   }>({
-    defaultValues: { inputs: defaultValues, payableAmount: "" },
+    defaultValues: { inputs: defaultValues, value: "" },
     mode: "all",
   });
-  const { inputs } = watch();
+  const { inputs, value } = watch();
 
   useEffect(() => {
     reset({ inputs: defaultValues });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(defaultValues), reset]);
 
   useEffect(() => {
-    propsOnChange?.(cloneDeep(inputs));
+    propsOnChangeInputs?.(cloneDeep(inputs));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(inputs), propsOnChange]);
+  }, [JSON.stringify(inputs), propsOnChangeInputs]);
+
+  useEffect(() => {
+    propsOnChangeValue?.(value);
+  }, [value, propsOnChangeValue]);
 
   return (
     <FormFields

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

@@ -46,7 +46,7 @@ export const TupleField = <T extends FieldValues>({
             key={`${subfieldType}-${index}`}
             label={subfieldLabel}
             type={subfieldType}
-            isRequired
+            isRequired={!isDisabled}
           >
             <FieldTemplate
               name={`${name}.${index}` as FieldPath<T>}

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

@@ -6,6 +6,7 @@ import { TypeLabel } from "./TypeLabel";
 import { useEvmParams } from "lib/services/evm";
 import { useAssetInfos } from "lib/services/assetService";
 import { getTokenLabel } from "lib/utils";
+import { Text } from "@chakra-ui/react";
 
 interface FormFieldsProps<T extends FieldValues> {
   control: Control<T>;
@@ -32,21 +33,36 @@ export const FormFields = <T extends FieldValues>({
 
   return (
     <>
-      <TupleField
-        control={control}
-        name={"inputs" as Path<T>}
-        components={components}
-        isDisabled={isDisabled}
-        withoutBorder
-      />
+      {components.length > 0 ? (
+        <TupleField
+          control={control}
+          name={"inputs" as Path<T>}
+          components={components}
+          isDisabled={isDisabled}
+          withoutBorder
+        />
+      ) : (
+        <Text
+          variant="body2"
+          textColor="text.disabled"
+          fontWeight={500}
+          bgColor="gray.800"
+          w="full"
+          py={4}
+          borderRadius="4px"
+          textAlign="center"
+        >
+          Empty {isDisabled ? "Output" : "Input"}
+        </Text>
+      )}
       {isPayable && (
         <TypeLabel
           label={`Send native${feeLabel ? ` ${feeLabel}` : ""}`}
           type="uint256"
         >
           <BaseField
             control={control}
-            name={"payableAmount" as Path<T>}
+            name={"value" as Path<T>}
             type="uint256"
           />
         </TypeLabel>

src/lib/components/modal/EvmCodeSnippet.tsx

@@ -0,0 +1,80 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import {
+  Button,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+
+import { AmpEvent, track } from "lib/amplitude";
+import { CustomIcon } from "../icon";
+
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-sh";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-one_dark";
+import "ace-builds/src-noconflict/theme-pastel_on_dark";
+
+interface EvmCodeSnippetProps {
+  ml?: ButtonProps["ml"];
+}
+
+const EvmCodeSnippet = ({ ml }: EvmCodeSnippetProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  return (
+    <>
+      <Button
+        variant="outline-secondary"
+        minW="128px"
+        size="sm"
+        ml={ml}
+        gap={1}
+        onClick={() => {
+          track(AmpEvent.USE_CONTRACT_SNIPPET, {});
+          onOpen();
+        }}
+      >
+        <CustomIcon name="code" />
+        Code Snippet
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered size="4xl">
+        <ModalOverlay />
+        <ModalContent w="840px">
+          <ModalHeader>
+            <CustomIcon name="code" boxSize={6} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Code Snippet
+            </Heading>
+          </ModalHeader>
+          <ModalCloseButton color="gray.600" />
+          <ModalBody px={4} maxH="640px" overflow="scroll">
+            <Text wordBreak="break-word">
+              Lorem Ipsum is simply dummy text of the printing and typesetting
+              industry. Lorem Ipsum has been the industry's standard dummy text
+              ever since the 1500s, when an unknown printer took a galley of
+              type and scrambled it to make a type specimen book. It has
+              survived not only five centuries, but also the leap into
+              electronic typesetting, remaining essentially unchanged. It was
+              popularised in the 1960s with the release of Letraset sheets
+              containing Lorem Ipsum passages, and more recently with desktop
+              publishing software like Aldus PageMaker including versions of
+              Lorem Ipsum.
+            </Text>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default EvmCodeSnippet;

src/lib/components/modal/contract/SaveNewContract.tsx

@@ -39,7 +39,7 @@ export function SaveNewContractModal({
   const { getContractLocalInfo } = useContractStore();
   const { validateContractAddress } = useValidateAddress();
 
-  const { wasmContract: exampleContractAddress } = useExampleAddresses();
+  const { contract: exampleContractAddress } = useExampleAddresses();
   const initialList =
     list.value === formatSlugName(INSTANTIATED_LIST_NAME) ? [] : [list];
 

src/lib/components/select-contract/SelectContractInstantiator.tsx

@@ -43,7 +43,7 @@ export const SelectContractInstantiator = ({
   onContractSelect,
 }: SelectContractInstantiatorProps) => {
   const isMobile = useMobile();
-  const { wasmContract: exampleContractAddress } = useExampleAddresses();
+  const { contract: exampleContractAddress } = useExampleAddresses();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { validateContractAddress } = useValidateAddress();