diff --git a/.changeset/lucky-tigers-search.md b/.changeset/lucky-tigers-search.md new file mode 100644 index 000000000..4e856529a --- /dev/null +++ b/.changeset/lucky-tigers-search.md @@ -0,0 +1,5 @@ +--- +'@relayprotocol/relay-kit-ui': patch +--- + +Switch to using queryQuote instead of useQuote hook diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx index 32157e655..345d327ca 100644 --- a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx +++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx @@ -20,9 +20,9 @@ import { } from '../../../utils/relayTransaction.js' import type { Token } from '../../../types/index.js' import { - useQuote, useRequests, - useExecutionStatus + useExecutionStatus, + queryQuote } from '@relayprotocol/relay-kit-hooks' import { useRelayClient } from '../../../hooks/index.js' import { EventNames } from '../../../constants/events.js' @@ -34,7 +34,6 @@ import { extractQuoteId } from '../../../utils/quote.js' import { getDeadAddress } from '@relayprotocol/relay-sdk' -import { useQueryClient } from '@tanstack/react-query' import { bitcoin } from '../../../utils/bitcoin.js' import { errorToJSON } from '../../../utils/errors.js' import { sha256 } from '../../../utils/hashing.js' @@ -52,7 +51,7 @@ export type TxHashes = { txHash: string; chainId: number }[] export type ChildrenProps = { progressStep: TransactionProgressStep setProgressStep: Dispatch> - quote: ReturnType['data'] + quote?: Execute | null isFetchingQuote: boolean quoteError: Error | null swapError: Error | null @@ -83,8 +82,8 @@ type Props = { invalidateBalanceQueries: () => void children: (props: ChildrenProps) => ReactNode onSuccess?: ( - quote: ReturnType['data'], - executionStatus: ReturnType['data'] + quote?: Execute | null, + executionStatus?: ReturnType['data'] ) => void onAnalyticEvent?: (eventName: string, data?: any) => void onSwapError?: (error: string, data?: Execute) => void @@ -105,7 +104,9 @@ export const DepositAddressModalRenderer: FC = ({ onAnalyticEvent, onSwapError }) => { - const queryClient = useQueryClient() + const [quoteData, setQuoteData] = useState(null) + const [fetchingQuote, setFetchingQuote] = useState(false) + const [quoteError, setQuoteError] = useState(null) const [progressStep, setProgressStep] = useState( TransactionProgressStep.WaitingForDeposit ) @@ -115,103 +116,8 @@ export const DepositAddressModalRenderer: FC = ({ const providerOptionsContext = useContext(ProviderOptionsContext) const { connector } = useAccount() const deadAddress = getDeadAddress(fromChain?.vmType, fromChain?.id) - const quoteParameters: Parameters['2'] = - 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, - isRefetching, - error: quoteError, - queryKey - } = useQuote( - relayClient ? relayClient : undefined, - undefined, - quoteParameters, - (options, config) => { - const interval = get15MinuteInterval() - const quoteRequestId = sha256({ ...options, interval }) - onAnalyticEvent?.(EventNames.QUOTE_REQUESTED, { - parameters: options, - httpConfig: config, - quote_request_id: quoteRequestId, - chain_id_in: options?.originChainId, - chain_id_out: options?.destinationChainId - }) - }, - ({ steps, details }, options) => { - const interval = get15MinuteInterval() - const quoteRequestId = sha256({ ...options, interval }) - onAnalyticEvent?.(EventNames.QUOTE_RECEIVED, { - parameters: options, - wallet_connector: connector?.name, - quote_id: steps ? extractQuoteId(steps) : undefined, - quote_request_id: quoteRequestId, - amount_in: details?.currencyIn?.amountFormatted, - amount_in_raw: details?.currencyIn?.amount, - currency_in: details?.currencyIn?.currency?.symbol, - chain_id_in: details?.currencyIn?.currency?.chainId, - amount_out: details?.currencyOut?.amountFormatted, - amount_out_raw: details?.currencyOut?.amount, - currency_out: details?.currencyOut?.currency?.symbol, - chain_id_out: details?.currencyOut?.currency?.chainId, - slippage_tolerance_destination_percentage: - details?.slippageTolerance?.destination?.percent, - slippage_tolerance_origin_percentage: - details?.slippageTolerance?.origin?.percent, - steps - }) - }, - { - enabled: Boolean( - open && - progressStep === TransactionProgressStep.WaitingForDeposit && - relayClient && - debouncedInputAmountValue && - debouncedInputAmountValue.length > 0 && - Number(debouncedInputAmountValue) !== 0 && - fromToken !== undefined && - toToken !== undefined - ), - refetchOnWindowFocus: false, - refetchOnReconnect: false, - refetchInterval: false, - refetchOnMount: false, - retryOnMount: false, - staleTime: Infinity - }, - (e: any) => { - const errorMessage = errorToJSON( - e?.response?.data?.message ? new Error(e?.response?.data?.message) : e - ) - const interval = get15MinuteInterval() - const quoteRequestId = sha256({ ...quoteParameters, interval }) - onAnalyticEvent?.(EventNames.QUOTE_ERROR, { - wallet_connector: connector?.name, - error_message: errorMessage, - parameters: quoteParameters, - quote_request_id: quoteRequestId - }) - } - ) - const quote = isFetchingQuote || isRefetching ? undefined : quoteData + const quote = fetchingQuote ? undefined : quoteData const requestId = useMemo( () => extractDepositRequestId(quote?.steps as Execute['steps']), @@ -229,10 +135,93 @@ export const DepositAddressModalRenderer: FC = ({ onAnalyticEvent?.(EventNames.DEPOSIT_ADDRESS_MODAL_CLOSED) } setSwapError(null) - queryClient.invalidateQueries({ queryKey }) + setQuoteData(null) + setFetchingQuote(false) + setQuoteError(null) } else { setProgressStep(TransactionProgressStep.WaitingForDeposit) onAnalyticEvent?.(EventNames.DEPOSIT_ADDRESS_MODAL_OPEN) + const quoteParameters: Parameters['1'] = + 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 interval = get15MinuteInterval() + const quoteRequestId = sha256({ ...quoteParameters, interval }) + onAnalyticEvent?.(EventNames.QUOTE_REQUESTED, { + parameters: quoteParameters, + quote_request_id: quoteRequestId, + chain_id_in: quoteParameters?.originChainId, + chain_id_out: quoteParameters?.destinationChainId + }) + queryQuote(relayClient?.baseApiUrl, quoteParameters, { + headers: { + 'relay-sdk-version': relayClient?.version ?? 'unknown', + 'relay-kit-ui-version': relayClient?.uiVersion ?? 'unknown' + } + }) + .then((quote) => { + setFetchingQuote(false) + if (!open) { + return + } + setQuoteData(quote as Execute) + const interval = get15MinuteInterval() + const quoteRequestId = sha256({ ...quoteParameters, interval }) + onAnalyticEvent?.(EventNames.QUOTE_RECEIVED, { + parameters: quoteParameters, + wallet_connector: connector?.name, + quote_id: quote.steps ? extractQuoteId(quote.steps) : undefined, + quote_request_id: quoteRequestId, + amount_in: quote.details?.currencyIn?.amountFormatted, + amount_in_raw: quote.details?.currencyIn?.amount, + currency_in: quote.details?.currencyIn?.currency?.symbol, + chain_id_in: quote.details?.currencyIn?.currency?.chainId, + amount_out: quote.details?.currencyOut?.amountFormatted, + amount_out_raw: quote.details?.currencyOut?.amount, + currency_out: quote.details?.currencyOut?.currency?.symbol, + chain_id_out: quote.details?.currencyOut?.currency?.chainId, + slippage_tolerance_destination_percentage: + quote.details?.slippageTolerance?.destination?.percent, + slippage_tolerance_origin_percentage: + quote.details?.slippageTolerance?.origin?.percent, + steps: quote.steps + }) + }) + .catch((e) => { + setFetchingQuote(false) + if (!open) { + return + } + const errorMessage = errorToJSON( + e?.response?.data?.message + ? new Error(e?.response?.data?.message) + : e + ) + const interval = get15MinuteInterval() + const quoteRequestId = sha256({ ...quoteParameters, interval }) + onAnalyticEvent?.(EventNames.QUOTE_ERROR, { + wallet_connector: connector?.name, + error_message: errorMessage, + parameters: quoteParameters, + quote_request_id: quoteRequestId + }) + setQuoteError(e) + }) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]) @@ -371,7 +360,7 @@ export const DepositAddressModalRenderer: FC = ({ progressStep, setProgressStep, quote, - isFetchingQuote: isFetchingQuote || isRefetching, + isFetchingQuote: fetchingQuote, quoteError, swapError, setSwapError,