Hotfix/1.10.1 - Enable claiming in prod

src/custom/api/gnosisProtocol/api.ts

@@ -1,26 +1,25 @@
 import { SupportedChainId as ChainId, SupportedChainId } from 'constants/chains'
 import { OrderKind, QuoteQuery } from '@gnosis.pm/gp-v2-contracts'
 import { stringify } from 'qs'
-import { getSigningSchemeApiValue, OrderCreation, OrderCancellation, SigningSchemeValue } from 'utils/signatures'
-import { APP_DATA_HASH } from 'constants/index'
+import { getSigningSchemeApiValue, OrderCancellation, OrderCreation, SigningSchemeValue } from 'utils/signatures'
+import { APP_DATA_HASH, GAS_FEE_ENDPOINTS } from 'constants/index'
 import { registerOnWindow } from 'utils/misc'
-import { isLocal, isDev, isPr, isBarn } from '../../utils/environments'
+import { isBarn, isDev, isLocal, isPr } from '../../utils/environments'
 import OperatorError, {
   ApiErrorCodeDetails,
   ApiErrorCodes,
   ApiErrorObject,
 } from 'api/gnosisProtocol/errors/OperatorError'
 import QuoteError, {
   GpQuoteErrorCodes,
+  GpQuoteErrorDetails,
   GpQuoteErrorObject,
   mapOperatorErrorToQuoteError,
-  GpQuoteErrorDetails,
 } from 'api/gnosisProtocol/errors/QuoteError'
 import { toErc20Address } from 'utils/tokens'
 import { FeeQuoteParams, PriceInformation, PriceQuoteParams, SimpleGetQuoteResponse } from 'utils/price'
 
 import { DEFAULT_NETWORK_FOR_LISTS } from 'constants/lists'
-import { GAS_FEE_ENDPOINTS } from 'constants/index'
 import * as Sentry from '@sentry/browser'
 import { ZERO_ADDRESS } from 'constants/misc'
 import { getAppDataHash } from 'constants/appDataHash'
@@ -472,18 +471,42 @@ export async function getPriceStrategy(chainId: ChainId): Promise<PriceStrategy>
   }
 }
 
+// Reference https://www.xdaichain.com/for-developers/developer-resources/gas-price-oracle
+export interface GChainFeeEndpointResponse {
+  average: number
+  fast: number
+  slow: number
+}
+// Values are returned as floats in gwei
+const ONE_GWEI = 1_000_000_000
+
 export interface GasFeeEndpointResponse {
   lastUpdate: string
   lowest: string
-  safeLow: string
+  safeLow?: string
   standard: string
   fast: string
-  fastest: string
+  fastest?: string
 }
 
 export async function getGasPrices(chainId: ChainId = DEFAULT_NETWORK_FOR_LISTS): Promise<GasFeeEndpointResponse> {
   const response = await fetch(GAS_FEE_ENDPOINTS[chainId])
-  return response.json()
+  const json = await response.json()
+
+  if (chainId === SupportedChainId.XDAI) {
+    // Different endpoint for GChain with a different format. Need to transform it
+    return _transformGChainGasPrices(json)
+  }
+  return json
+}
+
+function _transformGChainGasPrices({ slow, average, fast }: GChainFeeEndpointResponse): GasFeeEndpointResponse {
+  return {
+    lastUpdate: new Date().toISOString(),
+    lowest: Math.floor(slow * ONE_GWEI).toString(),
+    standard: Math.floor(average * ONE_GWEI).toString(),
+    fast: Math.floor(fast * ONE_GWEI).toString(),
+  }
 }
 
 // Register some globals for convenience

src/custom/components/AccountDetails/Transaction/styled.ts

@@ -481,13 +481,14 @@ export const ActivityVisual = styled.div`
     padding: 2px;
     box-sizing: content-box;
     box-shadow: none;
-    background: ${({ theme }) => theme.card.background2};
+    background: ${({ theme }) => theme.transaction.tokenBackground};
     color: ${({ theme }) =>
-      theme.text1}!important; // Todo: Re-factor StyledLogo to prevent inline style and needing to use !important here
+      theme.transaction.tokenColor}!important; // TODO: Fix MOD file to not require this !important property value.
+    border: 2px solid ${({ theme }) => theme.transaction.tokenBorder};
   }
 
   ${StyledLogo}:not(:first-child):last-child {
-    margin: 0 0 0 -8px;
+    margin: 0 0 0 -9px;
   }
 
   &:hover ${StyledLogo} {

src/custom/components/CowClaimButton/index.tsx

@@ -26,41 +26,53 @@ export const Wrapper = styled.div<{ isClaimPage?: boolean | null }>`
     font-weight: inherit;
     white-space: nowrap;
 
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    left: -1px;
-    top: -1px;
-    background: ${({ theme }) =>
-      `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
-    background-size: 800%;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-    z-index: -1;
-    animation: glow 50s linear infinite;
-    transition: background-position 0.3s ease-in-out;
-    border-radius: 12px;
-  }
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      overflow: hidden;
+      max-width: 100px;
+      text-overflow: ellipsis;
+    `};
 
