Alex ui1

src/components/AdvancedFarmComponents/Unstake/UnstakeBase/index.js

@@ -42,6 +42,9 @@ const getChainName = chain => {
     case CHAIN_IDS.ARBITRUM_ONE:
       chainName = 'Arbitrum'
       break
+    case CHAIN_IDS.BASE:
+      chainName = 'Base'
+      break
     default:
       chainName = 'Ethereum'
       break

src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js

@@ -2,7 +2,7 @@ import BigNumber from 'bignumber.js'
 import React, { useState } from 'react'
 import Modal from 'react-bootstrap/Modal'
 import { useMediaQuery } from 'react-responsive'
-import { isNaN } from 'lodash'
+import { isEmpty, isNaN } from 'lodash'
 import { BsArrowUp } from 'react-icons/bs'
 import { CiSettings } from 'react-icons/ci'
 import { PiQuestion } from 'react-icons/pi'
@@ -17,7 +17,7 @@ import ProgressTwo from '../../../../assets/images/logos/advancedfarm/progress-s
 import ProgressThree from '../../../../assets/images/logos/advancedfarm/progress-step3.png'
 import ProgressFour from '../../../../assets/images/logos/advancedfarm/progress-step4.png'
 import ProgressFive from '../../../../assets/images/logos/advancedfarm/progress-step5.png'
-import { IFARM_TOKEN_SYMBOL } from '../../../../constants'
+import { directDetailUrl, IFARM_TOKEN_SYMBOL } from '../../../../constants'
 import { useActions } from '../../../../providers/Actions'
 import { useVaults } from '../../../../providers/Vault'
 import { useWallet } from '../../../../providers/Wallet'
@@ -46,8 +46,21 @@ import {
   SlippageBtn,
   ProgressLabel,
   ProgressText,
+  AVRWrapper,
+  AVRContainer,
+  AVRBadge,
+  ApyValue,
+  TopLogo,
+  LogoImg,
 } from './style'
 
+const chainList = [
+  { id: 1, name: 'Ethereum', chainId: 1 },
+  { id: 2, name: 'Polygon', chainId: 137 },
+  { id: 3, name: 'Arbitrum', chainId: 42161 },
+  { id: 4, name: 'Base', chainId: 8453 },
+]
+
 const WithdrawStart = ({
   unstakeInputValue,
   withdrawStart,
@@ -66,15 +79,19 @@ const WithdrawStart = ({
   revertMinReceivedUsdAmount,
   setUnstakeInputValue,
   setRevertSuccess,
+  altVaultData,
 }) => {
   const {
     darkMode,
     backColor,
     fontColor1,
     fontColor2,
     fontColor3,
+    fontColor5,
     bgColorSlippage,
     borderColor,
+    bgColorMessage,
+    hoverColorAVR,
   } = useThemeContext()
   const { account, web3 } = useWallet()
   const { fetchUserPoolStats, userStats } = usePools()
@@ -94,7 +111,8 @@ const WithdrawStart = ({
 
   const { getPortalsApproval, portalsApprove, getPortals } = usePortals()
 
-  let pickedDefaultToken
+  let pickedDefaultToken,
+    totalApy = 0
   if (pickedToken.symbol !== 'Select' && defaultToken) {
     pickedDefaultToken = pickedToken.address.toLowerCase() === defaultToken.address.toLowerCase()
   }
@@ -118,6 +136,14 @@ const WithdrawStart = ({
     }
   }
 
+  if (!isEmpty(altVaultData)) {
+    totalApy =
+      Number(altVaultData?.estimatedApy) +
+      Number(altVaultData?.pool?.tradingApy) +
+      Number(altVaultData?.pool?.totalRewardAPY)
+    totalApy = isNaN(totalApy) ? 0 : totalApy.toFixed(2)
+  }
+
   const chainId = token.chain || token.data.chain
   const fromToken = useIFARM ? addresses.iFARM : token.vaultAddress || token.tokenAddress
 
@@ -546,6 +572,77 @@ const WithdrawStart = ({
               Successful
             </ProgressText>
           </ProgressLabel>
+          {!isEmpty(altVaultData) && progressStep === 4 && (
+            <>
+              <NewLabel
+                size="14px"
+                height="28px"
+                weight={600}
+                color={fontColor2}
+                margin="25px 24px 0px 24px"
+              >
+                Looking for alternatives?
+              </NewLabel>
+              <AVRWrapper bgColor={bgColorMessage}>
+                <AVRContainer
+                  hoverColorAVR={hoverColorAVR}
+                  onClick={() => {
+                    let badgeId = -1
+                    const chain = token.chain || token.data.chain
+                    chainList.forEach((obj, j) => {
+                      if (obj.chainId === Number(chain)) {
+                        badgeId = j
+                      }
+                    })
+                    const isSpecialVault = altVaultData.liquidityPoolVault || altVaultData.poolVault
+                    const network = chainList[badgeId].name.toLowerCase()
+                    const address = isSpecialVault
+                      ? altVaultData.data.collateralAddress
+                      : altVaultData.vaultAddress || altVaultData.tokenAddress
+                    const url = `${directDetailUrl + network}/${address}`
+                    window.open(url, '_blank')
+                  }}
+                >
+                  <NewLabel marginRight="12px" display="flex">
+                    <TopLogo>
+                      {altVaultData.logoUrl.map((el, i) => (
+                        <LogoImg className="logo" src={el.slice(1, el.length)} key={i} alt="" />
+                      ))}
+                    </TopLogo>
+                    <NewLabel marginLeft="20px">
+                      <NewLabel
+                        color={fontColor1}
+                        size="14px"
+                        height="20px"
+                        weight="600"
+                        marginBottom="4px"
+                      >
+                        {altVaultData.tokenNames.join(' • ')}
+                      </NewLabel>
+                      <NewLabel
+                        color={fontColor1}
+                        size="12px"
+                        height="20px"
+                        weight="400"
+                        marginBottom="5px"
+                      >
+                        {altVaultData.platform[0]}
+                      </NewLabel>
+                      <ApyValue bgColor={bgColorMessage} color={fontColor5}>
+                        {totalApy}% APY
+                      </ApyValue>
+                    </NewLabel>
+                  </NewLabel>
+                  <AVRBadge>
+                    Popular{' '}
+                    <span role="img" aria-label="thumb" aria-labelledby="thumb">
+                      🔥
+                    </span>
+                  </AVRBadge>
+                </AVRContainer>
+              </AVRWrapper>
+            </>
+          )}
           <NewLabel
             size={isMobile ? '16px' : '16px'}
             height={isMobile ? '24px' : '24px'}

src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/style.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import PopularBg from '../../../../assets/images/logos/advancedfarm/popular_bg.png'
 
 const SelectTokenWido = styled.div`
   transition: 0.25s;
@@ -241,6 +242,82 @@ const FTokenWrong = styled.div`
   justify-content: space-between;
 `
 
+const AVRWrapper = styled.div`
+  display: flex;
+  margin: 15px 24px 15px;
+  justify-content: space-between;
+  cursor: pointer;
+
+  background: linear-gradient(${props => props.bgColor}, ${props => props.bgColor}) padding-box,
+    linear-gradient(45deg, #cf1894, #b0229b, #e0439b, #670e78) border-box;
+  border-radius: 12px;
+  border: 2px solid transparent;
+`
+
+const AVRContainer = styled.div`
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  gap: 12px 0;
+  border-radius: 12px;
+
+  &:hover {
+    background: ${props => props.hoverColorAVR};
+    transition: 0.25s;
+  }
+`
+
+const AVRBadge = styled.div`
+  display: flex;
+  padding: 2.429px 7.286px;
+  justify-content: center;
+  align-items: center;
+  gap: 3.643px;
+  border-radius: 9.714px;
+  border: 1px solid #fff;
+  background: url(${PopularBg}) lightgray -36.605px -17.873px / 164.706% 364.888% no-repeat;
+  color: #fff;
+  font-size: 8.5px;
+  font-weight: 500;
+  line-height: 12.143px;
+  height: fit-content;
+`
+
+const ApyValue = styled.div`
+  color: ${props => props.color};
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16.591px;
+  padding: 1.659px 8.295px 1.659px 6.636px;
+
+  background: linear-gradient(${props => props.bgColor}, ${props => props.bgColor}) padding-box,
+    linear-gradient(45deg, #cf1894, #b0229b, #e0439b, #670e78) border-box;
+  border-radius: 4.148px;
+  border: 1.078px solid transparent;
+`
+
+const TopLogo = styled.div`
+  display: flex;
+  align-items: flex-start;
+  @media screen and (max-width: 992px) {
+    margin: auto;
+  }
+`
+
+const LogoImg = styled.img`
+  margin-right: -10px;
+  width: 35px;
+
+  ${props =>
+    props.zIndex
+      ? `
+    z-index: ${props.zIndex};
+  `
+      : ``}
+`
+
 const SlippageBox = styled.div`
   padding: 14px 18px;
   align-items: center;
@@ -349,4 +426,10 @@ export {
   SlippageInput,
   ProgressLabel,
   ProgressText,
+  AVRWrapper,
+  AVRContainer,
+  AVRBadge,
+  ApyValue,
+  TopLogo,
+  LogoImg,
 }

src/components/UserBalanceChart/ApexChart/style.js

@@ -12,6 +12,20 @@ const NoData = styled.div`
   position: absolute;
   font-size: 14px;
   color: ${props => props.fontColor};
+  width: 400px;
+
+  @media screen and (max-width: 1262px) {
+    width: 330px;
+  }
+
+  @media screen and (max-width: 992px) {
+    width: 400px;
+    font-size: 12px;
+  }
+
+  @media screen and (max-width: 556px) {
+    width: 330px;
+  }
 `
 
 const FakeChartWrapper = styled.div`

src/constants.js

@@ -15,6 +15,34 @@ export const SOCIAL_LINKS = {
   BUG_BOUNTY: 'https://immunefi.com/bounty/harvest/',
 }
 
+// Alternative Vault Recommendation List
+export const AVRList = {
+  '0x24174022D382CD155C33A847404cDA5Bc7978802': '0x3646B87C7DD1c87fe6663FFCAD167b8E5175F001',
+  '0x2b70238022589f17E7b266BC753E74027D57009F': '0x2b70238022589f17E7b266BC753E74027D57009F',
+  '0x32DB5Cbac1C278696875eB9F27eD4cD7423dd126': '0xABa0cB835f40E7Af29F8016a1DB401e704f855bE',
+  '0x2EC0160246461F0ce477887DdE2C931Ee8233de7': '0x0910723E98eB8961a50d8b09b296aDB84656529C',
+  '0xBCC2B58Ab9a4F6bb576F80Def62ea2BC91fC49c2': '0x9C35DC4A5dE5F399244b858e84465e23F9751d96',
+  '0xaEF3C262569e56FB494755110ca6F481f8A2e353': '0xcA2b2D11b497ce2cA6E21375f703b2E94787AC19',
+  '0x0D15225454474ab3cb124083278c7bE03f8a99Ff': '0xa1D4e9bDA2fC90EBFBa2372F4C4BA5ce4F8e8A46',
+  '0xDfd2214236B60FC0485288c959CB07dA4f6A15F7': '0xf51902f721136cA1fcE5C12a303d3A76bA177E62',
+  '0xEF39eF2069A9A65cD6476b6C9a6FB7dD2910f370': '0xBdE9Dbd8b1a1C52eC7f880a5172470da2e2aA04D',
+  '0x76FE2516D16d93fd20b03873aD0413a7c0AC9773': '0x0ffDC684cb69FaE92F26631614f9d6632bb658A8',
+  '0xc76387330F1614D7e10e045cfcc7C9f7Ff2AdC1F': '0x0B41D4728446FB4600c43b8fC468A245C092324a',
+  '0x36e53BFC4A8c306B8297A4A79fB2aC5CbFa391FB': '0xcC24852806165319252205E2ED0b5985D7d79164',
+  '0x7234433aC39035D75F3668A4187Af7b7B45Ea34f': '0x3646B87C7DD1c87fe6663FFCAD167b8E5175F001',
+  '0x3EeC57F8F3947D02e40B3C5616043eCCE755BD9d': '0xE5cfD03f32F2ebA7e5841f50544265beA368EE17',
+  '0xC86A216Cd1b82830f8663a11FA2aC4b911E86b31': '0xABa0cB835f40E7Af29F8016a1DB401e704f855bE',
+  '0xF2BDf16EfDCAD65B95eabACb4bbE5431C5CA227E': '0x0910723E98eB8961a50d8b09b296aDB84656529C',
+  '0x42f7Cd0A7dc5d8e84a06A5Bf6e2df649B230A4BC': '0x9C35DC4A5dE5F399244b858e84465e23F9751d96',
+  '0x028DD741997F0612E47b2099Fa311A7667227b6E': '0xcA2b2D11b497ce2cA6E21375f703b2E94787AC19',
+  '0x638bC199795E1E09A5D20e0e4E204594Cc5CFB92': '0xa1D4e9bDA2fC90EBFBa2372F4C4BA5ce4F8e8A46',
+  '0x2Aa935cF382e5bAD8353b36b044367294A8Ed154': '0xf51902f721136cA1fcE5C12a303d3A76bA177E62',
+  '0xB150B4246A7027F2e32c083Eeb6df4DD76B1a3EF': '0xBdE9Dbd8b1a1C52eC7f880a5172470da2e2aA04D',
+  '0x56ae35dCFC776Ca2d2475A2374cf2FFA95391E01': '0x0ffDC684cb69FaE92F26631614f9d6632bb658A8',
+  '0x2C136356A46681ded6BC37A5B49fbE7574f37743': '0x0B41D4728446FB4600c43b8fC468A245C092324a',
+  '0x29C53Aeb23F5927ae97d85389Fee9628CfF29eea': '0xcC24852806165319252205E2ED0b5985D7d79164',
+}
+
 export const ROUTES = {
   PORTFOLIO: '/',
   TUTORIAL: '/get-started',