Merge pull request #328 from hackdays-io/staging

Release: MTX deposit fee

Author: yu23ki14

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<Props> = ({ 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<Props> = ({ address }) => {
                     </>
                   )}
                 />
+                {watch("useMtx") === "true" && (
+                  <Text mt={2} fontSize="sm">
+                    {t.EVENT_ESTIMATED_GAS_MTX}
+                    <br />
+                    <Box as="span" fontWeight="bold" fontSize="md" pr={1}>
+                      {formatEther(gasFee || 0)}
+                    </Box>
+                    MATIC
+                  </Text>
+                )}
               </FormControl>
 
               <FormControl mb={5}>

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,12 +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 * 560220 * 2.1 * 0.000000000000000001
-            }`
-          );
+          value = (await getGasFee(params.mintLimit)) || BigNumber.from(0);
         }
 
         await mutateAsync({
@@ -206,7 +202,7 @@ export const useCreateEvent = (address: string) => {
         });
       } catch (_) {}
     },
-    [mutateAsync, provider]
+    [mutateAsync, provider, getGasFee]
   );
 
   return {
@@ -246,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<BigNumber | null>(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 };
+};

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",

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:
     "ひみつの「あいことば」は忘れないようにしてください。あとから確認することはできません。",