Add gas fee

packages/milkomeda-wsc-ui/src/components/TransactionStepper/ActionExecutionStep.tsx

@@ -18,12 +18,14 @@ import { ethers } from "ethers";
 import { useTransactionConfigWSC } from "../TransactionConfigWSC";
 import { getEvmExplorerUrl } from "../../utils/transactions";
 import Button from "../Common/Button";
+import { useEstimateGas } from "../../hooks/useEstimatedGas";
 
 const ActionExecutionStep = ({ nextStep }) => {
   const {
     options: { evmContractRequest },
   } = useTransactionConfigWSC();
   const { chain } = useNetwork();
+  const { fee: gasFee } = useEstimateGas();
 
   const prepareContractWriteQuery = usePrepareContractWrite({
     address: evmContractRequest.address as `0x${string}`,
@@ -35,6 +37,13 @@ const ActionExecutionStep = ({ nextStep }) => {
     overrides: {
       gasLimit: ethers.BigNumber.from(1_000_000),
       ...evmContractRequest.overrides,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      ...(evmContractRequest.overrides?.value && {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        value: evmContractRequest.overrides?.value?.sub(gasFee),
+      }),
     },
   });
 

packages/milkomeda-wsc-ui/src/components/TransactionStepper/UnwrapStep.tsx

@@ -34,6 +34,7 @@ import { getBridgeExplorerUrl, getDefaultTokenByChainId } from "../../utils/tran
 import Button from "../Common/Button";
 import { useGetDestinationBalance, useGetWSCTokens } from "../../hooks/wsc-provider";
 import invariant from "tiny-invariant";
+import { useEstimateGas } from "../../hooks/useEstimatedGas";
 
 export const statusUnwrapMessages = {
   [TxStatus.Init]: "Confirm Unwrapping",
@@ -52,6 +53,7 @@ const UnwrapStep = ({ onFinish, resetSteps }) => {
     options: { defaultWrapToken, evmTokenAddress },
   } = useTransactionConfigWSC();
   const { chain } = useNetwork();
+  const { feeCardano } = useEstimateGas();
   const defaultSymbol = getDefaultTokenByChainId(chain?.id);
 
   const isWrappingNativeTokenFirst = defaultWrapToken.unit === LOVELACE_UNIT;
@@ -118,11 +120,13 @@ const UnwrapStep = ({ onFinish, resetSteps }) => {
   const unwrapToken = async () => {
     if (!selectedUnwrapToken || !wscProvider || !unwrappingFee) return;
     setTxStatus(TxStatus.Init);
-
+    invariant(feeCardano, "gas fee not found");
     const unwrapOptions = {
       destination: undefined,
       assetId: isWrappingNativeTokenFirst ? selectedUnwrapToken.contractAddress : undefined,
-      amount: new BigNumber(selectedUnwrapToken.balance),
+      amount: isWrappingNativeTokenFirst
+        ? new BigNumber(selectedUnwrapToken.balance)
+        : new BigNumber(selectedUnwrapToken.balance).minus(feeCardano),
     };
 
     try {

packages/milkomeda-wsc-ui/src/components/WSCInterface/index.tsx

@@ -50,6 +50,8 @@ import {
   useGetPendingTxs,
   useGetWSCTokens,
 } from "../../hooks/wsc-provider";
+import { useEstimateGas } from "../../hooks/useEstimatedGas";
+import invariant from "tiny-invariant";
 
 export const WSCInterface = () => {
   const context = useContext();
@@ -500,6 +502,7 @@ function AmountInput({ label, onMax, value, onChange, id }) {
 function WSCAssetItem({ token, allowedTokensMap }) {
   const { wscProvider } = useWSCProvider();
   const { chain } = useNetwork();
+  const { feeCardano } = useEstimateGas();
   const [txHash, setTxHash] = React.useState<string | undefined>();
 
   const { txStatus, txStatusError, setTxStatusError, setTxStatus, isLoading, isError, isSuccess } =
@@ -518,11 +521,14 @@ function WSCAssetItem({ token, allowedTokensMap }) {
     if (!token || !wscProvider) return;
     setTxStatus(TxStatus.Init);
     const isNativeToken = token.contractAddress === mADATokenAddress;
+    invariant(feeCardano, "Gas fee is not defined");
 
     const unwrapOptions = {
       destination: undefined,
       assetId: isNativeToken ? undefined : token.contractAddress,
-      amount: new BigNumber(token.balance),
+      amount: isNativeToken
+        ? new BigNumber(token.balance).minus(feeCardano)
+        : new BigNumber(token.balance),
     };
 
     try {

packages/milkomeda-wsc-ui/src/hooks/useEstimatedGas.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useProvider } from "wagmi";
+import BigNumber from "bignumber.js";
+import { convertTokensToWei, convertWeiToTokens } from "../utils/convertWeiToTokens";
+
+export const useEstimateGas = () => {
+  const [fee, setFee] = useState<BigNumber | undefined>(undefined);
+  const provider = useProvider();
+
+  useEffect(() => {
+    provider.getGasPrice().then((gasPrice) => {
+      const formattedGasPrice = new BigNumber(gasPrice.toString());
+      setFee(formattedGasPrice.multipliedBy(new BigNumber(1_000_000)));
+    });
+  }, [provider]);
+  const baseFee = convertWeiToTokens({
+    valueWei: fee?.toString(),
+    token: { decimals: 18 },
+  })
+    .dp(2)
+    .toString();
+
+  return {
+    fee,
+    feeCardano: convertTokensToWei({
+      value: baseFee?.toString(),
+      token: { decimals: 6 },
+    }).toString(),
+  };
+};