feat(limit-orders): redesign limit orders

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

@@ -0,0 +1,33 @@
+import { TokenWithLogo, USDC } from '@cowprotocol/common-const'
+import { getWrappedToken, tryParseCurrencyAmount } from '@cowprotocol/common-utils'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+
+import { useUsdPrice } from 'modules/usdAmount'
+
+export function useConvertUsdToTokenValue(
+  currency: Currency | null,
+): (typedValue: string, isUsdMode: boolean) => string {
+  const currencyUsdcPrice = useUsdPrice(currency ? getWrappedToken(currency) : null)
+
+  return (typedValue: string, isUsdMode: boolean) => {
+    if (isUsdMode && currencyUsdcPrice?.price) {
+      const usdcToken = USDC[currencyUsdcPrice.currency.chainId as SupportedChainId]
+      const usdAmount = tryParseCurrencyAmount(typedValue, usdcToken)
+
+      const tokenAmount = currencyUsdcPrice.price.invert().quote(hackyAdjustAmountDust(usdAmount))
+
+      return tokenAmount.toExact()
+    }
+
+    return typedValue
+  }
+}
+
+/**
+ * TODO: this is a hacky way to adjust the amount to avoid dust
+ * For some reason, when you enter for example $366, price.quote() returns 365,9999999999
+ */
+function hackyAdjustAmountDust(amount: CurrencyAmount<TokenWithLogo>): typeof amount {
+  return amount.add(tryParseCurrencyAmount('0.000001', amount.currency))
+}

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx

@@ -6,21 +6,22 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenAmount, HoverTooltip } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
-import { Trans } from '@lingui/macro'
-
 import { BalanceAndSubsidy } from 'legacy/hooks/useCowBalanceAndSubsidy'
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 import { Field } from 'legacy/state/types'
 
 import { setMaxSellTokensAnalytics } from 'modules/analytics'
 import { ReceiveAmount } from 'modules/swap/pure/ReceiveAmount'
+import { useUsdAmount } from 'modules/usdAmount'
 
 import { CurrencyInfo } from 'common/pure/CurrencyInputPanel/types'
 import { CurrencySelectButton } from 'common/pure/CurrencySelectButton'
 import { FiatValue } from 'common/pure/FiatValue'
 
 import * as styledEl from './styled'
 
+import { useConvertUsdToTokenValue } from '../../hooks/useConvertUsdToTokenValue'
+
 interface BuiltItProps {
   className: string
 }
@@ -84,26 +85,47 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     customSelectTokenButton,
   } = props
 
-  const { field, currency, balance, fiatAmount, amount, isIndependent, receiveAmountInfo } = currencyInfo
+  const {
+    field,
+    currency,
+    balance,
+    fiatAmount,
+    amount,
+    isIndependent,
+    receiveAmountInfo,
+    isUsdValuesMode = false,
+  } = currencyInfo
   const disabled = !!props.disabled || isChainIdUnsupported
-  const viewAmount = formatInputAmount(amount, balance, isIndependent)
+
+  const { value: usdAmount } = useUsdAmount(amount)
+  const { value: maxBalanceUsdAmount } = useUsdAmount(maxBalance)
+  const { value: balanceUsdAmount } = useUsdAmount(balance)
+  const viewAmount = isUsdValuesMode ? formatInputAmount(usdAmount) : formatInputAmount(amount, balance, isIndependent)
   const [typedValue, setTypedValue] = useState(viewAmount)
 
