Merge pull request #2363 from gnosis/release/1.10

[RELEASE 🪙 ] v1.10.0-RC.2

src/custom/components/AccountDetails/Transaction/ActivityDetails.tsx

@@ -17,7 +17,7 @@ import {
 } from './styled'
 
 import { getLimitPrice, getExecutionPrice } from 'state/orders/utils'
-import { DEFAULT_PRECISION } from 'constants/index'
+import { DEFAULT_PRECISION, V_COW_CONTRACT_ADDRESS } from 'constants/index'
 import { ActivityDerivedState } from './index'
 import { GnosisSafeLink } from './StatusDetails'
 import CurrencyLogo from 'components/CurrencyLogo'
@@ -160,7 +160,9 @@ export function ActivityDetails(props: {
   const { activityDerivedState, chainId, activityLinkUrl, disableMouseActions, creationTime } = props
   const { id, isOrder, summary, order, enhancedTransaction, isCancelled, isExpired, isUnfillable } =
     activityDerivedState
-  const approvalToken = useToken(enhancedTransaction?.approval?.tokenAddress) || null
+  const tokenAddress =
+    enhancedTransaction?.approval?.tokenAddress || (enhancedTransaction?.claim && V_COW_CONTRACT_ADDRESS[chainId])
+  const singleToken = useToken(tokenAddress) || null
 
   if (!order && !enhancedTransaction) return null
 
@@ -235,9 +237,9 @@ export function ActivityDetails(props: {
         {creationTime && <CreationTimeText>{creationTime}</CreationTimeText>}
 
         {/* Token Approval Currency Logo */}
-        {!isOrder && approvalToken && (
+        {!isOrder && singleToken && (
           <ActivityVisual>
-            <CurrencyLogo currency={approvalToken} size={'24px'} />
+            <CurrencyLogo currency={singleToken} size={'24px'} />
           </ActivityVisual>
         )}
 

src/custom/components/CurrencyLogo/CurrencyLogoMod.tsx

@@ -4,7 +4,7 @@ import { useMemo } from 'react'
 import styled from 'styled-components/macro'
 
 import EthereumLogo from 'assets/images/ethereum-logo.png'
-import xDaiLogo from 'assets/images/xdai.png'
+import xDaiLogo from 'assets/cow-swap/xdai.png'
 import useHttpLocations from 'hooks/useHttpLocations'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import Logo from 'components/Logo'

src/custom/components/ErrorBoundary/ErrorBoundaryMod.tsx

@@ -10,13 +10,29 @@ import { userAgent } from '@src/utils/userAgent'
 import { AutoRow } from 'components/Row'
 import { MEDIA_WIDTHS } from '@src/theme'
 import CowError from 'assets/cow-swap/CowError.png'
+import { UniIcon, LogoImage } from '../Header'
+import { HeaderRow } from 'components/Header/HeaderMod'
+import Footer from 'components/Footer'
 
 const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
   align-items: center;
   min-height: 100vh;
   overflow-x: hidden;
+  &:after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background-image: ${({ theme }) => theme.body.background};
+    transition: 0.5s;
+    z-index: -1;
+  }
 `
 
 const Wrapper = styled(Page)`
@@ -56,33 +72,19 @@ const HeaderWrapper = styled.div`
   position: fixed;
   top: 0;
   z-index: 2;
+  padding: 16px;
   @media screen and (max-width: ${MEDIA_WIDTHS.upToSmall}px) {
     position: relative;
   }
 `
-
-export const LogoImage = styled.img.attrs((props) => ({
-  src: props.theme.logo.src,
-  // alt: props.theme.logo.alt,
-  // width: props.theme.logo.width,
-  // height: props.theme.logo.height,
-}))`
-  object-fit: contain;
-
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    width: 150px;
-  `};
+const FooterWrapper = styled(HeaderWrapper)`
+  z-index: 1;
+  flex-grow: 1;
+  width: 100%;
+  position: relative;
+  top: auto;
 `
 
-const CowLogo = styled.div`
-  display: flex;
-  margin: 1rem;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: rotate(-5deg);
-  }
-`
 const CodeBlockWrapper = styled.div`
   background: ${({ theme }) => theme.bg4};
   overflow: auto;
@@ -135,17 +137,20 @@ export default class ErrorBoundary extends Component<unknown, ErrorBoundaryState
   }
 
   render() {
+    document.body.classList.remove('noScroll')
     const { error } = this.state
     if (error !== null) {
       const encodedBody = encodeURIComponent(issueBody(error))
       return (
         <AppWrapper>
           <HeaderWrapper>
-            <a href=".">
-              <CowLogo>
-                <LogoImage />
-              </CowLogo>
-            </a>
+            <HeaderRow marginRight="0">
+              <a href=".">
+                <UniIcon>
+                  <LogoImage />
+                </UniIcon>
+              </a>
+            </HeaderRow>
           </HeaderWrapper>
           <Wrapper>
             <FlexContainer>
@@ -187,6 +192,9 @@ export default class ErrorBoundary extends Component<unknown, ErrorBoundaryState
               </AutoRow>
             </AutoColumn>
           </Wrapper>
+          <FooterWrapper>
+            <Footer />
+          </FooterWrapper>
         </AppWrapper>
       )
     }
@@ -203,12 +211,12 @@ function getRelevantState(): null | keyof AppState {
   switch (pieces[0]) {
     case 'swap':
       return 'swap'
-    case 'add':
-      if (pieces[1] === 'v2') return 'mint'
-      else return 'mintV3'
-    case 'remove':
-      if (pieces[1] === 'v2') return 'burn'
-      else return 'burnV3'
+    // case 'add':
+    //   if (pieces[1] === 'v2') return 'mint'
+    //   else return 'mintV3'
+    // case 'remove':
+    //   if (pieces[1] === 'v2') return 'burn'
+    //   else return 'burnV3'
   }
   return null
 }

src/custom/components/Header/NetworkSelector/NetworkSelectorMod.tsx

@@ -107,7 +107,7 @@ const NetworkLabel = styled.div`
   flex: 1 1 auto;
   margin: 0px auto 0px 8px;
 `
-const SelectorLabel = styled(NetworkLabel)`
+export const SelectorLabel = styled(NetworkLabel)`
   display: none;
   margin-left: 0;
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {

src/custom/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
-import { ExternalLink } from 'theme'
+// import { ExternalLink } from 'theme'
 import { useHistory, useLocation } from 'react-router-dom'
 
 import HeaderMod, {
@@ -25,15 +25,15 @@ import { useETHBalances } from 'state/wallet/hooks'
 import { AMOUNT_PRECISION } from 'constants/index'
 import { useDarkModeManager } from 'state/user/hooks'
 import { darken } from 'polished'
-import TwitterImage from 'assets/cow-swap/twitter.svg'
+// import TwitterImage from 'assets/cow-swap/twitter.svg'
 import OrdersPanel from 'components/OrdersPanel'
 import { ApplicationModal } from 'state/application/reducer'
 
 import { supportedChainId } from 'utils/supportedChainId'
 import { formatSmart } from 'utils/format'
 import Web3Status from 'components/Web3Status'
-import NetworkSelector from 'components/Header/NetworkSelector'
-import SVG from 'react-inlinesvg'
+import NetworkSelector, { SelectorLabel } from 'components/Header/NetworkSelector'
+// import SVG from 'react-inlinesvg'
 import {
   useModalOpen,
   /*useShowClaimPopup,*/
@@ -112,6 +112,11 @@ export const Wrapper = styled.div`
     ${({ theme }) => theme.mediaWidth.upToSmall`
       width: 100%;
     `};
+
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      flex-direction: initial;
+      align-items: inherit;
+    `};
   }
 
   ${StyledMenuButton} {
@@ -120,6 +125,12 @@ export const Wrapper = styled.div`
     height: 38px;
     width: 38px;
   }
+
+  ${SelectorLabel} {
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      display: none;
+    `};
+  }
 `
 
 export const HeaderModWrapper = styled(HeaderMod)`
@@ -172,11 +183,7 @@ export const LogoImage = styled.div`
   margin: 0 32px 0 0;
   position: relative;
 
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    width: 160px;
-  `}
-
-  ${({ theme }) => theme.mediaWidth.upToVerySmall`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
     background: ${({ theme }) => `url(${theme.logo.srcIcon}) no-repeat left/contain`};
     height: 34px;
   `}
@@ -188,7 +195,7 @@ export const LogoImage = styled.div`
   }
 `
 
-const UniIcon = styled.div`
+export const UniIcon = styled.div`
   display: flex;
   position: relative;
   transition: transform 0.3s ease;
@@ -280,11 +287,11 @@ export default function Header() {
             </AccountElement>
           </HeaderElement>
           <HeaderElementWrap>
-            <TwitterLink>
+            {/* <TwitterLink>
               <ExternalLink href="https://twitter.com/mevprotection">
                 <SVG src={TwitterImage} description="Follow CowSwap on Twitter!" />
               </ExternalLink>
-            </TwitterLink>
+            </TwitterLink> */}
             <StyledMenuButton onClick={() => toggleDarkMode()}>
               {darkMode ? <Moon size={20} /> : <Sun size={20} />}
             </StyledMenuButton>

src/custom/components/Menu/index.tsx

@@ -20,6 +20,7 @@ import { getExplorerAddressLink } from 'utils/explorer'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
 import { useHistory } from 'react-router-dom'
 import CowClaimButton, { Wrapper as ClaimButtonWrapper } from 'components/CowClaimButton'
+import { IS_CLAIMING_ENABLED } from 'pages/Claim/const'
 
 import twitterImage from 'assets/cow-swap/twitter.svg'
 import discordImage from 'assets/cow-swap/discord.svg'
@@ -291,12 +292,14 @@ export function Menu({ darkMode, toggleDarkMode, isClaimPage }: MenuProps) {
   return (
     <StyledMenu isClaimPage={isClaimPage}>
       <MenuFlyout>
-        <CowClaimButton
-          isClaimPage={isClaimPage}
-          handleOnClickClaim={handleOnClickClaim}
-          account={account}
-          chainId={chainId}
-        />
+        {IS_CLAIMING_ENABLED && (
+          <CowClaimButton
+            isClaimPage={isClaimPage}
+            handleOnClickClaim={handleOnClickClaim}
+            account={account}
+            chainId={chainId}
+          />
+        )}
 
         <ResponsiveInternalMenuItem to="/" onClick={close}>
           <Repeat size={14} /> Swap

src/custom/constants/index.ts

@@ -50,7 +50,7 @@ export const GP_VAULT_RELAYER: Partial<Record<number, string>> = {
   [ChainId.XDAI]: GPv2VaultRelayer[ChainId.XDAI].address,
 }
 
-export const V_COW_CONTRACT_ADDRESS: Partial<Record<number, string>> = {
+export const V_COW_CONTRACT_ADDRESS: Record<number, string> = {
   [ChainId.MAINNET]: '0x6d04B3ad33594978D0D4B01CdB7c3bA4a90a7DFe',
   [ChainId.XDAI]: '0xA3A674a40709A837A5E742C2866eda7d3b35a7c0',
   [ChainId.RINKEBY]: '0xD7Dd9397Fb942565959c77f8e112ec5aa7D8C92c',