diff --git a/package.json b/package.json
index b89d25bbf3..bb9bfc0cfd 100644
--- a/package.json
+++ b/package.json
@@ -178,6 +178,7 @@
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"@vitejs/plugin-react": "^3.1.0",
+ "@welldone-software/why-did-you-render": "^7.0.1",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-macros": "^3.1.0",
"env-cmd": "^10.1.0",
@@ -207,4 +208,4 @@
"@lingui/core": "3.14.0",
"@lingui/conf": "3.16.0"
}
-}
\ No newline at end of file
+}
diff --git a/src/components/HorizontalScroll.tsx b/src/components/HorizontalScroll.tsx
index 25faa23795..839ceb6f77 100644
--- a/src/components/HorizontalScroll.tsx
+++ b/src/components/HorizontalScroll.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, useEffect, useRef } from 'react'
+import { CSSProperties, Fragment, ReactNode, useEffect, useRef } from 'react'
import ScrollContainer from 'react-indiana-drag-scroll'
import { Flex } from 'rebass'
import styled from 'styled-components'
@@ -61,7 +61,9 @@ const HorizontalScroll = ({
>
- {(items ?? []).map(renderItem)}
+ {(items ?? []).map(i => (
+ {renderItem(i)}
+ ))}
diff --git a/src/components/YieldPools/ElasticFarmGroup/PostionDetail.tsx b/src/components/YieldPools/ElasticFarmGroup/PostionDetail.tsx
index 158b82b7dd..97c4a17256 100644
--- a/src/components/YieldPools/ElasticFarmGroup/PostionDetail.tsx
+++ b/src/components/YieldPools/ElasticFarmGroup/PostionDetail.tsx
@@ -11,7 +11,7 @@ import PriceVisualize from 'components/ProAmm/PriceVisualize'
import { MouseoverTooltipDesktopOnly } from 'components/Tooltip'
import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
import useTheme from 'hooks/useTheme'
-import { useElasticFarms, useFarmAction } from 'state/farms/elastic/hooks'
+import { useFarmAction, useUserInfoByFarm } from 'state/farms/elastic/hooks'
import { FarmingPool, NFTPosition } from 'state/farms/elastic/types'
import { Bound } from 'state/mint/proamm/type'
import { formatTickPrice } from 'utils/formatTickPrice'
@@ -42,8 +42,8 @@ const PositionDetail = ({
}: Props) => {
const theme = useTheme()
- const { userFarmInfo } = useElasticFarms()
- const joinedPositions = userFarmInfo?.[farmAddress]?.joinedPositions[pool.pid] || []
+ const userInfo = useUserInfoByFarm(farmAddress)
+ const joinedPositions = userInfo?.joinedPositions[pool.pid] || []
const { unstake } = useFarmAction(farmAddress)
const joinedInfo = joinedPositions.find(jp => jp.nftId.toString() === item.nftId.toString())
@@ -61,7 +61,7 @@ const PositionDetail = ({
const priceLower = !isRevertPrice ? item.token0PriceLower : item.token0PriceUpper.invert()
const priceUpper = !isRevertPrice ? item.token0PriceUpper : item.token0PriceLower.invert()
- const rewardByNft = userFarmInfo?.[farmAddress]?.rewardByNft
+ const rewardByNft = userInfo?.rewardByNft
const rewards = rewardByNft?.[pool.pid + '_' + item.nftId.toString()] || []
const rewardValue = rewards.reduce(
diff --git a/src/components/YieldPools/ElasticFarmGroup/Row.tsx b/src/components/YieldPools/ElasticFarmGroup/Row.tsx
index 9d6e8c9826..832addf5dc 100644
--- a/src/components/YieldPools/ElasticFarmGroup/Row.tsx
+++ b/src/components/YieldPools/ElasticFarmGroup/Row.tsx
@@ -1,9 +1,8 @@
-import { ChainId, CurrencyAmount, Fraction } from '@kyberswap/ks-sdk-core'
-import { computePoolAddress } from '@kyberswap/ks-sdk-elastic'
+import { CurrencyAmount, Fraction } from '@kyberswap/ks-sdk-core'
import { Trans, t } from '@lingui/macro'
import dayjs from 'dayjs'
import { BigNumber } from 'ethers'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
import { Info, Minus, Plus, Share2 } from 'react-feather'
import { Link } from 'react-router-dom'
import { useMedia } from 'react-use'
@@ -19,15 +18,15 @@ import Harvest from 'components/Icons/Harvest'
import InfoHelper from 'components/InfoHelper'
import { MouseoverTooltip, MouseoverTooltipDesktopOnly } from 'components/Tooltip'
import { APP_PATHS, ELASTIC_BASE_FEE_UNIT } from 'constants/index'
-import { NETWORKS_INFO, isEVM } from 'constants/networks'
import { TOBE_EXTENDED_FARMING_POOLS } from 'constants/v2'
import { useActiveWeb3React } from 'hooks'
import { useProMMFarmContract } from 'hooks/useContract'
import { useProAmmPositions } from 'hooks/useProAmmPositions'
import useTheme from 'hooks/useTheme'
import { useShareFarmAddress } from 'state/farms/classic/hooks'
-import { useElasticFarms, usePositionFilter } from 'state/farms/elastic/hooks'
+import { useDepositedNftsByFarm, usePositionFilter, useUserInfoByFarm } from 'state/farms/elastic/hooks'
import { FarmingPool, NFTPosition } from 'state/farms/elastic/types'
+import { getPoolAddress } from 'state/mint/proamm/utils'
import { useViewMode } from 'state/user/hooks'
import { VIEW_MODE } from 'state/user/reducer'
import { shortenAddress } from 'utils'
@@ -73,26 +72,22 @@ const Row = ({
const above1000 = useMedia('(min-width: 1000px)')
const [isRevertPrice, setIsRevertPrice] = useState(false)
- const { userFarmInfo } = useElasticFarms()
- const joinedPositions = userFarmInfo?.[fairlaunchAddress]?.joinedPositions[farmingPool.pid] || []
+ const userInfo = useUserInfoByFarm(fairlaunchAddress)
+
+ const joinedPositions = userInfo?.joinedPositions[farmingPool.pid] || []
+
+ const depositedPositionsByFarm = useDepositedNftsByFarm(fairlaunchAddress)
const depositedPositions =
- userFarmInfo?.[fairlaunchAddress]?.depositedPositions.filter(pos => {
+ depositedPositionsByFarm.filter(pos => {
return (
pos.liquidity.toString() !== '0' &&
- farmingPool.poolAddress.toLowerCase() ===
- computePoolAddress({
- factoryAddress: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.coreFactory,
- tokenA: pos.pool.token0,
- tokenB: pos.pool.token1,
- fee: pos.pool.fee,
- initCodeHashManualOverride: NETWORKS_INFO[isEVM(chainId) ? chainId : ChainId.MAINNET].elastic.initCodeHash,
- }).toLowerCase()
+ farmingPool.poolAddress.toLowerCase() === getPoolAddress(pos.pool).toLowerCase()
)
}) || []
const rewardPendings =
- userFarmInfo?.[fairlaunchAddress]?.rewardPendings[farmingPool.pid] ||
+ userInfo?.rewardPendings[farmingPool.pid] ||
farmingPool.rewardTokens.map(token => CurrencyAmount.fromRawAmount(token, 0))
const rewardValue = rewardPendings.reduce(
@@ -108,7 +103,7 @@ const Row = ({
useEffect(() => {
const getFeeTargetInfo = async () => {
if (!contract || farmingPool.feeTarget === '0') return
- const userJoinedPos = userFarmInfo?.[fairlaunchAddress].joinedPositions[farmingPool.pid] || []
+ const userJoinedPos = userInfo.joinedPositions[farmingPool.pid] || []
if (!userJoinedPos.length) {
setTargetPercent('')
@@ -143,7 +138,7 @@ const Row = ({
}
getFeeTargetInfo()
- }, [contract, farmingPool.feeTarget, fairlaunchAddress, farmingPool.pid, userFarmInfo])
+ }, [contract, farmingPool.feeTarget, fairlaunchAddress, farmingPool.pid, userInfo])
const { positions } = useProAmmPositions(account)
@@ -537,4 +532,4 @@ const Row = ({
)
}
-export default Row
+export default React.memo(Row)
diff --git a/src/components/YieldPools/ElasticFarmGroup/index.tsx b/src/components/YieldPools/ElasticFarmGroup/index.tsx
index 83c8d40f1d..6afe935553 100644
--- a/src/components/YieldPools/ElasticFarmGroup/index.tsx
+++ b/src/components/YieldPools/ElasticFarmGroup/index.tsx
@@ -22,8 +22,8 @@ import { useProAmmNFTPositionManagerContract } from 'hooks/useContract'
import useTheme from 'hooks/useTheme'
import { Dots } from 'pages/Pool/styleds'
import { useWalletModalToggle } from 'state/application/hooks'
-import { useElasticFarms, useFarmAction } from 'state/farms/elastic/hooks'
-import { FarmingPool, UserInfo } from 'state/farms/elastic/types'
+import { useDepositedNftsByFarm, useElasticFarms, useFarmAction, useUserInfoByFarm } from 'state/farms/elastic/hooks'
+import { FarmingPool } from 'state/farms/elastic/types'
import { useSingleCallResult } from 'state/multicall/hooks'
import { useIsTransactionPending } from 'state/transactions/hooks'
import { useViewMode } from 'state/user/hooks'
@@ -61,7 +61,6 @@ type Props = {
pool?: FarmingPool,
) => void
pools: FarmingPool[]
- userInfo?: UserInfo
onShowStepGuide: () => void
tokenPrices: { [key: string]: number }
}
@@ -80,11 +79,14 @@ enum SORT_DIRECTION {
DESC = 'desc',
}
-const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo, onShowStepGuide, tokenPrices }) => {
+const ElasticFarmGroup: React.FC = ({ address, onOpenModal, pools, onShowStepGuide, tokenPrices }) => {
const theme = useTheme()
const { account, chainId } = useActiveWeb3React()
const above1000 = useMedia('(min-width: 1000px)')
+ const depositedPositions = useDepositedNftsByFarm(address)
+ const userInfo = useUserInfoByFarm(address)
+
const [searchParams, setSearchParams] = useSearchParams()
const sortField = searchParams.get('orderBy') || SORT_FIELD.MY_DEPOSIT
const sortDirection = searchParams.get('orderDirection') || SORT_DIRECTION.DESC
@@ -92,7 +94,7 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
const { poolFeeLast24h } = useElasticFarms()
const depositedUsd =
- userInfo?.depositedPositions.reduce(
+ depositedPositions.reduce(
(acc, cur) =>
acc +
Number(cur.amount0.toExact()) * (tokenPrices[cur.amount0.currency.wrapped.address] || 0) +
@@ -101,7 +103,7 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
) || 0
const userDepositedTokenAmounts =
- userInfo?.depositedPositions.reduce<{
+ depositedPositions.reduce<{
[address: string]: CurrencyAmount
}>((result, pos) => {
const address0 = pos.amount0.currency.address
@@ -156,8 +158,8 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
}
const joinedPositions = userInfo?.joinedPositions[pool.pid] || []
- const depositedPositions =
- userInfo?.depositedPositions.filter(pos => {
+ const poolDepositedPositions =
+ depositedPositions.filter(pos => {
return (
pool.poolAddress.toLowerCase() ===
computePoolAddress({
@@ -171,7 +173,7 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
)
}) || []
- const depositedUsd = depositedPositions.reduce(
+ const depositedUsd = poolDepositedPositions.reduce(
(usd, pos) =>
usd +
Number(pos.amount1.toExact()) * (tokenPrices[pos.pool.token1.address.toLowerCase()] || 0) +
@@ -258,7 +260,7 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
if (!pools) return null
const canHarvest = Object.values(userInfo?.rewardPendings || {}).some(rw => rw.some(item => item.greaterThan('0')))
- const canWithdraw = !!userInfo?.depositedPositions.length
+ const canWithdraw = !!depositedPositions.length
const renderApproveButton = () => {
if (isApprovedForAll || tab === 'ended') {
@@ -747,4 +749,4 @@ const ProMMFarmGroup: React.FC = ({ address, onOpenModal, pools, userInfo
)
}
-export default ProMMFarmGroup
+export default ElasticFarmGroup
diff --git a/src/components/YieldPools/ElasticFarmModals/DepositModal.tsx b/src/components/YieldPools/ElasticFarmModals/DepositModal.tsx
index 052d3ebfab..cf18fc4a2a 100644
--- a/src/components/YieldPools/ElasticFarmModals/DepositModal.tsx
+++ b/src/components/YieldPools/ElasticFarmModals/DepositModal.tsx
@@ -221,7 +221,7 @@ function ProMMDepositNFTModal({