Integrate Order progress bar (#454)

* Progress of execution UI (#366)

* add progressbar component

* add warning

* add alert icon

* progressbar position

* add CheckIcon

* add pending status and styles

* add AMMs component

* fix duplicate import

* add progressbar variant and enhancements

* add message container and improve mobile view

* change amms animation time

* fix delay animtation

* improvements, color, mobile

* change clock colors

* Fix wallet-connect double qr code

* Fix for 1Inch and possibly some other wallets

* Updated comments and disconnect error handling

* Forcing wallet connect connector type

* integrate Order progress bar UX

* extract Cancel order button

* fix incorrect amm state percentage

* improve state handling and hide progress bar when order is cancelled

* hide progress bar for expired orders

* hide orders that are not pending

* initialize progress bar with current percentage

* AMMs logos per network

* add GC AMMs logos

* fix bao logo reference

* Update yarn lock

* Incerease update speed and improve message

* Add rotating clock

* Increase expected execution time

* Add nose picking icon

* Remove plural

* Change message

* make cow state always 30 seconds

* use safe info to get better progress values

* Revert "Merge remote-tracking branch 'origin/fix-walletconnect-double-qr-code_updated' into ramirotw/issue-392-integrate-progress-bar"

This reverts commit 0410fc0, reversing
changes made to c8e523d.

* update lock from reverted merge

Co-authored-by: Agustín Longoni <[email protected]>
Co-authored-by: Alfetopito <[email protected]>
Co-authored-by: nenadV91 <[email protected]>
Co-authored-by: Anxo Rodriguez <[email protected]>

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}
+        />
+      )}
+    </>
+  )
+}