test(fiatAmount): test UsdPricesUpdater

README.md

@@ -121,7 +121,6 @@ All price feeds are enabled by default, but they can be individually disabled by
 | **Paraswap**     | `REACT_APP_PRICE_FEED_PARASWAP_ENABLED`  | `boolean` (default = `true`) | [Paraswap](https://paraswap.io/) price estimation. Used for all price estimations.                                 |
 | **1inch**        | `REACT_APP_PRICE_FEED_1INCH_ENABLED`     | `boolean` (default = `true`) | [Paraswap](https://1inch.exchange) price estimation. Used for all price estimations.                               |
 | **0x**           | `REACT_APP_PRICE_FEED_0X_ENABLED`        | `boolean` (default = `true`) | [0x](https://0x.org/) price estimation. Used for all price estimation.                                             |
-| **Coingecko**    | `REACT_APP_PRICE_FEED_COINGECKO_ENABLED` | `boolean` (default = `true`) | [Coingecko](coingecko.com) price estimation. Used only for USD estimations to calculate the slippage on the trade. |
 
 ### Metadata attached to orders (AppData)
 

apps/cowswap-frontend/.env

@@ -3,7 +3,6 @@ REACT_APP_PRICE_FEED_GP_ENABLED=true
 REACT_APP_PRICE_FEED_PARASWAP_ENABLED=true
 REACT_APP_PRICE_FEED_1INCH_ENABLED=true
 REACT_APP_PRICE_FEED_0X_ENABLED=true
-REACT_APP_PRICE_FEED_COINGECKO_ENABLED=true
 
 # AppData, build yours at https://explorer.cow.fi/appdata
 REACT_APP_FULL_APP_DATA_PRODUCTION='{"version":"0.7.0","appCode":"CoW Swap","environment":"production","metadata":{}}'

apps/cowswap-frontend/.env.production

@@ -3,7 +3,6 @@ REACT_APP_PRICE_FEED_GP_ENABLED=true
 REACT_APP_PRICE_FEED_PARASWAP_ENABLED=true
 REACT_APP_PRICE_FEED_1INCH_ENABLED=true
 REACT_APP_PRICE_FEED_0X_ENABLED=true
-REACT_APP_PRICE_FEED_COINGECKO_ENABLED=true
 # INFURA KEY
 REACT_APP_INFURA_KEY=586e7e6b7c7e437aa41f5da496a749f5
 

apps/cowswap-frontend/src/common/containers/CancellationModal/index.tsx

@@ -1,4 +1,4 @@
-import { useAtomValue } from 'legacy/state/application/atoms'
+import { useAtomValue } from 'jotai'
 
 import { cancellationModalContextAtom } from 'common/hooks/useCancelOrder/state'
 import { CancellationModal as Pure } from 'common/pure/CancellationModal'

apps/cowswap-frontend/src/common/hooks/useGetSurplusFiatValue.ts

@@ -7,7 +7,7 @@ import { Nullish } from 'types'
 import { MIN_FIAT_SURPLUS_VALUE, MIN_FIAT_SURPLUS_VALUE_MODAL, MIN_SURPLUS_UNITS } from 'legacy/constants'
 import { Order } from 'legacy/state/orders/actions'
 
-import { useCoingeckoUsdValue } from 'modules/fiatAmount'
+import { useUsdAmount } from 'modules/usdAmount'
 
 import { getExecutedSummaryData } from 'utils/getExecutedSummaryData'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
@@ -34,7 +34,7 @@ export function useGetSurplusData(order: Order | ParsedOrder | undefined): Outpu
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(order)])
 
-  const surplusFiatValue = useCoingeckoUsdValue(surplusAmount).value
+  const surplusFiatValue = useUsdAmount(surplusAmount).value
   const showFiatValue = Number(surplusFiatValue?.toExact()) >= MIN_FIAT_SURPLUS_VALUE
 
   const showSurplus = shouldShowSurplus(surplusFiatValue, surplusAmount)

apps/cowswap-frontend/src/common/hooks/useRateInfoParams.ts

@@ -4,7 +4,7 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Nullish } from 'types'
 
-import { useHigherUSDValue } from 'modules/fiatAmount'
+import { useTradeUsdAmounts } from 'modules/usdAmount'
 import { useWalletInfo } from 'modules/wallet'
 
 import { usePrice } from 'common/hooks/usePrice'
@@ -29,13 +29,13 @@ export function useRateInfoParams(
     [activeRate]
   )
 
