Integrate Order progress bar

src/custom/components/AMMsLogo/index.tsx

@@ -0,0 +1,86 @@
+import styled from 'styled-components/macro'
+import Sushi from 'assets/cow-swap/ammslogo/sushi.png'
+import Paraswap from 'assets/cow-swap/ammslogo/paraswap.png'
+import Oneinch from 'assets/cow-swap/ammslogo/1inch.png'
+import Uniswap from 'assets/cow-swap/ammslogo/uniswap.png'
+import Baoswap from 'assets/cow-swap/ammslogo/baoswap.png'
+import Honeyswap from 'assets/cow-swap/ammslogo/honeyswap.png'
+import Swapr from 'assets/cow-swap/ammslogo/swapr.png'
+import { SupportedChainId } from 'constants/chains'
+
+export const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1};
+  background-color: ${({ theme }) => theme.white};
+  transform-style: preserve-3d;
+  position: absolute;
+  top: -4px;
+  right: 0px;
+
+  img {
+    position: absolute;
+    left: 0;
+    animation: FadeInOut 6s infinite;
+  }
+  @keyframes FadeInOut {
+    0% {
+      opacity: 1;
+    }
+    17% {
+      opacity: 1;
+    }
+    25% {
+      opacity: 0;
+    }
+    92% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  img:nth-of-type(1) {
+    animation-delay: 6s;
+  }
+  img:nth-of-type(2) {
+    animation-delay: 4.5s;
+  }
+  img:nth-of-type(3) {
+    animation-delay: 3s;
+  }
+  img:nth-of-type(4) {
+    animation-delay: 1.5s;
+  }
+`
+
+type Image = { src: string; alt: string }
+
+const SushiImage = { src: Sushi, alt: 'AMMs Sushiswap' }
+const OneInchImage = { src: Oneinch, alt: 'AMMs 1inch' }
+const ParaswapImage = { src: Paraswap, alt: 'AMMs Paraswap' }
+const UniswapImage = { src: Uniswap, alt: 'AMMs Uniswap' }
+const BaoswapImage = { src: Baoswap, alt: 'AMMs Baoswap' }
+const HoneyswapImage = { src: Honeyswap, alt: 'AMMs Honeyswap' }
+const SwaprImage = { src: Swapr, alt: 'AMMs Swapr' }
+
+const LogosPerNetwork: Record<SupportedChainId, Array<Image>> = {
+  [SupportedChainId.MAINNET]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage],
+  [SupportedChainId.RINKEBY]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage],
+  [SupportedChainId.XDAI]: [SushiImage, BaoswapImage, HoneyswapImage, SwaprImage],
+}
+
+export function AMMsLogo({ chainId }: { chainId: SupportedChainId }) {
+  return (
+    <Wrapper>
+      {LogosPerNetwork[chainId].map(({ src, alt }, index) => (
+        <img key={index} src={src} alt={alt} />
+      ))}
+    </Wrapper>
+  )
+}

src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx

@@ -8,7 +8,6 @@ import {
   Summary,
   SummaryInner,
   SummaryInnerRow,
-  TransactionAlertMessage,
   TransactionInnerDetail,
   TextAlert,
   TransactionState as ActivityLink,
@@ -21,11 +20,10 @@ import { DEFAULT_PRECISION, V_COW_CONTRACT_ADDRESS } from 'constants/index'
 import { ActivityDerivedState } from './index'
 import { GnosisSafeLink } from './StatusDetails'
 import CurrencyLogo from 'components/CurrencyLogo'
-import AttentionIcon from 'assets/cow-swap/attention.svg'
 import { useToken } from 'hooks/Tokens'
-import SVG from 'react-inlinesvg'
 import { ActivityStatus } from 'hooks/useRecentActivity'
 import { V_COW, COW } from 'constants/tokens'
+import { OrderProgressBar } from './OrderProgressBar'
 
 const DEFAULT_ORDER_SUMMARY = {
   from: '',
@@ -34,17 +32,6 @@ const DEFAULT_ORDER_SUMMARY = {
   validTo: '',
 }
 
-function unfillableAlert(): JSX.Element {
-  return (
-    <>
-      <TransactionAlertMessage type="attention">
-        <SVG src={AttentionIcon} description="Limit Price Warning" />
-        <b>Limit price out of range:</b>&nbsp;Wait for a matching price or cancel your order.
-      </TransactionAlertMessage>
-    </>
-  )
-}
-
 function GnosisSafeTxDetails(props: {
   chainId: number
   activityDerivedState: ActivityDerivedState
@@ -159,8 +146,7 @@ export function ActivityDetails(props: {
   creationTime?: string | undefined
 }) {
   const { activityDerivedState, chainId, activityLinkUrl, disableMouseActions, creationTime } = props
-  const { id, isOrder, summary, order, enhancedTransaction, isCancelled, isExpired, isUnfillable } =
-    activityDerivedState
+  const { id, isOrder, summary, order, enhancedTransaction, isCancelled, isExpired } = activityDerivedState
   const tokenAddress =
     enhancedTransaction?.approval?.tokenAddress || (enhancedTransaction?.claim && V_COW_CONTRACT_ADDRESS[chainId])
   const singleToken = useToken(tokenAddress) || null
@@ -307,10 +293,15 @@ export function ActivityDetails(props: {
             View details ↗
           </ActivityLink>
         )}
-
-        {isUnfillable && unfillableAlert()}
-
         <GnosisSafeTxDetails chainId={chainId} activityDerivedState={activityDerivedState} />
+        {order && creationTime && validTo && (
+          <OrderProgressBar
+            activityDerivedState={activityDerivedState}
+            creationTime={new Date(order.creationTime)}
+            validTo={new Date((order.validTo as number) * 1000)}
+            chainId={chainId}
+          />
+        )}
       </SummaryInner>
     </Summary>
   )

src/custom/components/AccountDetails/Transaction/CancelButton.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { LinkStyledButton } from 'theme'
+import { ActivityDerivedState } from './index'
+import { CancellationModal } from './CancelationModal'
+
+export function CancelButton(props: { chainId: number; activityDerivedState: ActivityDerivedState }) {
+  const { activityDerivedState, chainId } = props
+  const { id, summary } = activityDerivedState
+
+  const [showCancelModal, setShowCancelModal] = useState(false)
+
+  const onCancelClick = () => setShowCancelModal(true)
+  const onDismiss = () => setShowCancelModal(false)
+
+  return (
+    <>
+      <LinkStyledButton onClick={onCancelClick}>Cancel order</LinkStyledButton>{' '}
+      {showCancelModal && (
+        <CancellationModal
+          chainId={chainId}
+          orderId={id}
+          summary={summary}
+          isOpen={showCancelModal}
+          onDismiss={onDismiss}
+        />
+      )}
+    </>
+  )
+}