diff --git a/bridge_ui/src/components/Attest/Target.tsx b/bridge_ui/src/components/Attest/Target.tsx index effa11244..3dd9c8fc3 100644 --- a/bridge_ui/src/components/Attest/Target.tsx +++ b/bridge_ui/src/components/Attest/Target.tsx @@ -1,7 +1,9 @@ -import { makeStyles, MenuItem, TextField } from "@material-ui/core"; +import { CHAIN_ID_ETH } from "@certusone/wormhole-sdk"; +import { makeStyles, MenuItem, TextField, Typography } from "@material-ui/core"; import { Alert } from "@material-ui/lab"; import { useCallback, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { EthGasEstimateSummary } from "../../hooks/useTransactionFees"; import { incrementStep, setTargetChain } from "../../store/attestSlice"; import { selectAttestIsTargetComplete, @@ -58,8 +60,13 @@ function Target() { - You will have to pay transaction fees on{" "} - {CHAINS_BY_ID[targetChain].name} to attest this token. + + You will have to pay transaction fees on{" "} + {CHAINS_BY_ID[targetChain].name} to attest this token.{" "} + + {targetChain === CHAIN_ID_ETH && ( + + )} ({ transferField: { @@ -111,8 +112,13 @@ function Target() { ) : null} - You will have to pay transaction fees on{" "} - {CHAINS_BY_ID[targetChain].name} to redeem your NFT. + + You will have to pay transaction fees on{" "} + {CHAINS_BY_ID[targetChain].name} to redeem your NFT. + + {targetChain === CHAIN_ID_ETH && ( + + )} - You will have to pay transaction fees on{" "} - {CHAINS_BY_ID[targetChain].name} to redeem your tokens. + + You will have to pay transaction fees on{" "} + {CHAINS_BY_ID[targetChain].name} to redeem your tokens. + + {targetChain === CHAIN_ID_ETH && ( + + )} ( + null + ); + + useEffect(() => { + if (provider && isReady && !estimateResults) { + getGasEstimates(provider, contract).then( + (results) => { + setEstimateResults(results); + }, + (error) => { + console.log(error); + } + ); + } + }, [provider, isReady, estimateResults, contract]); + + const results = useMemo(() => estimateResults, [estimateResults]); + return results; +} + +export function EthGasEstimateSummary({ + methodType, +}: { + methodType: MethodType; +}) { + const estimate = useEthereumGasPrice(methodType); + if (!estimate) { + return null; + } + + return ( + +
+ +  {estimate.currentGasPrice} +
+
   
+
+ Est. Fees: {estimate.lowEstimate} - {estimate.highEstimate} ETH +
+
+ ); +} + +const estimatesByContract = { + transfer: { + lowGasEstimate: BigInt(80000), + highGasEstimate: BigInt(130000), + }, + nft: { + lowGasEstimate: BigInt(350000), + highGasEstimate: BigInt(500000), + }, + createWrapped: { + lowGasEstimate: BigInt(450000), + highGasEstimate: BigInt(700000), + }, +}; + +export async function getGasEstimates( + provider: Provider, + contract: MethodType +): Promise { + const lowEstimateGasAmount = estimatesByContract[contract].lowGasEstimate; + const highEstimateGasAmount = estimatesByContract[contract].highGasEstimate; + + let lowEstimate; + let highEstimate; + let currentGasPrice; + if (provider) { + const priceInWei = await provider.getGasPrice(); + if (priceInWei) { + lowEstimate = parseFloat( + formatUnits(lowEstimateGasAmount * priceInWei.toBigInt(), "ether") + ).toFixed(4); + highEstimate = parseFloat( + formatUnits(highEstimateGasAmount * priceInWei.toBigInt(), "ether") + ).toFixed(4); + currentGasPrice = parseFloat(formatUnits(priceInWei, "gwei")).toFixed(0); + } + } + + const output = + currentGasPrice && highEstimate && lowEstimate + ? { + currentGasPrice, + lowEstimate, + highEstimate, + } + : null; + + return output; +}