Skip to content
This repository has been archived by the owner on Oct 15, 2024. It is now read-only.

feat: enable fx pools #972

Merged
merged 9 commits into from
Sep 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lib/modules/pool/PoolDetail/PoolHeader/PoolBadges.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Badge, HStack } from '@chakra-ui/react'
import React from 'react'
import { Pool, usePool } from '../../PoolProvider'
import { isBoosted, isStable, isGyro, isWeighted } from '../../pool.helpers'
import { isBoosted, isStable, isGyro, isWeighted, isFx } from '../../pool.helpers'

function getPoolBadges(pool: Pool) {
const badges = []
Expand All @@ -12,6 +12,7 @@ function getPoolBadges(pool: Pool) {
if (isStable(pool.type)) badges.push('Stable')
if (isGyro(pool.type)) badges.push('Gyro')
if (isWeighted(pool.type)) badges.push('Weighted')
if (isFx(pool.type)) badges.push('FX')

return badges
}
Expand Down
35 changes: 32 additions & 3 deletions lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,46 @@
import { Stack, Button, VStack } from '@chakra-ui/react'
import { Stack, Button, VStack, useDisclosure } from '@chakra-ui/react'
import { usePathname, useRouter } from 'next/navigation'
import PoolMetaBadges from './PoolMetaBadges'

import { usePool } from '../../PoolProvider'
import { shouldBlockAddLiquidity } from '../../pool.helpers'
import { isFx, shouldBlockAddLiquidity } from '../../pool.helpers'
import { AnalyticsEvent, trackEvent } from '@/lib/shared/services/fathom/Fathom'
import { PoolCategories } from '../../categories/PoolCategories'
import { PoolBreadcrumbs } from './PoolBreadcrumbs'
import {
PartnerRedirectModal,
RedirectPartner,
} from '@/lib/shared/components/modals/PartnerRedirectModal'
import { useState } from 'react'
import { getXavePoolLink } from '../../pool.utils'

export function PoolHeader() {
const pathname = usePathname()
const { pool } = usePool()
const router = useRouter()
const [redirectPartner, setRedirectPartner] = useState<RedirectPartner>(RedirectPartner.Xave)
const [redirectPartnerUrl, setRedirectPartnerUrl] = useState<string>()
const partnerRedirectDisclosure = useDisclosure()

const isAddLiquidityBlocked = shouldBlockAddLiquidity(pool)

function openRedirectModal(partner: RedirectPartner) {
setRedirectPartner(partner)
let url
if (partner === RedirectPartner.Xave && pool?.address && pool.chain) {
url = getXavePoolLink(pool.chain, pool.address)
}
setRedirectPartnerUrl(url)
partnerRedirectDisclosure.onOpen()
}

function handleClick() {
trackEvent(AnalyticsEvent.ClickAddLiquidity)
router.push(`${pathname}/add-liquidity`)
if (isFx(pool.type)) {
openRedirectModal(RedirectPartner.Xave)
} else {
router.push(`${pathname}/add-liquidity`)
}
}

return (
Expand All @@ -40,6 +63,12 @@ export function PoolHeader() {
>
Add liquidity
</Button>
<PartnerRedirectModal
partner={redirectPartner}
redirectUrl={redirectPartnerUrl}
isOpen={partnerRedirectDisclosure.isOpen}
onClose={partnerRedirectDisclosure.onClose}
/>
</Stack>
</Stack>
</VStack>
Expand Down
63 changes: 50 additions & 13 deletions lib/modules/pool/PoolDetail/PoolMyLiquidity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ import { Address } from 'viem'
import { usePathname, useRouter } from 'next/navigation'
import { useCurrency } from '@/lib/shared/hooks/useCurrency'
import { keyBy } from 'lodash'
import { getAuraPoolLink, getProportionalExitAmountsFromScaledBptIn } from '../pool.utils'
import {
getAuraPoolLink,
getProportionalExitAmountsFromScaledBptIn,
getXavePoolLink,
} from '../pool.utils'
import { useUserAccount } from '../../web3/UserAccountProvider'
import { bn, fNum } from '@/lib/shared/utils/numbers'
import {
Expand All @@ -37,7 +41,7 @@ import {
shouldMigrateStake,
calcGaugeStakedBalance,
} from '../user-balance.helpers'
import { isVebalPool, shouldBlockAddLiquidity, calcUserShareOfPool } from '../pool.helpers'
import { isVebalPool, shouldBlockAddLiquidity, calcUserShareOfPool, isFx } from '../pool.helpers'

import { getCanStake, migrateStakeTooltipLabel } from '../actions/stake.helpers'
import { InfoOutlineIcon } from '@chakra-ui/icons'
Expand Down Expand Up @@ -72,7 +76,9 @@ export default function PoolMyLiquidity() {
const { toCurrency } = useCurrency()
const { isConnected, isConnecting } = useUserAccount()
const router = useRouter()
const auraDisclosure = useDisclosure()
const partnerRedirectDisclosure = useDisclosure()
const [redirectPartner, setRedirectPartner] = useState<RedirectPartner>(RedirectPartner.Aura)
const [redirectPartnerUrl, setRedirectPartnerUrl] = useState<string>()

const isVeBal = isVebalPool(pool.id)
const tabs = useMemo(() => {
Expand Down Expand Up @@ -222,6 +228,34 @@ export default function PoolMyLiquidity() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tabs, pool])

function openRedirectModal(partner: RedirectPartner) {
setRedirectPartner(partner)
let url
if (partner === RedirectPartner.Aura && pool?.staking?.aura?.auraPoolId) {
url = getAuraPoolLink(chainId, pool.staking.aura.auraPoolId)
} else if (partner === RedirectPartner.Xave && pool?.address && pool.chain) {
url = getXavePoolLink(pool.chain, pool.address)
}
setRedirectPartnerUrl(url)
partnerRedirectDisclosure.onOpen()
}

function handleAddLiquidity() {
if (isFx(pool.type)) {
openRedirectModal(RedirectPartner.Xave)
} else {
router.push(`${pathname}/add-liquidity`)
}
}

function handleRemoveLiquidity() {
if (isFx(pool.type)) {
openRedirectModal(RedirectPartner.Xave)
} else {
router.push(`${pathname}/remove-liquidity`)
}
}

return (
<Card ref={myLiquiditySectionRef} h="fit-content">
<VStack spacing="md" width="full">
Expand Down Expand Up @@ -273,19 +307,16 @@ export default function PoolMyLiquidity() {
{activeTab.value === 'aura' && !totalBalanceUsd && pool.staking?.aura ? (
<HStack w="full" bg="aura.purple" p="2" rounded="md" mb="3xl" justify="space-between">
<Text color="white">Aura APR: {fNum('apr', pool.staking.aura.apr)}</Text>

<Button color="white" variant="outline" onClick={auraDisclosure.onOpen}>
<Button
color="white"
variant="outline"
onClick={() => openRedirectModal(RedirectPartner.Aura)}
>
<HStack>
<Text>Learn more</Text>
<ArrowUpRight size={16} />
</HStack>
</Button>
<PartnerRedirectModal
partner={RedirectPartner.Aura}
redirectUrl={getAuraPoolLink(chainId, pool.staking.aura.auraPoolId)}
isOpen={auraDisclosure.isOpen}
onClose={auraDisclosure.onClose}
/>
</HStack>
) : (
pool.displayTokens.map(token => {
Expand All @@ -301,11 +332,17 @@ export default function PoolMyLiquidity() {
)
})
)}
<PartnerRedirectModal
partner={redirectPartner}
redirectUrl={redirectPartnerUrl}
isOpen={partnerRedirectDisclosure.isOpen}
onClose={partnerRedirectDisclosure.onClose}
/>
</VStack>
<Divider />
<HStack mt="md" width="full" justifyContent="flex-start">
<Button
onClick={() => router.push(`${pathname}/add-liquidity`)}
onClick={() => handleAddLiquidity()}
variant="primary"
flex="1"
isDisabled={isAddLiquidityBlocked}
Expand All @@ -314,7 +351,7 @@ export default function PoolMyLiquidity() {
Add
</Button>
<Button
onClick={() => router.push(`${pathname}/remove-liquidity`)}
onClick={() => handleRemoveLiquidity()}
variant={hasUnstakedBalance ? 'tertiary' : 'disabled'}
isDisabled={!hasUnstakedBalance}
flex="1"
Expand Down
2 changes: 2 additions & 0 deletions lib/modules/pool/PoolList/usePoolListQueryState.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ export function usePoolListQueryState() {
return 'Gyro CLP'
case GqlPoolType.CowAmm:
return 'CoW AMM'
case GqlPoolType.Fx:
return 'FX'
default:
return poolType.toLowerCase()
}
Expand Down
2 changes: 2 additions & 0 deletions lib/modules/pool/pool.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export const poolTypeFilters = [
GqlPoolType.LiquidityBootstrapping,
GqlPoolType.Gyro,
GqlPoolType.CowAmm,
GqlPoolType.Fx,
] as const
export type PoolFilterType = (typeof poolTypeFilters)[number]
// We need to map toggalable pool types to their corresponding set of GqlPoolTypes.
Expand All @@ -78,6 +79,7 @@ export const POOL_TYPE_MAP: { [key in PoolFilterType]: GqlPoolType[] } = {
[GqlPoolType.LiquidityBootstrapping]: [GqlPoolType.LiquidityBootstrapping],
[GqlPoolType.Gyro]: [GqlPoolType.Gyro, GqlPoolType.Gyro3, GqlPoolType.Gyroe],
[GqlPoolType.CowAmm]: [GqlPoolType.CowAmm],
[GqlPoolType.Fx]: [GqlPoolType.Fx],
}

export const poolCategoryFilters = [
Expand Down
4 changes: 4 additions & 0 deletions lib/modules/pool/pool.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,10 @@ export function getAuraPoolLink(chainId: number, pid: string) {
return `https://app.aura.finance/#/${chainId}/pool/${pid}`
}

export function getXavePoolLink(chain: string, poolAddress: string) {
return `https://app.xave.co/pool/${chain.toLowerCase()}/${poolAddress}`
}

export function shouldHideSwapFee(poolType: GqlPoolType) {
return poolType === GqlPoolType.CowAmm
}
Expand Down
Loading