Basic claim

src/components/Menu/index.tsx

@@ -55,7 +55,7 @@ const StyledMenuButton = styled.button`
   }
 `
 
-const UNIbutton = styled(ButtonPrimary)`
+export const UNIbutton = styled(ButtonPrimary)`
   background-color: ${({ theme }) => theme.bg3};
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
   border: none;

src/custom/components/Header/HeaderMod.tsx

@@ -121,8 +121,7 @@ export const AccountElement = styled.div<{ active: boolean }>`
   }
 `
 
-/*
-const UNIAmount = styled(AccountElement)`
+export const UNIAmount = styled(AccountElement)`
   color: white;
   padding: 4px 8px;
   height: 36px;
@@ -131,7 +130,7 @@ const UNIAmount = styled(AccountElement)`
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
 `
 
-const UNIWrapper = styled.span`
+export const UNIWrapper = styled.span`
   width: fit-content;
   position: relative;
   cursor: pointer;
@@ -144,7 +143,6 @@ const UNIWrapper = styled.span`
     opacity: 0.9;
   }
 `
-*/
 
 export const HideSmall = styled.span`
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/custom/components/Header/index.tsx

@@ -1,7 +1,10 @@
+import { Trans } from '@lingui/macro'
 import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
+import { Dots } from 'components/swap/styleds'
 import Web3Status from 'components/Web3Status'
-import { ExternalLink } from 'theme'
+import { CardNoise } from 'components/earn/styled'
+import { ExternalLink, TYPE } from 'theme'
 
 import HeaderMod, {
   Title,
@@ -15,6 +18,8 @@ import HeaderMod, {
   StyledNavLink as StyledNavLinkUni,
   StyledMenuButton,
   HeaderFrame,
+  UNIAmount,
+  UNIWrapper,
 } from './HeaderMod'
 import Menu from 'components/Menu'
 import { Moon, Sun } from 'react-feather'
@@ -27,12 +32,18 @@ import { darken } from 'polished'
 import TwitterImage from 'assets/cow-swap/twitter.svg'
 import OrdersPanel from 'components/OrdersPanel'
 import { ApplicationModal } from 'state/application/actions'
-import { useModalOpen } from 'state/application/hooks'
 
 import { supportedChainId } from 'utils/supportedChainId'
 import { formatSmart } from 'utils/format'
 import NetworkCard, { NetworkInfo } from './NetworkCard'
 import SVG from 'react-inlinesvg'
+import { useModalOpen, useShowClaimPopup, useToggleSelfClaimModal } from 'state/application/hooks'
+import { useUserHasAvailableClaim } from 'state/claim/hooks'
+import { useUserHasSubmittedClaim } from 'state/transactions/hooks'
+
+import Modal from 'components/Modal'
+import ClaimModal from 'components/claim/ClaimModal'
+import UniBalanceContent from 'components/Header/UniBalanceContent'
 
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -196,6 +207,13 @@ export default function Header() {
   const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
   const nativeToken = chainId && (CHAIN_CURRENCY_LABELS[chainId] || 'ETH')
   const [darkMode, toggleDarkMode] = useDarkModeManager()
+
+  const toggleClaimModal = useToggleSelfClaimModal()
+  const availableClaim: boolean = useUserHasAvailableClaim(account)
+  const { claimTxn } = useUserHasSubmittedClaim(account ?? undefined)
+  const [showUniBalanceModal, setShowUniBalanceModal] = useState(false)
+  const showClaimPopup = useShowClaimPopup()
+
   const [isOrdersPanelOpen, setIsOrdersPanelOpen] = useState<boolean>(false)
   const closeOrdersPanel = () => setIsOrdersPanelOpen(false)
   const openOrdersPanel = () => setIsOrdersPanelOpen(true)
@@ -213,6 +231,10 @@ export default function Header() {
     <Wrapper>
       <HeaderModWrapper>
         <HeaderRow marginRight="0">
+          <ClaimModal />
+          <Modal isOpen={showUniBalanceModal} onDismiss={() => setShowUniBalanceModal(false)}>
+            <UniBalanceContent setShowUniBalanceModal={setShowUniBalanceModal} />
+          </Modal>
           <Title href=".">
             <UniIcon>
               <LogoImage />
@@ -226,6 +248,22 @@ export default function Header() {
         <HeaderControls>
           <NetworkCard />
           <HeaderElement>
+            {availableClaim && !showClaimPopup && (
+              <UNIWrapper onClick={toggleClaimModal}>
+                <UNIAmount active={!!account && !availableClaim} style={{ pointerEvents: 'auto' }}>
+                  <TYPE.white padding="0 2px">
+                    {claimTxn && !claimTxn?.receipt ? (
+                      <Dots>
+                        <Trans>Claiming vCOW</Trans>
+                      </Dots>
+                    ) : (
+                      <Trans>Claim vCOW</Trans>
+                    )}
+                  </TYPE.white>
+                </UNIAmount>
+                <CardNoise />
+              </UNIWrapper>
+            )}
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
               {account && userEthBalance && (
                 <BalanceText style={{ flexShrink: 0, userSelect: 'none' }} pl="0.75rem" pr="0.5rem" fontWeight={500}>

src/custom/components/Menu/MenuMod.tsx

@@ -10,7 +10,7 @@ import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useToggleModal } from 'state/application/hooks'
 // import { Trans } from '@lingui/macro'
 import { ExternalLink } from 'theme'
-// import { ButtonPrimary } from 'components/Button'
+import { ButtonPrimary } from 'components/Button'
 /* import { useDarkModeManager } from 'state/user/hooks'
 
 import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains'
@@ -55,11 +55,11 @@ export const StyledMenuButton = styled.button`
   }
 `
 
-/* const UNIbutton = styled(ButtonPrimary)`
+export const UNIbutton = styled(ButtonPrimary)`
   background-color: ${({ theme }) => theme.bg3};
   background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
   border: none;
-` */
+`
 
 export const StyledMenu = styled.div`
   margin-left: 0.5rem;

