@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
247 lines • 12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DepositAddressModalRenderer = exports.TransactionProgressStep = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const viem_1 = require("viem");
const relayTransaction_js_1 = require("../../../utils/relayTransaction.js");
const relay_kit_hooks_1 = require("@reservoir0x/relay-kit-hooks");
const index_js_1 = require("../../../hooks/index.js");
const events_js_1 = require("../../../constants/events.js");
const RelayKitProvider_js_1 = require("../../../providers/RelayKitProvider.js");
const wagmi_1 = require("wagmi");
const quote_js_1 = require("../../../utils/quote.js");
const relay_sdk_1 = require("@reservoir0x/relay-sdk");
const react_query_1 = require("@tanstack/react-query");
const bitcoin_js_1 = require("../../../utils/bitcoin.js");
const errors_js_1 = require("../../../utils/errors.js");
const hashing_js_1 = require("../../../utils/hashing.js");
const time_js_1 = require("../../../utils/time.js");
var TransactionProgressStep;
(function (TransactionProgressStep) {
TransactionProgressStep[TransactionProgressStep["WaitingForDeposit"] = 0] = "WaitingForDeposit";
TransactionProgressStep[TransactionProgressStep["Validating"] = 1] = "Validating";
TransactionProgressStep[TransactionProgressStep["Success"] = 2] = "Success";
TransactionProgressStep[TransactionProgressStep["Error"] = 3] = "Error";
})(TransactionProgressStep || (exports.TransactionProgressStep = TransactionProgressStep = {}));
const DepositAddressModalRenderer = ({ open, address, fromChain, fromToken, toToken, debouncedInputAmountValue, debouncedOutputAmountValue, recipient, invalidateBalanceQueries, children, onSuccess, onAnalyticEvent, onSwapError }) => {
const queryClient = (0, react_query_1.useQueryClient)();
const [progressStep, setProgressStep] = (0, react_1.useState)(TransactionProgressStep.WaitingForDeposit);
const [swapError, setSwapError] = (0, react_1.useState)(null);
const relayClient = (0, index_js_1.useRelayClient)();
const providerOptionsContext = (0, react_1.useContext)(RelayKitProvider_js_1.ProviderOptionsContext);
const { connector } = (0, wagmi_1.useAccount)();
const deadAddress = (0, relay_sdk_1.getDeadAddress)(fromChain?.vmType, fromChain?.id);
const quoteParameters = fromToken && toToken
? {
user: deadAddress,
originChainId: fromToken.chainId,
destinationChainId: toToken.chainId,
originCurrency: fromToken.address,
destinationCurrency: toToken.address,
recipient: recipient,
tradeType: 'EXACT_INPUT',
appFees: providerOptionsContext.appFees,
amount: (0, viem_1.parseUnits)(debouncedInputAmountValue, fromToken.decimals).toString(),
referrer: relayClient?.source ?? undefined,
useDepositAddress: true
}
: undefined;
const { data: quoteData, isLoading: isFetchingQuote, isRefetching, error: quoteError, queryKey } = (0, relay_kit_hooks_1.useQuote)(relayClient ? relayClient : undefined, undefined, quoteParameters, (options, config) => {
const interval = (0, time_js_1.get15MinuteInterval)();
const quoteRequestId = (0, hashing_js_1.sha256)({ ...options, interval });
onAnalyticEvent?.(events_js_1.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 = (0, time_js_1.get15MinuteInterval)();
const quoteRequestId = (0, hashing_js_1.sha256)({ ...options, interval });
onAnalyticEvent?.(events_js_1.EventNames.QUOTE_RECEIVED, {
parameters: options,
wallet_connector: connector?.name,
quote_id: steps ? (0, quote_js_1.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) => {
const errorMessage = (0, errors_js_1.errorToJSON)(e?.response?.data?.message ? new Error(e?.response?.data?.message) : e);
const interval = (0, time_js_1.get15MinuteInterval)();
const quoteRequestId = (0, hashing_js_1.sha256)({ ...quoteParameters, interval });
onAnalyticEvent?.(events_js_1.EventNames.QUOTE_ERROR, {
wallet_connector: connector?.name,
error_message: errorMessage,
parameters: quoteParameters,
quote_request_id: quoteRequestId
});
});
const quote = isFetchingQuote || isRefetching ? undefined : quoteData;
const requestId = (0, react_1.useMemo)(() => (0, relayTransaction_js_1.extractDepositRequestId)(quote?.steps), [quote]);
const depositAddress = (0, react_1.useMemo)(() => (0, quote_js_1.extractDepositAddress)(quote?.steps), [quote]);
(0, react_1.useEffect)(() => {
if (!open) {
if (quote) {
onAnalyticEvent?.(events_js_1.EventNames.DEPOSIT_ADDRESS_MODAL_CLOSED);
}
setSwapError(null);
queryClient.invalidateQueries({ queryKey });
}
else {
setProgressStep(TransactionProgressStep.WaitingForDeposit);
onAnalyticEvent?.(events_js_1.EventNames.DEPOSIT_ADDRESS_MODAL_OPEN);
}
}, [open]);
const { data: executionStatus } = (0, relay_kit_hooks_1.useExecutionStatus)(relayClient ? relayClient : undefined, {
requestId: requestId ?? undefined,
referrer: relayClient?.source
}, undefined, undefined, {
enabled: requestId !== null && open,
refetchInterval(query) {
const observableStates = ['waiting', 'pending', 'delayed'];
if (!query.state.data?.status ||
(requestId && observableStates.includes(query.state.data?.status))) {
return 1000;
}
return 0;
}
});
(0, react_1.useEffect)(() => {
if (executionStatus?.status === 'failure' ||
executionStatus?.status === 'refund' ||
quoteError) {
const swapError = new Error(executionStatus?.details ??
'Oops! Something went wrong while processing your transaction.');
if (progressStep !== TransactionProgressStep.Error) {
onSwapError?.(swapError.message, quote);
}
setProgressStep(TransactionProgressStep.Error);
onAnalyticEvent?.(events_js_1.EventNames.DEPOSIT_ADDRESS_SWAP_ERROR, {
error_message: (0, errors_js_1.errorToJSON)(executionStatus?.details ?? quoteError),
wallet_connector: connector?.name,
quote_id: requestId,
amount_in: parseFloat(`${debouncedInputAmountValue}`),
currency_in: fromToken?.symbol,
chain_id_in: fromToken?.chainId,
amount_out: parseFloat(`${debouncedOutputAmountValue}`),
currency_out: toToken?.symbol,
chain_id_out: toToken?.chainId,
txHashes: executionStatus?.txHashes ?? []
});
setSwapError(swapError);
invalidateBalanceQueries();
}
else if (executionStatus?.status === 'success') {
if (progressStep !== TransactionProgressStep.Success) {
onSuccess?.(quote, executionStatus);
}
setProgressStep(TransactionProgressStep.Success);
invalidateBalanceQueries();
}
else if (executionStatus?.status === 'pending') {
const timeEstimateMs = ((quote?.details?.timeEstimate ?? 0) +
(fromChain && fromChain.id === bitcoin_js_1.bitcoin.id ? 600 : 0)) *
1000;
const isDelayedTx = timeEstimateMs >
(relayClient?.maxPollingAttemptsBeforeTimeout ?? 30) *
(relayClient?.pollingInterval ?? 5000);
if (isDelayedTx) {
setProgressStep(TransactionProgressStep.Success);
}
else {
setProgressStep(TransactionProgressStep.Validating);
}
}
}, [executionStatus?.status, quoteError]);
const allTxHashes = (0, react_1.useMemo)(() => {
const isRefund = executionStatus?.status === 'refund';
const _allTxHashes = [];
executionStatus?.txHashes?.forEach((txHash) => {
_allTxHashes.push({
txHash,
chainId: isRefund
? fromToken?.chainId
: toToken?.chainId
});
});
executionStatus?.inTxHashes?.forEach((txHash) => {
_allTxHashes.push({
txHash,
chainId: fromToken?.chainId
});
});
return _allTxHashes;
}, [executionStatus?.txHashes, executionStatus?.inTxHashes]);
const { data: transactions, isLoading: isLoadingTransaction } = (0, relay_kit_hooks_1.useRequests)((progressStep === TransactionProgressStep.Success ||
progressStep === TransactionProgressStep.Error) &&
allTxHashes[0]
? {
user: address,
hash: allTxHashes[0]?.txHash
}
: undefined, relayClient?.baseApiUrl, {
enabled: (progressStep === TransactionProgressStep.Success ||
progressStep === TransactionProgressStep.Error) &&
allTxHashes[0]
? true
: false,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
refetchInterval: false,
retryOnMount: false
});
const transaction = transactions[0];
const { fillTime, seconds } = (0, relayTransaction_js_1.calculateFillTime)(transaction);
const timeEstimate = (0, quote_js_1.calculatePriceTimeEstimate)(quote?.details);
const toChain = toToken?.chainId
? relayClient?.chains.find((chain) => chain.id === toToken?.chainId)
: null;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
progressStep,
setProgressStep,
quote,
isFetchingQuote: isFetchingQuote || isRefetching,
quoteError,
swapError,
setSwapError,
allTxHashes,
transaction,
fillTime,
seconds,
requestId,
depositAddress,
executionStatus,
isLoadingTransaction,
toChain,
timeEstimate
}) }));
};
exports.DepositAddressModalRenderer = DepositAddressModalRenderer;
//# sourceMappingURL=DepositAddressModalRenderer.js.map