From 0366fe11970c4bbbca64d31602b336fea82518dc Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 13:16:51 +0900 Subject: [PATCH 01/11] Construct new mobile sidebar --- .../logos/sidebar/active-dark-farms.svg | 9 ++ .../images/logos/sidebar/active-dark-home.svg | 3 + .../logos/sidebar/active-white-farms.svg | 9 ++ .../logos/sidebar/active-white-home.svg | 3 + .../images/logos/sidebar/bottom-advanced.svg | 9 ++ .../images/logos/sidebar/bottom-home.svg | 3 + .../images/logos/sidebar/connect-failure.svg | 4 +- .../images/logos/sidebar/connect-success.svg | 4 +- src/assets/images/logos/sidebar/copy.svg | 3 + .../images/logos/sidebar/more-mobile.svg | 12 +- src/assets/images/logos/sidebar/on-off.svg | 3 + .../images/logos/sidebar/white-copy.svg | 3 + .../images/logos/sidebar/white-on-off.svg | 3 + src/components/Sidebar/index.js | 147 ++++++++++++++++-- src/components/Sidebar/style.js | 113 +++++++------- 15 files changed, 251 insertions(+), 77 deletions(-) create mode 100644 src/assets/images/logos/sidebar/active-dark-farms.svg create mode 100644 src/assets/images/logos/sidebar/active-dark-home.svg create mode 100644 src/assets/images/logos/sidebar/active-white-farms.svg create mode 100644 src/assets/images/logos/sidebar/active-white-home.svg create mode 100644 src/assets/images/logos/sidebar/bottom-advanced.svg create mode 100644 src/assets/images/logos/sidebar/bottom-home.svg create mode 100644 src/assets/images/logos/sidebar/copy.svg create mode 100644 src/assets/images/logos/sidebar/on-off.svg create mode 100644 src/assets/images/logos/sidebar/white-copy.svg create mode 100644 src/assets/images/logos/sidebar/white-on-off.svg diff --git a/src/assets/images/logos/sidebar/active-dark-farms.svg b/src/assets/images/logos/sidebar/active-dark-farms.svg new file mode 100644 index 000000000..585dff9b0 --- /dev/null +++ b/src/assets/images/logos/sidebar/active-dark-farms.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/logos/sidebar/active-dark-home.svg b/src/assets/images/logos/sidebar/active-dark-home.svg new file mode 100644 index 000000000..df37b83bb --- /dev/null +++ b/src/assets/images/logos/sidebar/active-dark-home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/active-white-farms.svg b/src/assets/images/logos/sidebar/active-white-farms.svg new file mode 100644 index 000000000..9c70e3d15 --- /dev/null +++ b/src/assets/images/logos/sidebar/active-white-farms.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/logos/sidebar/active-white-home.svg b/src/assets/images/logos/sidebar/active-white-home.svg new file mode 100644 index 000000000..61074073e --- /dev/null +++ b/src/assets/images/logos/sidebar/active-white-home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/bottom-advanced.svg b/src/assets/images/logos/sidebar/bottom-advanced.svg new file mode 100644 index 000000000..48bb4b037 --- /dev/null +++ b/src/assets/images/logos/sidebar/bottom-advanced.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/logos/sidebar/bottom-home.svg b/src/assets/images/logos/sidebar/bottom-home.svg new file mode 100644 index 000000000..c46f8e3f7 --- /dev/null +++ b/src/assets/images/logos/sidebar/bottom-home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/connect-failure.svg b/src/assets/images/logos/sidebar/connect-failure.svg index d9d30e6b7..0aa0bdde0 100644 --- a/src/assets/images/logos/sidebar/connect-failure.svg +++ b/src/assets/images/logos/sidebar/connect-failure.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/images/logos/sidebar/connect-success.svg b/src/assets/images/logos/sidebar/connect-success.svg index 3ae50dc10..1fb641ba0 100644 --- a/src/assets/images/logos/sidebar/connect-success.svg +++ b/src/assets/images/logos/sidebar/connect-success.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/images/logos/sidebar/copy.svg b/src/assets/images/logos/sidebar/copy.svg new file mode 100644 index 000000000..93c696d3f --- /dev/null +++ b/src/assets/images/logos/sidebar/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/more-mobile.svg b/src/assets/images/logos/sidebar/more-mobile.svg index 7ec790731..915bc9f3e 100644 --- a/src/assets/images/logos/sidebar/more-mobile.svg +++ b/src/assets/images/logos/sidebar/more-mobile.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/assets/images/logos/sidebar/on-off.svg b/src/assets/images/logos/sidebar/on-off.svg new file mode 100644 index 000000000..63e76d302 --- /dev/null +++ b/src/assets/images/logos/sidebar/on-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/white-copy.svg b/src/assets/images/logos/sidebar/white-copy.svg new file mode 100644 index 000000000..1d4e319ff --- /dev/null +++ b/src/assets/images/logos/sidebar/white-copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/sidebar/white-on-off.svg b/src/assets/images/logos/sidebar/white-on-off.svg new file mode 100644 index 000000000..81c985635 --- /dev/null +++ b/src/assets/images/logos/sidebar/white-on-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index 024f7c263..b16bd2903 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -9,7 +9,11 @@ import connectAvatar from '../../assets/images/logos/sidebar/connect-frame.svg' import connectAvatarMobile from '../../assets/images/logos/sidebar/connectavatarmobile.svg' // import Docs from '../../assets/images/logos/sidebar/docs.svg' import FAQ from '../../assets/images/logos/sidebar/faq.svg' +import ActiveDarkMobileBottomHome from '../../assets/images/logos/sidebar/active-dark-home.svg' +import ActiveWhiteMobileBottomHome from '../../assets/images/logos/sidebar/active-white-home.svg' +import ActiveWhiteMobileBottomAdvanced from '../../assets/images/logos/sidebar/active-white-farms.svg' import Home from '../../assets/images/logos/sidebar/home-line.svg' +import MobileBottomHome from '../../assets/images/logos/sidebar/bottom-home.svg' import Beginners from '../../assets/images/logos/sidebar/beginners.svg' import Support from '../../assets/images/logos/sidebar/support.svg' import Analytics from '../../assets/images/logos/sidebar/analytics.svg' @@ -36,6 +40,10 @@ import { fromWei } from '../../services/web3' import { getChainIcon } from '../../utilities/parsers' import { formatAddress, isLedgerLive, isSpecialApp } from '../../utilities/formats' import Social from '../Social' +import CopyIcon from '../../assets/images/logos/sidebar/copy.svg' +import WhiteCopyIcon from '../../assets/images/logos/sidebar/white-copy.svg' +import WhiteOnOff from '../../assets/images/logos/sidebar/white-on-off.svg' +import OnOff from '../../assets/images/logos/sidebar/on-off.svg' import { Address, ConnectAvatar, @@ -76,6 +84,8 @@ import { ConnectSection, MoreBtn, CurrencyDiv, + LinkName, + MobileMoreTop, } from './style' const sideLinksTop = [ @@ -149,17 +159,17 @@ const sideLinksMobile = [ { path: ROUTES.PORTFOLIO, name: 'My Positions', - imgPath: Home, - }, - { - path: ROUTES.BEGINNERSFARM, - name: 'Beginners', - imgPath: Beginners, + imgPath: MobileBottomHome, + darkImg: ActiveDarkMobileBottomHome, + whiteImg: ActiveWhiteMobileBottomHome, + linkName: 'Portfolio', }, { path: ROUTES.ADVANCED, name: 'All Farms', - imgPath: Advanced, + imgPath: ActiveWhiteMobileBottomAdvanced, + isFarms: true, + linkName: 'Farms', }, ] @@ -275,10 +285,21 @@ const MobileMenu = ({ darkMode, isWallet, isMobile, + isMobileBottom, }) => { const { pathname } = useLocation() const pageName = pathname === '/' ? 'all farms' : pathname === ROUTES.PORTFOLIO ? 'my positions' : pathname + const active = !isWallet && pageName.includes(item.name.toLowerCase()) + const isFarms = item.isFarms + const farmsFilter = + active && isFarms + ? darkMode + ? 'invert(100%) sepia(1%) saturate(3890%) hue-rotate(51deg) brightness(113%) contrast(100%);' + : '' + : !active && isFarms + ? 'invert(51%) sepia(1%) saturate(2273%) hue-rotate(333deg) brightness(93%) contrast(81%)' + : '' return ( + + {item.linkName} + {item.new ? New : <>} ) @@ -660,6 +697,80 @@ const Sidebar = ({ width }) => { handleMobileClose() }} > + + {connected ? ( + <> + chain icon + Chain icon +
+ {formatAddress(account)} +
+ + chain icon + + { + disconnectAction() + handleMobileWalletClose() + }} + marginLeft="15px" + > + chain icon + + + ) : ( + <> + Chain icon + { + connectAction() + }} + minWidth="190px" + inputBorderColor={inputBorderColor} + bordercolor={fontColor} + disabled={disableWallet} + hoverColor={hoverColorButton} + > + Connect Wallet + + + )} + {sideLinksMobileBottom.map(item => ( @@ -996,13 +1107,14 @@ const Sidebar = ({ width }) => { activeIconColor={sidebarActiveIconColor} darkMode={darkMode} isWallet={false} + isMobileBottom isMobile /> ))} - + { /> - - - + <> + + + + + More + + + + diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index 937a5b623..048835b2c 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -290,18 +290,18 @@ const FlexDiv = styled.div` ` const ConnectButtonStyle = styled.button` - font-size: 16px; + font-size: 15px; line-height: 20px; - font-weight: 600; - margin: 25px 0px; - width: 100%; - border-radius: 8px; - border: 2px solid #6988ff; - background: none; - color: #6888ff; + font-weight: 400; + border-radius: 9px; + background: #20d099; + color: #ffffff; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); cursor: pointer; transition: 0.5s; + padding: 9.19px 16.08px 9.19px 16.08px; + border: none; + margin-left: 10px; &:hover { background: ${props => props.hoverColor}; @@ -310,20 +310,18 @@ const ConnectButtonStyle = styled.button` ${props => props.connected ? ` - padding: 7px 45px 7px 11px; - filter: drop-shadow(0px 4px 52px rgba(0, 0, 0, 0.25)); + // padding: 7px 45px 7px 11px; + // filter: drop-shadow(0px 4px 52px rgba(0, 0, 0, 0.25)); - &:hover { - background: #E6F8EB; - } + // &:hover { + // background: #E6F8EB; + // } ` : ` - padding: 15px 0px 15px 0px; - `} - - img.connect-wallet { - margin-right: 25px; - } + // padding: 15px 0px 15px 0px; + `}// img.connect-wallet { + // margin-right: 25px; + // } ` const AboutHarvest = styled.div` @@ -376,7 +374,11 @@ const MobileView = styled.div` } ` -const MobileConnectBtn = styled.div`` +const MobileConnectBtn = styled.div` + display: ${props => (props.display ? props.display : '')}; + justify-content: ${props => (props.justifyContent ? props.justifyContent : '')}; + align-items: ${props => (props.alignItems ? props.alignItems : '')}; +` const MobileActionsContainer = styled.div` bottom: 0; @@ -456,10 +458,14 @@ const MobileWalletButton = styled.div` font-size: 16px; line-height: 24px; font-weight: 600; - padding: 10px 18px; + display: flex; + justify-content: center; + align-items: center; + margin-left: ${props => (props.marginLeft ? props.marginLeft : '')}; + // padding: 10px 18px; background: ${props => props.backColor}; - border-radius: 5px; - border: 1px solid ${props => props.borderColor}; + // border-radius: 5px; + // border: 1px solid ${props => props.borderColor}; cursor: pointer; width: 45%; text-align: center; @@ -546,16 +552,16 @@ const ConnectAvatar = styled.div` const Address = styled.span` display: flex; - color: #8ba3ff; - font-size: 12px; + color: ${props => (props.color ? props.color : '')}; + font-size: 15px; font-weight: 500; - line-height: 12px; + line-height: 25px; letter-spacing: -0.12px; @media screen and (max-width: 992px) { text-align: center; line-height: 28px; - margin: 4px auto; + margin-left: 10px; } ` @@ -654,6 +660,7 @@ const SideIcons = styled.img` transition: 0.25s; width: ${props => props.width}; height: ${props => props.height}; + margin-top: ${props => (props.marginTop ? props.marginTop : '')}; ` const UserDropDown = styled(Dropdown.Toggle)` @@ -824,8 +831,9 @@ const Logo = styled.div` @media screen and (max-width: 992px) { display: flex; - justify-content: end; + justify-content: space-between; margin-bottom: 24px; + padding-left: 12px; } ` @@ -851,6 +859,14 @@ const NewTag = styled.div` margin-left: 10px; ` +const LinkName = styled.div` + font-weight: 400; + font-size: 14px; + line-height: 25px; + color: ${props => (props.color ? props.color : '')}; + margin-top: ${props => (props.marginTop ? props.marginTop : '')}; +` + const LinkMobile = styled.button` font-size: 10px; line-height: 13px; @@ -866,24 +882,15 @@ const LinkMobile = styled.button` flex-direction: column; display: ${props => (props.isDropdownLink ? 'none' : 'flex')}; - ${props => - props.darkMode - ? ` - img.sideIcon { - filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(352deg) brightness(101%) contrast(104%); - } - ` - : ``} + img { + filter: ${props => (props.farmsFilter ? props.farmsFilter : '')}; + } ${props => props.enabled === 'false' ? ` pointer-events: none; color: #a4a4a4; - - img.sideIcon { - filter: invert(81%) sepia(0%) saturate(1%) hue-rotate(315deg) brightness(82%) contrast(85%); - } ` : ``} @@ -892,22 +899,8 @@ const LinkMobile = styled.button` ? ` font-weight: 500; color: #15B088; - img { - filter: invert(56%) sepia(65%) saturate(2880%) hue-rotate(127deg) brightness(93%) contrast(84%); - } ` : `font-weight: 400;`} - - ${props => - props.darkMode && props.active - ? ` - font-weight: 500; - color: #15B088; - img.sideIcon { - filter: invert(39%) sepia(83%) saturate(1585%) hue-rotate(137deg) brightness(103%) contrast(84%); - } - ` - : `font-weight: 400;`} ` const MobileMenuContainer = styled.div` @@ -920,7 +913,7 @@ const MobileMenuContainer = styled.div` const ConnectSection = styled.div` cursor: pointer; - display: flex; + display: ${props => (props.display ? props.display : 'flex')}; ` const MoreBtn = styled.button` @@ -931,9 +924,8 @@ const MoreBtn = styled.button` font-size: 10.229px; font-style: normal; font-weight: 400; - width: 21px; - height: 21px; padding: 0px; + align-items: center; ` const CurrencyDiv = styled.div` @@ -950,6 +942,11 @@ const CurrencyDiv = styled.div` } ` +const MobileMoreTop = styled.div` + display: flex; + align-items: center; +` + export { Container, Layout, @@ -993,4 +990,6 @@ export { ConnectSection, MoreBtn, CurrencyDiv, + LinkName, + MobileMoreTop, } From 0ca64dc2c2ab5122f2382fc967fd3987639a4154 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 13:42:43 +0900 Subject: [PATCH 02/11] Fix showing NaN issue in rewards tab --- src/pages/AdvancedFarm/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/AdvancedFarm/index.js b/src/pages/AdvancedFarm/index.js index 12444b9ae..4af62c8fb 100644 --- a/src/pages/AdvancedFarm/index.js +++ b/src/pages/AdvancedFarm/index.js @@ -2171,7 +2171,7 @@ const AdvancedFarm = () => { >
My Token Rewards
- {!connected ? ( + {!connected || isNaN(totalReward) ? ( `${currencySym}0` ) : userStats ? ( showUsdValue(totalReward, currencySym) From 5355941dbe828a08203458b6cb84d4e1b1f1417b Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 13:58:36 +0900 Subject: [PATCH 03/11] Adjust style of address for desktop & mobile --- src/components/Sidebar/style.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index 048835b2c..cb44bffd1 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -553,15 +553,16 @@ const ConnectAvatar = styled.div` const Address = styled.span` display: flex; color: ${props => (props.color ? props.color : '')}; - font-size: 15px; + font-size: 12px; font-weight: 500; - line-height: 25px; + line-height: 12px; letter-spacing: -0.12px; @media screen and (max-width: 992px) { text-align: center; - line-height: 28px; + line-height: 25px; margin-left: 10px; + font-size: 15px; } ` From ab43ee9a723efc07ff4306b0ab48add56f176a3e Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 14:58:39 +0900 Subject: [PATCH 04/11] Adjust new mobile menu style --- src/components/Sidebar/style.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index cb44bffd1..5b03df553 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -358,10 +358,10 @@ const Mobile = styled.div` const MobileView = styled.div` display: flex; - justify-content: space-between; + justify-content: space-around; position: relative; width: 100%; - padding: 10px 0px; + padding: 10px 0px 5px 0px; &.connect-modal { padding: 10px 25px; @@ -862,7 +862,7 @@ const NewTag = styled.div` const LinkName = styled.div` font-weight: 400; - font-size: 14px; + font-size: 13px; line-height: 25px; color: ${props => (props.color ? props.color : '')}; margin-top: ${props => (props.marginTop ? props.marginTop : '')}; From f8918b007f41ebbce2574c383af8495436605700 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 15:11:11 +0900 Subject: [PATCH 05/11] Fix small issue --- src/components/VaultComponents/VaultPanelHeader/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VaultComponents/VaultPanelHeader/style.js b/src/components/VaultComponents/VaultPanelHeader/style.js index 45e5ff1cb..d414de0e3 100644 --- a/src/components/VaultComponents/VaultPanelHeader/style.js +++ b/src/components/VaultComponents/VaultPanelHeader/style.js @@ -305,7 +305,7 @@ const FlexDiv = styled.div` } &.token-icons { display: flex; - margin: auto; + margin: auto 0px auto 5px; img { position: relative; } From aa45674fd8847e03f4bd66ce913f2ce023ecef59 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 17:03:28 +0900 Subject: [PATCH 06/11] Change default sorting index in farms page --- src/components/VaultComponents/VaultList/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/VaultComponents/VaultList/index.js b/src/components/VaultComponents/VaultList/index.js index 1125d72fc..ed05cdb1b 100644 --- a/src/components/VaultComponents/VaultList/index.js +++ b/src/components/VaultComponents/VaultList/index.js @@ -702,11 +702,11 @@ const VaultList = () => { [chain, account, userStats], ) - const [sortId, setSortId] = useState(2) + const [sortId, setSortId] = useState(1) const updateSortQuery = sort => { const debouncedFn = debounce(() => { - if (sort === 'balance') { + if (sort === 'deposits') { if (account) { setSortingParams(sort) } From f9f8c1ca0d5184a7abcab5b29d541615f89ecd25 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 17:07:09 +0900 Subject: [PATCH 07/11] Adjust a small issue --- src/components/VaultComponents/VaultList/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VaultComponents/VaultList/style.js b/src/components/VaultComponents/VaultList/style.js index 51bee8e5c..da8f6fcb4 100644 --- a/src/components/VaultComponents/VaultList/style.js +++ b/src/components/VaultComponents/VaultList/style.js @@ -190,7 +190,7 @@ const MobileListFilter = styled.div` img.sort-icon { width: 15px; height: 15px; - margin-right: 6px; + margin-left: 6px; filter: ${props => props.filterColor}; } From ba5388b041b188efe01b1325c9a43fd78435a48a Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 17:56:31 +0900 Subject: [PATCH 08/11] Hide AVR for Zksync network farms --- .../Withdraw/WithdrawStart/index.js | 162 +++++++++--------- 1 file changed, 83 insertions(+), 79 deletions(-) diff --git a/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js b/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js index 218c6413a..8173bbbb1 100644 --- a/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js +++ b/src/components/AdvancedFarmComponents/Withdraw/WithdrawStart/index.js @@ -133,6 +133,8 @@ const WithdrawStart = ({ const [networkName, setNetworkName] = useState('') const isFetchingRef = useRef(false) + const curChain = token.poolVault ? token.data.chain : token.chain + useEffect(() => { const tokenChain = token.poolVault ? token.data.chain : token.chain const network = @@ -856,86 +858,88 @@ const WithdrawStart = ({ Successful - - - Psst, looking for alternatives on {networkName}? - - - Click on the new opportunity below to open a Migrate tool. - - - { - const url = `/migrate?from=${fromTokenAddress}&to=${toVaultAddress}&chain=${chainId}` - // token.vaultAddress.toLowerCase() !== - // highestApyVault.vault.vaultAddress.toLowerCase() - // ? `/migrate?from=${token.vaultAddress.toLowerCase()}&to=${highestApyVault.vault.vaultAddress.toLowerCase()}&chain=${chainId}` - // : `/migrate?from=${token.vaultAddress.toLowerCase()}&to=${secHighApyVault.vault.vaultAddress.toLowerCase()}&chain=${chainId}` - if (e.ctrlKey) { - window.open(url, '_blank') - } else { - push(url) - } - }} + {Number(curChain) !== 324 && ( + + - - - {highestApyLogo.length === 0 ? ( - - ) : ( - highestApyLogo.map((el, i) => { - return ( - - ) - }) - )} - - - - {tokenNames.length === 0 ? : tokenNames.join(' - ')} - - - {platformNames.length === 0 ? : platformNames.join(', ')} - - - - - {topApyVault ? `${topApyVault}% APY` : } - - - - + Psst, looking for alternatives on {networkName}? + + + Click on the new opportunity below to open a Migrate tool. + + + { + const url = `/migrate?from=${fromTokenAddress}&to=${toVaultAddress}&chain=${chainId}` + // token.vaultAddress.toLowerCase() !== + // highestApyVault.vault.vaultAddress.toLowerCase() + // ? `/migrate?from=${token.vaultAddress.toLowerCase()}&to=${highestApyVault.vault.vaultAddress.toLowerCase()}&chain=${chainId}` + // : `/migrate?from=${token.vaultAddress.toLowerCase()}&to=${secHighApyVault.vault.vaultAddress.toLowerCase()}&chain=${chainId}` + if (e.ctrlKey) { + window.open(url, '_blank') + } else { + push(url) + } + }} + > + + + {highestApyLogo.length === 0 ? ( + + ) : ( + highestApyLogo.map((el, i) => { + return ( + + ) + }) + )} + + + + {tokenNames.length === 0 ? : tokenNames.join(' - ')} + + + {platformNames.length === 0 ? : platformNames.join(', ')} + + + + + {topApyVault ? `${topApyVault}% APY` : } + + + + + )} {!isEmpty(altVaultData) && progressStep === 4 && ( <> Date: Mon, 28 Oct 2024 18:13:06 +0900 Subject: [PATCH 09/11] Fix connect wallet container in desktop --- src/components/Sidebar/style.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/Sidebar/style.js b/src/components/Sidebar/style.js index 5b03df553..0f35a227d 100644 --- a/src/components/Sidebar/style.js +++ b/src/components/Sidebar/style.js @@ -290,23 +290,36 @@ const FlexDiv = styled.div` ` const ConnectButtonStyle = styled.button` - font-size: 15px; + font-size: 16px; line-height: 20px; - font-weight: 400; + font-weight: 600; + margin: 25px 0px; + width: 100%; + border-radius: 8px; + border: 2px solid #6988ff; + background: none; + color: #6888ff; border-radius: 9px; - background: #20d099; - color: #ffffff; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); cursor: pointer; transition: 0.5s; - padding: 9.19px 16.08px 9.19px 16.08px; - border: none; - margin-left: 10px; + padding: 15px 0px; &:hover { background: ${props => props.hoverColor}; } + @media screen and (max-width: 992px) { + font-size: 15px; + font-weight: 400; + border-radius: 9px; + background: #20d099; + color: #ffffff; + padding: 9.19px 16.08px 9.19px 16.08px; + border: none; + margin: auto 0px auto 10px; + } + ${props => props.connected ? ` From 33d906434260953574e16b6c5e14729222a69229 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 20:47:24 +0900 Subject: [PATCH 10/11] Change migrate view on zksync network --- src/pages/Migrate/index.js | 101 +++++++++++++++++++++++++++---------- 1 file changed, 75 insertions(+), 26 deletions(-) diff --git a/src/pages/Migrate/index.js b/src/pages/Migrate/index.js index 63d3a7c12..93cefa453 100644 --- a/src/pages/Migrate/index.js +++ b/src/pages/Migrate/index.js @@ -33,7 +33,7 @@ import { NewLabel } from '../../components/MigrateComponents/PositionModal/style import Accordian from '../../components/MigrateComponents/Accordian' import ARBITRUM from '../../assets/images/logos/badge/arbitrum.svg' import POLYGON from '../../assets/images/logos/badge/polygon.svg' -import ZKSYNC from '../../assets/images/logos/badge/zksync.svg' +// import ZKSYNC from '../../assets/images/logos/badge/zksync.svg' import BASE from '../../assets/images/logos/badge/base.svg' import { CHAIN_IDS } from '../../data/constants' import { @@ -163,19 +163,21 @@ const Migrate = () => { { id: 3, name: 'Base', img: BASE, chainId: CHAIN_IDS.BASE }, ] + const isSpecialChain = Number(chainId) === 324 + useEffect(() => { let badgeUrl, network - if (connected) { + if (connected && !isEmpty(userStats)) { badgeUrl = Number(selectedChain) === 42161 ? ARBITRUM : Number(selectedChain) === 8453 ? BASE - : Number(selectedChain) === 324 - ? ZKSYNC : Number(selectedChain) === 137 ? POLYGON : ETHEREUM + } else if (!isEmpty(userStats) && isSpecialChain) { + badgeUrl = BASE } else if (!connected) { badgeUrl = BASE } @@ -201,10 +203,14 @@ const Migrate = () => { // setHighestApyVault() // setNetworkMatchList([]) // setMatchVaultList([]) - }, [selectedChain, connected]) + }, [selectedChain, connected, chainId, userStats]) useEffect(() => { - setSelectedChain(chainId) + if (isSpecialChain) { + setSelectedChain(8453) + } else { + setSelectedChain(chainId) + } }, [chainId]) useEffect(() => { @@ -844,7 +850,10 @@ const Migrate = () => { ? Number(fromVault.token.data.chain) : Number(fromVault.token.chain) - if (fromAddress.toLowerCase() === toAddress.toLowerCase()) { + if ( + fromAddress.toLowerCase() === toAddress.toLowerCase() && + Number(selectedChain) !== 324 + ) { setHighestPosition(fromVault) setHighestApyVault(secToVault) setPositionVaultAddress(fromAddress) @@ -916,7 +925,22 @@ const Migrate = () => { setTokenDepo(noConToken) } setButtonName('Connect Wallet') - } else if (connected) { + } else if (isSpecialChain && !isEmpty(userStats)) { + const defaultVault = { + vaultApy: 0, + vault: {}, + } + toId = 'moonwell_USDC' + const noConToken = groupOfVaults[toId.toString()] + const noConAddress = '0x90613e167D42CA420942082157B42AF6fc6a8087' + const defaultApy = getVaultApy(noConAddress, groupOfVaults, vaultsData, pools) + defaultVault.vaultApy = defaultApy + defaultVault.vault = noConToken + setHighestApyVault(defaultVault) + setHighestVaultAddress(noConAddress) + setTokenDepo(noConToken) + setButtonName('Change Network to Base') + } else if (connected && Number(selectedChain) !== 324) { setButtonName() setHighestApyVault() setHighestPosition() @@ -955,6 +979,7 @@ const Migrate = () => { setFilteredFarmList(filteredVaultList) // eslint-disable-next-line react-hooks/exhaustive-deps }, [ + selectedChain, connected, showInactiveFarms, farmTokenList, @@ -976,6 +1001,7 @@ const Migrate = () => { positionVaultAddress, pickedTokenWith, noPosition, + userStats, ]) useEffect(() => { @@ -1014,6 +1040,13 @@ const Migrate = () => { connectAction() return } + if (Number(chainId) === 324) { + const chain = 8453 + const chainHex = `0x${Number(chain).toString(16)}` + if (!isSpecialApp) { + setChain({ chainId: chainHex }) + } + } if (chainId && curChain) { if (chainId.toString() !== curChain.toString()) { const chainHex = `0x${Number(curChain).toString(16)}` @@ -1121,16 +1154,18 @@ const Migrate = () => { : positionToken.platform[0] && positionToken.platform[0] } if (highestApyVault) { - vaultToken = highestApyVault.vault - const id = highestApyVault.vault.poolVault ? 'FARM' : highestApyVault.vault.pool.id - const vaultUseFARM = id === FARM_TOKEN_SYMBOL - vaultPlatform = vaultUseFARM - ? tokens[IFARM_TOKEN_SYMBOL].subLabel - ? `${tokens[IFARM_TOKEN_SYMBOL].platform[0]} - ${tokens[IFARM_TOKEN_SYMBOL].subLabel}` - : tokens[IFARM_TOKEN_SYMBOL].platform[0] - : vaultToken.subLabel - ? vaultToken.platform[0] && `${vaultToken.platform[0]} - ${vaultToken.subLabel}` - : vaultToken.platform[0] && vaultToken.platform[0] + if (highestApyVault.vault.vaultPrice) { + vaultToken = highestApyVault.vault + const id = highestApyVault.vault.poolVault ? 'FARM' : highestApyVault.vault.pool.id + const vaultUseFARM = id === FARM_TOKEN_SYMBOL + vaultPlatform = vaultUseFARM + ? tokens[IFARM_TOKEN_SYMBOL].subLabel + ? `${tokens[IFARM_TOKEN_SYMBOL].platform[0]} - ${tokens[IFARM_TOKEN_SYMBOL].subLabel}` + : tokens[IFARM_TOKEN_SYMBOL].platform[0] + : vaultToken.subLabel + ? vaultToken.platform[0] && `${vaultToken.platform[0]} - ${vaultToken.subLabel}` + : vaultToken.platform[0] && vaultToken.platform[0] + } } if (highestPosition) { setHighPositionPlatform(positionPlatform) @@ -1138,7 +1173,7 @@ const Migrate = () => { if (vaultPlatform) { setHighVaultPlatform(vaultPlatform) } - }, [highestPosition, highestApyVault]) // eslint-disable-line react-hooks/exhaustive-deps + }, [highestPosition, highestApyVault, chainId]) // eslint-disable-line react-hooks/exhaustive-deps return ( @@ -1227,7 +1262,7 @@ const Migrate = () => { backColor={backColor} hoverColor={filterChainHoverColor} borderColor={borderColor} - className={selectedChain.toString() === item.chainId.toString() ? 'active' : ''} + className={chainId.toString() === item.chainId.toString() ? 'active' : ''} data-tip data-for={`chain-${item.name}`} key={i} @@ -1257,7 +1292,7 @@ const Migrate = () => { }} className={!connected || noPosition ? 'inactive' : ''} > - {!connected || (noPosition && highestApyVault) ? ( + {!connected || (noPosition && highestApyVault) || isSpecialChain ? ( No positions found. @@ -1511,7 +1546,7 @@ const Migrate = () => { height="24px" color={darkMode ? '#ffffff' : '#344054'} > - {!connected || (noPosition && highestApyVault) ? ( + {!connected || (noPosition && highestApyVault) || isSpecialChain ? ( '0%' ) : highestPosition ? ( `${highestPosition.apy}%` @@ -1519,7 +1554,12 @@ const Migrate = () => { )}{' '} - {highestPosition || !connected || (noPosition && highestApyVault) ? '→' : ''} + {highestPosition || + !connected || + (noPosition && highestApyVault) || + isSpecialChain + ? '→' + : ''} {highestApyVault ? `${highestApyVault.vaultApy}%` : } @@ -1545,7 +1585,7 @@ const Migrate = () => { height="24px" color={darkMode ? '#ffffff' : '#344054'} > - {!connected || (noPosition && highestApyVault) ? ( + {!connected || (noPosition && highestApyVault) || isSpecialChain ? ( `${currencySym}0.00/yr` ) : highestPosition ? ( `${currencySym}${formatNumber((highestPosition.apy * positionBalance) / 100)}/yr` @@ -1553,7 +1593,12 @@ const Migrate = () => { )}{' '} - {highestPosition || !connected || (noPosition && highestApyVault) ? '→' : ''} + {highestPosition || + !connected || + (noPosition && highestApyVault) || + isSpecialChain + ? '→' + : ''} {highestApyVault ? ( @@ -1594,7 +1639,11 @@ const Migrate = () => { onClickMigrate() }} > - From 4ea953947407c60340de5cfdae5534436b719cd2 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 28 Oct 2024 21:10:25 +0900 Subject: [PATCH 11/11] Fix dependency issue --- src/pages/Migrate/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Migrate/index.js b/src/pages/Migrate/index.js index 93cefa453..f47b0b4a4 100644 --- a/src/pages/Migrate/index.js +++ b/src/pages/Migrate/index.js @@ -203,7 +203,7 @@ const Migrate = () => { // setHighestApyVault() // setNetworkMatchList([]) // setMatchVaultList([]) - }, [selectedChain, connected, chainId, userStats]) + }, [selectedChain, connected, chainId, userStats, isSpecialChain]) useEffect(() => { if (isSpecialChain) { @@ -211,7 +211,7 @@ const Migrate = () => { } else { setSelectedChain(chainId) } - }, [chainId]) + }, [chainId, isSpecialChain]) useEffect(() => { if (highestApyVault && connected) {