-  &::after {
-    filter: blur(8px);
-  }
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      overflow: visible;
+      max-width: initial;
+    `};
 
-  &:hover::before,
-  &:hover::after {
-    animation: glow 12s linear infinite;
-  }
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      background: ${({ theme }) =>
+        `linear-gradient(45deg, ${theme.primary1}, ${theme.primary2}, ${theme.primary3}, ${theme.bg4}, ${theme.primary1}, ${theme.primary2})`};
+      background-size: 800%;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      z-index: -1;
+      animation: glow 50s linear infinite;
+      transition: background-position 0.3s ease-in-out;
+      border-radius: 12px;
+    }
 
-  // Stop glowing effect on claim page
-  ${({ isClaimPage }) =>
-    isClaimPage &&
-    css`
-      &::before,
-      &::after {
-        content: none;
-      }
-    `};
+    &::after {
+      filter: blur(8px);
+    }
+
+    &:hover::before,
+    &:hover::after {
+      animation: glow 12s linear infinite;
+    }
+
+    // Stop glowing effect on claim page
+    ${({ isClaimPage }) =>
+      isClaimPage &&
+      css`
+        &::before,
+        &::after {
+          content: none;
+        }
+      `};
+  }
 
   @keyframes glow {
     0% {

src/custom/components/Header/index.tsx

@@ -4,8 +4,8 @@ import { SupportedChainId as ChainId } from 'constants/chains'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import HeaderMod, {
-  Title,
-  HeaderLinks,
+  Title as TitleMod,
+  HeaderLinks as HeaderLinksMod,
   HeaderRow,
   HeaderControls as HeaderControlsUni,
   BalanceText as BalanceTextUni,
@@ -80,6 +80,12 @@ const StyledNavLink = styled(StyledNavLinkUni)`
 `
 
 const BalanceText = styled(BalanceTextUni)`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    overflow: hidden;
+    max-width: 100px;
+    text-overflow: ellipsis;
+  `};
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: none;
   `};
@@ -133,16 +139,20 @@ export const Wrapper = styled.div`
   }
 `
 
-export const HeaderModWrapper = styled(HeaderMod)`
-  ${Title} {
-    margin: 0;
-    text-decoration: none;
-    color: ${({ theme }) => theme.text1};
-  }
+export const HeaderModWrapper = styled(HeaderMod)``
 
-  ${HeaderLinks} {
-    margin: 5px 0 0 0;
-  }
+const Title = styled(TitleMod)`
+  margin: 0;
+  text-decoration: none;
+  color: ${({ theme }) => theme.text1};
+`
+
+export const HeaderLinks = styled(HeaderLinksMod)`
+  margin: 5px 0 0 0;
+
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    display: none;
+  `};
 `
 
 export const TwitterLink = styled(StyledMenuButton)`

src/custom/components/Menu/index.tsx

@@ -31,7 +31,7 @@ export * from './MenuMod'
 const ResponsiveInternalMenuItem = styled(InternalMenuItem)`
   display: none;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
