diff --git a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx index 5ee8ada3b..f3103942f 100644 --- a/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx +++ b/src/custom/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx @@ -150,6 +150,7 @@ SwapModalHeaderProps) { showHelper trade={trade} type="From" + fiatValue={fiatValueInput} /> )} @@ -202,6 +203,7 @@ SwapModalHeaderProps) { showHelper trade={trade} type="To" + fiatValue={fiatValueOutput} /> )} diff --git a/src/custom/components/swap/TradeSummary/index.tsx b/src/custom/components/swap/TradeSummary/index.tsx index 1ba9b363e..1be2764e8 100644 --- a/src/custom/components/swap/TradeSummary/index.tsx +++ b/src/custom/components/swap/TradeSummary/index.tsx @@ -9,6 +9,7 @@ import { RowFixed } from 'components/Row' import { RowFee } from './RowFee' import { RowSlippage } from './RowSlippage' import { RowReceivedAfterSlippage } from './RowReceivedAfterSlippage' +import { useHigherUSDValue } from 'hooks/useUSDCPrice' const Wrapper = styled.div` ${RowFixed} { @@ -22,6 +23,7 @@ export type TradeSummaryProps = Required export default function TradeSummary({ trade, allowedSlippage, showHelpers, showFee }: TradeSummaryProps) { const allowsOffchainSigning = true // TODO: Next PR will handle this + const feeFiatValue = useHigherUSDValue(trade.fee.feeAsCurrency) return ( @@ -30,6 +32,7 @@ export default function TradeSummary({ trade, allowedSlippage, showHelpers, show {showFee && ( ) } @@ -550,6 +551,7 @@ export default function Swap({ trade?.outputAmountWithoutFee?.subtract(trade?.outputAmount), AMOUNT_PRECISION )} + fiatValue={fiatValueOutput} /> ) } diff --git a/src/custom/pages/Swap/index.tsx b/src/custom/pages/Swap/index.tsx index 7a98c0818..eff21a08e 100644 --- a/src/custom/pages/Swap/index.tsx +++ b/src/custom/pages/Swap/index.tsx @@ -32,6 +32,7 @@ import { RowSlippage } from 'components/swap/TradeSummary/RowSlippage' import { RowReceivedAfterSlippage } from 'components/swap/TradeSummary/RowReceivedAfterSlippage' import { RowFee } from 'components/swap/TradeSummary/RowFee' import { useExpertModeManager, useUserSlippageToleranceWithDefault } from 'state/user/hooks' +import { useHigherUSDValue } from 'hooks/useUSDCPrice' interface TradeBasicDetailsProp extends BoxProps { trade?: TradeGp @@ -215,11 +216,21 @@ function TradeBasicDetails({ trade, fee, ...boxProps }: TradeBasicDetailsProp) { const [isExpertMode] = useExpertModeManager() const allowsOffchainSigning = true // TODO: Deal with this in next PR + // trades are null when there is a fee quote error e.g + // so we can take both + const feeFiatValue = useHigherUSDValue(trade?.fee.feeAsCurrency || fee) + return ( {/* Fees */} {(trade || fee) && ( - + )} {isExpertMode && trade && (