+  const convertUsdToTokenValue = useConvertUsdToTokenValue(currency)
+
   const onUserInputDispatch = useCallback(
     (typedValue: string) => {
-      setTypedValue(typedValue)
-      onUserInput(field, typedValue)
+      const value = convertUsdToTokenValue(typedValue, isUsdValuesMode)
+
+      setTypedValue(value)
+      onUserInput(field, value)
     },
-    [onUserInput, field],
+    [onUserInput, field, viewAmount, convertUsdToTokenValue, isUsdValuesMode],
   )
   const handleMaxInput = useCallback(() => {
     if (!maxBalance) {
       return
     }
 
-    onUserInputDispatch(maxBalance.toExact())
-    setMaxSellTokensAnalytics()
-  }, [maxBalance, onUserInputDispatch])
+    const value = isUsdValuesMode ? maxBalanceUsdAmount : maxBalance
+
+    if (value) {
+      onUserInputDispatch(value.toExact())
+      setMaxSellTokensAnalytics()
+    }
+  }, [maxBalance, onUserInputDispatch, convertUsdToTokenValue, isUsdValuesMode, maxBalanceUsdAmount])
 
   useEffect(() => {
     const areValuesSame = parseFloat(viewAmount) === parseFloat(typedValue)
@@ -128,13 +150,31 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
   const numericalInput = (
     <styledEl.NumericalInput
       className="token-amount-input"
-      value={isChainIdUnsupported ? '' : typedValue}
+      prependSymbol={isUsdValuesMode ? '$' : ''}
+      value={isChainIdUnsupported ? '' : isUsdValuesMode ? viewAmount : typedValue}
       readOnly={inputDisabled}
       onUserInput={onUserInputDispatch}
       $loading={areCurrenciesLoading}
     />
   )
 
+  const balanceView = (
+    <div>
+      {balance && !disabled && (
+        <styledEl.BalanceText>
+          {isUsdValuesMode ? (
+            <FiatValue fiatValue={balanceUsdAmount} />
+          ) : (
+            <TokenAmount amount={balance} defaultValue="0" tokenSymbol={currency} />
+          )}
+          {showSetMax && balance.greaterThan(0) && (
+            <styledEl.SetMaxBtn onClick={handleMaxInput}>Max</styledEl.SetMaxBtn>
+          )}
+        </styledEl.BalanceText>
+      )}
+    </div>
+  )
+
   const priceImpactParams: typeof _priceImpactParams = useMemo(() => {
     if (!_priceImpactParams) return undefined
 
@@ -159,10 +199,28 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
         pointerDisabled={disabled}
         readOnly={inputDisabled}
       >
-        {topLabel && <styledEl.CurrencyTopLabel>{topLabel}</styledEl.CurrencyTopLabel>}
+        <styledEl.TopRow>
+          {topLabel && (
+            <styledEl.CurrencyTopLabel>
+              {topLabel}{' '}
+              {isUsdValuesMode ? <TokenAmount amount={amount} defaultValue="0" tokenSymbol={currency} /> : ''}
+            </styledEl.CurrencyTopLabel>
+          )}
+
+          {isUsdValuesMode && balanceView}
+        </styledEl.TopRow>
 
         {topContent}
         <styledEl.CurrencyInputBox>
+          <div>
+            {inputTooltip ? (
+              <HoverTooltip wrapInContainer content={inputTooltip}>
+                {numericalInput}
+              </HoverTooltip>
+            ) : (
+              numericalInput
+            )}
+          </div>
           <div>
             <CurrencySelectButton
               onClick={onTokenSelectClick}
@@ -173,35 +231,17 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
               customSelectTokenButton={customSelectTokenButton}
             />
           </div>
-          <div>
-            {inputTooltip ? (
-              <HoverTooltip wrapInContainer content={inputTooltip}>
-                {numericalInput}
-              </HoverTooltip>
-            ) : (
-              numericalInput
-            )}
-          </div>
         </styledEl.CurrencyInputBox>
 
         <styledEl.CurrencyInputBox>
           <div>
-            {balance && !disabled && (
-              <styledEl.BalanceText>
-                <Trans>Balance</Trans>: <TokenAmount amount={balance} defaultValue="0" tokenSymbol={currency} />
-                {showSetMax && balance.greaterThan(0) && (
-                  <styledEl.SetMaxBtn onClick={handleMaxInput}>Max</styledEl.SetMaxBtn>
-                )}
-              </styledEl.BalanceText>
-            )}
-          </div>
-          <div>
-            {amount && (
+            {amount && !isUsdValuesMode && (
               <styledEl.FiatAmountText>
                 <FiatValue priceImpactParams={priceImpactParams} fiatValue={fiatAmount} />
               </styledEl.FiatAmountText>
             )}
           </div>
+          {!isUsdValuesMode && balanceView}
         </styledEl.CurrencyInputBox>
       </styledEl.Wrapper>
 

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx

@@ -72,6 +72,15 @@ export const CurrencyTopLabel = styled.div`
   }
 `
 
+export const TopRow = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+`
+
 export const NumericalInput = styled(Input)<{ $loading: boolean }>`
   width: 100%;
   height: 100%;
@@ -81,6 +90,7 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
   font-size: 28px;
   font-weight: 500;
   color: inherit;
+  text-align: left;
 
   &::placeholder {
     opacity: 0.7;
@@ -106,7 +116,7 @@ export const TokenAmountStyled = styled(TokenAmount)`
 
 export const BalanceText = styled.span`
   font-weight: inherit;
-  font-size: inherit;
+  font-size: 13px;
   gap: 5px;
   display: flex;
   align-items: center;
@@ -150,7 +160,9 @@ export const SetMaxBtn = styled.button`
   border-radius: 6px;
   padding: 3px 4px;
   text-transform: uppercase;
-  transition: background var(${UI.ANIMATION_DURATION}) ease-in-out, color var(${UI.ANIMATION_DURATION}) ease-in-out;
+  transition:
+    background var(${UI.ANIMATION_DURATION}) ease-in-out,
+    color var(${UI.ANIMATION_DURATION}) ease-in-out;
 
   &:hover {
     background: var(${UI.COLOR_PRIMARY});

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

@@ -16,4 +16,5 @@ export interface CurrencyInfo {
   balance: CurrencyAmount<Currency> | null
   fiatAmount: CurrencyAmount<Currency> | null
   topContent?: ReactNode
+  isUsdValuesMode?: boolean
 }