feat: enable fx pools (#972)

* feat: enable fx pool type querying

* feat: add xave partner redirect on liq add/remove

* fix: unsupported pool modal display

* feat: redirect to pool page on fx add liq page

* feat: link directly to xave pool page on liq add/remove

* chore: add fx pool badge

* fix: revert add liquidity page changes

* error display fixed in main, so changes not needed anymore

* chore: format

* chore: add fx pool type label

lib/modules/pool/PoolDetail/PoolHeader/PoolBadges.tsx

@@ -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 = []
@@ -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
 }

lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx

@@ -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 (
@@ -40,6 +63,12 @@ export function PoolHeader() {
           >
             Add liquidity
           </Button>
+          <PartnerRedirectModal
+            partner={redirectPartner}
+            redirectUrl={redirectPartnerUrl}
+            isOpen={partnerRedirectDisclosure.isOpen}
+            onClose={partnerRedirectDisclosure.onClose}
+          />
         </Stack>
       </Stack>
     </VStack>

lib/modules/pool/PoolDetail/PoolMyLiquidity.tsx

@@ -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 {
@@ -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'
@@ -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(() => {
@@ -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">
@@ -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 => {
@@ -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}
@@ -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"

lib/modules/pool/PoolList/usePoolListQueryState.tsx

@@ -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()
     }

lib/modules/pool/pool.types.ts

@@ -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.
@@ -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 = [

lib/modules/pool/pool.utils.ts

@@ -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
 }