test: e2e test fiat amount displaying

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-e2e/src/e2e/fiat-amounts.test.ts

@@ -0,0 +1,38 @@
+function getInputFiatAmount() {
+  return cy.get('#input-currency-input .fiat-amount').invoke('text')
+}
+
+function getInputToken() {
+  return cy.get('#input-currency-input .token-amount-input').should('be.enabled')
+}
+
+function parseFiatAmountText(text: string): number {
+  return +text.split('$')[1].replace(/,/g, '')
+}
+
+describe('Fiat amounts', () => {
+  beforeEach(() => {
+    cy.visit('/#/5/swap/WETH/COW')
+  })
+
+  it('Should change fiat amount after changing currency amount', () => {
+    getInputToken().type('1')
+
+    // Get fiat amount for 1 WETH
+    getInputFiatAmount().then((fiatAmountOneText) => {
+      const fiatAmountOne = parseFiatAmountText(fiatAmountOneText)
+
+      // Input 2 WETH
+      getInputToken().clear().type('2')
+
+      // Get fiat amount for 2 WETH
+      getInputFiatAmount().then((fiatAmountTwoText) => {
+        const fiatAmountTwo = parseFiatAmountText(fiatAmountTwoText)
+        const onePercent = fiatAmountOne * 0.01
+
+        // Check that fiat amount of 2 WETH is ~2x fiat amount of 1 WETH
+        expect(fiatAmountTwo).to.closeTo(fiatAmountOne * 2, onePercent)
+      })
+    })
+  })
+})

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/pure/FiatAmount/index.tsx

@@ -27,7 +27,7 @@ export function FiatAmount({ amount, defaultValue, className, accurate = false }
   const accuracySymbol = accurate ? '' : '≈ '
 
   return (
-    <Wrapper title={title} className={className} highlight={highlight}>
+    <Wrapper title={title} className={(className || '') + ' fiat-amount'} highlight={highlight}>
       {formattedAmount ? accuracySymbol + '$' : ''}
       {formattedAmount || defaultValue}
     </Wrapper>

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]],