bridge_ui: gas fees warning on terra

Change-Id: Ifbeafde1ac430de8fba05c23656ebff70e873b66

bridge_ui/src/components/Attest/Target.tsx

@@ -2,7 +2,7 @@ import { makeStyles, 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 { GasEstimateSummary } from "../../hooks/useTransactionFees";
 import { incrementStep, setTargetChain } from "../../store/attestSlice";
 import {
   selectAttestIsTargetComplete,
@@ -62,7 +62,7 @@ function Target() {
           {CHAINS_BY_ID[targetChain].name} to attest this token.{" "}
         </Typography>
         {isEVMChain(targetChain) && (
-          <EthGasEstimateSummary
+          <GasEstimateSummary
             methodType="createWrapped"
             chainId={targetChain}
           />

bridge_ui/src/components/NFT/Target.tsx

@@ -11,7 +11,7 @@ import { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import useSyncTargetAddress from "../../hooks/useSyncTargetAddress";
-import { EthGasEstimateSummary } from "../../hooks/useTransactionFees";
+import { GasEstimateSummary } from "../../hooks/useTransactionFees";
 import { incrementStep, setTargetChain } from "../../store/nftSlice";
 import {
   selectNFTIsTargetComplete,
@@ -132,7 +132,7 @@ function Target() {
           {CHAINS_BY_ID[targetChain].name} to redeem your NFT.
         </Typography>
         {isEVMChain(targetChain) && (
-          <EthGasEstimateSummary methodType="nft" chainId={targetChain} />
+          <GasEstimateSummary methodType="nft" chainId={targetChain} />
         )}
       </Alert>
       <LowBalanceWarning chainId={targetChain} />

bridge_ui/src/components/Transfer/Target.tsx

@@ -1,4 +1,8 @@
-import { CHAIN_ID_SOLANA, hexToNativeString } from "@certusone/wormhole-sdk";
+import {
+  CHAIN_ID_SOLANA,
+  CHAIN_ID_TERRA,
+  hexToNativeString,
+} from "@certusone/wormhole-sdk";
 import { makeStyles, Typography } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
 import { useCallback, useMemo } from "react";
@@ -6,7 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import useMetadata from "../../hooks/useMetadata";
 import useSyncTargetAddress from "../../hooks/useSyncTargetAddress";
-import { EthGasEstimateSummary } from "../../hooks/useTransactionFees";
+import { GasEstimateSummary } from "../../hooks/useTransactionFees";
 import {
   selectTransferAmount,
   selectTransferIsTargetComplete,
@@ -168,8 +172,8 @@ function Target() {
           You will have to pay transaction fees on{" "}
           {CHAINS_BY_ID[targetChain].name} to redeem your tokens.
         </Typography>
-        {isEVMChain(targetChain) && (
+        {(isEVMChain(targetChain) || targetChain === CHAIN_ID_TERRA) && (
-          <EthGasEstimateSummary methodType="transfer" chainId={targetChain} />
+          <GasEstimateSummary methodType="transfer" chainId={targetChain} />
         )}
       </Alert>
       <LowBalanceWarning chainId={targetChain} />

bridge_ui/src/hooks/useTransactionFees.tsx

@@ -209,7 +209,7 @@ export function useEthereumGasPrice(contract: MethodType, chainId: ChainId) {
   return results;
 }
 
-export function EthGasEstimateSummary({
+function EthGasEstimateSummary({
   methodType,
   chainId,
 }: {
@@ -244,7 +244,14 @@ export function EthGasEstimateSummary({
   );
 }
 
-const estimatesByContract = {
+const terraEstimatesByContract = {
+  transfer: {
+    lowGasEstimate: BigInt(50000),
+    highGasEstimate: BigInt(90000),
+  },
+};
+
+const evmEstimatesByContract = {
   transfer: {
     lowGasEstimate: BigInt(80000),
     highGasEstimate: BigInt(130000),
@@ -263,8 +270,9 @@ export async function getGasEstimates(
   provider: Provider,
   contract: MethodType
 ): Promise<GasEstimate | null> {
-  const lowEstimateGasAmount = estimatesByContract[contract].lowGasEstimate;
+  const lowEstimateGasAmount = evmEstimatesByContract[contract].lowGasEstimate;
-  const highEstimateGasAmount = estimatesByContract[contract].highGasEstimate;
+  const highEstimateGasAmount =
+    evmEstimatesByContract[contract].highGasEstimate;
 
   let lowEstimate;
   let highEstimate;
@@ -293,3 +301,58 @@ export async function getGasEstimates(
 
   return output;
 }
+
+function TerraGasEstimateSummary({
+  methodType,
+  chainId,
+}: {
+  methodType: MethodType;
+  chainId: ChainId;
+}) {
+  if (methodType === "transfer") {
+    const lowEstimate = formatUnits(
+      terraEstimatesByContract.transfer.lowGasEstimate,
+      NATIVE_TERRA_DECIMALS
+    );
+    const highEstimate = formatUnits(
+      terraEstimatesByContract.transfer.highGasEstimate,
+      NATIVE_TERRA_DECIMALS
+    );
+    return (
+      <Typography
+        component="div"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          marginTop: 8,
+          flexWrap: "wrap",
+        }}
+      >
+        <div>
+          Est. Fees: {lowEstimate} - {highEstimate}{" "}
+          {getDefaultNativeCurrencySymbol(chainId)}
+        </div>
+      </Typography>
+    );
+  } else {
+    return null;
+  }
+}
+
+export function GasEstimateSummary({
+  methodType,
+  chainId,
+}: {
+  methodType: MethodType;
+  chainId: ChainId;
+}) {
+  if (isEVMChain(chainId)) {
+    return <EthGasEstimateSummary chainId={chainId} methodType={methodType} />;
+  } else if (chainId === CHAIN_ID_TERRA) {
+    return (
+      <TerraGasEstimateSummary chainId={chainId} methodType={methodType} />
+    );
+  } else {
+    return null;
+  }
+}