diff --git a/src/components/TradeWidget/index.tsx b/src/components/TradeWidget/index.tsx index 0923d8b56..39cb680fb 100644 --- a/src/components/TradeWidget/index.tsx +++ b/src/components/TradeWidget/index.tsx @@ -301,10 +301,10 @@ const TradeWidget: React.FC = ({ useEffect(() => { if (priceValue && sellValue) { // If price is quoted in sell tokens, we use it, otherwise we use the inverse - const priceUsedForReceiveAmount = sellToken === quoteToken ? priceValue : priceInverseValue + const priceUsedForReceiveAmount = sellToken.address === quoteToken.address ? priceValue : priceInverseValue setValue(receiveInputId, calculateReceiveAmount(priceUsedForReceiveAmount, sellValue)) } - }, [isPriceInverted, quoteToken, sellToken, priceValue, priceInverseValue, setValue, sellValue]) + }, [isPriceInverted, quoteToken.address, sellToken.address, priceValue, priceInverseValue, setValue, sellValue]) const url = buildUrl({ sell: sellValue, diff --git a/src/components/TradeWidget/utils.ts b/src/components/TradeWidget/utils.ts index 81bde83a6..ac6af3812 100644 --- a/src/components/TradeWidget/utils.ts +++ b/src/components/TradeWidget/utils.ts @@ -7,6 +7,7 @@ import { encodeTokenSymbol } from '@gnosis.pm/dex-js' import { BATCH_START_THRESHOLD } from './validationSchema' import { BATCH_TIME_IN_MS } from 'const' import { TokenDetails } from 'types' +import { formatPriceToPrecision } from 'components/trade/PriceSuggestions/PriceSuggestionItem' export function calculateReceiveAmount(priceValue: string, sellValue: string): string { let receiveAmount = '' @@ -16,7 +17,9 @@ export function calculateReceiveAmount(priceValue: string, sellValue: string): s if (sellAmount && price) { const receiveBigNumber = sellAmount.dividedBy(price) - receiveAmount = receiveBigNumber.isNaN() || !receiveBigNumber.isFinite() ? '0' : receiveBigNumber.toString(10) + // Format the "Receive at least" input amount same as PriceSuggestions price + receiveAmount = + receiveBigNumber.isNaN() || !receiveBigNumber.isFinite() ? '0' : formatPriceToPrecision(receiveBigNumber) } } diff --git a/src/components/trade/PriceSuggestions/PriceSuggestionItem.tsx b/src/components/trade/PriceSuggestions/PriceSuggestionItem.tsx index df27c1d26..3922b1dbd 100644 --- a/src/components/trade/PriceSuggestions/PriceSuggestionItem.tsx +++ b/src/components/trade/PriceSuggestions/PriceSuggestionItem.tsx @@ -20,36 +20,48 @@ export interface Props { } interface FormattedPrices { - priceFormatted: string - invertedPriceFormatted: string + priceLabel: string + inversePriceLabel: string + priceValue: string + inversePriceValue: string } -function formatPriceToPrecision(price: BigNumber): string { - return price.toFixed(PRICE_ESTIMATION_PRECISION) +const LOW_PRICE_FLOOR = new BigNumber('0.0001') + +export function formatPriceToPrecision(price: BigNumber): string { + return price.gt(LOW_PRICE_FLOOR) ? price.toFixed(PRICE_ESTIMATION_PRECISION) : '< ' + LOW_PRICE_FLOOR.toString() } function getPriceFormatted(price: BigNumber | null, isPriceInverted: boolean): FormattedPrices { if (price) { - const invertedPriceFormattedAux = formatPriceToPrecision(invertPrice(price)) - const priceFormattedAux = formatPriceToPrecision(price) + const inversePriceLabel = formatPriceToPrecision(invertPrice(price)) + const priceLabel = formatPriceToPrecision(price) + const inversePriceValue = invertPrice(price).toString(10) + const priceValue = price.toString(10) if (isPriceInverted) { // Price is inverted return { - priceFormatted: invertedPriceFormattedAux, - invertedPriceFormatted: priceFormattedAux, + priceLabel: inversePriceLabel, + inversePriceLabel: priceLabel, + priceValue: inversePriceValue, + inversePriceValue: priceValue, } } else { // Price is not inverted return { - priceFormatted: priceFormattedAux, - invertedPriceFormatted: invertedPriceFormattedAux, + priceLabel, + inversePriceLabel, + priceValue, + inversePriceValue, } } } else { return { - priceFormatted: 'N/A', - invertedPriceFormatted: 'N/A', + priceLabel: 'N/A', + inversePriceLabel: 'N/A', + priceValue: 'N/A', + inversePriceValue: 'N/A', } } } @@ -57,9 +69,9 @@ function getPriceFormatted(price: BigNumber | null, isPriceInverted: boolean): F export const PriceSuggestionItem: React.FC = (props) => { const { label, isPriceInverted, price, loading, baseToken, quoteToken, onSwapPrices, onClickPrice } = props - const { priceFormatted, invertedPriceFormatted } = getPriceFormatted(price, isPriceInverted) - const displayPrice = priceFormatted === 'Infinity' || invertedPriceFormatted === 'Infinity' ? 'N/A' : priceFormatted - + // Return raw, unformatted values to pass to price calculations + const { priceValue, inversePriceValue, priceLabel, inversePriceLabel } = getPriceFormatted(price, isPriceInverted) + const displayPrice = priceLabel === 'Infinity' || inversePriceLabel === 'Infinity' ? 'N/A' : priceLabel return ( <> @@ -67,8 +79,9 @@ export const PriceSuggestionItem: React.FC = (props) => {