FEAT: Widget Quote Error handling (#1868)

* add error message for no quote to trade and earn

* reset api url for quote

* use kubb for fetching quote

* restyle the error

* fix lint

* fix lint

* linting issues in vercel

* bigint in slippage?

Author: surewht

src/app/api/quote/utils.ts

@@ -1,24 +1,9 @@
-export interface FlashMintQuoteRequest {
-  chainId: number
-  account: string
-  inputToken: string
-  outputToken: string
-  inputAmount: string
-  outputAmount: string
-  slippage: number
-}
+import { getApiV2Quote, GetApiV2QuoteQueryParams } from '@/gen'
+
+export interface FlashMintQuoteRequest extends GetApiV2QuoteQueryParams {}
 
-export async function getQuote(quoteRequest: Record<string, string>) {
-  const query = new URLSearchParams(quoteRequest).toString()
-  const url = `https://api.indexcoop.com/v2/quote?${query}`
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      'x-api-key': process.env.INDEX_COOP_API_V2_KEY,
-    } as HeadersInit,
-  })
+export async function getQuote(quoteRequest: FlashMintQuoteRequest) {
+  const response = await getApiV2Quote(quoteRequest)
 
-  const quote = await response.json()
-  return quote
+  return response.data
 }

src/app/api/slippage/[...slug]/route.ts

@@ -83,7 +83,7 @@ export async function GET(
     const quote = await getQuote(quoteRequest)
 
     const quoteUsd = Number.parseFloat(
-      formatWei(quote.inputAmount, usdc.decimals),
+      formatWei(BigInt(quote.inputAmount), usdc.decimals),
     )
 
     const buffer = 1.2 // +20% on top of calc slippage

src/app/earn/components/earn-widget/index.tsx

@@ -2,7 +2,7 @@
 
 import { useAtom } from 'jotai'
 import range from 'lodash/range'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { isAddressEqual } from 'viem'
 
 import { useQueryParams } from '@/app/earn-old/use-query-params'
@@ -48,6 +48,7 @@ export function EarnWidget() {
     products,
     outputToken,
     reset,
+    refetchQuote,
     toggleIsMinting,
     quoteResult,
   } = useEarnContext()
@@ -88,6 +89,11 @@ export function EarnWidget() {
     }
   }, [tradeState, reset, resetData, sendTradeEvent])
 
