Improve max capacity error message

.changeset/nine-emus-rescue.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Fix capacity exceeded error to find max capacity

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -873,7 +873,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                     }}
                   />
                   {promptSwitchRoute ? (
-                    <Flex css={{ mt: '6px', gap: '3' }}>
+                    <Flex css={{ gap: '3' }}>
                       {isCapacityExceededError &&
                       maxCapacityFormatted &&
                       maxCapacityFormatted != '0' ? (

packages/ui/src/components/widgets/SwapWidgetRenderer.tsx

@@ -19,6 +19,7 @@ import type { Execute } from '@reservoir0x/relay-sdk'
 import {
   calculatePriceTimeEstimate,
   calculateRelayerFeeProportionUsd,
+  extractMaxCapacity,
   isHighRelayerServiceFeeUsd,
   parseFees
 } from '../../utils/quote.js'
@@ -436,8 +437,21 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
 
   //Here we fetch the price data and quote data in parallel and then merge into one data model
   const isFetchingPrice = isFetchingQuote ?? _isFetchingPrice
-  const error = _quoteData || isFetchingQuote ? null : quoteError ?? priceError
-  const price = error ? undefined : _quoteData ?? _priceData
+  let error = _quoteData || isFetchingQuote ? null : quoteError ?? priceError
+  let price = error ? undefined : _quoteData ?? _priceData
+  //The only exception to the rule is a capacity exceeded error, in that case we want to use the error from the price api instead
+  if (
+    priceError &&
+    ((priceError as any)?.response?.data?.message?.includes(
+      'Insufficient relayer liquidity'
+    ) ||
+      (priceError as any)?.response?.data?.message?.includes(
+        'Amount is higher than the available liquidity'
+      ))
+  ) {
+    error = priceError
+    price = undefined
+  }
 
   useDisconnected(address, () => {
     setCustomToAddress(undefined)
@@ -536,13 +550,14 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
     address === recipient
 
   const operation = price?.details?.operation || 'swap'
-  const maxCapacityWei =
-    isCapacityExceededError && fetchQuoteDataErrorMessage
-      ? fetchQuoteDataErrorMessage.match(/(\d+)/)?.[0]
-      : undefined
-  const maxCapacityFormatted = maxCapacityWei
-    ? formatBN(BigInt(maxCapacityWei), 2, toToken?.decimals ?? 18)
+  const maxCapacity = isCapacityExceededError
+    ? extractMaxCapacity(
+        fetchQuoteDataErrorMessage ?? undefined,
+        toToken?.decimals
+      )
     : undefined
+  const maxCapacityWei = maxCapacity?.value
+  const maxCapacityFormatted = maxCapacity?.formatted
 
   let ctaCopy: string = context || 'Swap'
 

packages/ui/src/utils/quote.ts

@@ -196,6 +196,19 @@ export const isHighRelayerServiceFeeUsd = (quote?: QuoteResponse) => {
   )
 }
 
+export const extractMaxCapacity = (
+  errorMessage?: string,
+  decimals: number = 18
+) => {
+  const value = errorMessage?.match(/(\d+)/)?.[0]
+  const formatted = value ? formatBN(BigInt(value), 2, decimals) : undefined
+
+  return {
+    value,
+    formatted
+  }
+}
+
 export const extractQuoteId = (steps?: Execute['steps']) => {
   if (
     steps &&