diff --git a/src/components/StateDescriptionHeader/index.tsx b/src/components/StateDescriptionHeader/index.tsx index 0ec5aa55..cd0dddc5 100644 --- a/src/components/StateDescriptionHeader/index.tsx +++ b/src/components/StateDescriptionHeader/index.tsx @@ -1,5 +1,4 @@ import { Badge, CryptoAddress } from '@map3xyz/components'; -import { ethers } from 'ethers'; import React, { useContext } from 'react'; import { Trans, useTranslation } from 'react-i18next'; @@ -13,12 +12,6 @@ const StateDescriptionHeader: React.FC = () => { const { stepInView: step, steps } = state; let amount; - if (state.bridgeQuote?.approval?.amount && state.asset?.decimals) { - amount = ethers.utils.formatUnits( - state.bridgeQuote?.approval?.amount as string, - state.asset?.decimals - ); - } if (!amount && state.tx.amount) { amount = state.tx.amount.split(' ')[0]; } @@ -35,8 +28,9 @@ const StateDescriptionHeader: React.FC = () => { // @ts-ignore badge: , }} - defaults="Deposit {{symbol}} on" + defaults="Deposit {{amount}} {{symbol}} on" values={{ + amount, symbol: state.asset?.symbol, }} /> diff --git a/src/components/confirmations/BridgeQuoteConfirmation/index.tsx b/src/components/confirmations/BridgeQuoteConfirmation/index.tsx index d2f2afc3..1520f4a8 100644 --- a/src/components/confirmations/BridgeQuoteConfirmation/index.tsx +++ b/src/components/confirmations/BridgeQuoteConfirmation/index.tsx @@ -1,4 +1,4 @@ -import { AnimatePresence, motion } from 'framer-motion'; +import { motion } from 'framer-motion'; import React, { useContext } from 'react'; import { useTranslation } from 'react-i18next'; @@ -18,33 +18,33 @@ const BridgeQuoteConfirmation: React.FC = ({ if (!bridgeQuote) return null; return ( - - +
setIsConfirming(false)} + onDragEnd={() => setIsConfirming(false)} > -
setIsConfirming(false)} - onDragEnd={() => setIsConfirming(false)} - > - + +
+
+
{t('copy.amount_to_pay')}:
+
+ {Number(amount).toFixed( + Math.min(6, state.asset?.decimals || DECIMAL_FALLBACK) + )}{' '} + {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']} + {bridgeQuote.estimate?.fromAmountUsd?.toFixed(2)})
-
-
{t('copy.amount_to_pay')}:
-
- {Number(amount).toFixed( - Math.min(6, state.asset?.decimals || DECIMAL_FALLBACK) - )}{' '} - {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']} - {bridgeQuote.estimate?.fromAmountUsd}) -
-
- {bridgeQuote.transaction?.gasPrice && bridgeQuote.transaction.gasLimit && ( +
+ {bridgeQuote.estimate?.gasCostsUsd && + bridgeQuote.estimate.gasCostsUsd > 1 && (
{t('copy.gas_cost')}:
@@ -56,18 +56,33 @@ const BridgeQuoteConfirmation: React.FC = ({
)} - {bridgeQuote.estimate?.amountToReceive ? ( -
-
{t('copy.receive_amount')}:
-
- {Number(bridgeQuote.estimate.amountToReceive).toFixed(6)}{' '} - {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']} - {bridgeQuote.estimate.toAmountUsd?.toFixed(2)}) -
+ {bridgeQuote.estimate?.amountToReceive ? ( +
+
Bridge Fee:
+
+ {( + Number(amount) - Number(bridgeQuote.estimate.amountToReceive) + ).toFixed(6)}{' '} + {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']} + {( + Number(bridgeQuote.estimate.fromAmountUsd) - + Number(bridgeQuote.estimate.toAmountUsd) + )?.toFixed(2)} + )
- ) : null} - - +
+ ) : null} + {bridgeQuote.estimate?.amountToReceive ? ( +
+
{t('copy.receive_amount')}:
+
+ {Number(bridgeQuote.estimate.amountToReceive).toFixed(6)}{' '} + {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']} + {bridgeQuote.estimate.toAmountUsd?.toFixed(2)}) +
+
+ ) : null} + ); }; diff --git a/src/components/methods/WalletConnect/index.tsx b/src/components/methods/WalletConnect/index.tsx index 38584836..87ab1f49 100644 --- a/src/components/methods/WalletConnect/index.tsx +++ b/src/components/methods/WalletConnect/index.tsx @@ -1,8 +1,11 @@ import { Button } from '@map3xyz/components'; +import { ethers } from 'ethers'; +import { AnimatePresence } from 'framer-motion'; import React, { useContext, useEffect, useRef } from 'react'; import useOnClickOutside from '../../../hooks/useOnClickOutside'; import { Context } from '../../../providers/Store'; +import { DECIMAL_FALLBACK } from '../../../steps/EnterAmount'; import BridgeQuoteConfirmation from '../../confirmations/BridgeQuoteConfirmation'; import MethodIcon from '../../MethodIcon'; import { EvmMethodProviderProps } from '../types'; @@ -28,12 +31,19 @@ const WalletConnect: React.FC = ({ return (
- {isConfirming && state.bridgeQuote && ( - - )} + + {isConfirming && state.bridgeQuote && ( + + )} +