From 6e5bc69da88550dfef1adbc5f4b428b72a040ca3 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 13 Apr 2021 12:18:10 +0100
Subject: [PATCH 01/40] feat(syrup-pool-v2): Update PageHeader and TabButtons

---
 src/components/PageHeader/PageHeader.tsx      |  20 +++
 src/components/PageHeader/index.ts            |   1 +
 src/views/Farms/Farms.tsx                     |  18 +--
 src/views/Pools/Syrup.tsx                     | 123 +++++++++---------
 .../Pools/components/PoolTabButtons/index.tsx |  35 ++---
 5 files changed, 91 insertions(+), 106 deletions(-)
 create mode 100644 src/components/PageHeader/PageHeader.tsx
 create mode 100644 src/components/PageHeader/index.ts

diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
new file mode 100644
index 0000000000000..fe8d023e12ae7
--- /dev/null
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import styled from 'styled-components'
+import Container from '../layout/Container'
+
+const Outer = styled.div`
+  background: ${({ theme }) => theme.colors.gradients.bubblegum};
+`
+
+const Inner = styled(Container)`
+  padding-top: 32px;
+  padding-bottom: 32px;
+`
+
+const PageHeader = ({ children }) => (
+  <Outer>
+    <Inner>{children}</Inner>
+  </Outer>
+)
+
+export default PageHeader
diff --git a/src/components/PageHeader/index.ts b/src/components/PageHeader/index.ts
new file mode 100644
index 0000000000000..cecab8ce59da8
--- /dev/null
+++ b/src/components/PageHeader/index.ts
@@ -0,0 +1 @@
+export { default } from './PageHeader'
diff --git a/src/views/Farms/Farms.tsx b/src/views/Farms/Farms.tsx
index 981211c8327f9..847d71032ef06 100644
--- a/src/views/Farms/Farms.tsx
+++ b/src/views/Farms/Farms.tsx
@@ -7,6 +7,7 @@ import { Image, Heading, RowType, Toggle, Text } from '@pancakeswap-libs/uikit'
 import styled from 'styled-components'
 import FlexLayout from 'components/layout/Flex'
 import Page from 'components/layout/Page'
+import PageHeader from 'components/PageHeader'
 import { useFarms, usePriceCakeBusd, useGetApiPrices } from 'state/hooks'
 import useRefresh from 'hooks/useRefresh'
 import { fetchFarmUserDataAsync } from 'state/actions'
@@ -97,19 +98,6 @@ const StyledImage = styled(Image)`
   margin-top: 58px;
 `
 
-const Header = styled.div`
-  padding: 32px 0px;
-  background: ${({ theme }) => theme.colors.gradients.bubblegum};
-
-  padding-left: 16px;
-  padding-right: 16px;
-
-  ${({ theme }) => theme.mediaQueries.sm} {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-`
-
 const Farms: React.FC = () => {
   const { path } = useRouteMatch()
   const { pathname } = useLocation()
@@ -292,14 +280,14 @@ const Farms: React.FC = () => {
 
   return (
     <>
-      <Header>
+      <PageHeader>
         <Heading as="h1" size="xxl" color="secondary" mb="24px">
           {TranslateString(674, 'Farms')}
         </Heading>
         <Heading size="lg" color="text">
           {TranslateString(999, 'Stake Liquidity Pool (LP) tokens to earn.')}
         </Heading>
-      </Header>
+      </PageHeader>
       <Page>
         <ControlContainer>
           <ViewControls>
diff --git a/src/views/Pools/Syrup.tsx b/src/views/Pools/Syrup.tsx
index 8a94e362fce87..3ebd7f6c4c08a 100644
--- a/src/views/Pools/Syrup.tsx
+++ b/src/views/Pools/Syrup.tsx
@@ -3,19 +3,27 @@ import { Route, useRouteMatch } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
-import { Heading } from '@pancakeswap-libs/uikit'
+import { Heading, Flex, Button, HelpIcon, Text } from '@pancakeswap-libs/uikit'
 import orderBy from 'lodash/orderBy'
 import partition from 'lodash/partition'
 import useI18n from 'hooks/useI18n'
 import { usePools, useBlock } from 'state/hooks'
 import FlexLayout from 'components/layout/Flex'
 import Page from 'components/layout/Page'
+import PageHeader from 'components/PageHeader'
 import Coming from './components/Coming'
 import PoolCard from './components/PoolCard'
 import PoolTabButtons from './components/PoolTabButtons'
 import Divider from './components/Divider'
 
-const Farm: React.FC = () => {
+const ButtonText = styled(Text)`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: block;
+  }
+`
+
+const Syrup: React.FC = () => {
   const { path } = useRouteMatch()
   const TranslateString = useI18n()
   const { account } = useWeb3React()
@@ -33,69 +41,54 @@ const Farm: React.FC = () => {
   )
 
   return (
-    <Page>
-      <Hero>
-        <div>
-          <Heading as="h1" size="xxl" mb="16px">
-            {TranslateString(738, 'Syrup Pool')}
-          </Heading>
-          <ul>
-            <li>{TranslateString(580, 'Stake CAKE to earn new tokens.')}</li>
-            <li>{TranslateString(486, 'You can unstake at any time.')}</li>
-            <li>{TranslateString(406, 'Rewards are calculated per block.')}</li>
-          </ul>
-        </div>
-        <img src="/images/syrup.png" alt="SYRUP POOL icon" width={410} height={191} />
-      </Hero>
-      <PoolTabButtons stakedOnly={stakedOnly} setStakedOnly={setStakedOnly} />
-      <Divider />
-      <FlexLayout>
-        <Route exact path={`${path}`}>
-          <>
-            {stakedOnly
-              ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
-              : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
-            <Coming />
-          </>
-        </Route>
-        <Route path={`${path}/history`}>
-          {orderBy(finishedPools, ['sortOrder']).map((pool) => (
-            <PoolCard key={pool.sousId} pool={pool} />
-          ))}
-        </Route>
-      </FlexLayout>
-    </Page>
+    <>
+      <PageHeader>
+        <Flex justifyContent="space-between">
+          <Flex flexDirection="column" mr={['8px', 0]}>
+            <Heading as="h1" size="xxl" color="secondary" mb="24px">
+              {TranslateString(999, 'Syrup Pools')}
+            </Heading>
+            <Heading size="md" color="text">
+              {TranslateString(999, 'Simply stake tokens to earn.')}
+            </Heading>
+            <Heading size="md" color="text">
+              {TranslateString(999, 'High APR, low risk.')}
+            </Heading>
+          </Flex>
+          <Button
+            px={['14px', null, null, null, '24px']}
+            variant="subtle"
+            as="a"
+            href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool"
+          >
+            <ButtonText color="card" bold fontSize="16px">
+              {TranslateString(999, 'Help')}
+            </ButtonText>
+            <HelpIcon color="card" ml={[null, null, null, 0, '6px']} />
+          </Button>
+        </Flex>
+      </PageHeader>
+      <Page>
+        <PoolTabButtons stakedOnly={stakedOnly} setStakedOnly={setStakedOnly} />
+        <Divider />
+        <FlexLayout>
+          <Route exact path={`${path}`}>
+            <>
+              {stakedOnly
+                ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
+                : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
+              <Coming />
+            </>
+          </Route>
+          <Route path={`${path}/history`}>
+            {orderBy(finishedPools, ['sortOrder']).map((pool) => (
+              <PoolCard key={pool.sousId} pool={pool} />
+            ))}
+          </Route>
+        </FlexLayout>
+      </Page>
+    </>
   )
 }
 
-const Hero = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.colors.primary};
-  display: grid;
-  grid-gap: 32px;
-  grid-template-columns: 1fr;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 250px;
-  padding: 48px 0;
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    font-size: 16px;
-    li {
-      margin-bottom: 4px;
-    }
-  }
-  img {
-    height: auto;
-    max-width: 100%;
-  }
-  @media (min-width: 576px) {
-    grid-template-columns: 1fr 1fr;
-    margin: 0;
-    max-width: none;
-  }
-`
-
-export default Farm
+export default Syrup
diff --git a/src/views/Pools/components/PoolTabButtons/index.tsx b/src/views/Pools/components/PoolTabButtons/index.tsx
index b1e0d51b64cff..b53f2c6b9e08b 100644
--- a/src/views/Pools/components/PoolTabButtons/index.tsx
+++ b/src/views/Pools/components/PoolTabButtons/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components'
 import { useRouteMatch, Link } from 'react-router-dom'
-import { ButtonMenu, ButtonMenuItem, Toggle, Text } from '@pancakeswap-libs/uikit'
+import { ButtonMenu, ButtonMenuItem, Toggle, Text, Flex } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 
 const PoolTabButtons = ({ stakedOnly, setStakedOnly }) => {
@@ -9,11 +8,7 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly }) => {
   const TranslateString = useI18n()
 
   return (
-    <Wrapper>
-      <ToggleWrapper>
-        <Toggle checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} />
-        <Text> {TranslateString(999, 'Staked only')}</Text>
-      </ToggleWrapper>
+    <Flex alignItems="center" justifyContent="center" mb="32px">
       <ButtonMenu activeIndex={isExact ? 0 : 1} scale="sm" variant="subtle">
         <ButtonMenuItem as={Link} to={`${url}`}>
           {TranslateString(1198, 'Live')}
@@ -22,26 +17,14 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly }) => {
           {TranslateString(388, 'Finished')}
         </ButtonMenuItem>
       </ButtonMenu>
-    </Wrapper>
+      <Flex ml="24px" justifyContent="center" alignItems="center">
+        <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} />
+        <Text ml="8px" color={`${stakedOnly ? 'body' : 'textDisabled'}`}>
+          {TranslateString(999, 'Staked only')}
+        </Text>
+      </Flex>
+    </Flex>
   )
 }
 
 export default PoolTabButtons
-
-const Wrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 32px;
-`
-
-const ToggleWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-right: 32px;
-
-  ${Text} {
-    margin-left: 8px;
-  }
-`

From a72465a3f0542fa3401b0f34a0850d7ef4c9de17 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 13 Apr 2021 15:03:42 +0100
Subject: [PATCH 02/40] feat(syrup-pool-v2): Reorg component structure and add
 new styledCardHeader

---
 src/views/Pools/components/CardTitle.tsx      | 15 -----------
 src/views/Pools/components/Coming.tsx         |  4 +--
 src/views/Pools/components/Divider.tsx        |  8 ------
 .../components/{ => PoolCard}/CardFooter.tsx  |  0
 .../{ => PoolCard}/CompoundModal.tsx          |  0
 .../{ => PoolCard}/DepositModal.tsx           |  0
 .../{ => PoolCard}/HarvestButton.tsx          |  0
 .../{ => PoolCard}/OldSyrupTitle.tsx          |  0
 .../{Card.tsx => PoolCard/StyledCard.tsx}     |  5 ++--
 .../components/PoolCard/StyledCardHeader.tsx  | 22 +++++++++++++++
 .../{ => PoolCard}/WithdrawModal.tsx          |  0
 .../{PoolCard.tsx => PoolCard/index.tsx}      | 27 ++++++++-----------
 .../index.tsx => PoolTabButtons.tsx}          |  0
 src/views/Pools/index.ts                      |  1 -
 src/views/Pools/{Syrup.tsx => index.tsx}      |  2 --
 15 files changed, 38 insertions(+), 46 deletions(-)
 delete mode 100644 src/views/Pools/components/CardTitle.tsx
 delete mode 100644 src/views/Pools/components/Divider.tsx
 rename src/views/Pools/components/{ => PoolCard}/CardFooter.tsx (100%)
 rename src/views/Pools/components/{ => PoolCard}/CompoundModal.tsx (100%)
 rename src/views/Pools/components/{ => PoolCard}/DepositModal.tsx (100%)
 rename src/views/Pools/components/{ => PoolCard}/HarvestButton.tsx (100%)
 rename src/views/Pools/components/{ => PoolCard}/OldSyrupTitle.tsx (100%)
 rename src/views/Pools/components/{Card.tsx => PoolCard/StyledCard.tsx} (79%)
 create mode 100644 src/views/Pools/components/PoolCard/StyledCardHeader.tsx
 rename src/views/Pools/components/{ => PoolCard}/WithdrawModal.tsx (100%)
 rename src/views/Pools/components/{PoolCard.tsx => PoolCard/index.tsx} (92%)
 rename src/views/Pools/components/{PoolTabButtons/index.tsx => PoolTabButtons.tsx} (100%)
 delete mode 100644 src/views/Pools/index.ts
 rename src/views/Pools/{Syrup.tsx => index.tsx} (98%)

diff --git a/src/views/Pools/components/CardTitle.tsx b/src/views/Pools/components/CardTitle.tsx
deleted file mode 100644
index 817c0bf3254b7..0000000000000
--- a/src/views/Pools/components/CardTitle.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components'
-
-interface StyledTitleProps {
-  isFinished?: boolean
-}
-
-const CardTitle = styled.div<StyledTitleProps>`
-  color: ${({ isFinished, theme }) => theme.colors[isFinished ? 'textDisabled' : 'text']};
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 1.1;
-  margin-bottom: 14px;
-`
-
-export default CardTitle
diff --git a/src/views/Pools/components/Coming.tsx b/src/views/Pools/components/Coming.tsx
index 8b4d291ff2df8..aeeb5523e8721 100644
--- a/src/views/Pools/components/Coming.tsx
+++ b/src/views/Pools/components/Coming.tsx
@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import { Image, Button } from '@pancakeswap-libs/uikit'
 import { CommunityTag } from 'components/Tags'
 import useI18n from 'hooks/useI18n'
-import Card from './Card'
-import CardTitle from './CardTitle'
+import Card from './PoolCard/StyledCard'
+import CardTitle from './PoolCard/CardTitle'
 
 const Balance = styled.div`
   color: ${({ theme }) => theme.colors.text};
diff --git a/src/views/Pools/components/Divider.tsx b/src/views/Pools/components/Divider.tsx
deleted file mode 100644
index b71d204c32ca0..0000000000000
--- a/src/views/Pools/components/Divider.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components'
-
-export default styled.div`
-  background-color: ${({ theme }) => theme.colors.textSubtle};
-  height: 1px;
-  margin: 0 auto 32px;
-  width: 100%;
-`
diff --git a/src/views/Pools/components/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
similarity index 100%
rename from src/views/Pools/components/CardFooter.tsx
rename to src/views/Pools/components/PoolCard/CardFooter.tsx
diff --git a/src/views/Pools/components/CompoundModal.tsx b/src/views/Pools/components/PoolCard/CompoundModal.tsx
similarity index 100%
rename from src/views/Pools/components/CompoundModal.tsx
rename to src/views/Pools/components/PoolCard/CompoundModal.tsx
diff --git a/src/views/Pools/components/DepositModal.tsx b/src/views/Pools/components/PoolCard/DepositModal.tsx
similarity index 100%
rename from src/views/Pools/components/DepositModal.tsx
rename to src/views/Pools/components/PoolCard/DepositModal.tsx
diff --git a/src/views/Pools/components/HarvestButton.tsx b/src/views/Pools/components/PoolCard/HarvestButton.tsx
similarity index 100%
rename from src/views/Pools/components/HarvestButton.tsx
rename to src/views/Pools/components/PoolCard/HarvestButton.tsx
diff --git a/src/views/Pools/components/OldSyrupTitle.tsx b/src/views/Pools/components/PoolCard/OldSyrupTitle.tsx
similarity index 100%
rename from src/views/Pools/components/OldSyrupTitle.tsx
rename to src/views/Pools/components/PoolCard/OldSyrupTitle.tsx
diff --git a/src/views/Pools/components/Card.tsx b/src/views/Pools/components/PoolCard/StyledCard.tsx
similarity index 79%
rename from src/views/Pools/components/Card.tsx
rename to src/views/Pools/components/PoolCard/StyledCard.tsx
index bbdc60f6e9a8f..e4387bb5e6d4d 100644
--- a/src/views/Pools/components/Card.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCard.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
+import { Card } from '@pancakeswap-libs/uikit'
 
-const Card = styled.div<{ isActive?: boolean; isFinished?: boolean }>`
+const StyledCard = styled(Card)<{ isActive?: boolean; isFinished?: boolean }>`
   background: ${(props) => props.theme.card.background};
   box-shadow: 0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05);
   border-radius: 32px;
@@ -14,4 +15,4 @@ const Card = styled.div<{ isActive?: boolean; isFinished?: boolean }>`
   position: relative;
 `
 
-export default Card
+export default StyledCard
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
new file mode 100644
index 0000000000000..286d5f5fd886a
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CardHeader, Heading, Text, Flex, Image } from '@pancakeswap-libs/uikit'
+
+const StyledCardHeader: React.FC<{
+  poolImage: string
+  earningTokenSymbol: string
+  stakingTokenSymbol: string
+}> = ({ poolImage, earningTokenSymbol, stakingTokenSymbol }) => {
+  return (
+    <CardHeader>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Flex flexDirection="column">
+          <Heading size="lg">Earn {earningTokenSymbol}</Heading>
+          <Text color="textSubtle">Stake {stakingTokenSymbol}</Text>
+        </Flex>
+        <Image src={`/images/pools/${poolImage}`} alt={earningTokenSymbol} width={64} height={64} />
+      </Flex>
+    </CardHeader>
+  )
+}
+
+export default StyledCardHeader
diff --git a/src/views/Pools/components/WithdrawModal.tsx b/src/views/Pools/components/PoolCard/WithdrawModal.tsx
similarity index 100%
rename from src/views/Pools/components/WithdrawModal.tsx
rename to src/views/Pools/components/PoolCard/WithdrawModal.tsx
diff --git a/src/views/Pools/components/PoolCard.tsx b/src/views/Pools/components/PoolCard/index.tsx
similarity index 92%
rename from src/views/Pools/components/PoolCard.tsx
rename to src/views/Pools/components/PoolCard/index.tsx
index 7727026ac9192..37278ec6a2458 100644
--- a/src/views/Pools/components/PoolCard.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon, Image } from '@pancakeswap-libs/uikit'
+import { Button, IconButton, useModal, AddIcon } from '@pancakeswap-libs/uikit'
 import { useWeb3React } from '@web3-react/core'
 import UnlockButton from 'components/UnlockButton'
 import Label from 'components/Label'
@@ -22,17 +22,13 @@ import { useGetApiPrice } from 'state/hooks'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
 import CompoundModal from './CompoundModal'
-import CardTitle from './CardTitle'
-import Card from './Card'
+import StyledCard from './StyledCard'
 import OldSyrupTitle from './OldSyrupTitle'
 import HarvestButton from './HarvestButton'
 import CardFooter from './CardFooter'
+import StyledCardHeader from './StyledCardHeader'
 
-interface HarvestProps {
-  pool: Pool
-}
-
-const PoolCard: React.FC<HarvestProps> = ({ pool }) => {
+const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const {
     sousId,
     stakingToken,
@@ -117,16 +113,15 @@ const PoolCard: React.FC<HarvestProps> = ({ pool }) => {
   }, [onApprove, setRequestedApproval])
 
   return (
-    <Card isActive={isCardActive} isFinished={isFinished && sousId !== 0}>
+    <StyledCard isActive={isCardActive} isFinished={isFinished && sousId !== 0}>
+      <StyledCardHeader
+        poolImage={poolImage}
+        earningTokenSymbol={earningToken.symbol}
+        stakingTokenSymbol={stakingToken.symbol}
+      />
       {isFinished && sousId !== 0 && <PoolFinishedSash />}
       <div style={{ padding: '24px' }}>
-        <CardTitle isFinished={isFinished && sousId !== 0}>
-          {isOldSyrup && '[OLD]'} {earningToken.symbol} {TranslateString(348, 'Pool')}
-        </CardTitle>
         <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
-          <div style={{ flex: 1 }}>
-            <Image src={`/images/pools/${poolImage}`} alt={earningToken.symbol} width={64} height={64} />
-          </div>
           {account && harvest && !isOldSyrup && (
             <HarvestButton
               disabled={!earnings.toNumber() || pendingTx}
@@ -217,7 +212,7 @@ const PoolCard: React.FC<HarvestProps> = ({ pool }) => {
         tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
         tokenDecimals={earningToken.decimals}
       />
-    </Card>
+    </StyledCard>
   )
 }
 
diff --git a/src/views/Pools/components/PoolTabButtons/index.tsx b/src/views/Pools/components/PoolTabButtons.tsx
similarity index 100%
rename from src/views/Pools/components/PoolTabButtons/index.tsx
rename to src/views/Pools/components/PoolTabButtons.tsx
diff --git a/src/views/Pools/index.ts b/src/views/Pools/index.ts
deleted file mode 100644
index d03b7bc86c530..0000000000000
--- a/src/views/Pools/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Syrup'
diff --git a/src/views/Pools/Syrup.tsx b/src/views/Pools/index.tsx
similarity index 98%
rename from src/views/Pools/Syrup.tsx
rename to src/views/Pools/index.tsx
index 3ebd7f6c4c08a..7b839d0809060 100644
--- a/src/views/Pools/Syrup.tsx
+++ b/src/views/Pools/index.tsx
@@ -14,7 +14,6 @@ import PageHeader from 'components/PageHeader'
 import Coming from './components/Coming'
 import PoolCard from './components/PoolCard'
 import PoolTabButtons from './components/PoolTabButtons'
-import Divider from './components/Divider'
 
 const ButtonText = styled(Text)`
   display: none;
@@ -70,7 +69,6 @@ const Syrup: React.FC = () => {
       </PageHeader>
       <Page>
         <PoolTabButtons stakedOnly={stakedOnly} setStakedOnly={setStakedOnly} />
-        <Divider />
         <FlexLayout>
           <Route exact path={`${path}`}>
             <>

From 3efb72d4dac42975f873a1a56e11ae85e877e06e Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 13 Apr 2021 15:11:50 +0100
Subject: [PATCH 03/40] feat(syrup-pool-v2): Yeet some sheet

---
 src/views/Pools/components/Coming.tsx         | 80 -------------------
 .../components/PoolCard/OldSyrupTitle.tsx     | 43 ----------
 src/views/Pools/components/PoolCard/index.tsx |  4 +-
 src/views/Pools/index.tsx                     |  2 -
 4 files changed, 2 insertions(+), 127 deletions(-)
 delete mode 100644 src/views/Pools/components/Coming.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/OldSyrupTitle.tsx

diff --git a/src/views/Pools/components/Coming.tsx b/src/views/Pools/components/Coming.tsx
deleted file mode 100644
index aeeb5523e8721..0000000000000
--- a/src/views/Pools/components/Coming.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Image, Button } from '@pancakeswap-libs/uikit'
-import { CommunityTag } from 'components/Tags'
-import useI18n from 'hooks/useI18n'
-import Card from './PoolCard/StyledCard'
-import CardTitle from './PoolCard/CardTitle'
-
-const Balance = styled.div`
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 40px;
-  font-weight: 600;
-`
-
-const Label = styled.div`
-  color: ${({ theme }) => theme.colors.textSubtle};
-  font-size: 14px;
-  margin-bottom: 16px;
-`
-
-const DetailPlaceholder = styled.div`
-  display: flex;
-  font-size: 14px;
-`
-const Value = styled.div`
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 14px;
-`
-
-const Footer = styled.div`
-  border-top: 1px solid ${({ theme }) => (theme.isDark ? '#524B63' : '#E9EAEB')};
-  padding: 24px;
-`
-const Coming: React.FC = () => {
-  const TranslateString = useI18n()
-
-  return (
-    <Card>
-      <div style={{ padding: '24px' }}>
-        <CardTitle>
-          {TranslateString(414, 'Your Project?')}{' '}
-          <span role="img" aria-label="eyes">
-            👀
-          </span>
-        </CardTitle>
-        <Image src="/images/bunny-question.svg" width={64} height={64} alt="Your project here" />
-        <Balance>???</Balance>
-        <Label>{TranslateString(416, 'Create a pool for your token')}</Label>
-        <Button
-          variant="secondary"
-          as="a"
-          href="https://docs.google.com/forms/d/e/1FAIpQLScGdT5rrVMr4WOWr08pvcroSeuIOtEJf1sVdQGVdcAOqryigQ/viewform"
-          external
-          width="100%"
-          mb="16px"
-        >
-          {TranslateString(418, 'Apply Now')}
-        </Button>
-        <DetailPlaceholder>
-          <div style={{ flex: 1 }}>{TranslateString(736, 'APR')}:</div>
-          <Value>??</Value>
-        </DetailPlaceholder>
-        <DetailPlaceholder>
-          <div style={{ flex: 1 }}>
-            <span role="img" aria-label="syrup">
-              🥞{' '}
-            </span>
-            {TranslateString(384, 'Your Stake')}:
-          </div>
-          <Value>??? CAKE</Value>
-        </DetailPlaceholder>
-      </div>
-      <Footer>
-        <CommunityTag />
-      </Footer>
-    </Card>
-  )
-}
-
-export default Coming
diff --git a/src/views/Pools/components/PoolCard/OldSyrupTitle.tsx b/src/views/Pools/components/PoolCard/OldSyrupTitle.tsx
deleted file mode 100644
index 61ad11eb1ecb9..0000000000000
--- a/src/views/Pools/components/PoolCard/OldSyrupTitle.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import CardTitle from './CardTitle'
-
-interface Props {
-  hasBalance?: boolean
-}
-
-const Title = styled.div`
-  color: #ed4b9e;
-  font-size: 24px;
-  font-weight: 600;
-  text-transform: uppercase;
-`
-
-const ActionLink = styled.a`
-  color: #ed4b9e;
-  font-size: 14px;
-`
-
-const OldSyrupTitle: React.FC<Props> = ({ hasBalance = false }) => {
-  if (hasBalance) {
-    return (
-      <div>
-        <Title>Action Required</Title>
-        <ActionLink
-          href=" https://pancakeswap.medium.com/urgent-action-required-changes-to-syrup-pools-70b98d7b2541"
-          target="_blank"
-        >
-          What do I need to do?
-        </ActionLink>
-      </div>
-    )
-  }
-
-  return (
-    <div>
-      <CardTitle isFinished>FINISHED</CardTitle>
-    </div>
-  )
-}
-
-export default OldSyrupTitle
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 37278ec6a2458..26f8d51d77884 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -23,7 +23,6 @@ import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
 import CompoundModal from './CompoundModal'
 import StyledCard from './StyledCard'
-import OldSyrupTitle from './OldSyrupTitle'
 import HarvestButton from './HarvestButton'
 import CardFooter from './CardFooter'
 import StyledCardHeader from './StyledCardHeader'
@@ -146,7 +145,8 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
             )}
           </BalanceAndCompound>
         ) : (
-          <OldSyrupTitle hasBalance={accountHasStakedBalance} />
+          <span>Is old syrup</span>
+          // <OldSyrupTitle hasBalance={accountHasStakedBalance} />
         )}
         <Label isFinished={isFinished && sousId !== 0} text={TranslateString(330, `${earningToken.symbol} earned`)} />
         <StyledCardActions>
diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 7b839d0809060..2ba2c6f6a49cf 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -11,7 +11,6 @@ import { usePools, useBlock } from 'state/hooks'
 import FlexLayout from 'components/layout/Flex'
 import Page from 'components/layout/Page'
 import PageHeader from 'components/PageHeader'
-import Coming from './components/Coming'
 import PoolCard from './components/PoolCard'
 import PoolTabButtons from './components/PoolTabButtons'
 
@@ -75,7 +74,6 @@ const Syrup: React.FC = () => {
               {stakedOnly
                 ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
                 : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
-              <Coming />
             </>
           </Route>
           <Route path={`${path}/history`}>

From b99f8faa957c6808f66be32c531028bbdc026ffa Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 13 Apr 2021 16:15:20 +0100
Subject: [PATCH 04/40] feat(syrup-pool-v2): Add finished sash and handle
 finished state of card header

---
 .../components/PoolCard/PoolFinishedSash.tsx  | 27 +++++++++++++++++++
 .../components/PoolCard/StyledCardHeader.tsx  | 19 +++++++++----
 src/views/Pools/components/PoolCard/index.tsx | 21 ++++++---------
 src/views/Pools/svgs/SashVector.tsx           | 12 +++++++++
 4 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
 create mode 100644 src/views/Pools/svgs/SashVector.tsx

diff --git a/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx b/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
new file mode 100644
index 0000000000000..08501b48f41c3
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Text, Box } from '@pancakeswap-libs/uikit'
+import styled from 'styled-components'
+import useI18n from 'hooks/useI18n'
+import SashVector from '../../svgs/SashVector'
+
+const StyledText = styled(Text)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: rotate(45deg) translate(-50%, -40%);
+`
+
+const PoolFinishedSash = () => {
+  const TranslateString = useI18n()
+
+  return (
+    <Box position="relative">
+      <StyledText color="card" fontSize="16px" bold>
+        {TranslateString(388, 'Finished')}
+      </StyledText>
+      <SashVector height="112px" width="112px" />
+    </Box>
+  )
+}
+
+export default PoolFinishedSash
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index 286d5f5fd886a..75770062cde6a 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -1,21 +1,30 @@
 import React from 'react'
 import { CardHeader, Heading, Text, Flex, Image } from '@pancakeswap-libs/uikit'
+import styled from 'styled-components'
+
+const Wrapper = styled(CardHeader)<{ isFinished?: boolean }>`
+  background: ${({ isFinished, theme }) =>
+    isFinished ? theme.colors.backgroundDisabled : theme.card.cardHeaderBackground.default};
+`
 
 const StyledCardHeader: React.FC<{
   poolImage: string
   earningTokenSymbol: string
   stakingTokenSymbol: string
-}> = ({ poolImage, earningTokenSymbol, stakingTokenSymbol }) => {
+  isFinished?: boolean
+}> = ({ poolImage, earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
   return (
-    <CardHeader>
+    <Wrapper isFinished={isFinished}>
       <Flex alignItems="center" justifyContent="space-between">
         <Flex flexDirection="column">
-          <Heading size="lg">Earn {earningTokenSymbol}</Heading>
-          <Text color="textSubtle">Stake {stakingTokenSymbol}</Text>
+          <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
+            Earn {earningTokenSymbol}
+          </Heading>
+          <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
         </Flex>
         <Image src={`/images/pools/${poolImage}`} alt={earningTokenSymbol} width={64} height={64} />
       </Flex>
-    </CardHeader>
+    </Wrapper>
   )
 }
 
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 26f8d51d77884..44374d0d04cdd 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon } from '@pancakeswap-libs/uikit'
+import { Button, IconButton, useModal, AddIcon, Box } from '@pancakeswap-libs/uikit'
 import { useWeb3React } from '@web3-react/core'
 import UnlockButton from 'components/UnlockButton'
 import Label from 'components/Label'
@@ -19,6 +19,7 @@ import { PoolCategory } from 'config/constants/types'
 import tokens from 'config/constants/tokens'
 import { Pool } from 'state/types'
 import { useGetApiPrice } from 'state/hooks'
+import PoolFinishedSash from './PoolFinishedSash'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
 import CompoundModal from './CompoundModal'
@@ -117,8 +118,13 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         poolImage={poolImage}
         earningTokenSymbol={earningToken.symbol}
         stakingTokenSymbol={stakingToken.symbol}
+        isFinished={isFinished && sousId !== 0}
       />
-      {isFinished && sousId !== 0 && <PoolFinishedSash />}
+      {isFinished && sousId !== 0 && (
+        <Box position="absolute" top={0} right={0}>
+          <PoolFinishedSash />
+        </Box>
+      )}
       <div style={{ padding: '24px' }}>
         <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
           {account && harvest && !isOldSyrup && (
@@ -216,17 +222,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   )
 }
 
-const PoolFinishedSash = styled.div`
-  background-image: url('/images/pool-finished-sash.svg');
-  background-position: top right;
-  background-repeat: not-repeat;
-  height: 135px;
-  position: absolute;
-  right: -24px;
-  top: -24px;
-  width: 135px;
-`
-
 const StyledCardActions = styled.div`
   display: flex;
   justify-content: center;
diff --git a/src/views/Pools/svgs/SashVector.tsx b/src/views/Pools/svgs/SashVector.tsx
new file mode 100644
index 0000000000000..77e44d46f8c29
--- /dev/null
+++ b/src/views/Pools/svgs/SashVector.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Svg, SvgProps } from '@pancakeswap-libs/uikit'
+
+const SashVector: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 104 96" {...props}>
+      <path d="M45 -8.00098H0L112 103.999V58.999L45 -8.00098Z" fill="#BDC2C4" />
+    </Svg>
+  )
+}
+
+export default SashVector

From 70ca8916892429fd4d5867b37dc267ec5468426c Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 13 Apr 2021 16:45:21 +0100
Subject: [PATCH 05/40] feat(syrup-pool-v2): Create APR row comp

---
 src/components/Balance.tsx                    |  5 ++--
 .../Pools/components/PoolCard/AprRow.tsx      | 29 ++++++++++++++++++
 .../components/PoolCard/StyledCardHeader.tsx  | 30 ++++++++++++-------
 src/views/Pools/components/PoolCard/index.tsx | 24 +++++----------
 4 files changed, 58 insertions(+), 30 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/AprRow.tsx

diff --git a/src/components/Balance.tsx b/src/components/Balance.tsx
index 3ca503f261619..02cde9922cab7 100644
--- a/src/components/Balance.tsx
+++ b/src/components/Balance.tsx
@@ -6,6 +6,7 @@ interface TextProps {
   isDisabled?: boolean
   fontSize?: string
   color?: string
+  bold?: boolean
 }
 
 interface BalanceProps extends TextProps {
@@ -14,7 +15,7 @@ interface BalanceProps extends TextProps {
   unit?: string
 }
 
-const Balance: React.FC<BalanceProps> = ({ value, fontSize, color, decimals, isDisabled, unit }) => {
+const Balance: React.FC<BalanceProps> = ({ value, fontSize, color, decimals, isDisabled, unit, bold }) => {
   const previousValue = useRef(0)
 
   useEffect(() => {
@@ -22,7 +23,7 @@ const Balance: React.FC<BalanceProps> = ({ value, fontSize, color, decimals, isD
   }, [value])
 
   return (
-    <Text bold color={isDisabled ? 'textDisabled' : color} fontSize={fontSize}>
+    <Text bold={bold} color={isDisabled ? 'textDisabled' : color} fontSize={fontSize}>
       <CountUp start={previousValue.current} end={value} decimals={decimals} duration={1} separator="," />
       {value && unit && <span>{unit}</span>}
     </Text>
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
new file mode 100644
index 0000000000000..ba82e7b23935f
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Flex, Text } from '@pancakeswap-libs/uikit'
+import useI18n from 'hooks/useI18n'
+import Balance from 'components/Balance'
+
+interface AprProps {
+  tokenName?: string
+  isFinished: boolean
+  isOldSyrup: boolean
+  apy: number
+}
+
+const AprRow: React.FC<AprProps> = ({ isFinished, isOldSyrup, apy }) => {
+  const TranslateString = useI18n()
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <Text fontSize="16px">{TranslateString(736, 'APR')}:</Text>
+      {isFinished || isOldSyrup || !apy ? (
+        '0%'
+      ) : (
+        <Flex>
+          <Balance fontSize="16px" bold={false} isDisabled={isFinished} value={apy} decimals={2} unit="%" />
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+
+export default AprRow
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index 75770062cde6a..ab74cb379a8f6 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
-import { CardHeader, Heading, Text, Flex, Image } from '@pancakeswap-libs/uikit'
+import { CardHeader, Heading, Text, Flex, Image, Box } from '@pancakeswap-libs/uikit'
 import styled from 'styled-components'
+import PoolFinishedSash from './PoolFinishedSash'
 
 const Wrapper = styled(CardHeader)<{ isFinished?: boolean }>`
   background: ${({ isFinished, theme }) =>
@@ -14,17 +15,24 @@ const StyledCardHeader: React.FC<{
   isFinished?: boolean
 }> = ({ poolImage, earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
   return (
-    <Wrapper isFinished={isFinished}>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Flex flexDirection="column">
-          <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
-            Earn {earningTokenSymbol}
-          </Heading>
-          <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
+    <>
+      <Wrapper isFinished={isFinished}>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Flex flexDirection="column">
+            <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
+              Earn {earningTokenSymbol}
+            </Heading>
+            <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
+          </Flex>
+          <Image src={`/images/pools/${poolImage}`} alt={earningTokenSymbol} width={64} height={64} />
         </Flex>
-        <Image src={`/images/pools/${poolImage}`} alt={earningTokenSymbol} width={64} height={64} />
-      </Flex>
-    </Wrapper>
+      </Wrapper>
+      {isFinished && (
+        <Box position="absolute" top={0} right={0}>
+          <PoolFinishedSash />
+        </Box>
+      )}
+    </>
   )
 }
 
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 44374d0d04cdd..6d37e74f5138d 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon, Box } from '@pancakeswap-libs/uikit'
+import { Button, IconButton, useModal, AddIcon, CardBody } from '@pancakeswap-libs/uikit'
 import { useWeb3React } from '@web3-react/core'
 import UnlockButton from 'components/UnlockButton'
 import Label from 'components/Label'
@@ -19,7 +19,7 @@ import { PoolCategory } from 'config/constants/types'
 import tokens from 'config/constants/tokens'
 import { Pool } from 'state/types'
 import { useGetApiPrice } from 'state/hooks'
-import PoolFinishedSash from './PoolFinishedSash'
+import AprRow from './AprRow'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
 import CompoundModal from './CompoundModal'
@@ -120,12 +120,9 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         stakingTokenSymbol={stakingToken.symbol}
         isFinished={isFinished && sousId !== 0}
       />
-      {isFinished && sousId !== 0 && (
-        <Box position="absolute" top={0} right={0}>
-          <PoolFinishedSash />
-        </Box>
-      )}
-      <div style={{ padding: '24px' }}>
+      <CardBody>
+        <AprRow isFinished={isFinished} isOldSyrup={isOldSyrup} apy={apy} />
+
         <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
           {account && harvest && !isOldSyrup && (
             <HarvestButton
@@ -189,14 +186,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
               </>
             ))}
         </StyledCardActions>
-        <StyledDetails>
-          <div>{TranslateString(736, 'APR')}:</div>
-          {isFinished || isOldSyrup || !apy ? (
-            '-'
-          ) : (
-            <Balance fontSize="14px" isDisabled={isFinished} value={apy} decimals={2} unit="%" />
-          )}
-        </StyledDetails>
+
         <StyledDetails>
           <div>{TranslateString(384, 'Your Stake')}:</div>
           <Balance
@@ -205,7 +195,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
             value={getBalanceNumber(stakedBalance, stakingToken.decimals)}
           />
         </StyledDetails>
-      </div>
+      </CardBody>
       <CardFooter
         projectLink={earningToken.projectLink}
         decimals={stakingToken.decimals}

From ee5a35ef878ac60062cd77bce10269c07ae31b8c Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 14 Apr 2021 17:02:31 +0100
Subject: [PATCH 06/40] feat(syrup-pool-v2): Tidy up & restyling of footer

---
 src/components/ApyCalculatorModal/index.tsx   |   8 +-
 .../Pools/components/PoolCard/AprRow.tsx      |  29 ++-
 .../Pools/components/PoolCard/CardFooter.tsx  | 178 +++++++-----------
 src/views/Pools/components/PoolCard/index.tsx |   7 +-
 src/views/Pools/index.tsx                     |   4 +-
 5 files changed, 93 insertions(+), 133 deletions(-)

diff --git a/src/components/ApyCalculatorModal/index.tsx b/src/components/ApyCalculatorModal/index.tsx
index ba913fe5c351a..56f61bfdadb98 100644
--- a/src/components/ApyCalculatorModal/index.tsx
+++ b/src/components/ApyCalculatorModal/index.tsx
@@ -7,9 +7,9 @@ import { cakeEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundA
 
 interface ApyCalculatorModalProps {
   onDismiss?: () => void
+  cakePrice: BigNumber
+  apr: number
   lpLabel?: string
-  cakePrice?: BigNumber
-  apr?: number
   addLiquidityUrl?: string
 }
 
@@ -31,10 +31,10 @@ const Description = styled(Text)`
 
 const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
   onDismiss,
-  lpLabel,
   cakePrice,
   apr,
-  addLiquidityUrl,
+  lpLabel = '',
+  addLiquidityUrl = '',
 }) => {
   const TranslateString = useI18n()
   const oneThousandDollarsWorthOfCake = 1000 / cakePrice.toNumber()
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index ba82e7b23935f..0cd745e3f4b21 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,26 +1,35 @@
 import React from 'react'
-import { Flex, Text } from '@pancakeswap-libs/uikit'
+import BigNumber from 'bignumber.js'
+import { Flex, Text, IconButton, useModal, CalculateIcon } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 import Balance from 'components/Balance'
+import ApyCalculatorModal from 'components/ApyCalculatorModal'
 
-interface AprProps {
-  tokenName?: string
+interface AprRowProps {
+  isOldSyrup?: boolean
   isFinished: boolean
-  isOldSyrup: boolean
-  apy: number
+  apr: number
+  cakePrice: BigNumber
 }
 
-const AprRow: React.FC<AprProps> = ({ isFinished, isOldSyrup, apy }) => {
+const AprRow: React.FC<AprRowProps> = ({ isOldSyrup = false, cakePrice, isFinished, apr }) => {
   const TranslateString = useI18n()
+  const [onPresentApyModal] = useModal(<ApyCalculatorModal cakePrice={cakePrice} apr={apr} />)
+
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <Text fontSize="16px">{TranslateString(736, 'APR')}:</Text>
-      {isFinished || isOldSyrup || !apy ? (
+      {isFinished || isOldSyrup || !apr ? (
         '0%'
       ) : (
-        <Flex>
-          <Balance fontSize="16px" bold={false} isDisabled={isFinished} value={apy} decimals={2} unit="%" />
-        </Flex>
+        <>
+          <Flex alignItems="center">
+            <Balance fontSize="16px" bold={false} isDisabled={isFinished} value={apr} decimals={2} unit="%" />
+            <IconButton onClick={onPresentApyModal} variant="text" scale="sm">
+              <CalculateIcon color="textSubtle" width="18px" />
+            </IconButton>
+          </Flex>
+        </>
       )}
     </Flex>
   )
diff --git a/src/views/Pools/components/PoolCard/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
index dc66f6ef33e3b..a75f753ee4f1e 100644
--- a/src/views/Pools/components/PoolCard/CardFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter.tsx
@@ -3,22 +3,13 @@ import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
-import { ChevronDown, ChevronUp } from 'react-feather'
-import { Flex, MetamaskIcon } from '@pancakeswap-libs/uikit'
+import { Flex, MetamaskIcon, CardFooter, ExpandableLabel, Text, LinkExternal, TimerIcon } from '@pancakeswap-libs/uikit'
 import Balance from 'components/Balance'
-import { CommunityTag, CoreTag, BinanceTag } from 'components/Tags'
 import { useBlock } from 'state/hooks'
-import { PoolCategory } from 'config/constants/types'
 import { registerToken } from 'utils/wallet'
 import { BASE_URL } from 'config'
 
-const tags = {
-  [PoolCategory.BINANCE]: BinanceTag,
-  [PoolCategory.CORE]: CoreTag,
-  [PoolCategory.COMMUNITY]: CommunityTag,
-}
-
-interface Props {
+interface FooterProps {
   projectLink: string
   decimals: number
   totalStaked: BigNumber
@@ -28,59 +19,17 @@ interface Props {
   startBlock: number
   endBlock: number
   isFinished: boolean
-  poolCategory: PoolCategory
+  stakingTokenSymbol: string
 }
 
-const StyledFooter = styled.div<{ isFinished: boolean }>`
-  border-top: 1px solid ${({ theme }) => (theme.isDark ? '#524B63' : '#E9EAEB')};
-  color: ${({ isFinished, theme }) => theme.colors[isFinished ? 'textDisabled2' : 'primary2']};
-  padding: 24px;
-`
-
-const StyledDetailsButton = styled.button`
-  align-items: center;
-  background-color: transparent;
-  border: 0;
-  color: ${(props) => props.theme.colors.primary};
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 16px;
-  font-weight: 600;
-  height: 32px;
-  justify-content: center;
-  outline: 0;
-  padding: 0;
-  &:hover {
-    opacity: 0.9;
-  }
-
-  & > svg {
-    margin-left: 4px;
+const ExpandedWrapper = styled(Flex)`
+  svg {
+    height: 14px;
+    width: 14px;
   }
 `
 
-const Details = styled.div`
-  margin-top: 24px;
-`
-
-const Row = styled(Flex)`
-  align-items: center;
-`
-
-const FlexFull = styled.div`
-  flex: 1;
-`
-const Label = styled.div`
-  font-size: 14px;
-`
-const TokenLink = styled.a`
-  font-size: 14px;
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.primary};
-  cursor: pointer;
-`
-
-const CardFooter: React.FC<Props> = ({
+const Footer: React.FC<FooterProps> = ({
   projectLink,
   decimals,
   tokenAddress,
@@ -90,75 +39,76 @@ const CardFooter: React.FC<Props> = ({
   isFinished,
   startBlock,
   endBlock,
-  poolCategory,
+  stakingTokenSymbol,
 }) => {
   const { currentBlock } = useBlock()
-  const [isOpen, setIsOpen] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
   const TranslateString = useI18n()
-  const Icon = isOpen ? ChevronUp : ChevronDown
-
-  const handleClick = () => setIsOpen(!isOpen)
-  const Tag = tags[poolCategory]
 
   const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
   const blocksRemaining = Math.max(endBlock - currentBlock, 0)
 
   const imageSrc = `${BASE_URL}/images/tokens/${tokenName.toLowerCase()}.png`
 
+  const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
+
   return (
-    <StyledFooter isFinished={isFinished}>
-      <Row>
-        <FlexFull>
-          <Tag />
-        </FlexFull>
-        <StyledDetailsButton onClick={handleClick}>
-          {isOpen ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')} <Icon />
-        </StyledDetailsButton>
-      </Row>
-      {isOpen && (
-        <Details>
-          <Row mb="4px">
-            <FlexFull>
-              <Label>
-                <span role="img" aria-label="syrup">
-                  🥞{' '}
-                </span>
-                {TranslateString(408, 'Total')}
-              </Label>
-            </FlexFull>
-            <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
-          </Row>
-          {blocksUntilStart > 0 && (
-            <Row mb="4px">
-              <FlexFull>
-                <Label>{TranslateString(1212, 'Start')}:</Label>
-              </FlexFull>
-              <Balance fontSize="14px" isDisabled={isFinished} value={blocksUntilStart} decimals={0} />
-            </Row>
-          )}
-          {blocksUntilStart === 0 && blocksRemaining > 0 && (
-            <Row mb="4px">
-              <FlexFull>
-                <Label>{TranslateString(410, 'End')}:</Label>
-              </FlexFull>
-              <Balance fontSize="14px" isDisabled={isFinished} value={blocksRemaining} decimals={0} />
-            </Row>
-          )}
+    <CardFooter>
+      <Flex>
+        <ExpandableLabel expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')}
+        </ExpandableLabel>
+      </Flex>
+      {isExpanded && (
+        <ExpandedWrapper flexDirection="column">
+          <Flex justifyContent="space-between" alignItems="center">
+            <Text fontSize="14px">{TranslateString(999, 'Total staked:')}</Text>
+            <Flex alignItems="flex-start">
+              <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
+              <Text ml="4px" fontSize="14px">
+                {stakingTokenSymbol}
+              </Text>
+            </Flex>
+          </Flex>
+          <Flex justifyContent="space-between" alignItems="center">
+            <Text fontSize="14px">
+              {hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:
+            </Text>
+            <Flex alignItems="center">
+              <Balance
+                color="primary"
+                fontSize="14px"
+                isDisabled={isFinished}
+                value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
+                decimals={0}
+              />
+              <Text ml="4px" color="primary" fontSize="14px">
+                {TranslateString(999, 'blocks')}
+              </Text>
+              <TimerIcon ml="4px" color="primary" />
+            </Flex>
+          </Flex>
+          <Flex mb="4px" justifyContent="flex-end">
+            <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
+              {TranslateString(412, 'View project site')}
+            </LinkExternal>
+          </Flex>
           {tokenAddress && (
-            <Flex mb="4px">
-              <TokenLink onClick={() => registerToken(tokenAddress, tokenName, tokenDecimals, imageSrc)}>
-                Add {tokenName} to Metamask
-              </TokenLink>
-              <MetamaskIcon height={15} width={15} ml="4px" />
+            <Flex justifyContent="flex-end">
+              <Text
+                color="primary"
+                fontSize="14px"
+                onClick={() => registerToken(tokenAddress, tokenName, tokenDecimals, imageSrc)}
+              >
+                Add to Metamask
+              </Text>
+              <MetamaskIcon ml="4px" />
             </Flex>
           )}
-          <TokenLink href={projectLink} target="_blank">
-            {TranslateString(412, 'View project site')}
-          </TokenLink>
-        </Details>
+        </ExpandedWrapper>
       )}
-    </StyledFooter>
+    </CardFooter>
   )
 }
 
-export default React.memo(CardFooter)
+export default React.memo(Footer)
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 6d37e74f5138d..cf9256e592a4f 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -18,7 +18,7 @@ import Balance from 'components/Balance'
 import { PoolCategory } from 'config/constants/types'
 import tokens from 'config/constants/tokens'
 import { Pool } from 'state/types'
-import { useGetApiPrice } from 'state/hooks'
+import { useGetApiPrice, usePriceCakeBusd } from 'state/hooks'
 import AprRow from './AprRow'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
@@ -52,6 +52,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const { onStake } = useSousStake(sousId, isBnbPool)
   const { onUnstake } = useSousUnstake(sousId)
   const { onReward } = useSousHarvest(sousId, isBnbPool)
+  const cakePrice = usePriceCakeBusd()
 
   // APY
   const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
@@ -121,7 +122,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         isFinished={isFinished && sousId !== 0}
       />
       <CardBody>
-        <AprRow isFinished={isFinished} isOldSyrup={isOldSyrup} apy={apy} />
+        <AprRow isFinished={isFinished} isOldSyrup={isOldSyrup} apr={apy} cakePrice={cakePrice} />
 
         <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
           {account && harvest && !isOldSyrup && (
@@ -203,10 +204,10 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         startBlock={startBlock}
         endBlock={endBlock}
         isFinished={isFinished}
-        poolCategory={poolCategory}
         tokenName={earningToken.symbol}
         tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
         tokenDecimals={earningToken.decimals}
+        stakingTokenSymbol={stakingToken.symbol}
       />
     </StyledCard>
   )
diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 2ba2c6f6a49cf..020e6801d65b1 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -21,7 +21,7 @@ const ButtonText = styled(Text)`
   }
 `
 
-const Syrup: React.FC = () => {
+const Pools: React.FC = () => {
   const { path } = useRouteMatch()
   const TranslateString = useI18n()
   const { account } = useWeb3React()
@@ -87,4 +87,4 @@ const Syrup: React.FC = () => {
   )
 }
 
-export default Syrup
+export default Pools

From e5f7df2583785c1efc4d8a8ef83d95d4b914ea72 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Mon, 19 Apr 2021 15:14:28 +0100
Subject: [PATCH 07/40] feat(syrup-pool-v2): Finish up various footer comps

---
 src/views/Pools/Syrup.tsx                     | 102 -----------
 src/views/Pools/components/CardFooter.tsx     | 166 ------------------
 .../Pools/components/PoolCard/CardFooter.tsx  |  86 ++++++---
 .../components/PoolCard/PoolFinishedSash.tsx  |   2 +-
 src/views/Pools/components/PoolCard/index.tsx |  10 +-
 5 files changed, 69 insertions(+), 297 deletions(-)
 delete mode 100644 src/views/Pools/Syrup.tsx
 delete mode 100644 src/views/Pools/components/CardFooter.tsx

diff --git a/src/views/Pools/Syrup.tsx b/src/views/Pools/Syrup.tsx
deleted file mode 100644
index a4cb331dc8c48..0000000000000
--- a/src/views/Pools/Syrup.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React, { useMemo } from 'react'
-import { Route, useRouteMatch } from 'react-router-dom'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import { useWeb3React } from '@web3-react/core'
-import { Heading } from '@pancakeswap-libs/uikit'
-import orderBy from 'lodash/orderBy'
-import partition from 'lodash/partition'
-import useI18n from 'hooks/useI18n'
-import usePersistState from 'hooks/usePersistState'
-import { usePools, useBlock } from 'state/hooks'
-import FlexLayout from 'components/layout/Flex'
-import Page from 'components/layout/Page'
-import Coming from './components/Coming'
-import PoolCard from './components/PoolCard'
-import PoolTabButtons from './components/PoolTabButtons'
-import Divider from './components/Divider'
-
-const Syrup: React.FC = () => {
-  const { path } = useRouteMatch()
-  const TranslateString = useI18n()
-  const { account } = useWeb3React()
-  const pools = usePools(account)
-  const { currentBlock } = useBlock()
-  const [stakedOnly, setStakedOnly] = usePersistState(false, 'pancake_pool_staked')
-
-  const [finishedPools, openPools] = useMemo(
-    () => partition(pools, (pool) => pool.isFinished || currentBlock > pool.endBlock),
-    [currentBlock, pools],
-  )
-  const stakedOnlyPools = useMemo(
-    () => openPools.filter((pool) => pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0)),
-    [openPools],
-  )
-
-  return (
-    <Page>
-      <Hero>
-        <div>
-          <Heading as="h1" size="xxl" mb="16px">
-            {TranslateString(738, 'Syrup Pool')}
-          </Heading>
-          <ul>
-            <li>{TranslateString(580, 'Stake CAKE to earn new tokens.')}</li>
-            <li>{TranslateString(486, 'You can unstake at any time.')}</li>
-            <li>{TranslateString(406, 'Rewards are calculated per block.')}</li>
-          </ul>
-        </div>
-        <img src="/images/syrup.png" alt="SYRUP POOL icon" width={410} height={191} />
-      </Hero>
-      <PoolTabButtons stakedOnly={stakedOnly} setStakedOnly={setStakedOnly} />
-      <Divider />
-      <FlexLayout>
-        <Route exact path={`${path}`}>
-          <>
-            {stakedOnly
-              ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
-              : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
-            <Coming />
-          </>
-        </Route>
-        <Route path={`${path}/history`}>
-          {orderBy(finishedPools, ['sortOrder']).map((pool) => (
-            <PoolCard key={pool.sousId} pool={pool} />
-          ))}
-        </Route>
-      </FlexLayout>
-    </Page>
-  )
-}
-
-const Hero = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.colors.primary};
-  display: grid;
-  grid-gap: 32px;
-  grid-template-columns: 1fr;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 250px;
-  padding: 48px 0;
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    font-size: 16px;
-    li {
-      margin-bottom: 4px;
-    }
-  }
-  img {
-    height: auto;
-    max-width: 100%;
-  }
-  @media (min-width: 576px) {
-    grid-template-columns: 1fr 1fr;
-    margin: 0;
-    max-width: none;
-  }
-`
-
-export default Syrup
diff --git a/src/views/Pools/components/CardFooter.tsx b/src/views/Pools/components/CardFooter.tsx
deleted file mode 100644
index 7e48df9274ede..0000000000000
--- a/src/views/Pools/components/CardFooter.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import { getBalanceNumber } from 'utils/formatBalance'
-import useI18n from 'hooks/useI18n'
-import { ChevronDown, ChevronUp } from 'react-feather'
-import { Flex, MetamaskIcon } from '@pancakeswap-libs/uikit'
-import Balance from 'components/Balance'
-import { CommunityTag, CoreTag, BinanceTag } from 'components/Tags'
-import { useBlock } from 'state/hooks'
-import { PoolCategory } from 'config/constants/types'
-import { registerToken } from 'utils/wallet'
-import { BASE_URL } from 'config'
-
-const tags = {
-  [PoolCategory.BINANCE]: BinanceTag,
-  [PoolCategory.CORE]: CoreTag,
-  [PoolCategory.COMMUNITY]: CommunityTag,
-}
-
-interface Props {
-  projectLink: string
-  decimals: number
-  totalStaked: BigNumber
-  tokenName: string
-  tokenAddress: string
-  tokenDecimals: number
-  startBlock: number
-  endBlock: number
-  isFinished: boolean
-  poolCategory: PoolCategory
-}
-
-const StyledFooter = styled.div<{ isFinished: boolean }>`
-  border-top: 1px solid ${({ theme }) => (theme.isDark ? '#524B63' : '#E9EAEB')};
-  color: ${({ isFinished, theme }) => theme.colors[isFinished ? 'textDisabled2' : 'primary2']};
-  padding: 24px;
-`
-
-const StyledDetailsButton = styled.button`
-  align-items: center;
-  background-color: transparent;
-  border: 0;
-  color: ${(props) => props.theme.colors.primary};
-  cursor: pointer;
-  display: inline-flex;
-  font-size: 16px;
-  font-weight: 600;
-  height: 32px;
-  justify-content: center;
-  outline: 0;
-  padding: 0;
-  &:hover {
-    opacity: 0.9;
-  }
-
-  & > svg {
-    margin-left: 4px;
-  }
-`
-
-const Details = styled.div`
-  margin-top: 24px;
-`
-
-const Row = styled(Flex)`
-  align-items: center;
-`
-
-const FlexFull = styled.div`
-  flex: 1;
-`
-const Label = styled.div`
-  font-size: 14px;
-`
-const TokenLink = styled.a`
-  font-size: 14px;
-  text-decoration: none;
-  color: ${(props) => props.theme.colors.primary};
-  cursor: pointer;
-`
-
-const CardFooter: React.FC<Props> = ({
-  projectLink,
-  decimals,
-  tokenAddress,
-  totalStaked,
-  tokenName,
-  tokenDecimals,
-  isFinished,
-  startBlock,
-  endBlock,
-  poolCategory,
-}) => {
-  const { currentBlock } = useBlock()
-  const [isOpen, setIsOpen] = useState(false)
-  const TranslateString = useI18n()
-  const Icon = isOpen ? ChevronUp : ChevronDown
-
-  const handleClick = () => setIsOpen(!isOpen)
-  const Tag = tags[poolCategory]
-
-  const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
-  const blocksRemaining = Math.max(endBlock - currentBlock, 0)
-
-  const imageSrc = `${BASE_URL}/images/tokens/${tokenName.toLowerCase()}.png`
-
-  const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
-
-  return (
-    <StyledFooter isFinished={isFinished}>
-      <Row>
-        <FlexFull>
-          <Tag />
-        </FlexFull>
-        <StyledDetailsButton onClick={handleClick}>
-          {isOpen ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')} <Icon />
-        </StyledDetailsButton>
-      </Row>
-      {isOpen && (
-        <Details>
-          <Row mb="4px">
-            <FlexFull>
-              <Label>
-                <span role="img" aria-label="syrup">
-                  🥞{' '}
-                </span>
-                {TranslateString(408, 'Total')}
-              </Label>
-            </FlexFull>
-            <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
-          </Row>
-          {blocksUntilStart > 0 && (
-            <Row mb="4px">
-              <FlexFull>
-                <Label>{TranslateString(1212, 'Start')}:</Label>
-              </FlexFull>
-              <Balance fontSize="14px" isDisabled={isFinished} value={blocksUntilStart} decimals={0} />
-            </Row>
-          )}
-          {blocksUntilStart === 0 && blocksRemaining > 0 && (
-            <Row mb="4px">
-              <FlexFull>
-                <Label>{TranslateString(410, 'End')}:</Label>
-              </FlexFull>
-              <Balance fontSize="14px" isDisabled={isFinished} value={blocksRemaining} decimals={0} />
-            </Row>
-          )}
-          {isMetaMaskInScope && tokenAddress && (
-            <Flex mb="4px">
-              <TokenLink onClick={() => registerToken(tokenAddress, tokenName, tokenDecimals, imageSrc)}>
-                Add {tokenName} to MetaMask
-              </TokenLink>
-              <MetamaskIcon height={15} width={15} ml="4px" />
-            </Flex>
-          )}
-          <TokenLink href={projectLink} target="_blank">
-            {TranslateString(412, 'View project site')}
-          </TokenLink>
-        </Details>
-      )}
-    </StyledFooter>
-  )
-}
-
-export default React.memo(CardFooter)
diff --git a/src/views/Pools/components/PoolCard/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
index a75f753ee4f1e..e9fa5777fdde7 100644
--- a/src/views/Pools/components/PoolCard/CardFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
+import { useWeb3React } from '@web3-react/core'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
 import { Flex, MetamaskIcon, CardFooter, ExpandableLabel, Text, LinkExternal, TimerIcon } from '@pancakeswap-libs/uikit'
@@ -20,6 +21,7 @@ interface FooterProps {
   endBlock: number
   isFinished: boolean
   stakingTokenSymbol: string
+  poolContractAddress: string
 }
 
 const ExpandedWrapper = styled(Flex)`
@@ -29,6 +31,12 @@ const ExpandedWrapper = styled(Flex)`
   }
 `
 
+const ExpandableButtonWrapper = styled(Flex)`
+  button {
+    padding: 0;
+  }
+`
+
 const Footer: React.FC<FooterProps> = ({
   projectLink,
   decimals,
@@ -40,28 +48,30 @@ const Footer: React.FC<FooterProps> = ({
   startBlock,
   endBlock,
   stakingTokenSymbol,
+  poolContractAddress,
 }) => {
-  const { currentBlock } = useBlock()
-  const [isExpanded, setIsExpanded] = useState(false)
   const TranslateString = useI18n()
+  const [isExpanded, setIsExpanded] = useState(false)
+  const { account } = useWeb3React()
+  const { currentBlock } = useBlock()
+  const imageSrc = `${BASE_URL}/images/tokens/${tokenName.toLowerCase()}.png`
+  const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
 
+  const shouldShowBlockCountdown = Boolean(startBlock && endBlock)
   const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
   const blocksRemaining = Math.max(endBlock - currentBlock, 0)
-
-  const imageSrc = `${BASE_URL}/images/tokens/${tokenName.toLowerCase()}.png`
-
   const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
 
   return (
     <CardFooter>
-      <Flex>
+      <ExpandableButtonWrapper>
         <ExpandableLabel expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)}>
           {isExpanded ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')}
         </ExpandableLabel>
-      </Flex>
+      </ExpandableButtonWrapper>
       {isExpanded && (
         <ExpandedWrapper flexDirection="column">
-          <Flex justifyContent="space-between" alignItems="center">
+          <Flex mb="2px" justifyContent="space-between" alignItems="center">
             <Text fontSize="14px">{TranslateString(999, 'Total staked:')}</Text>
             <Flex alignItems="flex-start">
               <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
@@ -70,30 +80,56 @@ const Footer: React.FC<FooterProps> = ({
               </Text>
             </Flex>
           </Flex>
-          <Flex justifyContent="space-between" alignItems="center">
-            <Text fontSize="14px">
-              {hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:
-            </Text>
-            <Flex alignItems="center">
-              <Balance
-                color="primary"
-                fontSize="14px"
-                isDisabled={isFinished}
-                value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
-                decimals={0}
-              />
-              <Text ml="4px" color="primary" fontSize="14px">
-                {TranslateString(999, 'blocks')}
+          {shouldShowBlockCountdown && (
+            <Flex mb="2px" justifyContent="space-between" alignItems="center">
+              <Text fontSize="14px">
+                {hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:
               </Text>
-              <TimerIcon ml="4px" color="primary" />
+              <Flex alignItems="center">
+                <Balance
+                  color="primary"
+                  fontSize="14px"
+                  isDisabled={isFinished}
+                  value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
+                  decimals={0}
+                />
+                <Text ml="4px" color="primary" fontSize="14px">
+                  {TranslateString(999, 'blocks')}
+                </Text>
+                <TimerIcon ml="4px" color="primary" />
+              </Flex>
             </Flex>
-          </Flex>
-          <Flex mb="4px" justifyContent="flex-end">
+          )}
+          <Flex mb="2px" justifyContent="flex-end">
             <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
               {TranslateString(412, 'View project site')}
             </LinkExternal>
           </Flex>
+          {poolContractAddress && (
+            <Flex mb="2px" justifyContent="flex-end">
+              <LinkExternal
+                bold={false}
+                fontSize="14px"
+                href={`https://bscscan.com/address/${poolContractAddress}`}
+                target="_blank"
+              >
+                {TranslateString(412, 'View contract')}
+              </LinkExternal>
+            </Flex>
+          )}
           {tokenAddress && (
+            <Flex mb="2px" justifyContent="flex-end">
+              <LinkExternal
+                bold={false}
+                fontSize="14px"
+                href={`https://pancakeswap.info/token/${tokenAddress}`}
+                target="_blank"
+              >
+                {TranslateString(412, 'Info site')}
+              </LinkExternal>
+            </Flex>
+          )}
+          {account && isMetaMaskInScope && tokenAddress && (
             <Flex justifyContent="flex-end">
               <Text
                 color="primary"
diff --git a/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx b/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
index 08501b48f41c3..90cfcda424bd1 100644
--- a/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
+++ b/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
@@ -16,7 +16,7 @@ const PoolFinishedSash = () => {
 
   return (
     <Box position="relative">
-      <StyledText color="card" fontSize="16px" bold>
+      <StyledText color="backgroundAlt" fontSize="16px" bold>
         {TranslateString(388, 'Finished')}
       </StyledText>
       <SashVector height="112px" width="112px" />
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 137dda9400c48..cee776ab5e673 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -41,11 +41,15 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
     isFinished,
     userData,
     stakingLimit,
+    contractAddress,
   } = pool
 
   // Pools using native BNB behave differently than pools using a token
   const isBnbPool = poolCategory === PoolCategory.BINANCE
+
   const TranslateString = useI18n()
+  const [requestedApproval, setRequestedApproval] = useState(false)
+  const [pendingTx, setPendingTx] = useState(false)
   const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
   const { account } = useWeb3React()
   const { onApprove } = useSousApprove(stakingTokenContract, sousId)
@@ -64,9 +68,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
     parseFloat(pool.tokenPerBlock),
   )
 
-  const [requestedApproval, setRequestedApproval] = useState(false)
-  const [pendingTx, setPendingTx] = useState(false)
-
   const allowance = new BigNumber(userData?.allowance || 0)
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
@@ -77,6 +78,8 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
   const isCardActive = isFinished && accountHasStakedBalance
 
+  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
+
   const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
   const [onPresentDeposit] = useModal(
     <DepositModal
@@ -207,6 +210,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
         tokenDecimals={earningToken.decimals}
         stakingTokenSymbol={stakingToken.symbol}
+        poolContractAddress={poolContractAddress}
       />
     </StyledCard>
   )

From a82d259972dcc68286f2731e430f834e6a82b27a Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Mon, 19 Apr 2021 16:16:41 +0100
Subject: [PATCH 08/40] feat(syrup-pool-v2): Upgrade ApyCalculatorModal to
 handle different earning tokens and links

---
 .../utils/compoundApyHelpers.test.ts          | 18 +++---
 src/components/ApyCalculatorModal/index.tsx   | 61 +++++++++++--------
 src/utils/compoundApyHelpers.ts               | 12 ++--
 .../Farms/components/FarmCard/ApyButton.tsx   |  9 ++-
 .../Pools/components/PoolCard/AprRow.tsx      | 41 +++++++++----
 src/views/Pools/components/PoolCard/index.tsx | 12 +++-
 6 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/src/__tests__/utils/compoundApyHelpers.test.ts b/src/__tests__/utils/compoundApyHelpers.test.ts
index d778fccb3e2a8..c9b559ac64919 100644
--- a/src/__tests__/utils/compoundApyHelpers.test.ts
+++ b/src/__tests__/utils/compoundApyHelpers.test.ts
@@ -1,14 +1,14 @@
-import { cakeEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
+import { tokenEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
 
 it.each([
-  [{ numberOfDays: 1, farmApr: 365, cakePrice: 1 }, 10],
-  [{ numberOfDays: 7, farmApr: 20, cakePrice: 0.8 }, 4.8],
-  [{ numberOfDays: 40, farmApr: 212.21, cakePrice: 1.2 }, 217.48],
-  [{ numberOfDays: 330, farmApr: 45.12, cakePrice: 5 }, 100.67],
-  [{ numberOfDays: 365, farmApr: 100, cakePrice: 0.2 }, 8572.84],
-  [{ numberOfDays: 365, farmApr: 20, cakePrice: 1 }, 221.34],
-])('calculate cake earned with values %o', ({ numberOfDays, farmApr, cakePrice }, expected) => {
-  expect(cakeEarnedPerThousandDollarsCompounding({ numberOfDays, farmApr, cakePrice })).toEqual(expected)
+  [{ numberOfDays: 1, farmApr: 365, tokenPrice: 1 }, 10],
+  [{ numberOfDays: 7, farmApr: 20, tokenPrice: 0.8 }, 4.8],
+  [{ numberOfDays: 40, farmApr: 212.21, tokenPrice: 1.2 }, 217.48],
+  [{ numberOfDays: 330, farmApr: 45.12, tokenPrice: 5 }, 100.67],
+  [{ numberOfDays: 365, farmApr: 100, tokenPrice: 0.2 }, 8572.84],
+  [{ numberOfDays: 365, farmApr: 20, tokenPrice: 1 }, 221.34],
+])('calculate cake earned with values %o', ({ numberOfDays, farmApr, tokenPrice }, expected) => {
+  expect(tokenEarnedPerThousandDollarsCompounding({ numberOfDays, farmApr, tokenPrice })).toEqual(expected)
 })
 
 it.each([
diff --git a/src/components/ApyCalculatorModal/index.tsx b/src/components/ApyCalculatorModal/index.tsx
index 56f61bfdadb98..da92cb4bf5a09 100644
--- a/src/components/ApyCalculatorModal/index.tsx
+++ b/src/components/ApyCalculatorModal/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
-import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { Modal, Text, LinkExternal, Flex } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
-import { cakeEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
+import { tokenEarnedPerThousandDollarsCompounding, getRoi } from 'utils/compoundApyHelpers'
 
 interface ApyCalculatorModalProps {
   onDismiss?: () => void
-  cakePrice: BigNumber
+  tokenPrice: number
   apr: number
-  lpLabel?: string
-  addLiquidityUrl?: string
+  linkLabel: string
+  linkHref: string
+  earningTokenSymbol?: string
 }
 
 const Grid = styled.div`
@@ -31,25 +31,34 @@ const Description = styled(Text)`
 
 const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
   onDismiss,
-  cakePrice,
+  tokenPrice,
   apr,
-  lpLabel = '',
-  addLiquidityUrl = '',
+  linkLabel,
+  linkHref,
+  earningTokenSymbol = 'CAKE',
 }) => {
   const TranslateString = useI18n()
-  const oneThousandDollarsWorthOfCake = 1000 / cakePrice.toNumber()
+  const oneThousandDollarsWorthOfToken = 1000 / tokenPrice
 
-  const cakeEarnedPerThousand1D = cakeEarnedPerThousandDollarsCompounding({ numberOfDays: 1, farmApr: apr, cakePrice })
-  const cakeEarnedPerThousand7D = cakeEarnedPerThousandDollarsCompounding({ numberOfDays: 7, farmApr: apr, cakePrice })
-  const cakeEarnedPerThousand30D = cakeEarnedPerThousandDollarsCompounding({
+  const tokenEarnedPerThousand1D = tokenEarnedPerThousandDollarsCompounding({
+    numberOfDays: 1,
+    farmApr: apr,
+    tokenPrice,
+  })
+  const tokenEarnedPerThousand7D = tokenEarnedPerThousandDollarsCompounding({
+    numberOfDays: 7,
+    farmApr: apr,
+    tokenPrice,
+  })
+  const tokenEarnedPerThousand30D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 30,
     farmApr: apr,
-    cakePrice,
+    tokenPrice,
   })
-  const cakeEarnedPerThousand365D = cakeEarnedPerThousandDollarsCompounding({
+  const tokenEarnedPerThousand365D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 365,
     farmApr: apr,
-    cakePrice,
+    tokenPrice,
   })
 
   return (
@@ -67,7 +76,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text fontSize="12px" bold color="textSubtle" textTransform="uppercase" mb="20px">
-            {TranslateString(864, 'CAKE per $1000')}
+            {earningTokenSymbol} {TranslateString(999, 'per')} $1000
           </Text>
         </GridItem>
         {/* 1 day row */}
@@ -76,11 +85,11 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {getRoi({ amountEarned: cakeEarnedPerThousand1D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: tokenEarnedPerThousand1D, amountInvested: oneThousandDollarsWorthOfToken })}%
           </Text>
         </GridItem>
         <GridItem>
-          <Text>{cakeEarnedPerThousand1D}</Text>
+          <Text>{tokenEarnedPerThousand1D}</Text>
         </GridItem>
         {/* 7 day row */}
         <GridItem>
@@ -88,11 +97,11 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {getRoi({ amountEarned: cakeEarnedPerThousand7D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: tokenEarnedPerThousand7D, amountInvested: oneThousandDollarsWorthOfToken })}%
           </Text>
         </GridItem>
         <GridItem>
-          <Text>{cakeEarnedPerThousand7D}</Text>
+          <Text>{tokenEarnedPerThousand7D}</Text>
         </GridItem>
         {/* 30 day row */}
         <GridItem>
@@ -100,11 +109,11 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {getRoi({ amountEarned: cakeEarnedPerThousand30D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: tokenEarnedPerThousand30D, amountInvested: oneThousandDollarsWorthOfToken })}%
           </Text>
         </GridItem>
         <GridItem>
-          <Text>{cakeEarnedPerThousand30D}</Text>
+          <Text>{tokenEarnedPerThousand30D}</Text>
         </GridItem>
         {/* 365 day / APY row */}
         <GridItem>
@@ -112,11 +121,11 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         </GridItem>
         <GridItem>
           <Text>
-            {getRoi({ amountEarned: cakeEarnedPerThousand365D, amountInvested: oneThousandDollarsWorthOfCake })}%
+            {getRoi({ amountEarned: tokenEarnedPerThousand365D, amountInvested: oneThousandDollarsWorthOfToken })}%
           </Text>
         </GridItem>
         <GridItem>
-          <Text>{cakeEarnedPerThousand365D}</Text>
+          <Text>{tokenEarnedPerThousand365D}</Text>
         </GridItem>
       </Grid>
       <Description fontSize="12px" color="textSubtle">
@@ -126,9 +135,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
         )}
       </Description>
       <Flex justifyContent="center">
-        <LinkExternal href={addLiquidityUrl}>
-          {TranslateString(999, 'Get')} {lpLabel}
-        </LinkExternal>
+        <LinkExternal href={linkHref}>{linkLabel}</LinkExternal>
       </Flex>
     </Modal>
   )
diff --git a/src/utils/compoundApyHelpers.ts b/src/utils/compoundApyHelpers.ts
index 0338f6c6ae0b3..6bf6b5890e4b8 100644
--- a/src/utils/compoundApyHelpers.ts
+++ b/src/utils/compoundApyHelpers.ts
@@ -1,18 +1,16 @@
 const roundToTwoDp = (number) => Math.round(number * 100) / 100
 
-export const cakeEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr, cakePrice }) => {
+export const tokenEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr, tokenPrice }) => {
   // Everything here is worked out relative to a year, with the asset compounding daily
   const timesCompounded = 365
-  //   We use decimal values rather than % in the math for both APY and the number of days being calculates as a proportion of the year
+  // We use decimal values rather than % in the math for both APY and the number of days being calculates as a proportion of the year
   const aprAsDecimal = farmApr / 100
   const daysAsDecimalOfYear = numberOfDays / timesCompounded
-  //   Calculate the starting CAKE balance with a dollar balance of $1000.
-  const principal = 1000 / cakePrice
-
+  // Calculate the starting TOKEN balance with a dollar balance of $1000.
+  const principal = 1000 / tokenPrice
   // This is a translation of the typical mathematical compounding APY formula. Details here: https://www.calculatorsoup.com/calculators/financial/compound-interest-calculator.php
   const finalAmount = principal * (1 + aprAsDecimal / timesCompounded) ** (timesCompounded * daysAsDecimalOfYear)
-
-  // To get the cake earned, deduct the amount after compounding (finalAmount) from the starting CAKE balance (principal)
+  // To get the TOKEN amount earned, deduct the amount after compounding (finalAmount) from the starting TOKEN balance (principal)
   const interestEarned = finalAmount - principal
   return roundToTwoDp(interestEarned)
 }
diff --git a/src/views/Farms/components/FarmCard/ApyButton.tsx b/src/views/Farms/components/FarmCard/ApyButton.tsx
index 6f409980acb1c..004f7f6320572 100644
--- a/src/views/Farms/components/FarmCard/ApyButton.tsx
+++ b/src/views/Farms/components/FarmCard/ApyButton.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import BigNumber from 'bignumber.js'
 import { IconButton, useModal, CalculateIcon } from '@pancakeswap-libs/uikit'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
+import useI18n from 'hooks/useI18n'
 
 export interface ApyButtonProps {
   lpLabel?: string
@@ -11,8 +12,14 @@ export interface ApyButtonProps {
 }
 
 const ApyButton: React.FC<ApyButtonProps> = ({ lpLabel, cakePrice, apr, addLiquidityUrl }) => {
+  const TranslateString = useI18n()
   const [onPresentApyModal] = useModal(
-    <ApyCalculatorModal lpLabel={lpLabel} cakePrice={cakePrice} apr={apr} addLiquidityUrl={addLiquidityUrl} />,
+    <ApyCalculatorModal
+      linkLabel={`${TranslateString(999, 'Get')} ${lpLabel}`}
+      tokenPrice={cakePrice.toNumber()}
+      apr={apr}
+      linkHref={addLiquidityUrl}
+    />,
   )
 
   const handleClickButton = (event): void => {
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 0cd745e3f4b21..e23a863caa744 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,20 +1,39 @@
 import React from 'react'
-import BigNumber from 'bignumber.js'
 import { Flex, Text, IconButton, useModal, CalculateIcon } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
+import { Token } from 'config/constants/types'
 
 interface AprRowProps {
   isOldSyrup?: boolean
   isFinished: boolean
   apr: number
-  cakePrice: BigNumber
+  rewardTokenPrice: number
+  stakingToken: Token
+  earningTokenSymbol: string
 }
 
-const AprRow: React.FC<AprRowProps> = ({ isOldSyrup = false, cakePrice, isFinished, apr }) => {
+const AprRow: React.FC<AprRowProps> = ({
+  isOldSyrup = false,
+  rewardTokenPrice,
+  isFinished,
+  apr,
+  stakingToken,
+  earningTokenSymbol,
+}) => {
   const TranslateString = useI18n()
-  const [onPresentApyModal] = useModal(<ApyCalculatorModal cakePrice={cakePrice} apr={apr} />)
+  const [onPresentApyModal] = useModal(
+    <ApyCalculatorModal
+      tokenPrice={rewardTokenPrice}
+      apr={apr}
+      linkLabel={`${TranslateString(999, 'Get')} ${stakingToken.symbol}`}
+      linkHref={`https://exchange.pancakeswap.finance/#/swap?outputCurrency=${
+        stakingToken.address[process.env.REACT_APP_CHAIN_ID]
+      }`}
+      earningTokenSymbol={earningTokenSymbol}
+    />,
+  )
 
   return (
     <Flex alignItems="center" justifyContent="space-between">
@@ -22,14 +41,12 @@ const AprRow: React.FC<AprRowProps> = ({ isOldSyrup = false, cakePrice, isFinish
       {isFinished || isOldSyrup || !apr ? (
         '0%'
       ) : (
-        <>
-          <Flex alignItems="center">
-            <Balance fontSize="16px" bold={false} isDisabled={isFinished} value={apr} decimals={2} unit="%" />
-            <IconButton onClick={onPresentApyModal} variant="text" scale="sm">
-              <CalculateIcon color="textSubtle" width="18px" />
-            </IconButton>
-          </Flex>
-        </>
+        <Flex alignItems="center">
+          <Balance fontSize="16px" isDisabled={isFinished} value={apr} decimals={2} unit="%" />
+          <IconButton onClick={onPresentApyModal} variant="text" scale="sm">
+            <CalculateIcon color="textSubtle" width="18px" />
+          </IconButton>
+        </Flex>
       )}
     </Flex>
   )
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index cee776ab5e673..62fd8650060fe 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -18,7 +18,7 @@ import Balance from 'components/Balance'
 import { PoolCategory } from 'config/constants/types'
 import tokens from 'config/constants/tokens'
 import { Pool } from 'state/types'
-import { useGetApiPrice, usePriceCakeBusd } from 'state/hooks'
+import { useGetApiPrice } from 'state/hooks'
 import AprRow from './AprRow'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
@@ -56,7 +56,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const { onStake } = useSousStake(sousId, isBnbPool)
   const { onUnstake } = useSousUnstake(sousId)
   const { onReward } = useSousHarvest(sousId, isBnbPool)
-  const cakePrice = usePriceCakeBusd()
 
   // APR
   const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
@@ -125,7 +124,14 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         isFinished={isFinished && sousId !== 0}
       />
       <CardBody>
-        <AprRow isFinished={isFinished} isOldSyrup={isOldSyrup} apr={apr} cakePrice={cakePrice} />
+        <AprRow
+          isFinished={isFinished}
+          isOldSyrup={isOldSyrup}
+          apr={apr}
+          rewardTokenPrice={rewardTokenPrice}
+          stakingToken={stakingToken}
+          earningTokenSymbol={earningToken.symbol}
+        />
 
         <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
           {account && harvest && !isOldSyrup && (

From affa8289d453ae998483ee10b60ded514d99e18d Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Mon, 19 Apr 2021 17:05:58 +0100
Subject: [PATCH 09/40] feat(syrup-pool-v2): Loading states for footer and APR

---
 .../Pools/components/PoolCard/AprRow.tsx      | 15 +++++++----
 .../Pools/components/PoolCard/CardFooter.tsx  | 25 +++++++++++++++----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index e23a863caa744..6f601174927c9 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Text, IconButton, useModal, CalculateIcon } from '@pancakeswap-libs/uikit'
+import { Flex, Text, IconButton, useModal, CalculateIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
@@ -23,14 +23,19 @@ const AprRow: React.FC<AprRowProps> = ({
   earningTokenSymbol,
 }) => {
   const TranslateString = useI18n()
+
+  const apyModalLink =
+    stakingToken.address &&
+    `https://exchange.pancakeswap.finance/#/swap?outputCurrency=
+ ${stakingToken.address[process.env.REACT_APP_CHAIN_ID]}
+   `
+
   const [onPresentApyModal] = useModal(
     <ApyCalculatorModal
       tokenPrice={rewardTokenPrice}
       apr={apr}
       linkLabel={`${TranslateString(999, 'Get')} ${stakingToken.symbol}`}
-      linkHref={`https://exchange.pancakeswap.finance/#/swap?outputCurrency=${
-        stakingToken.address[process.env.REACT_APP_CHAIN_ID]
-      }`}
+      linkHref={apyModalLink || 'https://exchange.pancakeswap.finance'}
       earningTokenSymbol={earningTokenSymbol}
     />,
   )
@@ -39,7 +44,7 @@ const AprRow: React.FC<AprRowProps> = ({
     <Flex alignItems="center" justifyContent="space-between">
       <Text fontSize="16px">{TranslateString(736, 'APR')}:</Text>
       {isFinished || isOldSyrup || !apr ? (
-        '0%'
+        <Skeleton width="82px" height="32px" />
       ) : (
         <Flex alignItems="center">
           <Balance fontSize="16px" isDisabled={isFinished} value={apr} decimals={2} unit="%" />
diff --git a/src/views/Pools/components/PoolCard/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
index e9fa5777fdde7..415a4af334b71 100644
--- a/src/views/Pools/components/PoolCard/CardFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter.tsx
@@ -4,7 +4,16 @@ import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
-import { Flex, MetamaskIcon, CardFooter, ExpandableLabel, Text, LinkExternal, TimerIcon } from '@pancakeswap-libs/uikit'
+import {
+  Flex,
+  MetamaskIcon,
+  CardFooter,
+  ExpandableLabel,
+  Text,
+  LinkExternal,
+  TimerIcon,
+  Skeleton,
+} from '@pancakeswap-libs/uikit'
 import Balance from 'components/Balance'
 import { useBlock } from 'state/hooks'
 import { registerToken } from 'utils/wallet'
@@ -74,10 +83,16 @@ const Footer: React.FC<FooterProps> = ({
           <Flex mb="2px" justifyContent="space-between" alignItems="center">
             <Text fontSize="14px">{TranslateString(999, 'Total staked:')}</Text>
             <Flex alignItems="flex-start">
-              <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
-              <Text ml="4px" fontSize="14px">
-                {stakingTokenSymbol}
-              </Text>
+              {totalStaked ? (
+                <>
+                  <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
+                  <Text ml="4px" fontSize="14px">
+                    {stakingTokenSymbol}
+                  </Text>
+                </>
+              ) : (
+                <Skeleton width="90px" height="21px" />
+              )}
             </Flex>
           </Flex>
           {shouldShowBlockCountdown && (

From 3cdb0b98fe55cc7fd230d839d86b36dcd624a9b2 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 20 Apr 2021 08:57:38 +0100
Subject: [PATCH 10/40] fix(syrup-pool-v2): Fix merge conflicts

---
 src/views/Pools/Syrup.tsx             | 99 ---------------------------
 src/views/Pools/components/Coming.tsx | 80 ----------------------
 2 files changed, 179 deletions(-)
 delete mode 100644 src/views/Pools/Syrup.tsx
 delete mode 100644 src/views/Pools/components/Coming.tsx

diff --git a/src/views/Pools/Syrup.tsx b/src/views/Pools/Syrup.tsx
deleted file mode 100644
index 68aa7994aebea..0000000000000
--- a/src/views/Pools/Syrup.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { useMemo } from 'react'
-import { Route, useRouteMatch } from 'react-router-dom'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import { useWeb3React } from '@web3-react/core'
-import { Heading, Flex, Button, Text, HelpIcon, Link } from '@pancakeswap-libs/uikit'
-import orderBy from 'lodash/orderBy'
-import partition from 'lodash/partition'
-import useI18n from 'hooks/useI18n'
-import usePersistState from 'hooks/usePersistState'
-import { usePools, useBlock } from 'state/hooks'
-import PageHeader from 'components/PageHeader'
-import FlexLayout from 'components/layout/Flex'
-import Page from 'components/layout/Page'
-import Coming from './components/Coming'
-import PoolCard from './components/PoolCard'
-import PoolTabButtons from './components/PoolTabButtons'
-import Divider from './components/Divider'
-
-const ButtonText = styled(Text)`
-  display: none;
-  ${({ theme }) => theme.mediaQueries.lg} {
-    display: block;
-  }
-`
-
-const StyledLink = styled(Link)`
-  display: inline;
-  height: fit-content;
-`
-
-const Syrup: React.FC = () => {
-  const { path } = useRouteMatch()
-  const TranslateString = useI18n()
-  const { account } = useWeb3React()
-  const pools = usePools(account)
-  const { currentBlock } = useBlock()
-  const [stakedOnly, setStakedOnly] = usePersistState(false, 'pancake_pool_staked')
-
-  const [finishedPools, openPools] = useMemo(
-    () => partition(pools, (pool) => pool.isFinished || currentBlock > pool.endBlock),
-    [currentBlock, pools],
-  )
-  const stakedOnlyPools = useMemo(
-    () => openPools.filter((pool) => pool.userData && new BigNumber(pool.userData.stakedBalance).isGreaterThan(0)),
-    [openPools],
-  )
-
-  return (
-    <>
-      <PageHeader>
-        <Flex justifyContent="space-between">
-          <Flex flexDirection="column" mr={['8px', 0]}>
-            <Heading as="h1" size="xxl" color="secondary" mb="24px">
-              {TranslateString(999, 'Syrup Pools')}
-            </Heading>
-            <Heading size="md" color="text">
-              {TranslateString(999, 'Simply stake tokens to earn.')}
-            </Heading>
-            <Heading size="md" color="text">
-              {TranslateString(999, 'High APR, low risk.')}
-            </Heading>
-          </Flex>
-          <Flex>
-            <StyledLink color="backgroundAlt" href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool" external>
-              <Button px={['14px', null, null, null, '24px']} variant="subtle">
-                <ButtonText color="backgroundAlt" fontSize="16px" bold>
-                  {TranslateString(999, 'Help')}
-                </ButtonText>
-                <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
-              </Button>
-            </StyledLink>
-          </Flex>
-        </Flex>
-      </PageHeader>
-      <Page>
-        <PoolTabButtons stakedOnly={stakedOnly} setStakedOnly={setStakedOnly} />
-        <Divider />
-        <FlexLayout>
-          <Route exact path={`${path}`}>
-            <>
-              {stakedOnly
-                ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
-                : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
-              <Coming />
-            </>
-          </Route>
-          <Route path={`${path}/history`}>
-            {orderBy(finishedPools, ['sortOrder']).map((pool) => (
-              <PoolCard key={pool.sousId} pool={pool} />
-            ))}
-          </Route>
-        </FlexLayout>
-      </Page>
-    </>
-  )
-}
-
-export default Syrup
diff --git a/src/views/Pools/components/Coming.tsx b/src/views/Pools/components/Coming.tsx
deleted file mode 100644
index f27e727cad0b9..0000000000000
--- a/src/views/Pools/components/Coming.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { Image, Button } from '@pancakeswap-libs/uikit'
-import { CommunityTag } from 'components/Tags'
-import useI18n from 'hooks/useI18n'
-import Card from './Card'
-import CardTitle from './CardTitle'
-
-const Balance = styled.div`
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 40px;
-  font-weight: 600;
-`
-
-const Label = styled.div`
-  color: ${({ theme }) => theme.colors.textSubtle};
-  font-size: 14px;
-  margin-bottom: 16px;
-`
-
-const DetailPlaceholder = styled.div`
-  display: flex;
-  font-size: 14px;
-`
-const Value = styled.div`
-  color: ${({ theme }) => theme.colors.text};
-  font-size: 14px;
-`
-
-const Footer = styled.div`
-  border-top: 1px solid ${({ theme }) => (theme.isDark ? '#524B63' : '#E9EAEB')};
-  padding: 24px;
-`
-const Coming: React.FC = () => {
-  const TranslateString = useI18n()
-
-  return (
-    <Card>
-      <div style={{ padding: '24px' }}>
-        <CardTitle>
-          {TranslateString(414, 'Your Project?')}{' '}
-          <span role="img" aria-label="eyes">
-            👀
-          </span>
-        </CardTitle>
-        <Image src="/images/bunny-placeholder.svg" width={64} height={64} alt="Your project here" />
-        <Balance>???</Balance>
-        <Label>{TranslateString(416, 'Create a pool for your token')}</Label>
-        <Button
-          variant="secondary"
-          as="a"
-          href="https://docs.google.com/forms/d/e/1FAIpQLScGdT5rrVMr4WOWr08pvcroSeuIOtEJf1sVdQGVdcAOqryigQ/viewform"
-          external
-          width="100%"
-          mb="16px"
-        >
-          {TranslateString(418, 'Apply Now')}
-        </Button>
-        <DetailPlaceholder>
-          <div style={{ flex: 1 }}>{TranslateString(736, 'APR')}:</div>
-          <Value>??</Value>
-        </DetailPlaceholder>
-        <DetailPlaceholder>
-          <div style={{ flex: 1 }}>
-            <span role="img" aria-label="syrup">
-              🥞{' '}
-            </span>
-            {TranslateString(384, 'Your Stake')}:
-          </div>
-          <Value>??? CAKE</Value>
-        </DetailPlaceholder>
-      </div>
-      <Footer>
-        <CommunityTag />
-      </Footer>
-    </Card>
-  )
-}
-
-export default Coming

From 8b69e2f6520c46b9301c494aa3c7ca4a0d15628d Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 20 Apr 2021 09:01:47 +0100
Subject: [PATCH 11/40] fix(syrup-pool-v2): Fix lint error

---
 src/views/Farms/Farms.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Farms/Farms.tsx b/src/views/Farms/Farms.tsx
index 4f50135c1cdf8..5da93dc43f6d5 100644
--- a/src/views/Farms/Farms.tsx
+++ b/src/views/Farms/Farms.tsx
@@ -7,7 +7,6 @@ import { Image, Heading, RowType, Toggle, Text } from '@pancakeswap-libs/uikit'
 import styled from 'styled-components'
 import FlexLayout from 'components/layout/Flex'
 import Page from 'components/layout/Page'
-import PageHeader from 'components/PageHeader'
 import { useFarms, usePriceCakeBusd, useGetApiPrices } from 'state/hooks'
 import useRefresh from 'hooks/useRefresh'
 import { fetchFarmUserDataAsync } from 'state/actions'

From 1ce5132a236a8cbd006da68973988d3e93db44ae Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 20 Apr 2021 12:00:06 +0100
Subject: [PATCH 12/40] chore(syrup-pool-v2): Break CardActions into its own
 component and reorg props

---
 .../Pools/components/PoolCard/AprRow.tsx      |  30 ++-
 .../Pools/components/PoolCard/CardActions.tsx | 181 +++++++++++++++
 .../Pools/components/PoolCard/CardFooter.tsx  |  16 +-
 .../components/PoolCard/StyledCardHeader.tsx  |   6 +-
 src/views/Pools/components/PoolCard/index.tsx | 213 ++----------------
 5 files changed, 237 insertions(+), 209 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/CardActions.tsx

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 6f601174927c9..587c6d196bd4b 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,27 +1,41 @@
 import React from 'react'
+import BigNumber from 'bignumber.js'
 import { Flex, Text, IconButton, useModal, CalculateIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
+import { Token } from 'config/constants/types'
+import { getBalanceNumber } from 'utils/formatBalance'
+import { getPoolApr } from 'utils/apr'
+import { getAddress } from 'utils/addressHelpers'
+import { useGetApiPrice } from 'state/hooks'
 import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
-import { Token } from 'config/constants/types'
 
 interface AprRowProps {
   isOldSyrup?: boolean
   isFinished: boolean
-  apr: number
-  rewardTokenPrice: number
   stakingToken: Token
-  earningTokenSymbol: string
+  earningToken: Token
+  totalStaked: BigNumber
+  tokenPerBlock: string
 }
 
 const AprRow: React.FC<AprRowProps> = ({
   isOldSyrup = false,
-  rewardTokenPrice,
   isFinished,
-  apr,
   stakingToken,
-  earningTokenSymbol,
+  earningToken,
+  totalStaked,
+  tokenPerBlock,
 }) => {
+  const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
+  const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
+  const apr = getPoolApr(
+    stakingTokenPrice,
+    rewardTokenPrice,
+    getBalanceNumber(totalStaked, stakingToken.decimals),
+    parseFloat(tokenPerBlock),
+  )
+
   const TranslateString = useI18n()
 
   const apyModalLink =
@@ -36,7 +50,7 @@ const AprRow: React.FC<AprRowProps> = ({
       apr={apr}
       linkLabel={`${TranslateString(999, 'Get')} ${stakingToken.symbol}`}
       linkHref={apyModalLink || 'https://exchange.pancakeswap.finance'}
-      earningTokenSymbol={earningTokenSymbol}
+      earningTokenSymbol={earningToken.symbol}
     />,
   )
 
diff --git a/src/views/Pools/components/PoolCard/CardActions.tsx b/src/views/Pools/components/PoolCard/CardActions.tsx
new file mode 100644
index 0000000000000..02f5202f07f32
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions.tsx
@@ -0,0 +1,181 @@
+import BigNumber from 'bignumber.js'
+import React, { useCallback, useState } from 'react'
+import styled from 'styled-components'
+import { Button, IconButton, useModal, AddIcon } from '@pancakeswap-libs/uikit'
+import Label from 'components/Label'
+import { useERC20 } from 'hooks/useContract'
+import { useSousApprove } from 'hooks/useApprove'
+import useI18n from 'hooks/useI18n'
+import { useSousStake } from 'hooks/useStake'
+import { useSousUnstake } from 'hooks/useUnstake'
+import { getBalanceNumber } from 'utils/formatBalance'
+import { getAddress } from 'utils/addressHelpers'
+import { useSousHarvest } from 'hooks/useHarvest'
+import Balance from 'components/Balance'
+import { PoolCategory } from 'config/constants/types'
+import { Pool } from 'state/types'
+import DepositModal from './DepositModal'
+import WithdrawModal from './WithdrawModal'
+import CompoundModal from './CompoundModal'
+import HarvestButton from './HarvestButton'
+
+const StyledCardActions = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  width: 100%;
+  box-sizing: border-box;
+`
+
+const BalanceAndCompound = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`
+
+const StyledActionSpacer = styled.div`
+  height: ${(props) => props.theme.spacing[4]}px;
+  width: ${(props) => props.theme.spacing[4]}px;
+`
+
+const StyledDetails = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+`
+
+const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOldSyrup }) => {
+  const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
+
+  // Pools using native BNB behave differently than pools using a token
+  const isBnbPool = poolCategory === PoolCategory.BINANCE
+
+  const TranslateString = useI18n()
+  const [requestedApproval, setRequestedApproval] = useState(false)
+  const [pendingTx, setPendingTx] = useState(false)
+  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
+  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
+  const { onStake } = useSousStake(sousId, isBnbPool)
+  const { onUnstake } = useSousUnstake(sousId)
+  const { onReward } = useSousHarvest(sousId, isBnbPool)
+
+  const allowance = new BigNumber(userData?.allowance || 0)
+  const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
+  const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
+  const earnings = new BigNumber(userData?.pendingReward || 0)
+
+  const accountHasStakedBalance = stakedBalance?.toNumber() > 0
+  const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
+
+  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
+  const [onPresentDeposit] = useModal(
+    <DepositModal
+      max={stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance}
+      onConfirm={onStake}
+      tokenName={stakingLimit ? `${stakingToken.symbol} (${stakingLimit} max)` : stakingToken.symbol}
+      stakingTokenDecimals={stakingToken.decimals}
+    />,
+  )
+
+  const [onPresentCompound] = useModal(
+    <CompoundModal earnings={earnings} onConfirm={onStake} tokenName={stakingToken.symbol} />,
+  )
+  const [onPresentWithdraw] = useModal(
+    <WithdrawModal
+      max={stakedBalance}
+      onConfirm={onUnstake}
+      tokenName={stakingToken.symbol}
+      stakingTokenDecimals={stakingToken.decimals}
+    />,
+  )
+
+  const handleApprove = useCallback(async () => {
+    try {
+      setRequestedApproval(true)
+      const txHash = await onApprove()
+      // user rejected tx or didn't go thru
+      if (!txHash) {
+        setRequestedApproval(false)
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }, [onApprove, setRequestedApproval])
+  return (
+    <div>
+      <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
+        {harvest && !isOldSyrup && (
+          <HarvestButton
+            disabled={!earnings.toNumber() || pendingTx}
+            text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
+            onClick={async () => {
+              setPendingTx(true)
+              await onReward()
+              setPendingTx(false)
+            }}
+          />
+        )}
+      </div>
+      {!isOldSyrup ? (
+        <BalanceAndCompound>
+          <Balance value={getBalanceNumber(earnings, earningToken.decimals)} isDisabled={isFinished} />
+          {sousId === 0 && harvest && (
+            <HarvestButton
+              disabled={!earnings.toNumber() || pendingTx}
+              text={TranslateString(704, 'Compound')}
+              onClick={onPresentCompound}
+            />
+          )}
+        </BalanceAndCompound>
+      ) : (
+        <span>Is old syrup</span>
+        // <OldSyrupTitle hasBalance={accountHasStakedBalance} />
+      )}
+      <Label isFinished={isFinished && sousId !== 0} text={TranslateString(330, `${earningToken.symbol} earned`)} />
+      <StyledCardActions>
+        {needsApproval && !isOldSyrup ? (
+          <div style={{ flex: 1 }}>
+            <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
+              {`Approve ${stakingToken.symbol}`}
+            </Button>
+          </div>
+        ) : (
+          <>
+            <Button
+              disabled={stakedBalance.eq(new BigNumber(0)) || pendingTx}
+              onClick={
+                isOldSyrup
+                  ? async () => {
+                      setPendingTx(true)
+                      await onUnstake('0', stakingToken.decimals)
+                      setPendingTx(false)
+                    }
+                  : onPresentWithdraw
+              }
+            >
+              {`Unstake ${stakingToken.symbol}`}
+            </Button>
+            <StyledActionSpacer />
+            {!isOldSyrup && (
+              <IconButton disabled={isFinished && sousId !== 0} onClick={onPresentDeposit}>
+                <AddIcon color="white" />
+              </IconButton>
+            )}
+          </>
+        )}
+      </StyledCardActions>
+      <StyledDetails>
+        <div>{TranslateString(384, 'Your Stake')}:</div>
+        <Balance
+          fontSize="14px"
+          isDisabled={isFinished}
+          value={getBalanceNumber(stakedBalance, stakingToken.decimals)}
+        />
+      </StyledDetails>
+    </div>
+  )
+}
+
+export default CardActions
diff --git a/src/views/Pools/components/PoolCard/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
index 415a4af334b71..ad06ed74acc19 100644
--- a/src/views/Pools/components/PoolCard/CardFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter.tsx
@@ -14,10 +14,11 @@ import {
   TimerIcon,
   Skeleton,
 } from '@pancakeswap-libs/uikit'
-import Balance from 'components/Balance'
+import { BASE_URL } from 'config'
+import { Address } from 'config/constants/types'
 import { useBlock } from 'state/hooks'
 import { registerToken } from 'utils/wallet'
-import { BASE_URL } from 'config'
+import Balance from 'components/Balance'
 
 interface FooterProps {
   projectLink: string
@@ -30,7 +31,7 @@ interface FooterProps {
   endBlock: number
   isFinished: boolean
   stakingTokenSymbol: string
-  poolContractAddress: string
+  contractAddress: Address
 }
 
 const ExpandedWrapper = styled(Flex)`
@@ -57,7 +58,7 @@ const Footer: React.FC<FooterProps> = ({
   startBlock,
   endBlock,
   stakingTokenSymbol,
-  poolContractAddress,
+  contractAddress,
 }) => {
   const TranslateString = useI18n()
   const [isExpanded, setIsExpanded] = useState(false)
@@ -70,6 +71,7 @@ const Footer: React.FC<FooterProps> = ({
   const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
   const blocksRemaining = Math.max(endBlock - currentBlock, 0)
   const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
+  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
 
   return (
     <CardFooter>
@@ -117,7 +119,7 @@ const Footer: React.FC<FooterProps> = ({
           )}
           <Flex mb="2px" justifyContent="flex-end">
             <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
-              {TranslateString(412, 'View project site')}
+              {TranslateString(412, 'View Project Site')}
             </LinkExternal>
           </Flex>
           {poolContractAddress && (
@@ -128,7 +130,7 @@ const Footer: React.FC<FooterProps> = ({
                 href={`https://bscscan.com/address/${poolContractAddress}`}
                 target="_blank"
               >
-                {TranslateString(412, 'View contract')}
+                {TranslateString(412, 'View Contract')}
               </LinkExternal>
             </Flex>
           )}
@@ -140,7 +142,7 @@ const Footer: React.FC<FooterProps> = ({
                 href={`https://pancakeswap.info/token/${tokenAddress}`}
                 target="_blank"
               >
-                {TranslateString(412, 'Info site')}
+                {TranslateString(412, 'View Pool Info')}
               </LinkExternal>
             </Flex>
           )}
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index ab74cb379a8f6..09b3b6a448858 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -9,11 +9,11 @@ const Wrapper = styled(CardHeader)<{ isFinished?: boolean }>`
 `
 
 const StyledCardHeader: React.FC<{
-  poolImage: string
+  poolImageSrc: string
   earningTokenSymbol: string
   stakingTokenSymbol: string
   isFinished?: boolean
-}> = ({ poolImage, earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
+}> = ({ poolImageSrc, earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
   return (
     <>
       <Wrapper isFinished={isFinished}>
@@ -24,7 +24,7 @@ const StyledCardHeader: React.FC<{
             </Heading>
             <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
           </Flex>
-          <Image src={`/images/pools/${poolImage}`} alt={earningTokenSymbol} width={64} height={64} />
+          <Image src={`/images/pools/${poolImageSrc}`} alt={earningTokenSymbol} width={64} height={64} />
         </Flex>
       </Wrapper>
       {isFinished && (
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 62fd8650060fe..4cfd6a95aeddb 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,124 +1,42 @@
 import BigNumber from 'bignumber.js'
-import React, { useCallback, useState } from 'react'
-import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon, CardBody } from '@pancakeswap-libs/uikit'
+import React from 'react'
+import { CardBody, Flex, Text } from '@pancakeswap-libs/uikit'
 import { useWeb3React } from '@web3-react/core'
 import UnlockButton from 'components/UnlockButton'
-import Label from 'components/Label'
-import { useERC20 } from 'hooks/useContract'
-import { useSousApprove } from 'hooks/useApprove'
 import useI18n from 'hooks/useI18n'
-import { useSousStake } from 'hooks/useStake'
-import { useSousUnstake } from 'hooks/useUnstake'
-import { getBalanceNumber } from 'utils/formatBalance'
-import { getPoolApr } from 'utils/apr'
 import { getAddress } from 'utils/addressHelpers'
-import { useSousHarvest } from 'hooks/useHarvest'
-import Balance from 'components/Balance'
-import { PoolCategory } from 'config/constants/types'
 import tokens from 'config/constants/tokens'
 import { Pool } from 'state/types'
-import { useGetApiPrice } from 'state/hooks'
 import AprRow from './AprRow'
-import DepositModal from './DepositModal'
-import WithdrawModal from './WithdrawModal'
-import CompoundModal from './CompoundModal'
 import StyledCard from './StyledCard'
-import HarvestButton from './HarvestButton'
 import CardFooter from './CardFooter'
 import StyledCardHeader from './StyledCardHeader'
+import CardActions from './CardActions'
 
 const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const {
     sousId,
     stakingToken,
     earningToken,
-    harvest,
-    poolCategory,
     totalStaked,
     startBlock,
     endBlock,
     isFinished,
     userData,
-    stakingLimit,
     contractAddress,
   } = pool
-
-  // Pools using native BNB behave differently than pools using a token
-  const isBnbPool = poolCategory === PoolCategory.BINANCE
-
-  const TranslateString = useI18n()
-  const [requestedApproval, setRequestedApproval] = useState(false)
-  const [pendingTx, setPendingTx] = useState(false)
-  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
   const { account } = useWeb3React()
-  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
-  const { onStake } = useSousStake(sousId, isBnbPool)
-  const { onUnstake } = useSousUnstake(sousId)
-  const { onReward } = useSousHarvest(sousId, isBnbPool)
-
-  // APR
-  const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
-  const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
-  const apr = getPoolApr(
-    stakingTokenPrice,
-    rewardTokenPrice,
-    getBalanceNumber(pool.totalStaked, stakingToken.decimals),
-    parseFloat(pool.tokenPerBlock),
-  )
-
-  const allowance = new BigNumber(userData?.allowance || 0)
-  const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
+  const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
-  const earnings = new BigNumber(userData?.pendingReward || 0)
-
-  const isOldSyrup = stakingToken.symbol === tokens.syrup.symbol
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
-  const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
   const isCardActive = isFinished && accountHasStakedBalance
-
-  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
-
-  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
-  const [onPresentDeposit] = useModal(
-    <DepositModal
-      max={stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance}
-      onConfirm={onStake}
-      tokenName={stakingLimit ? `${stakingToken.symbol} (${stakingLimit} max)` : stakingToken.symbol}
-      stakingTokenDecimals={stakingToken.decimals}
-    />,
-  )
-
-  const [onPresentCompound] = useModal(
-    <CompoundModal earnings={earnings} onConfirm={onStake} tokenName={stakingToken.symbol} />,
-  )
-  const poolImage = `${pool.earningToken.symbol}-${pool.stakingToken.symbol}.svg`.toLocaleLowerCase()
-  const [onPresentWithdraw] = useModal(
-    <WithdrawModal
-      max={stakedBalance}
-      onConfirm={onUnstake}
-      tokenName={stakingToken.symbol}
-      stakingTokenDecimals={stakingToken.decimals}
-    />,
-  )
-
-  const handleApprove = useCallback(async () => {
-    try {
-      setRequestedApproval(true)
-      const txHash = await onApprove()
-      // user rejected tx or didn't go thru
-      if (!txHash) {
-        setRequestedApproval(false)
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }, [onApprove, setRequestedApproval])
+  const isOldSyrup = stakingToken.symbol === tokens.syrup.symbol
+  const poolImageSrc = `${pool.earningToken.symbol}-${pool.stakingToken.symbol}.svg`.toLocaleLowerCase()
 
   return (
     <StyledCard isActive={isCardActive} isFinished={isFinished && sousId !== 0}>
       <StyledCardHeader
-        poolImage={poolImage}
+        poolImageSrc={poolImageSrc}
         earningTokenSymbol={earningToken.symbol}
         stakingTokenSymbol={stakingToken.symbol}
         isFinished={isFinished && sousId !== 0}
@@ -127,83 +45,23 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         <AprRow
           isFinished={isFinished}
           isOldSyrup={isOldSyrup}
-          apr={apr}
-          rewardTokenPrice={rewardTokenPrice}
           stakingToken={stakingToken}
-          earningTokenSymbol={earningToken.symbol}
+          earningToken={earningToken}
+          totalStaked={pool.totalStaked}
+          tokenPerBlock={pool.tokenPerBlock}
         />
-
-        <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
-          {account && harvest && !isOldSyrup && (
-            <HarvestButton
-              disabled={!earnings.toNumber() || pendingTx}
-              text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
-              onClick={async () => {
-                setPendingTx(true)
-                await onReward()
-                setPendingTx(false)
-              }}
-            />
+        <Flex mt="24px" flexDirection="column">
+          {account ? (
+            <CardActions pool={pool} isOldSyrup={isOldSyrup} />
+          ) : (
+            <>
+              <Text mb="10px" textTransform="uppercase" fontSize="12px" color="textSubtle" bold>
+                {TranslateString(999, 'Start earning')}
+              </Text>
+              <UnlockButton />
+            </>
           )}
-        </div>
-        {!isOldSyrup ? (
-          <BalanceAndCompound>
-            <Balance value={getBalanceNumber(earnings, earningToken.decimals)} isDisabled={isFinished} />
-            {sousId === 0 && account && harvest && (
-              <HarvestButton
-                disabled={!earnings.toNumber() || pendingTx}
-                text={TranslateString(704, 'Compound')}
-                onClick={onPresentCompound}
-              />
-            )}
-          </BalanceAndCompound>
-        ) : (
-          <span>Is old syrup</span>
-          // <OldSyrupTitle hasBalance={accountHasStakedBalance} />
-        )}
-        <Label isFinished={isFinished && sousId !== 0} text={TranslateString(330, `${earningToken.symbol} earned`)} />
-        <StyledCardActions>
-          {!account && <UnlockButton />}
-          {account &&
-            (needsApproval && !isOldSyrup ? (
-              <div style={{ flex: 1 }}>
-                <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
-                  {`Approve ${stakingToken.symbol}`}
-                </Button>
-              </div>
-            ) : (
-              <>
-                <Button
-                  disabled={stakedBalance.eq(new BigNumber(0)) || pendingTx}
-                  onClick={
-                    isOldSyrup
-                      ? async () => {
-                          setPendingTx(true)
-                          await onUnstake('0', stakingToken.decimals)
-                          setPendingTx(false)
-                        }
-                      : onPresentWithdraw
-                  }
-                >
-                  {`Unstake ${stakingToken.symbol}`}
-                </Button>
-                <StyledActionSpacer />
-                {!isOldSyrup && (
-                  <IconButton disabled={isFinished && sousId !== 0} onClick={onPresentDeposit}>
-                    <AddIcon color="white" />
-                  </IconButton>
-                )}
-              </>
-            ))}
-        </StyledCardActions>
-        <StyledDetails>
-          <div>{TranslateString(384, 'Your Stake')}:</div>
-          <Balance
-            fontSize="14px"
-            isDisabled={isFinished}
-            value={getBalanceNumber(stakedBalance, stakingToken.decimals)}
-          />
-        </StyledDetails>
+        </Flex>
       </CardBody>
       <CardFooter
         projectLink={earningToken.projectLink}
@@ -216,37 +74,10 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
         tokenDecimals={earningToken.decimals}
         stakingTokenSymbol={stakingToken.symbol}
-        poolContractAddress={poolContractAddress}
+        contractAddress={contractAddress}
       />
     </StyledCard>
   )
 }
 
-const StyledCardActions = styled.div`
-  display: flex;
-  justify-content: center;
-  margin: 16px 0;
-  width: 100%;
-  box-sizing: border-box;
-`
-
-const BalanceAndCompound = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-`
-
-const StyledActionSpacer = styled.div`
-  height: ${(props) => props.theme.spacing[4]}px;
-  width: ${(props) => props.theme.spacing[4]}px;
-`
-
-const StyledDetails = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-`
-
 export default PoolCard

From c188ea31172859589bddfcb8bba6785cd6f5e36b Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 20 Apr 2021 15:37:26 +0100
Subject: [PATCH 13/40] feat(syrup-pool-v2): Create separate Staking /
 HarvestActions comps

---
 .../Pools/components/PoolCard/AprRow.tsx      |   1 +
 .../PoolCard/CardActions/HarvestActions.tsx   |   7 +
 .../PoolCard/CardActions/StakingActions.tsx   |  73 +++++++++++
 .../index.tsx}                                | 120 +++++++++---------
 .../Pools/components/PoolCard/StyledCard.tsx  |   6 +-
 .../components/PoolCard/StyledCardHeader.tsx  |   5 +-
 src/views/Pools/components/PoolCard/index.tsx |  13 +-
 7 files changed, 155 insertions(+), 70 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
 rename src/views/Pools/components/PoolCard/{CardActions.tsx => CardActions/index.tsx} (64%)

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 587c6d196bd4b..9226bcb413ed9 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -58,6 +58,7 @@ const AprRow: React.FC<AprRowProps> = ({
     <Flex alignItems="center" justifyContent="space-between">
       <Text fontSize="16px">{TranslateString(736, 'APR')}:</Text>
       {isFinished || isOldSyrup || !apr ? (
+        // IS OLD SYRUP CONDITIONAL
         <Skeleton width="82px" height="32px" />
       ) : (
         <Flex alignItems="center">
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
new file mode 100644
index 0000000000000..4a654695d76ca
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const HarvestActions = () => {
+  return <div>ss</div>
+}
+
+export default HarvestActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
new file mode 100644
index 0000000000000..3dc5123814a63
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
@@ -0,0 +1,73 @@
+import React, { useState, useCallback } from 'react'
+import { Flex, Box, Text, Button } from '@pancakeswap-libs/uikit'
+import styled from 'styled-components'
+import { useSousApprove } from 'hooks/useApprove'
+import useI18n from 'hooks/useI18n'
+import { useERC20 } from 'hooks/useContract'
+import { useToast } from 'state/hooks'
+import { getAddress } from 'utils/addressHelpers'
+import { Token } from 'config/constants/types'
+
+interface StakingActionsProps {
+  stakingToken: Token
+  needsApproval: boolean
+  isOldSyrup: boolean
+  isFinished: boolean
+  sousId: number
+}
+
+const InlineText = styled(Text)`
+  display: inline;
+`
+
+const StakingActions: React.FC<StakingActionsProps> = ({
+  stakingToken,
+  needsApproval,
+  isOldSyrup,
+  isFinished,
+  sousId,
+}) => {
+  const TranslateString = useI18n()
+  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
+  const [requestedApproval, setRequestedApproval] = useState(false)
+  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
+  const { toastSuccess } = useToast()
+
+  const handleApprove = useCallback(async () => {
+    try {
+      setRequestedApproval(true)
+      const txHash = await onApprove()
+      debugger // eslint-disable-line
+      if (txHash) {
+        toastSuccess('You have claimed your rewards!')
+      }
+      // user rejected tx or didn't go thru
+      setRequestedApproval(false)
+    } catch (e) {
+      console.error(e)
+    }
+  }, [onApprove, setRequestedApproval, toastSuccess])
+
+  return (
+    <Flex flexDirection="column">
+      <Box display="inline">
+        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+          {TranslateString(1070, `stake`)}
+        </InlineText>
+        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
+          {` ${stakingToken.symbol}`}
+        </InlineText>
+      </Box>
+      {needsApproval && !isOldSyrup ? (
+        // IS OLD SYRUP CONDITIONAL
+        <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
+          {TranslateString(999, 'Enable')}
+        </Button>
+      ) : (
+        <span>Thing</span>
+      )}
+    </Flex>
+  )
+}
+
+export default StakingActions
diff --git a/src/views/Pools/components/PoolCard/CardActions.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
similarity index 64%
rename from src/views/Pools/components/PoolCard/CardActions.tsx
rename to src/views/Pools/components/PoolCard/CardActions/index.tsx
index 02f5202f07f32..cdc5f816729ea 100644
--- a/src/views/Pools/components/PoolCard/CardActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -1,31 +1,22 @@
 import BigNumber from 'bignumber.js'
 import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon } from '@pancakeswap-libs/uikit'
+import { Button, IconButton, useModal, AddIcon, Flex, Text, Box } from '@pancakeswap-libs/uikit'
 import Label from 'components/Label'
-import { useERC20 } from 'hooks/useContract'
-import { useSousApprove } from 'hooks/useApprove'
 import useI18n from 'hooks/useI18n'
 import { useSousStake } from 'hooks/useStake'
 import { useSousUnstake } from 'hooks/useUnstake'
 import { getBalanceNumber } from 'utils/formatBalance'
-import { getAddress } from 'utils/addressHelpers'
+
 import { useSousHarvest } from 'hooks/useHarvest'
 import Balance from 'components/Balance'
 import { PoolCategory } from 'config/constants/types'
 import { Pool } from 'state/types'
-import DepositModal from './DepositModal'
-import WithdrawModal from './WithdrawModal'
-import CompoundModal from './CompoundModal'
-import HarvestButton from './HarvestButton'
-
-const StyledCardActions = styled.div`
-  display: flex;
-  justify-content: center;
-  margin: 16px 0;
-  width: 100%;
-  box-sizing: border-box;
-`
+import DepositModal from '../DepositModal'
+import WithdrawModal from '../WithdrawModal'
+import CompoundModal from '../CompoundModal'
+import HarvestButton from '../HarvestButton'
+import StakingActions from './StakingActions'
 
 const BalanceAndCompound = styled.div`
   display: flex;
@@ -46,27 +37,31 @@ const StyledDetails = styled.div`
   font-size: 14px;
 `
 
-const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOldSyrup }) => {
+const InlineText = styled(Text)`
+  display: inline;
+`
+
+const CardActions: React.FC<{
+  pool: Pool
+  isOldSyrup: boolean
+  stakedBalance: BigNumber
+  accountHasStakedBalance: boolean
+}> = ({ pool, isOldSyrup, stakedBalance, accountHasStakedBalance }) => {
   const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
 
   // Pools using native BNB behave differently than pools using a token
   const isBnbPool = poolCategory === PoolCategory.BINANCE
 
   const TranslateString = useI18n()
-  const [requestedApproval, setRequestedApproval] = useState(false)
+
   const [pendingTx, setPendingTx] = useState(false)
-  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
-  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
   const { onStake } = useSousStake(sousId, isBnbPool)
   const { onUnstake } = useSousUnstake(sousId)
   const { onReward } = useSousHarvest(sousId, isBnbPool)
 
   const allowance = new BigNumber(userData?.allowance || 0)
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
-  const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const earnings = new BigNumber(userData?.pendingReward || 0)
-
-  const accountHasStakedBalance = stakedBalance?.toNumber() > 0
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
 
   const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
@@ -91,34 +86,18 @@ const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOl
     />,
   )
 
-  const handleApprove = useCallback(async () => {
-    try {
-      setRequestedApproval(true)
-      const txHash = await onApprove()
-      // user rejected tx or didn't go thru
-      if (!txHash) {
-        setRequestedApproval(false)
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }, [onApprove, setRequestedApproval])
   return (
-    <div>
-      <div style={{ marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
-        {harvest && !isOldSyrup && (
-          <HarvestButton
-            disabled={!earnings.toNumber() || pendingTx}
-            text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
-            onClick={async () => {
-              setPendingTx(true)
-              await onReward()
-              setPendingTx(false)
-            }}
-          />
-        )}
-      </div>
+    <Flex flexDirection="column">
+      <Box display="inline">
+        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
+          {`${earningToken.symbol} `}
+        </InlineText>
+        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+          {TranslateString(1072, `earned`)}
+        </InlineText>
+      </Box>
       {!isOldSyrup ? (
+        // IS OLD SYRUP CONDITIONAL
         <BalanceAndCompound>
           <Balance value={getBalanceNumber(earnings, earningToken.decimals)} isDisabled={isFinished} />
           {sousId === 0 && harvest && (
@@ -133,21 +112,41 @@ const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOl
         <span>Is old syrup</span>
         // <OldSyrupTitle hasBalance={accountHasStakedBalance} />
       )}
-      <Label isFinished={isFinished && sousId !== 0} text={TranslateString(330, `${earningToken.symbol} earned`)} />
-      <StyledCardActions>
+      {harvest && !isOldSyrup && (
+        // IS OLD SYRUP CONDITIONAL
+        <HarvestButton
+          disabled={!earnings.toNumber() || pendingTx}
+          text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
+          onClick={async () => {
+            setPendingTx(true)
+            await onReward()
+            setPendingTx(false)
+          }}
+        />
+      )}
+
+      <StakingActions
+        stakingToken={stakingToken}
+        needsApproval={needsApproval}
+        isOldSyrup={isOldSyrup}
+        isFinished={isFinished}
+        sousId={sousId}
+      />
+
+      {/* <Flex flexDirection="column">
         {needsApproval && !isOldSyrup ? (
-          <div style={{ flex: 1 }}>
-            <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
-              {`Approve ${stakingToken.symbol}`}
-            </Button>
-          </div>
+          // IS OLD SYRUP CONDITIONAL
+          <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
+            {TranslateString(999, 'Enable')}
+          </Button>
         ) : (
           <>
             <Button
               disabled={stakedBalance.eq(new BigNumber(0)) || pendingTx}
               onClick={
                 isOldSyrup
-                  ? async () => {
+                  ? // IS OLD SYRUP CONDITIONAL
+                    async () => {
                       setPendingTx(true)
                       await onUnstake('0', stakingToken.decimals)
                       setPendingTx(false)
@@ -159,13 +158,14 @@ const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOl
             </Button>
             <StyledActionSpacer />
             {!isOldSyrup && (
+              // IS OLD SYRUP CONDITIONAL
               <IconButton disabled={isFinished && sousId !== 0} onClick={onPresentDeposit}>
                 <AddIcon color="white" />
               </IconButton>
             )}
           </>
         )}
-      </StyledCardActions>
+      </Flex>
       <StyledDetails>
         <div>{TranslateString(384, 'Your Stake')}:</div>
         <Balance
@@ -173,8 +173,8 @@ const CardActions: React.FC<{ pool: Pool; isOldSyrup: boolean }> = ({ pool, isOl
           isDisabled={isFinished}
           value={getBalanceNumber(stakedBalance, stakingToken.decimals)}
         />
-      </StyledDetails>
-    </div>
+      </StyledDetails> */}
+    </Flex>
   )
 }
 
diff --git a/src/views/Pools/components/PoolCard/StyledCard.tsx b/src/views/Pools/components/PoolCard/StyledCard.tsx
index 213eb769d38df..b6dc1a0c60fbf 100644
--- a/src/views/Pools/components/PoolCard/StyledCard.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCard.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components'
 import { Card } from '@pancakeswap-libs/uikit'
 
-const StyledCard = styled(Card)<{ isActive?: boolean; isFinished?: boolean }>`
+const StyledCard = styled(Card)<{ isStaking?: boolean; isFinished?: boolean }>`
   background: ${(props) => props.theme.card.background};
   box-shadow: 0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05);
   border-radius: 32px;
   display: flex;
   color: ${({ isFinished, theme }) => theme.colors[isFinished ? 'textDisabled' : 'secondary']};
-  box-shadow: ${({ isActive }) =>
-    isActive
+  box-shadow: ${({ isStaking }) =>
+    isStaking
       ? '0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4);'
       : '0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)'};
   flex-direction: column;
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index 09b3b6a448858..97192583c0ffc 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -9,11 +9,12 @@ const Wrapper = styled(CardHeader)<{ isFinished?: boolean }>`
 `
 
 const StyledCardHeader: React.FC<{
-  poolImageSrc: string
   earningTokenSymbol: string
   stakingTokenSymbol: string
   isFinished?: boolean
-}> = ({ poolImageSrc, earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
+}> = ({ earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
+  const poolImageSrc = `${earningTokenSymbol}-${stakingTokenSymbol}.svg`.toLocaleLowerCase()
+
   return (
     <>
       <Wrapper isFinished={isFinished}>
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 4cfd6a95aeddb..deb8fbace920a 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -29,14 +29,12 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
-  const isCardActive = isFinished && accountHasStakedBalance
+  // IS OLD SYRUP CONDITION
   const isOldSyrup = stakingToken.symbol === tokens.syrup.symbol
-  const poolImageSrc = `${pool.earningToken.symbol}-${pool.stakingToken.symbol}.svg`.toLocaleLowerCase()
 
   return (
-    <StyledCard isActive={isCardActive} isFinished={isFinished && sousId !== 0}>
+    <StyledCard isStaking={!isFinished && accountHasStakedBalance} isFinished={isFinished && sousId !== 0}>
       <StyledCardHeader
-        poolImageSrc={poolImageSrc}
         earningTokenSymbol={earningToken.symbol}
         stakingTokenSymbol={stakingToken.symbol}
         isFinished={isFinished && sousId !== 0}
@@ -52,7 +50,12 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         />
         <Flex mt="24px" flexDirection="column">
           {account ? (
-            <CardActions pool={pool} isOldSyrup={isOldSyrup} />
+            <CardActions
+              pool={pool}
+              isOldSyrup={isOldSyrup}
+              stakedBalance={stakedBalance}
+              accountHasStakedBalance={accountHasStakedBalance}
+            />
           ) : (
             <>
               <Text mb="10px" textTransform="uppercase" fontSize="12px" color="textSubtle" bold>

From 32adaa8170752111ccdc3585b09b6ebc1213bf42 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 20 Apr 2021 17:27:37 +0100
Subject: [PATCH 14/40] feat(syrup-pool-v2): Approval and Staking actions

---
 .../PoolCard/CardActions/StakingActions.tsx   | 73 -------------------
 .../StakingActions/ApprovalAction.tsx         | 57 +++++++++++++++
 .../StakingActions/StakeAction.tsx            | 35 +++++++++
 .../CardActions/StakingActions/index.tsx      | 59 +++++++++++++++
 .../components/PoolCard/CardActions/index.tsx |  2 +
 5 files changed, 153 insertions(+), 73 deletions(-)
 delete mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx

diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
deleted file mode 100644
index 3dc5123814a63..0000000000000
--- a/src/views/Pools/components/PoolCard/CardActions/StakingActions.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import { Flex, Box, Text, Button } from '@pancakeswap-libs/uikit'
-import styled from 'styled-components'
-import { useSousApprove } from 'hooks/useApprove'
-import useI18n from 'hooks/useI18n'
-import { useERC20 } from 'hooks/useContract'
-import { useToast } from 'state/hooks'
-import { getAddress } from 'utils/addressHelpers'
-import { Token } from 'config/constants/types'
-
-interface StakingActionsProps {
-  stakingToken: Token
-  needsApproval: boolean
-  isOldSyrup: boolean
-  isFinished: boolean
-  sousId: number
-}
-
-const InlineText = styled(Text)`
-  display: inline;
-`
-
-const StakingActions: React.FC<StakingActionsProps> = ({
-  stakingToken,
-  needsApproval,
-  isOldSyrup,
-  isFinished,
-  sousId,
-}) => {
-  const TranslateString = useI18n()
-  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
-  const [requestedApproval, setRequestedApproval] = useState(false)
-  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
-  const { toastSuccess } = useToast()
-
-  const handleApprove = useCallback(async () => {
-    try {
-      setRequestedApproval(true)
-      const txHash = await onApprove()
-      debugger // eslint-disable-line
-      if (txHash) {
-        toastSuccess('You have claimed your rewards!')
-      }
-      // user rejected tx or didn't go thru
-      setRequestedApproval(false)
-    } catch (e) {
-      console.error(e)
-    }
-  }, [onApprove, setRequestedApproval, toastSuccess])
-
-  return (
-    <Flex flexDirection="column">
-      <Box display="inline">
-        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-          {TranslateString(1070, `stake`)}
-        </InlineText>
-        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
-          {` ${stakingToken.symbol}`}
-        </InlineText>
-      </Box>
-      {needsApproval && !isOldSyrup ? (
-        // IS OLD SYRUP CONDITIONAL
-        <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
-          {TranslateString(999, 'Enable')}
-        </Button>
-      ) : (
-        <span>Thing</span>
-      )}
-    </Flex>
-  )
-}
-
-export default StakingActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx
new file mode 100644
index 0000000000000..d4a67f767ce87
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx
@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react'
+import { Button, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import { useSousApprove } from 'hooks/useApprove'
+import useI18n from 'hooks/useI18n'
+import { useERC20 } from 'hooks/useContract'
+import { useToast } from 'state/hooks'
+import { getAddress } from 'utils/addressHelpers'
+import { Token } from 'config/constants/types'
+
+interface ApprovalActionProps {
+  stakingToken: Token
+  earningTokenSymbol: string
+  isFinished: boolean
+  sousId: number
+}
+
+const ApprovalAction: React.FC<ApprovalActionProps> = ({ stakingToken, earningTokenSymbol, isFinished, sousId }) => {
+  const TranslateString = useI18n()
+  const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
+  const [requestedApproval, setRequestedApproval] = useState(false)
+  const { onApprove } = useSousApprove(stakingTokenContract, sousId)
+  const { toastSuccess, toastError } = useToast()
+
+  const handleApprove = useCallback(async () => {
+    try {
+      setRequestedApproval(true)
+      const txHash = await onApprove()
+      if (txHash) {
+        toastSuccess(
+          `${TranslateString(999, 'Contract Enabled')}`,
+          `${TranslateString(999, `You can now stake in the ${earningTokenSymbol} pool!`)}`,
+        )
+        setRequestedApproval(false)
+      } else {
+        // user rejected tx or didn't go thru
+        setRequestedApproval(false)
+      }
+    } catch (e) {
+      console.error(e)
+      toastError('Error', e?.message)
+    }
+  }, [onApprove, setRequestedApproval, toastSuccess, toastError, TranslateString, earningTokenSymbol])
+
+  return (
+    <Button
+      isLoading={requestedApproval}
+      endIcon={requestedApproval ? <AutoRenewIcon spin color="currentColor" /> : null}
+      disabled={isFinished || requestedApproval}
+      onClick={handleApprove}
+      width="100%"
+    >
+      {TranslateString(999, 'Enable')}
+    </Button>
+  )
+}
+
+export default ApprovalAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
new file mode 100644
index 0000000000000..e3dbd9fd61d83
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useCallback } from 'react'
+import { Flex, Box, Text, Button, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+import { useSousApprove } from 'hooks/useApprove'
+import useI18n from 'hooks/useI18n'
+import { useERC20 } from 'hooks/useContract'
+import { useToast } from 'state/hooks'
+import { getAddress } from 'utils/addressHelpers'
+import { Token } from 'config/constants/types'
+import ApprovalAction from './ApprovalAction'
+
+interface StakeActionsProps {
+  stakedBalance: BigNumber
+}
+
+const InlineText = styled(Text)`
+  display: inline;
+`
+
+const StakeAction: React.FC<StakeActionsProps> = ({ stakedBalance }) => {
+  const TranslateString = useI18n()
+
+  return (
+    <Flex flexDirection="column">
+      {stakedBalance.toNumber() === 0 ? (
+        <Button>{TranslateString(1070, 'Stake')}</Button>
+      ) : (
+        <Button>Stuff is staked</Button>
+      )}
+    </Flex>
+  )
+}
+
+export default StakeAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx
new file mode 100644
index 0000000000000..c97cb8da96687
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { Flex, Box, Text } from '@pancakeswap-libs/uikit'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+import useI18n from 'hooks/useI18n'
+import { Token } from 'config/constants/types'
+import ApprovalAction from './ApprovalAction'
+import StakeAction from './StakeAction'
+
+interface StakingActionsProps {
+  stakingToken: Token
+  stakedBalance: BigNumber
+  earningTokenSymbol: string
+  needsApproval: boolean
+  isOldSyrup: boolean
+  isFinished: boolean
+  sousId: number
+}
+
+const InlineText = styled(Text)`
+  display: inline;
+`
+
+const StakingActions: React.FC<StakingActionsProps> = ({
+  stakingToken,
+  stakedBalance,
+  earningTokenSymbol,
+  needsApproval,
+  isOldSyrup,
+  isFinished,
+  sousId,
+}) => {
+  const TranslateString = useI18n()
+
+  return (
+    <Flex flexDirection="column">
+      <Box display="inline">
+        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+          {TranslateString(1070, `stake`)}
+        </InlineText>
+        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
+          {` ${stakingToken.symbol}`}
+        </InlineText>
+      </Box>
+      {needsApproval && !isOldSyrup ? (
+        <ApprovalAction
+          stakingToken={stakingToken}
+          earningTokenSymbol={earningTokenSymbol}
+          isFinished={isFinished}
+          sousId={sousId}
+        />
+      ) : (
+        <StakeAction stakedBalance={stakedBalance} />
+      )}
+    </Flex>
+  )
+}
+
+export default StakingActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index cdc5f816729ea..03433e27c3cd7 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -127,6 +127,8 @@ const CardActions: React.FC<{
 
       <StakingActions
         stakingToken={stakingToken}
+        stakedBalance={stakedBalance}
+        earningTokenSymbol={earningToken.symbol}
         needsApproval={needsApproval}
         isOldSyrup={isOldSyrup}
         isFinished={isFinished}

From 55bb60b25cee3a83a997d01075a38fc5fc2f7cab Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 21 Apr 2021 14:54:46 +0100
Subject: [PATCH 15/40] feat(pool-stake-modal): Basics of stake modal laid out

---
 src/utils/formatBalance.ts                    |   2 +-
 .../Pools/components/PoolCard/AprRow.tsx      |  13 +-
 .../{StakingActions => }/ApprovalAction.tsx   |   0
 .../PoolCard/CardActions/StakeAction.tsx      |  75 ++++++++
 .../StakingActions/StakeAction.tsx            |  35 ----
 .../CardActions/StakingActions/index.tsx      |  59 -------
 .../components/PoolCard/CardActions/index.tsx |  92 ++++------
 .../components/PoolCard/ConfirmButton.tsx     |  39 +++++
 .../Pools/components/PoolCard/StakeModal.tsx  | 163 ++++++++++++++++++
 src/views/Pools/components/PoolCard/index.tsx |  10 +-
 src/views/Pools/index.tsx                     |   4 +-
 11 files changed, 318 insertions(+), 174 deletions(-)
 rename src/views/Pools/components/PoolCard/CardActions/{StakingActions => }/ApprovalAction.tsx (100%)
 create mode 100644 src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx
 create mode 100644 src/views/Pools/components/PoolCard/ConfirmButton.tsx
 create mode 100644 src/views/Pools/components/PoolCard/StakeModal.tsx

diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts
index 0325f536dd4c8..ea8834fc646f0 100644
--- a/src/utils/formatBalance.ts
+++ b/src/utils/formatBalance.ts
@@ -6,7 +6,7 @@ export const getBalanceNumber = (balance: BigNumber, decimals = 18) => {
 }
 
 export const getFullDisplayBalance = (balance: BigNumber, decimals = 18) => {
-  return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed()
+  return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed(decimals)
 }
 
 export const formatNumber = (number: number, minPrecision = 2, maxPrecision = 2) => {
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 9226bcb413ed9..92e685cdd6820 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -11,7 +11,6 @@ import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
 
 interface AprRowProps {
-  isOldSyrup?: boolean
   isFinished: boolean
   stakingToken: Token
   earningToken: Token
@@ -19,14 +18,7 @@ interface AprRowProps {
   tokenPerBlock: string
 }
 
-const AprRow: React.FC<AprRowProps> = ({
-  isOldSyrup = false,
-  isFinished,
-  stakingToken,
-  earningToken,
-  totalStaked,
-  tokenPerBlock,
-}) => {
+const AprRow: React.FC<AprRowProps> = ({ isFinished, stakingToken, earningToken, totalStaked, tokenPerBlock }) => {
   const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
   const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
   const apr = getPoolApr(
@@ -57,8 +49,7 @@ const AprRow: React.FC<AprRowProps> = ({
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <Text fontSize="16px">{TranslateString(736, 'APR')}:</Text>
-      {isFinished || isOldSyrup || !apr ? (
-        // IS OLD SYRUP CONDITIONAL
+      {isFinished || !apr ? (
         <Skeleton width="82px" height="32px" />
       ) : (
         <Flex alignItems="center">
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
similarity index 100%
rename from src/views/Pools/components/PoolCard/CardActions/StakingActions/ApprovalAction.tsx
rename to src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
new file mode 100644
index 0000000000000..3bfc02658e428
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useCallback } from 'react'
+import { Flex, Box, Text, Button, AutoRenewIcon, useModal } from '@pancakeswap-libs/uikit'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+import { Token } from 'config/constants/types'
+import { useSousStake } from 'hooks/useStake'
+import { useSousApprove } from 'hooks/useApprove'
+import useI18n from 'hooks/useI18n'
+import { useERC20 } from 'hooks/useContract'
+import { useToast } from 'state/hooks'
+import { getAddress } from 'utils/addressHelpers'
+import DepositModal from '../DepositModal'
+import StakeModal from '../StakeModal'
+
+import ApprovalAction from './ApprovalAction'
+
+interface StakeActionsProps {
+  stakingTokenBalance: BigNumber
+  stakingToken: Token
+  earningToken: Token
+  stakedBalance: BigNumber
+  stakingLimit?: number
+  sousId: number
+  isBnbPool: boolean
+}
+
+const InlineText = styled(Text)`
+  display: inline;
+`
+
+const StakeAction: React.FC<StakeActionsProps> = ({
+  stakingTokenBalance,
+  stakingToken,
+  earningToken,
+  stakedBalance,
+  stakingLimit,
+  sousId,
+  isBnbPool,
+}) => {
+  const TranslateString = useI18n()
+  const { onStake } = useSousStake(sousId, isBnbPool)
+  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
+
+  const [onPresentDeposit] = useModal(
+    <DepositModal
+      max={stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance}
+      onConfirm={onStake}
+      tokenName={stakingLimit ? `${stakingToken.symbol} (${stakingLimit} max)` : stakingToken.symbol}
+      stakingTokenDecimals={stakingToken.decimals}
+    />,
+  )
+
+  const [onPresentStake] = useModal(
+    <StakeModal
+      stakingMax={
+        stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
+      }
+      isBnbPool={isBnbPool}
+      sousId={sousId}
+      stakingToken={stakingToken}
+    />,
+  )
+
+  return (
+    <Flex flexDirection="column">
+      {stakedBalance.toNumber() === 0 ? (
+        <Button onClick={onPresentStake}>{TranslateString(1070, 'Stake')}</Button>
+      ) : (
+        <Button>Stuff is staked</Button>
+      )}
+    </Flex>
+  )
+}
+
+export default StakeAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
deleted file mode 100644
index e3dbd9fd61d83..0000000000000
--- a/src/views/Pools/components/PoolCard/CardActions/StakingActions/StakeAction.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import { Flex, Box, Text, Button, AutoRenewIcon } from '@pancakeswap-libs/uikit'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import { useSousApprove } from 'hooks/useApprove'
-import useI18n from 'hooks/useI18n'
-import { useERC20 } from 'hooks/useContract'
-import { useToast } from 'state/hooks'
-import { getAddress } from 'utils/addressHelpers'
-import { Token } from 'config/constants/types'
-import ApprovalAction from './ApprovalAction'
-
-interface StakeActionsProps {
-  stakedBalance: BigNumber
-}
-
-const InlineText = styled(Text)`
-  display: inline;
-`
-
-const StakeAction: React.FC<StakeActionsProps> = ({ stakedBalance }) => {
-  const TranslateString = useI18n()
-
-  return (
-    <Flex flexDirection="column">
-      {stakedBalance.toNumber() === 0 ? (
-        <Button>{TranslateString(1070, 'Stake')}</Button>
-      ) : (
-        <Button>Stuff is staked</Button>
-      )}
-    </Flex>
-  )
-}
-
-export default StakeAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx
deleted file mode 100644
index c97cb8da96687..0000000000000
--- a/src/views/Pools/components/PoolCard/CardActions/StakingActions/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react'
-import { Flex, Box, Text } from '@pancakeswap-libs/uikit'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import useI18n from 'hooks/useI18n'
-import { Token } from 'config/constants/types'
-import ApprovalAction from './ApprovalAction'
-import StakeAction from './StakeAction'
-
-interface StakingActionsProps {
-  stakingToken: Token
-  stakedBalance: BigNumber
-  earningTokenSymbol: string
-  needsApproval: boolean
-  isOldSyrup: boolean
-  isFinished: boolean
-  sousId: number
-}
-
-const InlineText = styled(Text)`
-  display: inline;
-`
-
-const StakingActions: React.FC<StakingActionsProps> = ({
-  stakingToken,
-  stakedBalance,
-  earningTokenSymbol,
-  needsApproval,
-  isOldSyrup,
-  isFinished,
-  sousId,
-}) => {
-  const TranslateString = useI18n()
-
-  return (
-    <Flex flexDirection="column">
-      <Box display="inline">
-        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-          {TranslateString(1070, `stake`)}
-        </InlineText>
-        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
-          {` ${stakingToken.symbol}`}
-        </InlineText>
-      </Box>
-      {needsApproval && !isOldSyrup ? (
-        <ApprovalAction
-          stakingToken={stakingToken}
-          earningTokenSymbol={earningTokenSymbol}
-          isFinished={isFinished}
-          sousId={sousId}
-        />
-      ) : (
-        <StakeAction stakedBalance={stakedBalance} />
-      )}
-    </Flex>
-  )
-}
-
-export default StakingActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 03433e27c3cd7..0017e91003d4e 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -4,19 +4,18 @@ import styled from 'styled-components'
 import { Button, IconButton, useModal, AddIcon, Flex, Text, Box } from '@pancakeswap-libs/uikit'
 import Label from 'components/Label'
 import useI18n from 'hooks/useI18n'
-import { useSousStake } from 'hooks/useStake'
 import { useSousUnstake } from 'hooks/useUnstake'
 import { getBalanceNumber } from 'utils/formatBalance'
-
 import { useSousHarvest } from 'hooks/useHarvest'
+import { useSousStake } from 'hooks/useStake'
 import Balance from 'components/Balance'
 import { PoolCategory } from 'config/constants/types'
 import { Pool } from 'state/types'
-import DepositModal from '../DepositModal'
 import WithdrawModal from '../WithdrawModal'
 import CompoundModal from '../CompoundModal'
 import HarvestButton from '../HarvestButton'
-import StakingActions from './StakingActions'
+import ApprovalAction from './ApprovalAction'
+import StakeAction from './StakeAction'
 
 const BalanceAndCompound = styled.div`
   display: flex;
@@ -25,28 +24,15 @@ const BalanceAndCompound = styled.div`
   flex-direction: row;
 `
 
-const StyledActionSpacer = styled.div`
-  height: ${(props) => props.theme.spacing[4]}px;
-  width: ${(props) => props.theme.spacing[4]}px;
-`
-
-const StyledDetails = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 14px;
-`
-
 const InlineText = styled(Text)`
   display: inline;
 `
 
 const CardActions: React.FC<{
   pool: Pool
-  isOldSyrup: boolean
   stakedBalance: BigNumber
   accountHasStakedBalance: boolean
-}> = ({ pool, isOldSyrup, stakedBalance, accountHasStakedBalance }) => {
+}> = ({ pool, stakedBalance, accountHasStakedBalance }) => {
   const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
 
   // Pools using native BNB behave differently than pools using a token
@@ -55,25 +41,15 @@ const CardActions: React.FC<{
   const TranslateString = useI18n()
 
   const [pendingTx, setPendingTx] = useState(false)
-  const { onStake } = useSousStake(sousId, isBnbPool)
   const { onUnstake } = useSousUnstake(sousId)
   const { onReward } = useSousHarvest(sousId, isBnbPool)
+  const { onStake } = useSousStake(sousId, isBnbPool)
 
   const allowance = new BigNumber(userData?.allowance || 0)
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
   const earnings = new BigNumber(userData?.pendingReward || 0)
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
 
-  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
-  const [onPresentDeposit] = useModal(
-    <DepositModal
-      max={stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance}
-      onConfirm={onStake}
-      tokenName={stakingLimit ? `${stakingToken.symbol} (${stakingLimit} max)` : stakingToken.symbol}
-      stakingTokenDecimals={stakingToken.decimals}
-    />,
-  )
-
   const [onPresentCompound] = useModal(
     <CompoundModal earnings={earnings} onConfirm={onStake} tokenName={stakingToken.symbol} />,
   )
@@ -96,24 +72,8 @@ const CardActions: React.FC<{
           {TranslateString(1072, `earned`)}
         </InlineText>
       </Box>
-      {!isOldSyrup ? (
-        // IS OLD SYRUP CONDITIONAL
-        <BalanceAndCompound>
-          <Balance value={getBalanceNumber(earnings, earningToken.decimals)} isDisabled={isFinished} />
-          {sousId === 0 && harvest && (
-            <HarvestButton
-              disabled={!earnings.toNumber() || pendingTx}
-              text={TranslateString(704, 'Compound')}
-              onClick={onPresentCompound}
-            />
-          )}
-        </BalanceAndCompound>
-      ) : (
-        <span>Is old syrup</span>
-        // <OldSyrupTitle hasBalance={accountHasStakedBalance} />
-      )}
-      {harvest && !isOldSyrup && (
-        // IS OLD SYRUP CONDITIONAL
+
+      {harvest && (
         <HarvestButton
           disabled={!earnings.toNumber() || pendingTx}
           text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
@@ -125,16 +85,34 @@ const CardActions: React.FC<{
         />
       )}
 
-      <StakingActions
-        stakingToken={stakingToken}
-        stakedBalance={stakedBalance}
-        earningTokenSymbol={earningToken.symbol}
-        needsApproval={needsApproval}
-        isOldSyrup={isOldSyrup}
-        isFinished={isFinished}
-        sousId={sousId}
-      />
-
+      <Flex flexDirection="column">
+        <Box display="inline">
+          <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+            {TranslateString(1070, `stake`)}
+          </InlineText>
+          <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
+            {` ${stakingToken.symbol}`}
+          </InlineText>
+        </Box>
+        {needsApproval ? (
+          <ApprovalAction
+            stakingToken={stakingToken}
+            earningTokenSymbol={earningToken.symbol}
+            isFinished={isFinished}
+            sousId={sousId}
+          />
+        ) : (
+          <StakeAction
+            stakingTokenBalance={stakingTokenBalance}
+            stakingToken={stakingToken}
+            earningToken={earningToken}
+            stakedBalance={stakedBalance}
+            stakingLimit={stakingLimit}
+            sousId={sousId}
+            isBnbPool={isBnbPool}
+          />
+        )}
+      </Flex>
       {/* <Flex flexDirection="column">
         {needsApproval && !isOldSyrup ? (
           // IS OLD SYRUP CONDITIONAL
diff --git a/src/views/Pools/components/PoolCard/ConfirmButton.tsx b/src/views/Pools/components/PoolCard/ConfirmButton.tsx
new file mode 100644
index 0000000000000..e53414311c1c3
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/ConfirmButton.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Button, ButtonProps, RefreshIcon, CheckmarkIcon } from '@pancakeswap-libs/uikit'
+
+interface ConfirmButtonProps extends ButtonProps {
+  isConfirmed?: boolean
+}
+
+const ConfirmButton: React.FC<ConfirmButtonProps> = ({
+  isLoading,
+  isConfirmed,
+  children,
+  endIcon,
+  disabled,
+  ...props
+}) => {
+  const handleRenderIcon = () => {
+    if (endIcon) {
+      return endIcon
+    }
+
+    if (isLoading) {
+      return <RefreshIcon color="white" />
+    }
+
+    if (isConfirmed) {
+      return <CheckmarkIcon color="textDisabled" width="17px" />
+    }
+
+    return null
+  }
+
+  return (
+    <Button endIcon={handleRenderIcon()} {...props} isLoading={isLoading} disabled={disabled || isConfirmed}>
+      {children}
+    </Button>
+  )
+}
+
+export default ConfirmButton
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
new file mode 100644
index 0000000000000..aaf482a252c84
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { Modal, Text, Flex, Image, Button, Slider, BalanceInput, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import useI18n from 'hooks/useI18n'
+import { BASE_EXCHANGE_URL } from 'config'
+import { useSousStake } from 'hooks/useStake'
+import { useSousUnstake } from 'hooks/useUnstake'
+import useTheme from 'hooks/useTheme'
+import BigNumber from 'bignumber.js'
+import { getFullDisplayBalance } from 'utils/formatBalance'
+import { Token } from 'config/constants/types'
+import { useGetApiPrice, useToast } from 'state/hooks'
+import ConfirmButton from './ConfirmButton'
+
+interface StakeModalProps {
+  sousId: number
+  isBnbPool: boolean
+  stakingToken: Token
+  stakingMax: BigNumber
+  isStaking?: boolean
+  onDismiss?: () => void
+}
+
+const StyledButton = styled(Button)`
+  flex-grow: 1;
+`
+
+const StakeModal: React.FC<StakeModalProps> = ({
+  sousId,
+  isBnbPool,
+  stakingToken,
+  isStaking = true,
+  stakingMax,
+  onDismiss,
+}) => {
+  const TranslateString = useI18n()
+  const { onStake } = useSousStake(sousId, isBnbPool)
+  const { onUnstake } = useSousUnstake(sousId)
+  const { theme } = useTheme()
+  const { toastSuccess, toastError } = useToast()
+
+  const [pendingTx, setPendingTx] = useState(false)
+  const [stakeAmount, setStakeAmount] = useState('')
+  const [percent, setPercent] = useState(0)
+
+  const tokenPrice = useGetApiPrice(stakingToken.symbol)
+
+  const handleStakeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = event.target.value ? event.target.value : '0'
+    const convertedInput = new BigNumber(inputValue).multipliedBy(new BigNumber(10).pow(stakingToken.decimals))
+    const percentage = Math.floor(convertedInput.dividedBy(stakingMax).multipliedBy(100).toNumber())
+    setStakeAmount(inputValue)
+    setPercent(percentage > 100 ? 100 : percentage)
+  }
+
+  const handleChangePercent = (sliderPercent: number) => {
+    const percentageOfStakingMax = stakingMax.dividedBy(100).multipliedBy(sliderPercent)
+    const amountToStake = getFullDisplayBalance(percentageOfStakingMax, stakingToken.decimals)
+    setStakeAmount(amountToStake)
+    setPercent(sliderPercent)
+  }
+
+  const handleConfirmClick = async () => {
+    setPendingTx(true)
+
+    if (isStaking) {
+      try {
+        await onStake(stakeAmount, stakingToken.decimals)
+        toastSuccess(
+          `${TranslateString(1074, 'Staked')}!`,
+          TranslateString(999, 'Your funds have been staked in the pool!'),
+        )
+        setPendingTx(false)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
+    } else {
+      try {
+        await onUnstake(stakeAmount, stakingToken.decimals)
+        toastSuccess(
+          `${TranslateString(999, 'Unstaked')}!`,
+          TranslateString(999, 'Your earnings have also been harvested to your wallet!'),
+        )
+        setPendingTx(false)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
+    }
+  }
+
+  return (
+    <Modal
+      title={isStaking ? TranslateString(999, 'Stake in Pool') : TranslateString(588, 'Unstake')}
+      onDismiss={onDismiss}
+    >
+      <Flex alignItems="center" justifyContent="space-between" mb="8px">
+        <Text bold>{isStaking ? TranslateString(316, 'Stake') : TranslateString(588, 'Unstake')}:</Text>
+        <Flex alignItems="center" minWidth="70px">
+          <Image src={`/images/tokens/${stakingToken.symbol}.png`} width={24} height={24} alt={stakingToken.symbol} />
+          <Text ml="4px" bold>
+            {stakingToken.symbol}
+          </Text>
+        </Flex>
+      </Flex>
+      <BalanceInput
+        value={stakeAmount}
+        onChange={handleStakeInputChange}
+        currencyValue={`~${new BigNumber(stakeAmount).multipliedBy(tokenPrice).toNumber() || 0} USD`}
+      />
+      <Text mt="8px" ml="auto" color="textSubtle" fontSize="12px" mb="8px">
+        Balance: {getFullDisplayBalance(stakingMax, stakingToken.decimals)}
+      </Text>
+      <Slider
+        min={0}
+        max={100}
+        value={percent}
+        onValueChanged={handleChangePercent}
+        name="stake"
+        valueLabel={`${percent}%`}
+        step={1}
+      />
+      <Flex alignItems="center" justifyContent="space-between" mt="8px">
+        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(25)}>
+          25%
+        </StyledButton>
+        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(50)}>
+          50%
+        </StyledButton>
+        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(75)}>
+          75%
+        </StyledButton>
+        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(100)}>
+          MAX
+        </StyledButton>
+      </Flex>
+      <ConfirmButton
+        isLoading={pendingTx}
+        endIcon={pendingTx ? <AutoRenewIcon spin color="currentColor" /> : null}
+        onClick={handleConfirmClick}
+        mt="24px"
+      >
+        {TranslateString(464, 'Confirm')}
+      </ConfirmButton>
+      {isStaking && (
+        <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">
+          {TranslateString(999, 'Get')} {stakingToken.symbol}
+        </Button>
+      )}
+    </Modal>
+  )
+}
+
+export default StakeModal
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index deb8fbace920a..c6cdc2aea72db 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -29,8 +29,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
-  // IS OLD SYRUP CONDITION
-  const isOldSyrup = stakingToken.symbol === tokens.syrup.symbol
 
   return (
     <StyledCard isStaking={!isFinished && accountHasStakedBalance} isFinished={isFinished && sousId !== 0}>
@@ -42,7 +40,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
       <CardBody>
         <AprRow
           isFinished={isFinished}
-          isOldSyrup={isOldSyrup}
           stakingToken={stakingToken}
           earningToken={earningToken}
           totalStaked={pool.totalStaked}
@@ -50,12 +47,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         />
         <Flex mt="24px" flexDirection="column">
           {account ? (
-            <CardActions
-              pool={pool}
-              isOldSyrup={isOldSyrup}
-              stakedBalance={stakedBalance}
-              accountHasStakedBalance={accountHasStakedBalance}
-            />
+            <CardActions pool={pool} stakedBalance={stakedBalance} accountHasStakedBalance={accountHasStakedBalance} />
           ) : (
             <>
               <Text mb="10px" textTransform="uppercase" fontSize="12px" color="textSubtle" bold>
diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 020e6801d65b1..a30ea7ca292db 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -59,10 +59,10 @@ const Pools: React.FC = () => {
             as="a"
             href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool"
           >
-            <ButtonText color="card" bold fontSize="16px">
+            <ButtonText color="backgroundAlt" bold fontSize="16px">
               {TranslateString(999, 'Help')}
             </ButtonText>
-            <HelpIcon color="card" ml={[null, null, null, 0, '6px']} />
+            <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
           </Button>
         </Flex>
       </PageHeader>

From 41a6b0deac3f7f2af74df64c4b3256c4cd28fe01 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 21 Apr 2021 17:21:19 +0100
Subject: [PATCH 16/40] feat(syrup-pool-v2): Styling of cards and improvements
 to error reporting for users

---
 src/utils/formatBalance.ts                                | 4 ++--
 .../components/PoolCard/CardActions/ApprovalAction.tsx    | 7 +++++++
 src/views/Pools/components/PoolCard/StakeModal.tsx        | 2 +-
 src/views/Pools/components/PoolCard/StyledCard.tsx        | 8 +++++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts
index ea8834fc646f0..d59f8d18b8380 100644
--- a/src/utils/formatBalance.ts
+++ b/src/utils/formatBalance.ts
@@ -5,8 +5,8 @@ export const getBalanceNumber = (balance: BigNumber, decimals = 18) => {
   return displayBalance.toNumber()
 }
 
-export const getFullDisplayBalance = (balance: BigNumber, decimals = 18) => {
-  return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed(decimals)
+export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, decimalsToAppear = null) => {
+  return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed(decimalsToAppear)
 }
 
 export const formatNumber = (number: number, minPrecision = 2, maxPrecision = 2) => {
diff --git a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
index d4a67f767ce87..d3a72b7e96629 100644
--- a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
@@ -33,6 +33,13 @@ const ApprovalAction: React.FC<ApprovalActionProps> = ({ stakingToken, earningTo
         setRequestedApproval(false)
       } else {
         // user rejected tx or didn't go thru
+        toastError(
+          `${TranslateString(999, 'Error')}`,
+          `${TranslateString(
+            999,
+            `Please try again. Confirm the transaction and make sure you are paying enough gas!`,
+          )}`,
+        )
         setRequestedApproval(false)
       }
     } catch (e) {
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index aaf482a252c84..1590be049853b 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -149,7 +149,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         onClick={handleConfirmClick}
         mt="24px"
       >
-        {TranslateString(464, 'Confirm')}
+        {pendingTx ? TranslateString(464, 'Confirming') : TranslateString(464, 'Confirm')}
       </ConfirmButton>
       {isStaking && (
         <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">
diff --git a/src/views/Pools/components/PoolCard/StyledCard.tsx b/src/views/Pools/components/PoolCard/StyledCard.tsx
index b6dc1a0c60fbf..425f244a09ece 100644
--- a/src/views/Pools/components/PoolCard/StyledCard.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCard.tsx
@@ -2,6 +2,8 @@ import styled from 'styled-components'
 import { Card } from '@pancakeswap-libs/uikit'
 
 const StyledCard = styled(Card)<{ isStaking?: boolean; isFinished?: boolean }>`
+  max-width: 352px;
+  margin: 0 8px 24px;
   background: ${(props) => props.theme.card.background};
   box-shadow: 0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05);
   border-radius: 32px;
@@ -9,11 +11,15 @@ const StyledCard = styled(Card)<{ isStaking?: boolean; isFinished?: boolean }>`
   color: ${({ isFinished, theme }) => theme.colors[isFinished ? 'textDisabled' : 'secondary']};
   box-shadow: ${({ isStaking }) =>
     isStaking
-      ? '0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4);'
+      ? '0px 0px 0px 2px #53DEE9;'
       : '0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)'};
   flex-direction: column;
   align-self: baseline;
   position: relative;
+
+  ${({ theme }) => theme.mediaQueries.sm} {
+    margin: 0 12px 46px;
+  }
 `
 
 export default StyledCard

From 057967b3a3f11c001924a6aa8315d8a634e3a37c Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 21 Apr 2021 17:37:44 +0100
Subject: [PATCH 17/40] feat(syrup-pool-v2): Add proper USD calculation

---
 src/views/Pools/components/PoolCard/AprRow.tsx        | 11 +++++++++--
 .../components/PoolCard/CardActions/StakeAction.tsx   |  3 +++
 .../Pools/components/PoolCard/CardActions/index.tsx   |  4 +++-
 src/views/Pools/components/PoolCard/StakeModal.tsx    | 10 ++++++----
 src/views/Pools/components/PoolCard/index.tsx         | 10 +++++++++-
 5 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 92e685cdd6820..f1d6121bcb1e8 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -16,11 +16,18 @@ interface AprRowProps {
   earningToken: Token
   totalStaked: BigNumber
   tokenPerBlock: string
+  stakingTokenPrice: number
 }
 
-const AprRow: React.FC<AprRowProps> = ({ isFinished, stakingToken, earningToken, totalStaked, tokenPerBlock }) => {
+const AprRow: React.FC<AprRowProps> = ({
+  isFinished,
+  stakingToken,
+  earningToken,
+  totalStaked,
+  tokenPerBlock,
+  stakingTokenPrice,
+}) => {
   const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
-  const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
   const apr = getPoolApr(
     stakingTokenPrice,
     rewardTokenPrice,
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
index 3bfc02658e428..a0d5ac4cd0958 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
@@ -16,6 +16,7 @@ import ApprovalAction from './ApprovalAction'
 
 interface StakeActionsProps {
   stakingTokenBalance: BigNumber
+  stakingTokenPrice: number
   stakingToken: Token
   earningToken: Token
   stakedBalance: BigNumber
@@ -30,6 +31,7 @@ const InlineText = styled(Text)`
 
 const StakeAction: React.FC<StakeActionsProps> = ({
   stakingTokenBalance,
+  stakingTokenPrice,
   stakingToken,
   earningToken,
   stakedBalance,
@@ -58,6 +60,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
       isBnbPool={isBnbPool}
       sousId={sousId}
       stakingToken={stakingToken}
+      stakingTokenPrice={stakingTokenPrice}
     />,
   )
 
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 0017e91003d4e..bf6dc46c35223 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -32,7 +32,8 @@ const CardActions: React.FC<{
   pool: Pool
   stakedBalance: BigNumber
   accountHasStakedBalance: boolean
-}> = ({ pool, stakedBalance, accountHasStakedBalance }) => {
+  stakingTokenPrice: number
+}> = ({ pool, stakedBalance, accountHasStakedBalance, stakingTokenPrice }) => {
   const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
 
   // Pools using native BNB behave differently than pools using a token
@@ -104,6 +105,7 @@ const CardActions: React.FC<{
         ) : (
           <StakeAction
             stakingTokenBalance={stakingTokenBalance}
+            stakingTokenPrice={stakingTokenPrice}
             stakingToken={stakingToken}
             earningToken={earningToken}
             stakedBalance={stakedBalance}
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index 1590be049853b..5edea3269fa32 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -7,9 +7,9 @@ import { useSousStake } from 'hooks/useStake'
 import { useSousUnstake } from 'hooks/useUnstake'
 import useTheme from 'hooks/useTheme'
 import BigNumber from 'bignumber.js'
-import { getFullDisplayBalance } from 'utils/formatBalance'
+import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
 import { Token } from 'config/constants/types'
-import { useGetApiPrice, useToast } from 'state/hooks'
+import { useToast } from 'state/hooks'
 import ConfirmButton from './ConfirmButton'
 
 interface StakeModalProps {
@@ -17,6 +17,7 @@ interface StakeModalProps {
   isBnbPool: boolean
   stakingToken: Token
   stakingMax: BigNumber
+  stakingTokenPrice: number
   isStaking?: boolean
   onDismiss?: () => void
 }
@@ -31,6 +32,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
   stakingToken,
   isStaking = true,
   stakingMax,
+  stakingTokenPrice,
   onDismiss,
 }) => {
   const TranslateString = useI18n()
@@ -43,7 +45,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
   const [stakeAmount, setStakeAmount] = useState('')
   const [percent, setPercent] = useState(0)
 
-  const tokenPrice = useGetApiPrice(stakingToken.symbol)
+  const usdValueStaked = formatNumber(parseFloat(stakeAmount) * stakingTokenPrice)
 
   const handleStakeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value ? event.target.value : '0'
@@ -115,7 +117,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
       <BalanceInput
         value={stakeAmount}
         onChange={handleStakeInputChange}
-        currencyValue={`~${new BigNumber(stakeAmount).multipliedBy(tokenPrice).toNumber() || 0} USD`}
+        currencyValue={`~${usdValueStaked || 0} USD`}
       />
       <Text mt="8px" ml="auto" color="textSubtle" fontSize="12px" mb="8px">
         Balance: {getFullDisplayBalance(stakingMax, stakingToken.decimals)}
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index c6cdc2aea72db..e3159e2c17567 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -6,6 +6,7 @@ import UnlockButton from 'components/UnlockButton'
 import useI18n from 'hooks/useI18n'
 import { getAddress } from 'utils/addressHelpers'
 import tokens from 'config/constants/tokens'
+import { useGetApiPrice } from 'state/hooks'
 import { Pool } from 'state/types'
 import AprRow from './AprRow'
 import StyledCard from './StyledCard'
@@ -29,6 +30,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
   const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
+  const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
 
   return (
     <StyledCard isStaking={!isFinished && accountHasStakedBalance} isFinished={isFinished && sousId !== 0}>
@@ -41,13 +43,19 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         <AprRow
           isFinished={isFinished}
           stakingToken={stakingToken}
+          stakingTokenPrice={stakingTokenPrice}
           earningToken={earningToken}
           totalStaked={pool.totalStaked}
           tokenPerBlock={pool.tokenPerBlock}
         />
         <Flex mt="24px" flexDirection="column">
           {account ? (
-            <CardActions pool={pool} stakedBalance={stakedBalance} accountHasStakedBalance={accountHasStakedBalance} />
+            <CardActions
+              pool={pool}
+              stakedBalance={stakedBalance}
+              stakingTokenPrice={stakingTokenPrice}
+              accountHasStakedBalance={accountHasStakedBalance}
+            />
           ) : (
             <>
               <Text mb="10px" textTransform="uppercase" fontSize="12px" color="textSubtle" bold>

From 40846f1e077edabe470c6ce8479310f64395cdf4 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 11:44:50 +0100
Subject: [PATCH 18/40] feat(syrup-pool-v2): Adding unstaking buttons and rough
 modal operations

---
 src/utils/formatBalance.ts                    |  2 +-
 .../PoolCard/CardActions/StakeAction.tsx      | 66 +++++++++++--------
 .../components/PoolCard/CardActions/index.tsx | 11 ++--
 .../Pools/components/PoolCard/StakeModal.tsx  | 26 ++++----
 4 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts
index d59f8d18b8380..ef819b115d10c 100644
--- a/src/utils/formatBalance.ts
+++ b/src/utils/formatBalance.ts
@@ -5,7 +5,7 @@ export const getBalanceNumber = (balance: BigNumber, decimals = 18) => {
   return displayBalance.toNumber()
 }
 
-export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, decimalsToAppear = null) => {
+export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, decimalsToAppear = undefined) => {
   return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed(decimalsToAppear)
 }
 
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
index a0d5ac4cd0958..2b3e3c5d218ce 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
@@ -1,19 +1,11 @@
-import React, { useState, useCallback } from 'react'
-import { Flex, Box, Text, Button, AutoRenewIcon, useModal } from '@pancakeswap-libs/uikit'
+import React from 'react'
+import { Flex, Box, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
 import { Token } from 'config/constants/types'
-import { useSousStake } from 'hooks/useStake'
-import { useSousApprove } from 'hooks/useApprove'
 import useI18n from 'hooks/useI18n'
-import { useERC20 } from 'hooks/useContract'
-import { useToast } from 'state/hooks'
-import { getAddress } from 'utils/addressHelpers'
-import DepositModal from '../DepositModal'
+import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
 import StakeModal from '../StakeModal'
 
-import ApprovalAction from './ApprovalAction'
-
 interface StakeActionsProps {
   stakingTokenBalance: BigNumber
   stakingTokenPrice: number
@@ -23,12 +15,9 @@ interface StakeActionsProps {
   stakingLimit?: number
   sousId: number
   isBnbPool: boolean
+  isStaked: ConstrainBoolean
 }
 
-const InlineText = styled(Text)`
-  display: inline;
-`
-
 const StakeAction: React.FC<StakeActionsProps> = ({
   stakingTokenBalance,
   stakingTokenPrice,
@@ -38,38 +27,57 @@ const StakeAction: React.FC<StakeActionsProps> = ({
   stakingLimit,
   sousId,
   isBnbPool,
+  isStaked,
 }) => {
   const TranslateString = useI18n()
-  const { onStake } = useSousStake(sousId, isBnbPool)
   const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
+  const stakingMax =
+    stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
+  const formattedBalance = formatNumber(getBalanceNumber(stakingMax, stakingToken.decimals), 3, 3)
+  const stakingMaxDollarValue = formatNumber(
+    getBalanceNumber(stakingMax.multipliedBy(stakingTokenPrice), stakingToken.decimals),
+  )
 
-  const [onPresentDeposit] = useModal(
-    <DepositModal
-      max={stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance}
-      onConfirm={onStake}
-      tokenName={stakingLimit ? `${stakingToken.symbol} (${stakingLimit} max)` : stakingToken.symbol}
-      stakingTokenDecimals={stakingToken.decimals}
+  const [onPresentStake] = useModal(
+    <StakeModal
+      stakingMax={stakingMax}
+      isBnbPool={isBnbPool}
+      sousId={sousId}
+      stakingToken={stakingToken}
+      stakingTokenPrice={stakingTokenPrice}
     />,
   )
 
-  const [onPresentStake] = useModal(
+  const [onPresentUnstake] = useModal(
     <StakeModal
-      stakingMax={
-        stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
-      }
+      stakingMax={stakingMax}
       isBnbPool={isBnbPool}
       sousId={sousId}
       stakingToken={stakingToken}
       stakingTokenPrice={stakingTokenPrice}
+      isRemovingStake
     />,
   )
 
   return (
     <Flex flexDirection="column">
-      {stakedBalance.toNumber() === 0 ? (
-        <Button onClick={onPresentStake}>{TranslateString(1070, 'Stake')}</Button>
+      {isStaked ? (
+        <Flex justifyContent="space-between" alignItems="center">
+          <Flex flexDirection="column">
+            <Heading>{formattedBalance}</Heading>
+            <Text fontSize="12px" color="textSubtle">{`~${stakingMaxDollarValue || 0} USD`}</Text>
+          </Flex>
+          <Flex>
+            <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
+              <MinusIcon color="primary" width="24px" />
+            </IconButton>
+            <IconButton variant="secondary" onClick={onPresentStake}>
+              <AddIcon color="primary" width="24px" height="24px" />
+            </IconButton>
+          </Flex>
+        </Flex>
       ) : (
-        <Button>Stuff is staked</Button>
+        <Button onClick={onPresentStake}>{TranslateString(1070, 'Stake')}</Button>
       )}
     </Flex>
   )
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index bf6dc46c35223..af2cf1e13e3a2 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -50,6 +50,7 @@ const CardActions: React.FC<{
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
   const earnings = new BigNumber(userData?.pendingReward || 0)
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
+  const isStaked = stakedBalance.toNumber() > 0
 
   const [onPresentCompound] = useModal(
     <CompoundModal earnings={earnings} onConfirm={onStake} tokenName={stakingToken.symbol} />,
@@ -88,11 +89,12 @@ const CardActions: React.FC<{
 
       <Flex flexDirection="column">
         <Box display="inline">
-          <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-            {TranslateString(1070, `stake`)}
+          <InlineText color={isStaked ? 'secondary' : 'textSubtle'} textTransform="uppercase" bold fontSize="12px">
+            {isStaked ? stakingToken.symbol : TranslateString(1070, `stake`)}
           </InlineText>
-          <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
-            {` ${stakingToken.symbol}`}
+          <InlineText color={isStaked ? 'textSubtle' : 'secondary'} textTransform="uppercase" bold fontSize="12px">
+            {' '}
+            {isStaked ? TranslateString(999, `staked`) : stakingToken.symbol}
           </InlineText>
         </Box>
         {needsApproval ? (
@@ -112,6 +114,7 @@ const CardActions: React.FC<{
             stakingLimit={stakingLimit}
             sousId={sousId}
             isBnbPool={isBnbPool}
+            isStaked={isStaked}
           />
         )}
       </Flex>
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index 5edea3269fa32..5ce7061171d3b 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -18,7 +18,7 @@ interface StakeModalProps {
   stakingToken: Token
   stakingMax: BigNumber
   stakingTokenPrice: number
-  isStaking?: boolean
+  isRemovingStake?: boolean
   onDismiss?: () => void
 }
 
@@ -30,7 +30,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
   sousId,
   isBnbPool,
   stakingToken,
-  isStaking = true,
+  isRemovingStake = false,
   stakingMax,
   stakingTokenPrice,
   onDismiss,
@@ -65,12 +65,12 @@ const StakeModal: React.FC<StakeModalProps> = ({
   const handleConfirmClick = async () => {
     setPendingTx(true)
 
-    if (isStaking) {
+    if (isRemovingStake) {
       try {
-        await onStake(stakeAmount, stakingToken.decimals)
+        await onUnstake(stakeAmount, stakingToken.decimals)
         toastSuccess(
-          `${TranslateString(1074, 'Staked')}!`,
-          TranslateString(999, 'Your funds have been staked in the pool!'),
+          `${TranslateString(999, 'Unstaked')}!`,
+          TranslateString(999, 'Your earnings have also been harvested to your wallet!'),
         )
         setPendingTx(false)
         onDismiss()
@@ -83,10 +83,10 @@ const StakeModal: React.FC<StakeModalProps> = ({
       }
     } else {
       try {
-        await onUnstake(stakeAmount, stakingToken.decimals)
+        await onStake(stakeAmount, stakingToken.decimals)
         toastSuccess(
-          `${TranslateString(999, 'Unstaked')}!`,
-          TranslateString(999, 'Your earnings have also been harvested to your wallet!'),
+          `${TranslateString(1074, 'Staked')}!`,
+          TranslateString(999, 'Your funds have been staked in the pool!'),
         )
         setPendingTx(false)
         onDismiss()
@@ -102,11 +102,11 @@ const StakeModal: React.FC<StakeModalProps> = ({
 
   return (
     <Modal
-      title={isStaking ? TranslateString(999, 'Stake in Pool') : TranslateString(588, 'Unstake')}
+      title={isRemovingStake ? TranslateString(588, 'Unstake') : TranslateString(999, 'Stake in Pool')}
       onDismiss={onDismiss}
     >
       <Flex alignItems="center" justifyContent="space-between" mb="8px">
-        <Text bold>{isStaking ? TranslateString(316, 'Stake') : TranslateString(588, 'Unstake')}:</Text>
+        <Text bold>{isRemovingStake ? TranslateString(588, 'Unstake') : TranslateString(316, 'Stake')}:</Text>
         <Flex alignItems="center" minWidth="70px">
           <Image src={`/images/tokens/${stakingToken.symbol}.png`} width={24} height={24} alt={stakingToken.symbol} />
           <Text ml="4px" bold>
@@ -117,7 +117,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
       <BalanceInput
         value={stakeAmount}
         onChange={handleStakeInputChange}
-        currencyValue={`~${usdValueStaked || 0} USD`}
+        currencyValue={`~${new BigNumber(stakeAmount).multipliedBy(stakingTokenPrice).toNumber() || 0} USD`}
       />
       <Text mt="8px" ml="auto" color="textSubtle" fontSize="12px" mb="8px">
         Balance: {getFullDisplayBalance(stakingMax, stakingToken.decimals)}
@@ -153,7 +153,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
       >
         {pendingTx ? TranslateString(464, 'Confirming') : TranslateString(464, 'Confirm')}
       </ConfirmButton>
-      {isStaking && (
+      {!isRemovingStake && (
         <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">
           {TranslateString(999, 'Get')} {stakingToken.symbol}
         </Button>

From fcbb1e4f0b543ce3986990eb9328b3b1530e4850 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 15:05:48 +0100
Subject: [PATCH 19/40] feat(syrup-pool-v2): Refactor footer for performance
 and add HarvestActions

---
 .../PoolCard/CardActions/HarvestActions.tsx   |  82 ++++++++-
 .../{StakeAction.tsx => StakeActions.tsx}     |  19 +-
 .../components/PoolCard/CardActions/index.tsx |  16 +-
 .../Pools/components/PoolCard/CardFooter.tsx  | 167 ------------------
 .../PoolCard/CardFooter/ExpandedFooter.tsx    | 139 +++++++++++++++
 .../components/PoolCard/CardFooter/index.tsx  |  71 ++++++++
 .../PoolCard/NotEnoughTokensModal.tsx         |  43 +++++
 .../Pools/components/PoolCard/StakeModal.tsx  |  10 +-
 src/views/Pools/components/PoolCard/index.tsx |   2 +-
 9 files changed, 366 insertions(+), 183 deletions(-)
 rename src/views/Pools/components/PoolCard/CardActions/{StakeAction.tsx => StakeActions.tsx} (74%)
 delete mode 100644 src/views/Pools/components/PoolCard/CardFooter.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CardFooter/index.tsx
 create mode 100644 src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx

diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 4a654695d76ca..641631468f905 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -1,7 +1,85 @@
 import React from 'react'
+import { Flex, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
+import BigNumber from 'bignumber.js'
+import { Token } from 'config/constants/types'
+import useI18n from 'hooks/useI18n'
+import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
+import NotEnoughTokensModal from '../NotEnoughTokensModal'
+import StakeModal from '../StakeModal'
 
-const HarvestActions = () => {
-  return <div>ss</div>
+interface HarvestActionsProps {
+  stakingTokenBalance: BigNumber
+  stakingTokenPrice: number
+  stakingToken: Token
+  earningToken: Token
+  stakedBalance: BigNumber
+  stakingLimit?: number
+  sousId: number
+  isBnbPool: boolean
+  isStaked: ConstrainBoolean
+}
+
+const HarvestActions: React.FC<HarvestActionsProps> = ({
+  stakingTokenBalance,
+  stakingTokenPrice,
+  stakingToken,
+  earningToken,
+  stakedBalance,
+  stakingLimit,
+  sousId,
+  isBnbPool,
+  isStaked,
+}) => {
+  const TranslateString = useI18n()
+  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
+  const stakingMax =
+    stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
+  const formattedBalance = formatNumber(getBalanceNumber(stakedBalance, stakingToken.decimals), 3, 3)
+  const stakingMaxDollarValue = formatNumber(
+    getBalanceNumber(stakedBalance.multipliedBy(stakingTokenPrice), stakingToken.decimals),
+  )
+
+  const [onPresentTokenRequired] = useModal(<NotEnoughTokensModal tokenSymbol={stakingToken.symbol} />)
+
+  const [onPresentStake] = useModal(
+    <StakeModal
+      stakingMax={stakingMax}
+      isBnbPool={isBnbPool}
+      sousId={sousId}
+      stakingToken={stakingToken}
+      stakingTokenPrice={stakingTokenPrice}
+    />,
+  )
+
+  const [onPresentUnstake] = useModal(
+    <StakeModal
+      stakingMax={stakedBalance}
+      isBnbPool={isBnbPool}
+      sousId={sousId}
+      stakingToken={stakingToken}
+      stakingTokenPrice={stakingTokenPrice}
+      isRemovingStake
+    />,
+  )
+
+  return (
+    <Flex flexDirection="column">
+      <Flex justifyContent="space-between" alignItems="center">
+        <Flex flexDirection="column">
+          <Heading>{formattedBalance}</Heading>
+          <Text fontSize="12px" color="textSubtle">{`~${stakingMaxDollarValue || 0} USD`}</Text>
+        </Flex>
+        <Flex>
+          <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
+            <MinusIcon color="primary" width="24px" />
+          </IconButton>
+          <IconButton variant="secondary" onClick={onPresentStake}>
+            <AddIcon color="primary" width="24px" height="24px" />
+          </IconButton>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
 }
 
 export default HarvestActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
similarity index 74%
rename from src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
rename to src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index 2b3e3c5d218ce..018986e1a81bc 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Flex, Box, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
+import { Flex, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import { Token } from 'config/constants/types'
 import useI18n from 'hooks/useI18n'
 import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
+import NotEnoughTokensModal from '../NotEnoughTokensModal'
 import StakeModal from '../StakeModal'
 
 interface StakeActionsProps {
@@ -18,7 +19,7 @@ interface StakeActionsProps {
   isStaked: ConstrainBoolean
 }
 
-const StakeAction: React.FC<StakeActionsProps> = ({
+const StakeActions: React.FC<StakeActionsProps> = ({
   stakingTokenBalance,
   stakingTokenPrice,
   stakingToken,
@@ -33,11 +34,13 @@ const StakeAction: React.FC<StakeActionsProps> = ({
   const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
   const stakingMax =
     stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
-  const formattedBalance = formatNumber(getBalanceNumber(stakingMax, stakingToken.decimals), 3, 3)
+  const formattedBalance = formatNumber(getBalanceNumber(stakedBalance, stakingToken.decimals), 3, 3)
   const stakingMaxDollarValue = formatNumber(
-    getBalanceNumber(stakingMax.multipliedBy(stakingTokenPrice), stakingToken.decimals),
+    getBalanceNumber(stakedBalance.multipliedBy(stakingTokenPrice), stakingToken.decimals),
   )
 
+  const [onPresentTokenRequired] = useModal(<NotEnoughTokensModal tokenSymbol={stakingToken.symbol} />)
+
   const [onPresentStake] = useModal(
     <StakeModal
       stakingMax={stakingMax}
@@ -50,7 +53,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
 
   const [onPresentUnstake] = useModal(
     <StakeModal
-      stakingMax={stakingMax}
+      stakingMax={stakedBalance}
       isBnbPool={isBnbPool}
       sousId={sousId}
       stakingToken={stakingToken}
@@ -77,10 +80,12 @@ const StakeAction: React.FC<StakeActionsProps> = ({
           </Flex>
         </Flex>
       ) : (
-        <Button onClick={onPresentStake}>{TranslateString(1070, 'Stake')}</Button>
+        <Button onClick={stakingTokenBalance.toNumber() > 0 ? onPresentStake : onPresentTokenRequired}>
+          {TranslateString(1070, 'Stake')}
+        </Button>
       )}
     </Flex>
   )
 }
 
-export default StakeAction
+export default StakeActions
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index af2cf1e13e3a2..dbbdecd778f83 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -15,7 +15,8 @@ import WithdrawModal from '../WithdrawModal'
 import CompoundModal from '../CompoundModal'
 import HarvestButton from '../HarvestButton'
 import ApprovalAction from './ApprovalAction'
-import StakeAction from './StakeAction'
+import StakeActions from './StakeActions'
+import HarvestActions from './HarvestActions'
 
 const BalanceAndCompound = styled.div`
   display: flex;
@@ -97,6 +98,17 @@ const CardActions: React.FC<{
             {isStaked ? TranslateString(999, `staked`) : stakingToken.symbol}
           </InlineText>
         </Box>
+        <HarvestActions
+          stakingTokenBalance={stakingTokenBalance}
+          stakingTokenPrice={stakingTokenPrice}
+          stakingToken={stakingToken}
+          earningToken={earningToken}
+          stakedBalance={stakedBalance}
+          stakingLimit={stakingLimit}
+          sousId={sousId}
+          isBnbPool={isBnbPool}
+          isStaked={isStaked}
+        />
         {needsApproval ? (
           <ApprovalAction
             stakingToken={stakingToken}
@@ -105,7 +117,7 @@ const CardActions: React.FC<{
             sousId={sousId}
           />
         ) : (
-          <StakeAction
+          <StakeActions
             stakingTokenBalance={stakingTokenBalance}
             stakingTokenPrice={stakingTokenPrice}
             stakingToken={stakingToken}
diff --git a/src/views/Pools/components/PoolCard/CardFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter.tsx
deleted file mode 100644
index ad06ed74acc19..0000000000000
--- a/src/views/Pools/components/PoolCard/CardFooter.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { useState } from 'react'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import { useWeb3React } from '@web3-react/core'
-import { getBalanceNumber } from 'utils/formatBalance'
-import useI18n from 'hooks/useI18n'
-import {
-  Flex,
-  MetamaskIcon,
-  CardFooter,
-  ExpandableLabel,
-  Text,
-  LinkExternal,
-  TimerIcon,
-  Skeleton,
-} from '@pancakeswap-libs/uikit'
-import { BASE_URL } from 'config'
-import { Address } from 'config/constants/types'
-import { useBlock } from 'state/hooks'
-import { registerToken } from 'utils/wallet'
-import Balance from 'components/Balance'
-
-interface FooterProps {
-  projectLink: string
-  decimals: number
-  totalStaked: BigNumber
-  tokenName: string
-  tokenAddress: string
-  tokenDecimals: number
-  startBlock: number
-  endBlock: number
-  isFinished: boolean
-  stakingTokenSymbol: string
-  contractAddress: Address
-}
-
-const ExpandedWrapper = styled(Flex)`
-  svg {
-    height: 14px;
-    width: 14px;
-  }
-`
-
-const ExpandableButtonWrapper = styled(Flex)`
-  button {
-    padding: 0;
-  }
-`
-
-const Footer: React.FC<FooterProps> = ({
-  projectLink,
-  decimals,
-  tokenAddress,
-  totalStaked,
-  tokenName,
-  tokenDecimals,
-  isFinished,
-  startBlock,
-  endBlock,
-  stakingTokenSymbol,
-  contractAddress,
-}) => {
-  const TranslateString = useI18n()
-  const [isExpanded, setIsExpanded] = useState(false)
-  const { account } = useWeb3React()
-  const { currentBlock } = useBlock()
-  const imageSrc = `${BASE_URL}/images/tokens/${tokenName.toLowerCase()}.png`
-  const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
-
-  const shouldShowBlockCountdown = Boolean(startBlock && endBlock)
-  const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
-  const blocksRemaining = Math.max(endBlock - currentBlock, 0)
-  const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
-  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
-
-  return (
-    <CardFooter>
-      <ExpandableButtonWrapper>
-        <ExpandableLabel expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)}>
-          {isExpanded ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')}
-        </ExpandableLabel>
-      </ExpandableButtonWrapper>
-      {isExpanded && (
-        <ExpandedWrapper flexDirection="column">
-          <Flex mb="2px" justifyContent="space-between" alignItems="center">
-            <Text fontSize="14px">{TranslateString(999, 'Total staked:')}</Text>
-            <Flex alignItems="flex-start">
-              {totalStaked ? (
-                <>
-                  <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
-                  <Text ml="4px" fontSize="14px">
-                    {stakingTokenSymbol}
-                  </Text>
-                </>
-              ) : (
-                <Skeleton width="90px" height="21px" />
-              )}
-            </Flex>
-          </Flex>
-          {shouldShowBlockCountdown && (
-            <Flex mb="2px" justifyContent="space-between" alignItems="center">
-              <Text fontSize="14px">
-                {hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:
-              </Text>
-              <Flex alignItems="center">
-                <Balance
-                  color="primary"
-                  fontSize="14px"
-                  isDisabled={isFinished}
-                  value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
-                  decimals={0}
-                />
-                <Text ml="4px" color="primary" fontSize="14px">
-                  {TranslateString(999, 'blocks')}
-                </Text>
-                <TimerIcon ml="4px" color="primary" />
-              </Flex>
-            </Flex>
-          )}
-          <Flex mb="2px" justifyContent="flex-end">
-            <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
-              {TranslateString(412, 'View Project Site')}
-            </LinkExternal>
-          </Flex>
-          {poolContractAddress && (
-            <Flex mb="2px" justifyContent="flex-end">
-              <LinkExternal
-                bold={false}
-                fontSize="14px"
-                href={`https://bscscan.com/address/${poolContractAddress}`}
-                target="_blank"
-              >
-                {TranslateString(412, 'View Contract')}
-              </LinkExternal>
-            </Flex>
-          )}
-          {tokenAddress && (
-            <Flex mb="2px" justifyContent="flex-end">
-              <LinkExternal
-                bold={false}
-                fontSize="14px"
-                href={`https://pancakeswap.info/token/${tokenAddress}`}
-                target="_blank"
-              >
-                {TranslateString(412, 'View Pool Info')}
-              </LinkExternal>
-            </Flex>
-          )}
-          {account && isMetaMaskInScope && tokenAddress && (
-            <Flex justifyContent="flex-end">
-              <Text
-                color="primary"
-                fontSize="14px"
-                onClick={() => registerToken(tokenAddress, tokenName, tokenDecimals, imageSrc)}
-              >
-                Add to Metamask
-              </Text>
-              <MetamaskIcon ml="4px" />
-            </Flex>
-          )}
-        </ExpandedWrapper>
-      )}
-    </CardFooter>
-  )
-}
-
-export default React.memo(Footer)
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
new file mode 100644
index 0000000000000..3feaa1c8d36a3
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -0,0 +1,139 @@
+import React from 'react'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+import { useWeb3React } from '@web3-react/core'
+import { getBalanceNumber } from 'utils/formatBalance'
+import useI18n from 'hooks/useI18n'
+import { Flex, MetamaskIcon, Text, LinkExternal, TimerIcon, Skeleton } from '@pancakeswap-libs/uikit'
+import { BASE_URL } from 'config'
+import { Address } from 'config/constants/types'
+import { useBlock } from 'state/hooks'
+import { registerToken } from 'utils/wallet'
+import Balance from 'components/Balance'
+
+interface FooterProps {
+  projectLink: string
+  decimals: number
+  totalStaked: BigNumber
+  tokenSymbol: string
+  tokenAddress: string
+  tokenDecimals: number
+  startBlock: number
+  endBlock: number
+  isFinished: boolean
+  stakingTokenSymbol: string
+  contractAddress: Address
+}
+
+const ExpandedWrapper = styled(Flex)`
+  svg {
+    height: 14px;
+    width: 14px;
+  }
+`
+
+const ExpandedFooter: React.FC<FooterProps> = ({
+  projectLink,
+  decimals,
+  tokenAddress,
+  totalStaked,
+  tokenSymbol,
+  tokenDecimals,
+  isFinished,
+  startBlock,
+  endBlock,
+  stakingTokenSymbol,
+  contractAddress,
+}) => {
+  const TranslateString = useI18n()
+  const { account } = useWeb3React()
+  const imageSrc = `${BASE_URL}/images/tokens/${tokenSymbol.toLowerCase()}.png`
+  const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
+  const shouldShowBlockCountdown = Boolean(startBlock && endBlock)
+  const { currentBlock } = useBlock()
+  const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
+  const blocksRemaining = Math.max(endBlock - currentBlock, 0)
+  const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
+  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
+
+  return (
+    <ExpandedWrapper flexDirection="column">
+      <Flex mb="2px" justifyContent="space-between" alignItems="center">
+        <Text fontSize="14px">{TranslateString(999, 'Total staked:')}</Text>
+        <Flex alignItems="flex-start">
+          {totalStaked ? (
+            <>
+              <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
+              <Text ml="4px" fontSize="14px">
+                {stakingTokenSymbol}
+              </Text>
+            </>
+          ) : (
+            <Skeleton width="90px" height="21px" />
+          )}
+        </Flex>
+      </Flex>
+      {shouldShowBlockCountdown && (
+        <Flex mb="2px" justifyContent="space-between" alignItems="center">
+          <Text fontSize="14px">{hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:</Text>
+          <Flex alignItems="center">
+            <Balance
+              color="primary"
+              fontSize="14px"
+              isDisabled={isFinished}
+              value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
+              decimals={0}
+            />
+            <Text ml="4px" color="primary" fontSize="14px">
+              {TranslateString(999, 'blocks')}
+            </Text>
+            <TimerIcon ml="4px" color="primary" />
+          </Flex>
+        </Flex>
+      )}
+      <Flex mb="2px" justifyContent="flex-end">
+        <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
+          {TranslateString(412, 'View Project Site')}
+        </LinkExternal>
+      </Flex>
+      {poolContractAddress && (
+        <Flex mb="2px" justifyContent="flex-end">
+          <LinkExternal
+            bold={false}
+            fontSize="14px"
+            href={`https://bscscan.com/address/${poolContractAddress}`}
+            target="_blank"
+          >
+            {TranslateString(412, 'View Contract')}
+          </LinkExternal>
+        </Flex>
+      )}
+      {tokenAddress && (
+        <Flex mb="2px" justifyContent="flex-end">
+          <LinkExternal
+            bold={false}
+            fontSize="14px"
+            href={`https://pancakeswap.info/token/${tokenAddress}`}
+            target="_blank"
+          >
+            {TranslateString(412, 'View Pool Info')}
+          </LinkExternal>
+        </Flex>
+      )}
+      {account && isMetaMaskInScope && tokenAddress && (
+        <Flex justifyContent="flex-end">
+          <Text
+            color="primary"
+            fontSize="14px"
+            onClick={() => registerToken(tokenAddress, tokenSymbol, tokenDecimals, imageSrc)}
+          >
+            Add to Metamask
+          </Text>
+          <MetamaskIcon ml="4px" />
+        </Flex>
+      )}
+    </ExpandedWrapper>
+  )
+}
+
+export default React.memo(ExpandedFooter)
diff --git a/src/views/Pools/components/PoolCard/CardFooter/index.tsx b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
new file mode 100644
index 0000000000000..b01860e1d711a
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import BigNumber from 'bignumber.js'
+import styled from 'styled-components'
+import useI18n from 'hooks/useI18n'
+import { Flex, CardFooter, ExpandableLabel } from '@pancakeswap-libs/uikit'
+import { Address } from 'config/constants/types'
+import ExpandedFooter from './ExpandedFooter'
+
+interface FooterProps {
+  projectLink: string
+  decimals: number
+  totalStaked: BigNumber
+  tokenSymbol: string
+  tokenAddress: string
+  tokenDecimals: number
+  startBlock: number
+  endBlock: number
+  isFinished: boolean
+  stakingTokenSymbol: string
+  contractAddress: Address
+}
+
+const ExpandableButtonWrapper = styled(Flex)`
+  button {
+    padding: 0;
+  }
+`
+
+const Footer: React.FC<FooterProps> = ({
+  projectLink,
+  decimals,
+  tokenAddress,
+  totalStaked,
+  tokenSymbol,
+  tokenDecimals,
+  isFinished,
+  startBlock,
+  endBlock,
+  stakingTokenSymbol,
+  contractAddress,
+}) => {
+  const TranslateString = useI18n()
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <CardFooter>
+      <ExpandableButtonWrapper>
+        <ExpandableLabel expanded={isExpanded} onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')}
+        </ExpandableLabel>
+      </ExpandableButtonWrapper>
+      {isExpanded && (
+        <ExpandedFooter
+          projectLink={projectLink}
+          decimals={decimals}
+          totalStaked={totalStaked}
+          startBlock={startBlock}
+          endBlock={endBlock}
+          isFinished={isFinished}
+          tokenSymbol={tokenSymbol}
+          tokenAddress={tokenAddress}
+          tokenDecimals={tokenDecimals}
+          stakingTokenSymbol={stakingTokenSymbol}
+          contractAddress={contractAddress}
+        />
+      )}
+    </CardFooter>
+  )
+}
+
+export default Footer
diff --git a/src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx b/src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx
new file mode 100644
index 0000000000000..59a0d462c6331
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import useI18n from 'hooks/useI18n'
+import { Modal, Text, Button, OpenNewIcon } from '@pancakeswap-libs/uikit'
+import { BASE_EXCHANGE_URL } from 'config'
+import useTheme from 'hooks/useTheme'
+
+interface NotEnoughTokensModalProps {
+  tokenSymbol: string
+  onDismiss?: () => void
+}
+
+const NotEnoughTokensModal: React.FC<NotEnoughTokensModalProps> = ({ tokenSymbol, onDismiss }) => {
+  const TranslateString = useI18n()
+  const { theme } = useTheme()
+
+  return (
+    <Modal
+      title={`${tokenSymbol} ${TranslateString(999, 'required')}`}
+      onDismiss={onDismiss}
+      headerBackground={theme.colors.gradients.cardHeader}
+    >
+      <Text color="failure" bold>
+        {TranslateString(999, 'Insufficient')} {tokenSymbol} {TranslateString(1120, 'balance')}
+      </Text>
+      <Text mt="24px">{TranslateString(999, `You’ll need ${tokenSymbol} to stake in this pool!`)}</Text>
+      <Text>
+        {TranslateString(999, `Buy some ${tokenSymbol}, or make sure your ${tokenSymbol} isn’t in another pool or LP.`)}
+      </Text>
+      <Button mt="24px" as="a" external href={BASE_EXCHANGE_URL}>
+        {TranslateString(999, 'Buy')} {tokenSymbol}
+      </Button>
+      <Button variant="secondary" mt="8px" href="https://yieldwatch.net" as="a" external>
+        {TranslateString(999, 'Locate Assets')}
+        <OpenNewIcon color="primary" ml="4px" />
+      </Button>
+      <Button variant="text" onClick={onDismiss}>
+        {TranslateString(999, 'Close window')}
+      </Button>
+    </Modal>
+  )
+}
+
+export default NotEnoughTokensModal
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index 5ce7061171d3b..4f9a6f7adc8bc 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -30,22 +30,23 @@ const StakeModal: React.FC<StakeModalProps> = ({
   sousId,
   isBnbPool,
   stakingToken,
-  isRemovingStake = false,
   stakingMax,
   stakingTokenPrice,
+  isRemovingStake = false,
   onDismiss,
 }) => {
   const TranslateString = useI18n()
+  const { theme } = useTheme()
+
   const { onStake } = useSousStake(sousId, isBnbPool)
   const { onUnstake } = useSousUnstake(sousId)
-  const { theme } = useTheme()
   const { toastSuccess, toastError } = useToast()
 
   const [pendingTx, setPendingTx] = useState(false)
   const [stakeAmount, setStakeAmount] = useState('')
   const [percent, setPercent] = useState(0)
 
-  const usdValueStaked = formatNumber(parseFloat(stakeAmount) * stakingTokenPrice)
+  const usdValueStaked = stakeAmount && formatNumber(parseFloat(stakeAmount) * stakingTokenPrice)
 
   const handleStakeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value ? event.target.value : '0'
@@ -104,6 +105,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
     <Modal
       title={isRemovingStake ? TranslateString(588, 'Unstake') : TranslateString(999, 'Stake in Pool')}
       onDismiss={onDismiss}
+      headerBackground={theme.colors.gradients.cardHeader}
     >
       <Flex alignItems="center" justifyContent="space-between" mb="8px">
         <Text bold>{isRemovingStake ? TranslateString(588, 'Unstake') : TranslateString(316, 'Stake')}:</Text>
@@ -117,7 +119,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
       <BalanceInput
         value={stakeAmount}
         onChange={handleStakeInputChange}
-        currencyValue={`~${new BigNumber(stakeAmount).multipliedBy(stakingTokenPrice).toNumber() || 0} USD`}
+        currencyValue={`~${usdValueStaked || 0} USD`}
       />
       <Text mt="8px" ml="auto" color="textSubtle" fontSize="12px" mb="8px">
         Balance: {getFullDisplayBalance(stakingMax, stakingToken.decimals)}
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index e3159e2c17567..b65d76eb1c58e 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -73,7 +73,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         startBlock={startBlock}
         endBlock={endBlock}
         isFinished={isFinished}
-        tokenName={earningToken.symbol}
+        tokenSymbol={earningToken.symbol}
         tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
         tokenDecimals={earningToken.decimals}
         stakingTokenSymbol={stakingToken.symbol}

From 43044fa32f2eae25d5a1b6df634076edea6fb704 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 16:52:32 +0100
Subject: [PATCH 20/40] feat(syrup-pool-v2): Basic harvest modal and
 functionality added

---
 .../components/PoolCard/CBCollectModal.tsx    | 171 ++++++++++++++++++
 .../PoolCard/CardActions/HarvestActions.tsx   |  78 +++-----
 .../PoolCard/CardActions/StakeActions.tsx     |   4 +-
 .../components/PoolCard/CardActions/index.tsx |  90 ++-------
 .../components/PoolCard/CollectModal.tsx      |  83 +++++++++
 .../Pools/components/PoolCard/StakeModal.tsx  |   2 +-
 6 files changed, 300 insertions(+), 128 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/CBCollectModal.tsx
 create mode 100644 src/views/Pools/components/PoolCard/CollectModal.tsx

diff --git a/src/views/Pools/components/PoolCard/CBCollectModal.tsx b/src/views/Pools/components/PoolCard/CBCollectModal.tsx
new file mode 100644
index 0000000000000..20d0026ee7c2b
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CBCollectModal.tsx
@@ -0,0 +1,171 @@
+import React, { useState, useMemo } from 'react'
+import useI18n from 'hooks/useI18n'
+import BigNumber from 'bignumber.js'
+import { Button, Modal, ButtonMenu, ButtonMenuItem, Flex, HelpIcon, Text, RefreshIcon } from '@pancakeswap-libs/uikit'
+import { getFullDisplayBalance, getBalanceNumber } from 'utils/formatBalance'
+import Balance from 'components/Balance'
+import { useSousStake } from 'hooks/useStake'
+import { useSousHarvest } from 'hooks/useHarvest'
+import useTheme from 'hooks/useTheme'
+import { useToast } from 'state/hooks'
+
+import ConfirmButton from './ConfirmButton'
+
+interface CollectModalProps {
+  sousId: number
+  isBnbPool: boolean
+  earnings: BigNumber
+  earningsBusd: number
+  earningTokenDecimals: number
+  earningTokenName: string
+  harvest?: boolean
+  onDismiss?: () => void
+}
+
+const CollectModal: React.FC<CollectModalProps> = ({
+  earnings,
+  earningsBusd,
+  earningTokenName,
+  earningTokenDecimals,
+  sousId,
+  isBnbPool,
+  harvest = false,
+  onDismiss,
+}) => {
+  const TranslateString = useI18n()
+  const [pendingTx, setPendingTx] = useState(false)
+  const [confirmedTx, setConfirmedTx] = useState(false)
+
+  const { onStake } = useSousStake(sousId, isBnbPool)
+  const { onReward } = useSousHarvest(sousId, isBnbPool)
+  const { theme } = useTheme()
+  const { toastSuccess, toastError } = useToast()
+
+  const [showCompound, setShowCompound] = useState(!harvest)
+
+  const fullBalance = useMemo(() => {
+    return getFullDisplayBalance(earnings, earningTokenDecimals)
+  }, [earnings, earningTokenDecimals])
+
+  const handleRenderLabel = () => {
+    if (showCompound) {
+      return TranslateString(999, 'Compounding')
+    }
+
+    return TranslateString(999, 'Harvesting')
+  }
+
+  const handleRenderActionButtonLabel = () => {
+    if (pendingTx) {
+      return TranslateString(999, 'Confirming')
+    }
+
+    if (confirmedTx) {
+      return TranslateString(999, 'Confirmed')
+    }
+
+    return TranslateString(999, 'Confirm')
+  }
+
+  const handleAction = async () => {
+    setPendingTx(true)
+    if (showCompound) {
+      try {
+        await onStake(fullBalance, earningTokenDecimals)
+        toastSuccess(
+          `${TranslateString(1074, 'Staked')}!`,
+          TranslateString(999, 'Your funds have been staked in the pool!'),
+        )
+        setPendingTx(false)
+        setConfirmedTx(true)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
+    } else {
+      try {
+        await onReward()
+        toastSuccess(
+          `${TranslateString(999, 'Harvested')}!`,
+          TranslateString(999, 'Your earnings have been sent to your wallet!'),
+        )
+        setPendingTx(false)
+        setConfirmedTx(true)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
+    }
+  }
+
+  const handleRenderIcon = () => {
+    if (pendingTx) {
+      return <RefreshIcon color="white" />
+    }
+
+    return null
+  }
+
+  return (
+    <Modal
+      title={harvest ? TranslateString(562, 'Harvest') : TranslateString(1056, 'Collect')}
+      onDismiss={onDismiss}
+      minWidth="280px"
+      headerBackground={theme.card.cardHeaderBackground.default}
+    >
+      {!harvest && (
+        <Flex justifyContent="center" alignItems="center" mb="24px">
+          <ButtonMenu
+            activeIndex={showCompound ? 0 : 1}
+            scale="sm"
+            variant="subtle"
+            onItemClick={(index) => setShowCompound(!index)}
+          >
+            <ButtonMenuItem as="button">{TranslateString(704, 'Compound')}</ButtonMenuItem>
+            <ButtonMenuItem as="button">{TranslateString(562, 'Harvest')}</ButtonMenuItem>
+          </ButtonMenu>
+          <Flex ml="10px">
+            <HelpIcon color="textSubtle" />
+          </Flex>
+        </Flex>
+      )}
+
+      <Flex justifyContent="space-between" alignItems="center">
+        <Text>{handleRenderLabel()}:</Text>
+      </Flex>
+      <Flex justifyContent="flex-end" alignItems="center">
+        <Balance
+          value={earningsBusd}
+          isDisabled={!earningsBusd}
+          fontSize="12px"
+          unit=" USD"
+          bold={false}
+          color="textSubtle"
+        />
+      </Flex>
+      <ConfirmButton
+        mt="24px"
+        onClick={handleAction}
+        endIcon={handleRenderIcon()}
+        disabled={!earnings || pendingTx}
+        isLoading={pendingTx}
+        isConfirmed={confirmedTx}
+      >
+        {handleRenderActionButtonLabel()}
+      </ConfirmButton>
+      <Button variant="text" onClick={onDismiss}>
+        Close Window
+      </Button>
+    </Modal>
+  )
+}
+
+export default CollectModal
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 641631468f905..7b0b10dcddf77 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -1,81 +1,55 @@
 import React from 'react'
-import { Flex, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
+import styled from 'styled-components'
+import { Flex, Text, Button, Box, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import { Token } from 'config/constants/types'
+import { getAddress } from 'utils/addressHelpers'
 import useI18n from 'hooks/useI18n'
 import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
+
+import { useGetApiPrice } from 'state/hooks'
 import NotEnoughTokensModal from '../NotEnoughTokensModal'
-import StakeModal from '../StakeModal'
+import CollectModal from '../CollectModal'
 
 interface HarvestActionsProps {
-  stakingTokenBalance: BigNumber
-  stakingTokenPrice: number
-  stakingToken: Token
+  earnings: BigNumber
   earningToken: Token
-  stakedBalance: BigNumber
-  stakingLimit?: number
   sousId: number
   isBnbPool: boolean
-  isStaked: ConstrainBoolean
 }
 
-const HarvestActions: React.FC<HarvestActionsProps> = ({
-  stakingTokenBalance,
-  stakingTokenPrice,
-  stakingToken,
-  earningToken,
-  stakedBalance,
-  stakingLimit,
-  sousId,
-  isBnbPool,
-  isStaked,
-}) => {
+const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken, sousId, isBnbPool }) => {
   const TranslateString = useI18n()
-  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
-  const stakingMax =
-    stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
-  const formattedBalance = formatNumber(getBalanceNumber(stakedBalance, stakingToken.decimals), 3, 3)
-  const stakingMaxDollarValue = formatNumber(
-    getBalanceNumber(stakedBalance.multipliedBy(stakingTokenPrice), stakingToken.decimals),
+  const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
+  const formattedBalance = formatNumber(getBalanceNumber(earnings, earningToken.decimals), 3, 3)
+  const earningsDollarValue = formatNumber(
+    getBalanceNumber(earnings.multipliedBy(earningTokenPrice), earningToken.decimals),
   )
+  const hasEarnings = earnings.toNumber() > 0
 
-  const [onPresentTokenRequired] = useModal(<NotEnoughTokensModal tokenSymbol={stakingToken.symbol} />)
-
-  const [onPresentStake] = useModal(
-    <StakeModal
-      stakingMax={stakingMax}
-      isBnbPool={isBnbPool}
+  const [onPresentHarvest] = useModal(
+    <CollectModal
+      tokenSymbol={earningToken.symbol}
+      formattedBalance={formattedBalance}
+      earningsDollarValue={earningsDollarValue}
       sousId={sousId}
-      stakingToken={stakingToken}
-      stakingTokenPrice={stakingTokenPrice}
-    />,
-  )
-
-  const [onPresentUnstake] = useModal(
-    <StakeModal
-      stakingMax={stakedBalance}
       isBnbPool={isBnbPool}
-      sousId={sousId}
-      stakingToken={stakingToken}
-      stakingTokenPrice={stakingTokenPrice}
-      isRemovingStake
     />,
   )
 
   return (
-    <Flex flexDirection="column">
+    <Flex flexDirection="column" mb="16px">
       <Flex justifyContent="space-between" alignItems="center">
         <Flex flexDirection="column">
-          <Heading>{formattedBalance}</Heading>
-          <Text fontSize="12px" color="textSubtle">{`~${stakingMaxDollarValue || 0} USD`}</Text>
+          <Heading color={hasEarnings ? 'body' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
+          <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>{`~${
+            hasEarnings ? earningsDollarValue : 0
+          } USD`}</Text>
         </Flex>
         <Flex>
-          <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
-            <MinusIcon color="primary" width="24px" />
-          </IconButton>
-          <IconButton variant="secondary" onClick={onPresentStake}>
-            <AddIcon color="primary" width="24px" height="24px" />
-          </IconButton>
+          <Button disabled={!hasEarnings} onClick={onPresentHarvest}>
+            {TranslateString(562, 'Harvest')}
+          </Button>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index 018986e1a81bc..eac543de84c5f 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -19,7 +19,7 @@ interface StakeActionsProps {
   isStaked: ConstrainBoolean
 }
 
-const StakeActions: React.FC<StakeActionsProps> = ({
+const StakeAction: React.FC<StakeActionsProps> = ({
   stakingTokenBalance,
   stakingTokenPrice,
   stakingToken,
@@ -88,4 +88,4 @@ const StakeActions: React.FC<StakeActionsProps> = ({
   )
 }
 
-export default StakeActions
+export default StakeAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index dbbdecd778f83..97e195c942ce6 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -18,13 +18,6 @@ import ApprovalAction from './ApprovalAction'
 import StakeActions from './StakeActions'
 import HarvestActions from './HarvestActions'
 
-const BalanceAndCompound = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-`
-
 const InlineText = styled(Text)`
   display: inline;
 `
@@ -67,16 +60,7 @@ const CardActions: React.FC<{
 
   return (
     <Flex flexDirection="column">
-      <Box display="inline">
-        <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
-          {`${earningToken.symbol} `}
-        </InlineText>
-        <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-          {TranslateString(1072, `earned`)}
-        </InlineText>
-      </Box>
-
-      {harvest && (
+      {/* {harvest && (
         <HarvestButton
           disabled={!earnings.toNumber() || pendingTx}
           text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
@@ -86,29 +70,30 @@ const CardActions: React.FC<{
             setPendingTx(false)
           }}
         />
-      )}
+      )} */}
 
       <Flex flexDirection="column">
+        {harvest && (
+          <>
+            <Box display="inline">
+              <InlineText color="secondary" textTransform="uppercase" bold fontSize="12px">
+                {`${earningToken.symbol} `}
+              </InlineText>
+              <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                {TranslateString(1072, `earned`)}
+              </InlineText>
+            </Box>
+            <HarvestActions earnings={earnings} earningToken={earningToken} sousId={sousId} isBnbPool={isBnbPool} />
+          </>
+        )}
         <Box display="inline">
           <InlineText color={isStaked ? 'secondary' : 'textSubtle'} textTransform="uppercase" bold fontSize="12px">
-            {isStaked ? stakingToken.symbol : TranslateString(1070, `stake`)}
+            {isStaked ? stakingToken.symbol : TranslateString(1070, `stake`)}{' '}
           </InlineText>
           <InlineText color={isStaked ? 'textSubtle' : 'secondary'} textTransform="uppercase" bold fontSize="12px">
-            {' '}
-            {isStaked ? TranslateString(999, `staked`) : stakingToken.symbol}
+            {isStaked ? TranslateString(1074, `staked`) : `${stakingToken.symbol}`}
           </InlineText>
         </Box>
-        <HarvestActions
-          stakingTokenBalance={stakingTokenBalance}
-          stakingTokenPrice={stakingTokenPrice}
-          stakingToken={stakingToken}
-          earningToken={earningToken}
-          stakedBalance={stakedBalance}
-          stakingLimit={stakingLimit}
-          sousId={sousId}
-          isBnbPool={isBnbPool}
-          isStaked={isStaked}
-        />
         {needsApproval ? (
           <ApprovalAction
             stakingToken={stakingToken}
@@ -130,47 +115,6 @@ const CardActions: React.FC<{
           />
         )}
       </Flex>
-      {/* <Flex flexDirection="column">
-        {needsApproval && !isOldSyrup ? (
-          // IS OLD SYRUP CONDITIONAL
-          <Button disabled={isFinished || requestedApproval} onClick={handleApprove} width="100%">
-            {TranslateString(999, 'Enable')}
-          </Button>
-        ) : (
-          <>
-            <Button
-              disabled={stakedBalance.eq(new BigNumber(0)) || pendingTx}
-              onClick={
-                isOldSyrup
-                  ? // IS OLD SYRUP CONDITIONAL
-                    async () => {
-                      setPendingTx(true)
-                      await onUnstake('0', stakingToken.decimals)
-                      setPendingTx(false)
-                    }
-                  : onPresentWithdraw
-              }
-            >
-              {`Unstake ${stakingToken.symbol}`}
-            </Button>
-            <StyledActionSpacer />
-            {!isOldSyrup && (
-              // IS OLD SYRUP CONDITIONAL
-              <IconButton disabled={isFinished && sousId !== 0} onClick={onPresentDeposit}>
-                <AddIcon color="white" />
-              </IconButton>
-            )}
-          </>
-        )}
-      </Flex>
-      <StyledDetails>
-        <div>{TranslateString(384, 'Your Stake')}:</div>
-        <Balance
-          fontSize="14px"
-          isDisabled={isFinished}
-          value={getBalanceNumber(stakedBalance, stakingToken.decimals)}
-        />
-      </StyledDetails> */}
     </Flex>
   )
 }
diff --git a/src/views/Pools/components/PoolCard/CollectModal.tsx b/src/views/Pools/components/PoolCard/CollectModal.tsx
new file mode 100644
index 0000000000000..466eaab224978
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/CollectModal.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import { Modal, Text, Button, OpenNewIcon, Heading, Flex, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import useI18n from 'hooks/useI18n'
+import useTheme from 'hooks/useTheme'
+import { useSousHarvest } from 'hooks/useHarvest'
+import { useToast } from 'state/hooks'
+
+interface CollectModalProps {
+  tokenSymbol: string
+  formattedBalance: string
+  earningsDollarValue: string
+  sousId: number
+  isBnbPool: boolean
+  onDismiss?: () => void
+}
+
+const CollectModal: React.FC<CollectModalProps> = ({
+  tokenSymbol,
+  formattedBalance,
+  earningsDollarValue,
+  sousId,
+  isBnbPool,
+  onDismiss,
+}) => {
+  const TranslateString = useI18n()
+  const { theme } = useTheme()
+  const { toastSuccess, toastError } = useToast()
+  const [pendingTx, setPendingTx] = useState(false)
+  const { onReward } = useSousHarvest(sousId, isBnbPool)
+
+  const handleHarvestConfirm = async () => {
+    setPendingTx(true)
+
+    try {
+      await onReward()
+      toastSuccess(
+        `${TranslateString(999, 'Harvested')}!`,
+        TranslateString(999, 'Your earnings have been sent to your wallet!'),
+      )
+      setPendingTx(false)
+      onDismiss()
+    } catch (e) {
+      toastError(
+        TranslateString(999, 'Canceled'),
+        TranslateString(999, 'Please try again and confirm the transaction.'),
+      )
+      setPendingTx(false)
+    }
+  }
+
+  return (
+    <Modal
+      title={`${tokenSymbol} ${TranslateString(562, 'Harvest')}`}
+      onDismiss={onDismiss}
+      headerBackground={theme.colors.gradients.cardHeader}
+    >
+      <Flex justifyContent="space-between" alignItems="center" mb="24px">
+        <Text>{TranslateString(999, 'Harvesting')}:</Text>
+        <Flex flexDirection="column">
+          <Heading>
+            {formattedBalance} {tokenSymbol}
+          </Heading>
+          <Text fontSize="12px" color="textSubtle">{`~${earningsDollarValue || 0} USD`}</Text>
+        </Flex>
+      </Flex>
+
+      <Button
+        mt="8px"
+        onClick={handleHarvestConfirm}
+        isLoading={pendingTx}
+        endIcon={pendingTx ? <AutoRenewIcon spin color="currentColor" /> : null}
+      >
+        {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}
+        <OpenNewIcon color="primary" ml="4px" />
+      </Button>
+      <Button variant="text" onClick={onDismiss} pb="0px">
+        {TranslateString(999, 'Close window')}
+      </Button>
+    </Modal>
+  )
+}
+
+export default CollectModal
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index 4f9a6f7adc8bc..2ee64cb4fe83c 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -153,7 +153,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         onClick={handleConfirmClick}
         mt="24px"
       >
-        {pendingTx ? TranslateString(464, 'Confirming') : TranslateString(464, 'Confirm')}
+        {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}
       </ConfirmButton>
       {!isRemovingStake && (
         <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">

From 278ed66c1f9b250bade742d5c4f490ac564d5757 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 17:51:21 +0100
Subject: [PATCH 21/40] feat(syrup-pool-v2): Styling fixes and pass account
 down from pool view

---
 .../components/PoolCard/CBCollectModal.tsx    | 171 ------------------
 .../PoolCard/CardActions/HarvestActions.tsx   |  10 +-
 .../components/PoolCard/CardActions/index.tsx |   2 +-
 .../PoolCard/CardFooter/ExpandedFooter.tsx    |   7 +-
 .../components/PoolCard/CardFooter/index.tsx  |   3 +
 .../components/PoolCard/CollectModal.tsx      |   2 +
 src/views/Pools/components/PoolCard/index.tsx |   5 +-
 src/views/Pools/index.tsx                     |  10 +-
 8 files changed, 25 insertions(+), 185 deletions(-)
 delete mode 100644 src/views/Pools/components/PoolCard/CBCollectModal.tsx

diff --git a/src/views/Pools/components/PoolCard/CBCollectModal.tsx b/src/views/Pools/components/PoolCard/CBCollectModal.tsx
deleted file mode 100644
index 20d0026ee7c2b..0000000000000
--- a/src/views/Pools/components/PoolCard/CBCollectModal.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import useI18n from 'hooks/useI18n'
-import BigNumber from 'bignumber.js'
-import { Button, Modal, ButtonMenu, ButtonMenuItem, Flex, HelpIcon, Text, RefreshIcon } from '@pancakeswap-libs/uikit'
-import { getFullDisplayBalance, getBalanceNumber } from 'utils/formatBalance'
-import Balance from 'components/Balance'
-import { useSousStake } from 'hooks/useStake'
-import { useSousHarvest } from 'hooks/useHarvest'
-import useTheme from 'hooks/useTheme'
-import { useToast } from 'state/hooks'
-
-import ConfirmButton from './ConfirmButton'
-
-interface CollectModalProps {
-  sousId: number
-  isBnbPool: boolean
-  earnings: BigNumber
-  earningsBusd: number
-  earningTokenDecimals: number
-  earningTokenName: string
-  harvest?: boolean
-  onDismiss?: () => void
-}
-
-const CollectModal: React.FC<CollectModalProps> = ({
-  earnings,
-  earningsBusd,
-  earningTokenName,
-  earningTokenDecimals,
-  sousId,
-  isBnbPool,
-  harvest = false,
-  onDismiss,
-}) => {
-  const TranslateString = useI18n()
-  const [pendingTx, setPendingTx] = useState(false)
-  const [confirmedTx, setConfirmedTx] = useState(false)
-
-  const { onStake } = useSousStake(sousId, isBnbPool)
-  const { onReward } = useSousHarvest(sousId, isBnbPool)
-  const { theme } = useTheme()
-  const { toastSuccess, toastError } = useToast()
-
-  const [showCompound, setShowCompound] = useState(!harvest)
-
-  const fullBalance = useMemo(() => {
-    return getFullDisplayBalance(earnings, earningTokenDecimals)
-  }, [earnings, earningTokenDecimals])
-
-  const handleRenderLabel = () => {
-    if (showCompound) {
-      return TranslateString(999, 'Compounding')
-    }
-
-    return TranslateString(999, 'Harvesting')
-  }
-
-  const handleRenderActionButtonLabel = () => {
-    if (pendingTx) {
-      return TranslateString(999, 'Confirming')
-    }
-
-    if (confirmedTx) {
-      return TranslateString(999, 'Confirmed')
-    }
-
-    return TranslateString(999, 'Confirm')
-  }
-
-  const handleAction = async () => {
-    setPendingTx(true)
-    if (showCompound) {
-      try {
-        await onStake(fullBalance, earningTokenDecimals)
-        toastSuccess(
-          `${TranslateString(1074, 'Staked')}!`,
-          TranslateString(999, 'Your funds have been staked in the pool!'),
-        )
-        setPendingTx(false)
-        setConfirmedTx(true)
-        onDismiss()
-      } catch (e) {
-        toastError(
-          TranslateString(999, 'Canceled'),
-          TranslateString(999, 'Please try again and confirm the transaction.'),
-        )
-        setPendingTx(false)
-      }
-    } else {
-      try {
-        await onReward()
-        toastSuccess(
-          `${TranslateString(999, 'Harvested')}!`,
-          TranslateString(999, 'Your earnings have been sent to your wallet!'),
-        )
-        setPendingTx(false)
-        setConfirmedTx(true)
-        onDismiss()
-      } catch (e) {
-        toastError(
-          TranslateString(999, 'Canceled'),
-          TranslateString(999, 'Please try again and confirm the transaction.'),
-        )
-        setPendingTx(false)
-      }
-    }
-  }
-
-  const handleRenderIcon = () => {
-    if (pendingTx) {
-      return <RefreshIcon color="white" />
-    }
-
-    return null
-  }
-
-  return (
-    <Modal
-      title={harvest ? TranslateString(562, 'Harvest') : TranslateString(1056, 'Collect')}
-      onDismiss={onDismiss}
-      minWidth="280px"
-      headerBackground={theme.card.cardHeaderBackground.default}
-    >
-      {!harvest && (
-        <Flex justifyContent="center" alignItems="center" mb="24px">
-          <ButtonMenu
-            activeIndex={showCompound ? 0 : 1}
-            scale="sm"
-            variant="subtle"
-            onItemClick={(index) => setShowCompound(!index)}
-          >
-            <ButtonMenuItem as="button">{TranslateString(704, 'Compound')}</ButtonMenuItem>
-            <ButtonMenuItem as="button">{TranslateString(562, 'Harvest')}</ButtonMenuItem>
-          </ButtonMenu>
-          <Flex ml="10px">
-            <HelpIcon color="textSubtle" />
-          </Flex>
-        </Flex>
-      )}
-
-      <Flex justifyContent="space-between" alignItems="center">
-        <Text>{handleRenderLabel()}:</Text>
-      </Flex>
-      <Flex justifyContent="flex-end" alignItems="center">
-        <Balance
-          value={earningsBusd}
-          isDisabled={!earningsBusd}
-          fontSize="12px"
-          unit=" USD"
-          bold={false}
-          color="textSubtle"
-        />
-      </Flex>
-      <ConfirmButton
-        mt="24px"
-        onClick={handleAction}
-        endIcon={handleRenderIcon()}
-        disabled={!earnings || pendingTx}
-        isLoading={pendingTx}
-        isConfirmed={confirmedTx}
-      >
-        {handleRenderActionButtonLabel()}
-      </ConfirmButton>
-      <Button variant="text" onClick={onDismiss}>
-        Close Window
-      </Button>
-    </Modal>
-  )
-}
-
-export default CollectModal
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 7b0b10dcddf77..632b1a727ae2c 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -26,14 +26,16 @@ const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken,
     getBalanceNumber(earnings.multipliedBy(earningTokenPrice), earningToken.decimals),
   )
   const hasEarnings = earnings.toNumber() > 0
+  const isCompoundPool = sousId === 0
 
-  const [onPresentHarvest] = useModal(
+  const [onPresentCollect] = useModal(
     <CollectModal
       tokenSymbol={earningToken.symbol}
       formattedBalance={formattedBalance}
       earningsDollarValue={earningsDollarValue}
       sousId={sousId}
       isBnbPool={isBnbPool}
+      isCompoundPool={isCompoundPool}
     />,
   )
 
@@ -41,14 +43,14 @@ const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken,
     <Flex flexDirection="column" mb="16px">
       <Flex justifyContent="space-between" alignItems="center">
         <Flex flexDirection="column">
-          <Heading color={hasEarnings ? 'body' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
+          <Heading color={hasEarnings ? 'text' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
           <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>{`~${
             hasEarnings ? earningsDollarValue : 0
           } USD`}</Text>
         </Flex>
         <Flex>
-          <Button disabled={!hasEarnings} onClick={onPresentHarvest}>
-            {TranslateString(562, 'Harvest')}
+          <Button disabled={!hasEarnings} onClick={onPresentCollect}>
+            {isCompoundPool ? TranslateString(1056, 'Collect') : TranslateString(562, 'Harvest')}
           </Button>
         </Flex>
       </Flex>
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 97e195c942ce6..c2fdcc7d5b119 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -80,7 +80,7 @@ const CardActions: React.FC<{
                 {`${earningToken.symbol} `}
               </InlineText>
               <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-                {TranslateString(1072, `earned`)}
+                {TranslateString(330, `earned`)}
               </InlineText>
             </Box>
             <HarvestActions earnings={earnings} earningToken={earningToken} sousId={sousId} isBnbPool={isBnbPool} />
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
index 3feaa1c8d36a3..e4117311c5ff4 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -11,7 +11,7 @@ import { useBlock } from 'state/hooks'
 import { registerToken } from 'utils/wallet'
 import Balance from 'components/Balance'
 
-interface FooterProps {
+interface ExpandedFooterProps {
   projectLink: string
   decimals: number
   totalStaked: BigNumber
@@ -23,6 +23,7 @@ interface FooterProps {
   isFinished: boolean
   stakingTokenSymbol: string
   contractAddress: Address
+  account: string
 }
 
 const ExpandedWrapper = styled(Flex)`
@@ -32,7 +33,7 @@ const ExpandedWrapper = styled(Flex)`
   }
 `
 
-const ExpandedFooter: React.FC<FooterProps> = ({
+const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
   projectLink,
   decimals,
   tokenAddress,
@@ -44,9 +45,9 @@ const ExpandedFooter: React.FC<FooterProps> = ({
   endBlock,
   stakingTokenSymbol,
   contractAddress,
+  account,
 }) => {
   const TranslateString = useI18n()
-  const { account } = useWeb3React()
   const imageSrc = `${BASE_URL}/images/tokens/${tokenSymbol.toLowerCase()}.png`
   const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
   const shouldShowBlockCountdown = Boolean(startBlock && endBlock)
diff --git a/src/views/Pools/components/PoolCard/CardFooter/index.tsx b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
index b01860e1d711a..93cb6ca403a43 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
@@ -18,6 +18,7 @@ interface FooterProps {
   isFinished: boolean
   stakingTokenSymbol: string
   contractAddress: Address
+  account: string
 }
 
 const ExpandableButtonWrapper = styled(Flex)`
@@ -38,6 +39,7 @@ const Footer: React.FC<FooterProps> = ({
   endBlock,
   stakingTokenSymbol,
   contractAddress,
+  account,
 }) => {
   const TranslateString = useI18n()
   const [isExpanded, setIsExpanded] = useState(false)
@@ -62,6 +64,7 @@ const Footer: React.FC<FooterProps> = ({
           tokenDecimals={tokenDecimals}
           stakingTokenSymbol={stakingTokenSymbol}
           contractAddress={contractAddress}
+          account={account}
         />
       )}
     </CardFooter>
diff --git a/src/views/Pools/components/PoolCard/CollectModal.tsx b/src/views/Pools/components/PoolCard/CollectModal.tsx
index 466eaab224978..2e428e70cf71d 100644
--- a/src/views/Pools/components/PoolCard/CollectModal.tsx
+++ b/src/views/Pools/components/PoolCard/CollectModal.tsx
@@ -11,6 +11,7 @@ interface CollectModalProps {
   earningsDollarValue: string
   sousId: number
   isBnbPool: boolean
+  isCompoundPool: boolean
   onDismiss?: () => void
 }
 
@@ -20,6 +21,7 @@ const CollectModal: React.FC<CollectModalProps> = ({
   earningsDollarValue,
   sousId,
   isBnbPool,
+  isCompoundPool,
   onDismiss,
 }) => {
   const TranslateString = useI18n()
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index b65d76eb1c58e..60fca19175d7b 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,7 +1,6 @@
 import BigNumber from 'bignumber.js'
 import React from 'react'
 import { CardBody, Flex, Text } from '@pancakeswap-libs/uikit'
-import { useWeb3React } from '@web3-react/core'
 import UnlockButton from 'components/UnlockButton'
 import useI18n from 'hooks/useI18n'
 import { getAddress } from 'utils/addressHelpers'
@@ -14,7 +13,7 @@ import CardFooter from './CardFooter'
 import StyledCardHeader from './StyledCardHeader'
 import CardActions from './CardActions'
 
-const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
+const PoolCard: React.FC<{ pool: Pool; account: string }> = ({ pool, account }) => {
   const {
     sousId,
     stakingToken,
@@ -26,7 +25,6 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
     userData,
     contractAddress,
   } = pool
-  const { account } = useWeb3React()
   const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
@@ -78,6 +76,7 @@ const PoolCard: React.FC<{ pool: Pool }> = ({ pool }) => {
         tokenDecimals={earningToken.decimals}
         stakingTokenSymbol={stakingToken.symbol}
         contractAddress={contractAddress}
+        account={account}
       />
     </StyledCard>
   )
diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index a30ea7ca292db..0bdcbfd38a5c7 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -72,13 +72,17 @@ const Pools: React.FC = () => {
           <Route exact path={`${path}`}>
             <>
               {stakedOnly
-                ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)
-                : orderBy(openPools, ['sortOrder']).map((pool) => <PoolCard key={pool.sousId} pool={pool} />)}
+                ? orderBy(stakedOnlyPools, ['sortOrder']).map((pool) => (
+                    <PoolCard key={pool.sousId} pool={pool} account={account} />
+                  ))
+                : orderBy(openPools, ['sortOrder']).map((pool) => (
+                    <PoolCard key={pool.sousId} pool={pool} account={account} />
+                  ))}
             </>
           </Route>
           <Route path={`${path}/history`}>
             {orderBy(finishedPools, ['sortOrder']).map((pool) => (
-              <PoolCard key={pool.sousId} pool={pool} />
+              <PoolCard key={pool.sousId} pool={pool} account={account} />
             ))}
           </Route>
         </FlexLayout>

From 40922fd0ce47419b75d9b572b5404ff81d1b8d18 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 19:54:51 +0100
Subject: [PATCH 22/40] feat(syrup-pool-v2): Styling and tooltip for
 compounding modal

---
 .../components/PoolCard/CollectModal.tsx      | 52 +++++++++++++++++--
 src/views/Pools/components/PoolCard/index.tsx |  1 -
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/CollectModal.tsx b/src/views/Pools/components/PoolCard/CollectModal.tsx
index 2e428e70cf71d..719688802f086 100644
--- a/src/views/Pools/components/PoolCard/CollectModal.tsx
+++ b/src/views/Pools/components/PoolCard/CollectModal.tsx
@@ -1,5 +1,18 @@
 import React, { useState } from 'react'
-import { Modal, Text, Button, OpenNewIcon, Heading, Flex, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import {
+  Modal,
+  Text,
+  Button,
+  OpenNewIcon,
+  Heading,
+  Flex,
+  AutoRenewIcon,
+  ButtonMenu,
+  ButtonMenuItem,
+  HelpIcon,
+  useTooltip,
+  Box,
+} from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 import useTheme from 'hooks/useTheme'
 import { useSousHarvest } from 'hooks/useHarvest'
@@ -11,7 +24,7 @@ interface CollectModalProps {
   earningsDollarValue: string
   sousId: number
   isBnbPool: boolean
-  isCompoundPool: boolean
+  isCompoundPool?: boolean
   onDismiss?: () => void
 }
 
@@ -21,14 +34,26 @@ const CollectModal: React.FC<CollectModalProps> = ({
   earningsDollarValue,
   sousId,
   isBnbPool,
-  isCompoundPool,
+  isCompoundPool = false,
   onDismiss,
 }) => {
   const TranslateString = useI18n()
   const { theme } = useTheme()
   const { toastSuccess, toastError } = useToast()
   const [pendingTx, setPendingTx] = useState(false)
+  const [shouldCompound, setShouldCompound] = useState(isCompoundPool)
   const { onReward } = useSousHarvest(sousId, isBnbPool)
+  const { targetRef, tooltip, tooltipVisible } = useTooltip(
+    <>
+      <Box>{TranslateString(999, 'Compound: collect and restake CAKE into pool.')}</Box>
+      <Box>{TranslateString(999, 'Harvest: collect CAKE and send to wallet')}</Box>
+    </>,
+    'bottom-end',
+    'hover',
+    undefined,
+    undefined,
+    [20, 10],
+  )
 
   const handleHarvestConfirm = async () => {
     setPendingTx(true)
@@ -56,8 +81,26 @@ const CollectModal: React.FC<CollectModalProps> = ({
       onDismiss={onDismiss}
       headerBackground={theme.colors.gradients.cardHeader}
     >
+      {isCompoundPool && (
+        <Flex justifyContent="center" alignItems="center" mb="24px">
+          <ButtonMenu
+            activeIndex={shouldCompound ? 0 : 1}
+            scale="sm"
+            variant="subtle"
+            onItemClick={(index) => setShouldCompound(!index)}
+          >
+            <ButtonMenuItem as="button">{TranslateString(704, 'Compound')}</ButtonMenuItem>
+            <ButtonMenuItem as="button">{TranslateString(562, 'Harvest')}</ButtonMenuItem>
+          </ButtonMenu>
+          <Flex ml="10px" ref={targetRef}>
+            <HelpIcon color="textSubtle" />
+          </Flex>
+          {tooltipVisible && tooltip}
+        </Flex>
+      )}
+
       <Flex justifyContent="space-between" alignItems="center" mb="24px">
-        <Text>{TranslateString(999, 'Harvesting')}:</Text>
+        <Text>{shouldCompound ? TranslateString(999, 'Compounding') : TranslateString(999, 'Harvesting')}:</Text>
         <Flex flexDirection="column">
           <Heading>
             {formattedBalance} {tokenSymbol}
@@ -73,7 +116,6 @@ const CollectModal: React.FC<CollectModalProps> = ({
         endIcon={pendingTx ? <AutoRenewIcon spin color="currentColor" /> : null}
       >
         {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}
-        <OpenNewIcon color="primary" ml="4px" />
       </Button>
       <Button variant="text" onClick={onDismiss} pb="0px">
         {TranslateString(999, 'Close window')}
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 60fca19175d7b..615dd2e32cf32 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -4,7 +4,6 @@ import { CardBody, Flex, Text } from '@pancakeswap-libs/uikit'
 import UnlockButton from 'components/UnlockButton'
 import useI18n from 'hooks/useI18n'
 import { getAddress } from 'utils/addressHelpers'
-import tokens from 'config/constants/tokens'
 import { useGetApiPrice } from 'state/hooks'
 import { Pool } from 'state/types'
 import AprRow from './AprRow'

From c81e054cda04a443dd4f908b16d9cd3e87078fc9 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 21:04:44 +0100
Subject: [PATCH 23/40] feat(syrup-pool-v2): Finish compounding modal

---
 .../PoolCard/CardActions/HarvestActions.tsx   | 11 ++-
 .../PoolCard/CardActions/StakeActions.tsx     |  2 +
 .../components/PoolCard/CardActions/index.tsx | 45 +-----------
 .../PoolCard/CardFooter/ExpandedFooter.tsx    |  1 -
 .../components/PoolCard/CollectModal.tsx      | 65 ++++++++++++------
 .../components/PoolCard/CompoundModal.tsx     | 68 -------------------
 .../Pools/components/PoolCard/StakeModal.tsx  |  6 +-
 7 files changed, 56 insertions(+), 142 deletions(-)
 delete mode 100644 src/views/Pools/components/PoolCard/CompoundModal.tsx

diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 632b1a727ae2c..2557593e09c25 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -1,14 +1,11 @@
 import React from 'react'
-import styled from 'styled-components'
-import { Flex, Text, Button, Box, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
+import { Flex, Text, Button, Heading, useModal } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import { Token } from 'config/constants/types'
 import { getAddress } from 'utils/addressHelpers'
 import useI18n from 'hooks/useI18n'
-import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
-
+import { getFullDisplayBalance, getBalanceNumber, formatNumber } from 'utils/formatBalance'
 import { useGetApiPrice } from 'state/hooks'
-import NotEnoughTokensModal from '../NotEnoughTokensModal'
 import CollectModal from '../CollectModal'
 
 interface HarvestActionsProps {
@@ -21,6 +18,7 @@ interface HarvestActionsProps {
 const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken, sousId, isBnbPool }) => {
   const TranslateString = useI18n()
   const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
+  const fullBalance = getFullDisplayBalance(earnings, earningToken.decimals)
   const formattedBalance = formatNumber(getBalanceNumber(earnings, earningToken.decimals), 3, 3)
   const earningsDollarValue = formatNumber(
     getBalanceNumber(earnings.multipliedBy(earningTokenPrice), earningToken.decimals),
@@ -30,8 +28,9 @@ const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken,
 
   const [onPresentCollect] = useModal(
     <CollectModal
-      tokenSymbol={earningToken.symbol}
       formattedBalance={formattedBalance}
+      fullBalance={fullBalance}
+      earningToken={earningToken}
       earningsDollarValue={earningsDollarValue}
       sousId={sousId}
       isBnbPool={isBnbPool}
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index eac543de84c5f..5a54c215da39a 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -48,6 +48,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
       sousId={sousId}
       stakingToken={stakingToken}
       stakingTokenPrice={stakingTokenPrice}
+      earningTokenSymbol={earningToken.symbol}
     />,
   )
 
@@ -59,6 +60,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
       stakingToken={stakingToken}
       stakingTokenPrice={stakingTokenPrice}
       isRemovingStake
+      earningTokenSymbol={earningToken.symbol}
     />,
   )
 
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index c2fdcc7d5b119..01a175b60e309 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -1,19 +1,10 @@
 import BigNumber from 'bignumber.js'
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import { Button, IconButton, useModal, AddIcon, Flex, Text, Box } from '@pancakeswap-libs/uikit'
-import Label from 'components/Label'
+import { Flex, Text, Box } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
-import { useSousUnstake } from 'hooks/useUnstake'
-import { getBalanceNumber } from 'utils/formatBalance'
-import { useSousHarvest } from 'hooks/useHarvest'
-import { useSousStake } from 'hooks/useStake'
-import Balance from 'components/Balance'
 import { PoolCategory } from 'config/constants/types'
 import { Pool } from 'state/types'
-import WithdrawModal from '../WithdrawModal'
-import CompoundModal from '../CompoundModal'
-import HarvestButton from '../HarvestButton'
 import ApprovalAction from './ApprovalAction'
 import StakeActions from './StakeActions'
 import HarvestActions from './HarvestActions'
@@ -29,49 +20,17 @@ const CardActions: React.FC<{
   stakingTokenPrice: number
 }> = ({ pool, stakedBalance, accountHasStakedBalance, stakingTokenPrice }) => {
   const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
-
   // Pools using native BNB behave differently than pools using a token
   const isBnbPool = poolCategory === PoolCategory.BINANCE
-
   const TranslateString = useI18n()
-
-  const [pendingTx, setPendingTx] = useState(false)
-  const { onUnstake } = useSousUnstake(sousId)
-  const { onReward } = useSousHarvest(sousId, isBnbPool)
-  const { onStake } = useSousStake(sousId, isBnbPool)
-
   const allowance = new BigNumber(userData?.allowance || 0)
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
   const earnings = new BigNumber(userData?.pendingReward || 0)
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
   const isStaked = stakedBalance.toNumber() > 0
 
-  const [onPresentCompound] = useModal(
-    <CompoundModal earnings={earnings} onConfirm={onStake} tokenName={stakingToken.symbol} />,
-  )
-  const [onPresentWithdraw] = useModal(
-    <WithdrawModal
-      max={stakedBalance}
-      onConfirm={onUnstake}
-      tokenName={stakingToken.symbol}
-      stakingTokenDecimals={stakingToken.decimals}
-    />,
-  )
-
   return (
     <Flex flexDirection="column">
-      {/* {harvest && (
-        <HarvestButton
-          disabled={!earnings.toNumber() || pendingTx}
-          text={pendingTx ? TranslateString(999, 'Collecting') : TranslateString(562, 'Harvest')}
-          onClick={async () => {
-            setPendingTx(true)
-            await onReward()
-            setPendingTx(false)
-          }}
-        />
-      )} */}
-
       <Flex flexDirection="column">
         {harvest && (
           <>
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
index e4117311c5ff4..56f6c1bbdb5c9 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
-import { useWeb3React } from '@web3-react/core'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
 import { Flex, MetamaskIcon, Text, LinkExternal, TimerIcon, Skeleton } from '@pancakeswap-libs/uikit'
diff --git a/src/views/Pools/components/PoolCard/CollectModal.tsx b/src/views/Pools/components/PoolCard/CollectModal.tsx
index 719688802f086..b7a60c8450452 100644
--- a/src/views/Pools/components/PoolCard/CollectModal.tsx
+++ b/src/views/Pools/components/PoolCard/CollectModal.tsx
@@ -3,7 +3,6 @@ import {
   Modal,
   Text,
   Button,
-  OpenNewIcon,
   Heading,
   Flex,
   AutoRenewIcon,
@@ -16,11 +15,14 @@ import {
 import useI18n from 'hooks/useI18n'
 import useTheme from 'hooks/useTheme'
 import { useSousHarvest } from 'hooks/useHarvest'
+import { useSousStake } from 'hooks/useStake'
 import { useToast } from 'state/hooks'
+import { Token } from 'config/constants/types'
 
 interface CollectModalProps {
-  tokenSymbol: string
   formattedBalance: string
+  fullBalance: string
+  earningToken: Token
   earningsDollarValue: string
   sousId: number
   isBnbPool: boolean
@@ -29,8 +31,9 @@ interface CollectModalProps {
 }
 
 const CollectModal: React.FC<CollectModalProps> = ({
-  tokenSymbol,
   formattedBalance,
+  fullBalance,
+  earningToken,
   earningsDollarValue,
   sousId,
   isBnbPool,
@@ -40,12 +43,13 @@ const CollectModal: React.FC<CollectModalProps> = ({
   const TranslateString = useI18n()
   const { theme } = useTheme()
   const { toastSuccess, toastError } = useToast()
+  const { onReward } = useSousHarvest(sousId, isBnbPool)
+  const { onStake } = useSousStake(sousId, isBnbPool)
   const [pendingTx, setPendingTx] = useState(false)
   const [shouldCompound, setShouldCompound] = useState(isCompoundPool)
-  const { onReward } = useSousHarvest(sousId, isBnbPool)
   const { targetRef, tooltip, tooltipVisible } = useTooltip(
     <>
-      <Box>{TranslateString(999, 'Compound: collect and restake CAKE into pool.')}</Box>
+      <Box mb="12px">{TranslateString(999, 'Compound: collect and restake CAKE into pool.')}</Box>
       <Box>{TranslateString(999, 'Harvest: collect CAKE and send to wallet')}</Box>
     </>,
     'bottom-end',
@@ -57,27 +61,44 @@ const CollectModal: React.FC<CollectModalProps> = ({
 
   const handleHarvestConfirm = async () => {
     setPendingTx(true)
-
-    try {
-      await onReward()
-      toastSuccess(
-        `${TranslateString(999, 'Harvested')}!`,
-        TranslateString(999, 'Your earnings have been sent to your wallet!'),
-      )
-      setPendingTx(false)
-      onDismiss()
-    } catch (e) {
-      toastError(
-        TranslateString(999, 'Canceled'),
-        TranslateString(999, 'Please try again and confirm the transaction.'),
-      )
-      setPendingTx(false)
+    if (shouldCompound) {
+      try {
+        await onStake(fullBalance, earningToken.decimals)
+        toastSuccess(
+          `${TranslateString(999, 'Compounded')}!`,
+          TranslateString(999, `Your ${earningToken.symbol} earnings have been re-invested into the pool!`),
+        )
+        setPendingTx(false)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
+    } else {
+      try {
+        await onReward()
+        toastSuccess(
+          `${TranslateString(999, 'Harvested')}!`,
+          TranslateString(999, `Your ${earningToken.symbol} earnings have been sent to your wallet!`),
+        )
+        setPendingTx(false)
+        onDismiss()
+      } catch (e) {
+        toastError(
+          TranslateString(999, 'Canceled'),
+          TranslateString(999, 'Please try again and confirm the transaction.'),
+        )
+        setPendingTx(false)
+      }
     }
   }
 
   return (
     <Modal
-      title={`${tokenSymbol} ${TranslateString(562, 'Harvest')}`}
+      title={`${earningToken.symbol} ${TranslateString(562, 'Harvest')}`}
       onDismiss={onDismiss}
       headerBackground={theme.colors.gradients.cardHeader}
     >
@@ -103,7 +124,7 @@ const CollectModal: React.FC<CollectModalProps> = ({
         <Text>{shouldCompound ? TranslateString(999, 'Compounding') : TranslateString(999, 'Harvesting')}:</Text>
         <Flex flexDirection="column">
           <Heading>
-            {formattedBalance} {tokenSymbol}
+            {formattedBalance} {earningToken.symbol}
           </Heading>
           <Text fontSize="12px" color="textSubtle">{`~${earningsDollarValue || 0} USD`}</Text>
         </Flex>
diff --git a/src/views/Pools/components/PoolCard/CompoundModal.tsx b/src/views/Pools/components/PoolCard/CompoundModal.tsx
deleted file mode 100644
index 80cadc018ac84..0000000000000
--- a/src/views/Pools/components/PoolCard/CompoundModal.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
-import React, { useMemo, useState } from 'react'
-import { Button, Modal } from '@pancakeswap-libs/uikit'
-import ModalActions from 'components/ModalActions'
-import Balance from 'components/Balance'
-import useI18n from 'hooks/useI18n'
-import { getFullDisplayBalance } from 'utils/formatBalance'
-
-interface DepositModalProps {
-  earnings: BigNumber
-  onConfirm: (amount: string, decimals: number) => void
-  onDismiss?: () => void
-  tokenName?: string
-  stakingTokenDecimals?: number
-}
-
-const CompoundModal: React.FC<DepositModalProps> = ({
-  earnings,
-  onConfirm,
-  onDismiss,
-  tokenName = '',
-  stakingTokenDecimals = 18,
-}) => {
-  const [pendingTx, setPendingTx] = useState(false)
-  const TranslateString = useI18n()
-  const fullBalance = useMemo(() => {
-    return getFullDisplayBalance(earnings, stakingTokenDecimals)
-  }, [earnings, stakingTokenDecimals])
-
-  return (
-    <Modal
-      title={`${TranslateString(704, 'Compound')} ${TranslateString(330, `${tokenName} Earned`)}`}
-      onDismiss={onDismiss}
-    >
-      <BalanceRow>
-        <Balance value={Number(fullBalance)} />
-      </BalanceRow>
-      <ModalActions>
-        <Button width="100%" variant="secondary" onClick={onDismiss}>
-          {TranslateString(462, 'Cancel')}
-        </Button>
-        <Button
-          id="compound-cake"
-          width="100%"
-          disabled={pendingTx}
-          onClick={async () => {
-            setPendingTx(true)
-            await onConfirm(fullBalance, stakingTokenDecimals)
-            setPendingTx(false)
-            onDismiss()
-          }}
-        >
-          {pendingTx ? TranslateString(488, 'Pending Confirmation') : TranslateString(464, 'Confirm')}
-        </Button>
-      </ModalActions>
-    </Modal>
-  )
-}
-
-export default CompoundModal
-
-const BalanceRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
-`
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/StakeModal.tsx
index 2ee64cb4fe83c..7f0bb83048835 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/StakeModal.tsx
@@ -19,6 +19,7 @@ interface StakeModalProps {
   stakingMax: BigNumber
   stakingTokenPrice: number
   isRemovingStake?: boolean
+  earningTokenSymbol: string
   onDismiss?: () => void
 }
 
@@ -33,6 +34,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
   stakingMax,
   stakingTokenPrice,
   isRemovingStake = false,
+  earningTokenSymbol,
   onDismiss,
 }) => {
   const TranslateString = useI18n()
@@ -71,7 +73,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         await onUnstake(stakeAmount, stakingToken.decimals)
         toastSuccess(
           `${TranslateString(999, 'Unstaked')}!`,
-          TranslateString(999, 'Your earnings have also been harvested to your wallet!'),
+          TranslateString(999, `Your ${earningTokenSymbol} earnings have also been harvested to your wallet!`),
         )
         setPendingTx(false)
         onDismiss()
@@ -87,7 +89,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         await onStake(stakeAmount, stakingToken.decimals)
         toastSuccess(
           `${TranslateString(1074, 'Staked')}!`,
-          TranslateString(999, 'Your funds have been staked in the pool!'),
+          TranslateString(999, `Your ${stakingToken.symbol} funds have been staked in the pool!`),
         )
         setPendingTx(false)
         onDismiss()

From db54948314339c9bf4cecd8f8151ff7de98d3a73 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 22 Apr 2021 21:19:54 +0100
Subject: [PATCH 24/40] feat(syrup-pool-v2): Style for promoted pool (& cake)
 and organising files

---
 src/views/Pools/components/CardContent.tsx    | 13 ----
 .../PoolCard/CardActions/HarvestActions.tsx   |  2 +-
 .../PoolCard/CardActions/StakeActions.tsx     |  4 +-
 .../PoolCard/CardFooter/ExpandedFooter.tsx    |  5 +-
 .../components/PoolCard/DepositModal.tsx      | 72 -------------------
 .../PoolCard/{ => Modals}/CollectModal.tsx    |  0
 .../{ => Modals}/NotEnoughTokensModal.tsx     |  0
 .../PoolCard/{ => Modals}/StakeModal.tsx      |  2 +-
 .../components/PoolCard/StyledCardHeader.tsx  | 10 +--
 .../components/PoolCard/WithdrawModal.tsx     | 71 ------------------
 10 files changed, 12 insertions(+), 167 deletions(-)
 delete mode 100644 src/views/Pools/components/CardContent.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/DepositModal.tsx
 rename src/views/Pools/components/PoolCard/{ => Modals}/CollectModal.tsx (100%)
 rename src/views/Pools/components/PoolCard/{ => Modals}/NotEnoughTokensModal.tsx (100%)
 rename src/views/Pools/components/PoolCard/{ => Modals}/StakeModal.tsx (99%)
 delete mode 100644 src/views/Pools/components/PoolCard/WithdrawModal.tsx

diff --git a/src/views/Pools/components/CardContent.tsx b/src/views/Pools/components/CardContent.tsx
deleted file mode 100644
index 92bbf6ea5ccd1..0000000000000
--- a/src/views/Pools/components/CardContent.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-const CardContent: React.FC = ({ children }) => <StyledCardContent>{children}</StyledCardContent>
-
-const StyledCardContent = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding: 0;
-`
-
-export default CardContent
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 2557593e09c25..43dd087b2cc41 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -6,7 +6,7 @@ import { getAddress } from 'utils/addressHelpers'
 import useI18n from 'hooks/useI18n'
 import { getFullDisplayBalance, getBalanceNumber, formatNumber } from 'utils/formatBalance'
 import { useGetApiPrice } from 'state/hooks'
-import CollectModal from '../CollectModal'
+import CollectModal from '../Modals/CollectModal'
 
 interface HarvestActionsProps {
   earnings: BigNumber
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index 5a54c215da39a..978a074228836 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -4,8 +4,8 @@ import BigNumber from 'bignumber.js'
 import { Token } from 'config/constants/types'
 import useI18n from 'hooks/useI18n'
 import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
-import NotEnoughTokensModal from '../NotEnoughTokensModal'
-import StakeModal from '../StakeModal'
+import NotEnoughTokensModal from '../Modals/NotEnoughTokensModal'
+import StakeModal from '../Modals/StakeModal'
 
 interface StakeActionsProps {
   stakingTokenBalance: BigNumber
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
index 56f6c1bbdb5c9..8435f16bd7a7c 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -49,7 +49,7 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
   const TranslateString = useI18n()
   const imageSrc = `${BASE_URL}/images/tokens/${tokenSymbol.toLowerCase()}.png`
   const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
-  const shouldShowBlockCountdown = Boolean(startBlock && endBlock)
+  const shouldShowBlockCountdown = Boolean(!isFinished && startBlock && endBlock)
   const { currentBlock } = useBlock()
   const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
   const blocksRemaining = Math.max(endBlock - currentBlock, 0)
@@ -63,7 +63,7 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
         <Flex alignItems="flex-start">
           {totalStaked ? (
             <>
-              <Balance fontSize="14px" isDisabled={isFinished} value={getBalanceNumber(totalStaked, decimals)} />
+              <Balance fontSize="14px" value={getBalanceNumber(totalStaked, decimals)} />
               <Text ml="4px" fontSize="14px">
                 {stakingTokenSymbol}
               </Text>
@@ -80,7 +80,6 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
             <Balance
               color="primary"
               fontSize="14px"
-              isDisabled={isFinished}
               value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
               decimals={0}
             />
diff --git a/src/views/Pools/components/PoolCard/DepositModal.tsx b/src/views/Pools/components/PoolCard/DepositModal.tsx
deleted file mode 100644
index 78c37ea7ad5f2..0000000000000
--- a/src/views/Pools/components/PoolCard/DepositModal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import BigNumber from 'bignumber.js'
-import React, { useCallback, useMemo, useState } from 'react'
-import { Button, Modal } from '@pancakeswap-libs/uikit'
-import ModalActions from 'components/ModalActions'
-import TokenInput from 'components/TokenInput'
-import useI18n from 'hooks/useI18n'
-import { getFullDisplayBalance } from 'utils/formatBalance'
-
-interface DepositModalProps {
-  max: BigNumber
-  onConfirm: (amount: string, decimals: number) => void
-  onDismiss?: () => void
-  tokenName?: string
-  stakingTokenDecimals?: number
-}
-
-const DepositModal: React.FC<DepositModalProps> = ({
-  max,
-  onConfirm,
-  onDismiss,
-  tokenName = '',
-  stakingTokenDecimals = 18,
-}) => {
-  const [val, setVal] = useState('')
-  const [pendingTx, setPendingTx] = useState(false)
-  const TranslateString = useI18n()
-  const fullBalance = useMemo(() => {
-    return getFullDisplayBalance(max, stakingTokenDecimals)
-  }, [max, stakingTokenDecimals])
-
-  const handleChange = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
-      setVal(e.currentTarget.value)
-    },
-    [setVal],
-  )
-
-  const handleSelectMax = useCallback(() => {
-    setVal(fullBalance)
-  }, [fullBalance, setVal])
-
-  return (
-    <Modal title={`${TranslateString(316, 'Deposit')} ${tokenName} Tokens`} onDismiss={onDismiss}>
-      <TokenInput
-        value={val}
-        onSelectMax={handleSelectMax}
-        onChange={handleChange}
-        max={fullBalance}
-        symbol={tokenName}
-      />
-      <ModalActions>
-        <Button width="100%" variant="secondary" onClick={onDismiss}>
-          {TranslateString(462, 'Cancel')}
-        </Button>
-        <Button
-          width="100%"
-          disabled={pendingTx}
-          onClick={async () => {
-            setPendingTx(true)
-            await onConfirm(val, stakingTokenDecimals)
-            setPendingTx(false)
-            onDismiss()
-          }}
-        >
-          {pendingTx ? TranslateString(488, 'Pending Confirmation') : TranslateString(464, 'Confirm')}
-        </Button>
-      </ModalActions>
-    </Modal>
-  )
-}
-
-export default DepositModal
diff --git a/src/views/Pools/components/PoolCard/CollectModal.tsx b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
similarity index 100%
rename from src/views/Pools/components/PoolCard/CollectModal.tsx
rename to src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
diff --git a/src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx b/src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx
similarity index 100%
rename from src/views/Pools/components/PoolCard/NotEnoughTokensModal.tsx
rename to src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx
diff --git a/src/views/Pools/components/PoolCard/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
similarity index 99%
rename from src/views/Pools/components/PoolCard/StakeModal.tsx
rename to src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index 7f0bb83048835..de8d9490c090e 100644
--- a/src/views/Pools/components/PoolCard/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -10,7 +10,7 @@ import BigNumber from 'bignumber.js'
 import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
 import { Token } from 'config/constants/types'
 import { useToast } from 'state/hooks'
-import ConfirmButton from './ConfirmButton'
+import ConfirmButton from '../ConfirmButton'
 
 interface StakeModalProps {
   sousId: number
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index 97192583c0ffc..eb0e712efc512 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -3,9 +3,9 @@ import { CardHeader, Heading, Text, Flex, Image, Box } from '@pancakeswap-libs/u
 import styled from 'styled-components'
 import PoolFinishedSash from './PoolFinishedSash'
 
-const Wrapper = styled(CardHeader)<{ isFinished?: boolean }>`
-  background: ${({ isFinished, theme }) =>
-    isFinished ? theme.colors.backgroundDisabled : theme.card.cardHeaderBackground.default};
+const Wrapper = styled(CardHeader)<{ isFinished?: boolean; activeBackground?: string }>`
+  background: ${({ isFinished, activeBackground, theme }) =>
+    isFinished ? theme.colors.backgroundDisabled : theme.colors.gradients[activeBackground]};
 `
 
 const StyledCardHeader: React.FC<{
@@ -14,10 +14,12 @@ const StyledCardHeader: React.FC<{
   isFinished?: boolean
 }> = ({ earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
   const poolImageSrc = `${earningTokenSymbol}-${stakingTokenSymbol}.svg`.toLocaleLowerCase()
+  const isPromoted = earningTokenSymbol === 'CAKE'
+  const activeBackground = isPromoted ? 'bubblegum' : 'cardHeader'
 
   return (
     <>
-      <Wrapper isFinished={isFinished}>
+      <Wrapper isFinished={isFinished} activeBackground={activeBackground}>
         <Flex alignItems="center" justifyContent="space-between">
           <Flex flexDirection="column">
             <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
diff --git a/src/views/Pools/components/PoolCard/WithdrawModal.tsx b/src/views/Pools/components/PoolCard/WithdrawModal.tsx
deleted file mode 100644
index 85ab026373963..0000000000000
--- a/src/views/Pools/components/PoolCard/WithdrawModal.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import BigNumber from 'bignumber.js'
-import React, { useCallback, useMemo, useState } from 'react'
-import { Button, Modal } from '@pancakeswap-libs/uikit'
-import ModalActions from 'components/ModalActions'
-import TokenInput from 'components/TokenInput'
-import useI18n from 'hooks/useI18n'
-import { getFullDisplayBalance } from 'utils/formatBalance'
-
-interface WithdrawModalProps {
-  max: BigNumber
-  onConfirm: (amount: string, decimals: number) => void
-  onDismiss?: () => void
-  tokenName?: string
-  stakingTokenDecimals?: number
-}
-
-const WithdrawModal: React.FC<WithdrawModalProps> = ({
-  onConfirm,
-  onDismiss,
-  max,
-  tokenName = '',
-  stakingTokenDecimals = 18,
-}) => {
-  const [val, setVal] = useState('')
-  const [pendingTx, setPendingTx] = useState(false)
-  const TranslateString = useI18n()
-  const fullBalance = useMemo(() => {
-    return getFullDisplayBalance(max, stakingTokenDecimals)
-  }, [max, stakingTokenDecimals])
-
-  const handleChange = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
-      setVal(e.currentTarget.value)
-    },
-    [setVal],
-  )
-
-  const handleSelectMax = useCallback(() => {
-    setVal(fullBalance)
-  }, [fullBalance, setVal])
-
-  return (
-    <Modal title={`Withdraw ${tokenName}`} onDismiss={onDismiss}>
-      <TokenInput
-        onSelectMax={handleSelectMax}
-        onChange={handleChange}
-        value={val}
-        max={fullBalance}
-        symbol={tokenName}
-      />
-      <ModalActions>
-        <Button variant="secondary" onClick={onDismiss}>
-          {TranslateString(462, 'Cancel')}
-        </Button>
-        <Button
-          disabled={pendingTx}
-          onClick={async () => {
-            setPendingTx(true)
-            await onConfirm(val, stakingTokenDecimals)
-            setPendingTx(false)
-            onDismiss()
-          }}
-        >
-          {pendingTx ? TranslateString(488, 'Pending Confirmation') : TranslateString(464, 'Confirm')}
-        </Button>
-      </ModalActions>
-    </Modal>
-  )
-}
-
-export default WithdrawModal

From 1d918dcb926b6b81f097cbfd4eb054073cd298b9 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Fri, 23 Apr 2021 14:40:55 +0100
Subject: [PATCH 25/40] feat(syrup-pool-v2): Massive proptypes tidy up

---
 src/utils/formatBalance.ts                    |  2 +-
 .../Pools/components/PoolCard/AprRow.tsx      | 20 ++---
 .../PoolCard/CardActions/ApprovalAction.tsx   | 14 ++--
 .../PoolCard/CardActions/StakeActions.tsx     | 26 ++-----
 .../components/PoolCard/CardActions/index.tsx | 14 +---
 .../PoolCard/CardFooter/ExpandedFooter.tsx    | 77 ++++++-------------
 .../components/PoolCard/CardFooter/index.tsx  | 49 ++----------
 .../components/PoolCard/Modals/StakeModal.tsx | 15 ++--
 src/views/Pools/components/PoolCard/index.tsx | 36 +--------
 9 files changed, 61 insertions(+), 192 deletions(-)

diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts
index ef819b115d10c..e918e84830f75 100644
--- a/src/utils/formatBalance.ts
+++ b/src/utils/formatBalance.ts
@@ -5,7 +5,7 @@ export const getBalanceNumber = (balance: BigNumber, decimals = 18) => {
   return displayBalance.toNumber()
 }
 
-export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, decimalsToAppear = undefined) => {
+export const getFullDisplayBalance = (balance: BigNumber, decimals = 18, decimalsToAppear?: number) => {
   return balance.dividedBy(new BigNumber(10).pow(decimals)).toFixed(decimalsToAppear)
 }
 
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index f1d6121bcb1e8..d3e490fc740be 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -1,32 +1,22 @@
 import React from 'react'
-import BigNumber from 'bignumber.js'
 import { Flex, Text, IconButton, useModal, CalculateIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
-import { Token } from 'config/constants/types'
 import { getBalanceNumber } from 'utils/formatBalance'
 import { getPoolApr } from 'utils/apr'
 import { getAddress } from 'utils/addressHelpers'
 import { useGetApiPrice } from 'state/hooks'
 import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
+import { Pool } from 'state/types'
 
 interface AprRowProps {
-  isFinished: boolean
-  stakingToken: Token
-  earningToken: Token
-  totalStaked: BigNumber
-  tokenPerBlock: string
+  pool: Pool
   stakingTokenPrice: number
 }
 
-const AprRow: React.FC<AprRowProps> = ({
-  isFinished,
-  stakingToken,
-  earningToken,
-  totalStaked,
-  tokenPerBlock,
-  stakingTokenPrice,
-}) => {
+const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
+  const { stakingToken, earningToken, totalStaked, isFinished, tokenPerBlock } = pool
+
   const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
   const apr = getPoolApr(
     stakingTokenPrice,
diff --git a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
index d3a72b7e96629..8d82479ae7db8 100644
--- a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
@@ -5,16 +5,14 @@ import useI18n from 'hooks/useI18n'
 import { useERC20 } from 'hooks/useContract'
 import { useToast } from 'state/hooks'
 import { getAddress } from 'utils/addressHelpers'
-import { Token } from 'config/constants/types'
+import { Pool } from 'state/types'
 
 interface ApprovalActionProps {
-  stakingToken: Token
-  earningTokenSymbol: string
-  isFinished: boolean
-  sousId: number
+  pool: Pool
 }
 
-const ApprovalAction: React.FC<ApprovalActionProps> = ({ stakingToken, earningTokenSymbol, isFinished, sousId }) => {
+const ApprovalAction: React.FC<ApprovalActionProps> = ({ pool }) => {
+  const { sousId, stakingToken, earningToken, isFinished } = pool
   const TranslateString = useI18n()
   const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
   const [requestedApproval, setRequestedApproval] = useState(false)
@@ -28,7 +26,7 @@ const ApprovalAction: React.FC<ApprovalActionProps> = ({ stakingToken, earningTo
       if (txHash) {
         toastSuccess(
           `${TranslateString(999, 'Contract Enabled')}`,
-          `${TranslateString(999, `You can now stake in the ${earningTokenSymbol} pool!`)}`,
+          `${TranslateString(999, `You can now stake in the ${earningToken.symbol} pool!`)}`,
         )
         setRequestedApproval(false)
       } else {
@@ -46,7 +44,7 @@ const ApprovalAction: React.FC<ApprovalActionProps> = ({ stakingToken, earningTo
       console.error(e)
       toastError('Error', e?.message)
     }
-  }, [onApprove, setRequestedApproval, toastSuccess, toastError, TranslateString, earningTokenSymbol])
+  }, [onApprove, setRequestedApproval, toastSuccess, toastError, TranslateString, earningToken])
 
   return (
     <Button
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index 978a074228836..db809c371946e 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -1,35 +1,30 @@
 import React from 'react'
 import { Flex, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
-import { Token } from 'config/constants/types'
 import useI18n from 'hooks/useI18n'
 import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
+import { Pool } from 'state/types'
 import NotEnoughTokensModal from '../Modals/NotEnoughTokensModal'
 import StakeModal from '../Modals/StakeModal'
 
 interface StakeActionsProps {
+  pool: Pool
   stakingTokenBalance: BigNumber
   stakingTokenPrice: number
-  stakingToken: Token
-  earningToken: Token
   stakedBalance: BigNumber
-  stakingLimit?: number
-  sousId: number
   isBnbPool: boolean
   isStaked: ConstrainBoolean
 }
 
 const StakeAction: React.FC<StakeActionsProps> = ({
+  pool,
   stakingTokenBalance,
   stakingTokenPrice,
-  stakingToken,
-  earningToken,
   stakedBalance,
-  stakingLimit,
-  sousId,
   isBnbPool,
   isStaked,
 }) => {
+  const { stakingToken, earningToken, stakingLimit } = pool
   const TranslateString = useI18n()
   const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
   const stakingMax =
@@ -42,25 +37,16 @@ const StakeAction: React.FC<StakeActionsProps> = ({
   const [onPresentTokenRequired] = useModal(<NotEnoughTokensModal tokenSymbol={stakingToken.symbol} />)
 
   const [onPresentStake] = useModal(
-    <StakeModal
-      stakingMax={stakingMax}
-      isBnbPool={isBnbPool}
-      sousId={sousId}
-      stakingToken={stakingToken}
-      stakingTokenPrice={stakingTokenPrice}
-      earningTokenSymbol={earningToken.symbol}
-    />,
+    <StakeModal stakingMax={stakingMax} isBnbPool={isBnbPool} pool={pool} stakingTokenPrice={stakingTokenPrice} />,
   )
 
   const [onPresentUnstake] = useModal(
     <StakeModal
       stakingMax={stakedBalance}
       isBnbPool={isBnbPool}
-      sousId={sousId}
-      stakingToken={stakingToken}
+      pool={pool}
       stakingTokenPrice={stakingTokenPrice}
       isRemovingStake
-      earningTokenSymbol={earningToken.symbol}
     />,
   )
 
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 01a175b60e309..6abcc0ad8fe77 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -19,7 +19,7 @@ const CardActions: React.FC<{
   accountHasStakedBalance: boolean
   stakingTokenPrice: number
 }> = ({ pool, stakedBalance, accountHasStakedBalance, stakingTokenPrice }) => {
-  const { sousId, stakingToken, earningToken, harvest, poolCategory, isFinished, userData, stakingLimit } = pool
+  const { sousId, stakingToken, earningToken, harvest, poolCategory, userData } = pool
   // Pools using native BNB behave differently than pools using a token
   const isBnbPool = poolCategory === PoolCategory.BINANCE
   const TranslateString = useI18n()
@@ -54,21 +54,13 @@ const CardActions: React.FC<{
           </InlineText>
         </Box>
         {needsApproval ? (
-          <ApprovalAction
-            stakingToken={stakingToken}
-            earningTokenSymbol={earningToken.symbol}
-            isFinished={isFinished}
-            sousId={sousId}
-          />
+          <ApprovalAction pool={pool} />
         ) : (
           <StakeActions
+            pool={pool}
             stakingTokenBalance={stakingTokenBalance}
             stakingTokenPrice={stakingTokenPrice}
-            stakingToken={stakingToken}
-            earningToken={earningToken}
             stakedBalance={stakedBalance}
-            stakingLimit={stakingLimit}
-            sousId={sousId}
             isBnbPool={isBnbPool}
             isStaked={isStaked}
           />
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
index 8435f16bd7a7c..8c8f60e69ff56 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -1,27 +1,17 @@
 import React from 'react'
-import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
 import { Flex, MetamaskIcon, Text, LinkExternal, TimerIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import { BASE_URL } from 'config'
-import { Address } from 'config/constants/types'
 import { useBlock } from 'state/hooks'
+import { Pool } from 'state/types'
+import { getAddress } from 'utils/addressHelpers'
 import { registerToken } from 'utils/wallet'
 import Balance from 'components/Balance'
 
 interface ExpandedFooterProps {
-  projectLink: string
-  decimals: number
-  totalStaked: BigNumber
-  tokenSymbol: string
-  tokenAddress: string
-  tokenDecimals: number
-  startBlock: number
-  endBlock: number
-  isFinished: boolean
-  stakingTokenSymbol: string
-  contractAddress: Address
+  pool: Pool
   account: string
 }
 
@@ -32,29 +22,20 @@ const ExpandedWrapper = styled(Flex)`
   }
 `
 
-const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
-  projectLink,
-  decimals,
-  tokenAddress,
-  totalStaked,
-  tokenSymbol,
-  tokenDecimals,
-  isFinished,
-  startBlock,
-  endBlock,
-  stakingTokenSymbol,
-  contractAddress,
-  account,
-}) => {
+const ExpandedFooter: React.FC<ExpandedFooterProps> = ({ pool, account }) => {
   const TranslateString = useI18n()
-  const imageSrc = `${BASE_URL}/images/tokens/${tokenSymbol.toLowerCase()}.png`
+  const { currentBlock } = useBlock()
+  const { stakingToken, earningToken, totalStaked, startBlock, endBlock, isFinished, contractAddress } = pool
+
+  const tokenAddress = earningToken.address ? getAddress(earningToken.address) : ''
+  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
+  const imageSrc = `${BASE_URL}/images/tokens/${earningToken.symbol.toLowerCase()}.png`
   const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
+
   const shouldShowBlockCountdown = Boolean(!isFinished && startBlock && endBlock)
-  const { currentBlock } = useBlock()
   const blocksUntilStart = Math.max(startBlock - currentBlock, 0)
   const blocksRemaining = Math.max(endBlock - currentBlock, 0)
   const hasPoolStarted = blocksUntilStart === 0 && blocksRemaining > 0
-  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
 
   return (
     <ExpandedWrapper flexDirection="column">
@@ -63,9 +44,9 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
         <Flex alignItems="flex-start">
           {totalStaked ? (
             <>
-              <Balance fontSize="14px" value={getBalanceNumber(totalStaked, decimals)} />
+              <Balance fontSize="14px" value={getBalanceNumber(totalStaked, stakingToken.decimals)} />
               <Text ml="4px" fontSize="14px">
-                {stakingTokenSymbol}
+                {stakingToken.symbol}
               </Text>
             </>
           ) : (
@@ -77,12 +58,16 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
         <Flex mb="2px" justifyContent="space-between" alignItems="center">
           <Text fontSize="14px">{hasPoolStarted ? TranslateString(410, 'End') : TranslateString(1212, 'Start')}:</Text>
           <Flex alignItems="center">
-            <Balance
-              color="primary"
-              fontSize="14px"
-              value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
-              decimals={0}
-            />
+            {blocksRemaining || blocksUntilStart ? (
+              <Balance
+                color="primary"
+                fontSize="14px"
+                value={hasPoolStarted ? blocksRemaining : blocksUntilStart}
+                decimals={0}
+              />
+            ) : (
+              <Skeleton width="54px" height="21px" />
+            )}
             <Text ml="4px" color="primary" fontSize="14px">
               {TranslateString(999, 'blocks')}
             </Text>
@@ -91,7 +76,7 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
         </Flex>
       )}
       <Flex mb="2px" justifyContent="flex-end">
-        <LinkExternal bold={false} fontSize="14px" href={projectLink} target="_blank">
+        <LinkExternal bold={false} fontSize="14px" href={earningToken.projectLink} target="_blank">
           {TranslateString(412, 'View Project Site')}
         </LinkExternal>
       </Flex>
@@ -107,24 +92,12 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({
           </LinkExternal>
         </Flex>
       )}
-      {tokenAddress && (
-        <Flex mb="2px" justifyContent="flex-end">
-          <LinkExternal
-            bold={false}
-            fontSize="14px"
-            href={`https://pancakeswap.info/token/${tokenAddress}`}
-            target="_blank"
-          >
-            {TranslateString(412, 'View Pool Info')}
-          </LinkExternal>
-        </Flex>
-      )}
       {account && isMetaMaskInScope && tokenAddress && (
         <Flex justifyContent="flex-end">
           <Text
             color="primary"
             fontSize="14px"
-            onClick={() => registerToken(tokenAddress, tokenSymbol, tokenDecimals, imageSrc)}
+            onClick={() => registerToken(tokenAddress, earningToken.symbol, earningToken.decimals, imageSrc)}
           >
             Add to Metamask
           </Text>
diff --git a/src/views/Pools/components/PoolCard/CardFooter/index.tsx b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
index 93cb6ca403a43..0e2f739a905d9 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/index.tsx
@@ -1,46 +1,24 @@
 import React, { useState } from 'react'
-import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import useI18n from 'hooks/useI18n'
 import { Flex, CardFooter, ExpandableLabel } from '@pancakeswap-libs/uikit'
-import { Address } from 'config/constants/types'
+import { Pool } from 'state/types'
 import ExpandedFooter from './ExpandedFooter'
 
 interface FooterProps {
-  projectLink: string
-  decimals: number
-  totalStaked: BigNumber
-  tokenSymbol: string
-  tokenAddress: string
-  tokenDecimals: number
-  startBlock: number
-  endBlock: number
-  isFinished: boolean
-  stakingTokenSymbol: string
-  contractAddress: Address
+  pool: Pool
   account: string
 }
 
 const ExpandableButtonWrapper = styled(Flex)`
+  align-items: center;
+  justify-content: center;
   button {
     padding: 0;
   }
 `
 
-const Footer: React.FC<FooterProps> = ({
-  projectLink,
-  decimals,
-  tokenAddress,
-  totalStaked,
-  tokenSymbol,
-  tokenDecimals,
-  isFinished,
-  startBlock,
-  endBlock,
-  stakingTokenSymbol,
-  contractAddress,
-  account,
-}) => {
+const Footer: React.FC<FooterProps> = ({ pool, account }) => {
   const TranslateString = useI18n()
   const [isExpanded, setIsExpanded] = useState(false)
 
@@ -51,22 +29,7 @@ const Footer: React.FC<FooterProps> = ({
           {isExpanded ? TranslateString(1066, 'Hide') : TranslateString(658, 'Details')}
         </ExpandableLabel>
       </ExpandableButtonWrapper>
-      {isExpanded && (
-        <ExpandedFooter
-          projectLink={projectLink}
-          decimals={decimals}
-          totalStaked={totalStaked}
-          startBlock={startBlock}
-          endBlock={endBlock}
-          isFinished={isFinished}
-          tokenSymbol={tokenSymbol}
-          tokenAddress={tokenAddress}
-          tokenDecimals={tokenDecimals}
-          stakingTokenSymbol={stakingTokenSymbol}
-          contractAddress={contractAddress}
-          account={account}
-        />
-      )}
+      {isExpanded && <ExpandedFooter pool={pool} account={account} />}
     </CardFooter>
   )
 }
diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index de8d9490c090e..15727bad3c5cc 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -8,18 +8,16 @@ import { useSousUnstake } from 'hooks/useUnstake'
 import useTheme from 'hooks/useTheme'
 import BigNumber from 'bignumber.js'
 import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
-import { Token } from 'config/constants/types'
 import { useToast } from 'state/hooks'
+import { Pool } from 'state/types'
 import ConfirmButton from '../ConfirmButton'
 
 interface StakeModalProps {
-  sousId: number
   isBnbPool: boolean
-  stakingToken: Token
+  pool: Pool
   stakingMax: BigNumber
   stakingTokenPrice: number
   isRemovingStake?: boolean
-  earningTokenSymbol: string
   onDismiss?: () => void
 }
 
@@ -28,15 +26,14 @@ const StyledButton = styled(Button)`
 `
 
 const StakeModal: React.FC<StakeModalProps> = ({
-  sousId,
   isBnbPool,
-  stakingToken,
+  pool,
   stakingMax,
   stakingTokenPrice,
   isRemovingStake = false,
-  earningTokenSymbol,
   onDismiss,
 }) => {
+  const { sousId, stakingToken, earningToken } = pool
   const TranslateString = useI18n()
   const { theme } = useTheme()
 
@@ -60,7 +57,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
 
   const handleChangePercent = (sliderPercent: number) => {
     const percentageOfStakingMax = stakingMax.dividedBy(100).multipliedBy(sliderPercent)
-    const amountToStake = getFullDisplayBalance(percentageOfStakingMax, stakingToken.decimals)
+    const amountToStake = getFullDisplayBalance(percentageOfStakingMax, stakingToken.decimals, stakingToken.decimals)
     setStakeAmount(amountToStake)
     setPercent(sliderPercent)
   }
@@ -73,7 +70,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         await onUnstake(stakeAmount, stakingToken.decimals)
         toastSuccess(
           `${TranslateString(999, 'Unstaked')}!`,
-          TranslateString(999, `Your ${earningTokenSymbol} earnings have also been harvested to your wallet!`),
+          TranslateString(999, `Your ${earningToken.symbol} earnings have also been harvested to your wallet!`),
         )
         setPendingTx(false)
         onDismiss()
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 615dd2e32cf32..438e570e942e6 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -13,17 +13,7 @@ import StyledCardHeader from './StyledCardHeader'
 import CardActions from './CardActions'
 
 const PoolCard: React.FC<{ pool: Pool; account: string }> = ({ pool, account }) => {
-  const {
-    sousId,
-    stakingToken,
-    earningToken,
-    totalStaked,
-    startBlock,
-    endBlock,
-    isFinished,
-    userData,
-    contractAddress,
-  } = pool
+  const { sousId, stakingToken, earningToken, isFinished, userData } = pool
   const TranslateString = useI18n()
   const stakedBalance = new BigNumber(userData?.stakedBalance || 0)
   const accountHasStakedBalance = stakedBalance?.toNumber() > 0
@@ -37,14 +27,7 @@ const PoolCard: React.FC<{ pool: Pool; account: string }> = ({ pool, account })
         isFinished={isFinished && sousId !== 0}
       />
       <CardBody>
-        <AprRow
-          isFinished={isFinished}
-          stakingToken={stakingToken}
-          stakingTokenPrice={stakingTokenPrice}
-          earningToken={earningToken}
-          totalStaked={pool.totalStaked}
-          tokenPerBlock={pool.tokenPerBlock}
-        />
+        <AprRow pool={pool} stakingTokenPrice={stakingTokenPrice} />
         <Flex mt="24px" flexDirection="column">
           {account ? (
             <CardActions
@@ -63,20 +46,7 @@ const PoolCard: React.FC<{ pool: Pool; account: string }> = ({ pool, account })
           )}
         </Flex>
       </CardBody>
-      <CardFooter
-        projectLink={earningToken.projectLink}
-        decimals={stakingToken.decimals}
-        totalStaked={totalStaked}
-        startBlock={startBlock}
-        endBlock={endBlock}
-        isFinished={isFinished}
-        tokenSymbol={earningToken.symbol}
-        tokenAddress={earningToken.address ? getAddress(earningToken.address) : ''}
-        tokenDecimals={earningToken.decimals}
-        stakingTokenSymbol={stakingToken.symbol}
-        contractAddress={contractAddress}
-        account={account}
-      />
+      <CardFooter pool={pool} account={account} />
     </StyledCard>
   )
 }

From c7eb51557d216a2db4355163ffd49e5099385f2b Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Fri, 23 Apr 2021 14:42:06 +0100
Subject: [PATCH 26/40] chore(syrup-pool-v2): Del unused SVG

---
 src/views/Pools/components/warningTag.tsx | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 src/views/Pools/components/warningTag.tsx

diff --git a/src/views/Pools/components/warningTag.tsx b/src/views/Pools/components/warningTag.tsx
deleted file mode 100644
index f60e6cb573bcf..0000000000000
--- a/src/views/Pools/components/warningTag.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-const Icon = () => (
-  <svg width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M3.45 28.9999H28.55C31.1167 28.9999 32.7167 26.2166 31.4333 23.9999L18.8833 2.31655C17.6 0.0998861 14.4 0.0998861 13.1167 2.31655L0.566665 23.9999C-0.716668 26.2166 0.883331 28.9999 3.45 28.9999ZM16 17.3332C15.0833 17.3332 14.3333 16.5832 14.3333 15.6666V12.3332C14.3333 11.4166 15.0833 10.6666 16 10.6666C16.9167 10.6666 17.6667 11.4166 17.6667 12.3332V15.6666C17.6667 16.5832 16.9167 17.3332 16 17.3332ZM17.6667 23.9999H14.3333V20.6666H17.6667V23.9999Z"
-      fill="#ED4B9E"
-    />
-  </svg>
-)
-
-const WarningTag = () => <Icon />
-
-export default WarningTag

From 9b56b027fc2797b85440c3feb66c3ed3f414defa Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 11:03:25 +0100
Subject: [PATCH 27/40] feat(syrup-pool-v2): Add loading states for different
 card elements

---
 .../PoolCard/CardActions/ApprovalAction.tsx   | 29 +++++----
 .../PoolCard/CardActions/HarvestActions.tsx   | 25 ++++++--
 .../PoolCard/CardActions/StakeActions.tsx     | 60 +++++++++++--------
 .../components/PoolCard/CardActions/index.tsx | 12 +++-
 4 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
index 8d82479ae7db8..ecae1ec40c023 100644
--- a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react'
-import { Button, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import { Button, AutoRenewIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import { useSousApprove } from 'hooks/useApprove'
 import useI18n from 'hooks/useI18n'
 import { useERC20 } from 'hooks/useContract'
@@ -9,9 +9,10 @@ import { Pool } from 'state/types'
 
 interface ApprovalActionProps {
   pool: Pool
+  isLoading?: boolean
 }
 
-const ApprovalAction: React.FC<ApprovalActionProps> = ({ pool }) => {
+const ApprovalAction: React.FC<ApprovalActionProps> = ({ pool, isLoading = false }) => {
   const { sousId, stakingToken, earningToken, isFinished } = pool
   const TranslateString = useI18n()
   const stakingTokenContract = useERC20(stakingToken.address ? getAddress(stakingToken.address) : '')
@@ -47,15 +48,21 @@ const ApprovalAction: React.FC<ApprovalActionProps> = ({ pool }) => {
   }, [onApprove, setRequestedApproval, toastSuccess, toastError, TranslateString, earningToken])
 
   return (
-    <Button
-      isLoading={requestedApproval}
-      endIcon={requestedApproval ? <AutoRenewIcon spin color="currentColor" /> : null}
-      disabled={isFinished || requestedApproval}
-      onClick={handleApprove}
-      width="100%"
-    >
-      {TranslateString(999, 'Enable')}
-    </Button>
+    <>
+      {isLoading ? (
+        <Skeleton width="100%" height="52px" />
+      ) : (
+        <Button
+          isLoading={requestedApproval}
+          endIcon={requestedApproval ? <AutoRenewIcon spin color="currentColor" /> : null}
+          disabled={isFinished || requestedApproval}
+          onClick={handleApprove}
+          width="100%"
+        >
+          {TranslateString(999, 'Enable')}
+        </Button>
+      )}
+    </>
   )
 }
 
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index 43dd087b2cc41..b75f2f06319d9 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Text, Button, Heading, useModal } from '@pancakeswap-libs/uikit'
+import { Flex, Text, Button, Heading, useModal, Skeleton } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import { Token } from 'config/constants/types'
 import { getAddress } from 'utils/addressHelpers'
@@ -13,9 +13,16 @@ interface HarvestActionsProps {
   earningToken: Token
   sousId: number
   isBnbPool: boolean
+  isLoading?: boolean
 }
 
-const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken, sousId, isBnbPool }) => {
+const HarvestActions: React.FC<HarvestActionsProps> = ({
+  earnings,
+  earningToken,
+  sousId,
+  isBnbPool,
+  isLoading = false,
+}) => {
   const TranslateString = useI18n()
   const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
   const fullBalance = getFullDisplayBalance(earnings, earningToken.decimals)
@@ -42,10 +49,16 @@ const HarvestActions: React.FC<HarvestActionsProps> = ({ earnings, earningToken,
     <Flex flexDirection="column" mb="16px">
       <Flex justifyContent="space-between" alignItems="center">
         <Flex flexDirection="column">
-          <Heading color={hasEarnings ? 'text' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
-          <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>{`~${
-            hasEarnings ? earningsDollarValue : 0
-          } USD`}</Text>
+          {isLoading ? (
+            <Skeleton width="80px" height="48px" />
+          ) : (
+            <>
+              <Heading color={hasEarnings ? 'text' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
+              <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>{`~${
+                hasEarnings ? earningsDollarValue : 0
+              } USD`}</Text>
+            </>
+          )}
         </Flex>
         <Flex>
           <Button disabled={!hasEarnings} onClick={onPresentCollect}>
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index db809c371946e..c3b551f58378f 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -1,5 +1,15 @@
 import React from 'react'
-import { Flex, Text, Button, IconButton, AddIcon, MinusIcon, Heading, useModal } from '@pancakeswap-libs/uikit'
+import {
+  Flex,
+  Text,
+  Button,
+  IconButton,
+  AddIcon,
+  MinusIcon,
+  Heading,
+  useModal,
+  Skeleton,
+} from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import useI18n from 'hooks/useI18n'
 import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
@@ -14,6 +24,7 @@ interface StakeActionsProps {
   stakedBalance: BigNumber
   isBnbPool: boolean
   isStaked: ConstrainBoolean
+  isLoading?: boolean
 }
 
 const StakeAction: React.FC<StakeActionsProps> = ({
@@ -23,6 +34,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
   stakedBalance,
   isBnbPool,
   isStaked,
+  isLoading = false,
 }) => {
   const { stakingToken, earningToken, stakingLimit } = pool
   const TranslateString = useI18n()
@@ -50,30 +62,30 @@ const StakeAction: React.FC<StakeActionsProps> = ({
     />,
   )
 
-  return (
-    <Flex flexDirection="column">
-      {isStaked ? (
-        <Flex justifyContent="space-between" alignItems="center">
-          <Flex flexDirection="column">
-            <Heading>{formattedBalance}</Heading>
-            <Text fontSize="12px" color="textSubtle">{`~${stakingMaxDollarValue || 0} USD`}</Text>
-          </Flex>
-          <Flex>
-            <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
-              <MinusIcon color="primary" width="24px" />
-            </IconButton>
-            <IconButton variant="secondary" onClick={onPresentStake}>
-              <AddIcon color="primary" width="24px" height="24px" />
-            </IconButton>
-          </Flex>
+  const renderStakeAction = () => {
+    return isStaked ? (
+      <Flex justifyContent="space-between" alignItems="center">
+        <Flex flexDirection="column">
+          <Heading>{formattedBalance}</Heading>
+          <Text fontSize="12px" color="textSubtle">{`~${stakingMaxDollarValue || 0} USD`}</Text>
         </Flex>
-      ) : (
-        <Button onClick={stakingTokenBalance.toNumber() > 0 ? onPresentStake : onPresentTokenRequired}>
-          {TranslateString(1070, 'Stake')}
-        </Button>
-      )}
-    </Flex>
-  )
+        <Flex>
+          <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
+            <MinusIcon color="primary" width="24px" />
+          </IconButton>
+          <IconButton variant="secondary" onClick={onPresentStake}>
+            <AddIcon color="primary" width="24px" height="24px" />
+          </IconButton>
+        </Flex>
+      </Flex>
+    ) : (
+      <Button onClick={stakingTokenBalance.toNumber() > 0 ? onPresentStake : onPresentTokenRequired}>
+        {TranslateString(1070, 'Stake')}
+      </Button>
+    )
+  }
+
+  return <Flex flexDirection="column">{isLoading ? <Skeleton width="100%" height="52px" /> : renderStakeAction()}</Flex>
 }
 
 export default StakeAction
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 6abcc0ad8fe77..1cc357b2314b4 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -28,6 +28,7 @@ const CardActions: React.FC<{
   const earnings = new BigNumber(userData?.pendingReward || 0)
   const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
   const isStaked = stakedBalance.toNumber() > 0
+  const isLoading = !userData
 
   return (
     <Flex flexDirection="column">
@@ -42,7 +43,13 @@ const CardActions: React.FC<{
                 {TranslateString(330, `earned`)}
               </InlineText>
             </Box>
-            <HarvestActions earnings={earnings} earningToken={earningToken} sousId={sousId} isBnbPool={isBnbPool} />
+            <HarvestActions
+              earnings={earnings}
+              earningToken={earningToken}
+              sousId={sousId}
+              isBnbPool={isBnbPool}
+              isLoading={isLoading}
+            />
           </>
         )}
         <Box display="inline">
@@ -54,9 +61,10 @@ const CardActions: React.FC<{
           </InlineText>
         </Box>
         {needsApproval ? (
-          <ApprovalAction pool={pool} />
+          <ApprovalAction pool={pool} isLoading={isLoading} />
         ) : (
           <StakeActions
+            isLoading={isLoading}
             pool={pool}
             stakingTokenBalance={stakingTokenBalance}
             stakingTokenPrice={stakingTokenPrice}

From 7b7ec7bac9e53cac125c5618a37a23ace9a2cf9a Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 11:12:01 +0100
Subject: [PATCH 28/40] feat(syrup-pool-v2): Add bunny img

---
 public/images/3d-syrup-bunnies.png | Bin 0 -> 63227 bytes
 src/views/Pools/index.tsx          |  10 +++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 public/images/3d-syrup-bunnies.png

diff --git a/public/images/3d-syrup-bunnies.png b/public/images/3d-syrup-bunnies.png
new file mode 100644
index 0000000000000000000000000000000000000000..02a47cf1209158fefc58b7265a44a0391cbee687
GIT binary patch
literal 63227
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
UyF^G4m;e9(07*qoM6N<$f`hBHvH$=8

literal 0
HcmV?d00001

diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 35a555bcf230b..105bb65c7bdf4 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -3,7 +3,7 @@ import { Route, useRouteMatch } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
-import { Heading, Flex, Button, HelpIcon, Text } from '@pancakeswap-libs/uikit'
+import { Heading, Flex, Button, HelpIcon, Text, Image } from '@pancakeswap-libs/uikit'
 import orderBy from 'lodash/orderBy'
 import partition from 'lodash/partition'
 import useI18n from 'hooks/useI18n'
@@ -94,6 +94,14 @@ const Pools: React.FC = () => {
             ))}
           </Route>
         </FlexLayout>
+        <Image
+          mx="auto"
+          mt="12px"
+          src="/images/3d-syrup-bunnies.png"
+          alt="Pancake illustration"
+          width={192}
+          height={184.5}
+        />
       </Page>
     </>
   )

From df92291a7e5198bd28d0bd77353e4645f4b94f42 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 11:55:44 +0100
Subject: [PATCH 29/40] feat(syrup-pool-v2): Fix high price token showing 0%
 APR

---
 src/components/ApyCalculatorModal/index.tsx    |  6 ++++++
 src/utils/compoundApyHelpers.ts                | 15 +++++++++------
 src/views/Pools/components/PoolCard/AprRow.tsx | 10 +++++++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/ApyCalculatorModal/index.tsx b/src/components/ApyCalculatorModal/index.tsx
index da92cb4bf5a09..39fa9d3981b68 100644
--- a/src/components/ApyCalculatorModal/index.tsx
+++ b/src/components/ApyCalculatorModal/index.tsx
@@ -11,6 +11,7 @@ interface ApyCalculatorModalProps {
   linkLabel: string
   linkHref: string
   earningTokenSymbol?: string
+  roundingDecimals?: number
 }
 
 const Grid = styled.div`
@@ -36,6 +37,7 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
   linkLabel,
   linkHref,
   earningTokenSymbol = 'CAKE',
+  roundingDecimals = 2,
 }) => {
   const TranslateString = useI18n()
   const oneThousandDollarsWorthOfToken = 1000 / tokenPrice
@@ -44,21 +46,25 @@ const ApyCalculatorModal: React.FC<ApyCalculatorModalProps> = ({
     numberOfDays: 1,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand7D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 7,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand30D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 30,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
   const tokenEarnedPerThousand365D = tokenEarnedPerThousandDollarsCompounding({
     numberOfDays: 365,
     farmApr: apr,
     tokenPrice,
+    roundingDecimals,
   })
 
   return (
diff --git a/src/utils/compoundApyHelpers.ts b/src/utils/compoundApyHelpers.ts
index 6bf6b5890e4b8..01a013b361db4 100644
--- a/src/utils/compoundApyHelpers.ts
+++ b/src/utils/compoundApyHelpers.ts
@@ -1,6 +1,9 @@
-const roundToTwoDp = (number) => Math.round(number * 100) / 100
-
-export const tokenEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr, tokenPrice }) => {
+export const tokenEarnedPerThousandDollarsCompounding = ({
+  numberOfDays,
+  farmApr,
+  tokenPrice,
+  roundingDecimals = 2,
+}) => {
   // Everything here is worked out relative to a year, with the asset compounding daily
   const timesCompounded = 365
   // We use decimal values rather than % in the math for both APY and the number of days being calculates as a proportion of the year
@@ -12,10 +15,10 @@ export const tokenEarnedPerThousandDollarsCompounding = ({ numberOfDays, farmApr
   const finalAmount = principal * (1 + aprAsDecimal / timesCompounded) ** (timesCompounded * daysAsDecimalOfYear)
   // To get the TOKEN amount earned, deduct the amount after compounding (finalAmount) from the starting TOKEN balance (principal)
   const interestEarned = finalAmount - principal
-  return roundToTwoDp(interestEarned)
+  return parseFloat(interestEarned.toFixed(roundingDecimals))
 }
 
-export const getRoi = ({ amountEarned, amountInvested }) => {
+export const getRoi = ({ amountEarned, amountInvested, roundingDecimals = 2 }) => {
   const percentage = (amountEarned / amountInvested) * 100
-  return percentage.toFixed(2)
+  return percentage.toFixed(roundingDecimals)
 }
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index d3e490fc740be..66e404d4e007c 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -17,14 +17,17 @@ interface AprRowProps {
 const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
   const { stakingToken, earningToken, totalStaked, isFinished, tokenPerBlock } = pool
 
-  const rewardTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
+  const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
   const apr = getPoolApr(
     stakingTokenPrice,
-    rewardTokenPrice,
+    earningTokenPrice,
     getBalanceNumber(totalStaked, stakingToken.decimals),
     parseFloat(tokenPerBlock),
   )
 
+  // // special handling for tokens like tBTC or BIFI where the daily token rewards for $1000 dollars will be less than 0.001 of that token
+  const isHighValueToken = Math.round(earningTokenPrice / 1000) > 0
+
   const TranslateString = useI18n()
 
   const apyModalLink =
@@ -35,11 +38,12 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
 
   const [onPresentApyModal] = useModal(
     <ApyCalculatorModal
-      tokenPrice={rewardTokenPrice}
+      tokenPrice={earningTokenPrice}
       apr={apr}
       linkLabel={`${TranslateString(999, 'Get')} ${stakingToken.symbol}`}
       linkHref={apyModalLink || 'https://exchange.pancakeswap.finance'}
       earningTokenSymbol={earningToken.symbol}
+      roundingDecimals={isHighValueToken ? 4 : 2}
     />,
   )
 

From b5e02c93a7ef0935700880a275172afd8e451f75 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 12:02:21 +0100
Subject: [PATCH 30/40] chore(syrup-pool-v2): Cleanup white space

---
 src/views/Pools/components/PoolCard/AprRow.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 66e404d4e007c..afdd3897ce353 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -15,6 +15,7 @@ interface AprRowProps {
 }
 
 const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
+  const TranslateString = useI18n()
   const { stakingToken, earningToken, totalStaked, isFinished, tokenPerBlock } = pool
 
   const earningTokenPrice = useGetApiPrice(earningToken.address ? getAddress(earningToken.address) : '')
@@ -24,12 +25,9 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
     getBalanceNumber(totalStaked, stakingToken.decimals),
     parseFloat(tokenPerBlock),
   )
-
   // // special handling for tokens like tBTC or BIFI where the daily token rewards for $1000 dollars will be less than 0.001 of that token
   const isHighValueToken = Math.round(earningTokenPrice / 1000) > 0
 
-  const TranslateString = useI18n()
-
   const apyModalLink =
     stakingToken.address &&
     `https://exchange.pancakeswap.finance/#/swap?outputCurrency=

From 1d4806f8b2d4b09af3dd1d508081a5f8c91ff195 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 12:09:19 +0100
Subject: [PATCH 31/40] chore(syrup-pool-v2): Re-add usePersistState

---
 src/views/Pools/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 105bb65c7bdf4..20a21cf65b399 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Route, useRouteMatch } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
 import styled from 'styled-components'
@@ -7,6 +7,7 @@ import { Heading, Flex, Button, HelpIcon, Text, Image } from '@pancakeswap-libs/
 import orderBy from 'lodash/orderBy'
 import partition from 'lodash/partition'
 import useI18n from 'hooks/useI18n'
+import usePersistState from 'hooks/usePersistState'
 import { usePools, useBlock } from 'state/hooks'
 import FlexLayout from 'components/layout/Flex'
 import Page from 'components/layout/Page'
@@ -27,7 +28,7 @@ const Pools: React.FC = () => {
   const { account } = useWeb3React()
   const pools = usePools(account)
   const { currentBlock } = useBlock()
-  const [stakedOnly, setStakedOnly] = useState(false)
+  const [stakedOnly, setStakedOnly] = usePersistState(false, 'pancake_pool_staked')
 
   const [finishedPools, openPools] = useMemo(
     () => partition(pools, (pool) => pool.isFinished || currentBlock > pool.endBlock),

From 8890e77e31cc34e1355c683f95685bd491d57647 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Sat, 24 Apr 2021 12:13:07 +0100
Subject: [PATCH 32/40] chore(syrup-pool-v2): Add comments to help

---
 src/views/Pools/components/PoolCard/Modals/CollectModal.tsx | 2 ++
 src/views/Pools/components/PoolCard/Modals/StakeModal.tsx   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
index b7a60c8450452..74be441935324 100644
--- a/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
@@ -61,6 +61,7 @@ const CollectModal: React.FC<CollectModalProps> = ({
 
   const handleHarvestConfirm = async () => {
     setPendingTx(true)
+    // compounding
     if (shouldCompound) {
       try {
         await onStake(fullBalance, earningToken.decimals)
@@ -78,6 +79,7 @@ const CollectModal: React.FC<CollectModalProps> = ({
         setPendingTx(false)
       }
     } else {
+      // harvesting
       try {
         await onReward()
         toastSuccess(
diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index 15727bad3c5cc..b24218fa8ff28 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -66,6 +66,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
     setPendingTx(true)
 
     if (isRemovingStake) {
+      // unstaking
       try {
         await onUnstake(stakeAmount, stakingToken.decimals)
         toastSuccess(
@@ -83,6 +84,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
       }
     } else {
       try {
+        // staking
         await onStake(stakeAmount, stakingToken.decimals)
         toastSuccess(
           `${TranslateString(1074, 'Staked')}!`,

From 6130692405a755e7ebcc173cbb076a9c927a59bc Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Mon, 26 Apr 2021 20:48:46 +0100
Subject: [PATCH 33/40] chore(syrup-pool-v2): Remove unused components

---
 .../components/PoolCard/ConfirmButton.tsx     |  39 ------
 .../components/PoolCard/HarvestButton.tsx     | 130 ------------------
 .../components/PoolCard/Modals/StakeModal.tsx |   5 +-
 3 files changed, 2 insertions(+), 172 deletions(-)
 delete mode 100644 src/views/Pools/components/PoolCard/ConfirmButton.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/HarvestButton.tsx

diff --git a/src/views/Pools/components/PoolCard/ConfirmButton.tsx b/src/views/Pools/components/PoolCard/ConfirmButton.tsx
deleted file mode 100644
index e53414311c1c3..0000000000000
--- a/src/views/Pools/components/PoolCard/ConfirmButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { Button, ButtonProps, RefreshIcon, CheckmarkIcon } from '@pancakeswap-libs/uikit'
-
-interface ConfirmButtonProps extends ButtonProps {
-  isConfirmed?: boolean
-}
-
-const ConfirmButton: React.FC<ConfirmButtonProps> = ({
-  isLoading,
-  isConfirmed,
-  children,
-  endIcon,
-  disabled,
-  ...props
-}) => {
-  const handleRenderIcon = () => {
-    if (endIcon) {
-      return endIcon
-    }
-
-    if (isLoading) {
-      return <RefreshIcon color="white" />
-    }
-
-    if (isConfirmed) {
-      return <CheckmarkIcon color="textDisabled" width="17px" />
-    }
-
-    return null
-  }
-
-  return (
-    <Button endIcon={handleRenderIcon()} {...props} isLoading={isLoading} disabled={disabled || isConfirmed}>
-      {children}
-    </Button>
-  )
-}
-
-export default ConfirmButton
diff --git a/src/views/Pools/components/PoolCard/HarvestButton.tsx b/src/views/Pools/components/PoolCard/HarvestButton.tsx
deleted file mode 100644
index d623409af55c0..0000000000000
--- a/src/views/Pools/components/PoolCard/HarvestButton.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { useContext, useMemo } from 'react'
-import styled, { ThemeContext } from 'styled-components'
-
-import { Link } from 'react-router-dom'
-
-interface ButtonProps {
-  children?: React.ReactNode
-  disabled?: boolean
-  href?: string
-  onClick?: () => void
-  size?: 'sm' | 'md' | 'lg'
-  text?: string
-  to?: string
-  variant?: 'default' | 'secondary' | 'tertiary'
-}
-
-const Button: React.FC<ButtonProps> = ({ children, disabled, href, onClick, size, text, to }) => {
-  const { colors, spacing } = useContext(ThemeContext)
-  const buttonColor = colors.background
-
-  let boxShadow: string
-  let buttonSize: number
-  let buttonPadding: number
-  let fontSize: number
-  switch (size) {
-    case 'sm':
-      buttonPadding = spacing[3]
-      buttonSize = 36
-      fontSize = 14
-      break
-    case 'lg':
-      buttonPadding = spacing[4]
-      buttonSize = 72
-      fontSize = 16
-      break
-    case 'md':
-    default:
-      buttonPadding = spacing[4]
-      buttonSize = 56
-      fontSize = 16
-  }
-
-  const ButtonChild = useMemo(() => {
-    if (to) {
-      return <StyledLink to={to}>{text}</StyledLink>
-    }
-    if (href) {
-      return (
-        <StyledExternalLink href={href} target="__blank">
-          {text}
-        </StyledExternalLink>
-      )
-    }
-    return text
-  }, [href, text, to])
-
-  return (
-    <StyledButton
-      boxShadow={boxShadow}
-      color={buttonColor}
-      disabled={disabled}
-      fontSize={fontSize}
-      onClick={onClick}
-      padding={buttonPadding}
-      size={buttonSize}
-    >
-      {children}
-      {ButtonChild}
-    </StyledButton>
-  )
-}
-
-interface StyledButtonProps {
-  boxShadow: string
-  color: string
-  disabled?: boolean
-  fontSize: number
-  padding: number
-  size: number
-}
-
-const StyledButton = styled.button<StyledButtonProps>`
-  align-items: center;
-  background: ${(props) => (!props.disabled ? props.theme.card.background : `#ddd`)};
-  border: 0;
-  border-radius: 12px;
-  color: ${(props) => (!props.disabled ? `#32cad7` : `#acaaaf`)};
-  cursor: pointer;
-  display: flex;
-  font-size: ${(props) => props.fontSize}px;
-  font-weight: 700;
-  height: ${(props) => props.size}px;
-  justify-content: center;
-  outline: none;
-  padding-left: ${(props) => props.padding}px;
-  padding-right: ${(props) => props.padding}px;
-  pointer-events: ${(props) => (!props.disabled ? undefined : 'none')};
-  width: 100%;
-  border: 2px solid ${(props) => (!props.disabled ? `#33cbd7` : `#eee`)};
-  width: 100px;
-  height: 30px;
-  font-size: 14px;
-  padding: 0px;
-`
-
-const StyledLink = styled(Link)`
-  align-items: center;
-  color: inherit;
-  display: flex;
-  flex: 1;
-  height: 56px;
-  justify-content: center;
-  margin: 0 ${(props) => -props.theme.spacing[4]}px;
-  padding: 0 ${(props) => props.theme.spacing[4]}px;
-  text-decoration: none;
-`
-
-const StyledExternalLink = styled.a`
-  align-items: center;
-  color: inherit;
-  display: flex;
-  flex: 1;
-  height: 56px;
-  justify-content: center;
-  margin: 0 ${(props) => -props.theme.spacing[4]}px;
-  padding: 0 ${(props) => props.theme.spacing[4]}px;
-  text-decoration: none;
-`
-
-export default Button
diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index b24218fa8ff28..19254f058fbf9 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -10,7 +10,6 @@ import BigNumber from 'bignumber.js'
 import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
 import { useToast } from 'state/hooks'
 import { Pool } from 'state/types'
-import ConfirmButton from '../ConfirmButton'
 
 interface StakeModalProps {
   isBnbPool: boolean
@@ -148,14 +147,14 @@ const StakeModal: React.FC<StakeModalProps> = ({
           MAX
         </StyledButton>
       </Flex>
-      <ConfirmButton
+      <Button
         isLoading={pendingTx}
         endIcon={pendingTx ? <AutoRenewIcon spin color="currentColor" /> : null}
         onClick={handleConfirmClick}
         mt="24px"
       >
         {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}
-      </ConfirmButton>
+      </Button>
       {!isRemovingStake && (
         <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">
           {TranslateString(999, 'Get')} {stakingToken.symbol}

From 49daf7cce8cff9b53d7d2d06e5ce076bf4441f06 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 27 Apr 2021 18:44:21 +0100
Subject: [PATCH 34/40] fix(syrup-pool-v2): Fix useToast

---
 .../Pools/components/PoolCard/CardActions/ApprovalAction.tsx    | 2 +-
 src/views/Pools/components/PoolCard/Modals/CollectModal.tsx     | 2 +-
 src/views/Pools/components/PoolCard/Modals/StakeModal.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
index ecae1ec40c023..b87f00dd4917b 100644
--- a/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/ApprovalAction.tsx
@@ -3,7 +3,7 @@ import { Button, AutoRenewIcon, Skeleton } from '@pancakeswap-libs/uikit'
 import { useSousApprove } from 'hooks/useApprove'
 import useI18n from 'hooks/useI18n'
 import { useERC20 } from 'hooks/useContract'
-import { useToast } from 'state/hooks'
+import useToast from 'hooks/useToast'
 import { getAddress } from 'utils/addressHelpers'
 import { Pool } from 'state/types'
 
diff --git a/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
index 74be441935324..90da153873f85 100644
--- a/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/CollectModal.tsx
@@ -16,7 +16,7 @@ import useI18n from 'hooks/useI18n'
 import useTheme from 'hooks/useTheme'
 import { useSousHarvest } from 'hooks/useHarvest'
 import { useSousStake } from 'hooks/useStake'
-import { useToast } from 'state/hooks'
+import useToast from 'hooks/useToast'
 import { Token } from 'config/constants/types'
 
 interface CollectModalProps {
diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index 19254f058fbf9..3d6a6019aa174 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -8,7 +8,7 @@ import { useSousUnstake } from 'hooks/useUnstake'
 import useTheme from 'hooks/useTheme'
 import BigNumber from 'bignumber.js'
 import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
-import { useToast } from 'state/hooks'
+import useToast from 'hooks/useToast'
 import { Pool } from 'state/types'
 
 interface StakeModalProps {

From db1d8dd0d8f5401a7f0d241221b6f30a2bebe772 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Tue, 27 Apr 2021 19:29:31 +0100
Subject: [PATCH 35/40] feat(syrup-pool-v2): Move help to pooltabbuttons bar

---
 src/views/Pools/components/PoolTabButtons.tsx | 62 ++++++++++++++-----
 src/views/Pools/index.tsx                     | 21 +------
 2 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src/views/Pools/components/PoolTabButtons.tsx b/src/views/Pools/components/PoolTabButtons.tsx
index 45e787b50b5fc..6871f174dfa6e 100644
--- a/src/views/Pools/components/PoolTabButtons.tsx
+++ b/src/views/Pools/components/PoolTabButtons.tsx
@@ -1,29 +1,61 @@
 import React from 'react'
+import styled from 'styled-components'
 import { useRouteMatch, Link } from 'react-router-dom'
-import { ButtonMenu, ButtonMenuItem, Toggle, Text, Flex, NotificationDot } from '@pancakeswap-libs/uikit'
+import {
+  ButtonMenu,
+  ButtonMenuItem,
+  Button,
+  HelpIcon,
+  Toggle,
+  Text,
+  Flex,
+  NotificationDot,
+} from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 
+const ButtonText = styled(Text)`
+  display: none;
+  ${({ theme }) => theme.mediaQueries.lg} {
+    display: block;
+  }
+`
+
 const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools }) => {
   const { url, isExact } = useRouteMatch()
   const TranslateString = useI18n()
 
   return (
     <Flex alignItems="center" justifyContent="center" mb="32px">
-      <ButtonMenu activeIndex={isExact ? 0 : 1} scale="sm" variant="subtle">
-        <ButtonMenuItem as={Link} to={`${url}`}>
-          {TranslateString(1198, 'Live')}
-        </ButtonMenuItem>
-        <NotificationDot show={hasStakeInFinishedPools}>
-          <ButtonMenuItem as={Link} to={`${url}/history`}>
-            {TranslateString(388, 'Finished')}
+      <Flex alignItems="center">
+        <ButtonMenu activeIndex={isExact ? 0 : 1} scale="sm" variant="subtle">
+          <ButtonMenuItem as={Link} to={`${url}`}>
+            {TranslateString(1198, 'Live')}
           </ButtonMenuItem>
-        </NotificationDot>
-      </ButtonMenu>
-      <Flex ml="24px" justifyContent="center" alignItems="center">
-        <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} />
-        <Text ml="8px" color={`${stakedOnly ? 'body' : 'textDisabled'}`}>
-          {TranslateString(999, 'Staked only')}
-        </Text>
+          <NotificationDot show={hasStakeInFinishedPools}>
+            <ButtonMenuItem as={Link} to={`${url}/history`}>
+              {TranslateString(388, 'Finished')}
+            </ButtonMenuItem>
+          </NotificationDot>
+        </ButtonMenu>
+        <Flex ml="24px" justifyContent="center" alignItems="center">
+          <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} />
+          <Text ml="8px" color={`${stakedOnly ? 'body' : 'textDisabled'}`}>
+            {TranslateString(999, 'Staked only')}
+          </Text>
+        </Flex>
+      </Flex>
+      <Flex ml="24px" alignItems="center" justifyContent="flex-end">
+        <Button
+          px={['14px', null, null, null, '20px']}
+          variant="subtle"
+          as="a"
+          href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool"
+        >
+          <ButtonText color="backgroundAlt" bold fontSize="16px">
+            {TranslateString(999, 'Help')}
+          </ButtonText>
+          <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
+        </Button>
       </Flex>
     </Flex>
   )
diff --git a/src/views/Pools/index.tsx b/src/views/Pools/index.tsx
index 20a21cf65b399..ded9d5a782fb6 100644
--- a/src/views/Pools/index.tsx
+++ b/src/views/Pools/index.tsx
@@ -1,9 +1,8 @@
 import React, { useMemo } from 'react'
 import { Route, useRouteMatch } from 'react-router-dom'
 import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
 import { useWeb3React } from '@web3-react/core'
-import { Heading, Flex, Button, HelpIcon, Text, Image } from '@pancakeswap-libs/uikit'
+import { Heading, Flex, Image } from '@pancakeswap-libs/uikit'
 import orderBy from 'lodash/orderBy'
 import partition from 'lodash/partition'
 import useI18n from 'hooks/useI18n'
@@ -15,13 +14,6 @@ import PageHeader from 'components/PageHeader'
 import PoolCard from './components/PoolCard'
 import PoolTabButtons from './components/PoolTabButtons'
 
-const ButtonText = styled(Text)`
-  display: none;
-  ${({ theme }) => theme.mediaQueries.lg} {
-    display: block;
-  }
-`
-
 const Pools: React.FC = () => {
   const { path } = useRouteMatch()
   const TranslateString = useI18n()
@@ -58,17 +50,6 @@ const Pools: React.FC = () => {
               {TranslateString(999, 'High APR, low risk.')}
             </Heading>
           </Flex>
-          <Button
-            px={['14px', null, null, null, '24px']}
-            variant="subtle"
-            as="a"
-            href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool"
-          >
-            <ButtonText color="backgroundAlt" bold fontSize="16px">
-              {TranslateString(999, 'Help')}
-            </ButtonText>
-            <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
-          </Button>
         </Flex>
       </PageHeader>
       <Page>

From 9fe4356f6d5bd444a245940d5644422a44038b46 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 28 Apr 2021 08:20:50 +0100
Subject: [PATCH 36/40] feat(syrup-pool-v2): Disabled button when stakeAmount
 is zero or unset

---
 src/views/Pools/components/PoolCard/Modals/StakeModal.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index 3d6a6019aa174..e37c80a818925 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -6,9 +6,9 @@ import { BASE_EXCHANGE_URL } from 'config'
 import { useSousStake } from 'hooks/useStake'
 import { useSousUnstake } from 'hooks/useUnstake'
 import useTheme from 'hooks/useTheme'
+import useToast from 'hooks/useToast'
 import BigNumber from 'bignumber.js'
 import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
-import useToast from 'hooks/useToast'
 import { Pool } from 'state/types'
 
 interface StakeModalProps {
@@ -151,6 +151,7 @@ const StakeModal: React.FC<StakeModalProps> = ({
         isLoading={pendingTx}
         endIcon={pendingTx ? <AutoRenewIcon spin color="currentColor" /> : null}
         onClick={handleConfirmClick}
+        disabled={!stakeAmount || parseFloat(stakeAmount) === 0}
         mt="24px"
       >
         {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}

From dfa6bc5aa092e1b9cbd1775d013df125568f660a Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 28 Apr 2021 18:22:25 +0100
Subject: [PATCH 37/40] fix(pool-cards-v2): Amendments based on Doge's CR
 comments

---
 src/config/index.ts                           |  1 +
 .../Pools/components/PoolCard/AprRow.tsx      |  5 ++-
 .../PoolCard/CardActions/HarvestActions.tsx   |  6 +--
 .../PoolCard/CardActions/StakeActions.tsx     |  6 +--
 .../components/PoolCard/CardActions/index.tsx | 15 +++++--
 .../PoolCard/CardFooter/ExpandedFooter.tsx    | 13 ++-----
 .../PoolCard/Modals/NotEnoughTokensModal.tsx  | 17 +++++---
 .../PoolCard/Modals/PercentageButton.tsx      | 21 ++++++++++
 .../components/PoolCard/Modals/StakeModal.tsx | 39 ++++++++-----------
 .../components/PoolCard/PoolFinishedSash.tsx  | 27 -------------
 .../components/PoolCard/StyledCardHeader.tsx  | 30 ++++++--------
 src/views/Pools/components/PoolCard/index.tsx |  8 +++-
 src/views/Pools/components/PoolTabButtons.tsx | 26 +++++++------
 src/views/Pools/svgs/SashVector.tsx           | 12 ------
 14 files changed, 106 insertions(+), 120 deletions(-)
 create mode 100644 src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
 delete mode 100644 src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
 delete mode 100644 src/views/Pools/svgs/SashVector.tsx

diff --git a/src/config/index.ts b/src/config/index.ts
index 3b22ae895c4c2..abf088c4cca05 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -21,6 +21,7 @@ export const BASE_URL = 'https://pancakeswap.finance'
 export const BASE_EXCHANGE_URL = 'https://exchange.pancakeswap.finance'
 export const BASE_ADD_LIQUIDITY_URL = `${BASE_EXCHANGE_URL}/#/add`
 export const BASE_LIQUIDITY_POOL_URL = `${BASE_EXCHANGE_URL}/#/pool`
+export const BASE_BSC_SCAN_URL = 'https://bscscan.com'
 export const LOTTERY_MAX_NUMBER_OF_TICKETS = 50
 export const LOTTERY_TICKET_PRICE = 1
 export const DEFAULT_TOKEN_DECIMAL = new BigNumber(10).pow(18)
diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index afdd3897ce353..1fd9bf5f919c3 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -8,6 +8,7 @@ import { useGetApiPrice } from 'state/hooks'
 import Balance from 'components/Balance'
 import ApyCalculatorModal from 'components/ApyCalculatorModal'
 import { Pool } from 'state/types'
+import { BASE_EXCHANGE_URL } from 'config'
 
 interface AprRowProps {
   pool: Pool
@@ -30,7 +31,7 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
 
   const apyModalLink =
     stakingToken.address &&
-    `https://exchange.pancakeswap.finance/#/swap?outputCurrency=
+    `${BASE_EXCHANGE_URL}/#/swap?outputCurrency=
  ${stakingToken.address[process.env.REACT_APP_CHAIN_ID]}
    `
 
@@ -39,7 +40,7 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
       tokenPrice={earningTokenPrice}
       apr={apr}
       linkLabel={`${TranslateString(999, 'Get')} ${stakingToken.symbol}`}
-      linkHref={apyModalLink || 'https://exchange.pancakeswap.finance'}
+      linkHref={apyModalLink || BASE_EXCHANGE_URL}
       earningTokenSymbol={earningToken.symbol}
       roundingDecimals={isHighValueToken ? 4 : 2}
     />,
diff --git a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
index b75f2f06319d9..2779674f4e3f1 100644
--- a/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/HarvestActions.tsx
@@ -54,9 +54,9 @@ const HarvestActions: React.FC<HarvestActionsProps> = ({
           ) : (
             <>
               <Heading color={hasEarnings ? 'text' : 'textDisabled'}>{hasEarnings ? formattedBalance : 0}</Heading>
-              <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>{`~${
-                hasEarnings ? earningsDollarValue : 0
-              } USD`}</Text>
+              <Text fontSize="12px" color={hasEarnings ? 'textSubtle' : 'textDisabled'}>
+                {`~${hasEarnings ? earningsDollarValue : 0} USD`}
+              </Text>
             </>
           )}
         </Flex>
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index c3b551f58378f..86e1b5afc94e6 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -12,7 +12,7 @@ import {
 } from '@pancakeswap-libs/uikit'
 import BigNumber from 'bignumber.js'
 import useI18n from 'hooks/useI18n'
-import { getBalanceNumber, formatNumber } from 'utils/formatBalance'
+import { getBalanceNumber, formatNumber, getDecimalAmount } from 'utils/formatBalance'
 import { Pool } from 'state/types'
 import NotEnoughTokensModal from '../Modals/NotEnoughTokensModal'
 import StakeModal from '../Modals/StakeModal'
@@ -38,7 +38,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
 }) => {
   const { stakingToken, earningToken, stakingLimit } = pool
   const TranslateString = useI18n()
-  const convertedLimit = new BigNumber(stakingLimit).multipliedBy(new BigNumber(10).pow(earningToken.decimals))
+  const convertedLimit = getDecimalAmount(new BigNumber(stakingLimit), earningToken.decimals)
   const stakingMax =
     stakingLimit && stakingTokenBalance.isGreaterThan(convertedLimit) ? convertedLimit : stakingTokenBalance
   const formattedBalance = formatNumber(getBalanceNumber(stakedBalance, stakingToken.decimals), 3, 3)
@@ -79,7 +79,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
         </Flex>
       </Flex>
     ) : (
-      <Button onClick={stakingTokenBalance.toNumber() > 0 ? onPresentStake : onPresentTokenRequired}>
+      <Button onClick={stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired}>
         {TranslateString(1070, 'Stake')}
       </Button>
     )
diff --git a/src/views/Pools/components/PoolCard/CardActions/index.tsx b/src/views/Pools/components/PoolCard/CardActions/index.tsx
index 1cc357b2314b4..5e4c6cc1989ce 100644
--- a/src/views/Pools/components/PoolCard/CardActions/index.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/index.tsx
@@ -13,12 +13,19 @@ const InlineText = styled(Text)`
   display: inline;
 `
 
-const CardActions: React.FC<{
+interface CardActionsProps {
   pool: Pool
   stakedBalance: BigNumber
   accountHasStakedBalance: boolean
   stakingTokenPrice: number
-}> = ({ pool, stakedBalance, accountHasStakedBalance, stakingTokenPrice }) => {
+}
+
+const CardActions: React.FC<CardActionsProps> = ({
+  pool,
+  stakedBalance,
+  accountHasStakedBalance,
+  stakingTokenPrice,
+}) => {
   const { sousId, stakingToken, earningToken, harvest, poolCategory, userData } = pool
   // Pools using native BNB behave differently than pools using a token
   const isBnbPool = poolCategory === PoolCategory.BINANCE
@@ -26,8 +33,8 @@ const CardActions: React.FC<{
   const allowance = new BigNumber(userData?.allowance || 0)
   const stakingTokenBalance = new BigNumber(userData?.stakingTokenBalance || 0)
   const earnings = new BigNumber(userData?.pendingReward || 0)
-  const needsApproval = !accountHasStakedBalance && !allowance.toNumber() && !isBnbPool
-  const isStaked = stakedBalance.toNumber() > 0
+  const needsApproval = !accountHasStakedBalance && !allowance.gt(0) && !isBnbPool
+  const isStaked = stakedBalance.gt(0)
   const isLoading = !userData
 
   return (
diff --git a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
index 8c8f60e69ff56..3cfbb31ba681b 100644
--- a/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
+++ b/src/views/Pools/components/PoolCard/CardFooter/ExpandedFooter.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { getBalanceNumber } from 'utils/formatBalance'
 import useI18n from 'hooks/useI18n'
 import { Flex, MetamaskIcon, Text, LinkExternal, TimerIcon, Skeleton } from '@pancakeswap-libs/uikit'
-import { BASE_URL } from 'config'
+import { BASE_BSC_SCAN_URL, BASE_URL } from 'config'
 import { useBlock } from 'state/hooks'
 import { Pool } from 'state/types'
 import { getAddress } from 'utils/addressHelpers'
@@ -28,7 +28,7 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({ pool, account }) => {
   const { stakingToken, earningToken, totalStaked, startBlock, endBlock, isFinished, contractAddress } = pool
 
   const tokenAddress = earningToken.address ? getAddress(earningToken.address) : ''
-  const poolContractAddress = contractAddress[process.env.REACT_APP_CHAIN_ID]
+  const poolContractAddress = getAddress(contractAddress)
   const imageSrc = `${BASE_URL}/images/tokens/${earningToken.symbol.toLowerCase()}.png`
   const isMetaMaskInScope = !!(window as WindowChain).ethereum?.isMetaMask
 
@@ -76,18 +76,13 @@ const ExpandedFooter: React.FC<ExpandedFooterProps> = ({ pool, account }) => {
         </Flex>
       )}
       <Flex mb="2px" justifyContent="flex-end">
-        <LinkExternal bold={false} fontSize="14px" href={earningToken.projectLink} target="_blank">
+        <LinkExternal bold={false} fontSize="14px" href={earningToken.projectLink}>
           {TranslateString(412, 'View Project Site')}
         </LinkExternal>
       </Flex>
       {poolContractAddress && (
         <Flex mb="2px" justifyContent="flex-end">
-          <LinkExternal
-            bold={false}
-            fontSize="14px"
-            href={`https://bscscan.com/address/${poolContractAddress}`}
-            target="_blank"
-          >
+          <LinkExternal bold={false} fontSize="14px" href={`${BASE_BSC_SCAN_URL}/address/${poolContractAddress}`}>
             {TranslateString(412, 'View Contract')}
           </LinkExternal>
         </Flex>
diff --git a/src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx b/src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx
index 59a0d462c6331..8a3533696e690 100644
--- a/src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/NotEnoughTokensModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import useI18n from 'hooks/useI18n'
-import { Modal, Text, Button, OpenNewIcon } from '@pancakeswap-libs/uikit'
+import styled from 'styled-components'
+import { Modal, Text, Button, OpenNewIcon, Link } from '@pancakeswap-libs/uikit'
 import { BASE_EXCHANGE_URL } from 'config'
 import useTheme from 'hooks/useTheme'
 
@@ -9,6 +10,10 @@ interface NotEnoughTokensModalProps {
   onDismiss?: () => void
 }
 
+const StyledLink = styled(Link)`
+  width: 100%;
+`
+
 const NotEnoughTokensModal: React.FC<NotEnoughTokensModalProps> = ({ tokenSymbol, onDismiss }) => {
   const TranslateString = useI18n()
   const { theme } = useTheme()
@@ -29,10 +34,12 @@ const NotEnoughTokensModal: React.FC<NotEnoughTokensModalProps> = ({ tokenSymbol
       <Button mt="24px" as="a" external href={BASE_EXCHANGE_URL}>
         {TranslateString(999, 'Buy')} {tokenSymbol}
       </Button>
-      <Button variant="secondary" mt="8px" href="https://yieldwatch.net" as="a" external>
-        {TranslateString(999, 'Locate Assets')}
-        <OpenNewIcon color="primary" ml="4px" />
-      </Button>
+      <StyledLink href="https://yieldwatch.net" external>
+        <Button variant="secondary" mt="8px" width="100%">
+          {TranslateString(999, 'Locate Assets')}
+          <OpenNewIcon color="primary" ml="4px" />
+        </Button>
+      </StyledLink>
       <Button variant="text" onClick={onDismiss}>
         {TranslateString(999, 'Close window')}
       </Button>
diff --git a/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx b/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
new file mode 100644
index 0000000000000..9cb57b2ef7cad
--- /dev/null
+++ b/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Button } from '@pancakeswap-libs/uikit'
+
+interface PercentageButtonProps {
+  onClick?: () => void
+}
+
+const StyledButton = styled(Button)`
+  flex-grow: 1;
+`
+
+const PercentageButton: React.FC<PercentageButtonProps> = ({ children, onClick }) => {
+  return (
+    <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={onClick}>
+      {children}
+    </StyledButton>
+  )
+}
+
+export default PercentageButton
diff --git a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
index e37c80a818925..2dfb3d3ecfac1 100644
--- a/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/StakeModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import styled from 'styled-components'
-import { Modal, Text, Flex, Image, Button, Slider, BalanceInput, AutoRenewIcon } from '@pancakeswap-libs/uikit'
+import { Modal, Text, Flex, Image, Button, Slider, BalanceInput, AutoRenewIcon, Link } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 import { BASE_EXCHANGE_URL } from 'config'
 import { useSousStake } from 'hooks/useStake'
@@ -8,8 +8,9 @@ import { useSousUnstake } from 'hooks/useUnstake'
 import useTheme from 'hooks/useTheme'
 import useToast from 'hooks/useToast'
 import BigNumber from 'bignumber.js'
-import { getFullDisplayBalance, formatNumber } from 'utils/formatBalance'
+import { getFullDisplayBalance, formatNumber, getDecimalAmount } from 'utils/formatBalance'
 import { Pool } from 'state/types'
+import PercentageButton from './PercentageButton'
 
 interface StakeModalProps {
   isBnbPool: boolean
@@ -20,8 +21,8 @@ interface StakeModalProps {
   onDismiss?: () => void
 }
 
-const StyledButton = styled(Button)`
-  flex-grow: 1;
+const StyledLink = styled(Link)`
+  width: 100%;
 `
 
 const StakeModal: React.FC<StakeModalProps> = ({
@@ -44,14 +45,14 @@ const StakeModal: React.FC<StakeModalProps> = ({
   const [stakeAmount, setStakeAmount] = useState('')
   const [percent, setPercent] = useState(0)
 
-  const usdValueStaked = stakeAmount && formatNumber(parseFloat(stakeAmount) * stakingTokenPrice)
+  const usdValueStaked = stakeAmount && formatNumber(new BigNumber(stakeAmount).times(stakingTokenPrice).toNumber())
 
   const handleStakeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value ? event.target.value : '0'
-    const convertedInput = new BigNumber(inputValue).multipliedBy(new BigNumber(10).pow(stakingToken.decimals))
+    const convertedInput = getDecimalAmount(new BigNumber(inputValue), stakingToken.decimals)
     const percentage = Math.floor(convertedInput.dividedBy(stakingMax).multipliedBy(100).toNumber())
     setStakeAmount(inputValue)
-    setPercent(percentage > 100 ? 100 : percentage)
+    setPercent(Math.min(percentage, 100))
   }
 
   const handleChangePercent = (sliderPercent: number) => {
@@ -134,18 +135,10 @@ const StakeModal: React.FC<StakeModalProps> = ({
         step={1}
       />
       <Flex alignItems="center" justifyContent="space-between" mt="8px">
-        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(25)}>
-          25%
-        </StyledButton>
-        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(50)}>
-          50%
-        </StyledButton>
-        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(75)}>
-          75%
-        </StyledButton>
-        <StyledButton scale="xs" mx="2px" p="4px 16px" variant="tertiary" onClick={() => handleChangePercent(100)}>
-          MAX
-        </StyledButton>
+        <PercentageButton onClick={() => handleChangePercent(25)}>25%</PercentageButton>
+        <PercentageButton onClick={() => handleChangePercent(50)}>50%</PercentageButton>
+        <PercentageButton onClick={() => handleChangePercent(75)}>75%</PercentageButton>
+        <PercentageButton onClick={() => handleChangePercent(100)}>MAX</PercentageButton>
       </Flex>
       <Button
         isLoading={pendingTx}
@@ -157,9 +150,11 @@ const StakeModal: React.FC<StakeModalProps> = ({
         {pendingTx ? TranslateString(802, 'Confirming') : TranslateString(464, 'Confirm')}
       </Button>
       {!isRemovingStake && (
-        <Button mt="8px" as="a" external href={BASE_EXCHANGE_URL} variant="secondary">
-          {TranslateString(999, 'Get')} {stakingToken.symbol}
-        </Button>
+        <StyledLink external href={BASE_EXCHANGE_URL}>
+          <Button width="100%" mt="8px" variant="secondary">
+            {TranslateString(999, 'Get')} {stakingToken.symbol}
+          </Button>
+        </StyledLink>
       )}
     </Modal>
   )
diff --git a/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx b/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
deleted file mode 100644
index 90cfcda424bd1..0000000000000
--- a/src/views/Pools/components/PoolCard/PoolFinishedSash.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { Text, Box } from '@pancakeswap-libs/uikit'
-import styled from 'styled-components'
-import useI18n from 'hooks/useI18n'
-import SashVector from '../../svgs/SashVector'
-
-const StyledText = styled(Text)`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: rotate(45deg) translate(-50%, -40%);
-`
-
-const PoolFinishedSash = () => {
-  const TranslateString = useI18n()
-
-  return (
-    <Box position="relative">
-      <StyledText color="backgroundAlt" fontSize="16px" bold>
-        {TranslateString(388, 'Finished')}
-      </StyledText>
-      <SashVector height="112px" width="112px" />
-    </Box>
-  )
-}
-
-export default PoolFinishedSash
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index eb0e712efc512..bdc745086f4dd 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import { CardHeader, Heading, Text, Flex, Image, Box } from '@pancakeswap-libs/uikit'
+import { CardHeader, Heading, Text, Flex, Image } from '@pancakeswap-libs/uikit'
 import styled from 'styled-components'
-import PoolFinishedSash from './PoolFinishedSash'
 
 const Wrapper = styled(CardHeader)<{ isFinished?: boolean; activeBackground?: string }>`
   background: ${({ isFinished, activeBackground, theme }) =>
@@ -18,24 +17,17 @@ const StyledCardHeader: React.FC<{
   const activeBackground = isPromoted ? 'bubblegum' : 'cardHeader'
 
   return (
-    <>
-      <Wrapper isFinished={isFinished} activeBackground={activeBackground}>
-        <Flex alignItems="center" justifyContent="space-between">
-          <Flex flexDirection="column">
-            <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
-              Earn {earningTokenSymbol}
-            </Heading>
-            <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
-          </Flex>
-          <Image src={`/images/pools/${poolImageSrc}`} alt={earningTokenSymbol} width={64} height={64} />
+    <Wrapper isFinished={isFinished} activeBackground={activeBackground}>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Flex flexDirection="column">
+          <Heading color={isFinished ? 'textDisabled' : 'body'} size="lg">
+            Earn {earningTokenSymbol}
+          </Heading>
+          <Text color={isFinished ? 'textDisabled' : 'textSubtle'}>Stake {stakingTokenSymbol}</Text>
         </Flex>
-      </Wrapper>
-      {isFinished && (
-        <Box position="absolute" top={0} right={0}>
-          <PoolFinishedSash />
-        </Box>
-      )}
-    </>
+        <Image src={`/images/pools/${poolImageSrc}`} alt={earningTokenSymbol} width={64} height={64} />
+      </Flex>
+    </Wrapper>
   )
 }
 
diff --git a/src/views/Pools/components/PoolCard/index.tsx b/src/views/Pools/components/PoolCard/index.tsx
index 438e570e942e6..2a8d2a08fb336 100644
--- a/src/views/Pools/components/PoolCard/index.tsx
+++ b/src/views/Pools/components/PoolCard/index.tsx
@@ -1,6 +1,6 @@
 import BigNumber from 'bignumber.js'
 import React from 'react'
-import { CardBody, Flex, Text } from '@pancakeswap-libs/uikit'
+import { CardBody, Flex, Text, CardRibbon } from '@pancakeswap-libs/uikit'
 import UnlockButton from 'components/UnlockButton'
 import useI18n from 'hooks/useI18n'
 import { getAddress } from 'utils/addressHelpers'
@@ -20,7 +20,11 @@ const PoolCard: React.FC<{ pool: Pool; account: string }> = ({ pool, account })
   const stakingTokenPrice = useGetApiPrice(stakingToken.address ? getAddress(stakingToken.address) : '')
 
   return (
-    <StyledCard isStaking={!isFinished && accountHasStakedBalance} isFinished={isFinished && sousId !== 0}>
+    <StyledCard
+      isStaking={!isFinished && accountHasStakedBalance}
+      isFinished={isFinished && sousId !== 0}
+      ribbon={isFinished && <CardRibbon variantColor="textDisabled" text={`${TranslateString(388, 'Finished')}`} />}
+    >
       <StyledCardHeader
         earningTokenSymbol={earningToken.symbol}
         stakingTokenSymbol={stakingToken.symbol}
diff --git a/src/views/Pools/components/PoolTabButtons.tsx b/src/views/Pools/components/PoolTabButtons.tsx
index 6871f174dfa6e..773becf7a0c84 100644
--- a/src/views/Pools/components/PoolTabButtons.tsx
+++ b/src/views/Pools/components/PoolTabButtons.tsx
@@ -10,6 +10,7 @@ import {
   Text,
   Flex,
   NotificationDot,
+  Link as UiKitLink,
 } from '@pancakeswap-libs/uikit'
 import useI18n from 'hooks/useI18n'
 
@@ -20,6 +21,10 @@ const ButtonText = styled(Text)`
   }
 `
 
+const StyledLink = styled(UiKitLink)`
+  width: 100%;
+`
+
 const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools }) => {
   const { url, isExact } = useRouteMatch()
   const TranslateString = useI18n()
@@ -38,24 +43,21 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools })
           </NotificationDot>
         </ButtonMenu>
         <Flex ml="24px" justifyContent="center" alignItems="center">
-          <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly(!stakedOnly)} />
+          <Toggle scale="sm" checked={stakedOnly} onChange={(prev) => setStakedOnly(!prev)} />
           <Text ml="8px" color={`${stakedOnly ? 'body' : 'textDisabled'}`}>
             {TranslateString(999, 'Staked only')}
           </Text>
         </Flex>
       </Flex>
       <Flex ml="24px" alignItems="center" justifyContent="flex-end">
-        <Button
-          px={['14px', null, null, null, '20px']}
-          variant="subtle"
-          as="a"
-          href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool"
-        >
-          <ButtonText color="backgroundAlt" bold fontSize="16px">
-            {TranslateString(999, 'Help')}
-          </ButtonText>
-          <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
-        </Button>
+        <StyledLink external href="https://docs.pancakeswap.finance/syrup-pools/syrup-pool">
+          <Button px={['14px', null, null, null, '20px']} variant="subtle">
+            <ButtonText color="backgroundAlt" bold fontSize="16px">
+              {TranslateString(999, 'Help')}
+            </ButtonText>
+            <HelpIcon color="backgroundAlt" ml={[null, null, null, 0, '6px']} />
+          </Button>
+        </StyledLink>
       </Flex>
     </Flex>
   )
diff --git a/src/views/Pools/svgs/SashVector.tsx b/src/views/Pools/svgs/SashVector.tsx
deleted file mode 100644
index 77e44d46f8c29..0000000000000
--- a/src/views/Pools/svgs/SashVector.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { Svg, SvgProps } from '@pancakeswap-libs/uikit'
-
-const SashVector: React.FC<SvgProps> = (props) => {
-  return (
-    <Svg viewBox="0 0 104 96" {...props}>
-      <path d="M45 -8.00098H0L112 103.999V58.999L45 -8.00098Z" fill="#BDC2C4" />
-    </Svg>
-  )
-}
-
-export default SashVector

From 0097dccee066429ce3439d61b3d196a0660b826b Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Wed, 28 Apr 2021 18:30:32 +0100
Subject: [PATCH 38/40] fix(pool-cards-v2): Proper finished handling on staking
 actions

---
 .../Pools/components/PoolCard/CardActions/StakeActions.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index 86e1b5afc94e6..fd8ae8a694059 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -36,7 +36,7 @@ const StakeAction: React.FC<StakeActionsProps> = ({
   isStaked,
   isLoading = false,
 }) => {
-  const { stakingToken, earningToken, stakingLimit } = pool
+  const { stakingToken, earningToken, stakingLimit, isFinished } = pool
   const TranslateString = useI18n()
   const convertedLimit = getDecimalAmount(new BigNumber(stakingLimit), earningToken.decimals)
   const stakingMax =
@@ -73,13 +73,13 @@ const StakeAction: React.FC<StakeActionsProps> = ({
           <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
             <MinusIcon color="primary" width="24px" />
           </IconButton>
-          <IconButton variant="secondary" onClick={onPresentStake}>
+          <IconButton variant="secondary" onClick={onPresentStake} disabled={isFinished}>
             <AddIcon color="primary" width="24px" height="24px" />
           </IconButton>
         </Flex>
       </Flex>
     ) : (
-      <Button onClick={stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired}>
+      <Button disabled={isFinished} onClick={stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired}>
         {TranslateString(1070, 'Stake')}
       </Button>
     )

From 91f9de51948c00e60e72c7182336ab47fa3d96d0 Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 29 Apr 2021 08:22:24 +0100
Subject: [PATCH 39/40] fix(pool-cards-v2): Follow up CR comments

---
 src/views/Pools/components/PoolCard/AprRow.tsx              | 4 +---
 .../Pools/components/PoolCard/CardActions/StakeActions.tsx  | 6 +++++-
 .../Pools/components/PoolCard/Modals/PercentageButton.tsx   | 2 +-
 src/views/Pools/components/PoolCard/StyledCardHeader.tsx    | 2 +-
 src/views/Pools/components/PoolTabButtons.tsx               | 2 +-
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/views/Pools/components/PoolCard/AprRow.tsx b/src/views/Pools/components/PoolCard/AprRow.tsx
index 1fd9bf5f919c3..dfa8b8c61f8f5 100644
--- a/src/views/Pools/components/PoolCard/AprRow.tsx
+++ b/src/views/Pools/components/PoolCard/AprRow.tsx
@@ -31,9 +31,7 @@ const AprRow: React.FC<AprRowProps> = ({ pool, stakingTokenPrice }) => {
 
   const apyModalLink =
     stakingToken.address &&
-    `${BASE_EXCHANGE_URL}/#/swap?outputCurrency=
- ${stakingToken.address[process.env.REACT_APP_CHAIN_ID]}
-   `
+    `${BASE_EXCHANGE_URL}/#/swap?outputCurrency=${stakingToken.address[process.env.REACT_APP_CHAIN_ID]}`
 
   const [onPresentApyModal] = useModal(
     <ApyCalculatorModal
diff --git a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
index fd8ae8a694059..683f5f725a134 100644
--- a/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
+++ b/src/views/Pools/components/PoolCard/CardActions/StakeActions.tsx
@@ -73,7 +73,11 @@ const StakeAction: React.FC<StakeActionsProps> = ({
           <IconButton variant="secondary" onClick={onPresentUnstake} mr="6px">
             <MinusIcon color="primary" width="24px" />
           </IconButton>
-          <IconButton variant="secondary" onClick={onPresentStake} disabled={isFinished}>
+          <IconButton
+            variant="secondary"
+            onClick={stakingTokenBalance.gt(0) ? onPresentStake : onPresentTokenRequired}
+            disabled={isFinished}
+          >
             <AddIcon color="primary" width="24px" height="24px" />
           </IconButton>
         </Flex>
diff --git a/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx b/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
index 9cb57b2ef7cad..7178dbccbe40a 100644
--- a/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
+++ b/src/views/Pools/components/PoolCard/Modals/PercentageButton.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Button } from '@pancakeswap-libs/uikit'
 
 interface PercentageButtonProps {
-  onClick?: () => void
+  onClick: () => void
 }
 
 const StyledButton = styled(Button)`
diff --git a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
index bdc745086f4dd..de44dac784449 100644
--- a/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
+++ b/src/views/Pools/components/PoolCard/StyledCardHeader.tsx
@@ -13,7 +13,7 @@ const StyledCardHeader: React.FC<{
   isFinished?: boolean
 }> = ({ earningTokenSymbol, stakingTokenSymbol, isFinished = false }) => {
   const poolImageSrc = `${earningTokenSymbol}-${stakingTokenSymbol}.svg`.toLocaleLowerCase()
-  const isPromoted = earningTokenSymbol === 'CAKE'
+  const isPromoted = earningTokenSymbol === 'CAKE' && stakingTokenSymbol === 'CAKE'
   const activeBackground = isPromoted ? 'bubblegum' : 'cardHeader'
 
   return (
diff --git a/src/views/Pools/components/PoolTabButtons.tsx b/src/views/Pools/components/PoolTabButtons.tsx
index 773becf7a0c84..6e4d5e0a4edb5 100644
--- a/src/views/Pools/components/PoolTabButtons.tsx
+++ b/src/views/Pools/components/PoolTabButtons.tsx
@@ -43,7 +43,7 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools })
           </NotificationDot>
         </ButtonMenu>
         <Flex ml="24px" justifyContent="center" alignItems="center">
-          <Toggle scale="sm" checked={stakedOnly} onChange={(prev) => setStakedOnly(!prev)} />
+          <Toggle scale="sm" checked={stakedOnly} onChange={() => setStakedOnly((prev) => !prev)} />
           <Text ml="8px" color={`${stakedOnly ? 'body' : 'textDisabled'}`}>
             {TranslateString(999, 'Staked only')}
           </Text>

From 7cc8518401d4951021d65f8a00cf05c6a62f849b Mon Sep 17 00:00:00 2001
From: ChefHutch <chef.hutch.pcs@protonmail.com>
Date: Thu, 29 Apr 2021 09:58:17 +0100
Subject: [PATCH 40/40] feat(syrup-pool-v2): Add new uikit version

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 59c16e9cb8226..3e2acdafd46e7 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@binance-chain/bsc-connector": "^1.0.0",
     "@crowdin/crowdin-api-client": "^1.10.4",
     "@ethersproject/abi": "^5.0.7",
-    "@pancakeswap-libs/uikit": "^0.29.0",
+    "@pancakeswap-libs/uikit": "^0.29.1",
     "@reduxjs/toolkit": "^1.5.0",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
diff --git a/yarn.lock b/yarn.lock
index ee8eed322cf30..ee4bcbf095b4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2017,10 +2017,10 @@
     eslint-plugin-react "^7.21.5"
     eslint-plugin-react-hooks "^4.0.0"
 
-"@pancakeswap-libs/uikit@^0.29.0":
-  version "0.29.0"
-  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.0.tgz#b9e533081b16d19ad958f9d52df6289de2fdc1bf"
-  integrity sha512-VWSnXO4UzY2IPYa9pZFJbjoP4TDQxIfHFqvRqhse5cd2neFODD4obNJGqu1gqR8Tnuu/AEjISSzEyW7GFoBHuQ==
+"@pancakeswap-libs/uikit@^0.29.1":
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/uikit/-/uikit-0.29.1.tgz#0b96d3456df39d9727d4201547c8e1bae47c3cf3"
+  integrity sha512-pQvBK+UXfiAWmpLKPIPcu9ISF5PrYLwJZndNKbjyW9+HoO5e9szhjewzTKFlfmR1G5imhZvrd9ebwiJEgZyZ2w==
   dependencies:
     "@popperjs/core" "^2.9.2"
     "@types/lodash" "^4.14.168"