feat: implement remaining Figma designs for multi-step tracker

apps/cowswap-frontend/package.json

@@ -91,6 +91,7 @@
     "@wagmi/core": "3.4.8",
     "bignumber.js": "9.1.2",
     "buffer": "6.0.3",
+    "clsx": "2.1.1",
     "color2k": "2.0.2",
     "csstype": "3.1.3",
     "dayjs": "1.11.10",

apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/index.tsx

@@ -1,6 +1 @@
 export { ConfirmationPendingContent } from './ConfirmationPendingContent'
-export { MultiConfirmationPendingContent } from './multi/MultiConfirmationPendingContent'
-export type {
-  MultiConfirmationPendingStep,
-  MultiConfirmationPendingStepStatus,
-} from './multi/MultiConfirmationPendingContent'

apps/cowswap-frontend/src/common/pure/CurrencyAmountPreview/index.tsx

@@ -2,15 +2,16 @@ import { ReactNode } from 'react'
 
 import { Currency, CurrencyAmount } from '@cowprotocol/currency'
 import { TokenLogo } from '@cowprotocol/tokens'
-import { TokenAmount } from '@cowprotocol/ui'
 
 import { Nullish } from 'types'
 
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
 import * as styledEl from './styled'
 
-import { FiatValue } from '../FiatValue'
+const TOKEN_LOGO_SIZE = 42
+
+export type CurrencyAmountPreviewVariant = 'default' | 'slim'
 
 export interface CurrencyPreviewInfo {
   amount: Nullish<CurrencyAmount<Currency>>
@@ -20,6 +21,7 @@ export interface CurrencyPreviewInfo {
 }
 
 export interface CurrencyPreviewProps extends Partial<BuiltItProps> {
+  variant?: CurrencyAmountPreviewVariant
   id: string
   currencyInfo: CurrencyPreviewInfo
   isBridging?: boolean
@@ -30,24 +32,31 @@ interface BuiltItProps {
   className: string
 }
 
-export function CurrencyAmountPreview(props: CurrencyPreviewProps): ReactNode {
-  const { id, currencyInfo, className, priceImpactParams, isBridging } = props
+export function CurrencyAmountPreview({
+  variant = 'default',
+  id,
+  currencyInfo,
+  className,
+  priceImpactParams,
+  isBridging,
+}: CurrencyPreviewProps): ReactNode {
   const { fiatAmount, amount } = currencyInfo
   const topLabel = currencyInfo.label
   const currency = amount?.currency
+  const containerClassName = [className, variant === 'slim' ? 'slim' : null].filter(Boolean).join(' ')
 
   return (
-    <styledEl.Container id={id} className={className}>
+    <styledEl.Container id={id} className={containerClassName}>
       <div>{topLabel}</div>
       <div>
         <styledEl.TokenLogoWrapper>
-          <TokenLogo token={currency} size={42} />
+          <TokenLogo token={currency} size={TOKEN_LOGO_SIZE} />
         </styledEl.TokenLogoWrapper>
       </div>
-      <styledEl.Amount>
-        <TokenAmount className="token-amount-input" amount={amount} tokenSymbol={currency} />
-        <FiatValue fiatValue={fiatAmount} priceImpactParams={priceImpactParams} isBridging={isBridging} />
-      </styledEl.Amount>
+      <styledEl.Amounts>
+        <styledEl.Amount className="token-amount-input" amount={amount} tokenSymbol={currency} />
+        <styledEl.FiatAmountSlot fiatValue={fiatAmount} priceImpactParams={priceImpactParams} isBridging={isBridging} />
+      </styledEl.Amounts>
     </styledEl.Container>
   )
 }

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

@@ -1,7 +1,12 @@
-import { Media, UI } from '@cowprotocol/ui'
+import { TokenAmount, Media, UI, slowTransition } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
+import { FiatValue } from '../FiatValue'
+
+export const TOKEN_SIZE_DEFAULT = 42
+export const TOKEN_SIZE_SLIM = 32
+
 export const Container = styled.div`
   padding: 24px 12px;
   width: 100%;
@@ -12,25 +17,44 @@ export const Container = styled.div`
   text-align: center;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 12px;
+  transition: ${slowTransition(['padding', 'gap'])};
 
   ${Media.upToSmall()} {
     font-size: 13px;
     letter-spacing: -0.1px;
   }
+
+  &.slim {
+    padding: 8px 12px;
+    gap: 8px;
+  }
 `
 
-export const Amount = styled.div`
-  font-size: 15px;
-  font-weight: 600;
+export const Amounts = styled.div`
   display: flex;
   flex-flow: column wrap;
   gap: 6px;
+`
 
-  // Targets FiatValue
-  > div {
-    font-weight: 500;
-    font-size: 13px;
+export const Amount = styled(TokenAmount)`
+  font-size: 15px;
+  font-weight: 600;
+`
+
+export const FiatAmountSlot = styled(FiatValue)`
+  display: block;
+  font-weight: 500;
+  font-size: 13px;
+  max-height: 2.5em;
+  opacity: 1;
+  overflow: hidden;
+  transition: ${slowTransition(['max-height', 'opacity', 'margin-top'])};
+
+  ${Container}.slim & {
+    max-height: 0;
+    opacity: 0;
+    margin-top: -6px;
   }
 `