Skip to content

Commit

Permalink
Pool farm improvement (#2178)
Browse files Browse the repository at this point in the history
* feat: show static farm total reward

* fix: addliquidity multiple pos for farm

* env proid

* revert env
  • Loading branch information
viet-nv authored and nguyenhoaidanh committed Aug 18, 2023
1 parent 6acc313 commit cfc9f63
Show file tree
Hide file tree
Showing 6 changed files with 157 additions and 68 deletions.
51 changes: 33 additions & 18 deletions src/pages/AddLiquidityV2/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -224,21 +224,24 @@ export default function AddLiquidity() {
const poolAddress = useProAmmPoolInfo(baseCurrency, currencyB, feeAmount)

const { farms } = useElasticFarmsV2()
const farmV2 = farms?.find(

const farmV2S = farms?.filter(
item =>
!item.isSettled &&
item.endTime > Date.now() / 1000 &&
item.poolAddress.toLowerCase() === poolAddress.toLowerCase(),
)

const activeRanges = farmV2?.ranges.filter(r => !r.isRemoved) || []
const activeRanges =
farmV2S?.map(farm => farm.ranges.filter(item => !item.isRemoved).map(item => ({ ...item, farm }))).flat() || []

const isFarmV2Available = !!farmV2
const isFarmV2Available = !!farmV2S?.length

const [showFarmRangeSelect, setShowFarmRangeSelect] = useState(() => isFarmV2Available)
const [searchParams, setSearchParams] = useSearchParams()
const activeRangeIndex = Number(searchParams.get('farmRange') || '0')
const range = activeRanges.find(i => i.index === activeRangeIndex)
const defaultFId = Number(searchParams.get('fId') || '0')
const range = activeRanges.find(i => i.index === activeRangeIndex && i.farm.fId === defaultFId)

const canJoinFarm =
isFarmV2Available &&
Expand Down Expand Up @@ -928,7 +931,7 @@ export default function AddLiquidity() {
const [shownTooltip, setShownTooltip] = useState<RANGE | null>(null)
const pairFactor = usePairFactor([tokenA, tokenB])

const isReverseWithFarm = baseCurrency?.wrapped.address !== farmV2?.token0.wrapped.address
const isReverseWithFarm = baseCurrency?.wrapped.address !== farmV2S?.[0]?.token0.wrapped.address

const chart = (
<ChartWrapper ref={chartRef}>
Expand Down Expand Up @@ -1001,34 +1004,35 @@ export default function AddLiquidity() {
</>
)}
</Flex>
{showFarmRangeSelect && !!farmV2 && (
{showFarmRangeSelect && !!activeRanges.length && farmV2S?.[0] && (
<Flex sx={{ gap: '8px' }} flexWrap="wrap">
{farmV2.ranges.map(range => {
{activeRanges.map(range => {
if (range.isRemoved) return null
return (
<RangeBtn
style={{ width: 'fit-content' }}
key={range.index}
key={range.farm.fId + '_' + range.index}
onClick={() => {
searchParams.set('farmRange', range.index.toString())
searchParams.set('fId', range.farm.fId.toString())
setSearchParams(searchParams)
onFarmRangeSelected(+range.tickLower, +range.tickUpper)
}}
isSelected={activeRangeIndex === range.index}
isSelected={activeRangeIndex === range.index && defaultFId === range.farm.fId}
>
<Flex alignItems="center" sx={{ gap: '2px' }}>
{convertTickToPrice(
isReverseWithFarm ? farmV2.token1 : farmV2.token0,
isReverseWithFarm ? farmV2.token0 : farmV2.token1,
isReverseWithFarm ? farmV2S[0].token1 : farmV2S[0].token0,
isReverseWithFarm ? farmV2S[0].token0 : farmV2S[0].token1,
isReverseWithFarm ? range.tickUpper : range.tickLower,
farmV2.pool.fee,
farmV2S[0].pool.fee,
)}
<TwoWayArrow />
{convertTickToPrice(
isReverseWithFarm ? farmV2.token1 : farmV2.token0,
isReverseWithFarm ? farmV2.token0 : farmV2.token1,
isReverseWithFarm ? farmV2S[0].token1 : farmV2S[0].token0,
isReverseWithFarm ? farmV2S[0].token0 : farmV2S[0].token1,
isReverseWithFarm ? range.tickLower : range.tickUpper,
farmV2.pool.fee,
farmV2S[0].pool.fee,
)}
</Flex>
</RangeBtn>
Expand Down Expand Up @@ -1314,11 +1318,22 @@ export default function AddLiquidity() {
)

useEffect(() => {
if (isFarmV2Available && range?.tickUpper && range?.tickUpper) {
if (isFarmV2Available) {
setShowFarmRangeSelect(true)
onFarmRangeSelected(range.tickLower, range.tickUpper)
} else setShowFarmRangeSelect(false)
}, [isFarmV2Available, range?.tickUpper, range?.tickLower, onFarmRangeSelected])
}, [isFarmV2Available])

useEffect(() => {
if (
isFarmV2Available &&
range?.tickUpper &&
range?.tickUpper &&
!positionsState[pIndex].leftRangeTypedValue &&
!positionsState[pIndex].rightRangeTypedValue
) {
onFarmRangeSelected(range.tickLower, range.tickUpper)
}
}, [isFarmV2Available, range?.tickUpper, range?.tickLower, onFarmRangeSelected, positionsState, pIndex])

if (!isEVM) return <Navigate to="/" />

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Farm/ElasticFarmv2/components/FarmCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ function FarmCard({
{range?.isRemoved ? (
<Trans>Idle Range</Trans>
) : (
<Link to={`${addliquidityElasticPool}?farmRange=${activeRangeIndex}`}>
<Link to={`${addliquidityElasticPool}?farmRange=${activeRangeIndex}&fId=${farm.fId}`}>
<Trans>Add Liquidity ↗</Trans>
</Link>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export default function NewRangesNotiModal({ updatedFarms }: { updatedFarms: Ela
{range.isRemoved ? (
<Trans>Idle Range</Trans>
) : (
<Link to={`${addliquidityElasticPool}?farmRange=${range.index}`}>
<Link to={`${addliquidityElasticPool}?farmRange=${range.index}&fId=${range.farm.fId}`}>
<Trans>Add Liquidity ↗</Trans>
</Link>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,9 @@ const StakeWithNFTsModal = ({

const addliquidityElasticPool = `/${networkInfo.route}${APP_PATHS.ELASTIC_CREATE_POOL}/${
farm.token0.isNative ? farm.token0.symbol : farm.token0.address
}/${farm.token1.isNative ? farm.token1.symbol : farm.token1.address}/${farm.pool.fee}?farmRange=${activeRange.index}`
}/${farm.token1.isNative ? farm.token1.symbol : farm.token1.address}/${farm.pool.fee}?farmRange=${
activeRange.index
}&fId=${farm.fId}`

const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)

Expand Down
163 changes: 117 additions & 46 deletions src/pages/Farm/ElasticFarmv2/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import CurrencyLogo from 'components/CurrencyLogo'
import Divider from 'components/Divider'
import HoverDropdown from 'components/HoverDropdown'
import InfoHelper from 'components/InfoHelper'
import { RowFit } from 'components/Row'
import { MouseoverTooltip, MouseoverTooltipDesktopOnly, TextDashed } from 'components/Tooltip'
import { ConnectWalletButton } from 'components/YieldPools/ElasticFarmGroup/buttons'
import { FarmList } from 'components/YieldPools/ElasticFarmGroup/styleds'
Expand Down Expand Up @@ -68,7 +67,7 @@ export default function ElasticFarmv2({
const theme = useTheme()
const { account } = useActiveWeb3React()
const above1000 = useMedia('(min-width: 1000px)')
const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)

const [searchParams, setSearchParams] = useSearchParams()

Expand All @@ -79,8 +78,20 @@ export default function ElasticFarmv2({
const depositedUsd =
userInfo?.reduce((acc, cur) => (cur.farmAddress === farmAddress ? acc + cur.positionUsdValue : acc), 0) || 0

const rewardUsd =
userInfo?.reduce((acc, cur) => (cur.farmAddress === farmAddress ? acc + cur.unclaimedRewardsUsd : acc), 0) || 0

const rewardTokenAmounts: { [address: string]: CurrencyAmount<Currency> } = {}
userInfo?.forEach(item => {
item.unclaimedRewards.forEach(rw => {
const address = rw.currency.isNative ? rw.currency.symbol || 'eth' : rw.currency.wrapped.address
if (!rewardTokenAmounts[address]) rewardTokenAmounts[address] = rw
else rewardTokenAmounts[address] = rewardTokenAmounts[address].add(rw)
})
})

const depositedTokenAmounts: { [address: string]: CurrencyAmount<Currency> } = {}
userInfo?.map(item => {
userInfo?.forEach(item => {
const address0 = item.position.amount0.currency.wrapped.address
const address1 = item.position.amount1.currency.wrapped.address
if (!depositedTokenAmounts[address0]) depositedTokenAmounts[address0] = item.position.amount0
Expand Down Expand Up @@ -110,53 +121,113 @@ export default function ElasticFarmv2({
const toggleWalletModal = useWalletModalToggle()
const renderApproveButton = () => {
if (!account) {
return <ConnectWalletButton onClick={toggleWalletModal} />
return (
<div style={{ width: 'max-content' }}>
<ConnectWalletButton onClick={toggleWalletModal} />
</div>
)
}
if (res?.loading) return <Dots />

if (isApprovedForAll) {
return (
<Flex sx={{ gap: '8px' }} alignItems="center">
<MouseoverTooltip
text={t`Total value of liquidity positions (i.e. NFT tokens) you've deposited into the farming contract`}
<Flex
sx={{ gap: '8px' }}
alignItems="center"
flexDirection={upToSmall ? 'column' : 'row'}
width={upToSmall ? '100%' : undefined}
>
<Flex
sx={{ gap: '8px' }}
alignItems="center"
justifyContent={upToSmall ? 'space-between' : undefined}
width={upToSmall ? '100%' : undefined}
>
<MouseoverTooltip
text={t`Total value of liquidity positions (i.e. NFT tokens) you've deposited into the farming contract`}
>
<TextDashed fontSize="12px" fontWeight="500" color={theme.subText}>
<Trans>Deposited Liquidity</Trans>
</TextDashed>
</MouseoverTooltip>

<HoverDropdown
style={{ padding: '0', color: theme.text }}
content={
account ? (
<Text as="span" fontSize="20px" fontWeight="500">
{formatDollarAmount(depositedUsd)}
</Text>
) : (
'--'
)
}
hideIcon={!account || !depositedUsd}
dropdownContent={
Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? (
<AutoColumn>
{Object.values(depositedTokenAmounts).map(
amount =>
amount.greaterThan(0) && (
<Flex alignItems="center" key={amount.currency.wrapped.address}>
<CurrencyLogo currency={amount.currency} size="16px" />
<Text fontSize="12px" marginLeft="4px" fontWeight="500">
{amount.toSignificant(8)} {amount.currency.symbol}
</Text>
</Flex>
),
)}
</AutoColumn>
) : (
''
)
}
/>
</Flex>

<Flex
alignItems="center"
justifyContent={upToSmall ? 'space-between' : undefined}
sx={{ gap: '8px' }}
width={upToSmall ? '100%' : undefined}
>
<TextDashed fontSize="12px" fontWeight="500" color={theme.subText}>
<Trans>Deposited Liquidity</Trans>
</TextDashed>
</MouseoverTooltip>

<HoverDropdown
style={{ padding: '0', color: theme.text }}
content={
account ? (
<Text as="span" fontSize="20px" fontWeight="500">
{formatDollarAmount(depositedUsd)}
</Text>
) : (
'--'
)
}
hideIcon={!account || !depositedUsd}
dropdownContent={
Object.values(depositedTokenAmounts).some(amount => amount.greaterThan(0)) ? (
<AutoColumn>
{Object.values(depositedTokenAmounts).map(
amount =>
amount.greaterThan(0) && (
<Flex alignItems="center" key={amount.currency.wrapped.address}>
<CurrencyLogo currency={amount.currency} size="16px" />
<Text fontSize="12px" marginLeft="4px" fontWeight="500">
{amount.toSignificant(8)} {amount.currency.symbol}
</Text>
</Flex>
),
)}
</AutoColumn>
) : (
''
)
}
/>
<Text fontSize={12} color={theme.subText} fontWeight="500">
<Trans>Rewards</Trans>
</Text>

<HoverDropdown
style={{ padding: '0', color: theme.text }}
content={
account ? (
<Text as="span" fontSize="20px" fontWeight="500">
{formatDollarAmount(rewardUsd)}
</Text>
) : (
'--'
)
}
hideIcon={!account || !depositedUsd}
dropdownContent={
Object.values(rewardTokenAmounts).some(amount => amount.greaterThan(0)) ? (
<AutoColumn>
{Object.values(rewardTokenAmounts).map(
amount =>
amount.greaterThan(0) && (
<Flex alignItems="center" key={amount.currency.wrapped.address}>
<CurrencyLogo currency={amount.currency} size="16px" />
<Text fontSize="12px" marginLeft="4px" fontWeight="500">
{amount.toSignificant(8)} {amount.currency.symbol}
</Text>
</Flex>
),
)}
</AutoColumn>
) : (
''
)
}
/>
</Flex>
</Flex>
)
}
Expand Down Expand Up @@ -350,7 +421,7 @@ export default function ElasticFarmv2({
<Flex
justifyContent="space-between"
sx={{ gap: '1rem' }}
flexDirection={isApprovedForAll && upToExtraSmall ? 'column' : 'row'}
flexDirection={isApprovedForAll && upToSmall ? 'column' : 'row'}
>
<Flex fontSize="16px" alignItems="center" color={theme.text} sx={{ gap: '6px' }}>
<Trans>Static Farms</Trans>
Expand All @@ -366,7 +437,7 @@ export default function ElasticFarmv2({
<QuestionSquareIcon />
</Text>
</Flex>
<RowFit>{renderApproveButton()}</RowFit>
{renderApproveButton()}
</Flex>
<Divider />
<FarmList
Expand Down
3 changes: 2 additions & 1 deletion src/state/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,8 @@ const store = configureStore({
.concat(routeApi.middleware)
.concat(earningApi.middleware)
.concat(socialApi.middleware)
.concat(tokenApi.middleware),
.concat(tokenApi.middleware)
.concat(blockServiceApi.middleware),
preloadedState,
})

Expand Down

0 comments on commit cfc9f63

Please sign in to comment.