fix: lp collect fee (#2132)

* fix: lp collect fee

* feat: add disclaimer erc 20

* fix: add liqudity native symbol

src/components/ProAmm/ListPositions.tsx

@@ -15,6 +15,7 @@ import { MEDIA_WIDTHS } from 'theme'
 import { formattedNum } from 'utils'
 import { formatTickPrice } from 'utils/formatTickPrice'
 import { getTickToPrice } from 'utils/getTickToPrice'
+import { unwrappedToken } from 'utils/wrappedCurrency'
 
 import PriceVisualizeAlignCurrent from './PriceVisualizeAlignCurrent'
 
@@ -106,6 +107,9 @@ const PositionListItem = ({
   const priceUpper = getTickToPrice(tokenA, tokenB, position.tickUpper)
   const formattedLowerPrice = formatTickPrice(priceLower, ticksAtLimit, Bound.LOWER)
   const formattedUpperPrice = formatTickPrice(priceUpper, ticksAtLimit, Bound.UPPER)
+
+  const currency0 = unwrappedToken(position.amount0.currency)
+  const currency1 = unwrappedToken(position.amount1.currency)
   if (!priceLower || !priceUpper) return null
 
   return (
@@ -120,17 +124,17 @@ const PositionListItem = ({
           <>
             <RowItem>
               <Flex sx={{ gap: '4px' }} alignItems="center">
-                <CurrencyLogo currency={position.amount0.currency} size="16px" />
+                <CurrencyLogo currency={currency0} size="16px" />
                 <Text>
-                  {position.amount0.toSignificant(4)} {position.amount0.currency.symbol}
+                  {position.amount0.toSignificant(4)} {currency0.symbol}
                 </Text>
               </Flex>
             </RowItem>
             <RowItem>
               <Flex sx={{ gap: '4px' }} alignItems="center">
-                <CurrencyLogo currency={position.amount1.currency} size="16px" />
+                <CurrencyLogo currency={currency1} size="16px" />
                 <Text>
-                  {position.amount1.toSignificant(4)} {position.amount1.currency.symbol}
+                  {position.amount1.toSignificant(4)} {currency1.symbol}
                 </Text>
               </Flex>
             </RowItem>
@@ -159,18 +163,18 @@ const PositionListItem = ({
             <Flex sx={{ gap: '8px' }}>
               {/* {position.amount0.currency.symbol} */}
               <Flex sx={{ gap: '4px' }} alignItems="center">
-                <CurrencyLogo currency={position.amount0.currency} size="16px" />
+                <CurrencyLogo currency={currency0} size="16px" />
                 <Text>
-                  {position.amount0.toSignificant(4)} {position.amount0.currency.symbol}
+                  {position.amount0.toSignificant(4)} {currency0.symbol}
                 </Text>
               </Flex>
             </Flex>
             <Flex sx={{ gap: '8px' }}>
               {/* {position.amount1.currency.symbol} */}
               <Flex sx={{ gap: '4px' }} alignItems="center">
-                <CurrencyLogo currency={position.amount1.currency} size="16px" />
+                <CurrencyLogo currency={currency1} size="16px" />
                 <Text>
-                  {position.amount1.toSignificant(4)} {position.amount1.currency.symbol}
+                  {position.amount1.toSignificant(4)} {currency1.symbol}
                 </Text>
               </Flex>
             </Flex>
@@ -225,11 +229,11 @@ const ChartPositions = ({
       {upToSmall ? null : (
         <>
           <RowItem alignItems="flex-start">
-            <Trans>{positions[0].amount0.currency.symbol}</Trans>
+            <Trans>{unwrappedToken(positions[0].amount0.currency).symbol}</Trans>
           </RowItem>
 
           <RowItem alignItems="flex-start">
-            <Trans>{positions[0].amount1.currency.symbol}</Trans>
+            <Trans>{unwrappedToken(positions[0].amount1.currency).symbol}</Trans>
           </RowItem>
         </>
       )}
@@ -239,7 +243,7 @@ const ChartPositions = ({
           <Text>
             PRICE RANGE{' '}
             <Text as="span" sx={{ whiteSpace: 'nowrap' }}>
-              ({tokenB.symbol} per {tokenA.symbol})
+              ({unwrappedToken(tokenB).symbol} per {unwrappedToken(tokenA).symbol})
             </Text>
           </Text>
         </Trans>

src/pages/AddLiquidity/TokenPair.tsx

@@ -32,6 +32,7 @@ import { useCurrency } from 'hooks/Tokens'
 import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
 import useTheme from 'hooks/useTheme'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
+import DisclaimerERC20 from 'pages/AddLiquidityV2/components/DisclaimerERC20'
 import { Dots, Wrapper } from 'pages/Pool/styleds'
 import { useWalletModalToggle } from 'state/application/hooks'
 import { Field } from 'state/mint/actions'
@@ -670,6 +671,10 @@ const TokenPair = ({
               </Warning>
             )}
 
+            <DisclaimerERC20 href="https://docs.kyberswap.com/liquidity-solutions/kyberswap-elastic/user-guides/add-liquidity-to-an-existing-elastic-pool#non-standard-tokens" />
+
+            <div style={{ marginBottom: '1.5rem' }} />
+
             {!account ? (
               <ButtonLight onClick={toggleWalletModal}>
                 <Trans>Connect Wallet</Trans>

src/pages/AddLiquidityV2/components/DisclaimerERC20.tsx

@@ -0,0 +1,33 @@
+import { Trans } from '@lingui/macro'
+import { AlertTriangle } from 'react-feather'
+import { Flex, Text } from 'rebass'
+
+import { WarningCard } from 'components/Card'
+import useTheme from 'hooks/useTheme'
+import { ExternalLink } from 'theme'
+
+export default function DisclaimerERC20({ href }: { href?: string }) {
+  const theme = useTheme()
+  return (
+    <WarningCard padding="10px 16px">
+      <Flex alignItems="center" sx={{ gap: '12px' }} lineHeight={1.5}>
+        <AlertTriangle stroke={theme.warning} size="16px" />
+        <Text flex={1} fontSize={12}>
+          <Trans>
+            Disclaimer: KyberSwap is a permissionless protocol optimized for the standard ERC20 implementation only.
+            Please do your own research before you provide liquidity using tokens with unique mechanics (e.g. FOT,
+            Rebase, LP tokens, contract deposits, etc.). More info{' '}
+            <ExternalLink
+              href={
+                href ||
+                'https://docs.kyberswap.com/liquidity-solutions/kyberswap-elastic/user-guides/elastic-pool-creation#non-standard-tokens'
+              }
+            >
+              here
+            </ExternalLink>
+          </Trans>
+        </Text>
+      </Flex>
+    </WarningCard>
+  )
+}

src/pages/AddLiquidityV2/index.tsx

@@ -91,6 +91,7 @@ import { formatNotDollarAmount } from 'utils/numbers'
 import { SLIPPAGE_STATUS, checkRangeSlippage } from 'utils/slippage'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 
+import DisclaimerERC20 from './components/DisclaimerERC20'
 import NewPoolNote from './components/NewPoolNote'
 import { RANGE_LIST, rangeData } from './constants'
 import {
@@ -784,7 +785,7 @@ export default function AddLiquidity() {
   const [allowedSlippage] = useUserSlippageTolerance()
   const slippageStatus = checkRangeSlippage(allowedSlippage, false)
 
-  const warning = (
+  const warnings = (
     <Flex flexDirection="column" sx={{ gap: '12px' }} alignItems="flex-end" maxWidth={chartRef?.current?.clientWidth}>
       {noLiquidity && (
         <SubTextCard padding="10px 16px">
@@ -1327,7 +1328,7 @@ export default function AddLiquidity() {
             showGridListOption={false}
             bottomContent={() => (
               <Flex flexDirection="column" sx={{ gap: '12px' }}>
-                {warning}
+                {warnings}
                 <Row justify={isMultiplePosition ? 'flex-end' : 'flex-start'}>
                   <ButtonError
                     warning={isWarningButton}
@@ -1562,11 +1563,15 @@ export default function AddLiquidity() {
             {!upToMedium && <RightContainer gap="lg">{chart}</RightContainer>}
           </Flex>
           <Row flexDirection="column" sx={{ gap: '16px' }}>
-            {warning && (
+            {warnings && (
               <Row justify="flex-end">
-                <Flex>{warning}</Flex>
+                <Flex>{warnings}</Flex>
               </Row>
             )}
+            <Flex maxWidth={chartRef?.current?.clientWidth} alignSelf="flex-end">
+              <DisclaimerERC20 />
+            </Flex>
+
             <Row justify="flex-end">
               <Buttons />
             </Row>

src/pages/CreatePool/index.tsx

@@ -32,6 +32,7 @@ import { ApprovalState, useApproveCallback } from 'hooks/useApproveCallback'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
+import DisclaimerERC20 from 'pages/AddLiquidityV2/components/DisclaimerERC20'
 import { Dots, Wrapper } from 'pages/Pool/styleds'
 import { useWalletModalToggle } from 'state/application/hooks'
 import { Field } from 'state/mint/actions'
@@ -734,6 +735,8 @@ export default function CreatePool() {
                   </Warning>
                 )}
 
+                <DisclaimerERC20 href="https://docs.kyberswap.com/liquidity-solutions/kyberswap-classic/user-guides/classic-pool-creation#non-standard-tokens" />
+
                 {!account ? (
                   <ButtonLight onClick={toggleWalletModal}>
                     <Trans>Connect Wallet</Trans>

src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx

@@ -1,4 +1,4 @@
-import { ChainId } from '@kyberswap/ks-sdk-core'
+import { ChainId, Token } from '@kyberswap/ks-sdk-core'
 import { FeeAmount, Pool, Position } from '@kyberswap/ks-sdk-elastic'
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
@@ -130,7 +130,6 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
   const theme = useTheme()
   const { mixpanelHandler } = useMixpanel()
   const [isExpanded, setExpanded] = useState(false)
-  const tokensByChainId = useAppSelector(state => state.lists.mapWhitelistTokens)
   const tabletView = useMedia(`(max-width: ${WIDTHS[3]}px)`)
   const mobileView = useMedia(`(max-width: ${WIDTHS[2]}px)`)
 
@@ -146,11 +145,23 @@ const SinglePool: React.FC<Props> = ({ poolEarning, chainId, positionEarnings, p
       return []
     }
 
-    const currency0 = tokensByChainId[chainId][tokenAddress0]
-    const currency1 = tokensByChainId[chainId][tokenAddress1]
+    const currency0 = new Token(
+      chainId,
+      poolEarning.token0.id,
+      +poolEarning.token0.decimals,
+      poolEarning.token0.symbol,
+      poolEarning.token0.name,
+    )
+    const currency1 = new Token(
+      chainId,
+      poolEarning.token1.id,
+      +poolEarning.token1.decimals,
+      poolEarning.token1.symbol,
+      poolEarning.token0.name,
+    )
 
     return [currency0, currency1]
-  }, [chainId, poolEarning.token0.id, poolEarning.token1.id, tokensByChainId])
+  }, [chainId, poolEarning])
 
   const pool = useMemo(() => {
     if (currency0 && currency1)

src/pages/MyEarnings/ElasticPools/SinglePosition/PositionView.tsx

@@ -256,7 +256,7 @@ const PositionView: React.FC<CommonProps> = props => {
         feeValue0={feeReward0}
         feeValue1={feeReward1}
         hasUserDepositedInFarm={positionEarning.owner !== positionEarning.ownerOriginal}
-        farmAddress={positionEarning.joinedPositions?.[0]?.farmId}
+        farmAddress={positionEarning.depositedPosition?.farm || positionEarning.joinedPositions?.[0]?.farmId}
         poolAddress={positionEarning.pool.id}
         position={position}
         isLegacy={isLegacyPosition}

src/pages/Pool/index.tsx

@@ -33,7 +33,6 @@ import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
 import { useSyncNetworkParamWithStore } from 'hooks/web3/useSyncNetworkParamWithStore'
 import ElasticLegacy from 'pages/ElasticLegacy'
-import DeprecationBanner from 'pages/Pool/DeprecationBanner'
 import ProAmmPool from 'pages/ProAmmPool'
 import { useFarmsData, useTotalApr } from 'state/farms/classic/hooks'
 import { Farm } from 'state/farms/classic/types'
@@ -174,10 +173,7 @@ export default function PoolCombination() {
   return (
     <>
       <PageWrapper style={{ paddingBottom: '24px' }}>
-        <AutoColumn gap="24px">
-          <ClassicElasticTab />
-          <DeprecationBanner />
-        </AutoColumn>
+        <ClassicElasticTab />
         {tab === VERSION.ELASTIC ? (
           <ProAmmPool />
         ) : tab === VERSION.ELASTIC_LEGACY ? (

src/services/earning/index.ts

@@ -34,6 +34,7 @@ const earningApi = createApi({
           includeMyFarmApr: true,
           perPage: 1000,
           page: 1,
+          includeHistorical: true,
         }
 
         const [positionsRes, earningRes] = await Promise.all([
@@ -88,6 +89,7 @@ const earningApi = createApi({
           includeMyFarmApr: true,
           perPage: 1000,
           page: 1,
+          includeHistorical: true,
         }
 
         const [positionsRes, earningRes] = await Promise.all([

src/services/earning/types.ts

@@ -70,6 +70,9 @@ export type ElasticPositionEarningWithDetails = {
   pendingRewardUSD: string
   myPoolApr?: string
   myFarmApr?: string
+  depositedPosition?: {
+    farm: string
+  }
   joinedPositions?: {
     farmId: string
     farmingPool: {