Merge remote-tracking branch 'origin/master' into develop

package.json

@@ -3,7 +3,7 @@
   "description": "CowSwap - Gnosis Protocol",
   "homepage": ".",
   "private": true,
-  "version": "1.1.5",
+  "version": "1.2.0-rc.1",
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@craco/craco": "^5.7.0",
@@ -48,13 +48,14 @@
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
     "@uniswap/sdk": "npm:@anxolin/uniswap-sdk#3.0.3-rc.3",
-    "@uniswap/token-lists": "^1.0.0-beta.19",
+    "@uniswap/token-lists": "^1.0.0-beta.25",
+    "@uniswap/sdk-core": "^3.0.1",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^3.0.0-alpha.2",
     "@uniswap/v3-core": "1.0.0",
-    "@uniswap/v3-periphery": "1.0.0",
-    "@uniswap/v3-sdk": "^3.0.0-alpha.9",
+    "@uniswap/v3-periphery": "^1.1.1",
+    "@uniswap/v3-sdk": "^3.3.0",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",

src/custom/api/gnosisProtocol/errors/QuoteError.ts

@@ -11,13 +11,15 @@ export enum GpQuoteErrorCodes {
   UnsupportedToken = 'UnsupportedToken',
   InsufficientLiquidity = 'InsufficientLiquidity',
   FeeExceedsFrom = 'FeeExceedsFrom',
+  ZeroPrice = 'ZeroPrice',
   UNHANDLED_ERROR = 'UNHANDLED_ERROR',
 }
 
 export enum GpQuoteErrorDetails {
   UnsupportedToken = 'One of the tokens you are trading is unsupported. Please read the FAQ for more info.',
   InsufficientLiquidity = 'Token pair selected has insufficient liquidity',
   FeeExceedsFrom = 'Current fee exceeds entered "from" amount',
+  ZeroPrice = 'Quoted price is zero. This is likely due to a significant price difference between the two tokens. Please try increasing amounts.',
   UNHANDLED_ERROR = 'Quote fetch failed. This may be due to a server or network connectivity issue. Please try again later.',
 }
 

src/custom/components/Header/index.tsx

@@ -171,7 +171,7 @@ export default function Header() {
         </Title>
         <HeaderLinks>
           <StyledNavLink to="/swap">Swap</StyledNavLink>
-          <StyledNavLink to="/profile">Profile</StyledNavLink>
+          <StyledNavLink to="/about">About</StyledNavLink>
         </HeaderLinks>
       </HeaderRow>
       <HeaderControls>

src/custom/components/HighFeeWarning/index.tsx

@@ -29,10 +29,9 @@ const HighFeeWarningContainer = styled(AuxInformationContainer).attrs((props) =>
   ...props,
   hideInput: true,
 }))<HighFeeContainerProps>`
-  &&&&& {
-    background: ${({ theme, bgColour }) => bgColour || theme.info};
-    color: ${({ theme, textColour }) => textColour || theme.infoText};
-  }
+  background: ${({ theme, bgColour }) => bgColour || theme.info};
+  color: ${({ theme, textColour }) => textColour || theme.infoText};
+
   padding: ${({ padding = '5px 12px' }) => padding};
   width: ${({ width = '100%' }) => width};
   border-radius: ${({ theme }) => theme.buttonPrimary.borderRadius};
@@ -108,6 +107,7 @@ const HighFeeWarningMessage = ({ feePercentage }: { feePercentage?: Fraction })
 export type HighFeeWarningProps = {
   trade?: TradeGp
   acceptedStatus?: boolean
+  className?: string
   acceptWarningCb?: () => void
 } & HighFeeContainerProps
 

src/custom/components/Menu/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Code, MessageCircle, HelpCircle, FileText, BookOpen, PieChart } from 'react-feather'
+import { Code, MessageCircle, HelpCircle, BookOpen, PieChart } from 'react-feather'
 
 import MenuMod, { MenuItem, InternalMenuItem, MenuFlyout as MenuFlyoutUni } from './MenuMod'
 import { useCloseModals } from 'state/application/hooks'
@@ -147,12 +147,6 @@ export function Menu() {
     <StyledMenu>
       <MenuFlyout>
         <CloseMenu onClick={close} />
-        <InternalMenuItem to="/about" onClick={close}>
-          <span aria-hidden="true" onClick={close} onKeyDown={close}>
-            <FileText size={14} />
-            About
-          </span>
-        </InternalMenuItem>
         <InternalMenuItem to="/faq" onClick={close}>
           <HelpCircle size={14} />
           FAQ

src/custom/components/swap/SwapModalHeader/index.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components'
 import { LightCard as LightCardUni } from 'components/Card'
 import { darken, transparentize } from 'polished'
 import { AuxInformationContainer } from 'components/CurrencyInputPanel'
-import { HighFeeWarning } from 'components/HighFeeWarning'
+import { HighFeeWarning as HighFeeWarningBase } from 'components/HighFeeWarning'
 
 const LightCard = styled(LightCardUni)<{ flatBorder?: boolean }>`
   background-color: ${({ theme }) => darken(0.06, theme.bg1)};