-  const activeRateFiatAmount = useHigherUSDValue(
+  const {
+    inputAmount: { value: invertedActiveRateFiatAmount },
+    outputAmount: { value: activeRateFiatAmount },
+  } = useTradeUsdAmounts(
+    tryParseCurrencyAmount(parseRate(true), inputCurrencyAmount?.currency || undefined),
     tryParseCurrencyAmount(parseRate(false), outputCurrencyAmount?.currency || undefined)
-  ).value
-
-  const invertedActiveRateFiatAmount = useHigherUSDValue(
-    tryParseCurrencyAmount(parseRate(true), inputCurrencyAmount?.currency || undefined)
-  ).value
+  )
 
   return useSafeMemoObject({
     chainId,

apps/cowswap-frontend/src/common/pure/ExecutionPrice/hooks/useExecutionPriceFiat.ts

@@ -1,6 +1,6 @@
 import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
 
-import { useHigherUSDValue } from 'modules/fiatAmount'
+import { useUsdAmount } from 'modules/usdAmount'
 
 import { rawToTokenAmount } from 'utils/rawToTokenAmount'
 
@@ -19,5 +19,5 @@ export function useExecutionPriceFiat(
 ): CurrencyAmount<Currency> | null {
   const amount = executionPrice ? getPriceQuoteAmount(executionPrice, isInverted) : undefined
 
-  return useHigherUSDValue(amount).value
+  return useUsdAmount(amount).value
 }

apps/cowswap-frontend/src/common/types.ts

@@ -1,3 +1,5 @@
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+
 /**
  * https://github.com/rndlabs/composable-cow/blob/main/src/ComposableCoW.sol
  * Information about ComposableCoW conditional orders
@@ -21,3 +23,8 @@ export type SafeTransactionParams = {
   confirmations: number
   safeTxHash: string
 }
+
+export interface TradeAmounts {
+  readonly inputAmount: CurrencyAmount<Currency>
+  readonly outputAmount: CurrencyAmount<Currency>
+}

apps/cowswap-frontend/src/legacy/components/Popups/FollowPendingTxPopup/index.tsx

@@ -1,14 +1,13 @@
+import { useAtomValue, useSetAtom } from 'jotai'
+import { selectAtom } from 'jotai/utils'
 import React, { useEffect, useMemo, useCallback, useRef, PropsWithChildren } from 'react'
 
 import { useRecentActivityLastPendingOrder } from 'legacy/hooks/useRecentActivity'
 import {
-  useSetAtom,
-  useAtomValue,
   handleFollowPendingTxPopupAtom,
   handleHidePopupPermanentlyAtom,
   showFollowTxPopupAtom,
   followPendingTxPopupAtom,
-  selectAtom,
   handleCloseOrderPopupAtom,
 } from 'legacy/state/application/atoms'
 import { Order } from 'legacy/state/orders/actions'

apps/cowswap-frontend/src/legacy/components/Tokens/FiatBalanceCell.tsx

@@ -4,7 +4,7 @@ import { Trans } from '@lingui/macro'
 
 import { MouseoverTooltip } from 'legacy/components/Tooltip'
 
-import { useHigherUSDValue } from 'modules/fiatAmount'
+import { useUsdAmount } from 'modules/usdAmount'
 
 import { FiatAmount } from 'common/pure/FiatAmount'
 
@@ -14,9 +14,9 @@ type FiatBalanceCellProps = {
   balance: CurrencyAmount<Token> | undefined
 }
 
-export default function FiatBalanceCell({ balance }: FiatBalanceCellProps) {
+export function FiatBalanceCell({ balance }: FiatBalanceCellProps) {
   const hasBalance = balance?.greaterThan(0)
-  const fiatValue = useHigherUSDValue(balance).value
+  const fiatValue = useUsdAmount(balance).value
 
   return (
     <BalanceValue hasBalance={!!hasBalance}>

apps/cowswap-frontend/src/legacy/components/Tokens/TokensTableRow.tsx

@@ -27,7 +27,7 @@ import { CardsSpinner, ExtLink } from 'pages/Account/styled'
 
 import BalanceCell from './BalanceCell'
 import FavouriteTokenButton from './FavouriteTokenButton'
-import FiatBalanceCell from './FiatBalanceCell'
+import { FiatBalanceCell } from './FiatBalanceCell'
 import {
   ApproveLabel,
   BalanceValue,

apps/cowswap-frontend/src/legacy/components/TopLevelModals/index.tsx

@@ -1,4 +1,5 @@
-import { useAtomValue } from 'legacy/state/application/atoms'
+import { useAtomValue } from 'jotai'
+
 import { useModalIsOpen, useToggleModal } from 'legacy/state/application/hooks'
 import { ApplicationModal } from 'legacy/state/application/reducer'
 

apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/index.tsx

@@ -1,10 +1,11 @@
+import { useSetAtom } from 'jotai'
 import React, { ReactNode, useCallback, useEffect } from 'react'
 
 import { Currency } from '@uniswap/sdk-core'
 
 import { getActivityState, useActivityDerivedState } from 'legacy/hooks/useActivityDerivedState'
 import { useMultipleActivityDescriptors } from 'legacy/hooks/useRecentActivity'
-import { handleFollowPendingTxPopupAtom, useSetAtom } from 'legacy/state/application/atoms'
+import { handleFollowPendingTxPopupAtom } from 'legacy/state/application/atoms'
 
 import { useSetIsConfirmationModalOpen } from 'modules/swap/state/surplusModal'
 import { useWalletInfo } from 'modules/wallet'

apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/SwapModalHeaderMod.tsx

@@ -22,6 +22,7 @@ import { computeSlippageAdjustedAmounts } from 'legacy/utils/prices'
 
 import { useHigherUSDValue } from 'modules/fiatAmount'
 import { PriceUpdatedBanner } from 'modules/trade/pure/PriceUpdatedBanner'
+import { useTradeUsdAmounts } from 'modules/usdAmount'
 
 import { CurrencyLogo } from 'common/pure/CurrencyLogo'
 import { FiatValue } from 'common/pure/FiatValue'
@@ -100,8 +101,10 @@ export default function SwapModalHeader({
 
   const theme = useContext(ThemeContext)
 
-  const fiatValueInput = useHigherUSDValue(trade.inputAmountWithoutFee).value
-  const fiatValueOutput = useHigherUSDValue(trade.outputAmountWithoutFee).value
+  const {
+    inputAmount: { value: fiatValueInput },
+    outputAmount: { value: fiatValueOutput },
+  } = useTradeUsdAmounts(trade.inputAmountWithoutFee, trade.outputAmountWithoutFee)
 
   const [slippageIn, slippageOut] = useMemo(
     () => [slippageAdjustedAmounts[Field.INPUT], slippageAdjustedAmounts[Field.OUTPUT]],

apps/cowswap-frontend/src/legacy/hooks/usePriceImpact/useFiatValuePriceImpact.ts

@@ -1,26 +1,49 @@
-import { computeFiatValuePriceImpact } from 'legacy/utils/computeFiatValuePriceImpact'
+import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
-import { useHigherUSDValue } from 'modules/fiatAmount'
+import JSBI from 'jsbi'
+import ms from 'ms.macro'
+
+import { ONE_HUNDRED_PERCENT } from 'legacy/constants/misc'
+import useDebounce from 'legacy/hooks/useDebounce'
+
+import { useDerivedTradeState } from 'modules/trade/hooks/useDerivedTradeState'
+import { useTradeUsdAmounts } from 'modules/usdAmount'
 
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 
-import { ParsedAmounts } from './types'
+const FIAT_VALUE_LOADING_THRESHOLD = ms`0.1s`
+
+export function useFiatValuePriceImpact() {
+  const { state } = useDerivedTradeState()
+  const { inputCurrencyAmount, outputCurrencyAmount, inputCurrency, outputCurrency } = state || {}
+
+  const isTradeSetUp = !!inputCurrency && !!outputCurrency
 
-export function useFiatValuePriceImpact({ INPUT, OUTPUT }: ParsedAmounts) {
-  const areBothValuesPresent = !!INPUT && !!OUTPUT
-  // prevent querying any fiat estimation unless both values are filled in
-  const input = areBothValuesPresent ? INPUT : undefined
-  const output = areBothValuesPresent ? OUTPUT : undefined
+  const {
+    inputAmount: { value: fiatValueInput, isLoading: inputIsLoading },
+    outputAmount: { value: fiatValueOutput, isLoading: outputIsLoading },
+  } = useTradeUsdAmounts(inputCurrencyAmount, outputCurrencyAmount)
 
-  const { value: fiatValueInput, isLoading: inputIsLoading } = useHigherUSDValue(input)
-  const { value: fiatValueOutput, isLoading: outputIsLoading } = useHigherUSDValue(output)
+  // Consider the price impact loading if either the input or output amount is falsy
+  // Debounce the loading state to prevent the price impact from flashing
+  const isLoading = useDebounce(isTradeSetUp ? inputIsLoading || outputIsLoading : false, FIAT_VALUE_LOADING_THRESHOLD)
+
+  return useSafeMemo(() => {
+    const priceImpact = computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)
+
+    return { priceImpact, isLoading }
+  }, [fiatValueInput, fiatValueOutput, isLoading])
+}
 
-  // Only compute price impact after BOTH finished loading
-  // This prevents the impact look like it's ready but still loading
-  const priceImpact =
-    !inputIsLoading && !outputIsLoading ? computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput) : undefined
+function computeFiatValuePriceImpact(
+  fiatValueInput: CurrencyAmount<Currency> | undefined | null,
+  fiatValueOutput: CurrencyAmount<Currency> | undefined | null
+): Percent | undefined {
+  if (!fiatValueOutput || !fiatValueInput) return undefined
+  if (!fiatValueInput.currency.equals(fiatValueOutput.currency)) return undefined
+  if (JSBI.equal(fiatValueInput.quotient, JSBI.BigInt(0))) return undefined
 
-  const isLoading = areBothValuesPresent && (inputIsLoading || outputIsLoading)
+  const pct = ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput))
 
-  return useSafeMemo(() => ({ priceImpact, isLoading }), [priceImpact, isLoading])
+  return new Percent(pct.numerator, pct.denominator)
 }