feat: add deep liquidity flag

Author: lcamargof

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "type": "module",
   "description": "React component for DTF minting with zap functionality",
   "main": "dist/index.cjs.js",

package.json

@@ -1,9 +1,10 @@
 import { ChainId } from '@/utils/chains'
 import { broom } from '@lucide/lab'
 import { useAtom, useAtomValue } from 'jotai'
-import { Anvil, Icon, Route, Zap } from 'lucide-react'
+import { Anvil, Icon, Route, Search, Zap } from 'lucide-react'
 import {
   chainIdAtom,
+  deepLiquidityAtom,
   quoteSourceAtom,
   type QuoteSource,
 } from '../../state/atoms'
@@ -39,6 +40,7 @@ const ZapSettings = () => {
   const [slippage, setSlippage] = useAtom(slippageAtom)
   const [forceMint, setForceMint] = useAtom(forceMintAtom)
   const [quoteSource, setQuoteSource] = useAtom(quoteSourceAtom)
+  const [deepLiquidity, setDeepLiquidity] = useAtom(deepLiquidityAtom)
 
   const handleSlippageChange = (value: string) => {
     setSlippage(value)
@@ -53,6 +55,11 @@ const ZapSettings = () => {
     setQuoteSource(value)
   }
 
+  const handleDeepLiquidityChange = (value: boolean | 'indeterminate') => {
+    const newValue = value === 'indeterminate' ? false : value
+    setDeepLiquidity(newValue)
+  }
+
   return (
     <div className="min-h-[306px] border-t border-border -mx-2 px-2 py-4 flex flex-col gap-4">
       <div className="flex flex-col gap-2">
@@ -105,6 +112,22 @@ const ZapSettings = () => {
           hideTitle
         />
       </div>
+      <div className="flex flex-col gap-2">
+        <ZapSettingsRowTitle
+          title="Enable Deep liquidity search?"
+          help="Can improve price impact but it will take more time to get quotes."
+        />
+        <div className="rounded-xl border border-border px-3 py-3 flex items-center gap-1 justify-between">
+          <div className="flex items-center gap-1">
+            <Search size={16} className="text-muted-foreground" />
+            <div>Deep liquidity search</div>
+          </div>
+          <Checkbox
+            checked={deepLiquidity}
+            onCheckedChange={handleDeepLiquidityChange}
+          />
+        </div>
+      </div>
       <div className="flex flex-col gap-2">
         <ZapSettingsRowTitle
           title="Force DTF mint?"

src/components/zap-mint/zap-settings.tsx

@@ -9,6 +9,7 @@ import {
 import {
   apiUrlAtom,
   chainIdAtom,
+  deepLiquidityAtom,
   indexDTFAtom,
   quoteSourceAtom,
   walletAtom,
@@ -74,6 +75,7 @@ const useZapSwapQuery = ({
   const quoteSource = useAtomValue(quoteSourceAtom)
   const setZapSwapEndpoint = useSetAtom(zapSwapEndpointAtom)
   const debug = useAtomValue(zapperDebugAtom)
+  const deepLiquidity = useAtomValue(deepLiquidityAtom)
   const sessionId = useAtomValue(sessionIdAtom)
   const setQuoteId = useSetAtom(quoteIdAtom)
   const setRetryId = useSetAtom(retryIdAtom)
@@ -103,6 +105,7 @@ const useZapSwapQuery = ({
         trade: !forceMint,
         bypassCache: false,
         debug,
+        deepLiquidity,
       })
 
       if (!includeTracking) {
@@ -127,6 +130,7 @@ const useZapSwapQuery = ({
       account,
       forceMint,
       debug,
+      deepLiquidity,
       sessionId,
     ]
   )

src/hooks/useZapSwapQuery.ts

@@ -21,7 +21,7 @@ export const walletAtom = atom<Address | undefined>(undefined)
 /**
  * Connect wallet atom - callback to be called to connect a wallet
  */
-export const connectWalletAtom = atom<{ fn: () => void }>({ fn: () => {} })
+export const connectWalletAtom = atom<{ fn: () => void }>({ fn: () => { } })
 
 /**
  * Token balances atom - maps token addresses to their balances
@@ -86,3 +86,10 @@ export const indexDTFIconsAtom = atom<Record<number, Record<string, string>>>(
  */
 export type QuoteSource = 'best' | 'zap' | 'odos'
 export const quoteSourceAtom = atom<QuoteSource>('best')
+
+/**
+ * Enables deep liquidity search on the zapper
+ * This will do a deeper look on available liquidity pools in order to improve price impact
+ * It will make quotes slightly slower
+ */
+export const deepLiquidityAtom = atom(false)

src/state/atoms.ts

@@ -18,6 +18,7 @@ export type ZapPayload = {
   trade?: boolean
   bypassCache?: boolean
   debug?: boolean
+  deepLiquidity?: boolean
 }
 
 export type ZapResult = {
@@ -101,11 +102,12 @@ const zapper = {
     trade = true,
     bypassCache = false,
     debug = false,
+    deepLiquidity = false,
   }: ZapPayload) =>
     `${getBaseZapApiUrl(
       url,
       chainId
-    )}/swap?chainId=${chainId}&signer=${signer}&tokenIn=${tokenIn}&amountIn=${amountIn}&tokenOut=${tokenOut}&slippage=${slippage}&trade=${trade}&bypassCache=${bypassCache}${
+    )}/swap?chainId=${chainId}&signer=${signer}&tokenIn=${tokenIn}&amountIn=${amountIn}&tokenOut=${tokenOut}&slippage=${slippage}&trade=${trade}&bypassCache=${bypassCache}&deepLiquidity=${deepLiquidity}${
       debug ? '&debug=true' : ''
     }`,