Merge pull request #729 from reservoirprotocol/ted/fe-7596-add-a-less-intimidating-ui-state-when-there-is-no-available

Improve UI state when there are no available routes

Author: pedromcunha

.changeset/weak-beds-cheer.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Improve ui when no route are available

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

@@ -41,6 +41,7 @@ type Props = Pick<
   fromChainWalletVMSupported?: boolean
   isAutoSlippage: boolean
   slippageInputBps?: string
+  error?: any
 }
 
 const formatSwapRate = (rate: number) => {
@@ -62,7 +63,8 @@ const FeeBreakdown: FC<Props> = ({
   isSingleChainLocked,
   fromChainWalletVMSupported,
   isAutoSlippage,
-  slippageInputBps
+  slippageInputBps,
+  error
 }) => {
   const [isOpen, setIsOpen] = useState(false)
   const swapRate = quote?.details?.rate
@@ -218,6 +220,7 @@ const FeeBreakdown: FC<Props> = ({
             setUseExternalLiquidity(selected)
           }}
           canonicalTimeEstimate={canonicalTimeEstimate?.formattedTime}
+          error={error}
           trigger={
             <Button color="ghost" size="none">
               <Flex css={{ gap: '2', alignItems: 'center' }}>

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

@@ -3,7 +3,7 @@ import { Box, Button, Flex, Text } from '../primitives/index.js'
 import { Dropdown, DropdownMenuItem } from '../primitives/Dropdown.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ASSETS_RELAY_API, type RelayChain } from '@reservoir0x/relay-sdk'
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faRoute } from '@fortawesome/free-solid-svg-icons'
 
 type Props = {
   supportsExternalLiquidity: boolean
@@ -12,6 +12,7 @@ type Props = {
   chain?: RelayChain
   canonicalTimeEstimate?: string
   trigger?: ReactNode
+  error?: any
 }
 
 const SwapRouteSelector: FC<Props> = ({
@@ -20,9 +21,15 @@ const SwapRouteSelector: FC<Props> = ({
   onExternalLiquidityChange,
   chain,
   canonicalTimeEstimate,
-  trigger
+  trigger,
+  error
 }) => {
   const [open, setOpen] = useState(false)
+
+  const isNoAvailableRoutesError =
+    error?.response?.data?.errorCode === 'NO_SWAP_ROUTES_FOUND' ||
+    error?.response?.data?.errorCode === 'UNSUPPORTED_ROUTE'
+
   return (
     <Dropdown
       open={open}
@@ -72,14 +79,25 @@ const SwapRouteSelector: FC<Props> = ({
           >
             <Text style="subtitle2">Route</Text>
             <Flex css={{ gap: '2', alignItems: 'center' }}>
-              <Text style="subtitle2">
-                {externalLiquidtySelected ? 'Native' : 'Relay'}
-              </Text>
-              {supportsExternalLiquidity || externalLiquidtySelected ? (
-                <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
-                  <FontAwesomeIcon icon={faChevronRight} width={14} />
-                </Box>
-              ) : null}
+              {isNoAvailableRoutesError ? (
+                <>
+                  <Text style="subtitle2">No available routes</Text>
+                  <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
+                    <FontAwesomeIcon icon={faRoute} width={14} />
+                  </Box>
+                </>
+              ) : (
+                <>
+                  <Text style="subtitle2">
+                    {externalLiquidtySelected ? 'Native' : 'Relay'}
+                  </Text>
+                  {supportsExternalLiquidity || externalLiquidtySelected ? (
+                    <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
+                      <FontAwesomeIcon icon={faChevronRight} width={14} />
+                    </Box>
+                  ) : null}
+                </>
+              )}
             </Flex>
           </Button>
         )

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

@@ -1565,6 +1565,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           onExternalLiquidityChange={(selected) => {
                             setUseExternalLiquidity(selected)
                           }}
+                          error={error}
                         />
                       </Box>
                     ) : null}
@@ -1605,6 +1606,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       canonicalTimeEstimate={canonicalTimeEstimate}
                       isSingleChainLocked={isSingleChainLocked}
                       fromChainWalletVMSupported={fromChainWalletVMSupported}
+                      error={error}
                     />
                     <WidgetErrorWell
                       hasInsufficientBalance={hasInsufficientBalance}

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

@@ -64,8 +64,11 @@ export const WidgetErrorWell: FC<Props> = ({
     quote?.details?.currencyOut &&
     (quote?.details?.currencyOut?.amountUsd === undefined ||
       quote?.details?.currencyOut?.amountUsd === '0')
+  const isNoAvailableRoutesError =
+    error?.response?.data?.errorCode === 'NO_SWAP_ROUTES_FOUND' ||
+    error?.response?.data?.errorCode === 'UNSUPPORTED_ROUTE'
 
-  if (isInsufficientLiquidityError) {
+  if (isInsufficientLiquidityError || isNoAvailableRoutesError) {
     return null
   }