Skip to content

Commit

Permalink
Merge pull request #556 from cowprotocol/small-poc-progress
Browse files Browse the repository at this point in the history 
[progress bar] Less scary message
  • Loading branch information
@anxolin
anxolin authored May 31, 2022
2 parents 11f84ad + 9187e85 commit 79bc8fb
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 26 deletions.
18 changes: 14 additions & 4 deletions src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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])
Expand Down Expand Up @@ -154,12 +156,20 @@ export function OrderProgressBar(props: OrderProgressBarProps) {
<>
<ProgressBarInnerWrapper>
<WarningProgress percentage={percentage}>
<WarningLogo />
<WarningLogo>
<img src={loadingCowGif} alt="Loading prices..." />
</WarningLogo>
</WarningProgress>
</ProgressBarInnerWrapper>
<StatusMsgContainer>
<WarningIcon size={16} />
<StatusMsg> Your order is taking longer than usual.</StatusMsg>
<StatusMsg>
<p>The network looks slower than usual. Solvers are adjusting gas fees for you!</p>
{isCancellable ? (
<p>
You can wait or <CancelButton chainId={chainId} activityDerivedState={activityDerivedState} />
</p>
) : null}
</StatusMsg>
</StatusMsgContainer>
</>
)
Expand Down
53 changes: 41 additions & 12 deletions src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
`

Expand Down
8 changes: 4 additions & 4 deletions src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -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, number> = {
[SupportedChainId.MAINNET]: 90,
[SupportedChainId.RINKEBY]: 15,
[SupportedChainId.XDAI]: 15,
[SupportedChainId.MAINNET]: 120,
[SupportedChainId.RINKEBY]: 50,
[SupportedChainId.XDAI]: 50,
}

const LOG_FUNCTION = Math.log2
Expand Down
90 changes: 84 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"

Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 79bc8fb

Please sign in to comment.