diff --git a/src/cow-react/common/hooks/usePrice.ts b/src/cow-react/common/hooks/usePrice.ts new file mode 100644 index 0000000000..19a0a48b5c --- /dev/null +++ b/src/cow-react/common/hooks/usePrice.ts @@ -0,0 +1,12 @@ +import { useSafeMemo } from '@cow/common/hooks/useSafeMemo' +import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core' + +export function usePrice( + inputCurrencyAmount: CurrencyAmount | null, + outputCurrencyAmount: CurrencyAmount | null +): Price | null { + return useSafeMemo(() => { + if (!outputCurrencyAmount || !inputCurrencyAmount) return null + return new Price({ baseAmount: inputCurrencyAmount, quoteAmount: outputCurrencyAmount }) + }, [inputCurrencyAmount, outputCurrencyAmount]) +} diff --git a/src/cow-react/common/hooks/useRateInfoParams.ts b/src/cow-react/common/hooks/useRateInfoParams.ts index 75465e70ca..cdcaee384b 100644 --- a/src/cow-react/common/hooks/useRateInfoParams.ts +++ b/src/cow-react/common/hooks/useRateInfoParams.ts @@ -1,10 +1,11 @@ import { useHigherUSDValue } from 'hooks/useStablecoinPrice' import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount' -import { useCallback, useMemo } from 'react' +import { useCallback } from 'react' import { useWeb3React } from '@web3-react/core' import { useSafeMemoObject } from '@cow/common/hooks/useSafeMemo' import { RateInfoParams } from '@cow/common/pure/RateInfo' -import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount } from '@uniswap/sdk-core' +import { usePrice } from '@cow/common/hooks/usePrice' export function useRateInfoParams( inputCurrencyAmount: CurrencyAmount | null, @@ -12,11 +13,7 @@ export function useRateInfoParams( ): RateInfoParams { const { chainId } = useWeb3React() - const activeRate = useMemo(() => { - if (!outputCurrencyAmount?.quotient || !inputCurrencyAmount?.quotient) return null - - return new Fraction(outputCurrencyAmount.quotient, inputCurrencyAmount.quotient) - }, [outputCurrencyAmount?.quotient, inputCurrencyAmount?.quotient]) + const activeRate = usePrice(inputCurrencyAmount, outputCurrencyAmount) const parseRate = useCallback( (invert: boolean) => { diff --git a/src/cow-react/common/pure/RateInfo/index.tsx b/src/cow-react/common/pure/RateInfo/index.tsx index 75f8a6f7e0..e1215c2d8b 100644 --- a/src/cow-react/common/pure/RateInfo/index.tsx +++ b/src/cow-react/common/pure/RateInfo/index.tsx @@ -6,7 +6,8 @@ import { Repeat } from 'react-feather' import { getQuoteCurrency } from '@cow/common/services/getQuoteCurrency' import { getAddress } from '@cow/modules/limitOrders/utils/getAddress' import { SupportedChainId } from 'constants/chains' -import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core' +import { Currency, CurrencyAmount } from '@uniswap/sdk-core' +import { usePrice } from '@cow/common/hooks/usePrice' export interface RateInfoParams { chainId: SupportedChainId | undefined @@ -85,12 +86,7 @@ export function RateInfo({ const { chainId, inputCurrencyAmount, outputCurrencyAmount, activeRateFiatAmount, inversedActiveRateFiatAmount } = rateInfoParams - const activeRate = useMemo(() => { - return outputCurrencyAmount?.quotient && inputCurrencyAmount?.quotient - ? new Fraction(outputCurrencyAmount.quotient, inputCurrencyAmount.quotient) - : null - }, [outputCurrencyAmount?.quotient, inputCurrencyAmount?.quotient]) - + const activeRate = usePrice(inputCurrencyAmount, outputCurrencyAmount) const inputCurrency = inputCurrencyAmount?.currency const outputCurrency = outputCurrencyAmount?.currency