src/custom/components/Menu/index.tsx

@@ -1,11 +1,13 @@
 import { Code, HelpCircle, BookOpen, PieChart, Moon, Sun, Repeat, Star, User, ExternalLink } from 'react-feather'
+import { Trans } from '@lingui/macro'
 
 import MenuMod, {
   MenuItem,
   InternalMenuItem,
   MenuFlyout as MenuFlyoutUni,
   MenuItemBase,
   StyledMenuButton,
+  UNIbutton,
 } from './MenuMod'
 import { useToggleModal } from 'state/application/hooks'
 import styled from 'styled-components/macro'
@@ -225,6 +227,9 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
   const hasOrders = useHasOrders(account)
   const showOrdersLink = account && hasOrders
 
+  const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
+  const showUNIClaimOption = Boolean(!!account && !!chainId)
+
   return (
     <StyledMenu>
       <MenuFlyout>
@@ -317,6 +322,11 @@ export function Menu({ darkMode, toggleDarkMode }: MenuProps) {
         <Policy to="/privacy-policy">Privacy policy</Policy>
         <Policy to="/cookie-policy">Cookie policy</Policy> 
         */}
+        {showUNIClaimOption && (
+          <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" $borderRadius="12px" mt="0.5rem">
+            <Trans>Claim vCOW</Trans>
+          </UNIbutton>
+        )}
       </MenuFlyout>
     </StyledMenu>
   )

src/custom/pages/App/AppMod.tsx

@@ -3,14 +3,14 @@ import { Suspense, /* PropsWithChildren, */ ReactNode, useState, useEffect } fro
 import { Route, Switch, useLocation } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import GoogleAnalyticsReporter from 'components/analytics/GoogleAnalyticsReporter'
