@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
121 lines • 7.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TransactionModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const TransactionModalRenderer_js_1 = require("./TransactionModalRenderer.js");
const Modal_js_1 = require("../Modal.js");
const index_js_1 = require("../../primitives/index.js");
const ErrorStep_js_1 = require("./steps/ErrorStep.js");
const events_js_1 = require("../../../constants/events.js");
const SwapConfirmationStep_js_1 = require("./steps/SwapConfirmationStep.js");
const SwapSuccessStep_js_1 = require("./steps/SwapSuccessStep.js");
const numbers_js_1 = require("../../../utils/numbers.js");
const quote_js_1 = require("../../../utils/quote.js");
const TransactionModal = (transactionModalProps) => {
const { quote, steps, swapError, setSwapError, open, address, fromToken, toToken, useExternalLiquidity, slippageTolerance, isCanonical, wallet, onOpenChange, onAnalyticEvent, onSuccess, onSwapValidating } = transactionModalProps;
(0, react_1.useEffect)(() => {
onOpenChange(open);
}, [open]);
return ((0, jsx_runtime_1.jsx)(TransactionModalRenderer_js_1.TransactionModalRenderer, { open: open, fromToken: fromToken, toToken: toToken, quote: quote, steps: steps, swapError: swapError, setSwapError: setSwapError, slippageTolerance: slippageTolerance, address: address, wallet: wallet, onValidating: (quote) => {
const steps = quote?.steps;
const details = quote?.details;
const fees = quote?.fees;
onSwapValidating?.({
steps: steps,
fees: fees,
details: details
});
}, onSuccess: (quote, steps) => {
const details = quote?.details;
const fees = quote?.fees;
const extraData = {
amount_in: parseFloat(`${details?.currencyIn?.amountFormatted}`),
amount_out: parseFloat(`${details?.currencyOut?.amountFormatted}`)
};
if (fees?.gas?.amountFormatted) {
extraData.gas_fee = parseFloat(fees.gas.amountFormatted);
}
if (fees?.relayer?.amountFormatted) {
extraData.relayer_fee = parseFloat(fees.relayer.amountFormatted);
}
const quoteId = steps ? (0, quote_js_1.extractQuoteId)(steps) : undefined;
onAnalyticEvent?.(events_js_1.EventNames.SWAP_SUCCESS, {
...extraData,
chain_id_in: fromToken?.chainId,
currency_in: fromToken?.symbol,
chain_id_out: toToken?.chainId,
currency_out: toToken?.symbol,
currency_in_usd: details?.currencyIn?.amountUsd,
currency_out_usd: details?.currencyOut?.amountUsd,
is_canonical: useExternalLiquidity,
quote_id: quoteId,
txHashes: steps
?.map((step) => {
let txHashes = [];
step.items?.forEach((item) => {
if (item.txHashes) {
txHashes = txHashes.concat([
...(item.txHashes ?? []),
...(item.internalTxHashes ?? [])
]);
}
});
return txHashes;
})
.flat(),
steps
});
onSuccess?.({
steps: steps,
fees: fees,
details: details
});
}, children: (rendererProps) => {
return ((0, jsx_runtime_1.jsx)(InnerTransactionModal, { address: address, onAnalyticEvent: onAnalyticEvent, isCanonical: isCanonical, ...transactionModalProps, ...rendererProps }));
} }));
};
exports.TransactionModal = TransactionModal;
const InnerTransactionModal = ({ open, onOpenChange, fromToken, toToken, quote, address, swapError, setSwapError, progressStep, setProgressStep, steps, setSteps, currentStep, setCurrentStep, setCurrentStepItem, allTxHashes, setAllTxHashes, transaction, executionTime, executionTimeSeconds, setStartTimestamp, onAnalyticEvent, timeEstimate, isCanonical, fromChain, toChain, isLoadingTransaction, setQuote, requestId }) => {
(0, react_1.useEffect)(() => {
if (!open) {
if (currentStep) {
onAnalyticEvent?.(events_js_1.EventNames.SWAP_MODAL_CLOSED);
}
setCurrentStep(null);
setCurrentStepItem(null);
setAllTxHashes([]);
setStartTimestamp(0);
setSwapError(null);
setSteps(null);
setQuote(null);
}
else {
setProgressStep(TransactionModalRenderer_js_1.TransactionProgressStep.Confirmation);
onAnalyticEvent?.(events_js_1.EventNames.SWAP_MODAL_OPEN);
}
}, [open]);
const details = quote?.details;
const fromAmountFormatted = details?.currencyIn?.amount
? (0, numbers_js_1.formatBN)(details?.currencyIn?.amount, 6, fromToken?.decimals, false)
: '';
const toAmountFormatted = details?.currencyOut?.amount
? (0, numbers_js_1.formatBN)(details?.currencyOut.amount, 6, toToken?.decimals, false)
: '';
return ((0, jsx_runtime_1.jsx)(Modal_js_1.Modal, { trigger: null, open: open, onOpenChange: onOpenChange, css: {
overflow: 'hidden',
p: '4',
maxWidth: '412px !important'
}, showCloseButton: true, onPointerDownOutside: (e) => {
const dynamicModalElements = Array.from(document.querySelectorAll('#dynamic-send-transaction'));
const clickedInsideDynamicModal = dynamicModalElements.some((el) => e.target ? el.contains(e.target) : false);
if (clickedInsideDynamicModal && dynamicModalElements.length > 0) {
e.preventDefault();
}
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
width: '100%',
height: '100%',
gap: '3'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: { mb: 8 }, children: "Transaction Details" }), progressStep === TransactionModalRenderer_js_1.TransactionProgressStep.Confirmation ? ((0, jsx_runtime_1.jsx)(SwapConfirmationStep_js_1.SwapConfirmationStep, { fromToken: fromToken, toToken: toToken, fromChain: fromChain, toChain: toChain, fromAmountFormatted: fromAmountFormatted, toAmountFormatted: toAmountFormatted, quote: quote, steps: steps })) : null, progressStep === TransactionModalRenderer_js_1.TransactionProgressStep.Success ? ((0, jsx_runtime_1.jsx)(SwapSuccessStep_js_1.SwapSuccessStep, { fromToken: fromToken, toToken: toToken, fromAmountFormatted: fromAmountFormatted, toAmountFormatted: toAmountFormatted, allTxHashes: allTxHashes, transaction: transaction, fillTime: executionTime ?? '', seconds: executionTimeSeconds ?? 0, onOpenChange: onOpenChange, timeEstimate: timeEstimate?.formattedTime, isCanonical: isCanonical, details: details, isLoadingTransaction: isLoadingTransaction, requestId: requestId })) : null, progressStep === TransactionModalRenderer_js_1.TransactionProgressStep.Error ? ((0, jsx_runtime_1.jsx)(ErrorStep_js_1.ErrorStep, { error: swapError, allTxHashes: allTxHashes, address: address, onOpenChange: onOpenChange, transaction: transaction, fromChain: fromChain, toChain: toChain })) : null] }) }));
};
//# sourceMappingURL=TransactionModal.js.map