LP earning classic page (#2133)

* Add classic page (#2053) * wip: add MyEarning to header * wip: implement earning dashboard * wip: remove transition in pie chart * wip: card background and button variant * null check * wip: multicall work * wip: work get tick data from another chainId * wip: add liquidity button * wip: update style for stats values * wip: check with arbitrum & ethereum * fix backdrop of liquidity range chart by using unique ids * view more positions button * minor style * wip: responsive * wip: display token logo with chain logo in breakdown chart * adapt to new UI design * farm available tooltip * show only active positions * adapt to new UI design * today change diff * wip * handle empty state * fill data for missing days * show/hide closed positions * show number of active/inactive/closed positions * implement search function * show in range/out range position status * Responsive UI for extra small screens * implement Expand/Collapse all pools * implement refresh button * wip: implement Share modal * done share ui * update env * use social utils c c c * cache share url * update api call fix update ch * wip: aggregate data in case data from data is missing * refactor: insert legacy elastic pool to tab list * refactor: use pool address to get pool data * wip: turn off aggregating data from frontend * wip: use prod env * refactor: use pool address to get price range chart data * Revert "refactor: use pool address to get pool data" This reverts commit 3e41dba. * Revert "refactor: use pool address to get price range chart data" This reverts commit b71b2e6. * fix: pass poolAddress to usePoolv2 This enables expand button to see positions of a pool in LP page * fix: show loading when re-fetching LP data * Revert "wip: turn off aggregating data from frontend" This reverts commit f7614fc. * fix: set default share mode according to the device * refactor: modify ClassicElasticPools tab * fix: fix hanging when switching tabs * env dev oaatuh * feat: aggregate account earnings across multiple chains * refactor: use data of the last day for other empty days * refactor: fill data for unavailable days * fix: calculate earning breakdown from earning tick * fix: crash due to null field * fix: fix build failed * refactor: select all chains by default * style: take more width and adjust width of single position * small refactor * refactor: fill empty days for position earnings * refactor: fill empty days for ticks * fix: calculate wrong fees due to modifying objects instead of deep-cloning it * chore: use dev env * use proxy token logo * feat: prepare queries for elastic earning * feat: make 2 separate requests for elastic and elastic legacy * refactor: turn off Liquidity chart of legacy positions by default * refactor: display at most 5 tokens in the tooltip of earning overtime panel * refactor: use compact notation for shared earning value * refactor: sort pools by TVL * refactor: group elastic and classic pools * fix: refresh button * wip: prepare for classic positions * fix crash * fix: merge earning tick * refactor: aggregate pool data BE now doesn't return `pools` in the response * feat: pending fees (#1988) * feat: pending fees * chore: fix prettier issue --------- Co-authored-by: Doan Sy Hung <hungdoansy@gmail.com> * try fix token logo when download * rm ununsed * chore: try debug share img * fix: not show logo when download * loading for btn share * test build * feat: calc apr, staked balance in position view (#1989) * refactor: make zoom out modal smaller * add scroll share modal if overflow * fix: rotate layout * feat: add Kyber logo to earning chart and add label * fix: use hard-coded token symbols * feat: view earnings button * fix: https://team-kyber.atlassian.net/browse/KGP-1259 c * refactor: not show labels if chart is in small container * refactor: use pointer for buttons * fix: not show labels if container width is < 400 * refactor: reduce height of zoom out earning modal * fix: fix wrong layout for zoom out modal * fix: remove border radius from my earnings overtime panel * feat: collect fees * feat: save the time period when viewing in modal * feat: add Analytic button for elastic positions * refactor: update style for Sharing modal * refactor: update url to Add Liquidity * refactor: add url to Remove Liquidity and Increase Liquidity * chore: suppress warnings/errors * style: update Expand All button * refactor: update style for View Earning/Position button * feat: implement classic pools * feat: display classic pool earnings * feat: implement position detail for classic pool * feat: click on each pool to expand/collapse * chore: update classic response * show some properties of Classic pools/positions * update urls for Remove/Add liquidity classic pools * feat: add up classic earnings * fix build failed * use prod env * update pool currency logos * make equal piece for pie chart with values of 0 * use env dev * display LP Token balance * display share of pool * style Share image * show copy address button for elastic pools * update view earnings or positions button * use pointer cursor for Share button * add banner * fix build failed * update add/increase liquidity links using native symbol * show native tokens instead of wrapped ones * try add proxy to logos * update currency logos in Share modal * fix build failed * fix NaN in earning pie chart * hide ConnectWalletFooter in MyEarnings page * sort data top to bottom in pie chart * update style for elastic/classic buttons * display Subscribe button in full * show icon only for Subscribe button in mobile * update placeholder for MyEarnings on mobile * update placeholder * disable remove/increase buttons if liquidity = 0 * update layout of positions * temp disable classic pools button * disable increase liquidity button for legacy positions * update layout for legends of LP pie chart * update link for MyEarnings in the banner * update style for elastic/classic tab * update color for Analytics button * exclude classic data * disable Add Liquidity button for Legacy pools * remove console.log * update position layout * adapt to medium-sized screens * shrink Legacy tag * adapt pie chart to medium screens * update format for fee numbers * move ActionButtons to a separate component * remove liquidity from elastic legacy position * show fees for legacy positions * revert api social env stg env prod * update texts * fix build failed * hardcode stg ks-setting c * refactor: update View Earnings/Positions * refactor: use calculated breakpoints * filter out empty token earnings * add tooltip for percent change * add token logo to token in earning area chart * show relative numbers if too small * handle change network glitch while collecting fees * avoid scientific notation * disable hover dropdown if no value * display 0 for $0 earning * auto refetch earning data after 5 minutes * disable hover dropdown if there's no liquidity * add mixpanel events * test * latest sdk * retain state while refetching data * update number formatters * stop propagation for click buttons in pool * try fix size logo when download * try fix size logo when download * update value formatter * refactor common codes of single pool * comment unused codes * usd value format * display my liquidity balance for each pool * display total APR * fix refetching LP with wrong chains * calculate total of token earnings * fix minor UI issues * get user farm data from custom chainId * adjust decimals for balance * sort positions by TVL * fix calling wrong farm contract to collect fees * revert token logo share modal c * no wrap small balances * remove video tutorial * update texts * update pending texts in modal * fix issue network changed before collecting fees * fix comments * sort closed positions by nft id * use proxy only in share earnings modal * refactor today * remove done todo * fix refreshing issue * sdk version * fix minor comments * remove classic page * Add classic page This reverts commit b87457e. --------- Co-authored-by: Danh <nguyenhoaidanh2096@gmail.com> Co-authored-by: Nguyen Van Viet <vietnv1304@gmail.com> * feat: handle classic * add no liquidity found * update missing info * fix: missing token * amp liq tooltip * disable some network * swithc to prod env * tooltip placement top * fix: select chain * revert env --------- Co-authored-by: Hung Doan <19758667+hungdoansy@users.noreply.github.com> Co-authored-by: Danh <nguyenhoaidanh2096@gmail.com>
KyberNetwork · Aug 10, 2023 · 00e2eea · 00e2eea
1 parent eae44c6
commit 00e2eea
Show file tree

Hide file tree

Showing 22 changed files with 1,154 additions and 190 deletions.
diff --git a/src/components/EarningAreaChart/index.tsx b/src/components/EarningAreaChart/index.tsx
@@ -57,16 +57,17 @@ const subscriptMap: { [key: string]: string } = {
 }
 
 const formatter = (value: string) => {
-  const num = Number(value)
+  const num = parseFloat(value)
   const numberOfZero = -Math.floor(Math.log10(num) + 1)
 
   if (num > 0 && num < 1 && numberOfZero > 2) {
-    const temp = Number(toFixed(num).split('.')[1])
+    const temp = Number(toFixed(num).split('.')[1]).toString()
+
     return `$0.0${numberOfZero
       .toString()
       .split('')
       .map(item => subscriptMap[item])
-      .join('')}${temp > 10 ? (temp / 10).toFixed(0) : temp}`
+      .join('')}${temp.substring(0, 2)}`
   }
 
   const formatter = Intl.NumberFormat('en-US', {
@@ -108,7 +109,15 @@ const EarningAreaChart: React.FC<Props> = ({ data, setHoverValue = EMPTY_FUNCTIO
             <stop offset="100%" stopColor={theme.primary} stopOpacity={0} />
           </linearGradient>
         </defs>
-        <XAxis angle={-30} dataKey="date" fontSize="12px" axisLine={false} tickLine={false} stroke={theme.subText} />
+        <XAxis
+          angle={-30}
+          dataKey="date"
+          fontSize="12px"
+          axisLine={false}
+          tickLine={false}
+          stroke={theme.subText}
+          interval={data.length == 7 ? 0 : data.length == 30 ? 1 : undefined}
+        />
         <YAxis
           fontSize="12px"
           axisLine={false}

diff --git a/src/components/SubscribeButton/index.tsx b/src/components/SubscribeButton/index.tsx
@@ -38,7 +38,9 @@ const SubscribeBtn = styled(ButtonPrimary)<{
     background: ${({ bgColor }) => bgColor};
   }
   ${({ iconOnly, bgColor }) => iconOnly && cssSubscribeBtnSmall(bgColor)};
-  ${({ theme, bgColor }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme, bgColor, iconOnly }) =>
+    iconOnly !== false &&
+    theme.mediaWidth.upToExtraSmall`
    ${cssSubscribeBtnSmall(bgColor)}
   `}
 `
@@ -48,13 +50,15 @@ const ButtonText = styled(Text)<{ iconOnly?: boolean }>`
   font-weight: 500;
   margin-left: 6px !important;
   ${({ iconOnly }) => iconOnly && `display: none`};
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme, iconOnly }) =>
+    iconOnly !== false &&
+    theme.mediaWidth.upToExtraSmall`
     display: none;
   `}
 `
 export default function SubscribeNotificationButton({
   subscribeTooltip,
-  iconOnly = false,
+  iconOnly,
   trackingEvent,
   onClick,
   topicId,

diff --git a/src/constants/networks.ts b/src/constants/networks.ts
@@ -212,7 +212,19 @@ export const SUPPORTED_NETWORKS_FOR_MY_EARNINGS = [
   ChainId.OASIS,
 ]
 export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS: ChainId[] = []
-export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY: ChainId[] = [ChainId.MATIC]
+export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY: ChainId[] = []
+export const COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC: ChainId[] = [
+  ChainId.CRONOS,
+  ChainId.OASIS,
+  ChainId.MATIC,
+  ChainId.BSCMAINNET,
+  ChainId.AVAXMAINNET,
+  ChainId.CRONOS,
+  ChainId.BTTC,
+  ChainId.VELAS,
+  ChainId.AURORA,
+  ChainId.OASIS,
+]
 
 // by pass invalid price impact/unable to calculate price impact/price impact too large
 export const CHAINS_BYPASS_PRICE_IMPACT = [ChainId.LINEA_TESTNET]
diff --git a/src/hooks/Tokens.ts b/src/hooks/Tokens.ts
@@ -304,6 +304,9 @@ export const fetchTokenByAddress = async (address: string, chainId: ChainId, sig
 }
 
 export const fetchListTokenByAddresses = async (address: string[], chainId: ChainId) => {
+  const cached = filterTruthy(address.map(addr => findCacheToken(addr)))
+  if (cached.length === address.length) return cached
+
   const response = await axios.get(`${KS_SETTING_API}/v1/tokens?addresses=${address}&chainIds=${chainId}`)
   const tokens = response?.data?.data?.tokens ?? []
   return filterTruthy(tokens.map(formatAndCacheToken)) as WrappedTokenInfo[]

diff --git a/src/pages/MyEarnings/ChainSelect.tsx b/src/pages/MyEarnings/ChainSelect.tsx
@@ -5,11 +5,18 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ButtonOutlined } from 'components/Button'
-import { SUPPORTED_NETWORKS_FOR_MY_EARNINGS } from 'constants/networks'
+import {
+  COMING_SOON_NETWORKS_FOR_MY_EARNINGS,
+  COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC,
+  COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY,
+  SUPPORTED_NETWORKS_FOR_MY_EARNINGS,
+} from 'constants/networks'
+import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect'
+import { useAppSelector } from 'state/hooks'
 import { selectChains } from 'state/myEarnings/actions'
 import { useShowMyEarningChart } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
@@ -49,7 +56,19 @@ const ChainSelect = () => {
   const dispatch = useDispatch()
   const { mixpanelHandler } = useMixpanel()
   const { chainId } = useActiveWeb3React()
-  const isValidNetwork = SUPPORTED_NETWORKS_FOR_MY_EARNINGS.includes(chainId)
+
+  const isLegacy = useAppSelector(state => state.myEarnings.activeTab === VERSION.ELASTIC_LEGACY)
+  const isClassic = useAppSelector(state => state.myEarnings.activeTab === VERSION.CLASSIC)
+
+  const comingSoonList = isLegacy
+    ? COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY
+    : isClassic
+    ? COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC
+    : COMING_SOON_NETWORKS_FOR_MY_EARNINGS
+
+  const networkList = SUPPORTED_NETWORKS_FOR_MY_EARNINGS.filter(item => !comingSoonList.includes(item))
+
+  const isValidNetwork = networkList.includes(chainId)
 
   const handleClickCurrentChain = () => {
     if (!isValidNetwork) {

diff --git a/src/pages/MyEarnings/ClassicElasticTab.tsx b/src/pages/MyEarnings/ClassicElasticTab.tsx
@@ -3,15 +3,15 @@ import { rgba } from 'polished'
 import { stringify } from 'querystring'
 import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { Link, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Flex, Text } from 'rebass'
 
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import { PoolClassicIcon, PoolElasticIcon } from 'components/Icons'
 import Wallet from 'components/Icons/Wallet'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { APP_PATHS, PROMM_ANALYTICS_URL } from 'constants/index'
+import { PROMM_ANALYTICS_URL } from 'constants/index'
 import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
 import useParsedQueryString from 'hooks/useParsedQueryString'
@@ -78,12 +78,10 @@ function ClassicElasticTab() {
     dispatch(setActiveTab(tab))
   }, [dispatch, tab])
 
-  useEffect(() => {
-    if (tab !== VERSION.ELASTIC && tab !== VERSION.ELASTIC_LEGACY) {
-      const newQs = { ...qs, tab: VERSION.ELASTIC }
-      navigate({ search: stringify(newQs) }, { replace: true })
-    }
-  }, [navigate, qs, tab])
+  const handleClickClassic = () => {
+    const newQs = { ...qs, tab: VERSION.CLASSIC }
+    navigate({ search: stringify(newQs) }, { replace: true })
+  }
 
   const renderComboPoolButtonsForMobile = () => {
     return (
@@ -124,8 +122,8 @@ function ClassicElasticTab() {
             <Flex
               role="button"
               alignItems="center"
-              // onClick={handleClickClassic}
-              color={tab === VERSION.CLASSIC ? theme.primary : rgba(theme.subText, 0.5)}
+              onClick={handleClickClassic}
+              color={tab === VERSION.CLASSIC ? theme.primary : theme.subText}
               sx={{
                 cursor: 'pointer',
                 gap: '8px',
@@ -137,7 +135,7 @@ function ClassicElasticTab() {
                   height: '16px',
                 }}
               >
-                <PoolClassicIcon size={16} color={tab === VERSION.CLASSIC ? theme.primary : rgba(theme.subText, 0.5)} />
+                <PoolClassicIcon size={16} color={tab === VERSION.CLASSIC ? theme.primary : theme.subText} />
               </Flex>
               <Text fontWeight={500} fontSize={'16px'} width={'auto'}>
                 <Trans>Classic Pools</Trans>
@@ -210,38 +208,29 @@ function ClassicElasticTab() {
   }
 
   const renderClassicPoolsButton = () => {
-    const color = tab === VERSION.CLASSIC ? theme.primary : theme.disableText
-    const here = <Link to={`${APP_PATHS.MY_POOLS}?tab=classic`}>here</Link>
+    const color = tab === VERSION.CLASSIC ? theme.primary : theme.subText
     return (
-      <MouseoverTooltip
-        text={
-          <Text>
-            <Trans>Coming soon. In the meantime, you can still manage your Classic liquidity positions {here}</Trans>
-          </Text>
-        }
-        placement="top"
+      <Flex
+        role="button"
+        alignItems="center"
+        color={color}
+        onClick={handleClickClassic}
+        style={{
+          cursor: 'pointer',
+        }}
       >
         <Flex
-          role="button"
-          alignItems="center"
-          color={color}
-          style={{
-            cursor: 'not-allowed',
+          sx={{
+            flex: '0 0 20px',
+            height: '20px',
           }}
         >
-          <Flex
-            sx={{
-              flex: '0 0 20px',
-              height: '20px',
-            }}
-          >
-            <PoolClassicIcon size={20} color={color} />
-          </Flex>
-          <Text fontWeight={500} fontSize={[18, 20, 24]} width={'auto'} marginLeft="4px" sx={{ whiteSpace: 'nowrap' }}>
-            <Trans>Classic Pools</Trans>
-          </Text>
+          <PoolClassicIcon size={20} color={color} />
         </Flex>
-      </MouseoverTooltip>
+        <Text fontWeight={500} fontSize={[18, 20, 24]} width={'auto'} marginLeft="4px" sx={{ whiteSpace: 'nowrap' }}>
+          <Trans>Classic Pools</Trans>
+        </Text>
+      </Flex>
     )
   }