diff --git a/packages/app/src/components/contract/interaction/FunctionForm.vue b/packages/app/src/components/contract/interaction/FunctionForm.vue index d2d9c13be5..e49b2aaafc 100644 --- a/packages/app/src/components/contract/interaction/FunctionForm.vue +++ b/packages/app/src/components/contract/interaction/FunctionForm.vue @@ -36,6 +36,8 @@ import { ethers } from "ethers"; import Input from "@/components/common/Input.vue"; import FunctionArrayParameter from "@/components/contract/interaction/FunctionArrayParameter.vue"; +import { PAYABLE_AMOUNT_PARAM_NAME } from "@/composables/useContractInteraction"; + import type { AbiFragment } from "@/composables/useAddress"; import { getRawFunctionType, getRequiredArrayLength, isArrayFunctionType } from "@/utils/helpers"; @@ -80,7 +82,7 @@ const inputs = computed(() => { ); if (props.abiFragment.stateMutability === "payable") { inputsArray.unshift({ - key: "value", + key: PAYABLE_AMOUNT_PARAM_NAME, type: "ether", label: "payableAmount (ether)", placeholder: "payableAmount (ether)", diff --git a/packages/app/src/composables/useContractInteraction.ts b/packages/app/src/composables/useContractInteraction.ts index 8d42dc18a3..aa7a3b3306 100644 --- a/packages/app/src/composables/useContractInteraction.ts +++ b/packages/app/src/composables/useContractInteraction.ts @@ -9,6 +9,8 @@ import useContext from "@/composables/useContext"; import type { AbiFragment } from "./useAddress"; import type { WalletError } from "@matterlabs/composables"; +export const PAYABLE_AMOUNT_PARAM_NAME = "payable_function_payable_amount"; + export default (context = useContext()) => { const walletContext = { isReady: context.isReady, @@ -43,16 +45,18 @@ export default (context = useContext()) => { const signer = await getL2Signer(); const contract = new ethers.Contract(address, [abiFragment], signer!); const method = contract[abiFragment.name]; - const methodArguments = Object.entries(params).map(([, inputValue]) => { - if (inputValue === "true") { - inputValue = true; - } else if (inputValue === "false") { - inputValue = false; - } - return inputValue; - }); + const methodArguments = Object.entries(params) + .filter(([key]) => key !== PAYABLE_AMOUNT_PARAM_NAME) + .map(([, inputValue]) => { + if (inputValue === "true") { + inputValue = true; + } else if (inputValue === "false") { + inputValue = false; + } + return inputValue; + }); const methodOptions = { - value: ethers.utils.parseEther((params.value as string) ?? "0"), + value: ethers.utils.parseEther((params[PAYABLE_AMOUNT_PARAM_NAME] as string) ?? "0"), }; const res = await method( ...[ diff --git a/packages/app/tests/composables/useContractInteraction.spec.ts b/packages/app/tests/composables/useContractInteraction.spec.ts index d5449d5b4b..a4cdc9bbe5 100644 --- a/packages/app/tests/composables/useContractInteraction.spec.ts +++ b/packages/app/tests/composables/useContractInteraction.spec.ts @@ -4,7 +4,7 @@ import { ethers } from "ethers"; import { useWalletMock } from "../mocks"; -import useContractInteraction from "@/composables/useContractInteraction"; +import useContractInteraction, { PAYABLE_AMOUNT_PARAM_NAME } from "@/composables/useContractInteraction"; import type { AbiFragment } from "@/composables/useAddress"; @@ -116,13 +116,13 @@ describe("useContractInteraction:", () => { stateMutability: "payable", }, { - value: "0.1", + [PAYABLE_AMOUNT_PARAM_NAME]: "0.1", address: ["0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b"], } ); expect(mock.mock.lastCall).toEqual([ ["0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b"], - { gasLimit: "10000000", value: ethers.utils.parseEther("0.1") }, + { value: ethers.utils.parseEther("0.1") }, ]); mock.mockRestore(); }); @@ -139,10 +139,10 @@ describe("useContractInteraction:", () => { stateMutability: "payable", }, { - value: "0.1", + [PAYABLE_AMOUNT_PARAM_NAME]: "0.1", } ); - expect(mock.mock.lastCall).toEqual([{ gasLimit: "10000000", value: ethers.utils.parseEther("0.1") }]); + expect(mock.mock.lastCall).toEqual([{ value: ethers.utils.parseEther("0.1") }]); mock.mockRestore(); }); it("change input to boolean type", async () => { @@ -158,11 +158,11 @@ describe("useContractInteraction:", () => { stateMutability: "payable", }, { - value: "0.1", + [PAYABLE_AMOUNT_PARAM_NAME]: "0.1", bool: "false", } ); - expect(mock.mock.lastCall).toEqual([false, { gasLimit: "10000000", value: ethers.utils.parseEther("0.1") }]); + expect(mock.mock.lastCall).toEqual([false, { value: ethers.utils.parseEther("0.1") }]); mock.mockRestore(); }); it("sets isRequestPending to true when request is pending", async () => {