-// import AddressClaimModal from '../components/claim/AddressClaimModal'
+import AddressClaimModal from 'components/claim/AddressClaimModal'
 import ErrorBoundary from 'components/ErrorBoundary'
 import Header from 'components/Header'
 import Polling from 'components/Header/Polling'
 import Popups from 'components/Popups'
 import Web3ReactManager from 'components/Web3ReactManager'
-// import { ApplicationModal } from '../../state/application/actions'
-// import { useModalOpen, useToggleModal } from '../state/application/hooks'
+import { ApplicationModal } from 'state/application/actions'
+import { useModalOpen, useToggleModal } from 'state/application/hooks'
 import DarkModeQueryParamReader from 'theme'
 /* import AddLiquidity from './AddLiquidity'
 import {
@@ -94,11 +94,11 @@ const Marginer = styled.div`
   margin-top: 5rem;
 `
 
-// function TopLevelModals() {
-//   const open = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
-//   const toggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
-//   return <AddressClaimModal isOpen={open} onDismiss={toggle} />
-// }
+function TopLevelModals() {
+  const open = useModalOpen(ApplicationModal.ADDRESS_CLAIM)
+  const toggle = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
+  return <AddressClaimModal isOpen={open} onDismiss={toggle} />
+}
 
 export default function App(props?: { children?: ReactNode }) {
   const [bgBlur, setBgBlur] = useState(false)
@@ -121,7 +121,7 @@ export default function App(props?: { children?: ReactNode }) {
             </HeaderWrapper>
             <BodyWrapper>
               <Polling />
-              {/* <TopLevelModals /> */}
+              <TopLevelModals />
               <ReferralLinkUpdater />
               <Switch>
                 {props && props.children}

src/custom/pages/App/index.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components/macro'
 import { RedirectPathToSwapOnly, RedirectToSwap } from 'pages/Swap/redirects'
 import { Route, Switch } from 'react-router-dom'
 import Swap from 'pages/Swap'
+import Claim from 'pages/Claim'
 import PrivacyPolicy from 'pages/PrivacyPolicy'
 import CookiePolicy from 'pages/CookiePolicy'
 import TermsAndConditions from 'pages/TermsAndConditions'
