diff --git a/.changeset/clever-geese-fly.md b/.changeset/clever-geese-fly.md new file mode 100644 index 00000000..8e2b697e --- /dev/null +++ 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 index 0b33d53c..a2309a5d 100644 --- 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?: Partial, + 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 index 78e46fc2..0ef69772 100644 --- 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 = ({ 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 = ({ 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 index f400cbe0..97e5daf2 100644 --- 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 = ({ 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 = ({ 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 = ({ 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 index 2b58a406..9d9a8e03 100644 --- a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx +++ b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx @@ -488,6 +488,16 @@ const SwapWidgetRenderer: FC = ({ 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 index 442be28a..369d3a2f 100644 --- 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',