+  const hasFetchingError = useMemo(
+    () => tradeState.matches('quoteNotFound'),
+    [tradeState],
+  )
+
   return (
     <div className='earn-widget flex h-fit flex-col gap-6'>
       <DepositWithdraw
@@ -117,10 +123,15 @@ export function EarnWidget() {
         product={selectedProduct}
         isMinting={isMinting}
       />
-
+      {hasFetchingError && (
+        <div className='flex justify-center gap-2 text-sm text-red-400'>
+          <p className='font-semibold'>Error fetching quote:</p>
+          {tradeState.context.quoteError}
+        </div>
+      )}
       <SmartTradeButton
         contract={contract ?? ''}
-        hasFetchingError={false}
+        hasFetchingError={hasFetchingError}
         hasInsufficientFunds={hasInsufficientFunds}
         hiddenWarnings={hiddenLeverageWarnings}
         inputTokenAmount={inputTokenAmount}
@@ -145,7 +156,7 @@ export function EarnWidget() {
               }
         }
         onOpenTransactionReview={() => sendTradeEvent({ type: 'REVIEW' })}
-        onRefetchQuote={() => {}}
+        onRefetchQuote={refetchQuote}
       />
       <SelectTokenModal
         isDarkMode={true}

src/app/earn/provider.tsx

@@ -49,6 +49,7 @@ interface Context {
   onSelectInputToken: (tokenSymbol: string, chainId: number) => void
   onSelectOutputToken: (tokenSymbol: string, chainId: number) => void
   reset: () => void
+  refetchQuote: ReturnType<typeof useQuoteResult>['refetchQuote'] | (() => void)
   toggleIsMinting: () => void
 }
 
@@ -71,6 +72,7 @@ export const EarnContext = createContext<Context>({
   onSelectInputToken: () => {},
   onSelectOutputToken: () => {},
   reset: () => {},
+  refetchQuote: () => {},
   toggleIsMinting: () => {},
 })
 
@@ -143,16 +145,17 @@ export function EarnProvider(props: {
     [inputToken, inputValue],
   )
 
-  const { isFetchingQuote, quoteResult, resetQuote } = useQuoteResult({
-    address,
-    chainId,
-    isMinting,
-    inputToken,
-    outputToken,
-    inputTokenAmount,
-    inputValue,
-    slippage,
-  })
+  const { isFetchingQuote, quoteResult, resetQuote, refetchQuote } =
+    useQuoteResult({
+      address,
+      chainId,
+      isMinting,
+      inputToken,
+      outputToken,
+      inputTokenAmount,
+      inputValue,
+      slippage,
+    })
 
   const onChangeInputTokenAmount = useCallback(
     (input: string) => {
@@ -244,6 +247,7 @@ export function EarnProvider(props: {
         onSelectInputToken,
         onSelectOutputToken,
         reset,
+        refetchQuote,
         toggleIsMinting,
       }}
     >

src/app/leverage/components/leverage-widget/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid'
 import { useAtom } from 'jotai'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
 import { TradeInputSelector } from '@/app/leverage/components/leverage-widget/trade-input-selector'
 import { supportedNetworks } from '@/app/leverage/constants'
@@ -50,6 +51,7 @@ export function LeverageWidget() {
     onSelectOutputToken,
     outputToken,
     reset,
+    refetchQuote,
     supportedLeverageTypes,
     toggleIsMinting,
   } = useLeverageToken()
@@ -99,6 +101,11 @@ export function LeverageWidget() {
     }
   }, [tradeState, reset, resetData, sendTradeEvent])
 
+  const hasFetchingError = useMemo(
+    () => tradeState.matches('quoteNotFound'),
+    [tradeState],
+  )
+
   return (
     <div
       className='flex w-full flex-col gap-4 rounded-lg border border-white/15 bg-zinc-900 px-4 pb-5 pt-4'
@@ -140,10 +147,20 @@ export function LeverageWidget() {
         selectedOutputToken={outputToken}
         onSelectToken={onOpenSelectOutputToken}
       />
+      {hasFetchingError && (
+        <div className='flex items-center justify-center gap-2 text-sm text-red-400'>
+          <div className='flex items-center gap-1'>
+            <ExclamationCircleIcon className='size-5' />
+            <h3 className='font-semibold'>Quote Error</h3>
+            {':'}
+          </div>
+          <p> {tradeState.context.quoteError}</p>
+        </div>
+      )}
       <Summary />
       <SmartTradeButton
         contract={contract ?? ''}
-        hasFetchingError={false}
+        hasFetchingError={hasFetchingError}
         hasInsufficientFunds={hasInsufficientFunds}
         hiddenWarnings={hiddenLeverageWarnings}
         inputTokenAmount={inputTokenAmount}
@@ -157,7 +174,7 @@ export function LeverageWidget() {
           [TradeButtonState.default]: 'Review Transaction',
         }}
         onOpenTransactionReview={() => sendTradeEvent({ type: 'REVIEW' })}
-        onRefetchQuote={() => {}}
+        onRefetchQuote={refetchQuote}
       />
       <SelectTokenModal
         isDarkMode={true}

src/app/leverage/provider.tsx

@@ -55,6 +55,9 @@ export interface TokenContext {
   onSelectLeverageType: (type: LeverageType) => void
   onSelectOutputToken: (tokenSymbol: string) => void
   reset: () => void
+  refetchQuote:
+    | ReturnType<typeof useQuoteResult>['refetchQuote']
+    | (() => Promise<void>)
   toggleIsMinting: (force?: boolean) => void
 }
 
@@ -80,6 +83,7 @@ export const LeverageTokenContext = createContext<TokenContext>({
   onSelectLeverageType: () => {},
   onSelectOutputToken: () => {},
   reset: () => {},
+  refetchQuote: async () => {},
   toggleIsMinting: () => {},
 })
 
@@ -158,16 +162,17 @@ export function LeverageProvider(props: { children: any }) {
     [inputToken, inputValue],
   )
 
-  const { isFetchingQuote, quoteResult, resetQuote } = useQuoteResult({
-    address,
-    chainId,
-    isMinting,
-    inputToken,
-    outputToken,
-    inputTokenAmount,
-    inputValue,
-    slippage,
-  })
+  const { isFetchingQuote, quoteResult, resetQuote, refetchQuote } =
+    useQuoteResult({
+      address,
+      chainId,
+      isMinting,
+      inputToken,
+      outputToken,
+      inputTokenAmount,
+      inputValue,
+      slippage,
+    })
 
   const indexTokensBasedOnSymbol = useMemo(() => {
     return indexTokens.filter((token) => {
@@ -331,6 +336,7 @@ export function LeverageProvider(props: { children: any }) {
         onSelectLeverageType,
         onSelectOutputToken,
         reset,
+        refetchQuote,
         toggleIsMinting,
       }}
     >

src/app/store/trade-machine.ts

@@ -10,6 +10,7 @@ import type { TransactionReceipt } from 'viem'
 export interface TradeMachineContext {
   isModalOpen: boolean
   quoteResult: QuoteResult | null
+  quoteError: string
   trade: PostApiV2Trade200['trade'] | null
   position: PostApiV2Trade200['position'] | null
   transactionReview: TransactionReview | null
@@ -19,6 +20,7 @@ export interface TradeMachineContext {
 export type TradeMachineEvent =
   | { type: 'FETCHING_QUOTE' }
   | { type: 'QUOTE'; quoteResult: QuoteResult; quoteType: QuoteType }
+  | { type: 'QUOTE_NOT_FOUND'; reason: string }
   | { type: 'REVIEW' }
   | { type: 'SUBMIT' }
   | { type: 'TRADE_FAILED' }
@@ -44,6 +46,7 @@ const createTradeMachine = () =>
       position: null,
       transactionReview: null,
       transactionStatus: null,
+      quoteError: '',
     },
     states: {
       idle: {
@@ -83,16 +86,18 @@ const createTradeMachine = () =>
             guard: ({ event }) =>
               Boolean(event.quoteResult && event.quoteResult.quote),
           },
+          QUOTE_NOT_FOUND: {
+            target: 'quoteNotFound',
+            actions: assign({
+              quoteError: ({ event }) => event.reason,
+            }),
+          },
         },
       },
       quote: {
         on: {
           FETCHING_QUOTE: {
             target: 'idle',
-            actions: assign({
-              quoteResult: null,
-              transactionReview: null,
-            }),
           },
           REVIEW: {
             target: 'review',
@@ -102,6 +107,13 @@ const createTradeMachine = () =>
           },
         },
       },
+      quoteNotFound: {
+        on: {
+          FETCHING_QUOTE: {
+            target: 'idle',
+          },
+        },
+      },
       review: {
         on: {
           SUBMIT: {
@@ -169,6 +181,7 @@ const createTradeMachine = () =>
         position: null,
         transactionReview: null,
         transactionStatus: null,
+        quoteError: '',
       }),
     },
   })