feat: EOA TWAP JIT Polling

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

@@ -8,32 +8,33 @@ import { AccountIcon } from 'modules/account'
 import { Wrapper, CloseIcon, UpperSection, WalletIcon, LowerSection, BackButtonStyled } from './styled'
 
 interface ConfirmationPendingContentShellProps {
-  onDismiss: Command
   title: ReactNode
   description: ReactNode
   children: ReactNode
   modalMode?: boolean
+  /** Hide the back/close button if `onDismiss` is `undefined`. */
+  onDismiss?: Command
 }
 
 // TODO: Add proper return type annotation
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function ConfirmationPendingContentShell({
   title,
-  onDismiss,
   description,
   children: body,
   modalMode,
+  onDismiss,
 }: ConfirmationPendingContentShellProps) {
   return (
     <Wrapper>
       {modalMode}
       <UpperSection>
-        {!modalMode && <BackButtonStyled onClick={onDismiss} />}
+        {!modalMode && onDismiss && <BackButtonStyled onClick={onDismiss} />}
         <WalletIcon>
           <AccountIcon size={56} />
         </WalletIcon>
         <span>{title}</span>
-        {modalMode && <CloseIcon onClick={onDismiss} />}
+        {modalMode && onDismiss && <CloseIcon onClick={onDismiss} />}
       </UpperSection>
       <LowerSection>
         <h3>

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

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

apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/multi/MultiConfirmationPendingContent.styled.ts

@@ -0,0 +1,218 @@
+import { UI } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+
+export const StepsList = styled.ol`
+  --circle-size: 24px;
+  --inner-circle-size: 12px;
+  --icon-size: 14px;
+  --status-bg: var(${UI.COLOR_TEXT_OPACITY_10});
+  --status-color: var(${UI.COLOR_TEXT_OPACITY_70});
+  --spacing-around: 12px;
+
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0;
+  width: 100%;
+  margin-inline: auto;
+`
+
+export const StepItem = styled.li`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 0 0 var(--spacing-around) calc(var(--circle-size) + var(--spacing-around));
+
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    top: calc(1.5 * var(--spacing-around) + var(--circle-size));
+    bottom: calc(-0.5 * var(--spacing-around));
+    left: calc(var(--circle-size) / 2);
+    transform: translateX(-50%);
+    border-left: 2px solid var(${UI.COLOR_TEXT_OPACITY_10});
+  }
+`
+
+export const StepsIconWrapper = styled.div`
+  position: absolute;
+  top: var(--spacing-around);
+  left: 0;
+  border-radius: var(--circle-size);
+  height: var(--circle-size);
+  width: var(--circle-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: var(--status-bg);
+  color: var(--status-color);
+  font-size: var(--icon-size);
+
+  &[data-status='active'],
+  &[data-status='loading'] {
+    --status-bg: var(${UI.COLOR_INFO_BG});
+    --status-color: var(${UI.COLOR_INFO_TEXT});
+  }
+
+  &[data-status='loading'] {
+    animation: statusBgPulse 1.4s ease-in-out infinite;
+  }
+
+  &[data-status='loading']::before {
+    animation: statusDotPulse 1.4s ease-in-out infinite;
+  }
+
+  @keyframes statusBgPulse {
+    0%,
+    100% {
+      background: var(${UI.COLOR_INFO_BG});
+    }
+    50% {
+      background: var(${UI.COLOR_PRIMARY_OPACITY_25});
+    }
+  }
+
+  @keyframes statusDotPulse {
+    0%,
+    100% {
+      transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+      transform: translate(-50%, -50%) scale(1.25);
+    }
+  }
+
+  &[data-status='warning'] {
+    --status-bg: var(${UI.COLOR_ALERT_BG});
+    --status-color: var(${UI.COLOR_ALERT_TEXT});
+  }
+
+  &[data-status='success'] {
+    --status-bg: var(${UI.COLOR_SUCCESS_BG});
+    --status-color: var(${UI.COLOR_SUCCESS_TEXT});
+  }
+
+  &[data-status='error'] {
+    --status-bg: var(${UI.COLOR_DANGER_BG});
+    --status-color: var(${UI.COLOR_DANGER_TEXT});
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--inner-circle-size);
+    height: var(--inner-circle-size);
+    border-radius: 100%;
+    border: 2px solid currentColor;
+    transition: border-width 0.2s ease-in-out;
+  }
+
+  &[data-status='active']::before,
+  &[data-status='loading']::before {
+    border-width: calc(var(--inner-circle-size) / 2);
+  }
+
+  &[data-status='success'],
+  &[data-status='error'],
+  &[data-status='warning'] {
+    &::before {
+      display: none;
+    }
+  }
+
+  > svg {
+    width: 1em;
+    height: 1em;
+    stroke: currentColor;
+  }
+`
+
+export const StepHeaderButton = styled.button`
+  position: relative;
+  padding: var(--spacing-around) calc(var(--circle-size) + var(--spacing-around)) 0 0;
+  border: none;
+  background: transparent;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: calc(-0.5 * var(--spacing-around));
+    right: calc(-0.5 * var(--spacing-around));
+    bottom: calc(-1 * var(--spacing-around));
+    border-radius: 14px;
+  }
+
+  &:not(:disabled):hover::before {
+    background: var(${UI.COLOR_TEXT_OPACITY_10});
+  }
+`
+
+export const StepLabel = styled.strong`
+  display: block;
+  flex: 1;
+  font-size: 15px;
+  line-height: 1.4;
+  text-align: left;
+  margin: 0;
+  color: var(${UI.COLOR_TEXT_OPACITY_70});
+  font-weight: var(${UI.FONT_WEIGHT_BOLD});
+
+  [data-status='active'] &,
+  [data-status='loading'] & {
+    color: var(${UI.COLOR_TEXT});
+  }
+
+  [data-status='upcoming'] & {
+    font-weight: var(${UI.FONT_WEIGHT_NORMAL});
+  }
+`
+
+export const StepExpandIcon = styled.button`
+  position: absolute;
+  right: 0;
+  top: 14px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(${UI.COLOR_TEXT});
+
+  & > svg {
+    width: 1em;
+    height: 1em;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &[aria-expanded='true'] > svg {
+    transform: rotate(180deg);
+  }
+`
+
+export const StepDetailsInner = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 4px;
+  padding: var(--spacing-around) 0 0 0;
+
+  & p {
+    margin: 0;
+  }
+`

apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/multi/MultiConfirmationPendingContent.tsx

@@ -0,0 +1,114 @@
+import { ReactNode, useState } from 'react'
+
+import { Command } from '@cowprotocol/types'
+
+import { Trans } from '@lingui/react/macro'
+import { Check, X, AlertTriangle, ChevronDown } from 'react-feather'
+
+import { ExpandableContent } from 'common/pure/ExpandableContent/ExpandableContent.pure'
+
+import * as styledEl from './MultiConfirmationPendingContent.styled'
+
+import { ConfirmationPendingContentShell } from '../ConfirmationPendingContentShell'
+
+export interface MultiConfirmationPendingStep {
+  id: string
+  label: ReactNode
+  description?: string | ReactNode
+  status: MultiConfirmationPendingStepStatus
+}
+
+export type MultiConfirmationPendingStepStatus = 'upcoming' | 'active' | 'loading' | 'success' | 'error' | 'warning'
+
+interface MultiConfirmationItemProps {
+  step: MultiConfirmationPendingStep
+}
+
+interface MultiConfirmationPendingContentProps {
+  title: ReactNode
+  description: ReactNode
+  modalMode?: boolean
+
+  /**
+   * Arbitrary multi-step progress.
+   */
+  steps: MultiConfirmationPendingStep[]
+
+  /** Hide the back/close button if `onDismiss` is `undefined`. */
+  onDismiss?: Command
+}
+
+export function MultiConfirmationPendingContent({
+  title,
+  description,
+  modalMode,
+  steps,
+  onDismiss,
+}: MultiConfirmationPendingContentProps): ReactNode {
+  return (
+    <ConfirmationPendingContentShell
+      title={title}
+      onDismiss={onDismiss}
+      modalMode={modalMode}
+      description={
+        <>
+          <span>{description}</span>
+          <br />
+          <Trans>Follow these steps:</Trans>
+        </>
+      }
+    >
+      <styledEl.StepsList>
+        {steps.map((step) => (
+          <MultiConfirmationItem key={step.id} step={step} />
+        ))}
+      </styledEl.StepsList>
+    </ConfirmationPendingContentShell>
+  )
+}
+
+const ICON_STROKE_WIDTH = 2.5
+
+const ICONS_BY_STATUS = {
+  upcoming: null,
+  active: null,
+  loading: null,
+  success: <Check strokeWidth={ICON_STROKE_WIDTH} />,
+  error: <X strokeWidth={ICON_STROKE_WIDTH} />,
+  warning: <AlertTriangle strokeWidth={ICON_STROKE_WIDTH} />,
+} as const satisfies Record<MultiConfirmationPendingStepStatus, ReactNode | null>
+
+const EXPANDABLE_STATUSES = new Set(['success', 'error', 'warning'])
+const ALWAYS_EXPANDED_STATUSES = new Set(['active', 'loading'])
+
+function MultiConfirmationItem({ step: { label, description, status } }: MultiConfirmationItemProps): ReactNode {
+  const [isUserExpanded, setIsUserExpanded] = useState(false)
+  const canExpand = !!description && EXPANDABLE_STATUSES.has(status)
+  const isExpanded = (canExpand && isUserExpanded) || ALWAYS_EXPANDED_STATUSES.has(status)
+
+  const toggleIsUserExpanded = (): void => setIsUserExpanded((prev) => !prev)
+
+  return (
+    <styledEl.StepItem data-status={status}>
+      <styledEl.StepsIconWrapper data-status={status}>{ICONS_BY_STATUS[status]}</styledEl.StepsIconWrapper>
+
+      <styledEl.StepHeaderButton onClick={toggleIsUserExpanded} aria-expanded={isUserExpanded} disabled={!canExpand}>
+        <styledEl.StepLabel>{label}</styledEl.StepLabel>
+
+        {canExpand ? (
+          <styledEl.StepExpandIcon>
+            <ChevronDown aria-label={isUserExpanded ? 'Collapse' : 'Expand'} strokeWidth={ICON_STROKE_WIDTH} />
+          </styledEl.StepExpandIcon>
+        ) : null}
+      </styledEl.StepHeaderButton>
+
+      {description != null ? (
+        <ExpandableContent expanded={isExpanded}>
+          <styledEl.StepDetailsInner>
+            {typeof description === 'string' ? <p>{description}</p> : description}
+          </styledEl.StepDetailsInner>
+        </ExpandableContent>
+      ) : null}
+    </styledEl.StepItem>
+  )
+}