Fixed order price calculation (#1513)

* Fix calculation of an order price

* usePrice() hook to calculate Price

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<Currency> | null,
+  outputCurrencyAmount: CurrencyAmount<Currency> | null
+): Price<Currency, Currency> | null {
+  return useSafeMemo(() => {
+    if (!outputCurrencyAmount || !inputCurrencyAmount) return null
+    return new Price({ baseAmount: inputCurrencyAmount, quoteAmount: outputCurrencyAmount })
+  }, [inputCurrencyAmount, outputCurrencyAmount])
+}

src/cow-react/common/hooks/useRateInfoParams.ts

@@ -1,22 +1,19 @@
 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<Currency> | null,
   outputCurrencyAmount: CurrencyAmount<Currency> | null
 ): 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) => {

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