+  ${({ theme }) => theme.mediaWidth.upToLarge`
       display: flex;
   `};
 `

src/custom/components/WalletModal/WalletModalMod.tsx

@@ -334,7 +334,7 @@ export default function WalletModal({
           <ContentWrapper>
             {error instanceof UnsupportedChainIdError ? (
               <h5>
-                <Trans>Please connect to the appropriate Ethereum network.</Trans>
+                <Trans>Please connect to the appropriate network.</Trans>
               </h5>
             ) : (
               <Trans>Error connecting. Try refreshing the page.</Trans>

src/custom/constants/index.ts

@@ -51,9 +51,9 @@ export const GP_VAULT_RELAYER: Partial<Record<number, string>> = {
 }
 
 export const V_COW_CONTRACT_ADDRESS: Record<number, string> = {
-  [ChainId.MAINNET]: '0x6d04B3ad33594978D0D4B01CdB7c3bA4a90a7DFe',
-  [ChainId.XDAI]: '0xA3A674a40709A837A5E742C2866eda7d3b35a7c0',
-  [ChainId.RINKEBY]: '0xD7Dd9397Fb942565959c77f8e112ec5aa7D8C92c',
+  [ChainId.MAINNET]: '0xd057b63f5e69cf1b929b356b579cba08d7688048',
+  [ChainId.XDAI]: '0xc20C9C13E853fc64d054b73fF21d3636B2d97eaB',
+  [ChainId.RINKEBY]: '0x5Bf4d1f8d1cB35E0aeA69B220beb97b8807504eA',
 }
 
 // See https://github.com/gnosis/gp-v2-contracts/commit/821b5a8da213297b0f7f1d8b17c893c5627020af#diff-12bbbe13cd5cf42d639e34a39d8795021ba40d3ee1e1a8282df652eb161a11d6R13
@@ -98,8 +98,7 @@ export const GAS_FEE_ENDPOINTS = {
   // [ChainId.GOERLI]: 'https://safe-relay.goerli.gnosis.io/api/v1/gas-station/',
   // no kovan = main
   // [ChainId.KOVAN]: 'https://safe-relay.kovan.gnosis.io/api/v1/gas-station/',
-  // TODO: xdai? = main
-  [ChainId.XDAI]: 'https://safe-relay.gnosis.io/api/v1/gas-station/',
+  [ChainId.XDAI]: 'https://blockscout.com/xdai/mainnet/api/v1/gas-price-oracle',
 }
 
 export const UNSUPPORTED_TOKENS_FAQ_URL = '/faq#what-token-pairs-does-cowswap-allow-to-trade'

src/custom/pages/Claim/CanUserClaimMessage.tsx

@@ -2,21 +2,30 @@ import { Trans } from '@lingui/macro'
 import { ButtonSecondary } from 'components/Button'
 import { IntroDescription, BannerExplainer } from './styled'
 import { ClaimCommonTypes } from './types'
-import { useClaimState, useClaimTimeInfo } from 'state/claim/hooks'
+import { useClaimState, useClaimTimeInfo, useClaimLinks } from 'state/claim/hooks'
 import { ClaimStatus } from 'state/claim/actions'
 import { formatDateWithTimezone } from 'utils/time'
 import useNetworkName from 'hooks/useNetworkName'
 import { ExternalLink } from 'theme/index'
-import { COW_LINKS } from '.'
 import SVG from 'react-inlinesvg'
 import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 
-type ClaimIntroductionProps = Pick<ClaimCommonTypes, 'hasClaims' | 'handleChangeAccount' | 'isAirdropOnly'>
+type ClaimIntroductionProps = Pick<
+  ClaimCommonTypes,
+  'hasClaims' | 'isClaimed' | 'handleChangeAccount' | 'isAirdropOnly'
+>
 
-export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleChangeAccount }: ClaimIntroductionProps) {
+export default function CanUserClaimMessage({
+  hasClaims,
+  isClaimed,
+  isAirdropOnly,
+  handleChangeAccount,
+}: ClaimIntroductionProps) {
   const { activeClaimAccount, claimStatus } = useClaimState()
   const network = useNetworkName()
 
+  const claimLinks = useClaimLinks()
+
   const { airdropDeadline } = useClaimTimeInfo()
 
   // only show when active claim account
@@ -34,7 +43,7 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
             </Trans>
           </p>
         </IntroDescription>
-        <ExternalLink href={COW_LINKS.vCowPost}>
+        <ExternalLink href={claimLinks.vCowPost}>
           <BannerExplainer>
             <SVG src={CowProtocolImage} description="Questions? Read More." />
             <span>
@@ -47,11 +56,17 @@ export default function CanUserClaimMessage({ hasClaims, isAirdropOnly, handleCh
     )
   }
 
-  if (!hasClaims) {
+  if (!hasClaims || isClaimed) {
     return (
       <IntroDescription center>
         <Trans>
-          Unfortunately this account is not eligible for any vCOW claims in {network}. <br />
+          {isClaimed ? (
+            ''
+          ) : (
+            <>
+              Unfortunately this account is not eligible for any vCOW claims in {network}. <br />
+            </>
+          )}
           <ButtonSecondary onClick={handleChangeAccount} padding="0">
             Try another account
           </ButtonSecondary>{' '}

src/custom/pages/Claim/ClaimBanner.tsx

@@ -0,0 +1,33 @@
+import { Trans } from '@lingui/macro'
+import { useClaimState } from 'state/claim/hooks'
+import { ClaimBanner as ClaimBannerWrapper } from './styled'
+import CheckCircle from 'assets/cow-swap/check.svg'
+import { ClaimStatus } from 'state/claim/actions'
+import SVG from 'react-inlinesvg'
+import { ClaimCommonTypes } from 'pages/Claim/types'
+import useNetworkName from 'hooks/useNetworkName'
+
+type ClaimBannerProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
+  isClaimed: boolean
+}
+
+export default function ClaimBanner({ hasClaims, isClaimed }: ClaimBannerProps) {
+  const networkName = useNetworkName()
+  const { claimStatus, activeClaimAccount, isInvestFlowActive } = useClaimState()
+
+  const shouldShowBanner =
+    claimStatus === ClaimStatus.DEFAULT && !!activeClaimAccount && !isInvestFlowActive && (hasClaims || isClaimed)
+
+  if (!shouldShowBanner) return null
+
+  return (
+    <ClaimBannerWrapper isClaimed={isClaimed}>
+      <SVG src={CheckCircle} description="eligible" />
+      <Trans>
+        {hasClaims
+          ? 'This account is eligible for vCOW token claims!'
+          : `This account has already claimed vCOW tokens${networkName && ' on ' + networkName}!`}
+      </Trans>
+    </ClaimBannerWrapper>
+  )
+}