fix bugs

KyberNetwork · Dec 16, 2024 · 8bb521a · 8bb521a
1 parent 06e7685
commit 8bb521a
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 26 deletions.
diff --git 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
@@ -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: <IconHighlightedPool width={20} color="#FF007A" />,
-    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 = () => {
         />
       </TableWrapper>
 
-      <Text
-        fontSize={14}
-        color={'#737373'}
-        textAlign={'center'}
-        fontStyle={'italic'}
-      >{t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`}</Text>
+      <Disclaimer>{t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`}</Disclaimer>
     </PoolPageWrapper>
   )
 }

diff --git 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
@@ -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 = () => {
           )}
         </MyLiquidityWrapper>
 
-        <Text
-          fontSize={14}
-          color={'#737373'}
-          textAlign={'center'}
-          fontStyle={'italic'}
-        >{t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`}</Text>
+        <Disclaimer>{t`KyberSwap provides tools for tracking & adding liquidity to third-party Protocols. For any pool-related concerns, please contact the respective Liquidity Protocol directly.`}</Disclaimer>
       </PositionPageWrapper>
     </>
   )

diff --git 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
@@ -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) => (
     <>
       <Flex alignItems="center" sx={{ gap: '12px' }}>
         <Icon icon={icon} size="small" />
-        <Text fontSize={20}>{_title}</Text>
+        <MouseoverTooltipDesktopOnly text={tooltip} placement="top">
+          <Text fontSize={20}>{title}</Text>
+        </MouseoverTooltipDesktopOnly>
       </Flex>
       <Box
         sx={{
@@ -363,7 +366,11 @@ export default function Earns() {
               })
             }}
           >
-            {title('Highlighted Pools', FireIcon)}
+            {title(
+              'Highlighted Pools',
+              'Pools matching your wallet tokens or top 24h volume pools if no wallet is connected',
+              FireIcon,
+            )}
             {isLoading ? (
               <LocalLoader />
             ) : (
@@ -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 ? (
                 <LocalLoader />
               ) : (
@@ -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 ? (
                 <LocalLoader />
               ) : (
@@ -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 ? (
                 <LocalLoader />
               ) : (

diff --git 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"