feat: Estimate Gas

src/base/contract/getWeb3.ts

@@ -0,0 +1,23 @@
+import Web3 from 'web3';
+import { BSC_RPC_URL } from '../../env';
+
+export const getWeb3 = (sign = true) => {
+  let isTrustWallet = '';
+  try {
+    isTrustWallet = JSON.parse(localStorage.getItem('wagmi.wallet') || '');
+  } catch (e) {}
+
+  let web3;
+  if (sign) {
+    web3 = new Web3(
+      isTrustWallet === 'injected'
+        ? (window.trustWallet as any)
+        : (window.ethereum as any),
+    );
+  } else {
+    const gfProvider = new Web3.providers.HttpProvider(BSC_RPC_URL);
+    web3 = new Web3(gfProvider);
+  }
+
+  return web3;
+};

src/components/modal/DelistModal.tsx

@@ -1,27 +1,35 @@
+import styled from '@emotion/styled';
 import {
   Box,
   Button,
   Flex,
+  Modal,
   ModalBody,
   ModalCloseButton,
-  ModalHeader,
   ModalFooter,
-  Modal,
+  ModalHeader,
 } from '@totejs/uikit';
-import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
-import { useNetwork, useSwitchNetwork } from 'wagmi';
-import { BSC_CHAIN_ID, LIST_ESTIMATE_FEE_ON_BSC, NETWORK } from '../../env';
-import { defaultImg, formatDateUTC, roundFun } from '../../utils';
-import { useCollectionItems } from '../../hooks/useCollectionItems';
+import BN from 'bn.js';
+import { useEffect, useMemo, useState } from 'react';
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
+import { MarketPlaceContract } from '../../base/contract/marketPlaceContract';
+import {
+  BSC_CHAIN_ID,
+  BSC_SEND_GAS_FEE,
+  LIST_ESTIMATE_FEE_ON_BSC,
+  NETWORK,
+} from '../../env';
+import { useApprove } from '../../hooks/useApprove';
 import { useChainBalance } from '../../hooks/useChainBalance';
+import { useCollectionItems } from '../../hooks/useCollectionItems';
+import { useDelist } from '../../hooks/useDelist';
 import { useHasRole } from '../../hooks/useHasRole';
-import { useApprove } from '../../hooks/useApprove';
 import { useModal } from '../../hooks/useModal';
-import { useDelist } from '../../hooks/useDelist';
+import { defaultImg, divide10Exp, formatDateUTC, roundFun } from '../../utils';
 
 export const DelistModal = (props: any) => {
   const modalData = useModal();
+  const { address } = useAccount();
   const { isOpen, handleOpen } = props;
 
   const { delistData }: { delistData: any } = modalData.modalState;
@@ -50,6 +58,30 @@ export const DelistModal = (props: any) => {
     return Number(BscBalanceVal) >= LIST_ESTIMATE_FEE_ON_BSC;
   }, [BscBalanceVal]);
 
+  const [estimateGas, setEstimateGas] = useState('0');
+  useEffect(() => {
+    console.log('groupId', groupId);
+    if (!groupId) return;
+
+    const estimate = async () => {
+      const gasPrice = BSC_SEND_GAS_FEE || '';
+      const gasLimit = await MarketPlaceContract()
+        .methods.delist(groupId)
+        .estimateGas({
+          from: address,
+          gas: BSC_SEND_GAS_FEE,
+        });
+
+      const tmp = BigInt(gasPrice) * BigInt(gasLimit);
+      const estimateGasRes = divide10Exp(new BN(tmp.toString(), 10), 18);
+      console.log('estimateGas', estimateGasRes);
+
+      setEstimateGas(estimateGasRes);
+    };
+
+    estimate();
+  }, [address, groupId]);
+
   return (
     <Container isOpen={isOpen} onClose={handleOpen}>
       <ModalCloseButton />
@@ -88,8 +120,8 @@ export const DelistModal = (props: any) => {
         <Box h={10}></Box>
         <BuyInfo>
           <ItemCon justifyContent={'space-between'}>
-            <ItemTitle>Gas fee</ItemTitle>
-            <ItemVal>{LIST_ESTIMATE_FEE_ON_BSC} BNB</ItemVal>
+            <ItemTitle>Estimate Gas</ItemTitle>
+            <ItemVal>{estimateGas} BNB</ItemVal>
           </ItemCon>
           <ItemCon alignItems={'flex-end'} justifyContent={'space-between'}>
             <ItemTitle>Balance on BSC {NETWORK}</ItemTitle>