diff --git a/src/assets/images/logos/advancedfarm/popular_bg.png b/src/assets/images/logos/advancedfarm/popular_bg.png
new file mode 100644
index 00000000..eeaa272d
Binary files /dev/null and b/src/assets/images/logos/advancedfarm/popular_bg.png differ
diff --git a/src/components/AdvancedFarmComponents/Unstake/UnstakeBase/index.js b/src/components/AdvancedFarmComponents/Unstake/UnstakeBase/index.js
index 1a4a073f..b3e89ff8 100644
--- a/src/components/AdvancedFarmComponents/Unstake/UnstakeBase/index.js
+++ b/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
diff --git a/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js b/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js
index fcbbe515..cb030bce 100644
--- a/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js
+++ b/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,6 +79,7 @@ const WithdrawStart = ({
revertMinReceivedUsdAmount,
setUnstakeInputValue,
setRevertSuccess,
+ altVaultData,
}) => {
const {
darkMode,
@@ -73,8 +87,11 @@ const WithdrawStart = ({
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
+ {!isEmpty(altVaultData) && progressStep === 4 && (
+ <>
+
+ Looking for alternatives?
+
+
+ {
+ 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')
+ }}
+ >
+
+
+ {altVaultData.logoUrl.map((el, i) => (
+
+ ))}
+
+
+
+ {altVaultData.tokenNames.join(' • ')}
+
+
+ {altVaultData.platform[0]}
+
+
+ {totalApy}% APY
+
+
+
+
+ Popular{' '}
+
+ 🔥
+
+
+
+
+
+ )}
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,
}
diff --git a/src/components/UserBalanceChart/ApexChart/style.js b/src/components/UserBalanceChart/ApexChart/style.js
index 9d371f55..dc158cfa 100644
--- a/src/components/UserBalanceChart/ApexChart/style.js
+++ b/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`
diff --git a/src/constants.js b/src/constants.js
index a7f7d7c8..94215e7d 100644
--- a/src/constants.js
+++ b/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',
diff --git a/src/pages/AdvancedFarm/index.js b/src/pages/AdvancedFarm/index.js
index 45905cbf..6a8b1a59 100644
--- a/src/pages/AdvancedFarm/index.js
+++ b/src/pages/AdvancedFarm/index.js
@@ -37,6 +37,7 @@ import UnstakeBase from '../../components/AdvancedFarmComponents/Unstake/Unstake
import UnstakeStart from '../../components/AdvancedFarmComponents/Unstake/UnstakeStart'
import UnstakeResult from '../../components/AdvancedFarmComponents/Unstake/UnstakeResult'
import {
+ AVRList,
GECKO_URL,
COINGECKO_API_KEY,
DECIMAL_PRECISION,
@@ -205,7 +206,8 @@ const AdvancedFarm = () => {
fontColor3,
fontColor4,
fontColor6,
- linkColor,
+ linkColorTooltip,
+ linkColorOnHover,
hoverColor,
bgColorFarm,
} = useThemeContext()
@@ -234,6 +236,7 @@ const AdvancedFarm = () => {
const { tokens } = require('../../data')
const [apiData, setApiData] = useState([])
+ const [altVaultData, setAltVaultData] = useState({})
useEffect(() => {
const getCoinList = async () => {
@@ -332,6 +335,20 @@ const AdvancedFarm = () => {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
}, [])
+ useEffect(() => {
+ const AVRVaultAddress = AVRList[paramAddress]
+
+ if (AVRVaultAddress) {
+ const matchingVault = Object.values(groupOfVaults).find(
+ vault => vault.vaultAddress.toLowerCase() === AVRVaultAddress.toLowerCase(),
+ )
+
+ if (matchingVault) {
+ setAltVaultData(matchingVault)
+ }
+ }
+ }, [groupOfVaults, paramAddress])
+
const useBeginnersFarm = false
const useIFARM = id === FARM_TOKEN_SYMBOL
const fAssetPool = isSpecialVault
@@ -1326,7 +1343,8 @@ const AdvancedFarm = () => {
href="https://discord.com/invite/gzWAG3Wx7Y"
target="_blank"
rel="noopener noreferrer"
- linkColor={linkColor}
+ linkColor={linkColorTooltip}
+ linkColorOnHover={linkColorOnHover}
>
Still having questions? Open Discord ticket.
@@ -1360,7 +1378,8 @@ const AdvancedFarm = () => {
href="https://app.harvest.finance/farms?search=moonwell"
target="_self"
rel="noopener noreferrer"
- linkColor={linkColor}
+ linkColor={linkColorTooltip}
+ linkColorOnHover={linkColorOnHover}
>
Moonwell farms
@@ -1372,7 +1391,8 @@ const AdvancedFarm = () => {
href="https://discord.com/invite/gzWAG3Wx7Y"
target="_blank"
rel="noopener noreferrer"
- linkColor={linkColor}
+ linkColor={linkColorTooltip}
+ linkColorOnHover={linkColorOnHover}
>
Still having questions? Open Discord ticket.
@@ -1399,7 +1419,8 @@ const AdvancedFarm = () => {
href="https://v3.harvest.finance/ethereum/0xa0246c9032bC3A600820415aE600c6388619A14D"
target="_blank"
rel="noopener noreferrer"
- linkColor={linkColor}
+ linkColor={linkColorTooltip}
+ linkColorOnHover={linkColorOnHover}
>
under this link
@@ -1424,7 +1445,7 @@ const AdvancedFarm = () => {
backColor={backColor}
borderColor={borderColor}
>
- APY
+ Live APY
{showAPY()}
{
revertMinReceivedUsdAmount={revertMinReceivedUsdAmount}
setUnstakeInputValue={setUnstakeInputValue}
setRevertSuccess={setRevertSuccess}
+ altVaultData={altVaultData}
/>
diff --git a/src/pages/AdvancedFarm/style.js b/src/pages/AdvancedFarm/style.js
index a1978a9a..4decdb6e 100644
--- a/src/pages/AdvancedFarm/style.js
+++ b/src/pages/AdvancedFarm/style.js
@@ -525,6 +525,10 @@ const WelcomeTicket = styled.a`
color: ${props => props.linkColor};
text-decoration: underline;
+ &:hover {
+ color: ${props => props.linkColorOnHover};
+ }
+
&.useIFARM {
font-weight: 600;
}
diff --git a/src/pages/BeginnersFarm/index.js b/src/pages/BeginnersFarm/index.js
index bffbb543..b61f4ac5 100644
--- a/src/pages/BeginnersFarm/index.js
+++ b/src/pages/BeginnersFarm/index.js
@@ -1186,7 +1186,7 @@ const BeginnersFarm = () => {
backColor={backColor}
borderColor={borderColor}
>
- APY
+ Live APY
{showAPY()}