Merge pull request #81 from blockworks-foundation/feature/no-route-spinner-fix

handle error when no swap route found

components/swap/RoutesModal.tsx

@@ -7,7 +7,7 @@ import FormatNumericValue from '@components/shared/FormatNumericValue'
 
 type RoutesModalProps = {
   onClose: () => void
-  setSelectedRoute: Dispatch<SetStateAction<RouteInfo | undefined>>
+  setSelectedRoute: Dispatch<SetStateAction<RouteInfo | undefined | null>>
   show: boolean
   routes: RouteInfo[]
   selectedRoute: RouteInfo

components/swap/SwapForm.tsx

@@ -47,6 +47,7 @@ import PercentageSelectButtons from './PercentageSelectButtons'
 import useIpAddress from 'hooks/useIpAddress'
 import { useEnhancedWallet } from '@components/wallet/EnhancedWalletProvider'
 import SwapSettings from './SwapSettings'
+import InlineNotification from '@components/shared/InlineNotification'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -59,7 +60,8 @@ const set = mangoStore.getState().set
 
 const SwapForm = () => {
   const { t } = useTranslation(['common', 'swap', 'trade'])
-  const [selectedRoute, setSelectedRoute] = useState<RouteInfo>()
+  //initial state is undefined null is returned on error
+  const [selectedRoute, setSelectedRoute] = useState<RouteInfo | null>()
   const [animateSwitchArrow, setAnimateSwitchArrow] = useState(0)
   const [showTokenSelect, setShowTokenSelect] = useState('')
   const [showSettings, setShowSettings] = useState(false)
@@ -132,16 +134,16 @@ const SwapForm = () => {
     depending on the swapMode and set those values in state
   */
   useEffect(() => {
-    if (bestRoute) {
+    if (typeof bestRoute !== 'undefined') {
       setSelectedRoute(bestRoute)
 
-      if (inputBank && swapMode === 'ExactOut') {
-        const inAmount = new Decimal(bestRoute.inAmount)
+      if (inputBank && swapMode === 'ExactOut' && bestRoute) {
+        const inAmount = new Decimal(bestRoute!.inAmount)
           .div(10 ** inputBank.mintDecimals)
           .toString()
         setAmountInFormValue(inAmount)
-      } else if (outputBank && swapMode === 'ExactIn') {
-        const outAmount = new Decimal(bestRoute.outAmount)
+      } else if (outputBank && swapMode === 'ExactIn' && bestRoute) {
+        const outAmount = new Decimal(bestRoute!.outAmount)
           .div(10 ** outputBank.mintDecimals)
           .toString()
         setAmountOutFormValue(outAmount)
@@ -263,7 +265,7 @@ const SwapForm = () => {
     return (
       !!(amountInAsDecimal.toNumber() || amountOutAsDecimal.toNumber()) &&
       connected &&
-      !selectedRoute
+      typeof selectedRoute === 'undefined'
     )
   }, [amountInAsDecimal, amountOutAsDecimal, connected, selectedRoute])
 
@@ -490,7 +492,7 @@ const SwapFormSubmitButton = ({
   amountOut: number | undefined
   inputSymbol: string | undefined
   loadingSwapDetails: boolean
-  selectedRoute: RouteInfo | undefined
+  selectedRoute: RouteInfo | undefined | null
   setShowConfirm: (x: boolean) => void
   useMargin: boolean
 }) => {
@@ -513,31 +515,38 @@ const SwapFormSubmitButton = ({
   const onClick = connected ? () => setShowConfirm(true) : handleConnect
 
   return (
-    <Button
-      onClick={onClick}
-      className="mt-6 mb-4 flex w-full items-center justify-center text-base"
-      disabled={disabled}
-      size="large"
-    >
-      {connected ? (
-        showInsufficientBalance ? (
-          <div className="flex items-center">
-            <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-            {t('swap:insufficient-balance', {
-              symbol: inputSymbol,
-            })}
-          </div>
-        ) : loadingSwapDetails ? (
-          <Loading />
+    <>
+      <Button
+        onClick={onClick}
+        className="mt-6 mb-4 flex w-full items-center justify-center text-base"
+        disabled={disabled}
+        size="large"
+      >
+        {connected ? (
+          showInsufficientBalance ? (
+            <div className="flex items-center">
+              <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+              {t('swap:insufficient-balance', {
+                symbol: inputSymbol,
+              })}
+            </div>
+          ) : loadingSwapDetails ? (
+            <Loading />
+          ) : (
+            <span>{t('swap:review-swap')}</span>
+          )
         ) : (
-          <span>{t('swap:review-swap')}</span>
-        )
-      ) : (
-        <div className="flex items-center">
-          <LinkIcon className="mr-2 h-5 w-5" />
-          {t('connect')}
+          <div className="flex items-center">
+            <LinkIcon className="mr-2 h-5 w-5" />
+            {t('connect')}
+          </div>
+        )}
+      </Button>
+      {selectedRoute === null && (
+        <div className="mb-4">
+          <InlineNotification type="error" desc={t('swap:no-swap-found')} />
         </div>
       )}
-    </Button>
+    </>
   )
 }

components/swap/SwapReviewRouteInfo.tsx

@@ -49,8 +49,8 @@ type JupiterRouteInfoProps = {
   amountIn: Decimal
   onClose: () => void
   routes: RouteInfo[] | undefined
-  selectedRoute: RouteInfo | undefined
-  setSelectedRoute: Dispatch<SetStateAction<RouteInfo | undefined>>
+  selectedRoute: RouteInfo | undefined | null
+  setSelectedRoute: Dispatch<SetStateAction<RouteInfo | undefined | null>>
   slippage: number
 }
 

components/swap/useQuoteRoutes.ts

@@ -112,43 +112,49 @@ const handleGetRoutes = async (
   feeBps = 0,
   wallet: string | undefined | null
 ) => {
-  wallet ||= PublicKey.default.toBase58()
+  try {
+    wallet ||= PublicKey.default.toBase58()
 
-  const results = await Promise.allSettled([
-    fetchMangoRoutes(
-      inputMint,
-      outputMint,
-      amount,
-      slippage,
-      swapMode,
-      feeBps,
-      wallet
-    ),
-    fetchJupiterRoutes(
-      inputMint,
-      outputMint,
-      amount,
-      slippage,
-      swapMode,
-      feeBps
-    ),
-  ])
-  const responses = results
-    .filter((x) => x.status === 'fulfilled' && x.value.bestRoute !== null)
-    .map((x) => (x as any).value)
+    const results = await Promise.allSettled([
+      fetchMangoRoutes(
+        inputMint,
+        outputMint,
+        amount,
+        slippage,
+        swapMode,
+        feeBps,
+        wallet
+      ),
+      fetchJupiterRoutes(
+        inputMint,
+        outputMint,
+        amount,
+        slippage,
+        swapMode,
+        feeBps
+      ),
+    ])
+    const responses = results
+      .filter((x) => x.status === 'fulfilled' && x.value.bestRoute !== null)
+      .map((x) => (x as any).value)
 
-  const sortedByBiggestOutAmount = (
-    responses as {
-      routes: RouteInfo[]
-      bestRoute: RouteInfo
-    }[]
-  ).sort(
-    (a, b) => Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
-  )
-
-  return {
-    routes: sortedByBiggestOutAmount[0].routes,
-    bestRoute: sortedByBiggestOutAmount[0].bestRoute,
+    const sortedByBiggestOutAmount = (
+      responses as {
+        routes: RouteInfo[]
+        bestRoute: RouteInfo
+      }[]
+    ).sort(
+      (a, b) => Number(b.bestRoute.outAmount) - Number(a.bestRoute.outAmount)
+    )
+    return {
+      routes: sortedByBiggestOutAmount[0].routes,
+      bestRoute: sortedByBiggestOutAmount[0].bestRoute,
+    }
+  } catch (e) {
+    return {
+      routes: [],
+      bestRoute: null,
+    }
   }
 }
 
@@ -172,7 +178,10 @@ const useQuoteRoutes = ({
       ? new Decimal(amount).mul(10 ** decimals)
       : new Decimal(0)
 
-  const res = useQuery<{ routes: RouteInfo[]; bestRoute: RouteInfo }, Error>(
+  const res = useQuery<
+    { routes: RouteInfo[]; bestRoute: RouteInfo | null },
+    Error
+  >(
     ['swap-routes', inputMint, outputMint, amount, slippage, swapMode, wallet],
     async () =>
       handleGetRoutes(

public/locales/en/swap.json

@@ -26,5 +26,6 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
-    "use-margin": "Allow Margin"
+    "use-margin": "Allow Margin",
+    "no-swap-found": "No swap found"
 }

public/locales/es/swap.json

@@ -26,5 +26,6 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
-    "use-margin": "Allow Margin"
+    "use-margin": "Allow Margin",
+    "no-swap-found": "No swap found"
 }

public/locales/ru/swap.json

@@ -26,5 +26,6 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
-    "use-margin": "Allow Margin"
+    "use-margin": "Allow Margin",
+    "no-swap-found": "No swap found"
 }

public/locales/zh/swap.json

@@ -26,5 +26,6 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
-    "use-margin": "Allow Margin"
+    "use-margin": "Allow Margin",
+    "no-swap-found": "No swap found"
 }

public/locales/zh_tw/swap.json

@@ -26,5 +26,6 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this swap. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-max-slippage": "If price slips beyond your maximum slippage your swap will not be executed",
-    "use-margin": "Allow Margin"
+    "use-margin": "Allow Margin",
+    "no-swap-found": "No swap found"
 }