Feat/remove liquidity flow

lib/modules/pool/PoolList/PoolListSearch.tsx

@@ -6,6 +6,7 @@ import { useEffect } from 'react'
 import { useDebounce } from '@/lib/shared/hooks/useDebounce'
 import { usePoolList } from './usePoolList'
 import { useBreakpoints } from '@/lib/shared/hooks/useBreakpoints'
+import { defaultDebounceMs } from '@/lib/shared/utils/queries'
 
 const SEARCH = 'search'
 
@@ -20,7 +21,7 @@ export function PoolListSearch() {
     setSearch(event.target.value)
   }
 
-  const debouncedChangeHandler = useDebounce(changeHandler, 300)
+  const debouncedChangeHandler = useDebounce(changeHandler, defaultDebounceMs)
 
   useEffect(() => {
     reset({

lib/modules/pool/actions/LiquidityActionHelpers.spec.ts

@@ -0,0 +1,23 @@
+import { hasValidHumanAmounts } from './LiquidityActionHelpers'
+import { HumanAmountIn } from './liquidity-types'
+
+describe('hasValidHumanAmounts', () => {
+  test('when all humanAmounts are empty', () => {
+    const humanAmountsIn: HumanAmountIn[] = [
+      { tokenAddress: '0x198d7387fa97a73f05b8578cdeff8f2a1f34cd1f', humanAmount: '' },
+      { tokenAddress: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', humanAmount: '' },
+    ]
+    expect(hasValidHumanAmounts(humanAmountsIn)).toBeFalsy()
+  })
+  test('when all humanAmounts are zero', () => {
+    const humanAmountsIn: HumanAmountIn[] = [
+      { tokenAddress: '0x198d7387fa97a73f05b8578cdeff8f2a1f34cd1f', humanAmount: '0' },
+      { tokenAddress: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', humanAmount: '0' },
+    ]
+    expect(hasValidHumanAmounts(humanAmountsIn)).toBeFalsy()
+  })
+  test('when  humanAmounts is an empty array', () => {
+    const humanAmountsIn: HumanAmountIn[] = []
+    expect(hasValidHumanAmounts(humanAmountsIn)).toBeFalsy()
+  })
+})

lib/modules/pool/actions/add-liquidity/AddLiquidityHelpers.ts → lib/modules/pool/actions/LiquidityActionHelpers.ts

@@ -1,15 +1,15 @@
 import { getChainId, getNetworkConfig } from '@/lib/config/app.config'
 import { TokenAmountToApprove } from '@/lib/modules/tokens/approvals/approval-rules'
 import { nullAddress } from '@/lib/modules/web3/contracts/wagmi-helpers'
-import { PoolStateInput } from '@balancer/sdk'
-import { keyBy } from 'lodash'
+import { isSameAddress } from '@/lib/shared/utils/addresses'
+import { HumanAmount, PoolStateInput } from '@balancer/sdk'
+import { Dictionary, keyBy } from 'lodash'
 import { parseUnits } from 'viem'
 import { Address } from 'wagmi'
-import { toPoolStateInput } from '../../pool.helpers'
-import { Pool } from '../../usePool'
-import { HumanAmountInWithTokenInfo } from './AddLiquidityFlowButton'
-import { HumanAmountIn } from './add-liquidity.types'
-import { isSameAddress } from '@/lib/shared/utils/addresses'
+import { toPoolStateInput } from '../pool.helpers'
+import { Pool } from '../usePool'
+import { HumanAmountIn } from './liquidity-types'
+import { GqlToken } from '@/lib/shared/services/api/generated/graphql'
 
 // TODO: this should be imported from the SDK
 export type InputAmount = {
@@ -27,10 +27,10 @@ const NullPool: Pool = {
 } as unknown as Pool
 
 /*
-  AddLiquidityHelpers provides helper methods to traverse the pool state and prepare data structures needed by add liquidity handlers
-  to implement the AddLiquidityHandler interface
+  This class provides helper methods to traverse the pool state and prepare data structures needed by add/remove liquidity  handlers
+  to implement the Add/RemoveLiquidityHandler interface
 */
-export class AddLiquidityHelpers {
+export class LiquidityActionHelpers {
   constructor(public pool: Pool = NullPool) {}
 
   public get poolStateInput(): PoolStateInput {
@@ -50,15 +50,16 @@ export class AddLiquidityHelpers {
   }
 
   public getAmountsToApprove(
-    humanAmountsInWithTokenInfo: HumanAmountInWithTokenInfo[]
+    humanAmountsIn: HumanAmountIn[],
+    tokensByAddress: Dictionary<GqlToken>
   ): TokenAmountToApprove[] {
-    return this.toInputAmounts(humanAmountsInWithTokenInfo).map(({ address, rawAmount }, index) => {
-      const humanAmountWithInfo = humanAmountsInWithTokenInfo[index]
+    return this.toInputAmounts(humanAmountsIn).map(({ address, rawAmount }, index) => {
+      const humanAmountIn = humanAmountsIn[index]
       return {
         tokenAddress: address,
-        humanAmount: humanAmountWithInfo.humanAmount || '0',
+        humanAmount: humanAmountIn.humanAmount || '0',
         rawAmount,
-        tokenSymbol: humanAmountWithInfo.symbol,
+        tokenSymbol: tokensByAddress[humanAmountIn.tokenAddress].symbol,
       }
     })
   }
@@ -97,3 +98,14 @@ export class AddLiquidityHelpers {
     return humanAmountsIn.some(amountIn => isSameAddress(amountIn.tokenAddress, nativeAssetAddress))
   }
 }
+
+export const isEmptyAmount = (amountIn: HumanAmountIn) => isEmptyHumanAmount(amountIn.humanAmount)
+
+export const isEmptyHumanAmount = (humanAmount: HumanAmount | '') =>
+  !humanAmount || humanAmount === '0'
+
+export const areEmptyAmounts = (humanAmountsIn: HumanAmountIn[]) =>
+  !humanAmountsIn || humanAmountsIn.length === 0 || humanAmountsIn.every(isEmptyAmount)
+
+export const hasValidHumanAmounts = (humanAmountsIn: HumanAmountIn[]) =>
+  humanAmountsIn.some(a => a.humanAmount && a.humanAmount !== '0')

lib/modules/pool/actions/add-liquidity/AddLiquidityFlowButton.tsx

@@ -2,26 +2,30 @@ import { useNextTokenApprovalStep } from '@/lib/modules/tokens/approvals/useNext
 import TransactionFlow from '@/lib/shared/components/btns/transaction-steps/TransactionFlow'
 import { GqlToken } from '@/lib/shared/services/api/generated/graphql'
 import { Text, VStack } from '@chakra-ui/react'
-import { HumanAmountIn } from './add-liquidity.types'
 import { useConstructAddLiquidityStep } from './useConstructAddLiquidityStep'
 import { useAddLiquidity } from './useAddLiquidity'
-
-export type HumanAmountInWithTokenInfo = HumanAmountIn & GqlToken
+import { HumanAmountIn } from '../liquidity-types'
+import { useTokens } from '@/lib/modules/tokens/useTokens'
+import { zipObject } from 'lodash'
+import { Pool } from '../../usePool'
 
 type Props = {
-  humanAmountsInWithTokenInfo: HumanAmountInWithTokenInfo[]
-  poolId: string
+  humanAmountsIn: HumanAmountIn[]
+  pool: Pool
 }
-export function AddLiquidityFlowButton({ humanAmountsInWithTokenInfo, poolId }: Props) {
+export function AddLiquidityFlowButton({ humanAmountsIn, pool }: Props) {
   const { helpers } = useAddLiquidity()
+  const { getToken } = useTokens()
+
+  const tokenAddresses = humanAmountsIn.map(h => h.tokenAddress)
+  const tokens = humanAmountsIn.map(h => getToken(h.tokenAddress, pool.chain))
+  const tokensByAddress = zipObject(tokenAddresses, tokens as GqlToken[])
+
   const { tokenApprovalStep, initialAmountsToApprove } = useNextTokenApprovalStep(
-    helpers.getAmountsToApprove(humanAmountsInWithTokenInfo)
+    helpers.getAmountsToApprove(humanAmountsIn, tokensByAddress)
   )
 
-  const { step: addLiquidityStep } = useConstructAddLiquidityStep(
-    humanAmountsInWithTokenInfo,
-    poolId
-  )
+  const { step: addLiquidityStep } = useConstructAddLiquidityStep(pool.id)
   const steps = [tokenApprovalStep, addLiquidityStep]
 
   function handleJoinCompleted() {

lib/modules/pool/actions/add-liquidity/AddLiquidityForm.tsx

@@ -23,18 +23,20 @@ import { useRef } from 'react'
 import { Address } from 'wagmi'
 import { AddLiquidityModal } from './AddLiquidityModal'
 import { useAddLiquidity } from './useAddLiquidity'
+import { fNum, safeTokenFormat } from '@/lib/shared/utils/numbers'
+import { BPT_DECIMALS } from '../../pool.constants'
 
 export function AddLiquidityForm() {
   const {
-    amountsIn,
+    humanAmountsIn: amountsIn,
     totalUSDValue,
-    setAmountIn,
+    setHumanAmountIn: setAmountIn,
     tokens,
     validTokens,
-    formattedPriceImpact,
+    priceImpact,
     isPriceImpactLoading,
-    bptOutUnits,
-    isBptOutQueryLoading,
+    bptOut,
+    isPreviewQueryLoading,
     isDisabled,
     disabledReason,
   } = useAddLiquidity()
@@ -48,6 +50,9 @@ export function AddLiquidityForm() {
     return amountIn ? amountIn.humanAmount : ''
   }
 
+  const bptOutLabel = safeTokenFormat(bptOut?.amount, BPT_DECIMALS)
+  const formattedPriceImpact = priceImpact ? fNum('priceImpact', priceImpact) : '-'
+
   return (
     <TokenBalancesProvider tokens={validTokens}>
       <Center h="full" w="full" maxW="lg" mx="auto">
@@ -100,7 +105,7 @@ export function AddLiquidityForm() {
                 <Text color="GrayText">Bpt out</Text>
                 <HStack>
                   <NumberText color="GrayText">
-                    {isBptOutQueryLoading ? <Skeleton w="12" h="full" /> : bptOutUnits}
+                    {isPreviewQueryLoading ? <Skeleton w="12" h="full" /> : bptOutLabel}
                   </NumberText>
                   <Tooltip label="Bpt out" fontSize="sm">
                     <InfoOutlineIcon color="GrayText" />

lib/modules/pool/actions/add-liquidity/AddLiquidityModal.tsx

@@ -7,6 +7,7 @@ import { TokenAllowancesProvider } from '@/lib/modules/web3/useTokenAllowances'
 import { useUserAccount } from '@/lib/modules/web3/useUserAccount'
 import { NumberText } from '@/lib/shared/components/typography/NumberText'
 import { useCurrency } from '@/lib/shared/hooks/useCurrency'
+import { isSameAddress } from '@/lib/shared/utils/addresses'
 import { fNum } from '@/lib/shared/utils/numbers'
 import { HumanAmount } from '@balancer/sdk'
 import { InfoOutlineIcon } from '@chakra-ui/icons'
@@ -27,9 +28,13 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import { RefObject, useRef } from 'react'
+import { formatUnits } from 'viem'
 import { Address } from 'wagmi'
+import { BPT_DECIMALS } from '../../pool.constants'
+import { bptUsdValue } from '../../pool.helpers'
 import { usePool } from '../../usePool'
-import { AddLiquidityFlowButton, HumanAmountInWithTokenInfo } from './AddLiquidityFlowButton'
+import { HumanAmountIn } from '../liquidity-types'
+import { AddLiquidityFlowButton } from './AddLiquidityFlowButton'
 import { useAddLiquidity } from './useAddLiquidity'
 
 type Props = {
@@ -43,17 +48,24 @@ function TokenAmountRow({
   tokenAddress,
   humanAmount,
   symbol,
+  isBpt,
 }: {
   tokenAddress: Address
   humanAmount: HumanAmount | ''
   symbol?: string
+  isBpt?: boolean
 }) {
   const { pool } = usePool()
   const { getToken, usdValueForToken } = useTokens()
   const { toCurrency } = useCurrency()
 
   const token = getToken(tokenAddress, pool.chain)
-  const usdValue = token ? usdValueForToken(token, humanAmount) : undefined
+  let usdValue: string | undefined
+  if (isBpt) {
+    usdValue = bptUsdValue(pool, humanAmount)
+  } else {
+    usdValue = token ? usdValueForToken(token, humanAmount) : undefined
+  }
 
   return (
     <HStack w="full" justify="space-between">
@@ -79,19 +91,15 @@ export function AddLiquidityModal({
   ...rest
 }: Props & Omit<ModalProps, 'children'>) {
   const initialFocusRef = useRef(null)
-  const { amountsIn, totalUSDValue, helpers, formattedPriceImpact, bptOutUnits } = useAddLiquidity()
+  const { humanAmountsIn, totalUSDValue, helpers, bptOut, priceImpact, tokens } = useAddLiquidity()
   const { toCurrency } = useCurrency()
   const { pool } = usePool()
   // TODO: move userAddress up
   const spenderAddress = useContractAddress('balancer.vaultV2')
   const { userAddress } = useUserAccount()
-  const { getToken } = useTokens()
-  const humanAmountsInWithTokenInfo: HumanAmountInWithTokenInfo[] = amountsIn.map(humanAmountIn => {
-    return {
-      ...humanAmountIn,
-      ...getToken(humanAmountIn.tokenAddress, pool.chain),
-    } as HumanAmountInWithTokenInfo
-  })
+
+  const bptOutLabel = bptOut ? formatUnits(bptOut.amount, BPT_DECIMALS) : '0'
+  const formattedPriceImpact = priceImpact ? fNum('priceImpact', priceImpact) : '-'
 
   return (
     <Modal
@@ -118,22 +126,28 @@ export function AddLiquidityModal({
                   <Text color="GrayText">{"You're adding"}</Text>
                   <NumberText fontSize="lg">{toCurrency(totalUSDValue)}</NumberText>
                 </HStack>
-                {amountsIn.map(amountIn => (
-                  <TokenAmountRow key={amountIn.tokenAddress} {...amountIn} />
-                ))}
+                {tokens.map(token => {
+                  if (!token) return <div>Missing token</div>
+
+                  const amountIn = humanAmountsIn.find(amountIn =>
+                    isSameAddress(amountIn.tokenAddress, token?.address)
+                  ) as HumanAmountIn
+
+                  return <TokenAmountRow key={token.address} {...amountIn} />
+                })}
               </VStack>
             </Card>
 
             <Card variant="level0" p="md" shadow="sm" w="full">
               <VStack align="start" spacing="md">
                 <HStack justify="space-between" w="full">
                   <Text color="GrayText">{"You'll get (if no slippage)"}</Text>
-                  <Text color="GrayText">{pool.symbol}</Text>
                 </HStack>
                 <TokenAmountRow
                   tokenAddress={pool.address as Address}
-                  humanAmount={bptOutUnits as HumanAmount}
+                  humanAmount={bptOutLabel as HumanAmount}
                   symbol="LP Token"
+                  isBpt
                 />
               </VStack>
             </Card>
@@ -160,8 +174,8 @@ export function AddLiquidityModal({
             tokenAddresses={helpers.poolTokenAddresses}
           >
             <AddLiquidityFlowButton
-              humanAmountsInWithTokenInfo={humanAmountsInWithTokenInfo}
-              poolId={pool.id}
+              humanAmountsIn={humanAmountsIn}
+              pool={pool}
             ></AddLiquidityFlowButton>
           </TokenAllowancesProvider>
         </ModalFooter>

lib/modules/pool/actions/add-liquidity/add-liquidity.types.ts

@@ -1,14 +1,10 @@
-import { AddLiquidityQueryOutput, HumanAmount, PriceImpact, TokenAmount } from '@balancer/sdk'
+import { AddLiquidityQueryOutput, PriceImpact, TokenAmount } from '@balancer/sdk'
 import { Address } from 'wagmi'
+import { HumanAmountIn } from '../liquidity-types'
 
 // TODO: this type should be exposed by the SDK
 export type PriceImpactAmount = Awaited<ReturnType<typeof PriceImpact.addLiquidityUnbalanced>>
 
-export type HumanAmountIn = {
-  humanAmount: HumanAmount | ''
-  tokenAddress: Address
-}
-
 export type AddLiquidityInputs = {
   humanAmountsIn: HumanAmountIn[]
   account?: Address
@@ -22,9 +18,6 @@ export type AddLiquidityOutputs = {
   sdkQueryOutput?: AddLiquidityQueryOutput
 }
 
-// sdkQueryOutput is optional because it will be only used in cases where we use the SDK to query/build the transaction
-// We will probably need a more abstract interface to be used by edge cases
 export type BuildLiquidityInputs = {
   inputs: AddLiquidityInputs
-  sdkQueryOutput?: AddLiquidityQueryOutput
 }

lib/modules/pool/actions/add-liquidity/handlers/AddLiquidity.handler.ts

@@ -7,8 +7,8 @@ import {
 
 /**
  * AddLiquidityHandler is an interface that defines the methods that must be implemented by a handler.
- * They take standard inputs from the UI and return frontend standardised
- * outputs. The outputs should not be return types from the SDK. This is to
+ * They take standard inputs from the UI and return frontend standardised outputs.
+ * The outputs should not be return types from the SDK. This is to
  * allow handlers to be developed in the future that may not use the SDK.
  */
 export interface AddLiquidityHandler {