diff --git a/package.json b/package.json index 5b26b022dc..27f49ce8e6 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@kyberswap/ks-sdk-classic": "^1.0.3", "@kyberswap/ks-sdk-core": "1.1.6", "@kyberswap/ks-sdk-elastic": "^1.1.2", - "kyberswap-liquidity-widgets": "^1.1.46", + "kyberswap-liquidity-widgets": "^1.1.47", "@kyberswap/oauth2": "1.0.2", "@lingui/macro": "^4.6.0", "@lingui/react": "^4.6.0", diff --git a/src/pages/Earns/PoolExplorer/index.tsx b/src/pages/Earns/PoolExplorer/index.tsx index ea346b8080..ca846c4448 100644 --- a/src/pages/Earns/PoolExplorer/index.tsx +++ b/src/pages/Earns/PoolExplorer/index.tsx @@ -27,6 +27,7 @@ import DropdownMenu, { MenuOption } from './DropdownMenu' import TableContent from './TableContent' import { ContentWrapper, + Disclaimer, HeadSection, PoolPageWrapper, TableHeader, @@ -56,7 +57,7 @@ const filterTags = [ label: 'Highlighted Pools', value: FilterTag.HIGHLIGHTED_POOL, icon: , - tooltip: '', + tooltip: 'Pools matching your wallet tokens or top 24h volume pools if no wallet is connected', }, { label: 'High APR', @@ -265,12 +266,7 @@ const Earn = () => { /> - {t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`} + {t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`} ) } diff --git a/src/pages/Earns/PoolExplorer/styles.tsx b/src/pages/Earns/PoolExplorer/styles.tsx index 3a5ac9745a..2430c4e162 100644 --- a/src/pages/Earns/PoolExplorer/styles.tsx +++ b/src/pages/Earns/PoolExplorer/styles.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components' import { Image } from 'components/Image' export const PoolPageWrapper = styled.div` - padding: 32px 24px 50px; + padding: 32px 24px 68px; width: 100%; max-width: 1500px; display: flex; @@ -177,3 +177,20 @@ export const MobileTableBottomRow = styled.div<{ withoutBorder: boolean }>` padding: 16px 0; border-bottom: ${({ withoutBorder, theme }) => (withoutBorder ? 'none' : `1px solid ${theme.tableHeader}`)}; ` + +export const Disclaimer = styled.div` + font-size: 14px; + font-style: italic; + color: #737373; + text-align: center; + width: 100%; + position: absolute; + bottom: 28px; + left: 50%; + transform: translateX(-50%); + padding: 0 16px; + + ${({ theme }) => theme.mediaWidth.upToMedium` + bottom: 20px; + `} +` diff --git a/src/pages/Earns/UserPositions/index.tsx b/src/pages/Earns/UserPositions/index.tsx index 8582d9a75f..0c3acc0b19 100644 --- a/src/pages/Earns/UserPositions/index.tsx +++ b/src/pages/Earns/UserPositions/index.tsx @@ -16,7 +16,7 @@ import { MEDIA_WIDTHS } from 'theme' import { shortenAddress } from 'utils' import { formatDisplayNumber } from 'utils/numbers' -import { CurrencyRoundedImage, CurrencySecondImage } from '../PoolExplorer/styles' +import { CurrencyRoundedImage, CurrencySecondImage, Disclaimer } from '../PoolExplorer/styles' import useLiquidityWidget from '../useLiquidityWidget' import { Badge, @@ -241,12 +241,7 @@ const MyPositions = () => { )} - {t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`} + {t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`} ) diff --git a/src/pages/Earns/UserPositions/styles.tsx b/src/pages/Earns/UserPositions/styles.tsx index 1bc3dbed88..3416ea2cd4 100644 --- a/src/pages/Earns/UserPositions/styles.tsx +++ b/src/pages/Earns/UserPositions/styles.tsx @@ -78,6 +78,7 @@ export const ChainImage = styled.img` export const DexImage = styled.img` width: 16px; height: 16px; + border-radius: 50%; ` export enum BadgeType { diff --git a/src/pages/Earns/index.tsx b/src/pages/Earns/index.tsx index 68042219e8..b1b65810f8 100644 --- a/src/pages/Earns/index.tsx +++ b/src/pages/Earns/index.tsx @@ -18,6 +18,7 @@ import SolidEarningIcon from 'assets/svg/solid-earning.svg' import StakingIcon from 'assets/svg/staking.svg' import { ButtonPrimary } from 'components/Button' import LocalLoader from 'components/LocalLoader' +import { MouseoverTooltipDesktopOnly } from 'components/Tooltip' import { APP_PATHS } from 'constants/index' import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useTheme from 'hooks/useTheme' @@ -286,11 +287,13 @@ export default function Earns() { const theme = useTheme() const { isLoading, data } = useExplorerLandingQuery() - const title = (_title: string, icon: string) => ( + const title = (title: string, tooltip: string, icon: string) => ( <> - {_title} + + {title} + - {title('Highlighted Pools', FireIcon)} + {title( + 'Highlighted Pools', + 'Pools matching your wallet tokens or top 24h volume pools if no wallet is connected', + FireIcon, + )} {isLoading ? ( ) : ( @@ -400,7 +407,7 @@ export default function Earns() { }) }} > - {title('High APR', RocketIcon)} + {title('High APR', 'Top 100 Pools with assets that offer exceptionally high APYs', RocketIcon)} {isLoading ? ( ) : ( @@ -429,7 +436,11 @@ export default function Earns() { }) }} > - {title('Low Volatility', LowVolatilityIcon)} + {title( + 'Low Volatility', + 'Top 100 highest TVL Pools consisting of stable coins or correlated pairs', + LowVolatilityIcon, + )} {isLoading ? ( ) : ( @@ -458,7 +469,11 @@ export default function Earns() { }) }} > - {title('Solid Earning', SolidEarningIcon)} + {title( + 'Solid Earning', + 'Top 100 pools that have the high total earned fee in the last 7 days', + SolidEarningIcon, + )} {isLoading ? ( ) : ( diff --git a/yarn.lock b/yarn.lock index d04832532c..eaad070a16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14251,10 +14251,10 @@ kleur@^4.0.3: resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== -kyberswap-liquidity-widgets@^1.1.46: - version "1.1.46" - resolved "https://registry.yarnpkg.com/kyberswap-liquidity-widgets/-/kyberswap-liquidity-widgets-1.1.46.tgz#1cf01a03a851c31928f587284d0cb6ca5359fdd9" - integrity sha512-U+nr2R4X+zQTnbFS/rkER/aLBN/DJC0AmwgX2XZtSeBXgOx3BE8RSxK/MYIT0ZhzyWOWgQJb5w7sQb7058T1vQ== +kyberswap-liquidity-widgets@^1.1.47: + version "1.1.47" + resolved "https://registry.yarnpkg.com/kyberswap-liquidity-widgets/-/kyberswap-liquidity-widgets-1.1.47.tgz#63231fdce741c0cb76949422aa01e041567b7823" + integrity sha512-eshpnDUbM9C35Yw+IfMpES34xdmNW1VisDK/OwIZRWyCk4iXqVYps3s/A378vvsrs4O8Oauj6M4OFg+wZRWB+w== dependencies: "@ethersproject/providers" "^5.7.2" "@kyberswap/ks-sdk-core" "^1.1.5"