@@ -16,6 +16,9 @@ const LightCard = styled(LightCardUni)<{ flatBorder?: boolean }>`
 
 export type LightCardType = typeof LightCard
 
+// targettable by styled injection
+const HighFeeWarning = styled(HighFeeWarningBase)``
+
 const Wrapper = styled.div`
   ${({ theme }) => theme.mediaWidth.upToSmall`
     margin: 32px auto 0;
@@ -25,11 +28,11 @@ const Wrapper = styled.div`
     stroke: ${({ theme }) => theme.text1};
   }
 
-  ${AutoColumn} > div > div {
+  ${AutoColumn} > div:not(${HighFeeWarning}) > div {
     color: ${({ theme }) => theme.text1};
   }
 
-  ${AuxInformationContainer} {
+  ${AuxInformationContainer}:not(${HighFeeWarning}) {
     background-color: ${({ theme }) => theme.bg3};
     border: 2px solid ${({ theme }) => transparentize(0.5, theme.bg0)};
     border-top: 0;

src/custom/hooks/useRefetchPriceCallback.tsx

@@ -2,7 +2,11 @@ import { useCallback } from 'react'
 
 import { FeeQuoteParams, getBestQuote, QuoteParams, QuoteResult } from 'utils/price'
 import { isValidOperatorError, ApiErrorCodes } from 'api/gnosisProtocol/errors/OperatorError'
-import { GpQuoteErrorCodes, isValidQuoteError } from 'api/gnosisProtocol/errors/QuoteError'
+import GpQuoteError, {
+  GpQuoteErrorCodes,
+  GpQuoteErrorDetails,
+  isValidQuoteError,
+} from 'api/gnosisProtocol/errors/QuoteError'
 import { registerOnWindow, getPromiseFulfilledValue, isPromiseFulfilled } from 'utils/misc'
 
 import { isOnline } from 'hooks/useIsOnline'
@@ -58,6 +62,10 @@ export function handleQuoteError({ quoteData, error, addUnsupportedToken }: Hand
         return 'fee-exceeds-sell-amount'
       }
 
+      case GpQuoteErrorCodes.ZeroPrice: {
+        return 'zero-price'
+      }
+
       case GpQuoteErrorCodes.InsufficientLiquidity: {
         console.error(`Insufficient liquidity ${error.message}: ${error.description}`)
         return 'insufficient-liquidity'
@@ -157,6 +165,14 @@ export function useRefetchQuoteCallback() {
           throw price.reason
         }
 
+        // we need to check if returned price is 0 - this is rare but can occur e.g DAI <> WBTC where price diff is huge
+        // TODO: check if this should be handled differently by backend - maybe we return a new error like "ZERO_PRICE"
+        if (price.value.amount === '0')
+          throw new GpQuoteError({
+            errorType: GpQuoteErrorCodes.ZeroPrice,
+            description: GpQuoteErrorDetails.ZeroPrice,
+          })
+
         const previouslyUnsupportedToken = isUnsupportedTokenGp(sellToken) || isUnsupportedTokenGp(buyToken)
         // can be a previously unsupported token which is now valid
         // so we check against map and remove it

src/custom/pages/Swap/SwapMod.tsx

@@ -743,6 +743,13 @@ export default function Swap({
                 </TYPE.main>
                 {/* {singleHopOnly && <TYPE.main mb="4px">Try enabling multi-hop trades.</TYPE.main>} */}
               </GreyCard>
+            ) : quote?.error === 'zero-price' ? (
+              <GreyCard style={{ textAlign: 'center' }}>
+                <TYPE.main mb="4px">
+                  <Trans>Invalid price. Try increasing input/output amount.</Trans>
+                </TYPE.main>
+                {/* {singleHopOnly && <TYPE.main mb="4px">Try enabling multi-hop trades.</TYPE.main>} */}
+              </GreyCard>
             ) : quote?.error === 'fetch-quote-error' ? (
               <GreyCard style={{ textAlign: 'center' }}>
                 <TYPE.main mb="4px">

src/custom/state/gas/reducer.ts

@@ -13,7 +13,11 @@ export default createReducer(initialState, (builder) =>
     const { chainId, ...rest } = action.payload
 
     if (chainId) {
-      state[chainId] = rest
+      state[chainId] = {
+        ...rest,
+        // We don't use the last update of the endpoint, we use the one of the client time
+        lastUpdate: new Date().toISOString(),
+      }
     }
   })
 )

src/custom/state/price/actions.ts

@@ -19,6 +19,7 @@ export type QuoteError =
   | 'fee-exceeds-sell-amount'
   | 'unsupported-token'
   | 'offline-browser'
+  | 'zero-price'
 
 export type SetQuoteErrorParams = UpdateQuoteParams & { error?: QuoteError }
 

src/custom/utils/format.ts

@@ -147,7 +147,6 @@ export function formatSmart(
  *   Token decimals: `10`; value: `412310.0014123`
  *   => `412310.0014123000`
  *
- *
  * @param value
  * @param decimals
  */
@@ -162,3 +161,15 @@ export function formatMax(value?: Fraction, decimals?: number): string | undefin
   }
   return amount
 }
+
+/**
+ * Truncated given `value` on `decimals`.
+ * E.g.: value=10.001; decimals=2 => 10.00
+ *
+ * @param value
+ * @param decimals
+ */
+export function truncateOnMaxDecimals(value: string, decimals: number): string {
+  const regex = new RegExp(`(\\d*\\.\\d{${decimals}})\\d*`)
+  return value.replace(regex, '$1')
+}

src/state/swap/hooks.ts

@@ -21,6 +21,7 @@ import { Field, replaceSwapState, selectCurrency, setRecipient, switchCurrencies
 import { SwapState } from './reducer'
 import { useUserSingleHopOnly } from 'state/user/hooks'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { truncateOnMaxDecimals } from 'utils/format'
 
 export function useSwapState(): AppState['swap'] {
   return useAppSelector((state) => state.swap)
@@ -77,7 +78,9 @@ export function tryParseAmount<T extends Currency>(value?: string, currency?: T)
     return undefined
   }
   try {
-    const typedValueParsed = parseUnits(value, currency.decimals).toString()
+    // Here we drop everything after given token decimals to avoid parsing issues
+    const truncatedValue = currency.decimals ? truncateOnMaxDecimals(value, currency.decimals) : value
+    const typedValueParsed = parseUnits(truncatedValue, currency.decimals).toString()
     if (typedValueParsed !== '0') {
       return CurrencyAmount.fromRawAmount(currency, JSBI.BigInt(typedValueParsed))
     }