diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index e852532a0e..14077f6a54 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -20,7 +20,9 @@ import { EXPECTED_EXECUTION_TIME, getPercentage } from './utils' import { SupportedChainId } from 'constants/chains' import { ActivityDerivedState } from '../index' import { CancelButton } from '../CancelButton' +import loadingCowGif from 'assets/cow-swap/cow-load.gif' +const REFRESH_INTERVAL_MS = 200 const COW_STATE_PERCENTAGE = 0.33 // 33% of the elapsed time based on the network's average is for the COW protocol type OrderProgressBarProps = { @@ -55,7 +57,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { const id = setInterval(() => { const percentage = getPercentage(elapsedSeconds, expirationInSeconds, chainId) setPercentage(percentage) - }, 1000) + }, REFRESH_INTERVAL_MS) return () => clearInterval(id) }, [creationTime, validTo, chainId, elapsedSeconds, expirationInSeconds, isPending]) @@ -154,12 +156,20 @@ export function OrderProgressBar(props: OrderProgressBarProps) { <> - + + Loading prices... + - - Your order is taking longer than usual. + +

The network looks slower than usual. Solvers are adjusting gas fees for you!

+ {isCancellable ? ( +

+ You can wait or +

+ ) : null} +
) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts index 818878cd7a..c019f1fed3 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts @@ -57,19 +57,48 @@ export const WarningLogo = styled.div` position: absolute; top: -4px; right: 0px; - height: 24px; - width: 24px; - border-radius: 100%; - background-color: ${({ theme }) => theme.white}; + height: 26px; + width: 26px; + border-radius: 9px; + border: transparent; + + background: ${({ theme }) => theme.blueShade}; box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; - :after { - content: '!'; - color: ${({ theme }) => theme.red1}; - display: flex; - justify-content: center; - font-weight: bold; - font-size: 16px; - margin: 2px 0; + + img { + margin: 4px 0 0 2px; + width: 22px; + } + + &::after { + filter: blur(10px); + } + + &::before, + &::after { + content: ''; + position: absolute; + left: -2px; + top: -2px; + background: ${({ theme }) => `linear-gradient(45deg, #e57751, #c5daef, #275194, ${theme.bg4}, #c5daef, #1b5a7a)`}; + background-size: 800%; + width: calc(100% + 4px); + height: calc(100% + 4px); + z-index: -1; + animation: steam 7s linear infinite; + border-radius: 9px; + } + + @keyframes steam { + 0% { + background-position: 0 0; + } + 50% { + background-position: 400% 0; + } + 100% { + background-position: 0 0; + } } ` diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts index 13d0939697..f01fef7201 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts @@ -1,11 +1,11 @@ import { SupportedChainId } from 'constants/chains' -const EXPECTED_EXECUTION_TIME_PERCENTAGE = 70 +const EXPECTED_EXECUTION_TIME_PERCENTAGE = 75 export const EXPECTED_EXECUTION_TIME: Record = { - [SupportedChainId.MAINNET]: 90, - [SupportedChainId.RINKEBY]: 15, - [SupportedChainId.XDAI]: 15, + [SupportedChainId.MAINNET]: 120, + [SupportedChainId.RINKEBY]: 50, + [SupportedChainId.XDAI]: 50, } const LOG_FUNCTION = Math.log2 diff --git a/yarn.lock b/yarn.lock index 04a7a679f8..97ef7c8d65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5504,6 +5504,27 @@ "@walletconnect/window-metadata" "1.0.0" detect-browser "5.2.0" +"@walletconnect/browser-utils@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/browser-utils/-/browser-utils-1.7.8.tgz#c9e27f69d838442d69ccf53cb38ffc3c554baee2" + integrity sha512-iCL0XCWOZaABIc0lqA79Vyaybr3z26nt8mxiwvfrG8oaKUf5Y21Of4dj+wIXQ4Hhblre6SgDlU0Ffb39+1THOw== + dependencies: + "@walletconnect/safe-json" "1.0.0" + "@walletconnect/types" "^1.7.8" + "@walletconnect/window-getters" "1.0.0" + "@walletconnect/window-metadata" "1.0.0" + detect-browser "5.2.0" + +"@walletconnect/client@^1.7.0": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.7.8.tgz#62c2d7114e59495d90772ea8033831ceb29c6a78" + integrity sha512-pBroM6jZAaUM0SoXJZg5U7aPTiU3ljQAw3Xh/i2pxFDeN/oPKao7husZ5rdxS5xuGSV6YpqqRb0RxW1IeoR2Pg== + dependencies: + "@walletconnect/core" "^1.7.8" + "@walletconnect/iso-crypto" "^1.7.8" + "@walletconnect/types" "^1.7.8" + "@walletconnect/utils" "^1.7.8" + "@walletconnect/client@^1.7.1", "@walletconnect/client@^1.7.7": version "1.7.7" resolved "https://registry.yarnpkg.com/@walletconnect/client/-/client-1.7.7.tgz#4570475b0aeed05e53b0c7b01a352a895c0b455b" @@ -5523,6 +5544,15 @@ "@walletconnect/types" "^1.7.7" "@walletconnect/utils" "^1.7.7" +"@walletconnect/core@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/core/-/core-1.7.8.tgz#97c52ea7d00126863cd37bf19bd3e87d4f30de1e" + integrity sha512-9xcQ0YNf9JUFb0YOX1Mpy4Yojt+6w2yQz/0aIEyj2X/s9D71NW0fTYsMcdhkLOI7mn2cqVbx2t1lRvdgqsbrSQ== + dependencies: + "@walletconnect/socket-transport" "^1.7.8" + "@walletconnect/types" "^1.7.8" + "@walletconnect/utils" "^1.7.8" + "@walletconnect/crypto@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@walletconnect/crypto/-/crypto-1.0.2.tgz#3fcc2b2cde6f529a19eadd883dc555cd0e861992" @@ -5561,13 +5591,13 @@ eip1193-provider "1.0.1" eventemitter3 "4.0.7" -"@walletconnect/http-connection@^1.7.7": - version "1.7.7" - resolved "https://registry.yarnpkg.com/@walletconnect/http-connection/-/http-connection-1.7.7.tgz#77bcce7c4c067e1e745da1a1c6174ff0daa76018" - integrity sha512-MmhVJfBjvjYcZnrJYnDx4VBwpYM6yh7eX4/8szo6sGwzG4E+8V4YBKU2NF6fA6YXpdAyEYayElqXhB0YBEZFJA== +"@walletconnect/http-connection@^1.7.0": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/http-connection/-/http-connection-1.7.8.tgz#98bcc726c29751ddc791ff151742aa712bf679a7" + integrity sha512-31gjBw46MRU9hFMTNXAqh+f8qpDNzVeV9BJehzVWKiNC3ciL1JCZkbvsY0djwajduE6TB2ujaML0XDXS9HgBRA== dependencies: - "@walletconnect/types" "^1.7.7" - "@walletconnect/utils" "^1.7.7" + "@walletconnect/types" "^1.7.8" + "@walletconnect/utils" "^1.7.8" eventemitter3 "4.0.7" xhr2-cookies "1.1.0" @@ -5580,6 +5610,15 @@ "@walletconnect/types" "^1.7.7" "@walletconnect/utils" "^1.7.7" +"@walletconnect/iso-crypto@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/iso-crypto/-/iso-crypto-1.7.8.tgz#41f09326d129faa09beae213e78614c19d90bbd6" + integrity sha512-Qo6qDcMG0Ac+9fpWE0h/oE55NHLk6eM2vlXpWlQDN/me7RZGrkvk+LXsAkQ3UiYPEiPfq4eswcyRWC9AcrAscg== + dependencies: + "@walletconnect/crypto" "^1.0.2" + "@walletconnect/types" "^1.7.8" + "@walletconnect/utils" "^1.7.8" + "@walletconnect/jsonrpc-http-connection@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@walletconnect/jsonrpc-http-connection/-/jsonrpc-http-connection-1.0.0.tgz#5bbdfbaf6d6519b3c08e492a6badb7460ab5ecd0" @@ -5617,6 +5656,18 @@ resolved "https://registry.yarnpkg.com/@walletconnect/mobile-registry/-/mobile-registry-1.4.0.tgz#502cf8ab87330841d794819081e748ebdef7aee5" integrity sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw== +"@walletconnect/qrcode-modal@^1.7.0": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.8.tgz#52b3d15922f3e371ddc92fd0f49f93ff40241365" + integrity sha512-LqNJMLWO+ljvoRSdq8tcEslW0imKrrb+ugs3bw4w/jEI1FSJzVeinEsgVpyaMv8wsUcyTcSCXSkXpT1SXHtcpw== + dependencies: + "@walletconnect/browser-utils" "^1.7.8" + "@walletconnect/mobile-registry" "^1.4.0" + "@walletconnect/types" "^1.7.8" + copy-to-clipboard "^3.3.1" + preact "10.4.1" + qrcode "1.4.4" + "@walletconnect/qrcode-modal@^1.7.7": version "1.7.7" resolved "https://registry.yarnpkg.com/@walletconnect/qrcode-modal/-/qrcode-modal-1.7.7.tgz#a7567370bf915a50fb8edc99f6ceb70ce9be2bfc" @@ -5664,11 +5715,38 @@ "@walletconnect/utils" "^1.7.7" ws "7.5.3" +"@walletconnect/socket-transport@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/socket-transport/-/socket-transport-1.7.8.tgz#a4ef50d8054293991dbfde7f9c66788030182ec3" + integrity sha512-bqEjLxfSzG79v2OT7XVOZoyUkg6g3yng0fURrdLusWs42fYHWnrSrIZDejFn8N5PiZk5R2edrggkQ7w0VUUAfw== + dependencies: + "@walletconnect/types" "^1.7.8" + "@walletconnect/utils" "^1.7.8" + ws "7.5.3" + +"@walletconnect/types@^1.7.0", "@walletconnect/types@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.7.8.tgz#ec397e6fbdc8147bccc17029edfeb41c50a5ca09" + integrity sha512-0oSZhKIrtXRJVP1jQ0EDTRtotQY6kggGjDcmm/LLQBKnOZXdPeo0sPkV/7DjT5plT3O7Cjc6JvuXt9WOY0hlCA== + "@walletconnect/types@^1.7.1", "@walletconnect/types@^1.7.7": version "1.7.7" resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.7.7.tgz#71c623b36a93e373370b1772e82fea2d801adf54" integrity sha512-yXJrLxwLLCXtWgd/e8FjfY9v5DKds12Z7EEPzUrPSq6v7WtXpqate577KwlFQ6UYzioQzIEDE8+98j+0aiZbsw== +"@walletconnect/utils@^1.7.0", "@walletconnect/utils@^1.7.8": + version "1.7.8" + resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-1.7.8.tgz#f94572bca5eb6b5f81daf8a35268f249f9c6b1ec" + integrity sha512-DSpfH6Do0TQmdrgzu+SyjVhupVjN0WEMvNWGK9K4VlSmLFpCWfme7qxzrvuxBZ47gDqs1kGWvjyJmviWqvOnAg== + dependencies: + "@walletconnect/browser-utils" "^1.7.8" + "@walletconnect/encoding" "^1.0.1" + "@walletconnect/jsonrpc-utils" "^1.0.0" + "@walletconnect/types" "^1.7.8" + bn.js "4.11.8" + js-sha3 "0.8.0" + query-string "6.13.5" + "@walletconnect/utils@^1.7.1", "@walletconnect/utils@^1.7.7": version "1.7.7" resolved "https://registry.yarnpkg.com/@walletconnect/utils/-/utils-1.7.7.tgz#684522fa20ccf9ec2944f0497ca70254cb6d4729"