@@ -70,6 +71,7 @@ export default function App() {
         <Route exact strict path="/swap" component={Swap} />
         <Route exact strict path="/swap/:outputCurrency" component={RedirectToSwap} />
         <Route exact strict path="/send" component={RedirectPathToSwapOnly} />
+        <Route exact strict path="/claim" component={Claim} />
         <Route exact strict path="/about" component={About} />
         <Route exact strict path="/profile" component={Profile} />
         <Route exact strict path="/faq" component={Faq} />
@@ -78,7 +80,6 @@ export default function App() {
         <Route exact strict path="/privacy-policy" component={PrivacyPolicy} />
         <Route exact strict path="/cookie-policy" component={CookiePolicy} />
         <Route exact strict path="/terms-and-conditions" component={TermsAndConditions} />
-
         <Route exact strict path="/chat" component={createRedirectExternal('https://chat.cowswap.exchange')} />
         <Route exact strict path="/docs" component={createRedirectExternal('https://docs.cowswap.exchange')} />
         <Route
@@ -88,7 +89,6 @@ export default function App() {
           component={createRedirectExternal('https://dune.xyz/gnosis.protocol/Gnosis-Protocol-V2')}
         />
         <Route exact strict path="/twitter" component={createRedirectExternal('https://twitter.com/MEVprotection')} />
-
         <Route exact strict path="/" component={RedirectPathToSwapOnly} />
         <Route component={NotFound} />
       </Switch>

src/custom/pages/Claim/index.tsx

@@ -0,0 +1,121 @@
+import JSBI from 'jsbi'
+import { AutoColumn } from 'components/Column'
+import styled from 'styled-components/macro'
+import { STAKING_REWARDS_INFO, useStakingInfo } from 'state/stake/hooks'
+import { TYPE, ExternalLink } from 'theme'
+import PoolCard from 'components/earn/PoolCard'
+import { RowBetween } from 'components/Row'
+import { CardSection, DataCard, CardNoise, CardBGImage } from 'components/earn/styled'
+import { Countdown } from 'pages/Earn/Countdown'
+import Loader from 'components/Loader'
+import { useActiveWeb3React } from 'hooks/web3'
+import { BIG_INT_ZERO } from 'constants/misc'
+import { OutlineCard } from 'components/Card'
+import { Trans } from '@lingui/macro'
+
+const PageWrapper = styled(AutoColumn)`
+  max-width: 640px;
+  width: 100%;
+`
+
+const TopSection = styled(AutoColumn)`
+  max-width: 720px;
+  width: 100%;
+`
+
+const PoolSection = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 10px;
+  row-gap: 15px;
+  width: 100%;
+  justify-self: center;
+`
+
+const DataRow = styled(RowBetween)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+flex-direction: column;
+`};
+`
+
+export default function Earn() {
+  const { chainId } = useActiveWeb3React()
+
+  // staking info for connected account
+  const stakingInfos = useStakingInfo()
+
+  /**
+   * only show staking cards with balance
+   * @todo only account for this if rewards are inactive
+   */
+  const stakingInfosWithBalance = stakingInfos?.filter((s) => JSBI.greaterThan(s.stakedAmount.quotient, BIG_INT_ZERO))
+
+  // toggle copy if rewards are inactive
+  const stakingRewardsExist = Boolean(typeof chainId === 'number' && (STAKING_REWARDS_INFO[chainId]?.length ?? 0) > 0)
+
+  return (
+    <PageWrapper gap="lg" justify="center">
+      <TopSection gap="md">
+        <DataCard>
+          <CardBGImage />
+          <CardNoise />
+          <CardSection>
+            <AutoColumn gap="md">
+              <RowBetween>
+                <TYPE.white fontWeight={600}>
+                  <Trans>Uniswap liquidity mining</Trans>
+                </TYPE.white>
+              </RowBetween>
+              <RowBetween>
+                <TYPE.white fontSize={14}>
+                  <Trans>
+                    Deposit your Liquidity Provider tokens to receive UNI, the Uniswap protocol governance token.
+                  </Trans>
+                </TYPE.white>
+              </RowBetween>{' '}
+              <ExternalLink
+                style={{ color: 'white', textDecoration: 'underline' }}
+                href="https://uniswap.org/blog/uni/"
+                target="_blank"
+              >
+                <TYPE.white fontSize={14}>
+                  <Trans>Read more about UNI</Trans>
+                </TYPE.white>
+              </ExternalLink>
+            </AutoColumn>
+          </CardSection>
+          <CardBGImage />
+          <CardNoise />
+        </DataCard>
+      </TopSection>
+
+      <AutoColumn gap="lg" style={{ width: '100%', maxWidth: '720px' }}>
+        <DataRow style={{ alignItems: 'baseline' }}>
+          <TYPE.mediumHeader style={{ marginTop: '0.5rem' }}>
+            <Trans>Participating pools</Trans>
+          </TYPE.mediumHeader>
+          <Countdown exactEnd={new Date(Date.now() + 100000000)} />
+        </DataRow>
+
+        <PoolSection>
+          {stakingRewardsExist && stakingInfos?.length === 0 ? (
+            <Loader style={{ margin: 'auto' }} />
+          ) : !stakingRewardsExist ? (
+            <OutlineCard>
+              <Trans>No active pools</Trans>
+            </OutlineCard>
+          ) : stakingInfos?.length !== 0 && stakingInfosWithBalance.length === 0 ? (
+            <OutlineCard>
+              <Trans>No active pools</Trans>
+            </OutlineCard>
+          ) : (
+            stakingInfosWithBalance?.map((stakingInfo) => {
+              // need to sort by added liquidity here
+              return <PoolCard key={stakingInfo.stakingRewardAddress} stakingInfo={stakingInfo} />
+            })
+          )}
+        </PoolSection>
+      </AutoColumn>
+    </PageWrapper>
+  )
+}