diff --git a/frontend/src/components/organisms/CreateEventForm.tsx b/frontend/src/components/organisms/CreateEventForm.tsx index 1eafc682..ba3b5c41 100644 --- a/frontend/src/components/organisms/CreateEventForm.tsx +++ b/frontend/src/components/organisms/CreateEventForm.tsx @@ -22,9 +22,14 @@ import { useLocale } from "../../hooks/useLocale"; import Link from "next/link"; import NFTAttributesForm from "./NFTAttributesForm"; import { useIpfs } from "src/hooks/useIpfs"; -import { useCreateEvent, useOwnEventGroups } from "src/hooks/useEvent"; +import { + useCalcMtxGasFee, + useCreateEvent, + useOwnEventGroups, +} from "src/hooks/useEvent"; import { Event } from "types/Event"; import { NFT } from "types/NFT"; +import { formatEther } from "ethers/lib/utils"; type Props = { address: string; @@ -78,6 +83,8 @@ const CreateEventForm: FC = ({ address }) => { const { remove, append } = useFieldArray({ control, name: "nfts" }); + const { gasFee } = useCalcMtxGasFee(watch("mintLimit")); + // state for loading event groups const { groups, isLoading: isLoadingEventGroups } = useOwnEventGroups(); const { createEvent, isCreating, createError, createStatus, createdEventId } = @@ -347,6 +354,16 @@ const CreateEventForm: FC = ({ address }) => { )} /> + {watch("useMtx") === "true" && ( + + {t.EVENT_ESTIMATED_GAS_MTX} +
+ + {formatEther(gasFee || 0)} + + MATIC +
+ )} diff --git a/frontend/src/hooks/useEvent.ts b/frontend/src/hooks/useEvent.ts index 5853b524..f0465e06 100644 --- a/frontend/src/hooks/useEvent.ts +++ b/frontend/src/hooks/useEvent.ts @@ -11,7 +11,7 @@ import eventManagerABI from "../contracts/EventManager.json"; import { useCallback, useEffect, useMemo, useState } from "react"; import { useCurrentBlock } from "./useBlockChain"; import { Event } from "types/Event"; -import { ethers } from "ethers"; +import { BigNumber, ethers } from "ethers"; import { reverse } from "lodash"; import { EVENT_BLACK_LIST } from "src/constants/event"; import { useGenerateProof, useHashPoseidon } from "./useSecretPhrase"; @@ -124,6 +124,7 @@ export const useCreateEvent = (address: string) => { generateProof, } = useGenerateProof(); const provider = useSDK()?.getProvider(); + const { getGasFee } = useCalcMtxGasFee(); const { mutateAsync, @@ -179,10 +180,7 @@ export const useCreateEvent = (address: string) => { let value!: ethers.BigNumber; if (params.useMtx) { - const gasPrice = (await provider.getGasPrice())?.toNumber(); - value = ethers.utils.parseEther( - `${gasPrice * params.mintLimit * 660000 * 1 * 0.000000000000000001}` - ); + value = (await getGasFee(params.mintLimit)) || BigNumber.from(0); } await mutateAsync({ @@ -204,7 +202,7 @@ export const useCreateEvent = (address: string) => { }); } catch (_) {} }, - [mutateAsync, provider] + [mutateAsync, provider, getGasFee] ); return { @@ -244,3 +242,37 @@ export const useEventById = (id: number) => { return { event, isLoading, error }; }; + +export const useCalcMtxGasFee = (mintLimit?: number) => { + const provider = useSDK()?.getProvider(); + const [gasFee, setGasFee] = useState(null); + + useEffect(() => { + const fetch = async () => { + if (!provider || !mintLimit) return; + + const gasPrice = (await provider.getGasPrice())?.toNumber(); + const value = ethers.utils.parseEther( + `${gasPrice * mintLimit * 660000 * 1 * 0.000000000000000001}` + ); + setGasFee(value); + }; + + fetch(); + }, [provider, mintLimit]); + + const getGasFee = useCallback( + async (_mintLimit: number) => { + if (!provider) return; + + const gasPrice = (await provider.getGasPrice())?.toNumber(); + const value = ethers.utils.parseEther( + `${gasPrice * _mintLimit * 660000 * 1 * 0.000000000000000001}` + ); + return value; + }, + [provider] + ); + + return { gasFee, getGasFee }; +}; diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts index eac84908..6bcf156f 100644 --- a/frontend/src/locales/en.ts +++ b/frontend/src/locales/en.ts @@ -36,6 +36,7 @@ export default { EVENT_USE_MTX: "Taking on gas fee for participants", EVENT_USE_MTX_TRUE: "Yes", EVENT_USE_MTX_FALSE: "No", + EVENT_ESTIMATED_GAS_MTX: "Estimated deposit amount required to take on", EVENT_SECRETPHRASE: "SecretPhrase to mint", EVENT_SECRETPHRASE_DESC: "Please do not forget this phrase. you can't get this phrase after submitting", diff --git a/frontend/src/locales/ja.ts b/frontend/src/locales/ja.ts index 72ed2d1b..ddf7c90e 100644 --- a/frontend/src/locales/ja.ts +++ b/frontend/src/locales/ja.ts @@ -36,6 +36,7 @@ export default { "ガス代を肩代わりして、参加者が無料でNFTを受け取れるようにする。", EVENT_USE_MTX_TRUE: "肩代わりする", EVENT_USE_MTX_FALSE: "肩代わりしない", + EVENT_ESTIMATED_GAS_MTX: "肩代わりに必要な予想デポジット金額", EVENT_SECRETPHRASE: "NFT受け取りのひみつの「あいことば」", EVENT_SECRETPHRASE_DESC: "ひみつの「あいことば」は忘れないようにしてください。あとから確認することはできません。",