From 862c413a3fa6fe4e2a3fe00905a5ea95b8a18c13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Fri, 8 Apr 2022 18:06:32 -0300 Subject: [PATCH 01/26] 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 --- src/custom/assets/cow-swap/ammslogo/1inch.png | Bin 0 -> 1268 bytes .../assets/cow-swap/ammslogo/paraswap.png | Bin 0 -> 1300 bytes src/custom/assets/cow-swap/ammslogo/sushi.png | Bin 0 -> 1228 bytes .../assets/cow-swap/ammslogo/uniswap.png | Bin 0 -> 664 bytes src/custom/components/AMMsLogo/index.tsx | 67 ++++++++++ .../Transaction/ActivityDetails.tsx | 61 ++++++++- .../AccountDetails/Transaction/styled.ts | 116 ++++++++++++++++++ 7 files changed, 242 insertions(+), 2 deletions(-) create mode 100644 src/custom/assets/cow-swap/ammslogo/1inch.png create mode 100644 src/custom/assets/cow-swap/ammslogo/paraswap.png create mode 100644 src/custom/assets/cow-swap/ammslogo/sushi.png create mode 100644 src/custom/assets/cow-swap/ammslogo/uniswap.png create mode 100644 src/custom/components/AMMsLogo/index.tsx diff --git a/src/custom/assets/cow-swap/ammslogo/1inch.png b/src/custom/assets/cow-swap/ammslogo/1inch.png new file mode 100644 index 0000000000000000000000000000000000000000..8095b0422ad041436cf0d76bbc542ce334f944df GIT binary patch literal 1268 zcmV={^!NX^F-@I9wP*4(v|h z1i&H?L20)lYI+pgs0PnWptZ?>bEig;o|Az9Kc6`Q*3k=8-w-;yKbR2v8XmN?Bl_JV zxLQ#IhK9n0%wS6HiS(~ep-E@JS~qu`&dR`^?C(&peJ4_+n=l}hK%@Hy`3FmOQA(FKt6my_diznPlUybxwo6!AB%MDUIY^yvnVADk$d0#@2T7V}2>= z=p81}iJy@>4V^@to=yBCc9SC^F{Efy7`a(p%ZJhmDa%%;41lkf86Q-b;pCCEs%)VZ~~l0I}O)vkNgS6yqhE1(#5gu?ki*+cF<(eYiE-R$r?tW`Vp<~)F(nYr2K|{0e5lK;HOra6-`5K- z)6%yQ5qkRvP+oZ-Df{B*f0wP3a^pIBv;H9yy-72aGgg=agAf}093QGgO#6k2=4&Ng zsOGF}^HOKzVAL|k9Z+q16A_^=%%5VbnsH$exX};g*RRi#(W(ziJ;VpkWqZ-0&2Bk4 zMjK&m<3kWSZ!;LdtdZd4o>+YHMe5v^h0TtgP?9rrnzFTv#GG!E^5 z2T|dhk@(hj{Cs60(>3jF{M)F5x2GIt8ouKn@5kW} zcRBmOf@`ppu+JV@LXp<1KbN&b@u@`uKLO3k+6?`E?K!~$y5BhNOJ)2Z)I@U eG*q9M82V8VD6?(^zPm+Qe3EH7)XD)P^=D`d|!fOnlIo?wc>B z@KQpmHV}Luu~%sOP)PwnNK+dYBb8Ex1-b4yGvmy;EXz&(HUV5w*Pg3W6IEtt04tz#A@fqv_!k^Ru|uDw-HctY<4kTarZNz5NK5 zJ#BgRFGm%}TSWYI{=9TN8`Fca%4@-C7SG^MtLR zXI_)e;IBEL`I@ikr~A<}@oSXki-FVU6Z__t$iJ_YBR!Q?v~cb5tcq|L$V{^^HRs#V z3E}#%EmKB9b+k*LiM{e0CCkhL^Akzssl?Ip_1=DV(L{Q(f#4g2bDa{SlTPsQ@{v27 zQ0Ld$&70M54{7fQ!#HVi0gD4&cNxNyd=>cZktl|LPeASS0y!B5j#sf5xF?Pfy()rTsb+B!t?;FflDqy~A*qN_^P?q$UAp4;j!Hxf#I7Zl@G<-!KPJizUvdwUP9%ki}l{rbqL zqGgMAa!sI`X*s=qzR)c(yC87!rbNNkD5|y_n21Q6ze>3BGe;oTz=5*WnGg@IjdKc6 z)D(V8dF=t4F4^Fi#OL30{4p)ja45m{I@D>|=hWH_%r8kCd4Z6YB(Rw&!2`s#G?oLd ziDJa zaGcm}*d?JQ)82D;ZD%j==d8eyazoumQRr-4OXMR&h=_+RR~iRc$>pBKu?mK~Ov1Of zq8OiYWYi?O|9e5=>n;9z47So6xHyb_DsGHdrPDEv7c<2O7hXdQc}Y9kxZ-W;;k>NzVIacTDt>f zJ{09pOiSh@x2?CXY^QovuYc})Mhr9a0$qI!87VT-`XN`BolBtY%D~c@k6WVW=9bha zk(`a>Hoe)IQ@x%er3$ZGe%Gl00000< KMNUMnLSTXdb$`kL literal 0 HcmV?d00001 diff --git a/src/custom/assets/cow-swap/ammslogo/sushi.png b/src/custom/assets/cow-swap/ammslogo/sushi.png new file mode 100644 index 0000000000000000000000000000000000000000..86051295a7164cd31efc6b3c1ec4bb09b5b0eb40 GIT binary patch literal 1228 zcmV;-1T*`IP)Y`i`=KZ@1i_7=2-}~5 zBK{d#5mBUym)cdR4l~zw>!O>~Hfeg#)+TMzCEu5P$CI?#vRt~3J@AEd-uFH4bKY~_ z^S&Y200x7tT2aUm5WWkb4eT=mgfLZ*jcgdP>Fjyz+rI}}bv)*RGW>G^xW4}ugWvUFdU_Tc zU^ymZXC&gCNJgL$j29SHd%DF7-N(`NbQijti(uEQQEwH|;xwYQr5UviyPy{ZjJmI_ z1(OYt6G*)j4P4}nMtck(@kL%O8cwsJGbQXk{3@K14W_6J)$I^ejG)l0 zfqh3Ql>cr+oDP6a1`u}7!}feVs>*DzMpWn<`7iZV;i;VSH9L58W0s`uhhlKJGz|2Y8ne z(7&0mBVGFY^%1;nw`0_E3)k13C-CW{3mVFy-R!`}LoWOg@Ip`vXlrZ1#Dq7~Ih)Z@ zqSrf5vC(_E!Yi+Ez+tmtaL|>rGEhp<)wLIWeU}hpX_^VPWf`W?YT;*T z>2}}D?HlL~uXqn73AC0nJ1?tlu%Q8)LaG3feA;kaCQXS3lz9TJB_~56 z@7Z*DR!?Rme{luo9*)AnruEpAcls;ODF;_pd_QHXHf-vN6jq?T#_G*(mhwBudaq9G qmi=Yz zPj(DZ3z#{Qk;$lJ)clP`KTBl9^eiw*6FiFIVIiGW!_NbA(!ayUd;k#D)@ZVyxsbDY| z(003}BuUio#bROO#^bT7Iv_9*?&uvc6o8q4Dj)z7U_PI#s}aF-*mS*KZH$8y0;7-s z{GLoEiX5bFh9EKmun@MvK2+nO5C4N}UVP=l;h^rt8lFz4_FYv~ER*e!B-FD2YPz@1 zBxAKi4WUm^6ora$g+d}h0Zeu?4nZv8^?J>Do~sHV5SoL1aCS{Y!)CLY^1cmNw(uUy z+4L!}C$6ZVautz{G?ArY)*=_!)u>RKta@bZNz>H!%s~Z#+!p{jCc$F^h`|#0?0z~x zj94TUNGLVmd<%GLvNDY}K4XX_KN#@dG&>*=E2CVS5G1=;Elre+dxYSMCW6ctK@|}9 zP}olJ*8y|)49K!f4G6*_f3=`O?~B{8e*hs7Zh`S1K#%@F_~2o$;rD=SVbh&+BBwU! yO8)1_^m 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; + } +` + +export function AMMsLogo() { + return ( + + AMMs Sushiswap + AMMs 1inch + AMMs Paraswap + AMMs Uniswap + + ) +} diff --git a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx index 7cc188ff9c..14c6a35969 100644 --- a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx +++ b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx @@ -14,6 +14,18 @@ import { TransactionState as ActivityLink, CreationTimeText, ActivityVisual, + ProgressBarWrapper, + ProgressBarInnerWrapper, + CowProtocolIcon, + WarningLogo, + StatusMsgContainer, + StatusMsg, + GreenClockIcon, + OrangeClockIcon, + WarningIcon, + WarningProgress, + PendingProgress, + SuccessProgress, } from './styled' import { getLimitPrice, getExecutionPrice } from 'state/orders/utils' @@ -24,8 +36,10 @@ import CurrencyLogo from 'components/CurrencyLogo' import AttentionIcon from 'assets/cow-swap/attention.svg' import { useToken } from 'hooks/Tokens' import SVG from 'react-inlinesvg' +import { AMMsLogo } from 'components/AMMsLogo' import { ActivityStatus } from 'hooks/useRecentActivity' import { V_COW, COW } from 'constants/tokens' +import { LinkStyledButton } from '@src/theme/components' const DEFAULT_ORDER_SUMMARY = { from: '', @@ -307,10 +321,53 @@ export function ActivityDetails(props: { View details ↗ )} - {isUnfillable && unfillableAlert()} - + + + + + + + + Looking for a CoW. + + + + + + + + + + + Finding best onchain price. + + + + + + + + + + + Your order is taking longer than usual. + + + + + + + + + + + + Your limit price is out of market. You can wait orCancel order + + + ) diff --git a/src/custom/components/AccountDetails/Transaction/styled.ts b/src/custom/components/AccountDetails/Transaction/styled.ts index 163429ae88..59f55aface 100644 --- a/src/custom/components/AccountDetails/Transaction/styled.ts +++ b/src/custom/components/AccountDetails/Transaction/styled.ts @@ -5,6 +5,8 @@ import { TransactionState as OldTransactionState } from '../TransactionMod' import { RowFixed } from 'components/Row' import { transparentize } from 'polished' import { StyledLogo } from 'components/CurrencyLogo' +import { AlertTriangle, Clock } from 'react-feather' +import CowProtocolLogo from 'assets/cow-swap/cowprotocol.svg' export const TransactionWrapper = styled.div` width: 100%; @@ -439,6 +441,120 @@ export const TransactionInnerDetail = styled.div` } ` +export const ProgressBarWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + width: 575px; + margin: 16px 0 8px 0; + overflow: hidden; + display: flex; + flex-flow: column wrap; + border-radius: 12px; + padding: 20px 20px 4px; + color: ${({ theme }) => theme.text1}; + background-color: ${({ theme }) => theme.bg4}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 24px auto 12px; + width: 100%; + max-width: 100%; + grid-column: 1 / -1; + `}; +` +export const ProgressBarInnerWrapper = styled.div` + background-color: ${({ theme }) => theme.blue4}; + border-radius: 18px; + overflow: visible !important; + position: relative; +` + +export const ProgressBarIndicator = styled.div` + height: 18px; + background: rgb(233, 214, 37); + transform: translateX(0%); + border-radius: 12px; +` +export const CowProtocolIcon = styled.div` + position: absolute; + top: -4px; + right: 0px; + height: 24px; + width: 24px; + border-radius: 100%; + border: 1px solid ${({ theme }) => theme.bg4}; + background: url(${CowProtocolLogo}) ${({ theme }) => theme.black} no-repeat center/75%; + box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; +` + +export const WarningLogo = styled.div` + position: absolute; + top: -4px; + right: 0px; + height: 24px; + width: 24px; + border-radius: 100%; + background-color: ${({ theme }) => theme.white}; + 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; + } +` + +export const WarningProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #de3f3f 2.17%, #ff784a 106.52%); ; +` + +export const SuccessProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #27ae5f 16.85%, #b6a82d 106.52%); +` + +export const PendingProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #b6a82d 16.85%, #ff784a 106.52%); +` + +export const GreenClockIcon = styled(Clock)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.success}; +` + +export const OrangeClockIcon = styled(Clock)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.yellow1}; +` + +export const WarningIcon = styled(AlertTriangle)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.attention}; +` + +export const StatusMsgContainer = styled.div` + display: flex; + align-items: center; + margin: 1rem 0; + + ${({ theme }) => theme.mediaWidth.upToSmall` + gap: 0.2rem; + display: flex; + align-items: center; + + svg { + flex-shrink: 0; + } + `}; +` +export const StatusMsg = styled.p` + font-size: 0.85rem; + color: ${({ theme }) => theme.text1}; + margin: 0; +` + export const TextAlert = styled.div<{ isPending: boolean; isExpired: boolean; isCancelled: boolean }>` background: ${({ theme, isPending }) => isPending ? transparentize(0.85, theme.attention) : transparentize(0.85, theme.success)}; From 2785649ac98e4cf184346ab1e8ec52e85fa23e50 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Fri, 22 Apr 2022 11:48:05 +0100 Subject: [PATCH 02/26] Fix wallet-connect double qr code --- package.json | 2 +- .../components/WalletModal/WalletModalMod.tsx | 13 +++++- src/custom/hooks/useWalletInfo.ts | 3 +- src/custom/hooks/web3.ts | 21 +++++++++- yarn.lock | 40 +++++++------------ 5 files changed, 50 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 3a3c12930f..a92bc06a64 100644 --- a/package.json +++ b/package.json @@ -254,7 +254,7 @@ "@web3-react/types": "8.0.7-beta.0", "@web3-react/url": "8.0.9-beta.0", "@web3-react/walletconnect": "8.0.15-beta.0", - "@web3-react/walletconnect-connector": "6.2.4", + "@web3-react/walletconnect-connector": "^7.0.2-alpha.0", "@web3-react/walletlink-connector": "^6.2.5", "ajv": "^6.12.3", "bnc-sdk": "^3.5.0", diff --git a/src/custom/components/WalletModal/WalletModalMod.tsx b/src/custom/components/WalletModal/WalletModalMod.tsx index f63288d945..ab95c0586b 100644 --- a/src/custom/components/WalletModal/WalletModalMod.tsx +++ b/src/custom/components/WalletModal/WalletModalMod.tsx @@ -30,6 +30,8 @@ import PendingView from 'components/WalletModal/PendingView' // MOD imports import ModalMod from '@src/components/Modal' +import { SupportedChainId } from 'constants/chains' + export const CloseIcon = styled.div` position: absolute; right: 1rem; @@ -224,7 +226,7 @@ export default function WalletModal({ setWalletView(WALLET_VIEWS.PENDING) // if the connector is walletconnect and the user has already tried to connect, manually reset the connector - if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) { + if (connector instanceof WalletConnectConnector) { connector.walletConnectProvider = undefined } @@ -234,6 +236,15 @@ export default function WalletModal({ // const walletAddress = await connector.getAccount() // logMonitoringEvent({ walletAddress }) // }) + .then(() => { + // fix for this https://github.com/gnosis/cowswap/issues/1930 + // manually set the WalletConnectConnector http.connection.url to currently connected network url + if (connector instanceof WalletConnectConnector) { + const { http, rpc, signer } = connector.walletConnectProvider + const chainId = signer.connection.chainId || SupportedChainId.MAINNET + http.connection.url = rpc.custom[chainId] + } + }) .catch((error) => { if (error instanceof UnsupportedChainIdError) { activate(connector) // a little janky...can't use setError because the connector isn't set diff --git a/src/custom/hooks/useWalletInfo.ts b/src/custom/hooks/useWalletInfo.ts index aa36a4c3fb..42043b45a6 100644 --- a/src/custom/hooks/useWalletInfo.ts +++ b/src/custom/hooks/useWalletInfo.ts @@ -60,7 +60,8 @@ function checkIsSupportedWallet(params: { async function getWcPeerMetadata(connector: WalletConnectConnector): Promise<{ walletName?: string; icon?: string }> { const provider = (await connector.getProvider()) as WalletConnectProvider - const meta = provider.walletMeta + // fix for this https://github.com/gnosis/cowswap/issues/1929 + const meta = provider.walletMeta || provider.signer.connection.wc.peerMeta if (meta) { return { walletName: meta.name, diff --git a/src/custom/hooks/web3.ts b/src/custom/hooks/web3.ts index abe7e4226e..3213df5e72 100644 --- a/src/custom/hooks/web3.ts +++ b/src/custom/hooks/web3.ts @@ -9,6 +9,7 @@ import { isMobile } from 'utils/userAgent' // MOD imports import { STORAGE_KEY_LAST_PROVIDER, WAITING_TIME_RECONNECT_LAST_PROVIDER } from 'constants/index' import { AbstractConnector } from '@web3-react/abstract-connector' +import { WalletConnectConnector } from '@web3-react/walletconnect-connector' // exports from the original file export { useInactiveListener } from '@src/hooks/web3' @@ -19,7 +20,6 @@ enum DefaultProvidersInjected { COINBASE_WALLET = WalletProvider.WALLET_LINK, } -// TODO: original from uniswap has gnosis-safe connection details, could be re-used export function useEagerConnect() { const { activate, active, connector } = useWeb3React() const [tried, setTried] = useState(false) @@ -129,6 +129,25 @@ export function useEagerConnect() { return () => timeout && clearTimeout(timeout) }, [active]) + useEffect(() => { + // fix for this https://github.com/gnosis/cowswap/issues/1923 + // check if current connector is of type WalletConnect + if (connector instanceof WalletConnectConnector) { + const walletConnect = connector.walletConnectProvider.signer.connection.wc + + // listen on disconnect events directly on WalletConnect client and close connection + // important if the connection is closed from the wallet side after page refresh + walletConnect.on('disconnect', (error: any) => { + connector.close() + localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER) + + if (error) { + throw error + } + }) + } + }, [connector]) + useEffect(() => { // add beforeunload event listener on initial component mount window.addEventListener('beforeunload', handleBeforeUnload) diff --git a/yarn.lock b/yarn.lock index a66a6a0a21..04a7a679f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5682,16 +5682,16 @@ js-sha3 "0.8.0" query-string "6.13.5" -"@walletconnect/web3-provider@^1.5.0", "@walletconnect/web3-provider@^1.6.6": - version "1.7.7" - resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.7.tgz#3d2f8d7a0fcdc118615283978c6a7c9f2a852b71" - integrity sha512-hUhDyaMu93e7e82OVCu3KnYOn6m6wQO9YObbhi3PexppCANe/Y9eDrw/37S+7jbjLIx5nS1et2JU+taKR7OSOw== - dependencies: - "@walletconnect/client" "^1.7.7" - "@walletconnect/http-connection" "^1.7.7" - "@walletconnect/qrcode-modal" "^1.7.7" - "@walletconnect/types" "^1.7.7" - "@walletconnect/utils" "^1.7.7" +"@walletconnect/web3-provider@^1.6.6": + version "1.7.0" + resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.0.tgz#14d67a75555547205e9fd916a7142b1f951a143e" + integrity sha512-tX0nKVJAs1jrRmFAP8nv1h27ZttWQ/4pOW8hkH32JIB76zbsncdUOjHpnzpzgXrzMyrCzfeXeZ8dbdW4jS1KDw== + dependencies: + "@walletconnect/client" "^1.7.0" + "@walletconnect/http-connection" "^1.7.0" + "@walletconnect/qrcode-modal" "^1.7.0" + "@walletconnect/types" "^1.7.0" + "@walletconnect/utils" "^1.7.0" web3-provider-engine "16.0.1" "@walletconnect/window-getters@1.0.0", "@walletconnect/window-getters@^1.0.0": @@ -5805,12 +5805,12 @@ "@ethersproject/providers" "^5.5.1" "@web3-react/types" "^8.0.7-beta.0" -"@web3-react/walletconnect-connector@6.2.4": - version "6.2.4" - resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-6.2.4.tgz#0a128699fc93ddac885935f4aeca32925f6285f0" - integrity sha512-IEVjCXrlcfVa6ggUBEyKtLRaLQuZGtT2lGuzOFtdbJJkN84u1++pzzeDrcsVhKAoS5wq33zyJT9baEbG1Aed8g== +"@web3-react/walletconnect-connector@^7.0.2-alpha.0", "web3-react-walletconnect-connector@npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0": + version "7.0.2-alpha.0" + resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-7.0.2-alpha.0.tgz#dacd59db626b42137a1e4f34ea23ef1f04cc8b99" + integrity sha512-Qr+AecDt5/gbAb8sFfW5kbMo0nberCAU/6AB9KmmwCm2YGEEqJrj8fW3Kin7SGxv8pgDxgXwPYsW7qMUzayXEQ== dependencies: - "@walletconnect/web3-provider" "^1.5.0" + "@walletconnect/ethereum-provider" "^1.5.4" "@web3-react/abstract-connector" "^6.0.7" "@web3-react/types" "^6.0.7" tiny-invariant "^1.0.6" @@ -23776,16 +23776,6 @@ web3-providers-ws@1.7.1: tiny-invariant "^1.0.6" tiny-warning "^1.0.3" -"web3-react-walletconnect-connector@npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0": - version "7.0.2-alpha.0" - resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-7.0.2-alpha.0.tgz#dacd59db626b42137a1e4f34ea23ef1f04cc8b99" - integrity sha512-Qr+AecDt5/gbAb8sFfW5kbMo0nberCAU/6AB9KmmwCm2YGEEqJrj8fW3Kin7SGxv8pgDxgXwPYsW7qMUzayXEQ== - dependencies: - "@walletconnect/ethereum-provider" "^1.5.4" - "@web3-react/abstract-connector" "^6.0.7" - "@web3-react/types" "^6.0.7" - tiny-invariant "^1.0.6" - web3-shh@1.7.1: version "1.7.1" resolved "https://registry.yarnpkg.com/web3-shh/-/web3-shh-1.7.1.tgz#c6a0fc67321dd585085e3e3be8f2c1c8d61636ef" From 692f4642144f471b012c1a9cf4f9226d885839b7 Mon Sep 17 00:00:00 2001 From: nenadV91 Date: Tue, 15 Mar 2022 13:25:10 +0100 Subject: [PATCH 03/26] Fix for 1Inch and possibly some other wallets --- src/custom/utils/signatures.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/custom/utils/signatures.ts b/src/custom/utils/signatures.ts index 29fd6f7ab6..6e27180e46 100644 --- a/src/custom/utils/signatures.ts +++ b/src/custom/utils/signatures.ts @@ -21,6 +21,9 @@ import { registerOnWindow } from 'utils/misc' // - https://www.jsonrpc.org/specification#error_object const METAMASK_SIGNATURE_ERROR_CODE = -32603 const METHOD_NOT_FOUND_ERROR_CODE = -32601 +// Added the following because of 1Inch walet who doesn't send the error code +// So we will check the actual error text +const METHOD_NOT_FOUND_ERROR_MSG_REGEX = /Method not found/i const V4_ERROR_MSG_REGEX = /eth_signTypedData_v4 does not exist/i const V3_ERROR_MSG_REGEX = /eth_signTypedData_v3 does not exist/i const RPC_REQUEST_FAILED_REGEX = /RPC request failed/i @@ -159,7 +162,12 @@ async function _signPayload( try { signature = (await signFn({ ...payload, signer: _signer, signingScheme })) as EcdsaSignature // Only ECDSA signing supported for now } catch (e) { - if (e.code === METHOD_NOT_FOUND_ERROR_CODE || RPC_REQUEST_FAILED_REGEX.test(e.message)) { + const regexErrorCheck = [METHOD_NOT_FOUND_ERROR_MSG_REGEX, RPC_REQUEST_FAILED_REGEX].some((regex) => + // for example 1Inch error doesn't have e.message so we will check the output of toString() + [e.message, e.toString()].some((msg) => regex.test(msg)) + ) + + if (e.code === METHOD_NOT_FOUND_ERROR_CODE || regexErrorCheck) { // Maybe the wallet returns the proper error code? We can only hope 🤞 // OR it failed with a generic message, there's no error code set, and we also hope it'll work // with other methods... From 3fcaf7455b1d34d505d6512780a11dd77aaf0b11 Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Fri, 22 Apr 2022 11:50:21 +0100 Subject: [PATCH 04/26] Updated comments and disconnect error handling --- .../components/WalletModal/WalletModalMod.tsx | 4 +-- src/custom/hooks/web3.ts | 34 +++++++++---------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/custom/components/WalletModal/WalletModalMod.tsx b/src/custom/components/WalletModal/WalletModalMod.tsx index ab95c0586b..6fddc61de1 100644 --- a/src/custom/components/WalletModal/WalletModalMod.tsx +++ b/src/custom/components/WalletModal/WalletModalMod.tsx @@ -237,8 +237,8 @@ export default function WalletModal({ // logMonitoringEvent({ walletAddress }) // }) .then(() => { - // fix for this https://github.com/gnosis/cowswap/issues/1930 - // manually set the WalletConnectConnector http.connection.url to currently connected network url + // Manually set the WalletConnectConnector http.connection.url to currently connected network url + // Fix for this https://github.com/gnosis/cowswap/issues/1930 if (connector instanceof WalletConnectConnector) { const { http, rpc, signer } = connector.walletConnectProvider const chainId = signer.connection.chainId || SupportedChainId.MAINNET diff --git a/src/custom/hooks/web3.ts b/src/custom/hooks/web3.ts index 3213df5e72..145357a87e 100644 --- a/src/custom/hooks/web3.ts +++ b/src/custom/hooks/web3.ts @@ -11,7 +11,7 @@ import { STORAGE_KEY_LAST_PROVIDER, WAITING_TIME_RECONNECT_LAST_PROVIDER } from import { AbstractConnector } from '@web3-react/abstract-connector' import { WalletConnectConnector } from '@web3-react/walletconnect-connector' -// exports from the original file +// Exports from the original file export { useInactiveListener } from '@src/hooks/web3' export { default as useActiveWeb3React } from 'hooks/useActiveWeb3React' @@ -24,11 +24,11 @@ export function useEagerConnect() { const { activate, active, connector } = useWeb3React() const [tried, setTried] = useState(false) - // gnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app; - // if we are not embedded in an iframe, it is not worth checking + // GnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app; + // If we are not embedded in an iframe, it is not worth checking const [triedSafe, setTriedSafe] = useState(!IS_IN_IFRAME) - // handle setting/removing wallet provider in local storage + // Handle setting/removing wallet provider in local storage const handleBeforeUnload = useCallback(() => { const walletType = getProviderType(connector) @@ -41,7 +41,7 @@ export function useEagerConnect() { const connectInjected = useCallback( (providerName = DefaultProvidersInjected.METAMASK) => { - // check if the our application is authorized/connected with Metamask + // Check if our application is authorized/connected with Metamask injected.isAuthorized().then((isAuthorized) => { if (isAuthorized) { setDefaultInjected(providerName) @@ -88,7 +88,7 @@ export function useEagerConnect() { if (!active) { const latestProvider = localStorage.getItem(STORAGE_KEY_LAST_PROVIDER) - // if there is no last saved provider set tried state to true + // If there is no last saved provider set tried state to true if (!latestProvider) { if (!triedSafe) { // First try to connect using Gnosis Safe @@ -130,29 +130,29 @@ export function useEagerConnect() { }, [active]) useEffect(() => { - // fix for this https://github.com/gnosis/cowswap/issues/1923 - // check if current connector is of type WalletConnect + // Check if current connector is of type WalletConnect + // Fix for this https://github.com/gnosis/cowswap/issues/1923 if (connector instanceof WalletConnectConnector) { const walletConnect = connector.walletConnectProvider.signer.connection.wc - // listen on disconnect events directly on WalletConnect client and close connection - // important if the connection is closed from the wallet side after page refresh - walletConnect.on('disconnect', (error: any) => { - connector.close() - localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER) - + // Listen on disconnect events directly on WalletConnect client and close the connection + // Important in case the connection is closed from the wallet side after the page is refreshed + walletConnect.on('disconnect', (error: Error) => { if (error) { - throw error + console.error('[WalletConnectConnector] Error during disconnect:', error) + } else { + connector.close() + localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER) } }) } }, [connector]) useEffect(() => { - // add beforeunload event listener on initial component mount + // Add beforeunload event listener on initial component mount window.addEventListener('beforeunload', handleBeforeUnload) - // remove beforeunload event listener on component unmount + // Remove beforeunload event listener on component unmount return () => { window.removeEventListener('beforeunload', handleBeforeUnload) } From 2022a5156b790a7b08692f577cfbd6b0d723ac2c Mon Sep 17 00:00:00 2001 From: Alfetopito Date: Fri, 22 Apr 2022 16:51:58 +0100 Subject: [PATCH 05/26] Forcing wallet connect connector type --- src/custom/hooks/useWalletInfo.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/custom/hooks/useWalletInfo.ts b/src/custom/hooks/useWalletInfo.ts index 42043b45a6..af53d97198 100644 --- a/src/custom/hooks/useWalletInfo.ts +++ b/src/custom/hooks/useWalletInfo.ts @@ -97,12 +97,10 @@ export function useWalletInfo(): ConnectedWalletInfo { const walletType = getProviderType(connector) switch (walletType) { case WalletProvider.WALLET_CONNECT: - if (connector instanceof WalletConnectConnector) { - getWcPeerMetadata(connector).then(({ walletName, icon }) => { - setWalletName(walletName) - setIcon(icon) - }) - } + getWcPeerMetadata(connector as WalletConnectConnector).then(({ walletName, icon }) => { + setWalletName(walletName) + setIcon(icon) + }) break case WalletProvider.GNOSIS_SAFE: setWalletName(GNOSIS_SAFE_APP_NAME) From de7addd014bffda26472fcf6712c9c735aa8acda Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 00:15:31 -0300 Subject: [PATCH 06/26] integrate Order progress bar UX --- .../Transaction/ActivityDetails.tsx | 99 +++-------- .../Transaction/OrderProgressBar/index.tsx | 156 ++++++++++++++++++ .../Transaction/OrderProgressBar/styled.ts | 128 ++++++++++++++ .../Transaction/OrderProgressBar/utils.ts | 37 +++++ .../AccountDetails/Transaction/styled.ts | 116 ------------- 5 files changed, 344 insertions(+), 192 deletions(-) create mode 100644 src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx create mode 100644 src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts create mode 100644 src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts diff --git a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx index a3edbea7b1..e12a00cf22 100644 --- a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx +++ b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx @@ -8,24 +8,11 @@ import { Summary, SummaryInner, SummaryInnerRow, - TransactionAlertMessage, TransactionInnerDetail, TextAlert, TransactionState as ActivityLink, CreationTimeText, ActivityVisual, - ProgressBarWrapper, - ProgressBarInnerWrapper, - CowProtocolIcon, - WarningLogo, - StatusMsgContainer, - StatusMsg, - GreenClockIcon, - OrangeClockIcon, - WarningIcon, - WarningProgress, - PendingProgress, - SuccessProgress, } from './styled' import { getLimitPrice, getExecutionPrice } from 'state/orders/utils' @@ -33,13 +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 { AMMsLogo } from 'components/AMMsLogo' import { ActivityStatus } from 'hooks/useRecentActivity' import { V_COW, COW } from 'constants/tokens' -import { LinkStyledButton } from '@src/theme/components' +import { OrderProgressBar } from './OrderProgressBar' const DEFAULT_ORDER_SUMMARY = { from: '', @@ -48,17 +32,6 @@ const DEFAULT_ORDER_SUMMARY = { validTo: '', } -function unfillableAlert(): JSX.Element { - return ( - <> - - - Limit price out of range: Wait for a matching price or cancel your order. - - - ) -} - function GnosisSafeTxDetails(props: { chainId: number activityDerivedState: ActivityDerivedState @@ -173,8 +146,18 @@ 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, + isConfirmed, + isUnfillable, + isCancellable, + } = activityDerivedState const tokenAddress = enhancedTransaction?.approval?.tokenAddress || (enhancedTransaction?.claim && V_COW_CONTRACT_ADDRESS[chainId]) const singleToken = useToken(tokenAddress) || null @@ -321,53 +304,17 @@ export function ActivityDetails(props: { View details ↗ )} - {isUnfillable && unfillableAlert()} - - - - - - - - Looking for a CoW. - - - - - - - - - - - Finding best onchain price. - - - - - - - - - - - Your order is taking longer than usual. - - - - - - - - - - - - Your limit price is out of market. You can wait orCancel order - - - + {order && creationTime && validTo && ( + + )} ) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx new file mode 100644 index 0000000000..4cb736bf1c --- /dev/null +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -0,0 +1,156 @@ +import { useEffect, useState } from 'react' +import { useTransition } from 'react-spring' +import { + ProgressBarWrapper, + ProgressBarInnerWrapper, + SuccessProgress, + CowProtocolIcon, + GreenClockIcon, + StatusMsgContainer, + StatusMsg, + OrangeClockIcon, + PendingProgress, + WarningProgress, + WarningLogo, + WarningIcon, + GreenCheckIcon, +} from './styled' +import { AMMsLogo } from 'components/AMMsLogo' +import { EXPECTED_EXECUTION_TIME, getPercentage } from './utils' +import { LinkStyledButton } from '@src/theme' +import { SupportedChainId } from 'constants/chains' + +type OrderProgressBarProps = { + creationTime: Date + validTo: Date + isUnfillable?: boolean + isCancellable?: boolean + isConfirmed: boolean + chainId: SupportedChainId +} + +export function OrderProgressBar(props: OrderProgressBarProps) { + const { creationTime, validTo, isUnfillable = false, isCancellable = false, isConfirmed, chainId } = props + const [percentage, setPercentage] = useState(1) + const transitions = useTransition(!isConfirmed, null, { + from: { opacity: 0 }, + enter: { opacity: 1 }, + leave: { opacity: 0 }, + trail: 3000, + }) + + const elapsedSeconds = (Date.now() - creationTime.getTime()) / 1000 + + useEffect(() => { + if (isConfirmed) { + return + } + + const id = setInterval(() => { + const expirationInSeconds = (validTo.getTime() - creationTime.getTime()) / 1000 + const percentage = getPercentage(elapsedSeconds, expirationInSeconds, chainId) + setPercentage(percentage) + }, 1000) + + return () => clearInterval(id) + }, [creationTime, validTo, chainId, elapsedSeconds, isConfirmed]) + + useEffect(() => { + if (isConfirmed) { + setPercentage(100) + } + }, [isConfirmed]) + + const progressBar = () => { + if (isConfirmed) { + return ( + <> + + + + + + + + Transaction confirmed. + + + ) + } + + if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * 0.33) { + return ( + <> + + + + + + + + Looking for a CoW. + + + ) + } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * 0.66) { + return ( + <> + + + + + + + + Finding best onchain price. + + + ) + } else { + return ( + <> + + + + + + + + Your order is taking longer than usual. + + + ) + } + } + + return ( + <> + {transitions.map(({ item, props, key }) => { + return ( + item && ( + + {isUnfillable ? ( + <> + + + + + + + + + Your limit price is out of market. You can wait or + Cancel order + + + + ) : ( + progressBar() + )} + + ) + ) + })} + + ) +} diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts new file mode 100644 index 0000000000..818878cd7a --- /dev/null +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts @@ -0,0 +1,128 @@ +import styled from 'styled-components/macro' +import { animated } from 'react-spring' +import { AlertTriangle, CheckCircle, Clock } from 'react-feather' +import CowProtocolLogo from 'assets/cow-swap/cowprotocol.svg' + +export const ProgressBarWrapper = animated(styled.div` + display: flex; + flex-direction: column; + justify-content: center; + width: 575px; + margin: 16px 0 8px 0; + overflow: hidden; + display: flex; + flex-flow: column wrap; + border-radius: 12px; + padding: 20px 20px 4px; + color: ${({ theme }) => theme.text1}; + background-color: ${({ theme }) => theme.bg4}; + + ${({ theme }) => theme.mediaWidth.upToSmall` + margin: 24px auto 12px; + width: 100%; + max-width: 100%; + grid-column: 1 / -1; + `}; +`) + +export const ProgressBarInnerWrapper = styled.div` + background-color: ${({ theme }) => theme.blue4}; + border-radius: 18px; + overflow: visible !important; + position: relative; +` + +export const ProgressBarIndicator = styled.div<{ percentage: number }>` + height: 18px; + background: rgb(233, 214, 37); + transform: translateX(0%); + border-radius: 12px; + transition: all 0.5s; + width: ${({ percentage }) => percentage}%; +` + +export const CowProtocolIcon = styled.div` + position: absolute; + top: -4px; + right: 0px; + height: 24px; + width: 24px; + border-radius: 100%; + border: 1px solid ${({ theme }) => theme.bg4}; + background: url(${CowProtocolLogo}) ${({ theme }) => theme.black} no-repeat center/75%; + box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; +` + +export const WarningLogo = styled.div` + position: absolute; + top: -4px; + right: 0px; + height: 24px; + width: 24px; + border-radius: 100%; + background-color: ${({ theme }) => theme.white}; + 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; + } +` + +export const WarningProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #de3f3f 2.17%, #ff784a 106.52%); ; +` + +export const SuccessProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #27ae5f 16.85%, #b6a82d 106.52%); +` + +export const PendingProgress = styled(ProgressBarIndicator)` + background: linear-gradient(270deg, #b6a82d 16.85%, #ff784a 106.52%); +` + +export const GreenClockIcon = styled(Clock)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.success}; +` + +export const GreenCheckIcon = styled(CheckCircle)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.success}; +` + +export const OrangeClockIcon = styled(Clock)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.yellow1}; +` + +export const WarningIcon = styled(AlertTriangle)` + margin: 0 0.5rem 0 0; + color: ${({ theme }) => theme.attention}; +` + +export const StatusMsgContainer = styled.div` + display: flex; + align-items: center; + margin: 1rem 0; + + ${({ theme }) => theme.mediaWidth.upToSmall` + gap: 0.2rem; + display: flex; + align-items: center; + + svg { + flex-shrink: 0; + } + `}; +` + +export const StatusMsg = styled.p` + font-size: 0.85rem; + color: ${({ theme }) => theme.text1}; + margin: 0; +` diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts new file mode 100644 index 0000000000..13d0939697 --- /dev/null +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/utils.ts @@ -0,0 +1,37 @@ +import { SupportedChainId } from 'constants/chains' + +const EXPECTED_EXECUTION_TIME_PERCENTAGE = 70 + +export const EXPECTED_EXECUTION_TIME: Record = { + [SupportedChainId.MAINNET]: 90, + [SupportedChainId.RINKEBY]: 15, + [SupportedChainId.XDAI]: 15, +} + +const LOG_FUNCTION = Math.log2 + +function getPercentageLogarithmicAux(seconds: number, expirationInSeconds: number) { + return (100 / LOG_FUNCTION(expirationInSeconds + 1)) * Math.log2(seconds + 1) +} + +function getPercentageLogarithmic(seconds: number, expirationInSeconds: number, chainId: SupportedChainId) { + const percentage = + ((100 - EXPECTED_EXECUTION_TIME_PERCENTAGE) / 100) * + getPercentageLogarithmicAux(seconds - EXPECTED_EXECUTION_TIME[chainId], expirationInSeconds) + return EXPECTED_EXECUTION_TIME_PERCENTAGE + percentage +} + +function getPercentageLinear(seconds: number, chainId: SupportedChainId) { + const percentage = (EXPECTED_EXECUTION_TIME_PERCENTAGE * seconds) / EXPECTED_EXECUTION_TIME[chainId] + return percentage +} + +export function getPercentage(seconds: number, expirationInSeconds: number, chainId: SupportedChainId) { + if (seconds >= expirationInSeconds) { + return 100 + } else if (seconds < EXPECTED_EXECUTION_TIME[chainId]) { + return getPercentageLinear(seconds, chainId) + } else { + return getPercentageLogarithmic(seconds, expirationInSeconds, chainId) + } +} diff --git a/src/custom/components/AccountDetails/Transaction/styled.ts b/src/custom/components/AccountDetails/Transaction/styled.ts index 59f55aface..163429ae88 100644 --- a/src/custom/components/AccountDetails/Transaction/styled.ts +++ b/src/custom/components/AccountDetails/Transaction/styled.ts @@ -5,8 +5,6 @@ import { TransactionState as OldTransactionState } from '../TransactionMod' import { RowFixed } from 'components/Row' import { transparentize } from 'polished' import { StyledLogo } from 'components/CurrencyLogo' -import { AlertTriangle, Clock } from 'react-feather' -import CowProtocolLogo from 'assets/cow-swap/cowprotocol.svg' export const TransactionWrapper = styled.div` width: 100%; @@ -441,120 +439,6 @@ export const TransactionInnerDetail = styled.div` } ` -export const ProgressBarWrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - width: 575px; - margin: 16px 0 8px 0; - overflow: hidden; - display: flex; - flex-flow: column wrap; - border-radius: 12px; - padding: 20px 20px 4px; - color: ${({ theme }) => theme.text1}; - background-color: ${({ theme }) => theme.bg4}; - - ${({ theme }) => theme.mediaWidth.upToSmall` - margin: 24px auto 12px; - width: 100%; - max-width: 100%; - grid-column: 1 / -1; - `}; -` -export const ProgressBarInnerWrapper = styled.div` - background-color: ${({ theme }) => theme.blue4}; - border-radius: 18px; - overflow: visible !important; - position: relative; -` - -export const ProgressBarIndicator = styled.div` - height: 18px; - background: rgb(233, 214, 37); - transform: translateX(0%); - border-radius: 12px; -` -export const CowProtocolIcon = styled.div` - position: absolute; - top: -4px; - right: 0px; - height: 24px; - width: 24px; - border-radius: 100%; - border: 1px solid ${({ theme }) => theme.bg4}; - background: url(${CowProtocolLogo}) ${({ theme }) => theme.black} no-repeat center/75%; - box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; -` - -export const WarningLogo = styled.div` - position: absolute; - top: -4px; - right: 0px; - height: 24px; - width: 24px; - border-radius: 100%; - background-color: ${({ theme }) => theme.white}; - 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; - } -` - -export const WarningProgress = styled(ProgressBarIndicator)` - background: linear-gradient(270deg, #de3f3f 2.17%, #ff784a 106.52%); ; -` - -export const SuccessProgress = styled(ProgressBarIndicator)` - background: linear-gradient(270deg, #27ae5f 16.85%, #b6a82d 106.52%); -` - -export const PendingProgress = styled(ProgressBarIndicator)` - background: linear-gradient(270deg, #b6a82d 16.85%, #ff784a 106.52%); -` - -export const GreenClockIcon = styled(Clock)` - margin: 0 0.5rem 0 0; - color: ${({ theme }) => theme.success}; -` - -export const OrangeClockIcon = styled(Clock)` - margin: 0 0.5rem 0 0; - color: ${({ theme }) => theme.yellow1}; -` - -export const WarningIcon = styled(AlertTriangle)` - margin: 0 0.5rem 0 0; - color: ${({ theme }) => theme.attention}; -` - -export const StatusMsgContainer = styled.div` - display: flex; - align-items: center; - margin: 1rem 0; - - ${({ theme }) => theme.mediaWidth.upToSmall` - gap: 0.2rem; - display: flex; - align-items: center; - - svg { - flex-shrink: 0; - } - `}; -` -export const StatusMsg = styled.p` - font-size: 0.85rem; - color: ${({ theme }) => theme.text1}; - margin: 0; -` - export const TextAlert = styled.div<{ isPending: boolean; isExpired: boolean; isCancelled: boolean }>` background: ${({ theme, isPending }) => isPending ? transparentize(0.85, theme.attention) : transparentize(0.85, theme.success)}; From 6fde192fe79c54313a745b1807bb4af7c47c144c Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 07:58:21 -0300 Subject: [PATCH 07/26] extract Cancel order button --- .../Transaction/ActivityDetails.tsx | 17 ++--------- .../Transaction/CancelButton.tsx | 29 +++++++++++++++++++ .../Transaction/OrderProgressBar/index.tsx | 26 +++++++++++------ .../Transaction/StatusDetails.tsx | 23 ++------------- 4 files changed, 51 insertions(+), 44 deletions(-) create mode 100644 src/custom/components/AccountDetails/Transaction/CancelButton.tsx diff --git a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx index e12a00cf22..133731257e 100644 --- a/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx +++ b/src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx @@ -146,18 +146,7 @@ export function ActivityDetails(props: { creationTime?: string | undefined }) { const { activityDerivedState, chainId, activityLinkUrl, disableMouseActions, creationTime } = props - const { - id, - isOrder, - summary, - order, - enhancedTransaction, - isCancelled, - isExpired, - isConfirmed, - isUnfillable, - isCancellable, - } = 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 +296,8 @@ export function ActivityDetails(props: { {order && creationTime && validTo && ( diff --git a/src/custom/components/AccountDetails/Transaction/CancelButton.tsx b/src/custom/components/AccountDetails/Transaction/CancelButton.tsx new file mode 100644 index 0000000000..42b3f1d0cf --- /dev/null +++ b/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 ( + <> + Cancel order{' '} + {showCancelModal && ( + + )} + + ) +} diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 4cb736bf1c..6e9fe29e22 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -17,20 +17,24 @@ import { } from './styled' import { AMMsLogo } from 'components/AMMsLogo' import { EXPECTED_EXECUTION_TIME, getPercentage } from './utils' -import { LinkStyledButton } from '@src/theme' import { SupportedChainId } from 'constants/chains' +import { ActivityDerivedState } from '../index' +import { CancelButton } from '../CancelButton' + +const COW_STATE_PERCENTAGE = 0.33 // 33% of the elapsed time based on the network's average is for the COW protocol +const AMM_STATE_PERCENTAGE = 0.66 // 66% of the elapsed time based on the network's average is for finding an onchain best price type OrderProgressBarProps = { + activityDerivedState: ActivityDerivedState creationTime: Date validTo: Date - isUnfillable?: boolean - isCancellable?: boolean - isConfirmed: boolean chainId: SupportedChainId } export function OrderProgressBar(props: OrderProgressBarProps) { - const { creationTime, validTo, isUnfillable = false, isCancellable = false, isConfirmed, chainId } = props + const { activityDerivedState, creationTime, validTo, chainId } = props + const { isConfirmed, isCancellable, isUnfillable = false } = activityDerivedState + const [percentage, setPercentage] = useState(1) const transitions = useTransition(!isConfirmed, null, { from: { opacity: 0 }, @@ -78,7 +82,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { ) } - if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * 0.33) { + if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * COW_STATE_PERCENTAGE) { return ( <> @@ -92,7 +96,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { ) - } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * 0.66) { + } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * AMM_STATE_PERCENTAGE) { return ( <> @@ -139,8 +143,12 @@ export function OrderProgressBar(props: OrderProgressBarProps) { - Your limit price is out of market. You can wait or - Cancel order + Your limit price is out of market.{' '} + {isCancellable ? ( + <> + You can wait or + + ) : null} diff --git a/src/custom/components/AccountDetails/Transaction/StatusDetails.tsx b/src/custom/components/AccountDetails/Transaction/StatusDetails.tsx index 6d1fb1214b..f421a460f6 100644 --- a/src/custom/components/AccountDetails/Transaction/StatusDetails.tsx +++ b/src/custom/components/AccountDetails/Transaction/StatusDetails.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react' import SVG from 'react-inlinesvg' -import { LinkStyledButton, ExternalLink } from 'theme' +import { ExternalLink } from 'theme' import OrderCheckImage from 'assets/cow-swap/order-check.svg' import OrderExpiredImage from 'assets/cow-swap/order-expired.svg' @@ -11,9 +10,9 @@ import OrderOpenImage from 'assets/cow-swap/order-open.svg' import { StatusLabel, StatusLabelWrapper, StatusLabelBelow } from './styled' import { ActivityDerivedState, determinePillColour } from './index' -import { CancellationModal } from './CancelationModal' import { getSafeWebUrl } from 'api/gnosisSafe' import { SafeMultisigTransactionResponse } from '@gnosis.pm/safe-service-client' +import { CancelButton } from './CancelButton' export function GnosisSafeLink(props: { chainId: number @@ -86,10 +85,8 @@ export function StatusDetails(props: { chainId: number; activityDerivedState: Ac const { activityDerivedState, chainId } = props const { - id, status, type, - summary, isPending, isCancelling, isPresignaturePending, @@ -100,11 +97,6 @@ export function StatusDetails(props: { chainId: number; activityDerivedState: Ac isCancellable, } = activityDerivedState - const [showCancelModal, setShowCancelModal] = useState(false) - - const onCancelClick = () => setShowCancelModal(true) - const onDismiss = () => setShowCancelModal(false) - return ( {/* Cancel order */} - Cancel order - {showCancelModal && ( - - )} + )} From c1fc6fc84849d191d05bd8819192743ba0f408ea Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 08:28:08 -0300 Subject: [PATCH 08/26] fix incorrect amm state percentage --- .../AccountDetails/Transaction/OrderProgressBar/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 6e9fe29e22..e2dd80bf5d 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -22,7 +22,6 @@ import { ActivityDerivedState } from '../index' import { CancelButton } from '../CancelButton' const COW_STATE_PERCENTAGE = 0.33 // 33% of the elapsed time based on the network's average is for the COW protocol -const AMM_STATE_PERCENTAGE = 0.66 // 66% of the elapsed time based on the network's average is for finding an onchain best price type OrderProgressBarProps = { activityDerivedState: ActivityDerivedState @@ -96,7 +95,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { ) - } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * AMM_STATE_PERCENTAGE) { + } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId]) { return ( <> From 500669fc0a64b7106b9e704225d1c9db7dd0c88d Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 11:44:06 -0300 Subject: [PATCH 09/26] improve state handling and hide progress bar when order is cancelled --- .../Transaction/OrderProgressBar/index.tsx | 192 ++++++++++-------- 1 file changed, 108 insertions(+), 84 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index e2dd80bf5d..a79117aa6e 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -30,14 +30,16 @@ type OrderProgressBarProps = { chainId: SupportedChainId } +type ExecutionState = 'cow' | 'amm' | 'confirmed' | 'unfillable' | 'delayed' + export function OrderProgressBar(props: OrderProgressBarProps) { const { activityDerivedState, creationTime, validTo, chainId } = props - const { isConfirmed, isCancellable, isUnfillable = false } = activityDerivedState + const { isConfirmed, isCancelled, isCancellable, isUnfillable = false } = activityDerivedState + const [executionState, setExecutionState] = useState('cow') const [percentage, setPercentage] = useState(1) - const transitions = useTransition(!isConfirmed, null, { - from: { opacity: 0 }, - enter: { opacity: 1 }, + const fadeOutTransition = useTransition(!isConfirmed, null, { + from: { opacity: 1 }, leave: { opacity: 0 }, trail: 3000, }) @@ -64,96 +66,118 @@ export function OrderProgressBar(props: OrderProgressBarProps) { } }, [isConfirmed]) - const progressBar = () => { + useEffect(() => { if (isConfirmed) { - return ( - <> - - - - - - - - Transaction confirmed. - - - ) - } - - if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * COW_STATE_PERCENTAGE) { - return ( - <> - - - - - - - - Looking for a CoW. - - - ) + setExecutionState('confirmed') + } else if (isUnfillable) { + setExecutionState('unfillable') + } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * COW_STATE_PERCENTAGE) { + setExecutionState('cow') } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId]) { - return ( - <> - - - - - - - - Finding best onchain price. - - - ) + setExecutionState('amm') } else { - return ( - <> - - - - - - - - Your order is taking longer than usual. - - - ) + setExecutionState('delayed') + } + }, [elapsedSeconds, isConfirmed, isUnfillable, chainId]) + + const progressBar = () => { + switch (executionState) { + case 'cow': { + return ( + <> + + + + + + + + Looking for a CoW. + + + ) + } + case 'amm': { + return ( + <> + + + + + + + + Finding best onchain price. + + + ) + } + case 'confirmed': { + return ( + <> + + + + + + + + Transaction confirmed. + + + ) + } + case 'unfillable': { + return ( + <> + + + + + + + + + Your limit price is out of market.{' '} + {isCancellable ? ( + <> + You can wait or + + ) : null} + + + + ) + } + case 'delayed': { + return ( + <> + + + + + + + + Your order is taking longer than usual. + + + ) + } + default: { + return null + } } } return ( <> - {transitions.map(({ item, props, key }) => { + {fadeOutTransition.map(({ item, props, key }) => { return ( - item && ( + item && + !isCancelled && ( - {isUnfillable ? ( - <> - - - - - - - - - Your limit price is out of market.{' '} - {isCancellable ? ( - <> - You can wait or - - ) : null} - - - - ) : ( - progressBar() - )} + {progressBar()} ) ) From 6c020661ef833112c9eb04742e438d5ae08a8023 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 11:54:02 -0300 Subject: [PATCH 10/26] hide progress bar for expired orders --- .../AccountDetails/Transaction/OrderProgressBar/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index a79117aa6e..66e5552b52 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -34,7 +34,7 @@ type ExecutionState = 'cow' | 'amm' | 'confirmed' | 'unfillable' | 'delayed' export function OrderProgressBar(props: OrderProgressBarProps) { const { activityDerivedState, creationTime, validTo, chainId } = props - const { isConfirmed, isCancelled, isCancellable, isUnfillable = false } = activityDerivedState + const { isConfirmed, isExpired, isCancelled, isCancellable, isUnfillable = false } = activityDerivedState const [executionState, setExecutionState] = useState('cow') const [percentage, setPercentage] = useState(1) @@ -175,7 +175,8 @@ export function OrderProgressBar(props: OrderProgressBarProps) { {fadeOutTransition.map(({ item, props, key }) => { return ( item && - !isCancelled && ( + !isCancelled && + !isExpired && ( {progressBar()} From 67fc088f19038ad644243298ba15cb36baaaa199 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 16:58:56 -0300 Subject: [PATCH 11/26] hide orders that are not pending --- .../Transaction/OrderProgressBar/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 66e5552b52..598b505434 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -34,11 +34,11 @@ type ExecutionState = 'cow' | 'amm' | 'confirmed' | 'unfillable' | 'delayed' export function OrderProgressBar(props: OrderProgressBarProps) { const { activityDerivedState, creationTime, validTo, chainId } = props - const { isConfirmed, isExpired, isCancelled, isCancellable, isUnfillable = false } = activityDerivedState + const { isConfirmed, isPending, isCancellable, isUnfillable = false } = activityDerivedState const [executionState, setExecutionState] = useState('cow') const [percentage, setPercentage] = useState(1) - const fadeOutTransition = useTransition(!isConfirmed, null, { + const fadeOutTransition = useTransition(isPending, null, { from: { opacity: 1 }, leave: { opacity: 0 }, trail: 3000, @@ -47,7 +47,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { const elapsedSeconds = (Date.now() - creationTime.getTime()) / 1000 useEffect(() => { - if (isConfirmed) { + if (!isPending) { return } @@ -58,7 +58,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { }, 1000) return () => clearInterval(id) - }, [creationTime, validTo, chainId, elapsedSeconds, isConfirmed]) + }, [creationTime, validTo, chainId, elapsedSeconds, isPending]) useEffect(() => { if (isConfirmed) { @@ -174,9 +174,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { <> {fadeOutTransition.map(({ item, props, key }) => { return ( - item && - !isCancelled && - !isExpired && ( + item && ( {progressBar()} From 3a85ee2ec3cc5b6606f4193404d79c5ec7c94b76 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 17:04:35 -0300 Subject: [PATCH 12/26] initialize progress bar with current percentage --- .../Transaction/OrderProgressBar/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 598b505434..cbcbf6880a 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -36,29 +36,29 @@ export function OrderProgressBar(props: OrderProgressBarProps) { const { activityDerivedState, creationTime, validTo, chainId } = props const { isConfirmed, isPending, isCancellable, isUnfillable = false } = activityDerivedState + const elapsedSeconds = (Date.now() - creationTime.getTime()) / 1000 + const expirationInSeconds = (validTo.getTime() - creationTime.getTime()) / 1000 + const [executionState, setExecutionState] = useState('cow') - const [percentage, setPercentage] = useState(1) + const [percentage, setPercentage] = useState(getPercentage(elapsedSeconds, expirationInSeconds, chainId)) const fadeOutTransition = useTransition(isPending, null, { from: { opacity: 1 }, leave: { opacity: 0 }, trail: 3000, }) - const elapsedSeconds = (Date.now() - creationTime.getTime()) / 1000 - useEffect(() => { if (!isPending) { return } const id = setInterval(() => { - const expirationInSeconds = (validTo.getTime() - creationTime.getTime()) / 1000 const percentage = getPercentage(elapsedSeconds, expirationInSeconds, chainId) setPercentage(percentage) }, 1000) return () => clearInterval(id) - }, [creationTime, validTo, chainId, elapsedSeconds, isPending]) + }, [creationTime, validTo, chainId, elapsedSeconds, expirationInSeconds, isPending]) useEffect(() => { if (isConfirmed) { From c8e523db37042daf2ab4826eece429e5bfb50973 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 26 Apr 2022 17:23:43 -0300 Subject: [PATCH 13/26] AMMs logos per network --- src/custom/components/AMMsLogo/index.tsx | 25 ++++++++++++++----- .../Transaction/OrderProgressBar/index.tsx | 2 +- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/custom/components/AMMsLogo/index.tsx b/src/custom/components/AMMsLogo/index.tsx index c65b855336..9d394de1f4 100644 --- a/src/custom/components/AMMsLogo/index.tsx +++ b/src/custom/components/AMMsLogo/index.tsx @@ -2,7 +2,8 @@ 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 Uniswap from 'assets/cow-swap/ammslogo/uniswap.png' +import { SupportedChainId } from 'constants/chains' export const Wrapper = styled.div` display: flex; @@ -55,13 +56,25 @@ export const Wrapper = styled.div` } ` -export function AMMsLogo() { +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 LogosPerNetwork: Record> = { + [SupportedChainId.MAINNET]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], + [SupportedChainId.RINKEBY]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], + [SupportedChainId.XDAI]: [SushiImage, OneInchImage, UniswapImage], +} + +export function AMMsLogo({ chainId }: { chainId: SupportedChainId }) { return ( - AMMs Sushiswap - AMMs 1inch - AMMs Paraswap - AMMs Uniswap + {LogosPerNetwork[chainId].map(({ src, alt }, index) => ( + {alt} + ))} ) } diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index cbcbf6880a..e852532a0e 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -102,7 +102,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { <> - + From dcf6e65b2591198deca6dec4ab3f3db823597e38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Wed, 27 Apr 2022 19:37:17 -0300 Subject: [PATCH 14/26] add GC AMMs logos --- src/custom/assets/cow-swap/ammslogo/baoswap.png | Bin 0 -> 1326 bytes .../assets/cow-swap/ammslogo/honeyswap.png | Bin 0 -> 946 bytes src/custom/assets/cow-swap/ammslogo/swapr.png | Bin 0 -> 1178 bytes src/custom/components/AMMsLogo/index.tsx | 8 +++++++- 4 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 src/custom/assets/cow-swap/ammslogo/baoswap.png create mode 100644 src/custom/assets/cow-swap/ammslogo/honeyswap.png create mode 100644 src/custom/assets/cow-swap/ammslogo/swapr.png diff --git a/src/custom/assets/cow-swap/ammslogo/baoswap.png b/src/custom/assets/cow-swap/ammslogo/baoswap.png new file mode 100644 index 0000000000000000000000000000000000000000..525be4839862b9498cc62bfcd90d1d273348f92a GIT binary patch literal 1326 zcmV+}1=0G6P)|HZGA{HS0WDa&H$U^Y z_#YJ)y8^-pO>UX9W<8<+g2jo!6Fh`!vZa>RZV!*3v*jX|?RG>bCnGs)3-rww@c7~9 zkfzH)h+IyOnRp&GniO6AYCO&#{8p70+_z>in{lJN2d~wAf}v}@$lkG2T$iy778b1d z^wirZtE|ArO|fd0MIFJ|pi0WA3CO?`IsDkKck0n|xgC#`K8-y^Prz=qB21xxKtg2* zni%%%KWJ0M5Uyo@@yj#GBd<=3NA+F1z%b; zV|Hp1W5c7Ok7Q)K$~fJZ>dRnZe4vSVi6M-SjN)pC9*16k1B%E5NR$6*4q>mJ2mVk#{uzh?m}Z7i(?WV8CAkH=$6e zkf_xnCLz&p-(k1m%(0_5Tz;H>4^OFF4h;)7q(nM&<<|~8dGr|8v)GgrWan*1Zb4xH zIJMBQaJ*Xk5x)QY%auh|Ue3x`wpdJadKyv0F(x5lT>_RAHrSqI>gZ^sZQX|9{u|;u zQCdDry7WQ%()CjtiEc0cukAbZEN))y5ua)Ivrk?3HOUpxe0}yASLa$;sHS(InkhEnx&)nVw82$;y>Ujo!tpXMTiIiA3)` z;VqVlXP6o(@}LCLH-Sv3CTc6ge=wr=PJv@yq%~i=$K1|lvEW7tBMwDRR)VMd kNrMV{xSaJ=iNP@b1yAGPB=`cj+W-In07*qoM6N<$f?pMCE&u=k literal 0 HcmV?d00001 diff --git a/src/custom/assets/cow-swap/ammslogo/honeyswap.png b/src/custom/assets/cow-swap/ammslogo/honeyswap.png new file mode 100644 index 0000000000000000000000000000000000000000..9505ec28131dc45f820e2f4347c5bf9a87bfa92a GIT binary patch literal 946 zcmV;j15NyiP)sF_ngkT>d@T1D)oc0!~MSV`qj~dT@#B0>yrxTCkJgvwsRslwc^`!D4fg{l+uQ! zH_-(|%!L64c;W5Bg-ciQdo+NtzyvNgTt`c58w|lvFF3_gf8=;5&`b!af(eFxjG(pc zF|snZpm=W~+=aW$+`;+0Qrf0NL_fWi4q^@H8~BJ=EQXRIHz!!#pJ$d!iCJQmGUQdA z)yOP*ef^Lm2?aZIvC+9<)je@*ypB+H;*D8KavNTHyK(c*ef%07)4yeBW}>F*6e`P) ziclB|h%gZ?JRSrL(o!2n|GR5=-#?JloS(A;2M^x>lw1P|_=Ny7Ji+u85cLtvz*5V= z(r+8u6(hsArs0`43Uz2R%wWrAI98z{LzayMh(FQ9I3kqcZ6u7Ih>D)BRE+eR3v6-Q z@$EnWCAKt_rrF_;mNkb-g};%1zEc9e*$7^TLzt#ix9-lJLtZp&DqzivK*YG0ALz^6 z9QJdOeKwnJV}$i7nx=K~)GK`zoeBEMnmIu zGC>pm12m>xv^utW#5$2vR!4@1-=Y!!2tHF97s&-yG?Imzh^e%`sm8;iL0d+iR6zIT zZ^F~JVYL~N@Mp{`%W}1d`QJ9vuC6~mLj|K+B>^c~GOKxUGV$wF9Eyh!*Q620A6&S8 U-`OHGC;$Ke07*qoM6N<$g6E5_!~g&Q literal 0 HcmV?d00001 diff --git a/src/custom/assets/cow-swap/ammslogo/swapr.png b/src/custom/assets/cow-swap/ammslogo/swapr.png new file mode 100644 index 0000000000000000000000000000000000000000..9bb9324966689400d35c295f4aab99ba173069e7 GIT binary patch literal 1178 zcmV;L1ZDe)P)Vhm{@F$0u2u%^3yh^Km1o735YL1lhTq}F!)Cs zg_>wUYeAAi6Myjd0ValsCK6ejur6R~)Us?d!eQk!5tRVKEdcjjQGh_RP{a_4@VBxo`!>T6shAc^rdxHUjS2wHq}xH7F=3Kz4REVzC$&mzFR+HHFE^arpg<$&LW^Yiq#` zEH&pgt7C-+tq-fkP7Mvs^yiHL-3o@a@$apOHV4%;|NH$nsFC-md-b|1mc?RmZ=}ZJ z=re4f_O=cR2Er7$Dbpt(_tLSWrQ~uxLe4#IDl4s^ix)qq)zuJr=YOZ%oIIlevRdt9 zdhZj2Z@={(t^6a?&p&zTnc|WpWp!lOc4~(9x^hy=)uEQTu%$?(sx?K}XD7?;bsKzo!t2Lg?@R;*O6T-srWfxO{mS`T6;<+Z~XYcmDi2 ztXJ*f!^JprrW4-zd5nx)jbkykTjDuWAJhH2AJ7z+mX{gKu5st)enIz#7w}l#<9K+F z3m!b%E}ioF)^my*h0?%G}JZ2=Uc#{-;Xz%-bHTi zzPJ{bDJTY(C0)9JnH!Z)?Ud^&>gZ_0%*+pQ&(%3Q`%(1tT);P12H@MMAK zZiNv}ym|^sOo7)smw?W?vw|;K8#~^Ldm_S1)wSq6*MsFh7E$utL4y?a(hiH%y_tH! z6NNZlR-IC&rmmu*1})9+BOH#R<;}*VYe5tqG6$IWT8|rhzi0me^nN-BlVsxhei{X*Sh%AqnM2B$O=J!&mV7sYYaF zIpghForx4}zPa)j-f6AJ)btoAu|@+5g$vaONZ+pOc+q7{MMj1lM@wFW+ntAp9?U{C z8o|oS-l-XHozM9v7espVbeH7v`m)&yJnPa*>BauCyG?@fmRFR srYP> = { [SupportedChainId.MAINNET]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], [SupportedChainId.RINKEBY]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], - [SupportedChainId.XDAI]: [SushiImage, OneInchImage, UniswapImage], + [SupportedChainId.XDAI]: [SushiImage, BoaswapImage, HoneyswapImage, SwaprImage], } export function AMMsLogo({ chainId }: { chainId: SupportedChainId }) { From 11f84ad4c6392feedcb57177b8dcb8e5d6cd4f6a Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Thu, 28 Apr 2022 07:25:23 -0300 Subject: [PATCH 15/26] fix bao logo reference --- src/custom/components/AMMsLogo/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/custom/components/AMMsLogo/index.tsx b/src/custom/components/AMMsLogo/index.tsx index 354713239b..e84510fe2a 100644 --- a/src/custom/components/AMMsLogo/index.tsx +++ b/src/custom/components/AMMsLogo/index.tsx @@ -3,7 +3,7 @@ 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 Boaswap from 'assets/cow-swap/ammslogo/boaswap.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' @@ -65,14 +65,14 @@ 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 BoaswapImage = { src: Boaswap, alt: 'AMMs Boaswap' } +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.MAINNET]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], [SupportedChainId.RINKEBY]: [SushiImage, OneInchImage, ParaswapImage, UniswapImage], - [SupportedChainId.XDAI]: [SushiImage, BoaswapImage, HoneyswapImage, SwaprImage], + [SupportedChainId.XDAI]: [SushiImage, BaoswapImage, HoneyswapImage, SwaprImage], } export function AMMsLogo({ chainId }: { chainId: SupportedChainId }) { From 74d9acf69f16b228927a387c91d182fc61ad4753 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 15:18:10 +0100 Subject: [PATCH 16/26] Update yarn lock --- yarn.lock | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 84 insertions(+), 6 deletions(-) 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" From 97871a7e4c951a1f41fa340a0948f23439dc733c Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 15:18:30 +0100 Subject: [PATCH 17/26] Incerease update speed and improve message --- .../Transaction/OrderProgressBar/index.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index e852532a0e..09fe693c09 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -21,6 +21,7 @@ import { SupportedChainId } from 'constants/chains' import { ActivityDerivedState } from '../index' import { CancelButton } from '../CancelButton' +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 +56,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]) @@ -158,8 +159,14 @@ export function OrderProgressBar(props: OrderProgressBarProps) { - - Your order is taking longer than usual. + +

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

+ {isCancellable ? ( +

+ You can wait or +

+ ) : null} + ) From f04c862705e3727e6943a204fdcd8fa4d88affe6 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 15:18:57 +0100 Subject: [PATCH 18/26] Add rotating clock --- .../Transaction/OrderProgressBar/styled.ts | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts index 818878cd7a..ce25ef9f96 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components/macro' +import styled, { keyframes } from 'styled-components/macro' import { animated } from 'react-spring' import { AlertTriangle, CheckCircle, Clock } from 'react-feather' import CowProtocolLogo from 'assets/cow-swap/cowprotocol.svg' @@ -53,6 +53,15 @@ export const CowProtocolIcon = styled.div` box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; ` +const rotate360 = keyframes` + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +` + export const WarningLogo = styled.div` position: absolute; top: -4px; @@ -62,14 +71,16 @@ export const WarningLogo = styled.div` border-radius: 100%; background-color: ${({ theme }) => theme.white}; box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; + animation: ${rotate360} 1.5s infinite linear; + transform: translateZ(0); :after { - content: '!'; + content: '⏱'; color: ${({ theme }) => theme.red1}; display: flex; justify-content: center; font-weight: bold; - font-size: 16px; - margin: 2px 0; + font-size: 14px; + margin: -2px 0; } ` From b93b31238cdee59ed6374a1d6b2e60961de5d017 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 15:20:26 +0100 Subject: [PATCH 19/26] Increase expected execution time --- .../AccountDetails/Transaction/OrderProgressBar/utils.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 From 49d5244d0f58443a6756077b3a3d1c10f1dedc92 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 16:21:28 +0100 Subject: [PATCH 20/26] Add nose picking icon --- .../Transaction/OrderProgressBar/index.tsx | 5 +- .../Transaction/OrderProgressBar/styled.ts | 66 ++++++++++++------- 2 files changed, 46 insertions(+), 25 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 09fe693c09..ea81f0724c 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -20,6 +20,7 @@ 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 @@ -155,7 +156,9 @@ export function OrderProgressBar(props: OrderProgressBarProps) { <> - + + Loading prices... + diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts index ce25ef9f96..c019f1fed3 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/styled.ts @@ -1,4 +1,4 @@ -import styled, { keyframes } from 'styled-components/macro' +import styled from 'styled-components/macro' import { animated } from 'react-spring' import { AlertTriangle, CheckCircle, Clock } from 'react-feather' import CowProtocolLogo from 'assets/cow-swap/cowprotocol.svg' @@ -53,34 +53,52 @@ export const CowProtocolIcon = styled.div` box-shadow: 0px 0px 10px 2px ${({ theme }) => theme.bg1}; ` -const rotate360 = keyframes` - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -` - 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}; - animation: ${rotate360} 1.5s infinite linear; - transform: translateZ(0); - :after { - content: '⏱'; - color: ${({ theme }) => theme.red1}; - display: flex; - justify-content: center; - font-weight: bold; - font-size: 14px; - 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; + } } ` From 2f04b2d0ec608c0a4539981fad7ffd5d09f00a27 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Fri, 20 May 2022 16:32:38 +0100 Subject: [PATCH 21/26] Remove plural --- .../AccountDetails/Transaction/OrderProgressBar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index ea81f0724c..64ddfbe3d3 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -163,7 +163,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { -

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

+

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

{isCancellable ? (

You can wait or From 9187e856d0e8bc7e4b6c3c7e4940e3d479a01cc3 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 31 May 2022 10:58:59 +0100 Subject: [PATCH 22/26] Change message --- .../AccountDetails/Transaction/OrderProgressBar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 64ddfbe3d3..14077f6a54 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -163,7 +163,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { -

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

+

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

{isCancellable ? (

You can wait or From 4f70ea6c0f4c2542848d494a8d298ba27d293e82 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Mon, 13 Jun 2022 07:55:35 -0300 Subject: [PATCH 23/26] make cow state always 30 seconds --- .../AccountDetails/Transaction/OrderProgressBar/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index 14077f6a54..a4e5bb2ad7 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -23,7 +23,7 @@ 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 +const COW_STATE_SECONDS = 30 type OrderProgressBarProps = { activityDerivedState: ActivityDerivedState @@ -73,7 +73,7 @@ export function OrderProgressBar(props: OrderProgressBarProps) { setExecutionState('confirmed') } else if (isUnfillable) { setExecutionState('unfillable') - } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId] * COW_STATE_PERCENTAGE) { + } else if (elapsedSeconds <= COW_STATE_SECONDS) { setExecutionState('cow') } else if (elapsedSeconds <= EXPECTED_EXECUTION_TIME[chainId]) { setExecutionState('amm') From 3a368673a352476d0e0015a0f59fec0af363dc24 Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 14 Jun 2022 07:27:44 -0300 Subject: [PATCH 24/26] use safe info to get better progress values --- .../Transaction/OrderProgressBar/index.tsx | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx index a4e5bb2ad7..3f81df6e9d 100644 --- a/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx +++ b/src/custom/components/AccountDetails/Transaction/OrderProgressBar/index.tsx @@ -36,11 +36,8 @@ type ExecutionState = 'cow' | 'amm' | 'confirmed' | 'unfillable' | 'delayed' export function OrderProgressBar(props: OrderProgressBarProps) { const { activityDerivedState, creationTime, validTo, chainId } = props - const { isConfirmed, isPending, isCancellable, isUnfillable = false } = activityDerivedState - - const elapsedSeconds = (Date.now() - creationTime.getTime()) / 1000 - const expirationInSeconds = (validTo.getTime() - creationTime.getTime()) / 1000 - + const { isConfirmed, isCancellable, isUnfillable = false } = activityDerivedState + const { elapsedSeconds, expirationInSeconds, isPending } = useGetProgressBarInfo(props) const [executionState, setExecutionState] = useState('cow') const [percentage, setPercentage] = useState(getPercentage(elapsedSeconds, expirationInSeconds, chainId)) const fadeOutTransition = useTransition(isPending, null, { @@ -194,3 +191,33 @@ export function OrderProgressBar(props: OrderProgressBarProps) { ) } + +type ProgressBarInfo = { + elapsedSeconds: number + expirationInSeconds: number + isPending: boolean +} + +function useGetProgressBarInfo({ + creationTime, + validTo, + activityDerivedState, +}: OrderProgressBarProps): ProgressBarInfo { + const { isPending: orderIsPending, isPresignaturePending, order } = activityDerivedState + + if (order?.presignGnosisSafeTx) { + const submissionDate = new Date(order?.presignGnosisSafeTx?.submissionDate) + + return { + elapsedSeconds: (Date.now() - submissionDate.getTime()) / 1000, + expirationInSeconds: (validTo.getTime() - submissionDate.getTime()) / 1000, + isPending: orderIsPending || isPresignaturePending, + } + } + + return { + elapsedSeconds: (Date.now() - creationTime.getTime()) / 1000, + expirationInSeconds: (validTo.getTime() - creationTime.getTime()) / 1000, + isPending: orderIsPending, + } +} From 17ffb82db052d99398f1614c298464c8c4559c0d Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 14 Jun 2022 07:38:21 -0300 Subject: [PATCH 25/26] Revert "Merge remote-tracking branch 'origin/fix-walletconnect-double-qr-code_updated' into ramirotw/issue-392-integrate-progress-bar" This reverts commit 0410fc03ac48e8f761139fcddca8f8f2a7068d51, reversing changes made to c8e523db37042daf2ab4826eece429e5bfb50973. --- package.json | 2 +- .../components/WalletModal/WalletModalMod.tsx | 13 +----- src/custom/hooks/useWalletInfo.ts | 13 +++--- src/custom/hooks/web3.ts | 37 +++++------------ src/custom/utils/signatures.ts | 10 +---- yarn.lock | 40 ++++++++++++------- 6 files changed, 44 insertions(+), 71 deletions(-) diff --git a/package.json b/package.json index a92bc06a64..3a3c12930f 100644 --- a/package.json +++ b/package.json @@ -254,7 +254,7 @@ "@web3-react/types": "8.0.7-beta.0", "@web3-react/url": "8.0.9-beta.0", "@web3-react/walletconnect": "8.0.15-beta.0", - "@web3-react/walletconnect-connector": "^7.0.2-alpha.0", + "@web3-react/walletconnect-connector": "6.2.4", "@web3-react/walletlink-connector": "^6.2.5", "ajv": "^6.12.3", "bnc-sdk": "^3.5.0", diff --git a/src/custom/components/WalletModal/WalletModalMod.tsx b/src/custom/components/WalletModal/WalletModalMod.tsx index 6fddc61de1..f63288d945 100644 --- a/src/custom/components/WalletModal/WalletModalMod.tsx +++ b/src/custom/components/WalletModal/WalletModalMod.tsx @@ -30,8 +30,6 @@ import PendingView from 'components/WalletModal/PendingView' // MOD imports import ModalMod from '@src/components/Modal' -import { SupportedChainId } from 'constants/chains' - export const CloseIcon = styled.div` position: absolute; right: 1rem; @@ -226,7 +224,7 @@ export default function WalletModal({ setWalletView(WALLET_VIEWS.PENDING) // if the connector is walletconnect and the user has already tried to connect, manually reset the connector - if (connector instanceof WalletConnectConnector) { + if (connector instanceof WalletConnectConnector && connector.walletConnectProvider?.wc?.uri) { connector.walletConnectProvider = undefined } @@ -236,15 +234,6 @@ export default function WalletModal({ // const walletAddress = await connector.getAccount() // logMonitoringEvent({ walletAddress }) // }) - .then(() => { - // Manually set the WalletConnectConnector http.connection.url to currently connected network url - // Fix for this https://github.com/gnosis/cowswap/issues/1930 - if (connector instanceof WalletConnectConnector) { - const { http, rpc, signer } = connector.walletConnectProvider - const chainId = signer.connection.chainId || SupportedChainId.MAINNET - http.connection.url = rpc.custom[chainId] - } - }) .catch((error) => { if (error instanceof UnsupportedChainIdError) { activate(connector) // a little janky...can't use setError because the connector isn't set diff --git a/src/custom/hooks/useWalletInfo.ts b/src/custom/hooks/useWalletInfo.ts index af53d97198..aa36a4c3fb 100644 --- a/src/custom/hooks/useWalletInfo.ts +++ b/src/custom/hooks/useWalletInfo.ts @@ -60,8 +60,7 @@ function checkIsSupportedWallet(params: { async function getWcPeerMetadata(connector: WalletConnectConnector): Promise<{ walletName?: string; icon?: string }> { const provider = (await connector.getProvider()) as WalletConnectProvider - // fix for this https://github.com/gnosis/cowswap/issues/1929 - const meta = provider.walletMeta || provider.signer.connection.wc.peerMeta + const meta = provider.walletMeta if (meta) { return { walletName: meta.name, @@ -97,10 +96,12 @@ export function useWalletInfo(): ConnectedWalletInfo { const walletType = getProviderType(connector) switch (walletType) { case WalletProvider.WALLET_CONNECT: - getWcPeerMetadata(connector as WalletConnectConnector).then(({ walletName, icon }) => { - setWalletName(walletName) - setIcon(icon) - }) + if (connector instanceof WalletConnectConnector) { + getWcPeerMetadata(connector).then(({ walletName, icon }) => { + setWalletName(walletName) + setIcon(icon) + }) + } break case WalletProvider.GNOSIS_SAFE: setWalletName(GNOSIS_SAFE_APP_NAME) diff --git a/src/custom/hooks/web3.ts b/src/custom/hooks/web3.ts index 145357a87e..abe7e4226e 100644 --- a/src/custom/hooks/web3.ts +++ b/src/custom/hooks/web3.ts @@ -9,9 +9,8 @@ import { isMobile } from 'utils/userAgent' // MOD imports import { STORAGE_KEY_LAST_PROVIDER, WAITING_TIME_RECONNECT_LAST_PROVIDER } from 'constants/index' import { AbstractConnector } from '@web3-react/abstract-connector' -import { WalletConnectConnector } from '@web3-react/walletconnect-connector' -// Exports from the original file +// exports from the original file export { useInactiveListener } from '@src/hooks/web3' export { default as useActiveWeb3React } from 'hooks/useActiveWeb3React' @@ -20,15 +19,16 @@ enum DefaultProvidersInjected { COINBASE_WALLET = WalletProvider.WALLET_LINK, } +// TODO: original from uniswap has gnosis-safe connection details, could be re-used export function useEagerConnect() { const { activate, active, connector } = useWeb3React() const [tried, setTried] = useState(false) - // GnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app; - // If we are not embedded in an iframe, it is not worth checking + // gnosisSafe.isSafeApp() races a timeout against postMessage, so it delays pageload if we are not in a safe app; + // if we are not embedded in an iframe, it is not worth checking const [triedSafe, setTriedSafe] = useState(!IS_IN_IFRAME) - // Handle setting/removing wallet provider in local storage + // handle setting/removing wallet provider in local storage const handleBeforeUnload = useCallback(() => { const walletType = getProviderType(connector) @@ -41,7 +41,7 @@ export function useEagerConnect() { const connectInjected = useCallback( (providerName = DefaultProvidersInjected.METAMASK) => { - // Check if our application is authorized/connected with Metamask + // check if the our application is authorized/connected with Metamask injected.isAuthorized().then((isAuthorized) => { if (isAuthorized) { setDefaultInjected(providerName) @@ -88,7 +88,7 @@ export function useEagerConnect() { if (!active) { const latestProvider = localStorage.getItem(STORAGE_KEY_LAST_PROVIDER) - // If there is no last saved provider set tried state to true + // if there is no last saved provider set tried state to true if (!latestProvider) { if (!triedSafe) { // First try to connect using Gnosis Safe @@ -130,29 +130,10 @@ export function useEagerConnect() { }, [active]) useEffect(() => { - // Check if current connector is of type WalletConnect - // Fix for this https://github.com/gnosis/cowswap/issues/1923 - if (connector instanceof WalletConnectConnector) { - const walletConnect = connector.walletConnectProvider.signer.connection.wc - - // Listen on disconnect events directly on WalletConnect client and close the connection - // Important in case the connection is closed from the wallet side after the page is refreshed - walletConnect.on('disconnect', (error: Error) => { - if (error) { - console.error('[WalletConnectConnector] Error during disconnect:', error) - } else { - connector.close() - localStorage.removeItem(STORAGE_KEY_LAST_PROVIDER) - } - }) - } - }, [connector]) - - useEffect(() => { - // Add beforeunload event listener on initial component mount + // add beforeunload event listener on initial component mount window.addEventListener('beforeunload', handleBeforeUnload) - // Remove beforeunload event listener on component unmount + // remove beforeunload event listener on component unmount return () => { window.removeEventListener('beforeunload', handleBeforeUnload) } diff --git a/src/custom/utils/signatures.ts b/src/custom/utils/signatures.ts index 6e27180e46..29fd6f7ab6 100644 --- a/src/custom/utils/signatures.ts +++ b/src/custom/utils/signatures.ts @@ -21,9 +21,6 @@ import { registerOnWindow } from 'utils/misc' // - https://www.jsonrpc.org/specification#error_object const METAMASK_SIGNATURE_ERROR_CODE = -32603 const METHOD_NOT_FOUND_ERROR_CODE = -32601 -// Added the following because of 1Inch walet who doesn't send the error code -// So we will check the actual error text -const METHOD_NOT_FOUND_ERROR_MSG_REGEX = /Method not found/i const V4_ERROR_MSG_REGEX = /eth_signTypedData_v4 does not exist/i const V3_ERROR_MSG_REGEX = /eth_signTypedData_v3 does not exist/i const RPC_REQUEST_FAILED_REGEX = /RPC request failed/i @@ -162,12 +159,7 @@ async function _signPayload( try { signature = (await signFn({ ...payload, signer: _signer, signingScheme })) as EcdsaSignature // Only ECDSA signing supported for now } catch (e) { - const regexErrorCheck = [METHOD_NOT_FOUND_ERROR_MSG_REGEX, RPC_REQUEST_FAILED_REGEX].some((regex) => - // for example 1Inch error doesn't have e.message so we will check the output of toString() - [e.message, e.toString()].some((msg) => regex.test(msg)) - ) - - if (e.code === METHOD_NOT_FOUND_ERROR_CODE || regexErrorCheck) { + if (e.code === METHOD_NOT_FOUND_ERROR_CODE || RPC_REQUEST_FAILED_REGEX.test(e.message)) { // Maybe the wallet returns the proper error code? We can only hope 🤞 // OR it failed with a generic message, there's no error code set, and we also hope it'll work // with other methods... diff --git a/yarn.lock b/yarn.lock index 97ef7c8d65..de09c2b9c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5760,16 +5760,16 @@ js-sha3 "0.8.0" query-string "6.13.5" -"@walletconnect/web3-provider@^1.6.6": - version "1.7.0" - resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.0.tgz#14d67a75555547205e9fd916a7142b1f951a143e" - integrity sha512-tX0nKVJAs1jrRmFAP8nv1h27ZttWQ/4pOW8hkH32JIB76zbsncdUOjHpnzpzgXrzMyrCzfeXeZ8dbdW4jS1KDw== - dependencies: - "@walletconnect/client" "^1.7.0" - "@walletconnect/http-connection" "^1.7.0" - "@walletconnect/qrcode-modal" "^1.7.0" - "@walletconnect/types" "^1.7.0" - "@walletconnect/utils" "^1.7.0" +"@walletconnect/web3-provider@^1.5.0", "@walletconnect/web3-provider@^1.6.6": + version "1.7.7" + resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.7.tgz#3d2f8d7a0fcdc118615283978c6a7c9f2a852b71" + integrity sha512-hUhDyaMu93e7e82OVCu3KnYOn6m6wQO9YObbhi3PexppCANe/Y9eDrw/37S+7jbjLIx5nS1et2JU+taKR7OSOw== + dependencies: + "@walletconnect/client" "^1.7.7" + "@walletconnect/http-connection" "^1.7.7" + "@walletconnect/qrcode-modal" "^1.7.7" + "@walletconnect/types" "^1.7.7" + "@walletconnect/utils" "^1.7.7" web3-provider-engine "16.0.1" "@walletconnect/window-getters@1.0.0", "@walletconnect/window-getters@^1.0.0": @@ -5883,12 +5883,12 @@ "@ethersproject/providers" "^5.5.1" "@web3-react/types" "^8.0.7-beta.0" -"@web3-react/walletconnect-connector@^7.0.2-alpha.0", "web3-react-walletconnect-connector@npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0": - version "7.0.2-alpha.0" - resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-7.0.2-alpha.0.tgz#dacd59db626b42137a1e4f34ea23ef1f04cc8b99" - integrity sha512-Qr+AecDt5/gbAb8sFfW5kbMo0nberCAU/6AB9KmmwCm2YGEEqJrj8fW3Kin7SGxv8pgDxgXwPYsW7qMUzayXEQ== +"@web3-react/walletconnect-connector@6.2.4": + version "6.2.4" + resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-6.2.4.tgz#0a128699fc93ddac885935f4aeca32925f6285f0" + integrity sha512-IEVjCXrlcfVa6ggUBEyKtLRaLQuZGtT2lGuzOFtdbJJkN84u1++pzzeDrcsVhKAoS5wq33zyJT9baEbG1Aed8g== dependencies: - "@walletconnect/ethereum-provider" "^1.5.4" + "@walletconnect/web3-provider" "^1.5.0" "@web3-react/abstract-connector" "^6.0.7" "@web3-react/types" "^6.0.7" tiny-invariant "^1.0.6" @@ -23854,6 +23854,16 @@ web3-providers-ws@1.7.1: tiny-invariant "^1.0.6" tiny-warning "^1.0.3" +"web3-react-walletconnect-connector@npm:@web3-react/walletconnect-connector@^7.0.2-alpha.0": + version "7.0.2-alpha.0" + resolved "https://registry.yarnpkg.com/@web3-react/walletconnect-connector/-/walletconnect-connector-7.0.2-alpha.0.tgz#dacd59db626b42137a1e4f34ea23ef1f04cc8b99" + integrity sha512-Qr+AecDt5/gbAb8sFfW5kbMo0nberCAU/6AB9KmmwCm2YGEEqJrj8fW3Kin7SGxv8pgDxgXwPYsW7qMUzayXEQ== + dependencies: + "@walletconnect/ethereum-provider" "^1.5.4" + "@web3-react/abstract-connector" "^6.0.7" + "@web3-react/types" "^6.0.7" + tiny-invariant "^1.0.6" + web3-shh@1.7.1: version "1.7.1" resolved "https://registry.yarnpkg.com/web3-shh/-/web3-shh-1.7.1.tgz#c6a0fc67321dd585085e3e3be8f2c1c8d61636ef" From 66175e965abf129604929d4b9ba53f612549debb Mon Sep 17 00:00:00 2001 From: Ramiro Vazquez Date: Tue, 14 Jun 2022 07:41:01 -0300 Subject: [PATCH 26/26] update lock from reverted merge --- yarn.lock | 83 ++++++++++++------------------------------------------- 1 file changed, 17 insertions(+), 66 deletions(-) diff --git a/yarn.lock b/yarn.lock index de09c2b9c6..fb5106056e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5515,16 +5515,6 @@ "@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" @@ -5544,15 +5534,6 @@ "@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" @@ -5591,7 +5572,7 @@ eip1193-provider "1.0.1" eventemitter3 "4.0.7" -"@walletconnect/http-connection@^1.7.0": +"@walletconnect/http-connection@^1.7.7": version "1.7.8" resolved "https://registry.yarnpkg.com/@walletconnect/http-connection/-/http-connection-1.7.8.tgz#98bcc726c29751ddc791ff151742aa712bf679a7" integrity sha512-31gjBw46MRU9hFMTNXAqh+f8qpDNzVeV9BJehzVWKiNC3ciL1JCZkbvsY0djwajduE6TB2ujaML0XDXS9HgBRA== @@ -5610,15 +5591,6 @@ "@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" @@ -5656,18 +5628,6 @@ 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" @@ -5715,37 +5675,15 @@ "@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": +"@walletconnect/types@^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" + resolved "https://registry.yarnpkg.com/@walletconnect/types/-/types-1.7.8.tgz#ec397e6fbdc8147bccc17029edfeb41c50a5ca09" + integrity sha512-0oSZhKIrtXRJVP1jQ0EDTRtotQY6kggGjDcmm/LLQBKnOZXdPeo0sPkV/7DjT5plT3O7Cjc6JvuXt9WOY0hlCA== "@walletconnect/utils@^1.7.1", "@walletconnect/utils@^1.7.7": version "1.7.7" @@ -5760,6 +5698,19 @@ js-sha3 "0.8.0" query-string "6.13.5" +"@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/web3-provider@^1.5.0", "@walletconnect/web3-provider@^1.6.6": version "1.7.7" resolved "https://registry.yarnpkg.com/@walletconnect/web3-provider/-/web3-provider-1.7.7.tgz#3d2f8d7a0fcdc118615283978c6a7c9f2a852b71"