fix(swap): display input amount usd value even if there is no quote (#…

…3658)
cowprotocol · Jan 17, 2024 · 66582ec · 66582ec
1 parent ae2eda5
commit 66582ec
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 10 deletions.
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { setMaxSellTokensAnalytics } from '@cowprotocol/analytics'
 import { NATIVE_CURRENCIES } from '@cowprotocol/common-const'
@@ -30,6 +30,7 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   id: string
   chainId: SupportedChainId | undefined
   areCurrenciesLoading: boolean
+  bothCurrenciesSet: boolean
   isChainIdUnsupported: boolean
   disabled?: boolean
   inputDisabled?: boolean
@@ -52,7 +53,8 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     areCurrenciesLoading,
     currencyInfo,
     className,
-    priceImpactParams,
+    priceImpactParams: _priceImpactParams,
+    bothCurrenciesSet,
     showSetMax = false,
     maxBalance,
     inputDisabled = false,
@@ -122,6 +124,16 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     />
   )
 
+  const priceImpactParams: typeof _priceImpactParams = useMemo(() => {
+    if (!_priceImpactParams) return undefined
+
+    return {
+      ..._priceImpactParams,
+      // Don't show price impact loading state when only one currency is set
+      loading: bothCurrenciesSet ? _priceImpactParams?.loading : false,
+    }
+  }, [_priceImpactParams, bothCurrenciesSet])
+
   return (
     <styledEl.OuterWrapper>
       <styledEl.Wrapper

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/defaultCurrencyInputProps.ts b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/defaultCurrencyInputProps.ts
@@ -14,6 +14,7 @@ export const defaultCurrencyInputPanelProps: CurrencyInputPanelProps & { priceIm
   chainId: 5,
   id: 'currency-panel',
   areCurrenciesLoading: false,
+  bothCurrenciesSet: true,
   isChainIdUnsupported: false,
   showSetMax: true,
   allowsOffchainSigning: true,

diff --git a/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx b/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx
@@ -9,6 +9,11 @@ import styled, { DefaultTheme } from 'styled-components/macro'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 import { warningSeverity } from 'legacy/utils/prices'
 
+const LoaderStyled = styled(Loader)`
+  margin-left: 4px;
+  vertical-align: bottom;
+`
+
 export interface PriceImpactIndicatorProps {
   priceImpactParams?: PriceImpact
 }
@@ -40,7 +45,7 @@ export function PriceImpactIndicator(props: PriceImpactIndicatorProps) {
           </MouseoverTooltip>
         </PriceImpactWrapper>
       ) : null}
-      {priceImpactLoading && <Loader size="14px" />}
+      {priceImpactLoading && <LoaderStyled size="14px" />}
     </span>
   )
 }
diff --git a/apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx b/apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx
@@ -112,7 +112,13 @@ export function SwapWidget() {
   const {
     inputAmount: { value: inputUsdValue },
     outputAmount: { value: outputUsdValue },
-  } = useTradeUsdAmounts(trade?.inputAmountWithoutFee, trade?.outputAmountWithoutFee)
+  } = useTradeUsdAmounts(
+    trade?.inputAmountWithoutFee || parsedAmounts.INPUT,
+    trade?.outputAmountWithoutFee || parsedAmounts.OUTPUT,
+    inputToken,
+    outputToken,
+    true
+  )
 
   // TODO: unify CurrencyInfo assembling between Swap and Limit orders
   // TODO: delegate formatting to the view layer

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx
@@ -102,7 +102,8 @@ export function TradeWidget(props: TradeWidgetProps) {
   const openTokenSelectWidget = useOpenTokenSelectWidget()
   const priorityTokenAddresses = usePriorityTokenAddresses()
 
-  const currenciesLoadingInProgress = !inputCurrencyInfo.currency && !outputCurrencyInfo.currency
+  const areCurrenciesLoading = !inputCurrencyInfo.currency && !outputCurrencyInfo.currency
+  const bothCurrenciesSet = !!inputCurrencyInfo.currency && !!outputCurrencyInfo.currency
 
   const canSellAllNative = isSafeWallet
   const maxBalance = maxAmountSpend(inputCurrencyInfo.balance || undefined, canSellAllNative)
@@ -114,7 +115,8 @@ export function TradeWidget(props: TradeWidgetProps) {
   const currencyInputCommonProps = {
     isChainIdUnsupported,
     chainId,
-    areCurrenciesLoading: currenciesLoadingInProgress,
+    areCurrenciesLoading,
+    bothCurrenciesSet,
     onCurrencySelection,
     onUserInput,
     allowsOffchainSigning,

diff --git a/apps/cowswap-frontend/src/modules/trade/hooks/useBuildTradeDerivedState.ts b/apps/cowswap-frontend/src/modules/trade/hooks/useBuildTradeDerivedState.ts
@@ -27,7 +27,7 @@ export function useBuildTradeDerivedState(stateAtom: Atom<ExtendedTradeRawState>
   const {
     inputAmount: { value: inputCurrencyFiatAmount },
     outputAmount: { value: outputCurrencyFiatAmount },
-  } = useTradeUsdAmounts(inputCurrencyAmount, outputCurrencyAmount)
+  } = useTradeUsdAmounts(inputCurrencyAmount, outputCurrencyAmount, inputCurrency, outputCurrency, true)
 
   // In limit orders and advanced orders we don't have "real" buy orders
   const slippageAdjustedSellAmount = inputCurrencyAmount

diff --git a/apps/cowswap-frontend/src/modules/trade/updaters/PriceImpactUpdater.tsx b/apps/cowswap-frontend/src/modules/trade/updaters/PriceImpactUpdater.tsx
@@ -11,7 +11,9 @@ export function PriceImpactUpdater() {
   const priceImpactState = useFiatValuePriceImpact()
 
   useSafeEffect(() => {
-    if (!priceImpactState) return
+    if (!priceImpactState) {
+      return
+    }
 
     const { isLoading, priceImpact } = priceImpactState
 

diff --git a/apps/cowswap-frontend/src/modules/usdAmount/hooks/useTradeUsdAmounts.ts b/apps/cowswap-frontend/src/modules/usdAmount/hooks/useTradeUsdAmounts.ts
@@ -25,10 +25,12 @@ export function useTradeUsdAmounts(
   inputAmount: Nullish<CurrencyAmount<Currency>>,
   outputAmount: Nullish<CurrencyAmount<Currency>>,
   inputCurrency?: Nullish<TokenWithLogo>,
-  outputCurrency?: Nullish<TokenWithLogo>
+  outputCurrency?: Nullish<TokenWithLogo>,
+  dontWaitBothAmounts?: boolean
 ): TradeUSDAmounts {
   const isWrapOrUnwrap = useIsWrapOrUnwrap()
-  const isTradeReady = !isWrapOrUnwrap && !isFractionFalsy(inputAmount) && !isFractionFalsy(outputAmount)
+  const areAmountsReady = !isFractionFalsy(inputAmount) && !isFractionFalsy(outputAmount)
+  const isTradeReady = !isWrapOrUnwrap && (dontWaitBothAmounts || areAmountsReady)
 
   return {
     inputAmount: useUsdAmount(isTradeReady ? inputAmount : null, inputCurrency),