feat: highlight DCA link on navbar

SwaprHQ · Nov 7, 2023 · b3b3815 · b3b3815
1 parent 1b5a84a
commit b3b3815
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 13 deletions.
diff --git a/src/components/Header/MobileOptions.tsx b/src/components/Header/MobileOptions.tsx
@@ -1,16 +1,21 @@
+import { SWPR } from '@swapr/sdk'
+
 import { darken } from 'polished'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import { ReactComponent as Cross } from '../../assets/images/crossIcon.svg'
 import { ReactComponent as ThreeBars } from '../../assets/images/three-bars.svg'
+import { useActiveWeb3React } from '../../hooks'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleMobileMenu } from '../../state/application/hooks'
 import { ExternalLink } from '../../theme'
 import Popover from '../Popover'
 
+import { HeaderMobileLink } from './HeaderLink'
+
 const StyledPopover = styled(Popover)`
   padding: 22px;
   border: none;
@@ -69,6 +74,11 @@ export default function MobileOptions() {
   const popoverRef = useRef(null)
   const open = useModalOpen(ApplicationModal.MOBILE)
   const toggle = useToggleMobileMenu()
+  const { chainId } = useActiveWeb3React()
+
+  const newSwpr = chainId ? SWPR[chainId] : undefined
+
+  const networkWithoutSWPR = !newSwpr
 
   const { t } = useTranslation('common')
   useOnClickOutside(popoverRef, open ? toggle : undefined)
@@ -79,12 +89,13 @@ export default function MobileOptions() {
         placement="bottom-end"
         content={
           <List>
-            <ListItem>
-              <StyledExternalLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL as string}>
-                {t('DCA')}
-                <span>↗</span>
-              </StyledExternalLink>
-            </ListItem>
+            {networkWithoutSWPR && (
+              <ListItem>
+                <HeaderMobileLink id="rewards-nav-link" to="/rewards">
+                  {t('rewards')}
+                </HeaderMobileLink>
+              </ListItem>
+            )}
 
             <ListItem>
               <StyledExternalLink id="charts-nav-link" href="https://dxstats.eth.limo/">

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -17,6 +17,7 @@ import { useModalOpen, useToggleShowClaimPopup } from '../../state/application/h
 import { useDarkModeManager, useUpdateSelectedChartOption } from '../../state/user/hooks'
 import { ChartOption } from '../../state/user/reducer'
 import { useTokenBalance } from '../../state/wallet/hooks'
+import { ExternalLink } from '../../theme'
 import { breakpoints } from '../../utils/theme'
 import ClaimModal from '../Claim/ClaimModal'
 import { UnsupportedNetworkPopover } from '../NetworkUnsupportedPopover'
@@ -196,6 +197,40 @@ const StyledChevron = styled(ChevronUp)<{ open: boolean }>`
   stroke: ${({ theme }) => theme.orange1};
   transform: ${({ open }) => (open ? 'rotate(0deg)' : 'rotate(180deg)')};
 `
+const DCAExternalLink = styled(ExternalLink)`
+  display: none;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    position: relative;
+    display: flex;
+    font-weight: 600;
+    font-size: 14px;
+    color: #c9c7db;
+    margin-right: 18px;
+  `}
+`
+
+const DCAHeaderLink = styled(HeaderLink)`
+  margin-right: 18px;
+`
+
+const RewardsHeaderMobileLink = styled(HeaderMobileLink)`
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    display: none;
+  `};
+`
+
+const DCABadge = styled.p`
+  position: absolute;
+  top: -12px;
+  right: -34px;
+  font-size: 10px;
+  background: #97df5c;
+  padding: 1px 6px;
+  border-radius: 16px;
+  color: black;
+  line-height: 16px;
+  font-weight: 600;
+`
 
 function Header() {
   const { account, chainId } = useActiveWeb3React()
@@ -281,12 +316,10 @@ function Header() {
             {t('rewards')}
             {networkWithoutSWPR && <HeaderLinkBadge label="NOT&nbsp;AVAILABLE" />}
           </HeaderLink>
-          <HeaderLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL}>
+          <DCAHeaderLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL}>
             {t('DCA')}
-            <Text ml="4px" fontSize="13px">
-              ↗
-            </Text>
-          </HeaderLink>
+            <DCABadge>NEW</DCABadge>
+          </DCAHeaderLink>
           <HeaderLink id="vote-nav-link" href="https://snapshot.org/#/swpr.eth">
             {t('vote')}
             <Text ml="4px" fontSize="13px">
@@ -361,10 +394,14 @@ function Header() {
             </HeaderMobileLink>
           )}
           {!networkWithoutSWPR && (
-            <HeaderMobileLink id="rewards-nav-link" to="/rewards">
+            <RewardsHeaderMobileLink id="rewards-nav-link" to="/rewards">
               {t('rewards')}
-            </HeaderMobileLink>
+            </RewardsHeaderMobileLink>
           )}
+          <DCAExternalLink id="stackly-nav-link" href={process.env.REACT_APP_STACKLY_URL || ''}>
+            {t('DCA')}
+            <DCABadge>NEW</DCABadge>
+          </DCAExternalLink>
           <HeaderMobileLink id="vote-nav-link" href={`https://snapshot.org/#/swpr.eth`}>
             {t('vote')}
             <Text ml="4px" fontSize="11px">