Merge pull request #425 from reservoirprotocol/pedro/relay-6670-add-q…

…uote_error-analytics-to-posthog Add quote error analytics to posthog
reservoirprotocol · Jan 8, 2025 · 70dbc2d · 70dbc2d
2 parents a140e71 + 16034fc
commit 70dbc2d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 17 deletions.
diff --git a/.changeset/clever-geese-fly.md b/.changeset/clever-geese-fly.md
@@ -0,0 +1,6 @@
+---
+'@reservoir0x/relay-kit-hooks': patch
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add quote_error analytics event
diff --git a/packages/hooks/src/hooks/useQuote.ts b/packages/hooks/src/hooks/useQuote.ts
@@ -62,7 +62,8 @@ export default function (
   options?: QuoteBody,
   onRequest?: () => void,
   onResponse?: (data: Execute) => void,
-  queryOptions?: Partial<QueryOptions>
+  queryOptions?: Partial<QueryOptions>,
+  onError?: (e: any) => void
 ) {
   const queryKey = ['useQuote', options]
   const response = (useQuery as QueryType)({
@@ -73,9 +74,14 @@ export default function (
         options.referrer = client.source
       }
       const promise = queryQuote(client?.baseApiUrl, options)
-      promise.then((response: any) => {
-        onResponse?.(response)
-      })
+      promise
+        .then((response: any) => {
+          onResponse?.(response)
+        })
+        .catch((e) => {
+          onError?.(e)
+          throw e
+        })
       return promise
     },
     enabled: client !== undefined && options !== undefined,

diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
@@ -108,7 +108,25 @@ export const DepositAddressModalRenderer: FC<Props> = ({
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const { connector } = useAccount()
   const deadAddress = getDeadAddress(fromChain?.vmType, fromChain?.id)
-
+  const _quoteData =
+    fromToken && toToken
+      ? {
+          user: deadAddress,
+          originChainId: fromToken.chainId,
+          destinationChainId: toToken.chainId,
+          originCurrency: fromToken.address,
+          destinationCurrency: toToken.address,
+          recipient: recipient as string,
+          tradeType: 'EXACT_INPUT',
+          appFees: providerOptionsContext.appFees,
+          amount: parseUnits(
+            debouncedInputAmountValue,
+            fromToken.decimals
+          ).toString(),
+          referrer: relayClient?.source ?? undefined,
+          useDepositAddress: true
+        }
+      : undefined
   const {
     data: quoteData,
     isLoading: isFetchingQuote,
@@ -168,6 +186,16 @@ export const DepositAddressModalRenderer: FC<Props> = ({
       refetchOnMount: false,
       retryOnMount: false,
       staleTime: Infinity
+    },
+    (e: any) => {
+      const errorMessage = e?.response?.data?.message
+        ? new Error(e?.response?.data?.message)
+        : e
+      onAnalyticEvent?.(EventNames.QUOTE_ERROR, {
+        wallet_connector: connector?.name,
+        error_message: errorMessage,
+        parameters: _quoteData
+      })
     }
   )
 

diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx
@@ -154,17 +154,7 @@ export const TransactionModalRenderer: FC<Props> = ({
   const walletClient = useWalletClient()
   const { connector } = useAccount()
   const deadAddress = getDeadAddress(fromChain?.vmType, fromChain?.id)
-
-  const {
-    data: quote,
-    isLoading: isFetchingQuote,
-    isRefetching: isRefetchingQuote,
-    executeQuote: executeSwap,
-    error: quoteError,
-    dataUpdatedAt: quoteUpdatedAt
-  } = useQuote(
-    relayClient ? relayClient : undefined,
-    wallet ?? walletClient.data,
+  const _quoteData =
     fromToken && toToken
       ? {
           user: address ?? deadAddress,
@@ -188,7 +178,18 @@ export const TransactionModalRenderer: FC<Props> = ({
           referrer: relayClient?.source ?? undefined,
           useExternalLiquidity
         }
-      : undefined,
+      : undefined
+  const {
+    data: quote,
+    isLoading: isFetchingQuote,
+    isRefetching: isRefetchingQuote,
+    executeQuote: executeSwap,
+    error: quoteError,
+    dataUpdatedAt: quoteUpdatedAt
+  } = useQuote(
+    relayClient ? relayClient : undefined,
+    wallet ?? walletClient.data,
+    _quoteData,
     () => {},
     ({ steps, details }) => {
       onAnalyticEvent?.(EventNames.SWAP_EXECUTE_QUOTE_RECEIVED, {
@@ -227,6 +228,16 @@ export const TransactionModalRenderer: FC<Props> = ({
         debouncedOutputAmountValue === amountOutputValue
           ? 30000
           : undefined
+    },
+    (e: any) => {
+      const errorMessage = e?.response?.data?.message
+        ? new Error(e?.response?.data?.message)
+        : e
+      onAnalyticEvent?.(EventNames.QUOTE_ERROR, {
+        wallet_connector: connector?.name,
+        error_message: errorMessage,
+        parameters: _quoteData
+      })
     }
   )
 

diff --git a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx
@@ -488,6 +488,16 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
         debouncedOutputAmountValue === amountOutputValue
           ? 12000
           : undefined
+    },
+    (e: any) => {
+      const errorMessage = e?.response?.data?.message
+        ? new Error(e?.response?.data?.message)
+        : e
+      onAnalyticEvent?.(EventNames.QUOTE_ERROR, {
+        wallet_connector: connector?.name,
+        error_message: errorMessage,
+        parameters: _quoteData
+      })
     }
   )
 

diff --git a/packages/ui/src/constants/events.ts b/packages/ui/src/constants/events.ts
@@ -1,6 +1,7 @@
 export const EventNames = {
   SWAP_BUTTON_CLICKED: 'SWAP_BUTTON_CLICKED',
   SWAP_CTA_CLICKED: 'SWAP_CTA_CLICKED',
+  QUOTE_ERROR: 'QUOTE_ERROR',
   SWAP_ERROR: 'SWAP_ERROR',
   SWAP_INPUT_FOCUSED: 'SWAP_INPUT_FOCUSED',
   SWAP_OUTPUT_FOCUSED: 'SWAP_OUTPUT_FOCUSED',