feat: Allow slippage on forced proportional adds

lib/modules/pool/actions/PoolActionsPriceImpactDetails.tsx

@@ -2,7 +2,6 @@ import { NumberText } from '@/lib/shared/components/typography/NumberText'
 import { fNum, bn } from '@/lib/shared/utils/numbers'
 import { HStack, VStack, Text, Tooltip, Icon, Box, Skeleton } from '@chakra-ui/react'
 import { usePriceImpact } from '@/lib/modules/price-impact/PriceImpactProvider'
-import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider'
 import { useCurrency } from '@/lib/shared/hooks/useCurrency'
 import { usePool } from '../PoolProvider'
 import { ArrowRight } from 'react-feather'
@@ -13,17 +12,18 @@ import { InfoIcon } from '@/lib/shared/components/icons/InfoIcon'
 interface PoolActionsPriceImpactDetailsProps {
   bptAmount: bigint | undefined
   totalUSDValue: string
+  slippage: string
   isAddLiquidity?: boolean
   isLoading?: boolean
 }
 
 export function PoolActionsPriceImpactDetails({
   bptAmount,
   totalUSDValue,
+  slippage,
   isAddLiquidity = false,
   isLoading = false,
 }: PoolActionsPriceImpactDetailsProps) {
-  const { slippage } = useUserSettings()
   const { toCurrency } = useCurrency()
   const { pool } = usePool()
 

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

@@ -29,6 +29,7 @@ import { HumanTokenAmountWithAddress } from '@/lib/modules/tokens/token.types'
 import { isUnhandledAddPriceImpactError } from '@/lib/modules/price-impact/price-impact.utils'
 import { useModalWithPoolRedirect } from '../../useModalWithPoolRedirect'
 import { getPoolTokens } from '../../pool.helpers'
+import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider'
 
 export type UseAddLiquidityResponse = ReturnType<typeof _useAddLiquidity>
 export const AddLiquidityContext = createContext<UseAddLiquidityResponse | null>(null)
@@ -39,12 +40,14 @@ export function _useAddLiquidity(urlTxHash?: Hash) {
   const [acceptPoolRisks, setAcceptPoolRisks] = useState(false)
   const [wethIsEth, setWethIsEth] = useState(false)
   const [totalUSDValue, setTotalUSDValue] = useState('0')
+  const [proportionalSlippage, setProportionalSlippage] = useState<string>('0')
 
   const { pool, refetch: refetchPool, isLoading } = usePool()
   const { getToken, getNativeAssetToken, getWrappedNativeAssetToken, isLoadingTokenPrices } =
     useTokens()
   const { isConnected } = useUserAccount()
   const { hasValidationErrors } = useTokenInputsValidation()
+  const { slippage: userSlippage } = useUserSettings()
 
   const handler = useMemo(() => selectAddLiquidityHandler(pool), [pool.id, isLoading])
 
@@ -56,7 +59,8 @@ export function _useAddLiquidity(urlTxHash?: Hash) {
   const chain = pool.chain
   const nativeAsset = getNativeAssetToken(chain)
   const wNativeAsset = getWrappedNativeAssetToken(chain)
-
+  const isForcedProportionalAdd = requiresProportionalInput(pool.type)
+  const slippage = isForcedProportionalAdd ? proportionalSlippage : userSlippage
   const tokens = getPoolTokens(pool, getToken)
 
   function setInitialHumanAmountsIn() {
@@ -115,6 +119,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) {
     handler,
     humanAmountsIn,
     simulationQuery,
+    slippage,
   })
   const transactionSteps = useTransactionSteps(steps, isLoadingSteps)
 
@@ -126,7 +131,7 @@ export function _useAddLiquidity(urlTxHash?: Hash) {
   const hasQuoteContext = !!simulationQuery.data
 
   async function refetchQuote() {
-    if (requiresProportionalInput(pool.type)) {
+    if (isForcedProportionalAdd) {
       /*
       This is the only edge-case where the SDK needs pool onchain data from the frontend
       (calculateProportionalAmounts uses pool.dynamicData.totalShares in its parameters)
@@ -186,6 +191,10 @@ export function _useAddLiquidity(urlTxHash?: Hash) {
     addLiquidityTxHash,
     hasQuoteContext,
     addLiquidityTxSuccess,
+    slippage,
+    proportionalSlippage,
+    isForcedProportionalAdd,
+    setProportionalSlippage,
     refetchQuote,
     setHumanAmountIn,
     setHumanAmountsIn,

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

@@ -21,7 +21,10 @@ import { Address } from 'viem'
 import { AddLiquidityModal } from '../modal/AddLiquidityModal'
 import { useAddLiquidity } from '../AddLiquidityProvider'
 import { bn, fNum } from '@/lib/shared/utils/numbers'
-import { TransactionSettings } from '@/lib/modules/user/settings/TransactionSettings'
+import {
+  ProportionalTransactionSettings,
+  TransactionSettings,
+} from '@/lib/modules/user/settings/TransactionSettings'
 import { TokenInputs } from './TokenInputs'
 import { TokenInputsWithAddable } from './TokenInputsWithAddable'
 import { usePool } from '../../../PoolProvider'
@@ -52,10 +55,10 @@ import { useTokens } from '@/lib/modules/tokens/TokensProvider'
 
 // small wrapper to prevent out of context error
 export function AddLiquidityForm() {
-  const { validTokens } = useAddLiquidity()
+  const { validTokens, proportionalSlippage } = useAddLiquidity()
 
   return (
-    <TokenBalancesProvider extTokens={validTokens}>
+    <TokenBalancesProvider extTokens={validTokens} bufferPercentage={proportionalSlippage}>
       <AddLiquidityMainForm />
     </TokenBalancesProvider>
   )
@@ -78,6 +81,9 @@ function AddLiquidityMainForm() {
     nativeAsset,
     wNativeAsset,
     previewModalDisclosure,
+    proportionalSlippage,
+    slippage,
+    setProportionalSlippage,
   } = useAddLiquidity()
 
   const nextBtn = useRef(null)
@@ -144,26 +150,34 @@ function AddLiquidityMainForm() {
     })
   }
 
-  useEffect(() => {
-    if (addLiquidityTxHash) {
-      previewModalDisclosure.onOpen()
-    }
-  }, [addLiquidityTxHash])
-
   function onModalClose() {
     // restart polling for token prices when modal is closed again
     startTokenPricePolling()
 
     previewModalDisclosure.onClose()
   }
 
+  useEffect(() => {
+    if (addLiquidityTxHash) {
+      previewModalDisclosure.onOpen()
+    }
+  }, [addLiquidityTxHash])
+
   return (
     <Box w="full" maxW="lg" mx="auto" pb="2xl">
       <Card>
         <CardHeader>
           <HStack w="full" justify="space-between">
             <span>Add liquidity</span>
-            <TransactionSettings size="sm" />
+            {requiresProportionalInput(pool.type) ? (
+              <ProportionalTransactionSettings
+                slippage={proportionalSlippage}
+                setSlippage={setProportionalSlippage}
+                size="sm"
+              />
+            ) : (
+              <TransactionSettings size="sm" />
+            )}
           </HStack>
         </CardHeader>
         <VStack spacing="md" align="start" w="full">
@@ -204,6 +218,7 @@ function AddLiquidityMainForm() {
                   <PoolActionsPriceImpactDetails
                     totalUSDValue={totalUSDValue}
                     bptAmount={simulationQuery.data?.bptOut.amount}
+                    slippage={slippage}
                     isAddLiquidity
                     isLoading={isFetching}
                   />

lib/modules/pool/actions/add-liquidity/form/TokenInputsWithAddable.tsx

@@ -159,7 +159,7 @@ export function TokenInputsWithAddable({
       <TokenInputs
         tokenSelectDisclosureOpen={tokenSelectDisclosureOpen}
         customSetAmountIn={setAmountIn}
-      ></TokenInputs>
+      />
     </VStack>
   )
 }

lib/modules/pool/actions/add-liquidity/form/useMaximumInputs.tsx

@@ -10,6 +10,7 @@ import { useMemo, useState } from 'react'
 import { usePool } from '../../../PoolProvider'
 import { useAddLiquidity } from '../AddLiquidityProvider'
 import { useTotalUsdValue } from '@/lib/modules/tokens/useTotalUsdValue'
+import { TokenAmount } from '@/lib/modules/tokens/token.types'
 
 export function useMaximumInputs() {
   const { isConnected } = useUserAccount()
@@ -20,12 +21,15 @@ export function useMaximumInputs() {
   const { isLoadingTokenPrices } = useTokens()
   const [isMaximized, setIsMaximized] = useState(false)
 
+  // Depending on if the user is using WETH or ETH, we need to filter out the
+  // native asset or wrapped native asset.
+  const nativeAssetFilter = (balance: TokenAmount) =>
+    wethIsEth
+      ? wNativeAsset && balance.address !== wNativeAsset.address
+      : nativeAsset && balance.address !== nativeAsset.address
+
   const filteredBalances = useMemo(() => {
-    return balances.filter(balance =>
-      wethIsEth
-        ? wNativeAsset && balance.address !== wNativeAsset.address
-        : nativeAsset && balance.address !== nativeAsset.address
-    )
+    return balances.filter(nativeAssetFilter)
   }, [wethIsEth, isBalancesLoading])
 
   function handleMaximizeUserAmounts() {

lib/modules/pool/actions/add-liquidity/form/useProportionalInputs.tsx

@@ -17,7 +17,7 @@ import {
 } from '../../LiquidityActionHelpers'
 import { useAddLiquidity } from '../AddLiquidityProvider'
 import { useTotalUsdValue } from '@/lib/modules/tokens/useTotalUsdValue'
-import { HumanTokenAmountWithAddress } from '@/lib/modules/tokens/token.types'
+import { HumanTokenAmountWithAddress, TokenAmount } from '@/lib/modules/tokens/token.types'
 import { swapWrappedWithNative } from '@/lib/modules/tokens/token.helpers'
 
 type OptimalToken = {
@@ -42,13 +42,16 @@ export function useProportionalInputs() {
   const [isMaximized, setIsMaximized] = useState(false)
   const { isLoadingTokenPrices } = useTokens()
 
+  // Depending on if the user is using WETH or ETH, we need to filter out the
+  // native asset or wrapped native asset.
+  const nativeAssetFilter = (balance: TokenAmount) =>
+    wethIsEth
+      ? wNativeAsset && balance.address !== wNativeAsset.address
+      : nativeAsset && balance.address !== nativeAsset.address
+
   const filteredBalances = useMemo(() => {
-    return balances.filter(balance =>
-      wethIsEth
-        ? wNativeAsset && balance.address !== wNativeAsset.address
-        : nativeAsset && balance.address !== nativeAsset.address
-    )
-  }, [wethIsEth, isBalancesLoading])
+    return balances.filter(nativeAssetFilter)
+  }, [wethIsEth, isBalancesLoading, balances])
 
   function clearAmountsIn(changedAmount?: HumanTokenAmountWithAddress) {
     setHumanAmountsIn(

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

@@ -48,17 +48,13 @@ export class ProportionalAddLiquidityHandler implements AddLiquidityHandler {
     account,
     queryOutput,
     humanAmountsIn,
+    slippagePercent,
   }: SdkBuildAddLiquidityInput): Promise<TransactionConfig> {
     const addLiquidity = new AddLiquidity()
 
     const { callData, to, value } = addLiquidity.buildCall({
       ...queryOutput.sdkQueryOutput,
-      // Setting slippage to zero ensures the build call can't fail if the user
-      // maxes out their balance. It can result in a tx failure if the pool
-      // state changes significantly in the background. The assumption is that
-      // this should be rare. If not, we will have to re-introduce slippage here
-      // and limit the user input amounts to their balance - slippage.
-      slippage: Slippage.fromPercentage('0' as HumanAmount),
+      slippage: Slippage.fromPercentage(slippagePercent as HumanAmount),
       sender: account,
       recipient: account,
       wethIsEth: this.helpers.isNativeAssetIn(humanAmountsIn),

lib/modules/pool/actions/add-liquidity/modal/AddLiquiditySummary.tsx

@@ -34,6 +34,7 @@ export function AddLiquiditySummary({
     tokens,
     addLiquidityTxHash,
     addLiquidityTxSuccess,
+    slippage,
   } = useAddLiquidity()
   const { pool } = usePool()
   const { isMobile } = useBreakpoints()
@@ -123,6 +124,7 @@ export function AddLiquiditySummary({
               <PoolActionsPriceImpactDetails
                 totalUSDValue={totalUSDValue}
                 bptAmount={simulationQuery.data?.bptOut.amount}
+                slippage={slippage}
                 isAddLiquidity
               />
             </VStack>

lib/modules/pool/actions/add-liquidity/queries/useAddLiquidityBuildCallDataQuery.ts

@@ -1,4 +1,3 @@
-import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider'
 import { useUserAccount } from '@/lib/modules/web3/UserAccountProvider'
 import { defaultDebounceMs, onlyExplicitRefetch } from '@/lib/shared/utils/queries'
 import { useQuery } from '@tanstack/react-query'
@@ -19,19 +18,20 @@ export type AddLiquidityBuildQueryParams = {
   handler: AddLiquidityHandler
   humanAmountsIn: HumanTokenAmountWithAddress[]
   simulationQuery: AddLiquiditySimulationQueryResult
+  slippage: string
 }
 
 // Uses the SDK to build a transaction config to be used by wagmi's useManagedSendTransaction
 export function useAddLiquidityBuildCallDataQuery({
   handler,
   humanAmountsIn,
   simulationQuery,
+  slippage,
   enabled,
 }: AddLiquidityBuildQueryParams & {
   enabled: boolean
 }) {
   const { userAddress, isConnected } = useUserAccount()
-  const { slippage } = useUserSettings()
   const { pool, chainId } = usePool()
   const { data: blockNumber } = useBlockNumber({ chainId })
   const { relayerApprovalSignature } = useRelayerSignature()

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

@@ -19,6 +19,7 @@ export function useAddLiquiditySteps({
   handler,
   humanAmountsIn,
   simulationQuery,
+  slippage,
 }: AddLiquidityStepsParams) {
   const { pool, chainId, chain } = usePool()
   const relayerMode = useRelayerMode(pool)
@@ -46,6 +47,7 @@ export function useAddLiquiditySteps({
     handler,
     humanAmountsIn,
     simulationQuery,
+    slippage,
   })
 
   const steps = useMemo(() => {

lib/modules/pool/actions/remove-liquidity/form/RemoveLiquidityForm.tsx

@@ -35,6 +35,7 @@ import { SimulationError } from '@/lib/shared/components/errors/SimulationError'
 import { InfoIcon } from '@/lib/shared/components/icons/InfoIcon'
 import { SafeAppAlert } from '@/lib/shared/components/alerts/SafeAppAlert'
 import { useTokens } from '@/lib/modules/tokens/TokensProvider'
+import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider'
 const TABS: ButtonGroupOption[] = [
   {
     value: 'proportional',
@@ -71,6 +72,7 @@ export function RemoveLiquidityForm() {
   const nextBtn = useRef(null)
   const [activeTab, setActiveTab] = useState(TABS[0])
   const { startTokenPricePolling } = useTokens()
+  const { slippage } = useUserSettings()
 
   useEffect(() => {
     setPriceImpact(priceImpactQuery.data)
@@ -177,6 +179,7 @@ export function RemoveLiquidityForm() {
                     <PoolActionsPriceImpactDetails
                       totalUSDValue={totalUSDValue}
                       bptAmount={BigInt(parseUnits(quoteBptIn, 18))}
+                      slippage={slippage}
                       isLoading={isFetching}
                     />
                   }

lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquiditySummary.tsx

@@ -14,6 +14,7 @@ import { RemoveLiquidityReceiptResult } from '@/lib/modules/transactions/transac
 import { BalAlert } from '@/lib/shared/components/alerts/BalAlert'
 import { useTokens } from '@/lib/modules/tokens/TokensProvider'
 import { CardPopAnim } from '@/lib/shared/components/animations/CardPopAnim'
+import { useUserSettings } from '@/lib/modules/user/settings/UserSettingsProvider'
 
 export function RemoveLiquiditySummary({
   isLoading: isLoadingReceipt,
@@ -34,6 +35,7 @@ export function RemoveLiquiditySummary({
   const { getTokensByChain } = useTokens()
   const { pool } = usePool()
   const { userAddress, isLoading: isUserAddressLoading } = useUserAccount()
+  const { slippage } = useUserSettings()
 
   const _amountsOut = amountsOut.filter(amount => bn(amount.humanAmount).gt(0))
 
@@ -87,6 +89,7 @@ export function RemoveLiquiditySummary({
             <VStack align="start" spacing="sm">
               <PoolActionsPriceImpactDetails
                 totalUSDValue={totalUSDValue}
+                slippage={slippage}
                 bptAmount={BigInt(parseUnits(quoteBptIn, 18))}
               />
             </VStack>